/*
Theme Name: Krzysztof Pilch – OceanWP Child
Theme URI: https://krzysztofpilch.pl/
Description: Child theme motywu OceanWP dla krzysztofpilch.pl. Miejsce na własny kod (header, footer, szablon bloga) zastępujący sekcje budowane wcześniej w Elementorze.
Author: Ecomgo
Template: oceanwp
Version: 0.1.0
Text Domain: krzysztofpilch-child
*/

/* Parent stylesheet jest ładowany z functions.php, nie przez @import. */

/* Własny CSS dopisuj poniżej tej linii. */

/* Zabezpieczenie: OceanWP ma w skompilowanym CSS regułę
   `html{overflow-x:hidden}`, ale w praktyce (np. na /produkty/) nie
   zawsze faktycznie obowiązuje (computed style bywa "visible" —
   prawdopodobnie przez kolejność/łączenie CSS w LiteSpeed Cache).
   Każdy przyszły element "full-bleed" (100vw + ujemny margines) jest
   więc jedno drobne niedopatrzenie od realnego poziomego scrolla na
   całej stronie. Ustawiamy to jawnie sami, zamiast polegać wyłącznie
   na regule motywu. */
html { overflow-x: hidden; }

/* ==========================================================================
   Naprawa formularzy WooCommerce (checkout, adresy w "Moje konto") —
   NIE dotyczy naszych własnych komponentów (.kp-*), to poprawka
   domyślnego, natywnego formularza WooCommerce/motywu, zepsutego
   już wcześniej, niezależnie od tej pracy.
   ========================================================================== */

/* Realny bug: WooCommerce chowa pole "Województwo" (niewymagane dla
   Polski) przez inline style="display:none" — samo pole zostaje
   jednak w DOM-ie z klasą `form-row-first` (float:left, 48% szer.).
   Sąsiadujący "Kod pocztowy" ma `form-row-last` (float:right, 48%) —
   liczy na to, że stoi OBOK swojego "form-row-first". Gdy ten jest
   niewidoczny, "Kod pocztowy" nie ma z czym się sparować i floatuje
   samotnie w prawo, zostawiając wielką pustą przestrzeń po lewej —
   dokładnie to widać jako "porozbijane", oderwane od reszty pole.
   Naprawa: gdy poprzednik jest ukryty, pole-partner ma zachowywać się
   jak pełnej szerokości (form-row-wide), nie jak połówka pary. */
.woocommerce-checkout .form-row-first[style*="display: none"] + .form-row-last,
.woocommerce-account .form-row-first[style*="display: none"] + .form-row-last {
	float: none;
	width: 100%;
}

/* ==========================================================================
   Listing sklepu (/produkty/) — wg Figma sklep-product-listing
   ========================================================================== */

.kp-shop {
	--kp-green: #137d45;
	--kp-green-hover: #00a64e;
	--kp-text: #231f20;
	--kp-text-muted: #505056;
	--kp-text-faint: #999;
	--kp-border: #e7eaef;
	--kp-bg-soft: #f5f6f7;
	background: #fff;
	font-family: 'Roboto', sans-serif;
	color: var(--kp-text);
}

/* Hero i biały obszar katalogu mają tło "pod linijkę" (full-bleed),
   niezależnie od tego, jak szeroki jest kontener motywu wokół treści —
   klasyczna sztuczka: 100vw + wycentrowanie ujemnym marginesem, odporna
   na dowolny rodzic z max-width. */
.kp-shop__hero,
.kp-shop__catalog {
	/* Realny bug: mimo globalnego resetu `*{box-sizing:border-box}`
	   w motywie, ten element renderował się z box-sizing:content-box
	   (coś go nadpisywało) — więc padding (24px+24px) DOLICZAŁ się do
	   width:100vw zamiast być w niej zawarty, dając realny poziomy
	   scroll o dokładnie tyle px, ile wynosił padding. Jawne
	   border-box tu gwarantuje poprawność niezależnie od tego, co
	   nadpisuje regułę globalną. */
	box-sizing: border-box;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.kp-shop__hero {
	background-image: linear-gradient(90deg, rgba(19, 125, 69, .133) 0%, rgba(0, 0, 0, .267) 100%), linear-gradient(90deg, rgb(10, 66, 37) 0%, rgb(10, 66, 37) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 80px 24px;
	text-align: center;
}
.kp-shop__hero-badge {
	display: inline-flex;
	background: var(--kp-green);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
}
.kp-shop__hero-title {
	font-family: 'Lora', serif;
	font-weight: 700;
	font-size: 48px;
	color: #fff;
	margin: 0;
	line-height: 1.2;
}
.kp-shop__hero-desc {
	font-size: 18px;
	line-height: 1.6;
	color: var(--kp-bg-soft);
	opacity: .9;
	max-width: 720px;
	margin: 0;
}

.kp-shop__catalog-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 24px 80px;
}

/* Pasek filtrów: kategorie-pigułki + sortowanie */
.kp-shop .kp-shop__filter-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--kp-border);
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.kp-shop .kp-shop__tabs {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}
.kp-shop .kp-shop__tab {
	display: inline-flex;
	background: #fff;
	border: 1px solid var(--kp-border);
	color: var(--kp-text-muted);
	font-weight: 500;
	font-size: 14px;
	padding: 8px 16px;
	border-radius: 20px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.kp-shop .kp-shop__tab:hover { color: var(--kp-green); border-color: var(--kp-green); }
.kp-shop .kp-shop__tab.is-active {
	background: var(--kp-green);
	border-color: var(--kp-green);
	color: #fff;
	font-weight: 600;
}
.kp-shop .kp-shop__tab.is-active:hover { color: #fff; }

.kp-shop .kp-shop__sort { display: flex; align-items: center; gap: 8px; margin: 0; flex-shrink: 0; }
.kp-shop .kp-shop__sort label { font-size: 14px; color: var(--kp-text-muted); white-space: nowrap; }
.kp-shop .kp-shop__select-wrap { position: relative; display: inline-flex; align-items: center; }
.kp-shop .kp-shop__select-wrap select {
	appearance: none;
	-webkit-appearance: none;
	background: #fff;
	border: 1px solid var(--kp-border);
	border-radius: 6px;
	color: var(--kp-text);
	font-weight: 600;
	font-size: 14px;
	padding: 8px 32px 8px 16px;
	cursor: pointer;
}
.kp-shop .kp-shop__select-wrap select:hover,
.kp-shop .kp-shop__select-wrap select:focus { border-color: var(--kp-green); outline: none; }
.kp-shop .kp-shop__select-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--kp-text-muted);
}

/* Siatka produktów — 3 kolumny na desktopie */
.kp-shop .kp-shop__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 1100px) and (min-width: 769px) {
	.kp-shop .kp-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.kp-shop .kp-shop__grid { grid-template-columns: 1fr; }
}

/* Karta produktu — identyczny wzorzec co .kp-book__related-card */
.kp-shop .kp-shop__card {
	background: #fff;
	border: 1px solid var(--kp-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,.04);
	display: flex;
	flex-direction: column;
}
.kp-shop .kp-shop__card[hidden] { display: none; }
/* aspect-ratio zamiast sztywnej wysokości: przy height:200px sama
   proporcja pola na zdjęcie pływała od ~1,9:1 (desktop, 3 kolumny) do
   ~2,3:1 (2 kolumny) — bo szerokość karty się zmienia, a wysokość nie.
   Klient nie miał więc JEDNEJ stałej liczby, do której mógłby
   przygotować zdjęcia — kadr zawsze wychodził inny. Stała proporcja
   1,91:1 (dokładnie format 1200×630, polecany do zdjęć produktów —
   patrz dokumentacja/wiadomość do klienta) naprawia to raz na zawsze.
   Obrazek w środku NIE może mieć height:100% — to procent liczony
   względem wysokości rodzica, a rodzic ma height:auto (bo to on ma
   aspect-ratio). W kolumnowym flexie to zapętla przeglądarce
   wyliczenia i w efekcie ignoruje aspect-ratio, dając kwadrat zamiast
   1,91:1 (potwierdzone pomiarem na żywo). Zdjęcie musi więc wyjść
   z normalnego przepływu przez position:absolute — wtedy jego wymiary
   liczą się względem już gotowego pudełka rodzica, bez pętli. */
.kp-shop .kp-shop__card-image { position: relative; display: block; aspect-ratio: 1.91 / 1; overflow: hidden; flex-shrink: 0; }
.kp-shop .kp-shop__card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-shop .kp-shop__card-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.kp-shop .kp-shop__badge {
	display: inline-flex;
	align-self: flex-start;
	background: rgba(19,125,69,.08);
	color: var(--kp-green);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 4px;
	letter-spacing: .3px;
}
.kp-shop .kp-shop__card-title {
	color: var(--kp-text);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kp-shop .kp-shop__card-desc {
	color: var(--kp-text-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kp-shop .kp-shop__card-price { display: flex; align-items: baseline; gap: 8px; }
.kp-shop .kp-shop__price-now { color: var(--kp-green); font-weight: 700; font-size: 20px; }
.kp-shop .kp-shop__price-old { color: var(--kp-text-faint); font-size: 14px; text-decoration: line-through; }
.kp-shop .kp-shop__card-actions { display: flex; gap: 12px; padding-top: 8px; margin-top: auto; }
.kp-shop .kp-shop__btn {
	flex: 1;
	text-align: center;
	padding: 10px 16px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid var(--kp-green);
	transition: background-color .15s ease, color .15s ease;
}
.kp-shop .kp-shop__btn--primary { background: var(--kp-green); color: #fff; }
.kp-shop .kp-shop__btn--primary:hover { background: var(--kp-green-hover); border-color: var(--kp-green-hover); color: #fff; }
.kp-shop .kp-shop__btn--secondary { background: #fff; color: var(--kp-green); }
.kp-shop .kp-shop__btn--secondary:hover { background: var(--kp-bg-soft); color: var(--kp-green); }

/* Paginacja */
.kp-shop .kp-shop__pagination { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 32px; }
.kp-shop .kp-shop__load-more {
	display: inline-flex;
	background: var(--kp-green);
	color: #fff;
	border: none;
	padding: 14px 32px;
	border-radius: 25px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}
.kp-shop .kp-shop__load-more:hover, .kp-shop .kp-shop__load-more:focus { background: var(--kp-green-hover); color: #fff; border-radius: 25px; }
.kp-shop .kp-shop__load-more[hidden] { display: none; }
.kp-shop .kp-shop__counter { color: var(--kp-text-faint); font-size: 13px; margin: 0; }

@media (max-width: 768px) {
	.kp-shop__hero { padding: 56px 20px; gap: 16px; }
	.kp-shop__hero-title { font-size: 32px; }
	.kp-shop__hero-desc { font-size: 15px; }
	.kp-shop__catalog-inner { padding: 32px 16px 56px; }
	.kp-shop .kp-shop__filter-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
	/* Jawne width:100% zamiast polegania samo na align-items:stretch —
	   dziecko-flex z display:flex (kolejny kontener flex w środku) czasem
	   nie rozciąga się do szerokości rodzica i wraca do szerokości treści,
	   rozpychając stronę w poziomie (ten sam efekt co domyślne
	   min-width:auto — patrz .kp-book__promo > * wyżej, tu efekt idzie
	   dalej niż samo min-width:0, więc dokładamy jawną szerokość). */
	.kp-shop .kp-shop__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; min-width: 0; width: 100%; }
	.kp-shop .kp-shop__sort { justify-content: space-between; min-width: 0; width: 100%; }
}

/* ==========================================================================
   Karta produktu fizycznego (książki) — wg Figma sklep-book-desktop/mobile
   ========================================================================== */

.kp-book {
	--kp-green: #137d45;
	--kp-green-hover: #00a64e;
	--kp-text: #231f20;
	--kp-text-muted: #505056;
	--kp-text-faint: #999;
	--kp-border: #e7eaef;
	--kp-bg-soft: #f5f6f7;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 24px 80px;
	font-family: 'Roboto', sans-serif;
	color: var(--kp-text);
}

/*
 * Uwaga o specyficzności: globalny CSS Elementora
 * (`.elementor-kit-1722 button, input[type="submit"] {...}`, zielone
 * "pigułki") ma specyficzność (0,1,1) i nadpisywał nasze przyciski,
 * gdy używaliśmy samych klas (0,1,0). Dlatego KAŻDY selektor niżej
 * jest zagnieżdżony pod `.kp-book`, żeby bić tę regułę w sposób
 * czysty — bez `!important`.
 *
 * Ten sam globalny styl Elementora ustawia też `letter-spacing`
 * (0.5–3px zależnie od szerokości ekranu) na KAŻDYM `<button>` — nie
 * tylko na naszych "pigułkowych" CTA, ale i na mniej oczywistych
 * przyciskach jak taby czy ilość. Zresetowane tu zbiorczo dla
 * wszystkich naszych komponentów-przycisków z widocznym tekstem
 * (przyciski tylko-z-ikoną, jak .kp-icon-btn, nie mają tego problemu —
 * nie ma tam tekstu, na który mogłoby to wpłynąć).
 */
.kp-book .kp-book__tab,
.kp-book .kp-book__btn,
.kp-book .kp-book__qty-btn,
.kp-workshop .kp-workshop__tab,
.kp-workshop .kp-workshop__btn,
.kp-shop .kp-shop__tab,
.kp-shop .kp-shop__btn,
.kp-shop .kp-shop__load-more,
.kp-faq .kp-faq__header-row {
	letter-spacing: normal;
}

/* ==========================================================================
   Komponent: okrągły przycisk z ikoną (.kp-icon-btn) — JEDEN wspólny
   wygląd używany wszędzie: strzałki galerii, strzałki karuzeli
   (opinie/powiązane), strzałki i zamknięcie lightboxa. Białe kółko,
   ciemna ikona, delikatny cień — niezależnie od tła (jasnego czy
   ciemnego jak w lightboxie).
   ========================================================================== */
.kp-book .kp-icon-btn,
.kp-workshop .kp-icon-btn,
.kp-faq .kp-icon-btn,
.kp-lightbox .kp-icon-btn {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #fff;
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0,0,0,.08);
	line-height: 0;
	color: #231f20;
}
.kp-book .kp-icon-btn:hover, .kp-book .kp-icon-btn:focus,
.kp-workshop .kp-icon-btn:hover, .kp-workshop .kp-icon-btn:focus,
.kp-faq .kp-icon-btn:hover, .kp-faq .kp-icon-btn:focus,
.kp-lightbox .kp-icon-btn:hover, .kp-lightbox .kp-icon-btn:focus {
	background: #fff;
	border-radius: 999px;
	color: #231f20;
}
.kp-book .kp-icon-btn svg,
.kp-workshop .kp-icon-btn svg,
.kp-faq .kp-icon-btn svg,
.kp-lightbox .kp-icon-btn svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }

/* Realny bug: `.kp-icon-btn { display: flex }` (specyficzność 0,2,0)
   ma wyższą specyficzność niż domyślna reguła przeglądarki dla atrybutu
   `hidden` (`[hidden]{display:none}`, specyficzność 0,1,0) — więc
   NADPISYWAŁA natywne ukrywanie i przycisk zostawał widoczny mimo
   `hidden`. Trzeba jawnie przywrócić display:none dla [hidden]. */
.kp-book .kp-icon-btn[hidden],
.kp-workshop .kp-icon-btn[hidden],
.kp-faq .kp-icon-btn[hidden],
.kp-lightbox .kp-icon-btn[hidden] { display: none; }

.kp-book .kp-book__breadcrumbs {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 13px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.kp-book .kp-book__breadcrumbs a { color: var(--kp-text-faint); text-decoration: none; }
.kp-book .kp-book__breadcrumbs a:hover { color: var(--kp-green); }
.kp-book .kp-book__breadcrumbs span { color: var(--kp-text-faint); }
.kp-book .kp-book__breadcrumb-current { color: var(--kp-green); font-weight: 600; }

.kp-book .kp-book__promo {
	display: grid;
	grid-template-columns: minmax(280px, 600px) 1fr;
	gap: 48px;
	margin-bottom: 48px;
	align-items: start;
}
/* Realny bug: elementy siatki (grid items) mają domyślnie
   `min-width: auto`, czyli potrafią rozepchnąć swoją kolumnę do
   rozmiaru zawartości (tu: box z aspect-ratio), ignorując faktyczną
   szerokość kolumny — na mobile dawało to poziomy scroll całej strony.
   Klasyczna, dobrze znana poprawka: jawne min-width: 0 na dzieciach grida. */
.kp-book .kp-book__promo > * { min-width: 0; }

/* Galeria — product-image-gallery (Figma: 600×600, main image 600×480) */
.kp-book .kp-book__gallery { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kp-book .kp-book__main-image {
	position: relative;
	border: 1px solid var(--kp-border);
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 600 / 480;
	background: var(--kp-bg-soft);
}
.kp-book .kp-book__main-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-book .kp-book__zoom-btn { position: absolute; top: 15px; right: 15px; }
.kp-book .kp-book__nav--left { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); }
.kp-book .kp-book__nav--right { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); }
.kp-book .kp-book__thumbs { display: flex; gap: 12px; overflow-x: auto; }
.kp-book .kp-book__thumb {
	flex: 0 0 auto;
	width: 132px;
	height: 88px;
	border-radius: 12px;
	border: 1px solid var(--kp-border);
	background: none;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	line-height: 0;
}
.kp-book .kp-book__thumb.is-active { border: 2px solid var(--kp-green); }
.kp-book .kp-book__thumb:hover, .kp-book .kp-book__thumb:focus { background: none; border-radius: 12px; }
.kp-book .kp-book__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Detale */
.kp-book .kp-book__details { display: flex; flex-direction: column; gap: 24px; }
.kp-book .kp-book__header-meta { display: flex; flex-direction: column; gap: 12px; }
.kp-book .kp-book__badge {
	display: inline-flex;
	align-self: flex-start;
	background: rgba(19,125,69,.08);
	color: var(--kp-green);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 4px;
	letter-spacing: .3px;
}
.kp-book .kp-book__title { font-size: 36px; font-weight: 700; margin: 0; line-height: 1.2; }
.kp-book .kp-book__author { color: var(--kp-text-muted); font-size: 16px; font-weight: 500; margin: 0; }
.kp-book .kp-book__rating { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.kp-book .kp-icon--star { color: #fbbf24; fill: #fbbf24; }
.kp-book .kp-book__rating strong { font-size: 15px; }
.kp-book .kp-book__rating span { color: var(--kp-text-faint); font-size: 14px; }
.kp-book .kp-book__excerpt {
	color: var(--kp-text-muted);
	font-size: 16px;
	line-height: 1.7;
	text-align: justify;
	text-align-last: left; /* ostatnia linia akapitu wyrównana do lewej, nie rozciągnięta na siłę na całą szerokość */
	hyphens: auto; /* bez tego wyjustowany tekst przy węższej kolumnie robi duże, brzydkie odstępy między słowami */
}
.kp-book .kp-book__excerpt p { margin: 0 0 14px; }
.kp-book .kp-book__excerpt p:last-child { margin-bottom: 0; }

.kp-book .kp-book__price-block { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kp-book .kp-book__price { color: var(--kp-green); font-size: 32px; font-weight: 700; }
.kp-book .kp-book__price-old { color: var(--kp-text-faint); font-size: 18px; text-decoration: line-through; }
.kp-book .kp-book__save-badge { background: #e1f5fe; color: #0288d1; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 4px; }

.kp-book .kp-book__cart-form { display: flex; flex-direction: column; gap: 24px; }
.kp-book .kp-book__quantity { display: flex; align-items: center; gap: 16px; }
.kp-book .kp-book__quantity-label { font-weight: 700; font-size: 14px; }
.kp-book .kp-book__quantity-picker { display: inline-flex; align-items: center; border: 1px solid var(--kp-border); border-radius: 8px; background: #fff; overflow: hidden; }
.kp-book .kp-book__qty-btn {
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 0;
	background: none;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kp-text-muted);
	cursor: pointer;
	line-height: 1;
}
.kp-book .kp-book__qty-btn:hover, .kp-book .kp-book__qty-btn:focus { background: var(--kp-bg-soft); border-radius: 0; color: var(--kp-text-muted); }
.kp-book .kp-book__qty-input {
	width: 40px;
	height: 40px;
	border: none;
	background: var(--kp-bg-soft);
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	color: var(--kp-text);
	-moz-appearance: textfield;
	padding: 0;
}
.kp-book .kp-book__qty-input::-webkit-outer-spin-button,
.kp-book .kp-book__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.kp-book .kp-book__specs { display: flex; flex-direction: column; gap: 12px; background: #fff; border-radius: 8px; padding: 20px; }
.kp-book .kp-book__spec-row { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.kp-book .kp-book__spec-row .kp-icon { flex-shrink: 0; color: var(--kp-green); }
.kp-book .kp-book__spec-row p { margin: 0; }

.kp-book .kp-book__cta-row { display: flex; gap: 16px; }
.kp-book .kp-book__btn {
	flex: 1;
	text-align: center;
	padding: 16px 32px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	border: 2px solid var(--kp-green);
	transition: background-color .15s ease, color .15s ease;
}
.kp-book .kp-book__btn--primary { background: var(--kp-green); color: #fff; }
.kp-book .kp-book__btn--primary:hover { background: var(--kp-green-hover); border-color: var(--kp-green-hover); color: #fff; }
.kp-book .kp-book__btn--secondary { background: #fff; color: var(--kp-green); }
.kp-book .kp-book__btn--secondary:hover { background: var(--kp-bg-soft); color: var(--kp-green); }
.kp-book .kp-book__btn--small { padding: 10px 16px; border-radius: 6px; font-size: 13px; }
.kp-book .kp-book__stock-status { color: #c0392b; font-weight: 600; }

/* Taby */
/* Pasek zakładek: zawsze w JEDNEJ linii, przewijany poziomo zamiast
   zawijania na kolejne wiersze (realny problem na węższych ekranach —
   6 zakładek nie mieści się w jednym rzędzie i łamało się na 2 linie).
   Scrollbar ukryty (scrollbar-width/::-webkit-scrollbar) — sama
   ucięta ostatnia zakładka na krawędzi już sygnalizuje, że jest więcej
   treści w prawo, jak w typowych poziomych paskach zakładek. */
.kp-book .kp-book__tabs-nav {
	display: flex;
	gap: 32px;
	border-bottom: 2px solid var(--kp-border);
	margin-bottom: 24px;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.kp-book .kp-book__tabs-nav::-webkit-scrollbar { display: none; }
.kp-book .kp-book__tab {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0 0 8px;
	font-size: 16px;
	font-weight: 500;
	color: var(--kp-text-muted);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	white-space: nowrap;
	flex-shrink: 0;
}
.kp-book .kp-book__tab.is-active { color: var(--kp-green); font-weight: 700; border-bottom-color: var(--kp-green); }
.kp-book .kp-book__tab:hover, .kp-book .kp-book__tab:focus { background: none; border-radius: 0; color: var(--kp-green); }
.kp-book .kp-book__tab.is-active:hover, .kp-book .kp-book__tab.is-active:focus { color: var(--kp-green); }
.kp-book .kp-book__tab-panel { color: var(--kp-text-muted); font-size: 15px; line-height: 1.6; }
.kp-book .kp-book__tab-panel h2, .kp-book .kp-book__tab-panel h3 { color: var(--kp-text); font-size: 22px; margin: 0 0 12px; }
.kp-book .kp-book__tab-panel ul { padding-left: 20px; }
.kp-book .kp-book__tab-panel li { margin-bottom: 8px; }

/* Dodatkowe sekcje opisu książki (Opis/Spis treści) — treść z panelu
   admina "Dane książki", każda opcjonalna. */
.kp-book .kp-book__prose p,
.kp-book .kp-book__reason p {
	text-align: justify;
	text-align-last: left; /* ostatnia linia akapitu wyrównana do lewej, nie rozciągnięta na siłę na całą szerokość */
	hyphens: auto; /* bez tego wyjustowany tekst w węższej kolumnie robi brzydkie, duże odstępy między słowami */
}
.kp-book .kp-book__prose p { margin: 0 0 16px; }
.kp-book .kp-book__prose p:last-child { margin-bottom: 0; }
.kp-book .kp-book__section { margin-top: 40px; }
.kp-book .kp-book__section:first-child { margin-top: 0; }

/* Akcent pod głównymi nagłówkami sekcji (H2) — krótka zielona kreska,
   ten sam zabieg co pod tytułami zakładek (.kp-book__tab.is-active). */
.kp-book .kp-book__section h2,
.kp-book .kp-book__author-chapter h2 {
	font-size: 22px;
	margin: 0 0 20px;
	padding-bottom: 12px;
}
.kp-book .kp-book__section h2::after,
.kp-book .kp-book__author-chapter h2::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	background: var(--kp-green);
	border-radius: 2px;
	margin-top: 12px;
}
.kp-book .kp-book__closing h2::after { margin-left: auto; margin-right: auto; }

.kp-book .kp-book__reasons { display: grid; grid-template-columns: 1fr; gap: 12px; }
.kp-book .kp-book__reason { background: var(--kp-bg-soft); border-radius: 8px; padding: 8px 20px; }
.kp-book .kp-book__reason h3 { font-size: 15px; font-weight: 700; color: var(--kp-text); margin: 0 0 8px; }
.kp-book .kp-book__reason h3::before { content: "— "; color: var(--kp-green); }
.kp-book .kp-book__reason p { font-size: 14px; margin: 0; }

.kp-book .kp-book__checklist { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.kp-book .kp-book__checklist li { padding-left: 28px; position: relative; }
.kp-book .kp-book__checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--kp-green);
	font-weight: 700;
}

.kp-book .kp-book__author-chapter {
	margin-top: 40px;
	background: rgba(19,125,69,.08);
	border: 1px solid rgba(19,125,69,.2);
	border-radius: 12px;
	padding: 28px;
}
.kp-book .kp-book__author-chapter h2 { font-size: 22px; margin: 0 0 4px; }
.kp-book .kp-book__author-chapter-subtitle { color: var(--kp-green); font-weight: 700; font-size: 14px; margin: 0 0 16px; text-transform: uppercase; letter-spacing: .3px; }

/* Sekcja zamykająca "Zacznij od własnego poranka" — wg Figma
   (node 80:350, "Section - Zacznij od własnego poranka"): karta z
   delikatnym zielonkawym tłem, cieniem i zaokrąglonymi rogami,
   wyśrodkowana treść, wersy-cytat wyróżnione grubszą czcionką. */
.kp-book .kp-book__closing {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	background: #f4f9f6;
	border-top: 1px solid var(--kp-border);
	border-radius: 24px;
	box-shadow: 0 10px 30px -12px rgba(0,0,0,.05);
	padding: 72px 80px;
}
.kp-book .kp-book__closing h2 {
	font-size: 28px;
	line-height: 36px;
	letter-spacing: .3px;
	max-width: 760px;
	margin-bottom: 0;
	padding-bottom: 0;
}
.kp-book .kp-book__closing h2::after { margin-top: 32px; }
.kp-book .kp-book__closing .kp-book__prose { max-width: 760px; }
.kp-book .kp-book__closing .kp-book__prose p {
	font-size: 15px;
	line-height: 26px;
	letter-spacing: .3px;
	margin: 0 0 14px;
	/* Realny bug #1: .kp-book__prose p ma domyślnie text-align:justify
	   — ta reguła wygrywała też tutaj, nadpisując wyśrodkowanie
	   odziedziczone po .kp-book__closing.
	   Realny bug #2 (ten właściwy): .kp-book__prose p ma też
	   text-align-last:left (celowo — dla dłuższych, wyjustowanych
	   akapitów, żeby ostatnia linia nie rozciągała się na siłę). Wg
	   specyfikacji CSS text-align-last rządzi OSTATNIĄ (a dla
	   jednoliniowego akapitu — JEDYNĄ) linią, z pierwszeństwem przed
	   text-align. Same ustawienie text-align:center tutaj NIE
	   wystarczało — krótkie, jednoliniowe "wersy" nadal renderowały
	   się do lewej, bo o ich jedynej linii decydował text-align-last
	   z ogólnej reguły. Trzeba nadpisać obie właściwości. */
	text-align: center;
	text-align-last: center;
	hyphens: none;
}
/* Cztery krótkie "wersy" w środku tekstu (Czasami wystarczy jedna
   historia. / Jedna myśl. / Jedna decyzja. / I jeden nowy nawyk…) —
   oznaczone klasą wprost w treści pola "Sekcja zamykająca" w adminie
   (dopuszczalny prosty HTML, patrz book-product-fields.php). */
.kp-book .kp-book__closing .kp-book__prose p.kp-book__closing-line {
	font-weight: 600;
	color: var(--kp-text);
	margin-bottom: 12px;
}
.kp-book .kp-book__closing .kp-book__btn {
	flex: 0 0 auto;
	padding: 16px 56px;
	box-shadow: 0 7px 7.5px rgba(19,125,69,.21);
}

@media (max-width: 700px) {
	.kp-book .kp-book__closing { padding: 48px 24px; }
	.kp-book .kp-book__closing h2 { font-size: 24px; line-height: 32px; }
}

.kp-book .kp-book__info-table { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--kp-border); border-radius: 8px; overflow: hidden; }
.kp-book .kp-book__info-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; font-size: 14px; }
.kp-book .kp-book__info-row:nth-child(even) { background: var(--kp-bg-soft); }
.kp-book .kp-book__info-row dt { color: var(--kp-text-muted); margin: 0; }
.kp-book .kp-book__info-row dd { color: var(--kp-text); font-weight: 600; margin: 0; text-align: right; }

@media (max-width: 700px) {
	.kp-book .kp-book__author-chapter { padding: 20px; }
}

/* Opinie i powiązane — wspólne */
.kp-book .kp-book__reviews, .kp-book .kp-book__related { margin-top: 48px; }
.kp-book .kp-book__reviews-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.kp-book .kp-book__reviews-header h2, .kp-book .kp-book__related h2 { font-size: 22px; margin: 0 0 24px; }
.kp-book .kp-book__reviews-header h2 { margin-bottom: 0; }
.kp-book .kp-book__reviews-header span { color: var(--kp-text-muted); font-size: 14px; font-weight: 600; }
.kp-book .kp-book__carousel-wrap { position: relative; }
.kp-book .kp-book__carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; border: 1px solid var(--kp-border); }
.kp-book .kp-book__carousel-btn--prev { left: -20px; }
.kp-book .kp-book__carousel-btn--next { right: -20px; }

.kp-book .kp-book__carousel-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.kp-book .kp-book__dot { width: 8px; height: 8px; border-radius: 4px; background: #e5e7eb; transition: width .15s ease, background-color .15s ease; cursor: pointer; }
.kp-book .kp-book__dot.is-active { width: 20px; background: var(--kp-green); }

.kp-book .kp-book__reviews-track, .kp-book .kp-book__related-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 4px;
}
.kp-book .kp-book__review-card {
	scroll-snap-align: start;
	flex: 0 0 360px;
	background: var(--kp-bg-soft);
	border: 1px solid var(--kp-border);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 6px 8px rgba(0,0,0,.05);
}
.kp-book .kp-book__review-user { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.kp-book .kp-book__review-avatar {
	width: 40px; height: 40px; border-radius: 999px;
	background: #fff; border: 1px solid var(--kp-border);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.kp-book .kp-book__review-name { font-weight: 600; font-size: 14px; margin: 0; }
.kp-book .kp-book__review-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.kp-book .kp-book__review-text { font-size: 13px; color: var(--kp-text-muted); line-height: 1.5; margin: 0; }

/* Domyślnie: SIATKA o stałej liczbie kolumn (3 na desktopie) — karty
   mają rozmiar "tak jakby było 3", niezależnie od tego ile faktycznie
   jest produktów. Mniej niż 3 → puste miejsce z prawej, karty
   wyrównane od lewej (naturalne zachowanie CSS grid, bez rozciągania
   na całą szerokość). Klasa .is-carousel (dokładana przez JS wg
   liczby produktów i szerokości ekranu) przełącza na przewijalną
   karuzelę z kartami stałej szerokości. */
.kp-book .kp-book__related-track {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	justify-content: start;
}
.kp-book .kp-book__related-track.is-carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	flex-wrap: nowrap;
}
.kp-book .kp-book__related-card {
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--kp-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,.04);
	display: flex;
	flex-direction: column;
}
.kp-book .kp-book__related-track.is-carousel .kp-book__related-card { flex: 0 0 300px; }

@media (max-width: 1100px) and (min-width: 901px) {
	.kp-book .kp-book__related-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Ten sam realny problem i ta sama naprawa co .kp-shop__card-image —
   patrz komentarz tam (position:absolute na img, żeby uniknąć pętli
   height:100% względem rodzica z height:auto + aspect-ratio). */
.kp-book .kp-book__related-image { position: relative; display: block; aspect-ratio: 1.91 / 1; overflow: hidden; flex-shrink: 0; }
.kp-book .kp-book__related-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-book .kp-book__related-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.kp-book .kp-book__related-title {
	color: var(--kp-text);
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kp-book .kp-book__related-desc {
	color: var(--kp-text-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kp-book .kp-book__related-price { display: flex; align-items: baseline; gap: 8px; }
.kp-book .kp-book__related-price-now { color: var(--kp-green); font-weight: 700; font-size: 20px; }
.kp-book .kp-book__related-price-old { color: var(--kp-text-faint); font-size: 14px; text-decoration: line-through; }
.kp-book .kp-book__related-actions { display: flex; gap: 12px; padding-top: 8px; margin-top: auto; }

/* ==========================================================================
   Karta produktu wirtualnego (warsztaty z terminami, mentoring) — wg
   Figma sklep-product-detail. Ten sam wzorzec co .kp-book (zmienne,
   przyciski, taby, opinie, powiązane) — świadomie osobny blok/klasa
   zamiast rozszerzania .kp-book, bo struktura promo/CTA jest inna
   (brak galerii+ilości, jest za to wybór terminu/wariantu).
   ========================================================================== */
.kp-workshop {
	--kp-green: #137d45;
	--kp-green-hover: #00a64e;
	--kp-text: #231f20;
	--kp-text-muted: #505056;
	--kp-text-faint: #999;
	--kp-border: #e7eaef;
	--kp-bg-soft: #f5f6f7;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 24px 80px;
	font-family: 'Roboto', sans-serif;
	color: var(--kp-text);
}

.kp-workshop .kp-workshop__breadcrumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 32px; flex-wrap: wrap; }
.kp-workshop .kp-workshop__breadcrumbs a { color: var(--kp-text-faint); text-decoration: none; }
.kp-workshop .kp-workshop__breadcrumbs a:hover { color: var(--kp-green); }
.kp-workshop .kp-workshop__breadcrumbs span { color: var(--kp-text-faint); }
.kp-workshop .kp-workshop__breadcrumb-current { color: var(--kp-green); font-weight: 600; }

.kp-workshop .kp-workshop__promo { display: grid; grid-template-columns: minmax(280px, 600px) 1fr; gap: 48px; margin-bottom: 48px; align-items: start; }
/* Ten sam realny bug co .kp-book__promo — patrz komentarz przy nim. */
.kp-workshop .kp-workshop__promo > * { min-width: 0; }

.kp-workshop .kp-workshop__hero-image { border: 1px solid var(--kp-border); border-radius: 16px; overflow: hidden; aspect-ratio: 600 / 480; background: var(--kp-bg-soft); }
.kp-workshop .kp-workshop__hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kp-workshop .kp-workshop__details { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.kp-workshop .kp-workshop__header-meta { display: flex; flex-direction: column; gap: 12px; }
.kp-workshop .kp-workshop__badge {
	display: inline-flex;
	align-self: flex-start;
	background: rgba(19,125,69,.08);
	color: var(--kp-green);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 4px;
	letter-spacing: .3px;
}
.kp-workshop .kp-workshop__title { font-size: 36px; font-weight: 700; margin: 0; line-height: 1.2; }
.kp-workshop .kp-workshop__rating { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.kp-workshop .kp-icon--star { color: #fbbf24; fill: #fbbf24; }
.kp-workshop .kp-workshop__rating strong { font-size: 15px; }
.kp-workshop .kp-workshop__rating span { color: var(--kp-text-faint); font-size: 14px; }
.kp-workshop .kp-workshop__excerpt { color: var(--kp-text-muted); font-size: 16px; line-height: 1.6; }
.kp-workshop .kp-workshop__excerpt p { margin: 0 0 12px; }
.kp-workshop .kp-workshop__excerpt p:last-child { margin-bottom: 0; }

.kp-workshop .kp-workshop__price-block { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kp-workshop .kp-workshop__price,
.kp-workshop .woocommerce-variation-price .price bdi,
.kp-workshop .woocommerce-variation-price .price { color: var(--kp-green); font-size: 32px; font-weight: 700; }
.kp-workshop .kp-workshop__price-old,
.kp-workshop .woocommerce-variation-price .price del bdi { color: var(--kp-text-faint); font-size: 18px; text-decoration: line-through; font-weight: 400; }
.kp-workshop .woocommerce-variation-price .price ins { text-decoration: none; }
.kp-workshop .kp-workshop__save-badge { background: #e1f5fe; color: #0288d1; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 4px; }
/* Cena statyczna (widełki z get_price_html): domyślnie widoczna jako
   fallback. Gdy WooCommerce faktycznie wypełni
   .woocommerce-variation-price (wybrany termin ma cenę RÓŻNĄ od
   pozostałych) — ta dynamiczna jest dokładniejsza, więc statyczna
   ustępuje. WAŻNE: WC celowo zostawia price_html PUSTE, gdy cena
   wszystkich wariantów jest identyczna (typowy przypadek: ten sam
   warsztat w różnych terminach, ta sama cena) — wtedy statyczna
   zostaje widoczna, bo jest jedynym źródłem ceny. Stąd :has(), nie
   sztywne chowanie po samym fakcie "JS wybrał termin". */
.kp-workshop__variations-form:has(.woocommerce-variation-price:not(:empty)) .kp-workshop__price-block--static { display: none; }
.kp-workshop .woocommerce-variation-availability { font-size: 13px; color: var(--kp-text-muted); margin-top: 4px; }
.kp-workshop .woocommerce-variation-availability .stock.out-of-stock { color: #b91c1c; font-weight: 600; }

/* Natywny <select> wariantów WooCommerce — funkcjonalny "silnik" pod
   kartami terminów, ukryty wizualnie (nie display:none na całej
   tabeli, żeby ewentualny brak JS/CSS nie ukrył całkowicie
   funkcjonalnego elementu — ale w praktyce zawsze pod kartami). */
.kp-workshop .kp-workshop__native-variations { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.kp-workshop .kp-workshop__date-section { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.kp-workshop .kp-workshop__section-header { display: flex; gap: 10px; align-items: center; }
.kp-workshop .kp-workshop__section-header svg { color: var(--kp-text); }
.kp-workshop .kp-workshop__section-header p { font-weight: 700; font-size: 16px; margin: 0; }
.kp-workshop .kp-workshop__date-options { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.kp-workshop .kp-workshop__date-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	background: #fff;
	border: 1px solid var(--kp-border);
	border-radius: 12px;
	padding: 16px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	color: inherit;
	transition: border-color .15s ease, background-color .15s ease;
}
.kp-workshop .kp-workshop__date-option:hover { border-color: var(--kp-green); border-radius: 12px; background: #fff; color: inherit; }
.kp-workshop .kp-workshop__date-option.is-selected {
	background: rgba(19,125,69,.08);
	border: 2px solid var(--kp-green);
	padding: 15px; /* -1px vs 16px, żeby border:2px nie zmieniał rozmiaru karty */
}
.kp-workshop .kp-workshop__date-option.is-selected:hover { background: rgba(19,125,69,.08); }
.kp-workshop .kp-workshop__date-option.is-disabled,
.kp-workshop .kp-workshop__date-option:disabled { opacity: .5; cursor: not-allowed; }
.kp-workshop .kp-workshop__date-option.is-disabled:hover,
.kp-workshop .kp-workshop__date-option:disabled:hover { border-color: var(--kp-border); }

.kp-workshop .kp-workshop__date-option-left { display: flex; flex: 1 1 0%; gap: 12px; align-items: center; min-width: 0; flex-wrap: wrap; }
.kp-workshop .kp-workshop__date-option-date,
.kp-workshop .kp-workshop__date-option-location { display: flex; flex-direction: column; gap: 2px; }
.kp-workshop .kp-workshop__date-option-date { flex: 1 1 140px; min-width: 0; }
.kp-workshop .kp-workshop__date-option-location { flex: 0 0 auto; min-width: 140px; }
.kp-workshop .kp-workshop__date-option-date strong,
.kp-workshop .kp-workshop__date-option-location strong { font-size: 14px; font-weight: 700; }
.kp-workshop .kp-workshop__date-option-location strong { font-size: 13px; font-weight: 600; }
.kp-workshop .kp-workshop__date-option-date span,
.kp-workshop .kp-workshop__date-option-location span { font-size: 13px; color: var(--kp-text-muted); font-weight: 400; }
.kp-workshop .kp-workshop__date-option-location span { font-size: 12px; }

.kp-workshop .kp-workshop__date-option-right { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
.kp-workshop .kp-workshop__spots {
	display: inline-flex;
	background: #fff;
	border: 1px solid var(--kp-border);
	color: var(--kp-green);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 6px;
	white-space: nowrap;
}
.kp-workshop .kp-workshop__spots--urgency { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.kp-workshop .kp-workshop__selected-badge {
	display: inline-flex;
	background: var(--kp-green);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 6px;
	white-space: nowrap;
}

.kp-workshop .kp-workshop__specs { display: flex; flex-direction: column; gap: 12px; background: var(--kp-bg-soft); border-radius: 8px; padding: 20px; width: 100%; }
.kp-workshop .kp-workshop__spec-row { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.kp-workshop .kp-workshop__spec-row .kp-icon { flex-shrink: 0; color: var(--kp-green); }
.kp-workshop .kp-workshop__spec-row p { margin: 0; }

.kp-workshop .kp-workshop__cta-row,
.kp-workshop .woocommerce-variation-add-to-cart { display: flex; gap: 16px; width: 100%; }
.kp-workshop .kp-workshop__btn {
	flex: 1;
	text-align: center;
	padding: 16px 32px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	border: 2px solid var(--kp-green);
	transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.kp-workshop .kp-workshop__btn--primary { background: var(--kp-green); color: #fff; }
.kp-workshop .kp-workshop__btn--primary:hover { background: var(--kp-green-hover); border-color: var(--kp-green-hover); color: #fff; }
.kp-workshop .kp-workshop__btn--secondary { background: #fff; color: var(--kp-green); }
.kp-workshop .kp-workshop__btn--secondary:hover { background: var(--kp-bg-soft); color: var(--kp-green); }
.kp-workshop .kp-workshop__btn:disabled { opacity: .5; cursor: not-allowed; }
.kp-workshop .kp-workshop__stock-status { color: #c0392b; font-weight: 600; }
.kp-workshop .single_variation_wrap { width: 100%; display: flex; flex-direction: column; gap: 12px; }

/* Taby — identyczne wzorzec co .kp-book__tabs */
/* Ten sam wzorzec co .kp-book__tabs-nav — jedna linia, przewijana
   poziomo zamiast łamania na kolejne wiersze. */
.kp-workshop .kp-workshop__tabs-nav {
	display: flex;
	gap: 32px;
	border-bottom: 2px solid var(--kp-border);
	margin-bottom: 24px;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.kp-workshop .kp-workshop__tabs-nav::-webkit-scrollbar { display: none; }
.kp-workshop .kp-workshop__tab {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0 0 8px;
	font-size: 16px;
	font-weight: 500;
	color: var(--kp-text-muted);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	white-space: nowrap;
	flex-shrink: 0;
}
.kp-workshop .kp-workshop__tab.is-active { color: var(--kp-green); font-weight: 700; border-bottom-color: var(--kp-green); }
.kp-workshop .kp-workshop__tab:hover, .kp-workshop .kp-workshop__tab:focus { background: none; border-radius: 0; color: var(--kp-green); }
.kp-workshop .kp-workshop__tab.is-active:hover, .kp-workshop .kp-workshop__tab.is-active:focus { color: var(--kp-green); }
.kp-workshop .kp-workshop__tab-panel[data-kp-panel="opis"] { display: flex; gap: 48px; align-items: flex-start; }
.kp-workshop .kp-workshop__description-col { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.kp-workshop .kp-workshop__description-text { color: var(--kp-text-muted); font-size: 15px; line-height: 1.6; }
.kp-workshop .kp-workshop__description-text p { margin: 0 0 16px; }
.kp-workshop .kp-workshop__description-text p:last-child { margin-bottom: 0; }
/* Opis produktu wklejany jest z realnym HTML-em (h3–h6, ol/ul, strong —
   patrz wp post_content), ale bez żadnego stylowania wyglądał jak jedna
   ściana tekstu (przeglądarkowe domyślne rozmiary nagłówków h5/h6 są
   mniejsze niż tekst, więc "nagłówek" wyglądał jak zwykłe zdanie).
   Stylujemy WYŁĄCZNIE wygląd — treści (dostarczone przez klienta)
   zostają bez zmian. */
.kp-workshop .kp-workshop__description-text h3,
.kp-workshop .kp-workshop__description-text h4,
.kp-workshop .kp-workshop__description-text h5,
.kp-workshop .kp-workshop__description-text h6 {
	color: var(--kp-text);
	font-weight: 700;
	line-height: 1.4;
	margin: 28px 0 12px;
}
.kp-workshop .kp-workshop__description-text > :first-child { margin-top: 0; }
.kp-workshop .kp-workshop__description-text h3 { font-size: 20px; }
.kp-workshop .kp-workshop__description-text h4 { font-size: 18px; }
.kp-workshop .kp-workshop__description-text h5,
.kp-workshop .kp-workshop__description-text h6 {
	font-size: 16px;
	font-weight: 600;
	color: var(--kp-text-muted);
	margin: 0 0 16px;
}
.kp-workshop .kp-workshop__description-text ol,
.kp-workshop .kp-workshop__description-text ul {
	margin: 0 0 16px;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.kp-workshop .kp-workshop__description-text li { padding-left: 4px; }
.kp-workshop .kp-workshop__description-text li::marker { color: var(--kp-green); font-weight: 700; }
.kp-workshop .kp-workshop__description-text strong { color: var(--kp-text); font-weight: 700; }
.kp-workshop .kp-workshop__bullet-points { display: flex; flex-direction: column; gap: 8px; padding-left: 16px; color: var(--kp-text-muted); font-size: 14px; }
.kp-workshop .kp-workshop__bullet-points p { margin: 0; }

.kp-workshop .kp-workshop__program-preview { background: var(--kp-bg-soft); border-radius: 12px; padding: 24px; flex: 0 0 480px; display: flex; flex-direction: column; gap: 20px; }
.kp-workshop .kp-workshop__program-title { font-weight: 700; font-size: 18px; margin: 0; }
.kp-workshop .kp-workshop__modules-list { display: flex; flex-direction: column; gap: 12px; }
.kp-workshop .kp-workshop__modules-list--full { max-width: 720px; }
.kp-workshop .kp-workshop__mod-item { background: #fff; border: 1px solid var(--kp-border); border-radius: 8px; padding: 12px; font-size: 13px; font-weight: 500; }

/* Opinie i powiązane — identyczny wzorzec co .kp-book */
.kp-workshop .kp-workshop__reviews, .kp-workshop .kp-workshop__related { margin-top: 48px; }
.kp-workshop .kp-workshop__reviews-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.kp-workshop .kp-workshop__reviews-header h2, .kp-workshop .kp-workshop__related h2 { font-size: 22px; margin: 0 0 24px; }
.kp-workshop .kp-workshop__reviews-header h2 { margin-bottom: 0; }
.kp-workshop .kp-workshop__reviews-header span { color: var(--kp-text-muted); font-size: 14px; font-weight: 600; }
.kp-workshop .kp-workshop__carousel-wrap { position: relative; }
.kp-workshop .kp-workshop__carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; border: 1px solid var(--kp-border); }
.kp-workshop .kp-workshop__carousel-btn--prev { left: -20px; }
.kp-workshop .kp-workshop__carousel-btn--next { right: -20px; }

.kp-workshop .kp-workshop__carousel-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.kp-workshop .kp-workshop__dot { width: 8px; height: 8px; border-radius: 4px; background: #e5e7eb; transition: width .15s ease, background-color .15s ease; cursor: pointer; }
.kp-workshop .kp-workshop__dot.is-active { width: 20px; background: var(--kp-green); }

.kp-workshop .kp-workshop__reviews-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
.kp-workshop .kp-workshop__review-card {
	scroll-snap-align: start;
	flex: 0 0 360px;
	background: var(--kp-bg-soft);
	border: 1px solid var(--kp-border);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 6px 8px rgba(0,0,0,.05);
}
.kp-workshop .kp-workshop__review-user { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.kp-workshop .kp-workshop__review-avatar {
	width: 40px; height: 40px; border-radius: 999px;
	background: #fff; border: 1px solid var(--kp-border);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.kp-workshop .kp-workshop__review-name { font-weight: 600; font-size: 14px; margin: 0; }
.kp-workshop .kp-workshop__review-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.kp-workshop .kp-workshop__review-text { font-size: 13px; color: var(--kp-text-muted); line-height: 1.5; margin: 0; }

/* Powiązane produkty: reużywa gotowy komponent karty ze sklepu
   (template-parts/components/product-card.php, klasy .kp-shop__card).
   Jego CSS jest zapięty pod ancestor `.kp-shop` — dlatego sekcja w
   PHP ma DODATKOWO klasę `kp-shop` (patrz product-virtual.php), żeby
   te reguły zadziałały bez duplikowania całego komponentu karty
   pod nową nazwą. Tu dopisujemy tylko układ toru/karuzeli, identyczny
   wzorzec co .kp-book__related-track. */
.kp-workshop .kp-workshop__related-track {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	justify-content: start;
}
.kp-workshop .kp-workshop__related-track.is-carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	flex-wrap: nowrap;
}
.kp-workshop .kp-workshop__related-track .kp-shop__card { scroll-snap-align: start; }
.kp-workshop .kp-workshop__related-track.is-carousel .kp-shop__card { flex: 0 0 300px; }
@media (max-width: 1100px) and (min-width: 901px) {
	.kp-workshop .kp-workshop__related-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.kp-workshop .kp-workshop__promo { grid-template-columns: 1fr; }
	.kp-workshop .kp-workshop__hero-image { aspect-ratio: 600 / 380; }
	.kp-workshop .kp-workshop__tab-panel[data-kp-panel="opis"] { flex-direction: column; }
	.kp-workshop .kp-workshop__program-preview { flex-basis: auto; width: 100%; }
	.kp-workshop .kp-workshop__date-option { flex-direction: column; align-items: flex-start; }
	.kp-workshop .kp-workshop__date-option-right { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
	.kp-workshop .kp-workshop__cta-row,
	.kp-workshop .woocommerce-variation-add-to-cart { flex-direction: column; }
	.kp-workshop .kp-workshop__related .kp-workshop__carousel-btn--prev { left: 4px; }
	.kp-workshop .kp-workshop__related .kp-workshop__carousel-btn--next { right: 4px; }
}

/* ==========================================================================
   Komponent: Akordeon FAQ — wg Figma faq-default/faq-hover/faq-expanded
   (node 60:115 / 60:153 / 60:191). Reużywalny wszędzie, nie tylko na
   karcie produktu — dlatego osobny blok, dołączany przez
   template-parts/components/faq-accordion.php.
   ========================================================================== */

.kp-faq {
	--kp-faq-green: #137d45;
	--kp-faq-green-bg: #f0f9f4;
	--kp-faq-border: #e7eaef;
	--kp-faq-text: #232020;
	--kp-faq-text-muted: #505056;
	--kp-faq-btn-bg: #f5f7f8;
	font-family: 'Roboto', sans-serif;
}
.kp-faq .kp-faq__header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.kp-faq .kp-faq__title { font-size: 24px; font-weight: 700; color: var(--kp-faq-text); margin: 0; }
.kp-faq .kp-faq__subtitle { font-size: 14px; color: var(--kp-faq-text-muted); margin: 0; }

.kp-faq .kp-faq__list { display: flex; flex-direction: column; gap: 12px; }

.kp-faq .kp-faq__card {
	background: #fff;
	border: 1px solid var(--kp-faq-border);
	border-radius: 10px;
	transition: background-color .15s ease, border-color .15s ease;
}
.kp-faq .kp-faq__card:hover { background: var(--kp-faq-green-bg); }
.kp-faq .kp-faq__card.is-open { background: var(--kp-faq-green-bg); border-color: var(--kp-faq-green); }

.kp-faq .kp-faq__header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 24px;
	background: none;
	border: none;
	border-radius: 10px;
	margin: 0;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
/* Elementor Kit’s global `button:hover` (specyficzność 0,2,1) inaczej
   zamieniłby ten przycisk w pełną, zieloną "pigułkę" — karta i tak
   dostaje jasnozielone tło przez .kp-faq__card:hover, więc sam przycisk
   ma zostać przezroczysty. */
.kp-faq .kp-faq__header-row:hover, .kp-faq .kp-faq__header-row:focus { background: none; border-radius: 10px; color: var(--kp-faq-text); }
.kp-faq .kp-faq__question { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; color: var(--kp-faq-text); }

.kp-faq .kp-faq__toggle-btn {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--kp-faq-btn-bg);
	color: var(--kp-faq-text);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease, color .15s ease;
}
.kp-faq .kp-faq__card:hover .kp-faq__toggle-btn,
.kp-faq .kp-faq__card.is-open .kp-faq__toggle-btn { background: var(--kp-faq-green); color: #fff; }

.kp-faq .kp-faq__icon-minus { display: none; }
.kp-faq .kp-faq__card.is-open .kp-faq__icon-plus { display: none; }
.kp-faq .kp-faq__card.is-open .kp-faq__icon-minus { display: block; }

.kp-faq .kp-faq__panel { padding: 0 24px 20px; }
.kp-faq .kp-faq__answer { margin: 0; font-size: 15px; line-height: 1.6; color: var(--kp-faq-text-muted); }

@media (max-width: 600px) {
	.kp-faq .kp-faq__title { font-size: 20px; }
	.kp-faq .kp-faq__header-row { padding: 16px; gap: 12px; }
	.kp-faq .kp-faq__question { font-size: 15px; }
	.kp-faq .kp-faq__panel { padding: 0 16px 16px; }
}

/* Mobile */
@media (max-width: 900px) {
	.kp-book { padding: 24px 16px 48px; }
	.kp-book .kp-book__promo { grid-template-columns: 1fr; gap: 24px; }
	.kp-book .kp-book__main-image { aspect-ratio: 4 / 3; }
	.kp-book .kp-book__title { font-size: 24px; }
	.kp-book .kp-book__price { font-size: 28px; }
	.kp-book .kp-book__cta-row { flex-direction: column; }
	.kp-book .kp-book__tabs-nav { gap: 20px; }
	/* Strzałki karuzeli opinii chowamy na mobile (samo przewijanie
	   dotykiem wystarcza) — "Powiązane produkty" mają OSOBNĄ logikę
	   sterowaną z JS (initRelatedCarousel), więc ich nie dotykamy tu. */
	.kp-book .kp-book__reviews .kp-book__carousel-btn { display: none; }
	/* "Powiązane produkty": na desktopie strzałki celowo wystają 20px
	   poza kartę (zgodnie z Figmą) — na wąskim mobile to wystarczało,
	   żeby wywołać poziomy scroll całej strony. Na mobile chowamy je
	   więc do wewnątrz zamiast na zewnątrz. */
	.kp-book .kp-book__related .kp-book__carousel-btn--prev { left: 4px; }
	.kp-book .kp-book__related .kp-book__carousel-btn--next { right: 4px; }
}

/* ==========================================================================
   Komponent: Lightbox pełnoekranowy z przybliżeniem (assets/js/lightbox.js)
   Reużywalny wszędzie — działa z każdą galerią [data-kp-gallery].
   ========================================================================== */

/* position:fixed (nie tylko overflow:hidden) — na iOS Safari samo
   overflow:hidden na body nie blokuje "rubber-band" scrolla w tle.
   JS ustawia też body.style.top na -scrollY, żeby strona nie skoczyła
   wizualnie w momencie zablokowania (i przywraca pozycję po zamknięciu). */
body.kp-lightbox-open { position: fixed; width: 100%; overflow: hidden; }

.kp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
}
.kp-lightbox.is-open { display: flex; }

.kp-lightbox .kp-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 17, 16, 0.92);
}

.kp-lightbox .kp-lightbox__stage {
	position: relative;
	z-index: 1;
	width: min(90vw, 1100px);
	height: min(85vh, 900px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.kp-lightbox .kp-lightbox__image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: zoom-in;
	transition: transform .25s ease;
	border-radius: 8px;
	user-select: none;
}
.kp-lightbox .kp-lightbox__image.is-zoomed { cursor: zoom-out; }

.kp-lightbox .kp-lightbox__close,
.kp-lightbox .kp-lightbox__nav { position: absolute; z-index: 2; }
.kp-lightbox .kp-lightbox__close { top: 24px; right: 24px; }
.kp-lightbox .kp-lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.kp-lightbox .kp-lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }

.kp-lightbox .kp-lightbox__counter {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 600;
	background: rgba(255,255,255,.12);
	padding: 6px 14px;
	border-radius: 999px;
}

@media (max-width: 600px) {
	.kp-lightbox .kp-lightbox__stage { width: 94vw; height: 70vh; }
	.kp-lightbox .kp-lightbox__close { top: 12px; right: 12px; }
	.kp-lightbox .kp-lightbox__nav--prev { left: 8px; }
	.kp-lightbox .kp-lightbox__nav--next { right: 8px; }
}

/* ==========================================================================
   Checkout — po odpięciu od Elementor Pro (widget "Checkout", plugin
   pro-elements) strona wróciła do natywnego WooCommerce
   ([woocommerce_checkout] w treści strony, bez szablonu Elementora —
   patrz docs/plan-sklep-produkty.md). Styl pod `body.woocommerce-checkout`
   (klasa dokładana automatycznie przez WordPress/WooCommerce, zero
   dodatkowego markupu w szablonie) — wystarczająca specyficzność, żeby
   bić globalne style Elementor Kit bez !important (ten sam sprawdzony
   wzorzec co .kp-book/.kp-shop/.kp-workshop).
   ========================================================================== */

body.woocommerce-checkout {
	--kp-green: #137d45;
	--kp-green-hover: #00a64e;
	--kp-text: #231f20;
	--kp-text-muted: #505056;
	--kp-text-faint: #999;
	--kp-border: #e7eaef;
	--kp-bg-soft: #f5f6f7;
}
/* Trzeci raz w tym projekcie ten sam wzorzec bugu: pojedyncze elementy
   (tu: pola formularza WooCommerce) renderują się z box-sizing:content-box
   mimo globalnego resetu motywu `*{box-sizing:border-box}` — coś to
   nadpisuje z powrotem, punktowe łatanie jednego elementu naraz
   (.kp-shop__hero, .woocommerce-info...) tylko goni bugi zamiast je
   raz na zawsze wyeliminować na całej stronie checkout. Zbiorczy reset. */
body.woocommerce-checkout *,
body.woocommerce-checkout *::before,
body.woocommerce-checkout *::after {
	box-sizing: border-box;
}

body.woocommerce-checkout .woocommerce {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 24px 80px;
	font-family: 'Roboto', sans-serif;
	color: var(--kp-text);
}

body.woocommerce-checkout .woocommerce-notices-wrapper { margin-bottom: 24px; }
body.woocommerce-checkout .woocommerce-info {
	/* Realny bug: coś (poza naszą kontrolą) nadpisuje ten element z
	   powrotem na box-sizing:content-box, więc padding doliczał się
	   do szerokości zamiast być w niej zawarty — te same objawy co
	   przy .kp-shop__hero (patrz komentarz tam) — realny, drobny
	   poziomy scroll. Jawny border-box na wszelki wypadek. */
	box-sizing: border-box;
	width: 100%;
	background: var(--kp-bg-soft);
	border: 1px solid var(--kp-border);
	border-radius: 8px;
	padding: 16px 20px;
	color: var(--kp-text);
	list-style: none;
	margin: 0 0 24px;
}
body.woocommerce-checkout .woocommerce-info a { color: var(--kp-green); font-weight: 600; }
body.woocommerce-checkout .woocommerce-error {
	background: #fee2e2;
	border: 1px solid #fca5a5;
	border-radius: 8px;
	padding: 16px 20px;
	color: #b91c1c;
	margin: 0 0 24px;
}

/* Realny bug: WooCommerce renderuje nagłówek "Twoje zamówienie" (h3
   #order_review_heading) i samą treść (#order_review) jako DWA
   osobne, kolejne elementy w formularzu — nie jeden wspólny
   kontener. Przy prostym grid-template-columns (bez jawnego
   przypisania) domyślne auto-placement CSS Grid wypełnia rzędy
   liniowo: #customer_details -> wiersz1/kol1, nagłówek ->
   wiersz1/kol2, a #order_review (bo wiersz1 jest już "pełny") ląduje
   w wiersz2/kol1 — czyli POD lewą kolumną zamiast obok, w prawej.
   Naprawa: jawne umiejscowienie w siatce dla wszystkich trzech. */
body.woocommerce-checkout .checkout.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
	gap: 8px 48px;
	align-items: start;
}
/* Realny bug: WooCommerce/motyw mają domyślny, "core" CSS ze starego,
   float-owego 2-kolumnowego layoutu checkoutu — #customer_details i
   #order_review dostają tam sztywne width:48%/46% (myślą, że stoją
   obok siebie we FLOATACH, nie w gridzie). W kontekście naszej
   siatki CSS Grid ten % licząc się od WŁASNEGO toru kolumny (nie od
   całej szerokości formularza) robił z #order_review coś w rodzaju
   "48% z 460px" = ok. 220px — połowę tego, co powinno mieć. Jawne
   width:100% (wypełnij CAŁY przyznany tor kolumny) nadpisuje to raz
   na zawsze. */
body.woocommerce-checkout #customer_details { min-width: 0; width: 100%; grid-column: 1; grid-row: 1 / span 2; }
body.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; }
body.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; min-width: 0; width: 100%; }

body.woocommerce-checkout h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--kp-text);
	margin: 0 0 20px;
}
body.woocommerce-checkout .woocommerce-additional-fields > h3 { margin-top: 32px; }

/* Pola formularza */
body.woocommerce-checkout .form-row { margin: 0 0 18px; }
body.woocommerce-checkout .form-row label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var(--kp-text);
	margin-bottom: 6px;
}
body.woocommerce-checkout .form-row label .required { color: #c0392b; text-decoration: none; }
body.woocommerce-checkout .form-row label .optional { color: var(--kp-text-faint); font-weight: 400; }

body.woocommerce-checkout .input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea {
	width: 100%;
	border: 1px solid var(--kp-border);
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 15px;
	font-family: inherit;
	color: var(--kp-text);
	background: #fff;
	transition: border-color .15s ease;
}
body.woocommerce-checkout .input-text:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: var(--kp-green);
}
body.woocommerce-checkout textarea { min-height: 90px; resize: vertical; }

/* Select2 (gdyby był aktywny na polu "Kraj") */
body.woocommerce-checkout .select2-container .select2-selection--single {
	height: auto;
	border: 1px solid var(--kp-border);
	border-radius: 8px;
	padding: 12px 16px;
}
body.woocommerce-checkout .select2-container .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--kp-text); }
body.woocommerce-checkout .select2-container .select2-selection__arrow { height: 100%; right: 12px; }

body.woocommerce-checkout .woocommerce-account-fields,
body.woocommerce-checkout .woocommerce-additional-fields { margin-top: 8px; }

/* Podsumowanie zamówienia — karta */
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--kp-bg-soft);
	border-radius: 8px;
	overflow: hidden; /* bez paddingu treść dotyka krawędzi — żeby proste rogi tabeli nie wystawały poza zaokrąglenie karty */
}
/* table-layout:fixed — bez tego <table> ignoruje width:100% i
   rozciąga się do naturalnej szerokości zawartości (nazwa produktu +
   cena w jednej linii), co na wąskich ekranach dawało realny poziomy
   scroll całej strony (kolumna z ceną wymuszała nowrap, tabela była
   szersza niż karta zamówienia). Przy fixed kolumny trzymają się
   szerokości kontenera, a długie nazwy produktów zawijają się. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 16px; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name { word-wrap: break-word; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: var(--kp-text-faint);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--kp-border);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:last-child { text-align: right; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--kp-border);
	font-size: 14px;
	vertical-align: top;
}
/* Bez white-space:nowrap — wiersz "Łącznie" ma w tej samej komórce
   cenę I dopisek "(Zawiera X zł VAT)" (<small class="includes_tax">);
   wymuszony brak zawijania całości nie mieścił się na wąskich
   ekranach i wystawał poza kartę zamówienia. Same ceny i tak nie mają
   spacji do złamania, więc nic tu się nie "psuje" bez nowrap. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table td:last-child { text-align: right; font-weight: 600; color: var(--kp-green); }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td { border-bottom: none; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td { font-size: 18px; padding-top: 16px; border-top: 2px solid var(--kp-border); }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td:last-child { color: var(--kp-green); font-weight: 700; }

/* Kupon */
body.woocommerce-checkout .checkout_coupon {
	background: #fff;
	border: 1px solid var(--kp-border);
	border-radius: 8px;
	padding: 16px;
	margin: 0 0 16px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
body.woocommerce-checkout .checkout_coupon .form-row { flex: 1 1 200px; margin: 0; }
body.woocommerce-checkout .checkout_coupon .form-row-last { flex: 0 0 auto; }
body.woocommerce-checkout .checkout_coupon button {
	background: #fff;
	border: 1px solid var(--kp-green);
	color: var(--kp-green);
	border-radius: 8px;
	padding: 12px 20px;
	font-weight: 600;
	cursor: pointer;
}
body.woocommerce-checkout .checkout_coupon button:hover { background: var(--kp-bg-soft); color: var(--kp-green); border-radius: 8px; }

/* Metody płatności */
body.woocommerce-checkout #payment { background: transparent; border: none; padding: 0; margin-top: 24px; }
body.woocommerce-checkout ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
	background: #fff;
	border: 1px solid var(--kp-border);
	border-radius: 8px;
	padding: 14px 16px;
}
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label { font-weight: 600; font-size: 14px; color: var(--kp-text); cursor: pointer; display: flex; align-items: center; gap: 8px; }
body.woocommerce-checkout ul.wc_payment_methods input.input-radio { accent-color: var(--kp-green); width: 16px; height: 16px; flex-shrink: 0; }
body.woocommerce-checkout .payment_box { background: var(--kp-bg-soft); border-radius: 6px; padding: 14px; margin-top: 12px; font-size: 13px; color: var(--kp-text-muted); }
/* Zgoda RODO wtyczki Przelewy24: <label class="checkbox"> ma
   display:flex (styl wtyczki, nie nasz) bez flex-wrap — długi tekst
   z linkami nie zawijał się, tylko wystawał poza kartę na wąskich
   ekranach. Dokładamy tylko flex-wrap, nie ruszamy reszty stylu
   wtyczki. */
body.woocommerce-checkout .payment_box label.checkbox { flex-wrap: wrap; }
body.woocommerce-checkout .payment_box p { margin: 0 0 8px; }
body.woocommerce-checkout .payment_box p:last-child { margin-bottom: 0; }

/* Regulamin + przycisk */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 20px 0; font-size: 13px; color: var(--kp-text-muted); }
body.woocommerce-checkout .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 8px; }
body.woocommerce-checkout .woocommerce-form__input-checkbox { margin-top: 3px; accent-color: var(--kp-green); width: 16px; height: 16px; flex-shrink: 0; }
body.woocommerce-checkout a { color: var(--kp-green); }
body.woocommerce-checkout a:hover { color: var(--kp-green-hover); }

body.woocommerce-checkout #place_order {
	width: 100%;
	background: var(--kp-green);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 16px 32px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color .15s ease;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:focus { background: var(--kp-green-hover); color: #fff; border-radius: 999px; }

@media (max-width: 900px) {
	body.woocommerce-checkout .checkout.woocommerce-checkout { grid-template-columns: 1fr; }
	body.woocommerce-checkout #customer_details,
	body.woocommerce-checkout #order_review_heading,
	body.woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; }
	body.woocommerce-checkout #order_review_heading { margin-top: 32px; }
	body.woocommerce-checkout .woocommerce { padding: 24px 16px 56px; }
}