/*
 * filters.css — panel filtrów sklepu i sidebar widgetów.
 *
 * Część arkuszy theme'u rozbitych per feature. Kolejność ładowania i lista
 * plików: functions.php → oliwa_enqueue_assets(). Wszystkie wartości pochodzą
 * z assets/css/tokens.css.
 */

/* Sidebar sklepu — widgety rozdzielone hairline'ami. */
/* Widgety sklepu. Reguły czekają na markup: functions.php rejestruje obszar
   widgetów `shop-sidebar`, ale żaden szablon jeszcze go nie wypisuje. Kiedy
   dojdzie widget filtrów Woo, wrapper dostaje klasę `oliwa-shop-sidebar`
   i te reguły zaczynają działać bez zmian. Świadomie zostawione. */
.oliwa-shop-sidebar .widget {
	border-bottom: 1px solid var(--hairline);
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-8);
}

.oliwa-shop-sidebar .widget:last-child {
	border-bottom: 0;
}

.oliwa-shop-sidebar .widget-title {
	font-family: var(--font-body);
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Sklep — kolumna boczna listingu

   Dwie rzeczy w jednej kolumnie: listy terminów (linki do archiwów
   /kategoria-produktu/ i /cecha-produktu/) oraz panel filtrów Woo, w którym
   została sama cena — jedyne kryterium bez własnego adresu.
   ---------------------------------------------------------------------- */

.oliwa-shop-layout {
	align-items: flex-start;
}

/* Kolumna wyników. `min-width: 0` jest tu obowiązkowe: domyślne `min-width:
   auto` na elemencie flex każe kolumnie być co najmniej tak szerokiej, jak
   jej najszersze dziecko — a siatka produktów potrafi być szersza niż
   przydzielony jej ułamek, i wtedy panel filtrów zostaje ściśnięty. */
.oliwa-shop-results {
	min-width: 0;
}

/*
 * Kolumna filtrów musi być tak wysoka jak jej zawartość, nie jak sąsiad.
 * Blok kolumn rozciąga dzieci na pełną wysokość wiersza, a wtedy sticky nie
 * ma się w czym przesuwać — panel zjeżdżał razem z listą produktów mimo
 * ustawionego `position: sticky`. `align-items` na kontenerze nie wystarczy,
 * bo WordPress wypisuje dla bloku kolumn własną wartość; `align-self` na
 * samej kolumnie jest silniejsze i nie zależy od rodzica.
 */
.oliwa-shop-filters {
	align-self: flex-start;
	position: sticky;
	top: var(--sticky-offset);
}

.admin-bar .oliwa-shop-filters {
	top: var(--sticky-offset-admin);
}

.oliwa-shop-filters .wp-block-heading {
	color: var(--wp--preset--color--contrast);
}

/* Sekcje panelu rozdzielone włoskową linią zamiast samym odstępem —
   inaczej nagłówki grup zlewają się z listą powyżej. Pierwsza sekcja
   (lista kategorii) linii nie dostaje, bo nie ma nad sobą czego odciąć. */
.oliwa-shop-filters .oliwa-shop-terms+.oliwa-shop-terms,
.oliwa-shop-filters .wp-block-woocommerce-product-filter-price {
	border-top: 1px solid var(--hairline);
	padding-top: var(--space-6);
}

/* -------------------------------------------------------------------------
   Listy terminów (kategorie, znaczniki)

   Blok `core/categories` wypisuje zwykłą listę <ul> z linkami do archiwów.
   Zagnieżdżenie (Oliwy smakowe → Ostre) idzie zagnieżdżonym <ul>, więc
   głębokość czyta się z wcięcia — bez drugiego zestawu ozdób.
   ---------------------------------------------------------------------- */

.oliwa-shop-terms .wp-block-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oliwa-shop-terms .wp-block-categories li {
	margin: 0;
}

.oliwa-shop-terms .wp-block-categories a {
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: var(--text-sm);
	padding: var(--space-1) 0;
	text-decoration: none;
	transition: color var(--duration-base) var(--easing-standard);
}

.oliwa-shop-terms .wp-block-categories a:hover {
	color: var(--text-accent);
}

/* Termin, którego archiwum właśnie oglądamy. Rdzeń daje mu klasę
   `current-cat` (także `current-cat-parent` dla rodzica), tak samo jak
   w klasycznym widgecie kategorii. */
.oliwa-shop-terms .wp-block-categories .current-cat>a {
	color: var(--text-accent);
	font-weight: var(--weight-medium);
}

/* Zagnieżdżona lista: wcięcie plus pionowa reguła jako ślad hierarchii. */
/* Podkategorie rozwijają się kontekstowo — widać je wyłącznie w gałęzi,
   w której właśnie stoisz. Nie ma tu przełącznika ani stanu do zapamiętania:
   rozwinięcie wynika z adresu, więc przeżywa odświeżenie i powrót z historii.
   Klasy `current-cat` (stoję na rodzicu) i `current-cat-ancestor` (stoję na
   dziecku) wypisuje `wp_list_categories()`. Cena: na /sklep/ nie widać, że
   „Oliwy smakowe" mają dzieci — wejściem do nich jest menu, które pokazuje
   całe drzewo naraz. Powrót do listy zawsze rozwiniętej = skasować `display`. */
.oliwa-shop-terms .wp-block-categories .children {
	border-left: 1px solid var(--hairline);
	display: none;
	list-style: none;
	margin: 0 0 var(--space-1) var(--space-2);
	padding-left: var(--space-3);
}

.oliwa-shop-terms .wp-block-categories .current-cat>.children,
.oliwa-shop-terms .wp-block-categories .current-cat-ancestor>.children {
	display: block;
}

.oliwa-shop-terms .wp-block-categories .children a {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--text-2xs);
}

/* Znaczniki jako <select>: lista rośnie liniowo z katalogiem, a w kolumnie
   244 px jedenaście wierszy spycha cenę poza pierwszy ekran. Rozwijana lista
   ma stałą wysokość niezależnie od liczby terminów.

   Nawigację robi skrypt rdzenia dopięty za <select> — kieruje na
   `/?product_tag=<slug>`, a `redirect_canonical()` przestawia to na ładny
   adres archiwum. Jeden przeskok 301 więcej niż przy liście linków; w zamian
   rdzeń sam zaznacza termin, którego archiwum właśnie oglądamy. */
.oliwa-shop-terms select {
	font-size: var(--text-sm);
	padding: var(--pad-control-sm);
}

/* -------------------------------------------------------------------------
   Panel jako <details>

   Na telefonie kolumna filtrów stoi nad listą produktów, więc rozwinięta
   zjadałaby cały pierwszy ekran. `core/details` zwija ją do jednego wiersza
   „Filtry" — bez JS-u, bez `aria-expanded`, z obsługą klawiatury z rdzenia
   przeglądarki.

   Na desktopie panel ma być po prostu widoczny. Znacznik `open` w markupie
   dawałby stan początkowy, ale zwinięcie na desktopie nadal byłoby możliwe;
   zamiast tego zostawiamy element zwinięty, a szerokie okno otwiera go
   regułą `::details-content`.
   ---------------------------------------------------------------------- */

.oliwa-shop-panel {
	margin: 0;
}

.oliwa-shop-panel>summary {
	align-items: center;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-control);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	display: flex;
	font-family: var(--font-body);
	font-size: var(--text-2xs);
	font-weight: 600;
	justify-content: space-between;
	letter-spacing: var(--tracking-widest);
	list-style: none;
	min-height: var(--control-h-md);
	padding: 0 var(--space-4);
	text-transform: uppercase;
}

/* Domyślny trójkąt zdejmujemy w obu składniach: `list-style` obsługuje
   Firefoksa i nowego Chrome'a, pseudoelement `-webkit-` starsze WebKity. */
.oliwa-shop-panel>summary::-webkit-details-marker {
	display: none;
}

/* Strzałka rysowana maską — ten sam glif co w nawigacji. */
.oliwa-shop-panel>summary::after {
	background: currentColor;
	content: "";
	height: var(--icon-md);
	mask: var(--ico-chevron-down) center / contain no-repeat;
	transition: transform var(--duration-fast) var(--easing-standard);
	width: var(--icon-md);
}

.oliwa-shop-panel[open]>summary::after {
	transform: rotate(180deg);
}

.oliwa-shop-panel[open]>summary {
	margin-bottom: var(--space-6);
}

/* Powrót do pełnego katalogu. Stoi nad wszystkimi sekcjami, bo zdejmuje
   zawężenie każdej z nich; hairline pod spodem oddziela go od „Kategorii”
   tak samo, jak sekcje są oddzielone od siebie. Strzałka w lewo to ten sam
   glif co w podsumowaniu panelu, obrócony o 90°. */
.oliwa-terms-reset {
	border-bottom: 1px solid var(--hairline);
	padding-bottom: var(--space-4);
}

.oliwa-terms-reset a {
	align-items: center;
	color: var(--wp--preset--color--accent-deep);
	display: inline-flex;
	font-weight: 600;
	gap: var(--space-2);
	letter-spacing: var(--tracking-widest);
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--duration-base) var(--easing-standard);
}

.oliwa-terms-reset a::before {
	background: currentColor;
	content: "";
	height: var(--icon-sm);
	mask: var(--ico-chevron-down) center / contain no-repeat;
	transform: rotate(90deg);
	width: var(--icon-sm);
}

.oliwa-terms-reset a:hover {
	color: var(--wp--preset--color--primary);
}


/* Wybrane filtry — chipsy z krzyżykiem */
.oliwa-shop-filters .wc-block-product-filter-removable-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.oliwa-shop-filters .wc-block-product-filter-removable-chips__item {
	align-items: center;
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-control);
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	font-size: var(--text-2xs);
	gap: var(--space-1);
	min-height: var(--control-h-xs);
	padding: 0 var(--space-1) 0 var(--space-3);
}

.oliwa-shop-filters .wc-block-product-filter-removable-chips__remove {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	opacity: 0.7;
	padding: 0;
}

.oliwa-shop-filters .wc-block-product-filter-removable-chips__remove:hover {
	opacity: 1;
}

.oliwa-shop-filters .wc-block-product-filter-removable-chips__remove-icon {
	height: var(--icon-sm);
	width: var(--icon-sm);
}

/* Przycisk „Wyczyść filtry" stoi pod chipsami, w tym samym bloku „Wybrane
   filtry" — rdzeń Woo i tak pozwala mu żyć wyłącznie wewnątrz niego
   (block.json: "ancestor"). Wcześniej ciągnął go na dół panelu drugi,
   pusty egzemplarz tego bloku; przy jednej sekcji filtrów (cena) ta
   proteza nie ma już czego rozdzielać. */
.oliwa-shop-filters .wc-block-product-filter-clear-button {
	color: var(--wp--preset--color--accent-deep);
	font-size: var(--text-2xs);
	letter-spacing: 0.08em;
	margin-top: var(--space-4);
	text-transform: uppercase;
}

/* Suwak ceny */
.oliwa-shop-filters .wp-block-woocommerce-product-filter-price-slider {
	--range-color: var(--wp--preset--color--primary);
}

/* Woo uklada suwak w gridzie: tor u gory, dwa pola kwot pod nim. Wlasna
   regula Woo na szerokosc tych pol celuje w klase .wc-block-product-filter-
   price-slider, ktorej render nigdy nie wypisuje — nie dziala. Bez tego
   pola bierze globalna regula formularzy theme'u i para wychodzi poza kolumne. */
.oliwa-shop-filters .wp-block-woocommerce-product-filter-price-slider .text input[type="text"] {
	font-size: var(--text-2xs);
	max-width: 84px;
	min-width: 0;
	padding: var(--pad-control-sm);
	width: auto;
}

.oliwa-shop-filters .wp-block-woocommerce-product-filter-price-slider .text {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--text-2xs);
}

/* Poniżej 782px kolumny układają się pionowo — kolumna boczna staje się
   pierwszą sekcją strony, więc przyklejenie traci sens. Szuflady Woo tu nie
   ma (`showFilterDrawer: false`): panel to cztery krótkie sekcje, a nie
   ekran filtrów, po który warto chować interfejs za przycisk. */
@media (max-width: 781px) {
	.oliwa-shop-filters {
		position: static;
	}
}

/* Na desktopie panel jest zawsze rozwinięty, a nagłówek „Filtry" zbędny —
   kolumna sama w sobie jest tym nagłówkiem.

   `@supports` nie jest ozdobą: gdyby przeglądarka nie umiała otworzyć
   `<details>` z CSS-a, ukryty `summary` zostawiłby panel zwinięty
   i bez klikalnego uchwytu. W takiej przeglądarce obie reguły odpadają
   razem i zostaje działający, zwijany panel. */
@media (min-width: 782px) {

	@supports selector(::details-content) {

		.oliwa-shop-panel>summary {
			display: none;
		}

		.oliwa-shop-panel::details-content {
			block-size: auto;
			content-visibility: visible;
		}
	}
}