/* ==========================================================================
   Bronisze online — nagłówek serwisu (2 wiersze)
   Odwzorowanie węzła Figma 321:255 („Header — serwis (2 wiersze)").
   ========================================================================== */

.bo-header {
	position: sticky;      /* sticky header — ustalenie z 12.08 (suplement) */
	top: 0;
	z-index: 100;
	background: var(--bo-white);
	border-bottom: 1px solid var(--bo-stroke);
}

/*
 * Ile miejsca u góry okna zajmuje przyklejony nagłówek (oba wiersze).
 *
 * Bez tego przeglądarka nie wie, że górna część okna jest zasłonięta:
 * skok do kotwicy, `scrollIntoView` i przewinięcie do pola z fokusem
 * stawiały cel na samej górze okna — czyli POD nagłówkiem. Tak na iPhonie
 * okruszki „Strona główna › Panel kupującego" lądowały do połowy pod
 * zielonym paskiem „Kupuję / Sprzedaję": panel przewija pasek zakładek
 * do widoku (`block: 'nearest'`), a okno uznawało go za widoczny, choć
 * leżał pod nagłówkiem.
 *
 * Wartości to wysokość nagłówka bez szuflady menu; app.js podmienia je na
 * zmierzoną (inny zestaw pozycji, powiększony tekst), a te zostają na
 * czas przed uruchomieniem skryptu i bez niego.
 */
:root { --bo-sticky-top: 123px; }

@media (min-width: 1024px) {
	:root { --bo-sticky-top: 180px; }
}

html { scroll-padding-top: calc(var(--bo-sticky-top) + var(--bo-space-3)); }

/*
 * Pasek administratora WordPressa jest przyklejony do góry okna od 601 px
 * — nagłówek z `top: 0` chował się pod nim.
 */
@media (min-width: 601px) {
	.admin-bar .bo-header { top: var(--wp-admin--admin-bar--height, 32px); }
	.admin-bar { scroll-padding-top: calc(var(--bo-sticky-top) + var(--wp-admin--admin-bar--height, 32px) + var(--bo-space-3)); }
}

/* --- wiersz 1: logo, wyszukiwarka, akcje ---------------------------------- */

/*
 * Wysokość górnego wiersza na telefonie i tablecie. 64 px mieści kontrolki
 * 44–48 px z oddechem; każdy piksel nagłówka jest tu zabrany treści na
 * stałe, bo nagłówek jest przyklejony.
 */
:root { --bo-header-top-h: 64px; }

.bo-header__top {
	display: flex;
	align-items: center;
	gap: var(--bo-space-5);
	min-height: var(--bo-header-top-h);
}

@media (min-width: 1024px) {
	.bo-header__top {
		gap: 36px;
		min-height: var(--bo-header-h);
	}
}

.bo-header__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/*
 * Logo jest JEDNYM plikiem (assets/img/logo.svg).
 *
 * Wcześniej były to dwa assety z Figmy — znak i wyraz „online" — ustawiane
 * na sobie procentowymi insetami, każdy z `preserveAspectRatio="none"`.
 * Przy 80-96 px, czyli na telefonie, zaokrąglenia rozjeżdżały oba kawałki:
 * „online" wchodziło na znak, a na ekranie logowania napis był ucięty
 * w połowie. Składanie logo z dwóch rozciąganych osobno obrazków nie ma jak
 * działać w każdej szerokości — teraz skaluje się jeden rysunek.
 */
.bo-logo {
	display: block;
	width: 132px;
	height: auto;
	aspect-ratio: 166 / 79;
}

/*
 * Wersja kolorystyczna według motywu. Oba pliki są w kodzie strony, więc
 * przełączenie motywu nie czeka na pobranie obrazka.
 */
.bo-logo--dark { display: none; }

:root[data-theme="dark"] .bo-logo--light { display: none; }
:root[data-theme="dark"] .bo-logo--dark { display: block; }

@media (prefers-color-scheme: dark) {
	:root[data-theme="system"] .bo-logo--light { display: none; }
	:root[data-theme="system"] .bo-logo--dark { display: block; }
}

@media (min-width: 1024px) {
	.bo-logo { width: 166px; }
}

/* --- wyszukiwarka --------------------------------------------------------- */

.bo-search {
	display: none;                     /* na mobile w panelu — sekcja 07 */
	flex: 1 0 0;
	min-width: 0;
	align-items: center;
	padding-left: var(--bo-space-4);
	background: var(--bo-white);
	border: 1px solid var(--bo-field);
	border-radius: var(--bo-radius);
	/*
	 * NIE `overflow: hidden` — lista kategorii jest pozycjonowana absolutnie
	 * poniżej formularza i była przez niego przycinana. Rozwijała się, tylko
	 * nie było jej widać, więc kliknięcie wyglądało na bezskuteczne.
	 * Zaokrąglenie narożników pilnują same kontrolki wewnątrz.
	 */
	overflow: visible;
	transition: border-color var(--bo-transition), box-shadow var(--bo-transition);
}

.bo-search__scope { border-start-start-radius: var(--bo-radius); border-end-start-radius: var(--bo-radius); }
.bo-search__submit { border-start-end-radius: var(--bo-radius); border-end-end-radius: var(--bo-radius); }

@media (min-width: 1024px) {
	.bo-search { display: flex; }
}

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

.bo-search__scope {
	display: flex;
	align-items: center;
	gap: var(--bo-space-3);
	padding: 15px var(--bo-space-4) 15px 0;
	font-weight: 500;
	color: var(--bo-text);
	white-space: nowrap;
	background: none;
}

.bo-search__scope .bo-icon { width: 12px; height: 6px; }

.bo-search__divider {
	width: 1px;
	height: 24px;
	background: var(--bo-field);
	flex: 0 0 auto;
}

/*
 * 1024–1279 px: zawężanie do kategorii ustępuje miejsca samemu polu. Przy
 * 1024 px z listą „Wszystkie kategorie" na pole zostawało kilkadziesiąt
 * pikseli i widać było z podpowiedzi samo „Cz". Zawężanie zostaje
 * w katalogu (filtry), a ukryte pole `product_cat` dalej niesie bieżącą
 * kategorię.
 */
@media (min-width: 1024px) and (max-width: 1279px) {
	.bo-search { padding-left: 0; }
	.bo-search__scopewrap,
	.bo-search__divider { display: none; }
}

.bo-search__field {
	flex: 1 0 0;
	min-width: 0;
	padding: 15px var(--bo-space-4);
	border: 0;
	background: none;
	font-size: var(--bo-text-base);
}

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

.bo-search__submit {
	align-self: stretch;
	padding-inline: var(--bo-space-6);
	font-weight: 700;
	color: var(--bo-green-contrast);
	white-space: nowrap;
}

.bo-search__submit:hover { color: var(--bo-green-dark); }

/* --- akcje (konto, obserwowane, koszyk) ----------------------------------- */

.bo-header__actions {
	display: flex;
	align-items: center;
	gap: var(--bo-space-3);
	margin-left: auto;
	flex: 0 0 auto;
}

@media (min-width: 1024px) {
	.bo-header__actions { gap: var(--bo-space-4); }
}

.bo-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--bo-radius-pill);
	flex: 0 0 auto;
	transition: filter var(--bo-transition);
}

.bo-action:hover { filter: brightness(0.94); }

/*
 * Ikony przeszły na `currentColor`, więc kółka akcji muszą podać kolor same —
 * wcześniej biel była wpisana w plik SVG i ikona koszyka znikała na czarnym tle.
 */
.bo-action--account { background: var(--bo-green-50); color: var(--bo-green-contrast); }
.bo-action--wishlist { background: var(--bo-green-contrast); color: var(--bo-white); }
/*
 * Koszyk to kółko w kolorze tekstu z ikoną w kolorze tła — w motywie
 * ciemnym odwraca się razem z nimi. Para `--bo-black` / `--bo-white`
 * dawała w ciemnym motywie ikonę #121614 na tle #0f1210, czyli koszyk
 * niewidoczny poza samym licznikiem.
 */
.bo-action--cart { background: var(--bo-ink); color: var(--bo-white); position: relative; }

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

.bo-cart__badge {
	position: absolute;
	top: -4px;
	left: -4px;
	min-width: 24px;
	height: 24px;
	padding-inline: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--bo-radius-pill);
	background: var(--bo-green-contrast);
	color: var(--bo-white);
	font-family: var(--bo-font-heading);
	font-weight: 600;
	font-size: var(--bo-text-base);
	line-height: 1;
	/* Obwódka w kolorze nagłówka: na telefonie licznik zachodzi na zielone
	   kółko obserwowanych i bez niej zlewał się z nim w jedną plamę. */
	box-shadow: 0 0 0 2px var(--bo-white);
}

@media (max-width: 479px) {
	.bo-cart__badge { min-width: 20px; height: 20px; padding-inline: 5px; font-size: var(--bo-text-xs); }
}

.bo-cart__meta {
	display: none;
	flex-direction: column;
	white-space: nowrap;
}

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

.bo-cart__label {
	font-size: var(--bo-text-sm);
	font-weight: 500;
	color: var(--bo-muted);
}

.bo-cart__total {
	font-weight: 700;
	color: var(--bo-ink);
}

/* --- przełącznik menu mobilnego ------------------------------------------- */

.bo-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--bo-radius-pill);
	background: var(--bo-green-50);
}

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

/* --- wiersz 2: nawigacja kategorii ---------------------------------------- */

.bo-nav {
	position: relative;   /* punkt odniesienia dla panelu katalogu */
	background: var(--bo-green-contrast);
	/* Zieleń zostaje zielenią w obu motywach, więc tekst na niej też musi
	   być stały — `--bo-white` zamieniało go w motywie ciemnym na niemal
	   czarny. Patrz „pasy marki" w style.css. */
	color: var(--bo-on-brand);
}

.bo-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bo-space-6);
	padding-block: var(--bo-space-2);
}

@media (min-width: 1024px) {
	.bo-nav__inner { padding-block: var(--bo-space-3); }
}

/*
 * Lista kategorii i przełącznik kontekstu walczą o tę samą przestrzeń:
 * „Sprzedawcy" wchodziło pod „Kupuję / Sprzedaję". Lista może się zwęzić
 * i przewinąć poziomo, przełącznik nie — jest krótki i musi zostać czytelny
 * w całości.
 *
 * Przewijanie stoi w regule PODSTAWOWEJ, nie w zakresie szerokości. Wcześniej
 * obowiązywało do 1279 px, a kolizja sięgała 1500 px — przy 1440 px ostatnia
 * pozycja nadal nachodziła na przełącznik. `overflow-x: auto` nie robi nic,
 * dopóki treść się mieści, więc granica szerokości była tu tylko okazją do
 * pomyłki.
 */
.bo-nav__list {
	display: none;
	align-items: center;
	gap: var(--bo-space-7);
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.bo-nav__list::-webkit-scrollbar { display: none; }

/*
 * Gdy pozycje się nie mieszczą, ostatnia urywa się na krawędzi i wygląda,
 * jakby jej nie było. Wygaszenie mówi, że lista biegnie dalej — bez tego
 * „Sprzedawcy" po prostu znikało przy 1280 px. O tym, czy coś jest za
 * krawędzią, rozstrzyga pomiar w app.js (`is-clipped`), nie próg szerokości:
 * próg pasował tylko do jednego zestawu pozycji menu.
 */
.bo-nav__list.is-clipped {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

/* Ciaśniejsze odstępy tam, gdzie przewijanie zaczyna być potrzebne — im
   mniej go trzeba, tym lepiej. */
@media (max-width: 1599px) {
	/* 12 px: przy 1440 px (typowy laptop) mieści się całe menu z „Aplikacją". */
	.bo-nav__list { gap: var(--bo-space-3); }
	.bo-nav__inner { gap: var(--bo-space-4); }
}

@media (min-width: 1024px) {
	.bo-nav__list { display: flex; }
}

/* Szuflada mobilna. app.js przełącza `.is-open` na pasku, ale reguła nigdy
   nie powstała — poniżej 1024 px lista pozostawała ukryta i hamburger nie
   robił nic widocznego. Pozycje idą w kolumnę: w rzędzie nie mieszczą się
   nawet trzy. */
@media (max-width: 1023px) {
	/*
	 * Szuflada leży w PRZYKLEJONYM nagłówku, więc nie przewija się razem ze
	 * stroną. Na niskim telefonie (320×568) była wyższa niż okno i dolne
	 * pozycje — z przełącznikiem „Kupuję / Sprzedaję" — były nieosiągalne.
	 * Szuflada dostaje wysokość okna pod górnym wierszem i własne
	 * przewijanie; `dvh`, bo pasek adresu Safari zmienia wysokość okna.
	 */
	.bo-nav.is-open {
		max-height: calc(100vh - var(--bo-header-top-h));
		max-height: calc(100dvh - var(--bo-header-top-h));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.bo-nav.is-open .bo-nav__inner {
		display: block;
		padding-bottom: var(--bo-space-4);
	}

	.bo-nav.is-open .bo-nav__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		margin-bottom: var(--bo-space-4);
	}

	.bo-nav.is-open .bo-nav__link {
		padding: 10px 12px;
		border-radius: 10px;
	}

	.bo-nav.is-open .bo-nav__link:hover {
		background: rgb(255 255 255 / 0.12);
		text-decoration: none;
	}

	/* W kolumnie podkreślenie ginie między wierszami — bieżącą pozycję
	   wyróżnia tło, tak jak najechanie. */
	.bo-nav.is-open .bo-nav__link[aria-current="page"] {
		background: rgb(255 255 255 / 0.18);
		text-decoration: none;
	}

	/* Pigułka „Katalog" jest w kolumnie jedyną pozycją z tłem — bez tego
	   rozciągałaby się na całą szerokość i przestawała wyglądać na pigułkę.
	   Odstęp pod nią oddziela ją od zwykłych odnośników, które inaczej
	   przyklejają się do jej krawędzi. */
	.bo-nav.is-open .bo-nav__all { align-self: flex-start; }
	.bo-nav.is-open .bo-catmenu { margin-bottom: var(--bo-space-3); }

	/* W kolumnie pionowa kreska nic nie oddziela — kładziemy ją w poprzek. */
	.bo-nav.is-open .bo-nav__sep {
		inline-size: 100%;
		block-size: 1px;
		margin-block: var(--bo-space-3);
	}
}

.bo-nav__link {
	font-weight: 500;
	color: var(--bo-white);
	white-space: nowrap;
}

.bo-nav__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* bieżąca sekcja — WordPress oznacza pozycje menu `aria-current="page"`,
   stałe pozycje paska dostają go z bo_nav_current_attr() */
.bo-nav__link[aria-current="page"] {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Kreska oddziela skróty asortymentowe od sekcji serwisu (Figma 322:5467). */
.bo-nav__sep {
	flex: 0 0 auto;
	inline-size: 1px;
	block-size: 18px;
	background: rgb(255 255 255 / 0.35);
}

.bo-nav__link--eko {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-space-3);
	font-weight: 700;
}

/* pigułka „Katalog" — odnośnik do katalogu i uchwyt panelu kategorii */
.bo-nav__all {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-space-2);
	padding: 9px var(--bo-space-4);
	border-radius: var(--bo-radius-sm);
	background: var(--bo-green-dark);
	color: var(--bo-white);
	font-weight: 700;
	white-space: nowrap;
}

.bo-nav__all:hover { background: var(--bo-ink); color: var(--bo-white); }

/* --- „Więcej": pozycje paska, które się nie zmieściły ---------------------- */

.bo-nav__more { position: relative; flex: 0 0 auto; margin-inline-end: auto; }
.bo-nav__more[hidden] { display: none; }

.bo-nav__more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.bo-nav__more-toggle .bo-icon { transition: transform 160ms ease; }
.bo-nav__more-toggle[aria-expanded="true"] .bo-icon { transform: rotate(180deg); }

.bo-nav__more-list {
	position: absolute;
	z-index: 60;
	top: calc(100% + var(--bo-space-2));
	left: 0;
	display: flex;
	flex-direction: column;
	min-width: 220px;
	padding: 6px;
	border: 1px solid var(--bo-stroke);
	border-radius: var(--bo-radius-lg);
	background: var(--bo-white);
	box-shadow: 0 18px 44px rgb(31 36 33 / 0.18);
}

.bo-nav__more-list[hidden] { display: none; }

.bo-nav__more-list .bo-nav__link {
	display: flex;
	align-items: center;
	gap: var(--bo-space-2);
	min-height: 44px;
	padding: 0 var(--bo-space-3);
	border-radius: 10px;
	color: var(--bo-ink);
}

.bo-nav__more-list .bo-nav__link:hover { background: var(--bo-green-50); text-decoration: none; }
.bo-nav__more-list .bo-nav__link[aria-current="page"] { color: var(--bo-green-contrast); text-decoration: none; }
.bo-nav__more-list .bo-nav__sep { inline-size: auto; block-size: 1px; margin: 4px 8px; background: var(--bo-stroke); }
.bo-nav__more-list > .bo-nav__sep:first-child { display: none; }

@media (prefers-reduced-motion: reduce) {
	.bo-nav__more-toggle .bo-icon { transition: none; }
}

/* --- przełącznik Kupuję / Sprzedaję --------------------------------------- */

.bo-mode {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--bo-white);
	border-radius: 9px;
	overflow: hidden;
	flex: 0 0 auto;
}

/* Przełącznik kontekstu bywa formularzem (konto z dwoma profilami), więc te
   same style muszą działać na <a> i na <button> — stąd jawny reset przycisku. */
.bo-mode__option {
	padding: var(--bo-space-2) 18px;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	line-height: inherit;
	color: var(--bo-white);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--bo-transition), color var(--bo-transition);
}

.bo-mode__option:hover { background: rgb(255 255 255 / 0.12); color: var(--bo-white); }

.bo-mode__option[aria-current="true"] {
	background: var(--bo-white);
	color: var(--bo-green-dark);
}

.bo-mode__option[aria-current="true"]:hover { background: var(--bo-white); }

/* --- lista kategorii w wyszukiwarce ---------------------------------------- */

.bo-search__scopewrap { position: relative; flex: 0 0 auto; }

.bo-search__scopelist {
	position: absolute;
	z-index: 40;
	top: calc(100% + 8px);
	left: 0;
	min-width: 260px;
	max-height: 320px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--bo-stroke);
	border-radius: 14px;
	background: var(--bo-white);
	box-shadow: 0 16px 40px rgb(31 36 33 / 0.16);
}

.bo-search__scopeopt {
	display: block;
	width: 100%;
	padding: 9px 12px;
	padding-left: calc(12px + var(--bo-cat-depth, 0) * 16px);
	border-radius: 9px;
	text-align: left;
	font-size: 15px;
	color: var(--bo-text);
	background: none;
	cursor: pointer;
}

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

.bo-search__scopeopt.is-on {
	background: var(--bo-green-50);
	color: var(--bo-green-contrast);
	font-weight: 700;
}

/* --- konto w górnym pasku ---------------------------------------------------
   Wyzwalaczem jest sam awatar o stałej szerokości, więc długość nazwy ani
   adresu e-mail nie wpływa na układ nagłówka. Pełne dane pokazujemy dopiero
   w rozwiniętym panelu, gdzie jest na nie miejsce.
   -------------------------------------------------------------------------- */

.bo-account { position: relative; flex: 0 0 auto; }

.bo-account__button {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 5px 8px 5px 5px;
	border: 1px solid var(--bo-stroke);
	border-radius: var(--bo-radius-pill);
	background: var(--bo-white);
	color: var(--bo-text-soft);
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.bo-account__button:hover,
.bo-account__button[aria-expanded="true"] { border-color: var(--bo-green-contrast); background: var(--bo-green-50); }
.bo-account__button .bo-icon { transition: transform 160ms ease; }
.bo-account__button[aria-expanded="true"] .bo-icon { transform: rotate(180deg); }

.bo-account__avatar {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border-radius: var(--bo-radius-pill);
	background: var(--bo-green-contrast);
	color: var(--bo-white);
	font-family: var(--bo-font-heading);
	font-weight: 700;
	font-size: 16px;
}

.bo-account__avatar.is-lg { width: 44px; height: 44px; font-size: 18px; }

.bo-account__menu {
	position: absolute;
	z-index: 60;
	top: calc(100% + 10px);
	right: 0;
	width: 280px;
	padding: 6px;
	border: 1px solid var(--bo-stroke);
	border-radius: 16px;
	background: var(--bo-white);
	box-shadow: 0 18px 44px rgb(31 36 33 / 0.18);
}

.bo-account__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	margin-bottom: 4px;
	border-radius: 12px;
	background: var(--bo-surface);
}

.bo-account__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bo-account__name { font-weight: 700; color: var(--bo-ink); }

/* Adres e-mail bywa długi — skracamy go wielokropkiem zamiast rozpychać panel. */
.bo-account__mail {
	font-size: 13px;
	color: var(--bo-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bo-account__role { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--bo-green-contrast); }

.bo-account__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 15px;
	color: var(--bo-text);
	transition: background-color 140ms ease, color 140ms ease;
}

.bo-account__item:hover { background: var(--bo-green-50); color: var(--bo-green-contrast); }
.bo-account__item.is-lead { font-weight: 700; color: var(--bo-green-contrast); }
.bo-account__item.is-quiet { color: var(--bo-muted); }
.bo-account__item.is-quiet:hover { color: var(--bo-sale); background: var(--bo-tint-danger); }
.bo-account__sep { display: block; height: 1px; margin: 6px 8px; background: var(--bo-stroke); }
.bo-account__item svg, .bo-account__item svg * { stroke: currentColor; }

/* Przełączenie profilu to zwykły POST, więc pozycja menu bywa przyciskiem
   w formularzu — te same style muszą działać na <a> i na <button>. */
.bo-account__switch { display: block; margin: 0; }

.bo-account__switch .bo-account__item {
	width: 100%;
	border: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
}

.bo-account__switch-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Status drugiego profilu — konto może kupować i czekać na weryfikację
   sprzedaży naraz, więc stan musi być widoczny bez wchodzenia w panel. */
.bo-account__switch-status {
	font-size: 12px;
	font-weight: 600;
	color: var(--bo-muted);
}

/* --- gość: wyraźne „Zaloguj się" ------------------------------------------- */

.bo-action--login {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Bazowe `.bo-action` ma sztywne 48 px szerokości — przycisk z tekstem
	   wychodziłby poza swoje pudełko i nachodził na sąsiednie kółko. */
	width: auto;
	height: 48px;
	padding: 0 18px;
	border-radius: var(--bo-radius-pill);
	background: var(--bo-green-50);
	color: var(--bo-green-contrast);
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 150ms ease;
}

.bo-action--login:hover { background: var(--bo-green-100); }

@media (max-width: 900px) {
	/*
	 * Etykieta CHOWA SIĘ PRZED OKIEM, ale nie przed czytnikiem ekranu.
	 * `display: none` zabierało ją z drzewa dostępności i odnośnik „Zaloguj
	 * się" zostawał samą ikoną, czyli odnośnikiem bez nazwy (2.4.4 i 4.1.2
	 * WCAG) — tak samo jak dziesiątki jego kopii na każdej podstronie.
	 * Te same deklaracje co `.bo-sr-only` w base.css.
	 */
	.bo-action__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.bo-action--login { padding: 0; width: 48px; justify-content: center; }
	.bo-account__menu { width: 260px; }
}

/*
 * Telefon: menu konta zakotwiczone do nagłówka, nie do awatara.
 *
 * Awatar stoi w połowie wiersza akcji, a menu otwierało się od jego prawej
 * krawędzi w lewo — przy 390 px wychodziło 34 px poza lewy brzeg ekranu
 * i ucinało inicjał, ikony i początki pozycji. Na wąskim ekranie menu
 * zajmuje szerokość nagłówka bez marginesów i otwiera się tuż pod górnym
 * wierszem; blokiem zawierającym jest przyklejony `.bo-header`.
 */
@media (max-width: 599px) {
	.bo-account { position: static; }

	.bo-account__menu {
		top: calc(var(--bo-header-top-h) - var(--bo-space-1));
		right: var(--bo-gutter-sm);
		left: var(--bo-gutter-sm);
		width: auto;
		max-height: calc(100dvh - var(--bo-header-top-h) - var(--bo-space-4));
		overflow-y: auto;
	}
}

@media (max-width: 359px) {
	.bo-account__menu { right: var(--bo-space-3); left: var(--bo-space-3); }
}

@media (prefers-reduced-motion: reduce) {
	.bo-account__button, .bo-account__item, .bo-account__button .bo-icon, .bo-action--login { transition: none; }
}

/* --- menu katalogu ----------------------------------------------------------
   Panel na całą szerokość z mapą asortymentu: gałąź główna jako nagłówek
   kolumny, podkategorie pod spodem. Kupujący widzi całość naraz zamiast
   schodzić poziom po poziomie.
   -------------------------------------------------------------------------- */

.bo-catmenu { position: static; flex: 0 0 auto; }
.bo-catmenu__toggle { cursor: pointer; }
.bo-catmenu__toggle .bo-icon:last-child { transition: transform 160ms ease; }
.bo-catmenu__toggle[aria-expanded="true"] .bo-icon:last-child { transform: rotate(180deg); }

.bo-catmenu__panel {
	position: absolute;
	z-index: 50;
	left: 0;
	right: 0;
	top: 100%;
	padding-block: var(--bo-space-8);
	background: var(--bo-white);
	border-bottom: 1px solid var(--bo-stroke);
	box-shadow: 0 24px 48px rgb(31 36 33 / 0.16);
	animation: bo-catmenu-in 160ms ease;
	/* Panel bywa wyższy niż okno — przy jedenastu grupach lista po lewej
	   sięga niżej niż widok. Wartość jest zapasowa: przy otwarciu app.js
	   podmienia ją na wyliczoną z realnego położenia panelu. */
	max-height: calc(100vh - var(--bo-header-h) - var(--bo-space-8));
	overflow-y: auto;
	overscroll-behavior: contain;
}

@keyframes bo-catmenu-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

/* Dwa panele: po lewej stała lista grup, po prawej podkategorie tej,
   na której stoi kursor. Szerokość lewej kolumny jest stała, żeby prawa
   nie skakała przy przechodzeniu między grupami o różnej długości nazw. */
.bo-catmenu__inner {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--bo-space-8);
	align-items: stretch;
}

.bo-catmenu__roots {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-right: 1px solid var(--bo-stroke);
	padding-right: var(--bo-space-5);
}

.bo-catmenu__root {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bo-ink);
	transition: background-color 140ms ease, color 140ms ease;
}

.bo-catmenu__root-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 9px;
	background: var(--bo-cat-bg, var(--bo-green-50));
	color: var(--bo-cat-fg, var(--bo-green-contrast));
}

.bo-catmenu__root-name { flex: 1 1 auto; }

/* Strzałka mówi, że grupa ma ciąg dalszy po prawej; poza aktywną pozycją
   jest wyciszona, żeby lista nie wyglądała na jedenaście naraz aktywnych. */
.bo-catmenu__root-arrow {
	flex: 0 0 auto;
	color: var(--bo-muted);
	opacity: 0;
	transition: opacity 140ms ease;
}

.bo-catmenu__root:hover,
.bo-catmenu__root:focus-visible,
.bo-catmenu__root.is-on {
	background: var(--bo-green-50);
	color: var(--bo-green-contrast);
}

.bo-catmenu__root.is-on .bo-catmenu__root-arrow { opacity: 1; }

.bo-catmenu__pane {
	display: flex;
	flex-direction: column;
	gap: var(--bo-space-5);
	min-block-size: 320px;
}

.bo-catmenu__sub-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-bottom: 10px;
	margin-bottom: var(--bo-space-4);
	border-bottom: 1px solid var(--bo-stroke);
	font-family: var(--bo-font-heading);
	font-size: 19px;
	font-weight: 700;
	color: var(--bo-ink);
}

.bo-catmenu__sub-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--bo-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--bo-green-contrast);
}

.bo-catmenu__sub-head:hover .bo-catmenu__sub-all { text-decoration: underline; }

.bo-catmenu__empty { font-size: 15px; color: var(--bo-muted); }

/* Podkategorie w kolumnach — grupa potrafi mieć ich dziewięć, a pojedyncza
   pionowa lista zostawiałaby połowę panelu pustą. Układ wielokolumnowy,
   a nie siatka, bo pozycje mają się czytać z góry na dół w kolumnie —
   siatka układała je wierszami i alfabet skakał w poprzek panelu. */
.bo-catmenu__list {
	columns: 4 200px;
	column-gap: var(--bo-space-6);
}

.bo-catmenu__list li { break-inside: avoid; }

.bo-catmenu__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 8px;
	font-size: 15px;
	color: var(--bo-text-soft);
	transition: background-color 140ms ease, color 140ms ease;
}

.bo-catmenu__link:hover { background: var(--bo-green-50); color: var(--bo-green-contrast); }
.bo-catmenu__count { font-size: 13px; color: var(--bo-muted); }

.bo-catmenu__all {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	padding: 11px 20px;
	border-radius: var(--bo-radius-pill);
	background: var(--bo-green-50);
	color: var(--bo-green-contrast);
	font-weight: 700;
}

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

/* Próg ten sam co dla .bo-nav__list — poniżej niego menu należy do szuflady
   mobilnej, gdzie układ dwupanelowy nie ma jak działać. */
@media (max-width: 1023px) {
	/* Bez kursora nie ma czym przełączać paneli, a lewa szyna byłaby ślepa.
	   Pokazujemy grupy pod sobą; nagłówek każdej sekcji niesie nazwę grupy
	   i odnośnik do niej, więc nic z nawigacji nie ginie. */
	.bo-catmenu__inner { grid-template-columns: minmax(0, 1fr); }
	.bo-catmenu__roots { display: none; }
	.bo-catmenu__sub[hidden] { display: block; }
	.bo-catmenu__pane { gap: var(--bo-space-7); min-block-size: 0; }
	.bo-catmenu__list { columns: 2 160px; }
}

@media (prefers-reduced-motion: reduce) {
	.bo-catmenu__panel { animation: none; }
	.bo-catmenu__toggle .bo-icon:last-child,
	.bo-catmenu__link,
	.bo-catmenu__root,
	.bo-catmenu__root-arrow { transition: none; }
}

/* --- wąskie ekrany: nagłówek ma się zmieścić ------------------------------
   Przy 390 px wiersz logo + akcje + przełącznik menu był o kilkanaście
   pikseli za szeroki i CAŁA strona przesuwała się w poziomie. Rozjazd o 10 px
   wygląda niepozornie, ale to on powoduje, że treść „ucieka" przy przewijaniu
   i że da się przesunąć stronę w bok na każdym podstronie. Zwężamy odstępy
   i elementy dotykowe (44 px to nadal wygodny cel dla palca), zamiast
   chować cokolwiek pod `overflow: hidden` — ukryty rozjazd jest gorszy,
   bo niewidoczny w testach i na oko.
   ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.bo-header__top { gap: var(--bo-space-3); }
	.bo-header__actions { gap: var(--bo-space-2); }
}

@media (max-width: 479px) {
	.bo-logo { width: 96px; }
	.bo-header__top { gap: var(--bo-space-2); }

	.bo-action,
	.bo-header__toggle { width: 44px; height: 44px; }

	/*
	 * Pięć kontrolek (motyw, konto, obserwowane, koszyk, menu) zajmowało
	 * 271 px przy ~222 px miejsca, a rząd akcji ma `flex: 0 0 auto` i nie
	 * ustępuje — więc to CAŁA strona jeździła w bok, na każdym ekranie
	 * panelu kupującego. Zamiast chować którąkolwiek (przełącznik motywu
	 * nie ma zastępstwa w menu mobilnym, a koszyk i konto to podstawa
	 * nawigacji), zwężamy odstępy i sam przycisk konta do awatara.
	 */
	.bo-header__actions { gap: 4px; }

	/* Sam awatar — strzałka rozwijania nie niesie tu żadnej informacji,
	   której nie niesie samo kliknięcie. */
	.bo-account__button { width: 44px; padding: 0; justify-content: center; }
	.bo-account__button .bo-icon { display: none; }
}

/*
 * 320 px — najwęższe okno, przy którym WCAG (1.4.10) wymaga treści bez
 * przewijania w bok. Rząd logo + pięć kontrolek zajmował tam 352 px, więc
 * CAŁA strona jeździła w poziomie: dokładnie to, czemu kryterium zapobiega.
 *
 * Zwężamy margines strony, logo i same kontrolki. 38 px to nadal wyraźnie
 * powyżej progu celu dotknięcia (24 px, 2.5.8), a niczego nie chowamy —
 * ukryty koszyk czy przełącznik motywu byłby stratą funkcji, nie oszczędnością.
 */
@media (max-width: 359px) {
	.bo-header__top { padding-inline: 12px; gap: 6px; }
	.bo-logo { width: 80px; }

	.bo-action,
	.bo-header__toggle,
	.bo-account__button { width: 38px; height: 38px; }

	.bo-header__actions { gap: 2px; }
}

/* --- baner komunikatu operatora (WF-136) ----------------------------------- */

.bo-notice {
	background: var(--bo-green-50);
	border-bottom: 1px solid var(--bo-green-100);
	color: var(--bo-ink);
}

/* Wysoki priorytet — inny kolor, bo to inna waga sprawy. */
.bo-notice--high { background: var(--bo-tint-danger); border-bottom-color: var(--bo-tint-warn-line); }

.bo-notice__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--bo-space-3);
	/* Tylko pion — boki daje .bo-container, żeby baner stał w linii z nagłówkiem. */
	padding-block: var(--bo-space-3);
}

.bo-notice__icon { flex: 0 0 auto; margin-top: 2px; }
.bo-notice__title { margin: 0; font-size: var(--bo-text-sm); font-weight: 700; }
.bo-notice__text { font-size: 0.8125rem; line-height: 1.5; }
.bo-notice__text p { margin: 2px 0 0; }

/* --- przełącznik motywu (WF-61) -------------------------------------------
 *
 * Ikona rysowana CSS-em, bez pliku: trzy stany różnią się kształtem, a nie
 * tylko kolorem — samo przyciemnienie byłoby nieczytelne dla osób
 * nierozróżniających barw (WN-31).
 * -------------------------------------------------------------------------- */

.bo-themetoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--bo-radius-pill);
	color: inherit;
	transition: background-color var(--bo-transition);
}

.bo-themetoggle:hover,
.bo-themetoggle:focus-visible { background: var(--bo-surface); }

.bo-themetoggle__icon {
	display: block;
	width: 18px;
	height: 18px;
	line-height: 0;
}

/*
 * Trzy czytelne ikony: pół koła = „jak system", słońce = jasny, księżyc =
 * ciemny. Pokazujemy TĘ, która odpowiada bieżącemu stanowi. Poprzednie
 * kształty rysowane pseudo-elementem (kropka w kółku, wycięcie) nie dawały
 * się odczytać bez podpowiedzi.
 */
/* Domyślny motyw platformy jest JASNY — stąd słońce, gdy stanu jeszcze nie ma. */
.bo-themetoggle__svg { display: none; }
.bo-themetoggle__svg--light { display: block; }
[data-bo-theme-state="system"] .bo-themetoggle__svg { display: none; }
[data-bo-theme-state="system"] .bo-themetoggle__svg--system { display: block; }
[data-bo-theme-state="dark"] .bo-themetoggle__svg { display: none; }
[data-bo-theme-state="dark"] .bo-themetoggle__svg--dark { display: block; }

/*
 * Telefon: kontrolki nagłówka do 44 px.
 *
 * Przełącznik motywu miał 36 px, przycisk konta 44x38 — mieściły się
 * w kryterium 2.5.8 (24 px), ale to są kontrolki dotykane najczęściej
 * i na całej platformie jedyne, które na telefonie schodziły poniżej
 * wygodnego progu. Zakres zaczyna się od 360 px, żeby nie znieść
 * zwężenia opisanego wyżej, bez którego nagłówek nie mieści się w 320 px.
 * Blok stoi na końcu arkusza, bo media query nie podnosi szczegółowości —
 * wyżej przegrywał kolejnością z podstawową definicją kontrolek.
 */
@media (min-width: 360px) and (max-width: 899px) {
	.bo-themetoggle { width: 44px; height: 44px; }
	.bo-account__button { min-height: 44px; }
}

@media (max-width: 359px) {
	/*
	 * Zwężenie przełącznika motywu z bloku 320 px. Stało tam PRZED podstawową
	 * definicją `.bo-themetoggle` i przegrywało z nią kolejnością, więc
	 * przełącznik trzymał 36 px wbrew regule.
	 */
	.bo-themetoggle { width: 32px; }
}