/*
 * 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. */
.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 — panel filtrów (?categories=…&tags=…)
   ---------------------------------------------------------------------- */

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

/*
 * 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 filtrów rozdzielone włoskową linią zamiast samym odstępem —
   inaczej nagłówki grup zlewają się z listą powyżej. */
.oliwa-shop-filters .wp-block-woocommerce-product-filter-taxonomy,
.oliwa-shop-filters .wp-block-woocommerce-product-filter-price {
	border-top: 1px solid var(--hairline);
	padding-top: var(--space-6);
}

.oliwa-shop-filters .wp-block-woocommerce-product-filter-active+* {
	border-top: 0;
	padding-top: 0;
}

/*
 * Przycisk „Wyczyść filtry" siedzi w drugim, pustym bloku „Wybrane filtry"
 * dopiętym na końcu panelu — rdzeń Woo pozwala mu żyć wyłącznie wewnątrz
 * tego bloku (block.json: "ancestor"), a użytkownik ma go szukać pod
 * filtrami, nie między chipsami a kategoriami. Hairline taki sam jak nad
 * pozostałymi sekcjami; reguła wyżej zdejmuje go tylko sąsiadowi pierwszego
 * bloku aktywnych filtrów, więc ten tu zostaje.
 */
.oliwa-shop-filters .oliwa-filter-clear {
	border-top: 1px solid var(--hairline);
	padding-top: var(--space-6);
}

/* Chipsy kategorii */
.oliwa-shop-filters .wc-block-product-filter-chips__items {
	gap: var(--space-2);
}

.oliwa-shop-filters .wc-block-product-filter-chips__item {
	align-items: center;
	background: transparent;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-control);
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	min-height: var(--control-h-xs);
	padding: 0 var(--space-3);
	transition: background-color var(--duration-base) var(--easing-standard),
		border-color var(--duration-base) var(--easing-standard),
		color var(--duration-base) var(--easing-standard);
	white-space: nowrap;
}

.oliwa-shop-filters .wc-block-product-filter-chips__item:hover {
	background: var(--wp--preset--color--base-alt);
}

.oliwa-shop-filters .wc-block-product-filter-chips__item[aria-checked="true"] {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base-alt);
}

.oliwa-shop-filters .wc-block-product-filter-chips__item:focus-visible {
	box-shadow: var(--focus-ring-shadow);
	outline: none;
}

/* Przegladarka rysuje domyslna ramke "groove" wokol <fieldset>, ktorym Woo
   opakowuje kazda liste filtrow. Reset globalny theme'u jej nie obejmuje. */
.oliwa-shop-filters fieldset,
.wc-block-product-filters__overlay-content fieldset {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

/* Lista znaczników */
.oliwa-shop-filters .wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.oliwa-shop-filters .wc-block-product-filter-checkbox-list__label {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: var(--space-2);
}

.oliwa-shop-filters .wc-block-product-filter-checkbox-list__input {
	appearance: none;
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius-control);
	height: var(--icon-md);
	margin: 0;
	width: var(--icon-md);
}

.oliwa-shop-filters .wc-block-product-filter-checkbox-list__input:checked {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.oliwa-shop-filters .wc-block-product-filter-checkbox-list__mark {
	color: var(--wp--preset--color--base-alt);
}

.oliwa-shop-filters .wc-block-product-filter-checkbox-list__text {
	color: var(--wp--preset--color--contrast);
	font-size: var(--text-sm);
}

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

.oliwa-shop-filters .wc-block-product-filter-checkbox-list__show-more-button {
	color: var(--wp--preset--color--accent-deep);
	font-size: var(--text-2xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* 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);
}

.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;
	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 się układają pionowo i Woo przełącza panel
   w tryb szuflady — przyklejony sidebar traci wtedy sens. */
@media (max-width: 781px) {
	.oliwa-shop-filters {
		position: static;
	}

	.oliwa-shop-filters .wc-block-product-filters__open-overlay {
		border: 1px solid var(--hairline) !important;
		border-radius: var(--radius-control);
		justify-content: center;
		min-height: var(--control-h-md);
		width: 100%;
	}
}