/* ==========================================================================
   Bronisze online — katalog (widok listowy)
   Odwzorowanie węzłów Figma 84:370 i V3/ProductRow (82:412).
   ========================================================================== */

/* --- wiersz oferty -------------------------------------------------------- */

.bo-row {
	display: flex;
	align-items: flex-start;
	gap: var(--bo-space-5);
	padding: var(--bo-space-4);
	background: var(--bo-white);
	border: 1px solid var(--bo-stroke);
	border-radius: 14px;
	transition: border-color var(--bo-transition), box-shadow var(--bo-transition);
}

.bo-row:hover { border-color: var(--bo-green-contrast); box-shadow: var(--bo-shadow-sm); }

/* Oferta promowana — tło i mocniejsza obwódka wg makiety. */
.bo-row--promoted {
	background: var(--bo-verified-bg);
	border: 1.5px solid var(--bo-verified);
}

/* --- miniatura ------------------------------------------------------------ */

.bo-row__media {
	position: relative;
	width: 150px;
	height: 150px;
	flex: 0 0 auto;
	border-radius: var(--bo-radius);
	overflow: hidden;
	background: var(--bo-green-50);
}

.bo-row__image { width: 100%; height: 100%; object-fit: cover; }

.bo-row__eko {
	position: absolute;
	top: var(--bo-space-2);
	left: var(--bo-space-2);
	padding: 5px 10px;
	border-radius: 20px;
	background: var(--bo-green-contrast);
	color: var(--bo-white);
	font-size: var(--bo-text-sm);
	font-weight: 700;
	line-height: var(--bo-leading-body);
}

/* --- kolumna opisowa ------------------------------------------------------ */

.bo-row__main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	flex: 1 0 0;
	min-width: 0;
}

.bo-row__seller {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bo-space-3);
}

.bo-row__seller-name {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 500;
	color: var(--bo-green-contrast);
}

.bo-row__title {
	font-family: var(--bo-font-body);
	font-size: 1.25rem; /* 20px */
	font-weight: 700;
	line-height: var(--bo-leading-body);
	color: var(--bo-ink);
}

.bo-row__title a:hover { color: var(--bo-green-contrast); }

/* --- plakietki ------------------------------------------------------------ */

.bo-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-space-2);
	white-space: nowrap;
}

.bo-badge--promo {
	padding: 3px 10px;
	border-radius: 6px;
	background: var(--bo-verified);
	color: var(--bo-white);
	font-size: 0.6875rem; /* 11px */
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
}

.bo-badge--verified {
	padding: 2px var(--bo-space-3);
	border-radius: 10px;
	background: var(--bo-green-contrast);
	color: var(--bo-white);
	font-weight: 700;
}

.bo-badge--sale {
	padding: 2px var(--bo-space-2);
	border-radius: 5px;
	background: var(--bo-sale);
	color: var(--bo-white);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
}

/* --- wiersz „Typ …" ------------------------------------------------------- */

.bo-row__typeinfo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	font-size: var(--bo-text-sm);
	line-height: 1.45;
}

.bo-row__typeinfo-label { color: var(--bo-muted); }
.bo-row__typeinfo-value { color: var(--bo-ink); font-weight: 500; }
.bo-row__typeinfo-short { display: none; }

.bo-dot {
	width: 4px;
	height: 4px;
	border-radius: var(--bo-radius-pill);
	background: var(--bo-muted);
	display: inline-block;
	margin-inline: 2px;
}

/* --- pastylki atrybutów --------------------------------------------------- */

.bo-row__chips { display: flex; flex-wrap: wrap; gap: 4px; }

.bo-chip {
	padding: 4px 9px;
	border-radius: 6px;
	background: var(--bo-gray-100);
	color: var(--bo-text-soft);
	font-weight: 500;
	line-height: var(--bo-leading-body);
}

/* --- metadane ------------------------------------------------------------- */

.bo-row__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 var(--bo-space-4);
	width: 100%;
}

.bo-row__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-space-2);
	font-weight: 500;
	color: var(--bo-text);
}

.bo-row__meta-item--soft { color: var(--bo-text-soft); gap: 4px; }
.bo-row__meta-item--ok { color: var(--bo-green-contrast); font-weight: 700; gap: 4px; }

/* --- blok cenowy ---------------------------------------------------------- */

.bo-row__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	width: 250px;
	flex: 0 0 auto;
	text-align: right;
}

/*
 * Kolumna ceny była wymierzona pod makietę o kontenerze 1280 px. Po
 * poszerzeniu układu do 1600 px cała nadwyżka szła do kolumny opisowej, a
 * kolumna ceny zostawała ciasna: „min. zamówienie" łamało się na trzy
 * wiersze, a etykieta przycisku na dwa. Szerokość rośnie razem z układem.
 */
/* Przy 1280 px obok panelu filtrów 340 px ceny zostawiało opisowi ~240 px —
   nazwy łamały się z jednym słowem w drugim wierszu. */
@media (min-width: 1280px) {
	.bo-row__price { width: 280px; }
}

@media (min-width: 1440px) {
	.bo-row__price { width: 340px; }
}

.bo-row__pricetag {
	padding: 3px var(--bo-space-2);
	border-radius: 6px;
	background: var(--bo-green-50);
	color: var(--bo-green-contrast);
	font-weight: 700;
	line-height: var(--bo-leading-body);
	text-transform: uppercase;
}

.bo-row__promo { display: flex; align-items: center; gap: 6px; }

.bo-row__promo-until {
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--bo-muted);
}

.bo-row__amount,
.bo-row__amount .woocommerce-Price-amount {
	font-family: var(--bo-font-heading);
	font-size: 1.75rem; /* 28px */
	font-weight: 600;
	line-height: var(--bo-leading-heading);
	color: var(--bo-green-contrast);
	white-space: nowrap;
}

.bo-row__amount--sale,
.bo-row__amount--sale .woocommerce-Price-amount { color: var(--bo-sale); }

.bo-row__was,
.bo-row__was .woocommerce-Price-amount {
	font-size: 0.9375rem; /* 15px */
	line-height: 1.4;
	color: var(--bo-muted);
	text-decoration: line-through;
}

/* Obowiązek informacyjny Omnibus — celowo dyskretny, ale czytelny. */
.bo-row__omnibus {
	font-size: 0.6875rem;
	line-height: 1.4;
	color: var(--bo-muted);
}

.bo-row__basis { font-weight: 500; color: var(--bo-placeholder); }
.bo-row__secondary { color: var(--bo-placeholder); }
.bo-row__moq { font-weight: 500; color: var(--bo-text-soft); }
.bo-row__document { color: var(--bo-text); }

.bo-row__actions {
	display: flex;
	align-items: center;
	gap: var(--bo-space-2);
	padding-top: var(--bo-space-2);
}

.bo-row__ask {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	color: var(--bo-green-contrast);
	transition: background-color var(--bo-transition);
}

.bo-row__ask:hover { background: var(--bo-green-50); }

.bo-row__quickview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--bo-field);
	border-radius: 40px;
	color: var(--bo-text);
	transition: border-color var(--bo-transition), color var(--bo-transition);
}

.bo-row__quickview:hover { border-color: var(--bo-green-contrast); color: var(--bo-green-contrast); }

.bo-row__actions .bo-btn { height: 48px; white-space: nowrap; }

/* Ikony trzymają swój rozmiar — kurczyć się ma odstęp, nie przycisk. */
.bo-row__actions .bo-watch,
.bo-row__actions .bo-row__ask,
.bo-row__actions .bo-row__quickview { flex: 0 0 auto; }

/* --- układ mobilny -------------------------------------------------------- */

@media (max-width: 899px) {
	.bo-row { flex-wrap: wrap; }

	/*
	 * Cechy rozpoznawcze bywają listą wielowartościową — pełna lista
	 * certyfikatów zajmowała na telefonie sześć wierszy i spychała cenę oraz
	 * przycisk poza ekran. Na telefonie stoi więc wersja skrócona („Żywność
	 * ekologiczna i jeszcze 3"), a komplet — na stronie oferty. Skrót zastąpił
	 * przycięcie do dwóch wierszy, które gubiło treść po zwiększeniu odstępów
	 * w tekście (WCAG 1.4.12).
	 */
	.bo-row__typeinfo-full { display: none; }
	.bo-row__typeinfo-short { display: inline; }

	.bo-row__price {
		width: 100%;
		align-items: flex-start;
		text-align: left;
		border-top: 1px solid var(--bo-stroke);
		padding-top: var(--bo-space-3);
	}

	.bo-row__actions { width: 100%; }
}

/*
 * Najwęższe okno (320 px, 1.4.10 WCAG). Miniatura 150 px plus odstępy nie
 * zostawiały kolumnie opisu tyle, ile potrzebuje jej najdłuższe słowo, więc
 * wiersz rozpychał stronę o kilkanaście pikseli. Zmniejszamy miniaturę
 * i odstępy — nic nie znika, oferta nadal ma zdjęcie.
 */
/*
 * Telefon: cena z kolumny robi się rzędem. W pionie zajmowała sześć wierszy
 * (etykieta, promocja, kwota, cena sprzed obniżki, podstawa, netto) — 276 px
 * z 692 px całego wiersza oferty. Poziomo te same dane mieszczą się w trzech
 * wierszach: nic nie znika, a na ekran wchodzi o jedną ofertę więcej. Na
 * tablecie zostaje układ kolumnowy — tam kwota ma stać przy prawej krawędzi.
 */
@media (max-width: 599px) {
	.bo-row__price {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: flex-start;
		column-gap: var(--bo-space-3);
		row-gap: 4px;
	}

	/* Kwota otwiera własny wiersz — to ona jest odpowiedzią na „ile". */
	.bo-row__amount { flex: 0 0 auto; }
	.bo-row__pricetag { order: -1; }

	/*
	 * Opis oferty pod zdjęciem, a nie obok niego.
	 *
	 * Obok miniatury zostawało ~200 px na CAŁY opis: pastylki cech łamały
	 * się na dwa wiersze każda, linia dostawy na trzy, a wiersz oferty
	 * rósł do 550 px. Obok zdjęcia zostają plakietka i nazwa — to po nich
	 * kupujący rozpoznaje ofertę — a cechy, dostępność i dostawa biegną pod
	 * spodem przez całą szerokość karty. `display: contents` wpuszcza
	 * dzieci kolumny opisu do siatki wiersza bez zmiany znaczników.
	 */
	.bo-row {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		align-items: start;
		gap: var(--bo-space-2) var(--bo-space-3);
	}

	.bo-row__main { display: contents; }
	.bo-row__media { grid-row: 1 / span 2; width: 96px; height: 96px; }
	.bo-row__main > * { grid-column: 1 / -1; }
	.bo-row__main > .bo-row__seller,
	.bo-row__main > .bo-row__title { grid-column: 2; }
	.bo-row__price,
	.bo-row__actions { grid-column: 1 / -1; }

	/* Ikona przy pierwszym wierszu opisu, nie w połowie dwóch. */
	.bo-row__meta-item { align-items: flex-start; }
	.bo-row__meta-item .bo-icon { flex: 0 0 auto; }
}

@media (max-width: 479px) {
	.bo-row { padding: var(--bo-space-3); }
	.bo-row__title { overflow-wrap: anywhere; }

	/* Rząd akcji zawija się zamiast wystawać poza ekran: „Do koszyka" plus
	   trzy przyciski ikonowe nie mieszczą się w 320 px (1.4.10 WCAG). */
	.bo-row__actions { flex-wrap: wrap; }
}

/*
 * Najwęższe telefony. Do 379 px przycisk główny idzie do własnego wiersza,
 * bo obok dwóch przycisków ikonowych zostawałoby mu kilkadziesiąt pikseli.
 * Od 380 px wszystko mieści się w jednym rzędzie i każdy wiersz oferty jest
 * o pół ekranu krótszy — na liście kilkudziesięciu ofert to realna różnica.
 */
@media (max-width: 379px) {
	.bo-row { grid-template-columns: 64px minmax(0, 1fr); }
	.bo-row__media { width: 64px; height: 64px; }
	/* Przy 20 px czteroczłonowa nazwa łamała się w obok miniatury na trzy wiersze. */
	.bo-row__title { font-size: var(--bo-text-lg); }
	.bo-row__actions .bo-btn { flex: 1 1 100%; padding-inline: var(--bo-space-4); }
}

/* --- okruszki -------------------------------------------------------------- */

.bo-breadcrumbs { background: var(--bo-white); }

.bo-breadcrumbs__inner {
	display: flex;
	align-items: center;
	gap: var(--bo-space-2);
	padding-block: 14px;
	font-weight: 500;
	color: var(--bo-muted);
}

/*
 * Wysokość celu, nie tylko wysokość tekstu. Odnośnik okruszka mierzył 21 px,
 * a sąsiedni poziom stał tak blisko, że pola dotyku zachodziły na siebie —
 * kryterium 2.5.8 (24 px albo odstęp) nie było spełnione w żadnym wariancie.
 */
.bo-breadcrumbs__inner a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--bo-text);
}

.bo-breadcrumbs__inner a:hover { color: var(--bo-green-contrast); }

/*
 * Separator poziomów. Bez niego okruszki czytały się jak jeden ciąg nazw —
 * sam odstęp nie wystarcza, gdy każdy poziom jest wielowyrazowy
 * („Art. florystyczne Dekoracje florystyczne").
 */
.bo-breadcrumbs__sep {
	flex: 0 0 auto;
	color: var(--bo-muted);
}

/* Okruszki łamią się przy wąskim oknie — bez tego wypychały kontener w bok. */
.bo-breadcrumbs__inner { flex-wrap: wrap; row-gap: 4px; }

/* --- układ katalogu -------------------------------------------------------- */

.bo-catalog { background: var(--bo-white); }

.bo-catalog__inner {
	display: flex;
	flex-direction: column;
	gap: var(--bo-space-5);
	padding-block: 28px 60px;
}

.bo-catalog__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: start;
}

/*
 * Kolumna siatki domyślnie nie kurczy się poniżej najszerszej treści
 * (`min-width: auto`), więc wiersz wyniku wymuszał 313 px przy oknie 320 px
 * i cały katalog dawało się przesuwać w bok. Kryterium 1.4.10 WCAG mówi
 * wprost: przy 320 px treść ma się mieścić bez przewijania w poziomie.
 */
.bo-catalog__body > * { min-width: 0; }

/*
 * Kolumna filtrów dopiero od 1280 px. Przy 1024 px panel 280 px zostawiał
 * wynikom ~560 px i wiersz oferty (miniatura 150 + opis + cena 250 px)
 * ściskał opis do kilku słów w linii; poniżej 1280 px filtry są szufladą,
 * jak na tablecie.
 */
@media (min-width: 1280px) {
	/* Makieta: panel filtrów 280 px, wyniki wypełniają resztę. */
	.bo-catalog__body { grid-template-columns: 280px minmax(0, 1fr); }
}

/* --- pasek nad wynikami ---------------------------------------------------- */

.bo-toolbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--bo-space-4);
}

.bo-toolbar__heading { display: flex; flex-direction: column; gap: 3px; }

.bo-toolbar__title {
	font-size: var(--bo-text-2xl);
	line-height: var(--bo-leading-heading);
	color: var(--bo-ink);
}

.bo-toolbar__count { color: var(--bo-muted); }

.bo-toolbar__tools {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.bo-toolbar__search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px 6px 14px;
	border: 1px solid var(--bo-stroke);
	border-radius: var(--bo-radius);
	background: var(--bo-white);
}

.bo-toolbar__search:focus-within { border-color: var(--bo-green-contrast); box-shadow: var(--bo-focus); }

/*
 * Szukajka ma stałe 220 px pola plus przycisk — razem szerzej niż okno 320 px,
 * czyli szerokość, przy której WCAG (1.4.10) wymaga treści bez przewijania
 * w bok. Na wąskim ekranie pasek bierze całą szerokość, a pole oddaje
 * przyciskowi tyle, ile ten potrzebuje.
 */
@media (max-width: 479px) {
	.bo-toolbar__tools { width: 100%; }
	.bo-toolbar__search { width: 100%; }
	.bo-toolbar__field { width: auto; flex: 1 1 0; min-width: 0; }
}

.bo-toolbar__field {
	width: 220px;
	max-width: 100%;
	border: 0;
	background: none;
	padding-block: var(--bo-space-2);
}

.bo-toolbar__field:focus { outline: none; }
.bo-toolbar__field::placeholder { color: var(--bo-placeholder); }

/* Sortowanie WooCommerce ubieramy w wygląd motywu. Kolor tła podajemy
   osobną własnością: skrót `background` kasuje strzałkę listy rozwijanej,
   którą rysuje reguła `select` w base.css. */
.woocommerce-ordering select {
	padding: 11px 38px 11px 14px;
	border: 1px solid var(--bo-stroke);
	border-radius: var(--bo-radius);
	background-color: var(--bo-white);
	font-weight: 500;
	color: var(--bo-ink);
}

/* --- panel filtrów --------------------------------------------------------- */

.bo-filters {
	display: flex;
	flex-direction: column;
	gap: var(--bo-space-5);
	padding: var(--bo-space-5);
	border: 1px solid var(--bo-stroke);
	border-radius: var(--bo-radius-lg);
	background: var(--bo-white);
}

@media (min-width: 1280px) {
	/*
	 * Panel filtrów jest zawsze widoczny w całości — bez własnego paska
	 * przewijania. Przykleja się do góry, gdy mieści się w oknie; dłuższy
	 * przewija się razem ze stroną, zamiast chować część filtrów w środku.
	 */
	.bo-filters {
		position: sticky;
		top: calc(var(--bo-sticky-top) + var(--bo-space-4));
	}
}

.bo-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bo-space-3);
}

.bo-filters__title { font-size: var(--bo-text-lg); color: var(--bo-ink); }

.bo-filters__clear,
.bo-results__clear {
	/* Cel dotyku 24 px (WCAG 2.5.8) — sam tekst dawał 21 px. */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	font-size: var(--bo-text-sm);
	font-weight: 700;
	color: var(--bo-green-contrast);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bo-filters__empty,
.bo-filters__note {
	font-size: var(--bo-text-sm);
	line-height: var(--bo-leading-body);
	color: var(--bo-muted);
}

.bo-filter {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding-top: var(--bo-space-5);
	border-top: 1px solid var(--bo-stroke);
}

.bo-filter__label {
	display: flex;
	align-items: center;
	gap: var(--bo-space-2);
	font-family: var(--bo-font-body);
	font-size: var(--bo-text-base);
	font-weight: 700;
	color: var(--bo-ink);
}

.bo-filter__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 6px;
	border-radius: var(--bo-radius-pill);
	background: var(--bo-green-contrast);
	color: var(--bo-white);
	font-size: 0.75rem;
}

.bo-filter__search {
	padding: var(--bo-space-2) var(--bo-space-3);
	border: 1px solid var(--bo-stroke);
	border-radius: var(--bo-radius-sm);
	font-size: var(--bo-text-sm);
}

/* Telefon: 16 px, żeby Safari nie przybliżało panelu filtrów. */
@media (max-width: 599px) {
	.bo-filter__search { font-size: var(--bo-text-base); }
}

.bo-filter__list { display: flex; flex-direction: column; gap: 9px; }

.bo-filter__list--scroll {
	max-height: 220px;
	overflow-y: auto;
	padding-right: 4px;
}

/* --- wyniki ---------------------------------------------------------------- */

.bo-results { display: flex; flex-direction: column; gap: var(--bo-space-4); }

.bo-results__active {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bo-space-2);
}

.bo-results__active-label { font-size: var(--bo-text-sm); color: var(--bo-muted); }

.bo-chip--removable {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--bo-green-50);
	color: var(--bo-green-dark);
	font-weight: 700;
}

.bo-chip--removable:hover { background: var(--bo-green-100); }

.bo-results__list { display: flex; flex-direction: column; gap: var(--bo-space-4); }

/* --- stan pusty ------------------------------------------------------------ */

.bo-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bo-space-4);
	padding: var(--bo-space-16) var(--bo-space-10);
	border: 1px dashed var(--bo-stroke);
	border-radius: var(--bo-radius-lg);
	background: var(--bo-surface);
}

.bo-empty__title { font-size: var(--bo-text-xl); color: var(--bo-ink); }

/* Telefon: 64/40 px wcięcia zamieniało pusty wynik w pół ekranu ramki. */
@media (max-width: 599px) {
	.bo-empty { padding: var(--bo-space-8) var(--bo-space-5); }
}
.bo-empty__lead { color: var(--bo-muted); max-width: 52ch; }

/* --- paginacja ------------------------------------------------------------- */

.woocommerce-pagination ul {
	display: flex;
	align-items: center;
	gap: var(--bo-space-2);
	padding-top: var(--bo-space-4);
}

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--bo-space-3);
	border: 1px solid var(--bo-stroke);
	border-radius: var(--bo-radius-sm);
	font-weight: 700;
	color: var(--bo-ink);
}

.woocommerce-pagination a:hover { border-color: var(--bo-green-contrast); color: var(--bo-green-contrast); }

.woocommerce-pagination .current {
	background: var(--bo-green-contrast);
	border-color: var(--bo-green-contrast);
	color: var(--bo-white);
}

/* --- drzewo kategorii w filtrach -------------------------------------------
   Wcięcie robi zmienna --bo-cat-depth, więc głębokość drzewa nie wymaga
   dokładania reguł przy każdym nowym poziomie.
   -------------------------------------------------------------------------- */

.bo-cattree { display: flex; flex-direction: column; gap: 2px; }
.bo-cattree__item { padding-left: calc(var(--bo-cat-depth, 0) * 14px); }

/*
 * Kategorie to nawigacja, a nie zaznaczanie — sąsiednie grupy filtrów mają
 * pola wyboru po lewej, więc bez własnego znaku te pozycje wyglądały jak
 * luźny tekst wrzucony między filtry. Kropka pełni rolę punktora gałęzi.
 */
.bo-cattree__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 10px 7px 20px;
	border-radius: 8px;
	font-size: 15px;
	color: var(--bo-text-soft, #53565a);
	transition: background-color 140ms ease, color 140ms ease;
}

.bo-cattree__link::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2px;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.35;
	transition: opacity 140ms ease, transform 140ms ease;
}

.bo-cattree__link.is-on::before { opacity: 1; transform: scale(1.4); }

.bo-cattree__link:hover { background: var(--bo-green-50, #e8f5ee); color: var(--bo-ink, #1f2421); }

.bo-cattree__link.is-on {
	background: var(--bo-green-50, #e8f5ee);
	color: var(--bo-green-contrast, #007737);
	font-weight: 700;
}

.bo-cattree__count { font-size: 13px; color: var(--bo-muted, #6b7380); }
.bo-cattree__link.is-on .bo-cattree__count { color: var(--bo-green-contrast, #007737); }


/* Pasek przewijania w panelu filtrów: cienki i w kolorystyce motywu —
   domyślny systemowy wyglądał w karcie jak usterka. */
.bo-filters { scrollbar-width: thin; scrollbar-color: var(--bo-stroke) transparent; }
.bo-filters::-webkit-scrollbar { width: 8px; }
.bo-filters::-webkit-scrollbar-track { background: transparent; }

.bo-filters::-webkit-scrollbar-thumb {
	background: var(--bo-stroke);
	border-radius: 999px;
	border: 2px solid var(--bo-white);
}

.bo-filters::-webkit-scrollbar-thumb:hover { background: var(--bo-muted); }
.bo-filter__list--scroll { scrollbar-width: thin; scrollbar-color: var(--bo-stroke) transparent; }

/* Kontrolki filtrów wskazane w arkuszu atrybutów -------------------------- */

/*
 * Arkusz Zamawiającego `[D-116]` wskazuje przy każdym atrybucie rodzaj
 * kontrolki. Różnica nie jest kosmetyczna: pole wyboru mówi „możesz zaznaczyć
 * kilka", kółko radia — „wybierasz jedno". Filtr, który wygląda na
 * wielokrotny, a zachowuje się inaczej, uczy nieufności do całego panelu.
 */

.bo-check--radio .bo-check__box {
	border-radius: 50%;
}

.bo-check--radio.is-on .bo-check__box {
	background: var(--bo-white);
	border-color: var(--bo-green-contrast);
	border-width: 6px;
}

/* Próbki kolorów — przy kwiatach nazwa „Bordowy" mówi mniej niż kolor. */

.bo-filter__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bo-swatch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px 5px 5px;
	border: 1px solid var(--bo-field);
	border-radius: 999px;
	font-size: var(--bo-text-sm);
	color: var(--bo-text);
	text-decoration: none;
	min-height: 36px;
}

.bo-swatch__dot {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	border-radius: 50%;
	/* Bez koloru z arkusza zostaje neutralna próbka — lepsza niż pusty krążek,
	   bo nadal pokazuje, że to wybór barwy. */
	background: var(--bo-swatch, var(--bo-line));
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}

.bo-swatch:hover {
	border-color: var(--bo-green-contrast);
}

.bo-swatch.is-on {
	border-color: var(--bo-green-contrast);
	box-shadow: 0 0 0 1px var(--bo-green-contrast);
}

.bo-filter__select {
	width: 100%;
	min-height: 40px;
	padding: 8px 32px 8px 10px;
	border: 1px solid var(--bo-field);
	border-radius: var(--bo-radius-sm);
	/* Kolor tła osobno — patrz uwaga przy `.woocommerce-ordering select`. */
	background-color: var(--bo-white);
	background-position: right 10px center;
	color: var(--bo-text);
	font: inherit;
}

/* Filtr zakresowy — długość łodygi, kaliber ------------------------------ */

.bo-range__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.bo-range__field {
	flex: 1 1 68px;
	min-width: 0;
}

.bo-range__field input {
	width: 100%;
	min-height: 38px;
	padding: 6px 8px;
	border: 1px solid var(--bo-field);
	border-radius: var(--bo-radius-sm);
	background: var(--bo-white);
	color: var(--bo-text);
	font: inherit;
}

.bo-range__dash,
.bo-range__unit {
	color: var(--bo-muted);
	font-size: var(--bo-text-sm);
}

.bo-range__go {
	flex: 0 0 auto;
	min-height: 38px;
	padding: 6px 14px;
	border: 1px solid var(--bo-green-contrast);
	border-radius: var(--bo-radius-sm);
	background: var(--bo-white);
	color: var(--bo-green-contrast);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.bo-range__go:hover {
	background: var(--bo-green-contrast);
	color: var(--bo-white);
}


/* ==========================================================================
   Telefon: filtry jako szuflada.

   Ten blok stoi na KOŃCU arkusza celowo. Media query nie podnosi
   szczegółowości, więc umieszczony wyżej przegrywał kolejnością z
   `.bo-filters { display: flex }` i szuflada zostawała rozwinięta.
   ========================================================================== */

/* --- pasek „Filtry" i szuflada na telefonie --------------------------------
   Rozwinięty panel zajmował 1549 px NAD pierwszą ofertą — dwie i pół
   wysokości ekranu przewijania, zanim kupujący zobaczył cokolwiek do
   kupienia. Na wąskim ekranie filtry są więc szufladą otwieraną świadomie;
   od 1024 px wracają na swoje miejsce w kolumnie i pasek znika.
   -------------------------------------------------------------------------- */

.bo-filterbar {
	display: flex;
	align-items: center;
	gap: var(--bo-space-3);
	margin-bottom: var(--bo-space-4);
}

.bo-filterbar__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 18px;
	border: 1px solid var(--bo-stroke);
	border-radius: var(--bo-radius);
	background: var(--bo-white);
	color: var(--bo-ink);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.bo-filterbar__btn:hover { border-color: var(--bo-green-contrast); color: var(--bo-green-contrast); }

/* Liczba włączonych filtrów — sam kolor przycisku by tego nie powiedział. */
.bo-filterbar__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--bo-green-contrast);
	color: var(--bo-white);
	font-size: var(--bo-text-sm);
}

.bo-filterbar__clear { font-weight: 700; color: var(--bo-green-contrast); }

.bo-filters__close,
.bo-filters__foot { display: none; }

/* Kontener środka istnieje tylko dla szuflady — w sidebarze znika. */
.bo-filters__body { display: contents; }

@media (max-width: 1279px) {
	/* Szuflada zasłania stronę, więc zachowuje się jak okno modalne.
	   z-index musi przebić przyklejony nagłówek (100), inaczej wsuwa się pod
	   niego i chowa własny przycisk zamknięcia. */
	.bo-filters {
		position: fixed;
		inset: 0;
		z-index: 200;
		display: none;
		flex-direction: column;
		gap: 0;
		height: 100dvh;
		max-height: 100dvh;
		overflow: hidden;
		margin: 0;
		padding: 0 var(--bo-space-4);
		border: 0;
		border-radius: 0;
	}

	.bo-filters.is-open { display: flex; }

	.bo-filters__head {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: var(--bo-space-3);
		padding-block: var(--bo-space-4);
		border-bottom: 1px solid var(--bo-stroke);
	}

	/* Tylko ten obszar się przewija — nagłówek i stopka zostają na ekranie. */
	.bo-filters__body {
		display: flex;
		flex-direction: column;
		gap: var(--bo-space-5);
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding-block: var(--bo-space-4);
	}

	.bo-filters__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		margin-left: auto;
		border: 0;
		border-radius: 999px;
		background: none;
		color: var(--bo-text);
		cursor: pointer;
	}

	.bo-filters__close:hover { background: var(--bo-surface); }

	.bo-filters__foot {
		flex: 0 0 auto;
		display: block;
		padding: var(--bo-space-4) 0 calc(var(--bo-space-4) + env(safe-area-inset-bottom));
		background: var(--bo-white);
		border-top: 1px solid var(--bo-stroke);
	}

	.bo-filters__done { width: 100%; min-height: 52px; }

	/* Strona pod szufladą nie przewija się razem z nią. */
	body.bo-filters-open { overflow: hidden; }
}

@media (min-width: 1280px) {
	.bo-filterbar { display: none; }
}