/* ==========================================================================
   Komponenty współdzielone — Humee
   Reużywalne prymitywy UI powtarzające się między stronami (listing, karta
   produktu, koszyk, checkout, wyniki wyszukiwania, strony tekstowe).

   Port z prototypu (docs/prototypes/css/components.css). Tokeny prototypu
   (--color-*, --fs-*, --space-*, --radius-*, --pill-*) podmienione na zmienne
   generowane z theme.json: var(--wp--preset--*) / var(--wp--custom--*).
   Wczytywane PO base.css (patrz inc/enqueue.php).

   Zasady:
   - Tylko tokeny z theme.json (zero hardkodowanych hex w regułach).
   - Klasy globalne (nie scope'owane do sekcji): .pill, .btn, .link-more,
     .swatch, .swatch-size, .stepper, .rating, .product-card, .humee-badge,
     .product-grid, .rekomendacje, .breadcrumb, .scrim, .modal.
   - Wyodrębnione wg zasięgu (ADR-0032): `.prose` → tekstowa.css;
     `.input`/`.field`/`.radio` → components/forms.css (warunkowo: konto/search/checkout).
   - Warianty przez modyfikatory `--`. Stan przez `.is-*` / [aria-*].

   Źródło designu: Figma „humee - website" (NYI5NRSov70SqqG3EN1hEG),
   m.in. STRONA KATEGORII (37:244) — pille 47px, swatch 42px (obrys 0.25px),
   karta: tytuł 22px medium + cena 22px regular, breadcrumb „home → dorośli".
   ========================================================================== */


/* ==========================================================================
   PILL — etykieta / przycisk-tag (47px radius)
   Najczęstszy prymityw w makiecie: nagłówki sekcji, tagi, filtry, język/waluta,
   linki „więcej". Warianty kolorystyczne przez modyfikatory.
   ========================================================================== */
.pill {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--wp--custom--pill--gap);

	padding: var(--wp--custom--pill--pad);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill);

	font-size: var(--wp--preset--font-size--body);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	white-space: nowrap;
	color: var(--wp--preset--color--dark);
	background: transparent;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Mniejszy padding (filtry / język / waluta na makiecie) */
.pill--sm {
	padding: var(--wp--custom--pill--pad-small);
}

/* — Warianty wypełnienia — */

/* Ciemny (dominujący w makiecie: filtruj, język, waluta, breadcrumby-CTA) */
.pill--dark {
	background: var(--wp--preset--color--dark);
	border-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--bg);
}

/* Akcent fioletowy (aktywny / główne CTA: „kolekcja humee", „więcej") */
.pill--accent {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/* Outline — przezroczyste tło, ciemny obrys (tagi na jasnym tle, kategorie) */
.pill--outline {
	background: transparent;
	border-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--dark);
}

/* — Hover/focus tylko dla interaktywnych pilli (a/button) — */
a.pill--outline:hover,
a.pill--outline:focus-visible,
button.pill--outline:hover,
button.pill--outline:focus-visible {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

a.pill--dark:hover,
a.pill--dark:focus-visible,
button.pill--dark:hover,
button.pill--dark:focus-visible {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

a.pill--accent:hover,
a.pill--accent:focus-visible,
button.pill--accent:hover,
button.pill--accent:focus-visible {
	filter: brightness(1.08);
}

.pill:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Strzałka w pillu (→ / ↓) — animowana na hover rodzica */
.pill__arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

a.pill:hover .pill__arrow,
button.pill:hover .pill__arrow,
a.pill:focus-visible .pill__arrow,
button.pill:focus-visible .pill__arrow {
	transform: translateX(3px);
}


/* ==========================================================================
   BTN — pełnowymiarowy przycisk akcji (CTA: „dodaj do koszyka”,
   „przejdź do kasy”, „zapisz się”). Większy niż pill, blokowy.

   Karta produktu: natywny przycisk WooCommerce `.single_add_to_cart_button`
   NIE da się oznaczyć klasą `.btn` bez override szablonu (ADR-0003), więc
   mapujemy jego selektor na TEN prymityw — jedno źródło wyglądu CTA w całym
   sklepie (spójność z „zapisz się”/koszykiem). `text-transform` (natywny tekst
   WC bywa z wielkiej litery) i layout rzędu ilość/CTA → `single.css`.

   Tak samo klasyczne przyciski „Moje konto" (`.woocommerce-account .button`:
   logowanie/rejestracja/edycja konta/lost-password) — jedno źródło wyglądu,
   bez override szablonów (ADR-0031). Lowercase/układ → `account.css`.
   ORAZ login-wall na „Dziękujemy" (order-received guest → WC żąda logowania,
   body ma `woocommerce-checkout`, nie `-account`) — ten sam prymityw, delta
   (karta/skala/oko) → `checkout.css` §11.
   ========================================================================== */
.btn,
.single-product .single_add_to_cart_button,
.woocommerce-account .button,
.woocommerce-order-received .woocommerce-form-login .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--pill--gap);

	padding: var(--wp--custom--pill--pad);
	min-height: 3rem;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill);

	font-size: var(--wp--preset--font-size--button-1);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	color: var(--wp--preset--color--bg);
	background: var(--wp--preset--color--dark);
	border-color: var(--wp--preset--color--dark);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
}

.btn--accent {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/* Wariant „outline” (np. drugorzędne akcje) */
.btn--outline {
	background: transparent;
	border-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--dark);
}

/* Pełna szerokość kolumny (sticky CTA na karcie produktu / w koszyku) */
.btn--block {
	width: 100%;
}

.btn:hover,
.btn:focus-visible,
.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:focus-visible,
.woocommerce-account .button:hover,
.woocommerce-account .button:focus-visible,
.woocommerce-order-received .woocommerce-form-login .button:hover,
.woocommerce-order-received .woocommerce-form-login .button:focus-visible {
	filter: brightness(1.08);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--bg);
	filter: none;
}

.btn:focus-visible,
.single-product .single_add_to_cart_button:focus-visible,
.woocommerce-account .button:focus-visible,
.woocommerce-order-received .woocommerce-form-login .button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.btn[disabled],
.btn[aria-disabled="true"],
.single-product .single_add_to_cart_button[disabled],
.single-product .single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.btn__arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
	transform: translateX(4px);
}


/* ==========================================================================
   LINK-MORE — tekstowy link „wyświetl więcej →” z animowaną strzałką
   (zunifikowane z home: blog / o-marce / sezon). Inline, bez tła.
   ========================================================================== */
.link-more {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	color: var(--wp--preset--color--dark);
	transition: opacity 0.16s ease;
}

.link-more__arrow {
	transition: transform 0.2s ease;
}

.link-more:hover,
.link-more:focus-visible {
	opacity: 0.7;
}

.link-more:hover .link-more__arrow,
.link-more:focus-visible .link-more__arrow {
	transform: translateX(4px);
}

.link-more:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}


/* ==========================================================================
   SWATCH — próbka koloru produktu (kółko ~42px z cienkim obrysem)
   Kolor podajemy inline: style="--swatch: #9EAB99".
   Rozmiar = osobny prymityw .swatch--size (pill z numerem rozmiaru).
   ========================================================================== */
.swatch {
	display: inline-block;
	inline-size: 2.625rem;   /* 42px @16 — proporcja z Figmy */
	block-size: 2.625rem;
	padding: 0;
	border: 0.25px solid var(--wp--preset--color--dark);
	border-radius: var(--wp--custom--radius--circle);
	background: var(--swatch, var(--wp--preset--color--bg-alt));
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.swatch:hover {
	transform: scale(1.05);
}

/* Stan aktywny — grubszy CIEMNY obrys (Figma 37:993: wybrany swatch ma stroke 2px
   #2F2D30, nie akcentową poświatę). Inset = brak przesunięcia layoutu mimo bazowego
   obrysu 0.25px. Akcent zostaje wyłącznie dla :focus-visible (a11y, niżej). */
.swatch.is-active,
.swatch[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--dark);
}

.swatch:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Stan „off" — próbka niedostępna (JS: aria-disabled). Wygaszona i nieklikalna. */
.swatch[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.5;
}

.swatch[aria-disabled="true"]:hover {
	transform: none;
}

/* Wyprzedany kolor (JS: .is-oos) — ukośna kreska przez kółko (klasyczny sygnał OOS).
   Odróżnia „nie ma na stanie" od zwykłego wygaszenia niemożliwej kombinacji. */
.swatch.is-oos {
	position: relative;
}

.swatch.is-oos::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		to top right,
		transparent calc(50% - 0.75px),
		var(--wp--preset--color--dark) calc(50% - 0.75px),
		var(--wp--preset--color--dark) calc(50% + 0.75px),
		transparent calc(50% + 0.75px)
	);
}

/* — Próbka ROZMIARU = pill z numerem (np. 38, 39, 40) — */
.swatch-size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 3rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border-soft);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--dark);
	background: transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.swatch-size:hover {
	border-color: var(--wp--preset--color--dark);
}

.swatch-size.is-active,
.swatch-size[aria-pressed="true"] {
	background: var(--wp--preset--color--dark);
	border-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--bg);
}

.swatch-size[disabled],
.swatch-size[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

.swatch-size:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* — Wariant „gołe numery" (karta produktu, Figma 37:993) —
   Rozmiary jako sam tekst w rzędzie: BEZ obrysu i bez pill-boxa. Dopiero WYBRANY
   dostaje ciemny pill (.is-active z bazy). Niedostępny = wyszarzony (--muted),
   bez przekreślenia (Figma: 42/43/44 to po prostu jaśniejszy tekst). */
.swatch-size--plain {
	min-inline-size: 0;
	padding: 4px 14px 5px;
	border-color: transparent;
}

.swatch-size--plain:hover {
	border-color: transparent;
	color: var(--wp--preset--color--accent);
}

.swatch-size--plain[disabled],
.swatch-size--plain[aria-disabled="true"] {
	opacity: 1;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

/* Wyprzedany rozmiar (JS: .is-oos) — przekreślony numer (klasyczny sygnał OOS).
   Odróżnia „nie ma na stanie" od niemożliwej kombinacji (samo wyszarzenie). */
.swatch-size--plain.is-oos {
	color: var(--wp--preset--color--muted);
	text-decoration: line-through;
}


/* ==========================================================================
   STEPPER — kontrola ilości „− n +” (obrysowy pill).
   Powtarza się na ≥2 stronach: karta produktu (sekcja zakup) i koszyk →
   prymityw globalny. Figma 37:993 / 54:4429: obrys #2F2D30, radius 47,
   padding 4px 20px 8px, tekst 22px. Wartość = ilość; JS aktualizuje liczbę.
   ========================================================================== */
.stepper {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--pill--gap);
	padding: var(--wp--custom--pill--pad);
	border: 1px solid var(--wp--preset--color--dark);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1;
	color: var(--wp--preset--color--dark);
}

.stepper__btn {
	background: transparent;
	border: 0;
	padding: 0 var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1;
	color: var(--wp--preset--color--dark);
	cursor: pointer;
}

.stepper__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.stepper__value {
	min-inline-size: 1.5rem;
	text-align: center;
}


/* FORMS (.input / .field / .radio + aliasy klasycznych pól WooCommerce)
   → przeniesione do assets/css/components/forms.css (zasada zasięgu, ADR-0032).
   Pola renderują się tylko na koncie / wyszukiwarce / checkoucie → ładowane
   warunkowo (enqueue.php), nie obciążają globalnego components.css. */


/* ==========================================================================
   RATING — gwiazdki oceny (assets/icons/star-rating.svg = 5 gwiazdek)
   Technika: jedna grafika 5 gwiazd jako maska; szerokość wypełnienia
   sterowana --rating (0–1). Tło = puste gwiazdy, nakładka = wypełnione.
   ========================================================================== */
.rating {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
}

.rating__stars {
	position: relative;
	inline-size: 5.5rem;     /* ~88px, proporcja 175:26 z assetu */
	aspect-ratio: 175 / 26;
	-webkit-mask: url("../icons/star-rating.svg") no-repeat center / contain;
	        mask: url("../icons/star-rating.svg") no-repeat center / contain;
	background: var(--wp--preset--color--border-soft);   /* puste gwiazdy */
}

.rating__stars::before {
	content: "";
	position: absolute;
	inset: 0;
	inline-size: calc(var(--rating, 1) * 100%);
	background: var(--wp--preset--color--accent);          /* wypełnione gwiazdy */
}

.rating__count {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--border-soft);
}


/* ==========================================================================
   PRODUCT-CARD — karta produktu na listingu / „może ci się spodobać” /
   wynikach wyszukiwania / w koszyku-rekomendacjach.
   Rdzeń e-commerce: media (kwadratowy kafel) → swatch koloru → tytuł → cena.
   ========================================================================== */
.product-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

/* Strefa zdjęcia — KWADRATOWY kafel (Figma 37:244: prosty RECTANGLE, bez
   zaokrąglenia ani maski squircle). Tło = --bg (ciemniejszy beż), bo
   strony produktowe mają jasne tło --bg-alt (#F6F2EE) i kafel musi być
   od niego odróżnialny. Render produktu „pływa" w kaflu (padding +
   object-fit:contain) — w makiecie but nie wypełnia całości, jest wyśrodkowany. */
.product-card__media {
	position: relative;
	display: block;
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	padding: var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--bg);
	border-radius: var(--wp--custom--radius--none);
	overflow: hidden;
}

.product-card__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 0.4s ease;
}

.product-card:hover .product-card__image {
	transform: scale(1.04);
}

/* Serce „do ulubionych” w rogu kafla */
.product-card__wishlist {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--sm);
	inset-inline-end: var(--wp--preset--spacing--sm);
	z-index: 1;
	inline-size: 2rem;
	block-size: 2rem;
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.product-card__wishlist img {
	inline-size: 1.5rem;
	transition: transform 0.2s ease;
}

.product-card__wishlist:hover img {
	transform: scale(1.12);
}

/* Rząd próbek kolorów nad tytułem */
.product-card__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
}

/* Tytuł 22px / 600, cena 22px / 500 — wprost z Figmy (37:244). */
.product-card__title {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--dark);
}

.product-card__price {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--dark);
}

/* Cena promocyjna (gdy wystąpi) — stara przekreślona + nowa */
.product-card__price--old {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--border-soft);
	text-decoration: line-through;
}

.product-card:focus-within {
	outline: none;
}

.product-card__media:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}


/* ==========================================================================
   BADGE etykiet — nowość / bestseller / promocja. Prymityw overlay karty:
   pigułka w rogu kafla (`.product-card__media` = kotwica `position:relative`) i
   nad galerią na single (wariant `--single`). GLOBALNY (nie w woocommerce.css) —
   `.product-card` żyje też poza `is_woocommerce()` (wyszukiwarka / 404 / koszyk /
   ulubione), a badge muszą tam wyglądać tak samo. Warianty = paleta: promocja =
   akcent, bestseller = ciemny, nowość = piaskowy. Stos pionowy w rogu.
   ========================================================================== */
.humee-badges {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--sm);
	inset-inline-start: var(--wp--preset--spacing--sm);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
	pointer-events: none;
}

/* Wariant single — badge w kolumnie zakupu, NAD nazwą: normalny flow (poziomy rząd),
   nie absolutny overlay galerii. */
.humee-badges--single {
	position: static;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	/* `.summary` to flex column z gap `--md` (single.css) — badge chcemy CIASNO nad
	   nazwą. Margines DODAJE się do gapu, więc znosimy część gapu negatywnym marginesem:
	   gap(--md) + (xs − md) = efektywnie `--xs` do tytułu. Token-based, bez hardkodów. */
	margin-block-end: calc(var(--wp--preset--spacing--xs) - var(--wp--preset--spacing--md));
}

.humee-badge {
	display: inline-block;
	padding: 2px 12px 4px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--body);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	color: var(--wp--preset--color--bg-alt);
	background: var(--wp--preset--color--dark);
}

.humee-badge--nowosc {
	color: var(--wp--preset--color--dark);
	background: var(--wp--preset--color--sand);
}

.humee-badge--bestseller {
	color: var(--wp--preset--color--bg-alt);
	background: var(--wp--preset--color--dark);
}

.humee-badge--promocja {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--accent);
}


/* ==========================================================================
   PRODUCT-GRID — reużywalna siatka kart produktu (2 / 3 / 4 kolumny) w rytmie
   listingu (row `--md`, col `--sm`). JEDNO źródło responsywnego rozkładu dla
   miejsc, które kładą kafle `.product-card` obok siebie (puste stany koszyka /
   ulubionych, rekomendacje). Listing (`.shop-grid ul.products`) ma własny,
   historyczny zestaw reguł i świadomie NIE jest tu aliasowany (unikamy regresji).
   Neutralna wobec kontenera (grid, bez tła/paddingu — te daje sekcja nadrzędna).
   ========================================================================== */
.product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 64rem) {
	.product-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* ==========================================================================
   REKOMENDACJE — karuzela kafli „może ci się spodobać” (Swiper). Prymityw
   GLOBALNY (nie listing.css) — używany na listingu, 404 i single (upsells/
   related) przez wspólny renderer `humee_products_carousel_html()` + init
   `assets/js/woo-carousel.js`. Slajd = pełny kafel `.product-card` (media +
   swatche + tytuł + cena), spójnie z siatkami. Wartości = tokeny theme.json.
   ========================================================================== */
.rekomendacje {
	background: var(--wp--preset--color--bg-alt);
	padding-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
	overflow: hidden;                 /* peek slajdów nie wywołuje poziomego scrolla */
}

.rekomendacje__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
	margin-block-end: var(--wp--preset--spacing--md);
}

.rekomendacje__title {
	font-size: var(--wp--preset--font-size--h-1);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}

/* „więcej” = pill INLINE na pierwszej linii nagłówka. */
.rekomendacje__more {
	margin-inline-end: var(--wp--preset--spacing--sm);
	vertical-align: middle;
}

.rekomendacje__nav {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	flex: none;
}

.rekomendacje__arrow {
	font-size: var(--wp--preset--font-size--button-1);
	line-height: 1;
}

.rekomendacje__arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.rekomendacje__swiper {
	overflow: visible;                /* widoczny peek kolejnego kafla na mobile */
}

/* Slajd = pełny kafel; równa wysokość niezależnie od długości tytułu. */
.rekomendacje .swiper-slide {
	height: auto;
}

.rekomendacje .swiper-slide .product-card {
	height: 100%;
}


/* ==========================================================================
   BREADCRUMB — ścieżka nawigacji „home → dorośli → ...”
   ========================================================================== */
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--dark);
}

.breadcrumb__sep {
	color: var(--wp--preset--color--border-soft);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
	opacity: 0.7;
}

.breadcrumb [aria-current="page"] {
	color: var(--wp--preset--color--border-soft);
}


/* ==========================================================================
   SCRIM + MODAL — reużywalny prymityw nakładki (filtry, „dodano do koszyka”…).
   Wzorzec z docs/prototypes/docs/stany-nakladki.md: wyśrodkowany dialog na
   przyciemnionym tle. a11y: sterowanie stanem [hidden] + focus-trap w JS.
   ========================================================================== */
.scrim {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: var(--wp--custom--scrim--dark); /* --dark @ 60% (wartość z Figmy 37:537) */
	opacity: 0;
	transition: opacity 0.25s ease;
}

.scrim.is-open {
	opacity: 1;
}

.scrim--light {
	background: var(--wp--custom--scrim--light); /* kremowy scrim „dodano do koszyka” */
}

.modal {
	position: fixed;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	z-index: 950;
	inline-size: min(720px, calc(100vw - 2 * var(--wp--preset--spacing--md)));
	max-block-size: calc(100vh - 2 * var(--wp--preset--spacing--md));
	overflow-y: auto;
	padding: var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--bg-alt);
	border-radius: var(--wp--custom--radius--modal);
	box-shadow: 0 12px 48px var(--wp--custom--shadow--ambient);
	opacity: 0;
	transform: translate(-50%, -48%);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.modal.is-open {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
	padding-block-end: var(--wp--preset--spacing--sm);
	border-block-end: 1px solid var(--wp--preset--color--dark);
}

.modal__title {
	font-size: var(--wp--preset--font-size--h-1);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}

.modal__close {
	flex: none;
}


/* Reduced motion → jedno źródło w base.css (ADR-0032). Poprzedni per-plikowy
   blok `transition: none` był redundantny z globalnym `!important` nuke. */

/* PROSE (.prose h1/h2/h3/p/lead/listy) → przeniesione do assets/css/tekstowa.css.
   Powód: `.prose` renderuje się tylko na szablonie template-tekstowa.php i na
   single wpisu (`single.php` reużywa ten sam prymityw — ADR-0014/0038),
   więc nie musi obciążać globalnego components.css (zasada zasięgu, ADR-0032). */

/* ==========================================================================
   NOTICES — jeden prymityw komunikatów Woo dla OBU systemów (ADR-0033).

   Klasyczne (`.woocommerce-message/-error/-info`, szablony notices/*.php) oraz
   blokowe (`.wc-block-components-notice-banner.is-*` + inline
   `.wc-block-components-validation-error`) mają wyglądać IDENTYCZNIE, na tokenach
   stanów Humee (theme.json `--wp--custom--state--*`, Opcja B — powściągliwa
   trójbarwność). Tekst = --dark (czytelność), tło banera = subtelny tint,
   a ikona = KOLOROWY DYSK stanu z BIAŁYM glifem (max kontrast, jeden badge dla
   obu systemów).

   Dlaczego w components.css (nie osobny notices.css): notice printuje się na
   wielu, NIEPOKRYWAJĄCYCH się powierzchniach (shop/produkt + koszyk + checkout +
   konto + dowolny `wc_print_notices`). Żaden pojedynczy warunek enqueue ich nie
   obejmuje → najszersza powierzchnia = globalny components.css (zasada ADR-0032).

   Kaskada zweryfikowana empirycznie: components.css ładuje się PO `wc-blocks-*`
   (na koszyku indeks 18 vs 5–6) → równa specyficzność wygrywa źródłem. Zero
   !important, zero selektorów struktury prywatnej — tylko klasy komponentów +
   modyfikatory (zgodnie z dev-docs WC). Klasyczne: dysk = `background-color`
   (token stanu) + biały glif = `background-image` (assets/icons/*.svg, białe).
   Blokowe: przemalowany dysk WC `svg` (bg=token, fill=biały).
   ========================================================================== */

/* --- Klasyczne: message / error / info -----------------------------------
   Wspólna baza (kolory/tło/obrys/typografia). Układ ikony różni się per typ:
   message/info to <div> (tekst + ew. przycisk „zobacz koszyk") → FLEX z
   wyśrodkowaniem w pionie (ikona, tekst i pill w jednym rzędzie, bez rozjazdu);
   error to <ul><li> → ikona ABSOLUTNA (flex łamałby wiele <li>). */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	margin-block: 0 var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--modal);
	background: var(--wp--preset--color--bg-alt);
	list-style: none;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--dark);
}

/* message/info = FLEX: ikona (flex-item) + treść + ew. przycisk, wyśrodkowane. */
.woocommerce-message,
.woocommerce-info {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	flex-wrap: wrap;
}

.woocommerce-message::before,
.woocommerce-info::before {
	content: "";
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border-radius: 50%;
	background-color: var(--notice-accent);
	background-image: var(--notice-icon);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

/* error = <ul>: ikona absolutna, wyśrodkowana w pionie względem pola. */
.woocommerce-error {
	position: relative;
	padding-inline-start: calc(var(--wp--preset--spacing--md) + 1.6rem);
}

.woocommerce-error::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inset-inline-start: var(--wp--preset--spacing--md);
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border-radius: 50%;
	background-color: var(--notice-accent);
	background-image: var(--notice-icon);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.woocommerce-message {
	--notice-accent: var(--wp--custom--state--success);
	--notice-icon: url("../icons/success.svg");
	border-color: var(--wp--custom--state--success);
	background: var(--wp--custom--state--success-bg);
}

.woocommerce-error {
	--notice-accent: var(--wp--custom--state--error);
	--notice-icon: url("../icons/error.svg");
	border-color: var(--wp--custom--state--error);
	background: var(--wp--custom--state--error-bg);
}

.woocommerce-info {
	--notice-accent: var(--wp--custom--state--info);
	--notice-icon: url("../icons/info.svg");
	border-color: var(--wp--custom--state--info);
	background: var(--wp--custom--state--info-bg);
}

/* Wiele <li> w błędzie — stackują się w kolumnie w polu z wcięciem na ikonę. */
.woocommerce-error li {
	list-style: none;
}
.woocommerce-error li + li {
	margin-block-start: var(--wp--preset--spacing--xs);
}

/* W message/info przycisk („zobacz koszyk"/„przeglądaj produkty") = ostatni
   element flex; `margin-inline-start:auto` dosuwa go do prawej krawędzi. */
.woocommerce-message .button,
.woocommerce-info .button {
	margin-inline-start: auto;
}

/* Fokus (JS przenosi fokus na błąd — WCAG 3.3.1; woo-account.js). */
.woocommerce-message:focus,
.woocommerce-error:focus,
.woocommerce-info:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* --- Blokowe: banner (koszyk/checkout, Store API) ------------------------
   Przemalowanie natywnych, poza-brandowych kolorów WC (#cc1818/#4ab866/…) na
   tokeny stanów. Tekst zostaje --dark; kolor stanu = tło+obrys banera.

   Ikona: WC renderuje ją jako GLIF na wypełnionym KOLOROWYM DYSKU
   (`svg { background-color:<jaskrawy WC>; border-radius:50%; padding:2px }`).
   Sama zmiana `fill` zostawiała jaskrawy dysk WC (rozjazd palety) i topiła glif
   w tle → dlatego przemalowujemy OBA: `background-color` dysku na token stanu
   ORAZ `fill` glifu na biały (max kontrast). Spójne z klasycznymi notice, które
   też dają dysk stanu + biały glif (sekcja wyżej). */
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
	color: var(--wp--preset--color--dark);
}

.wc-block-components-notice-banner.is-error {
	background-color: var(--wp--custom--state--error-bg);
	border-color: var(--wp--custom--state--error);
}
.wc-block-components-notice-banner.is-error svg {
	fill: var(--wp--preset--color--white);
	background-color: var(--wp--custom--state--error);
}

.wc-block-components-notice-banner.is-success {
	background-color: var(--wp--custom--state--success-bg);
	border-color: var(--wp--custom--state--success);
}
.wc-block-components-notice-banner.is-success svg {
	fill: var(--wp--preset--color--white);
	background-color: var(--wp--custom--state--success);
}

.wc-block-components-notice-banner.is-info {
	background-color: var(--wp--custom--state--info-bg);
	border-color: var(--wp--custom--state--info);
}
.wc-block-components-notice-banner.is-info svg {
	fill: var(--wp--preset--color--white);
	background-color: var(--wp--custom--state--info);
}

.wc-block-components-notice-banner.is-warning {
	background-color: var(--wp--custom--state--warning-bg);
	border-color: var(--wp--custom--state--warning);
}
.wc-block-components-notice-banner.is-warning svg {
	fill: var(--wp--preset--color--white);
	background-color: var(--wp--custom--state--warning);
}

/* --- Blokowe: inline validation (kupon, pola checkoutu) ------------------
   `.wc-block-components-validation-error` używa `fill:currentColor` na svg →
   sam kolor tekstu przemalowuje też ikonę. */
.wc-block-components-validation-error {
	color: var(--wp--custom--state--error);
}

/* Czerwony obrys pola z błędem → token stanu (bez jaskrawej czerwieni).
   Pokrywa: pola checkoutu (WC form-scoped focus = 0,4,1 → dokładamy wariant
   `.wc-block-components-form`) oraz pole kuponu (cart.css ustawia bazowo `line`
   na 0,2,1 i ładuje się PO components → prefiks `.wc-block-cart` = 0,3,1 wygrywa
   niezależnie od kolejności). Zero !important. */
.wc-block-components-text-input.has-error input,
.wc-block-components-text-input.has-error input:hover,
.wc-block-components-text-input.has-error input:focus,
.wc-block-components-text-input.has-error input:active,
.wc-block-cart .wc-block-components-totals-coupon__input.has-error input,
.wc-block-components-form .wc-block-components-text-input.has-error input,
.wc-block-components-form .wc-block-components-text-input.has-error input:hover,
.wc-block-components-form .wc-block-components-text-input.has-error input:focus,
.wc-block-components-form .wc-block-components-text-input.has-error input:active {
	border-color: var(--wp--custom--state--error);
	box-shadow: none;
}
.wc-block-components-checkbox.has-error .wc-block-components-checkbox__input {
	border-color: var(--wp--custom--state--error);
}