/* ==========================================================================
   LISTING SKLEPU / ARCHIWA KATEGORII — port prototypu `sections/listing/*`
   + `_shared/rekomendacje` (Figma 37:244) na tokeny theme.json. Ładowany
   warunkowo (`is_shop() || is_product_taxonomy()`, inc/woo/archive.php).

   Layout budują HAKI (inc/woo/archive.php), tu tylko WARSTWA WIZUALNA. Karta =
   globalny `.product-card` (components.css) — parytet z wyszukiwarką/404. Ten
   plik styluje: nagłówek kategorii, siatkę na `ul.products`, natywny sort +
   paginację Woo, rekomendacje, baner „gentle rain” oraz modal filtrów.

   Wartości = tokeny (var(--wp--preset--*) / var(--wp--custom--*)), zero hardkodów.
   ⚠ Header na podstronach jest solidny + sticky w normalnym flow (nie overlay) —
   NIE rezerwujemy miejsca na jego wysokość (jak search.css / 404.css).
   ========================================================================== */


/* ==========================================================================
   1) NAGŁÓWEK KATEGORII — breadcrumb + H1 + podtytuł + „filtruj ↓”.
   ========================================================================== */
.shop-header {
	background: var(--wp--preset--color--bg-alt);
	padding-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}

.shop-header__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

/* H1 = 46px (Figma), waga regularna z base h1. */
.shop-header__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);
}

/* Wiersz: podtytuł (lewo) + „filtruj” (prawo). Mobile: kolumna. */
.shop-header__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--md);
	margin-block-start: var(--wp--preset--spacing--xs);
}

.shop-header__subtitle {
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--body);
	max-width: 45ch;
}

.shop-header__filter {
	flex: none;
}

@media (min-width: 768px) {
	.shop-header__row {
		flex-direction: row;
		align-items: flex-end;        /* filtr do dolnej krawędzi podtytułu */
		justify-content: space-between;
		gap: var(--wp--preset--spacing--lg);
	}
}


/* ==========================================================================
   2) SIATKA PRODUKTÓW — CSS grid na natywnym `ul.products` Woo (2/3/4 kol).
      Parytet z wyszukiwarką (search.css). `li.product` reset — legacy CSS Woo
      jest wyłączony (ADR-0016), ale zerujemy defensywnie float/width/margin.
   ========================================================================== */
/* Ta sama powierzchnia co `.shop-header` (oba `bg-alt`) — górny padding zdublowałby
   się z jego `padding-block-end` w 80px pustki. Oddech od nagłówka daje header. */
.shop-grid {
	background: var(--wp--preset--color--bg-alt);
	padding-block: 0 var(--wp--preset--spacing--xl);
}

.shop-grid ul.products {
	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: 768px) {
	.shop-grid ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.shop-grid ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

.shop-grid ul.products li.product {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
}

/* Komunikaty Woo (brak produktów, notyfikacje) — przeniesione do WSPÓLNEGO
   prymitywu notice w components.css (sekcja NOTICES, ADR-0033). Listing nie ma
   już własnej wersji: spójny wygląd notice na całej witrynie. */


/* ==========================================================================
   3) SORTOWANIE — natywny `woocommerce_catalog_ordering` (form.woocommerce-ordering).
      Dosunięty do prawej nad siatką, select ostylowany jako subtelna pigułka.
   ========================================================================== */
.shop-grid .woocommerce-ordering {
	display: flex;
	justify-content: flex-end;
	margin-block-end: var(--wp--preset--spacing--md);
}

.shop-grid .woocommerce-ordering select {
	appearance: none;
	padding: var(--wp--custom--pill--pad);
	border: 1px solid var(--wp--preset--color--dark);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--tight);
	cursor: pointer;
}

.shop-grid .woocommerce-ordering select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}


/* ==========================================================================
   4) PAGINACJA — natywna `woocommerce_pagination` (.woocommerce-pagination).
      Styl jak w wyszukiwarce: okrągłe pille, aktywna = ciemne kółko.
   ========================================================================== */
.shop-grid .woocommerce-pagination {
	margin-block-start: var(--wp--preset--spacing--xl);
	text-align: center;
}

.shop-grid .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.shop-grid .woocommerce-pagination ul.page-numbers li {
	margin: 0;
	border: 0;
}

.shop-grid .woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--wp--custom--radius--circle);
	font-size: var(--wp--preset--font-size--button-1);
	line-height: 1;
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.shop-grid .woocommerce-pagination a.page-numbers:hover,
.shop-grid .woocommerce-pagination a.page-numbers:focus-visible {
	background: var(--wp--preset--color--bg);
}

.shop-grid .woocommerce-pagination .page-numbers.current {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--bg);
}

.shop-grid .woocommerce-pagination .page-numbers.dots {
	pointer-events: none;
}

/* Strzałki prev/next = okrągłe pille na obrysie. */
.shop-grid .woocommerce-pagination .prev.page-numbers,
.shop-grid .woocommerce-pagination .next.page-numbers {
	border: 1px solid var(--wp--preset--color--dark);
}

.shop-grid .woocommerce-pagination .prev.page-numbers:hover,
.shop-grid .woocommerce-pagination .next.page-numbers:hover,
.shop-grid .woocommerce-pagination .prev.page-numbers:focus-visible,
.shop-grid .woocommerce-pagination .next.page-numbers:focus-visible {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--bg);
}


/* REKOMENDACJE („może ci się spodobać”) → PRZENIESIONE do components.css.
   Karuzela `.rekomendacje` (Swiper + kafle `.product-card`) to prymityw reużywany
   też na 404 i single (upsells/related), gdzie listing.css się nie ładuje — więc
   mieszka globalnie. Init = wspólny `assets/js/woo-carousel.js`. */


/* ==========================================================================
   6) BANER „GENTLE RAIN” — sekcja z 3 najnowszymi wpisami („historie i porady”).
      Port `sections/listing/baner-gentle-rain` (tło piaskowe).

      Tu zostaje TYLKO powierzchnia sekcji (tło + rytm pionowy). Siatka i karty
      = wspólny prymityw `.post-grid` / `.post-card--feature` z
      `assets/css/components/post-card.css`, bo ten sam kafel renderuje się też
      pod artykułem („przeczytaj też”) — czyli poza listingiem (ADR-0032: plik
      prymitywu = jego najszersza powierzchnia renderowania, nie estetyka).
   ========================================================================== */
.baner-gentle-rain {
	background: var(--wp--preset--color--sand);
	padding-block: var(--wp--preset--spacing--xl);
}


/* ==========================================================================
   7) MODAL FILTRÓW — grupy-akordeony (kolor / rozmiar) w prymitywie `.modal`.
      Reużywa `.swatch` / `.swatch-size` (components.css). Otwieranie/serializacja
      w listing.js; bez JS form działa (degradacja do 1 termu).
   ========================================================================== */
.filter {
	margin-block-start: var(--wp--preset--spacing--md);
}

.filter__group {
	border-block-end: 1px solid var(--wp--preset--color--line);
}

/* Nagłówek grupy = przycisk rozwijania (22px), strzałka po prawej. */
.filter__legend {
	display: flex;
	align-items: center;
	justify-content: space-between;
	inline-size: 100%;
	gap: var(--wp--preset--spacing--sm);
	padding-block: var(--wp--preset--spacing--sm);
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--tight);
	text-align: start;
	cursor: pointer;
}

.filter__legend-arrow {
	transition: transform 0.2s ease;
}

.filter__legend[aria-expanded="true"] .filter__legend-arrow {
	transform: rotate(180deg);
}

.filter__panel {
	padding-block-end: var(--wp--preset--spacing--sm);
}

.filter__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.filter__options--size {
	gap: var(--wp--preset--spacing--xs);
}

.filter__option {
	display: inline-flex;
	cursor: pointer;
}

/* Zaznaczony wariant = obwódka akcentu wokół swatcha/numeru (reużyty prymityw). */
.filter__input:checked + .swatch {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.filter__input:checked + .swatch-size {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--bg);
	border-color: var(--wp--preset--color--dark);
}

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

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


/* ==========================================================================
   8) TOOLBAR NAD SIATKĄ — chip-y aktywnych filtrów (usuwanie pojedynczo +
      „wyczyść wszystko"). Chip = reużyty prymityw `.pill--outline pill--sm`;
      hover/focus (accent) sygnalizuje usunięcie. Status wyników = SR-only.
   ========================================================================== */
/* Bez aktywnych filtrów toolbar niesie tylko SR-only status (wysokość 0) — margines
   dokładamy więc dopiero, gdy są chip-y, inaczej rósłby duch odstępu nad sortowaniem. */
.shop-toolbar:has(.filter-chips) {
	margin-block-end: var(--wp--preset--spacing--md);
}

.filter-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.filter-chip__x {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 0;
}

.filter-chips__clear {
	margin-inline-start: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--body);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.filter-chips__clear:hover,
.filter-chips__clear:focus-visible {
	color: var(--wp--preset--color--accent);
}


/* ==========================================================================
   9) „BRAK WYNIKÓW" — komunikat świadomy filtrów (hook woocommerce_no_products_found).
       Chip-y aktywnych filtrów zostają nad siatką (można cofnąć pojedynczy).
   ========================================================================== */
.shop-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--md);
	padding-block: var(--wp--preset--spacing--lg);
}

.shop-empty__lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--body);
	max-width: 45ch;
}