/* ==========================================================================
   Bronisze online — komponenty wielokrotnego użytku
   Wartości odwzorowują makiety co do piksela; nie zaokrąglać.
   ========================================================================== */

/* --- karta oferty (Figma V3/ProductCard, 71:281) -------------------------- */

.bo-card {
	display: flex;
	flex-direction: column;
	background: var(--bo-white);
	border: 1px solid var(--bo-stroke);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color var(--bo-transition), box-shadow var(--bo-transition);
}

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

/* Oferta promowana pakietem — obwódka i znacznik jak w wierszu katalogu. */
.bo-card--promoted { border: 1.5px solid var(--bo-verified); }

.bo-card__promo {
	align-self: flex-start;
	margin: 0;
	padding: 3px 10px;
	border-radius: 6px;
	background: var(--bo-verified);
	color: var(--bo-white);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
}

.bo-card__promo--premium,
.bo-badge--premium { background: var(--bo-green-contrast); }

/* --- media ---------------------------------------------------------------- */

.bo-card__media {
	position: relative;
	height: 220px;
	flex: 0 0 auto;
	background: var(--bo-green-50);
}

.bo-card__media-link { display: block; height: 100%; }

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

.bo-card__image--placeholder { object-fit: contain; padding: var(--bo-space-8); }

.bo-card__eko {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	border-radius: 20px;
	background: var(--bo-green-contrast);
	color: var(--bo-white);
	font-size: var(--bo-text-base);
	font-weight: 700;
	line-height: var(--bo-leading-body);
	text-transform: uppercase;
}

.bo-card__quickview {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 40px;
	background: var(--bo-green-contrast);
	color: var(--bo-white);
	transition: background-color var(--bo-transition);
}

.bo-card__quickview:hover { background: var(--bo-green-dark); }

/* --- treść ---------------------------------------------------------------- */

.bo-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	padding: 14px 16px 16px;
}

.bo-card__seller {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--bo-text-base);
	font-weight: 500;
	line-height: var(--bo-leading-body);
	color: var(--bo-placeholder);
}

.bo-card__seller .bo-icon { color: var(--bo-green-contrast); }

/* Nazwa oferty jest w makiecie krojem UI (Plus Jakarta Sans Bold 16),
   a nie krojem nagłówkowym — nadpisujemy domyślny styl h3. */
.bo-card__title {
	font-family: var(--bo-font-body);
	font-size: var(--bo-text-base);
	font-weight: 700;
	line-height: var(--bo-leading-body);
	color: var(--bo-ink);
}

/*
 * Nazwa oferty jest głównym odnośnikiem karty — jej cel dotyku musi mieć
 * 24 px (WCAG 2.5.8). `inline-block` zamiast `inline-flex`, bo dłuższa nazwa
 * ma się nadal łamać na dwa wiersze.
 */
.bo-card__title a { display: inline-block; min-height: 24px; }
.bo-card__title a:hover { color: var(--bo-green-contrast); }

.bo-card__meta {
	font-size: var(--bo-text-base);
	font-weight: 500;
	line-height: var(--bo-leading-body);
	color: var(--bo-text);
}

/* --- cena ----------------------------------------------------------------- */

.bo-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: var(--bo-space-3);
	row-gap: 2px;
	width: 100%;
}

/*
 * Kwota i jednostka stoją obok siebie, dopóki się mieszczą. Bez zawijania ten
 * rząd wystawał poza kartę — w wąskim kafelku telefonu i przy zwiększonych
 * odstępach w tekście (WCAG 1.4.12), a karta przycina zawartość.
 */
.bo-card__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.bo-card__value,
.bo-card__value .woocommerce-Price-amount {
	font-family: var(--bo-font-heading);
	font-size: 1.25rem; /* 20px */
	font-weight: 600;
	line-height: var(--bo-leading-heading);
	color: var(--bo-green-contrast);
}

/*
 * Nie rozrywamy KWOTY, ale zakres cen („36,00 zł – 1 400,00 zł") może się
 * złamać po myślniku. `nowrap` na całości wypychało go poza kartę, a ta ma
 * `overflow: hidden` — przy powiększonych odstępach (1.4.12 WCAG) cena po
 * prostu znikała za krawędzią.
 */
.bo-card__value { white-space: normal; }
.bo-card__value .woocommerce-Price-amount { white-space: nowrap; }

/* WooCommerce potrafi zwrócić cenę przekreśloną + promocyjną (<del>/<ins>). */
/*
 * Cena sprzed obniżki blednęła przezroczystością, a ta w motywie ciemnym
 * zbliżała zieleń do tła: 2,86:1 przy wymaganych 4,5:1. Ten sam efekt daje
 * token koloru przygaszonego, który zmienia się razem z motywem — tak samo
 * jak `bo-row__was` na liście katalogu.
 */
.bo-card__value del { color: var(--bo-muted); font-size: var(--bo-text-base); }
.bo-card__value ins { text-decoration: none; }

/*
 * Jednostka ceny („/ skrzynka 6 kg") nie trzyma się jednego wiersza. W kafelku
 * szerokim na pół ekranu telefonu wystawała poza kartę, a przy zwiększonych
 * odstępach w tekście (WCAG 1.4.12) robiła to samo także na pulpicie — karta
 * ma `overflow: hidden`, więc końcówka po prostu znikała.
 */
.bo-card__unit {
	/* Własny wiersz pod kwotą: obok przycisku „+” w kafelku telefonu łamał się na trzy linie. */
	flex-basis: 100%;
	margin: 0;
	font-size: var(--bo-text-base);
	font-weight: 500;
	line-height: var(--bo-leading-body);
	color: var(--bo-placeholder);
	white-space: normal;
}

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

.bo-card__add:hover { background: var(--bo-green-dark); color: var(--bo-white); }

/* --- pigułki filtrów (Figma 75:310) --------------------------------------- */

.bo-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bo-pill {
	padding: 9px 18px;
	border: 1px solid var(--bo-stroke);
	border-radius: 22px;
	background: var(--bo-white);
	color: var(--bo-text);
	font-size: var(--bo-text-base);
	font-weight: 700;
	line-height: var(--bo-leading-body);
	white-space: nowrap;
	transition: background-color var(--bo-transition), color var(--bo-transition),
	            border-color var(--bo-transition);
}

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

/* Bieżący wybór: `aria-current` na odnośniku (pigułki prowadzą do katalogu,
   nie przełączają treści na miejscu), `is-on`/`is-active` tam, gdzie stan
   niesie sam szablon. */
.bo-pill[aria-current="page"],
.bo-pill.is-on,
.bo-pill.is-active {
	background: var(--bo-green-contrast);
	border-color: var(--bo-green-contrast);
	color: var(--bo-white);
}

/* --- siatka ofert --------------------------------------------------------- */

.bo-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--bo-space-6);
	width: 100%;
}

@media (min-width: 1024px) {
	/* Makieta: cztery równe kolumny z odstępem 24 px. */
	.bo-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*
 * Telefon: dwie kolumny zamiast jednej.
 *
 * Przy `minmax(240px, …)` na ekranie 390 px mieściła się jedna karta, a każda
 * ma około 500 px wysokości — sześć ofert to trzy tysiące pikseli przewijania
 * i dwie oferty widoczne naraz. Kafle kategorii stoją tu po dwa w rzędzie,
 * więc dwie kolumny to ten sam język układu, nie wyjątek.
 */
@media (max-width: 599px) {
	.bo-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bo-space-4);
	}
}

/* --- kafel kategorii (Figma V3/CategoryTile, 71:280) ---------------------- */

.bo-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bo-space-5);
	width: 100%;
}

@media (min-width: 640px)  { .bo-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bo-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (min-width: 1280px) {
	/* Makieta: sześć kolumn po 196 px z odstępem 20 px. */
	.bo-cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.bo-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bo-space-3);
	height: 100%;
	padding: 22px 14px;
	background: var(--bo-white);
	border: 1px solid var(--bo-stroke);
	border-radius: 16px;
	text-align: center;
	transition: border-color var(--bo-transition), box-shadow var(--bo-transition),
	            transform var(--bo-transition);
}

.bo-cat:hover {
	border-color: var(--bo-green-contrast);
	box-shadow: var(--bo-shadow);
	transform: translateY(-2px);
}

.bo-cat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	flex: 0 0 auto;
	border-radius: 38px;
	/* Para kolorów przekazywana per kafel — wartości pochodzą z makiety. */
	background: var(--bo-cat-bg, var(--bo-green-50));
	color: var(--bo-cat-fg, var(--bo-green-contrast));
}

.bo-cat__label {
	font-size: var(--bo-text-base);
	font-weight: 700;
	line-height: var(--bo-leading-body);
	color: var(--bo-ink);
}

.bo-cat__count {
	margin-top: auto;
	font-size: var(--bo-text-base);
	font-weight: 500;
	line-height: var(--bo-leading-body);
	color: var(--bo-placeholder);
}

/*
 * Wariant zwarty karty oferty.
 *
 * UWAGA — rozbieżność w makiecie: w „Polecanych ofertach" (75:304) opis
 * sprzedawcy, parametry i jednostka mają 16 px, a w „Dla Ciebie" (414:7389)
 * te same pola mają 14 px. Odwzorowujemy oba stany; do ujednolicenia po
 * stronie projektu.
 */
.bo-card--compact .bo-card__seller,
.bo-card--compact .bo-card__meta,
.bo-card--compact .bo-card__unit { font-size: var(--bo-text-sm); }

/* --- pastylka etykiety ---------------------------------------------------- */

.bo-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--bo-radius-pill);
	background: var(--bo-green-50);
	color: var(--bo-green);
	font-size: var(--bo-text-sm);
	font-weight: 700;
	line-height: var(--bo-leading-body);
	white-space: nowrap;
}

/* --- okrągły przycisk przewijania ----------------------------------------- */

.bo-round-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border: 1px solid var(--bo-border);
	border-radius: 99px;
	background: var(--bo-white);
	color: var(--bo-text-soft);
	transition: border-color var(--bo-transition), color var(--bo-transition);
}

.bo-round-btn:hover { border-color: var(--bo-green-contrast); color: var(--bo-green-contrast); }
.bo-round-btn[disabled] { opacity: 0.4; cursor: default; }

/* --- kafelek historii oglądania (Figma 419:492) --------------------------- */

.bo-mini {
	display: flex;
	align-items: center;
	gap: var(--bo-space-3);
	width: 280px;
	padding: var(--bo-space-3);
	background: var(--bo-white);
	border: 1px solid var(--bo-border);
	border-radius: var(--bo-radius);
	transition: border-color var(--bo-transition), box-shadow var(--bo-transition);
}

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

.bo-mini__media {
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
	border-radius: var(--bo-radius-sm);
	overflow: hidden;
	background: var(--bo-green-50);
}

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

.bo-mini__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.4;
}

.bo-mini__title {
	font-size: var(--bo-text-sm);
	font-weight: 600;
	color: var(--bo-ink);
}

/* Cena promocyjna z przekreśloną i jednostką nie mieści się w jednym
   wierszu kafelka 280 px — bez zawijania wystawała poza jego ramkę. */
.bo-mini__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.bo-mini__price > * { white-space: nowrap; }

.bo-mini__value,
.bo-mini__value .woocommerce-Price-amount {
	font-size: 0.9375rem; /* 15px */
	font-weight: 700;
	color: var(--bo-green-contrast);
}

.bo-mini__unit,
.bo-mini__cta {
	font-size: 0.75rem; /* 12px */
	font-weight: 400;
	color: var(--bo-muted);
}

/* --- brama konta kupującego ------------------------------------------------
   Widok dla gościa na stronie „Moje konto". Panel React montuje się dopiero
   po zalogowaniu, więc ten ekran musi się obronić sam.
   -------------------------------------------------------------------------- */

.bo-accountgate {
	max-width: 560px;
	margin: 8px 0 64px;
	padding: 36px 32px;
	border: 1px solid var(--bo-stroke, #d7dad8);
	border-radius: 18px;
	background: var(--bo-white, #fff);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bo-accountgate__title {
	font-family: var(--bo-font-heading), sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: var(--bo-ink, #1f2421);
}

.bo-accountgate__lead { color: var(--bo-text-soft, #53565a); }

.bo-accountgate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

/* --- gwiazdki ocen ----------------------------------------------------------
   Ikona `star` przeszła na `currentColor` razem z resztą zestawu, więc kolor
   oceny ustala teraz kontekst, a nie plik.
   -------------------------------------------------------------------------- */

.bo-stars,
.bo-hero__stars { color: var(--bo-star); }

/* --- strony informacyjne ----------------------------------------------------
   Typografia artykułu obowiązuje WYŁĄCZNIE w `.bo-prose`. Klasę dostaje tylko
   strona treściowa — wcześniej reguły opierały się na `.bo-entry__content`
   i wchodziły w aplikacje osadzone na stronach: listy kroków kreatora
   dostawały numerowane kółka i układ pionowy, a odnośniki podkreślenia.
   -------------------------------------------------------------------------- */

.bo-prose { max-width: 780px; }

.bo-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 14px;
	color: var(--bo-muted);
}

/* Jak w okruszkach katalogu: cel dotyku ma mieć 24 px (WCAG 2.5.8). */
.bo-crumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--bo-text-soft);
}

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

.bo-prose__title {
	font-family: var(--bo-font-heading);
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--bo-ink);
	margin-bottom: 20px;
}

.bo-prose__body { color: var(--bo-text); font-size: 17px; line-height: 1.7; }

/*
 * Tabela w treści na telefonie: wiersz jako karta, nagłówek kolumny przy
 * wartości (`data-label` dopisuje app.js). Selektor z nazwą elementu, żeby
 * wygrać z obramowaniem komórek z arkusza bloku tabeli.
 */
@media (max-width: 599px) {
	table.bo-stack-table,
	table.bo-stack-table tbody,
	table.bo-stack-table tr,
	table.bo-stack-table td { display: block; width: 100%; }

	table.bo-stack-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	table.bo-stack-table tr {
		margin-bottom: var(--bo-space-3);
		padding: var(--bo-space-3) var(--bo-space-4);
		border: 1px solid var(--bo-stroke);
		border-radius: var(--bo-radius);
	}

	table.bo-stack-table td { padding: var(--bo-space-1) 0; border: 0; font-size: var(--bo-text-base); }

	table.bo-stack-table td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: var(--bo-text-xs);
		font-weight: 700;
		color: var(--bo-muted);
	}
}
.bo-prose__body > * + * { margin-top: 16px; }

.bo-prose__body .bo-lead {
	font-size: 19px;
	line-height: 1.6;
	color: var(--bo-text-soft);
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--bo-green-50);
	border-left: 4px solid var(--bo-green-contrast);
}

.bo-prose__body h2 {
	font-family: var(--bo-font-heading);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--bo-ink);
	margin-top: 40px;
}

.bo-prose__body h3 {
	font-family: var(--bo-font-heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--bo-ink);
	margin-top: 28px;
}

.bo-prose__body p + h2,
.bo-prose__body ul + h2,
.bo-prose__body ol + h2 { margin-top: 44px; }

.bo-prose__body ul,
.bo-prose__body ol { display: flex; flex-direction: column; gap: 10px; padding-left: 0; }
.bo-prose__body li { position: relative; padding-left: 30px; }

.bo-prose__body ul > li::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 11px;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--bo-green-contrast);
}

.bo-prose__body ol { counter-reset: bo-step; }
.bo-prose__body ol > li { counter-increment: bo-step; padding-left: 40px; }

.bo-prose__body ol > li::before {
	content: counter(bo-step);
	position: absolute;
	left: 0;
	top: 2px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--bo-green-50);
	color: var(--bo-green-contrast);
	font-family: var(--bo-font-heading);
	font-size: 14px;
	font-weight: 700;
}

.bo-prose__body strong { color: var(--bo-ink); font-weight: 700; }
.bo-prose__body a { color: var(--bo-green-contrast); text-decoration: underline; text-underline-offset: 3px; }

/* Przycisk w treści nie jest odnośnikiem tekstowym — reguła wyżej malowała
   napis kolorem tła przycisku i znikał. */
.bo-prose__body a.bo-btn { text-decoration: none; }
.bo-prose__body a.bo-btn--primary,
.bo-prose__body a.bo-btn--primary:hover { color: var(--bo-white); }

/* Wejście do zgłoszeń dokładane pod treść strony „Kontakt” (wtyczka). */
.bo-prose__body .bo-report-box { margin-top: 44px; }
.bo-prose__body .bo-report-box > * + * { margin-top: 12px; }
.bo-prose__body .bo-report-box > p:last-child { margin-top: 24px; }

/* --- gwiazdki ocen ----------------------------------------------------------
   Ikona `star` przeszła na `currentColor` razem z resztą zestawu, więc kolor
   oceny ustala teraz kontekst, a nie plik.
   -------------------------------------------------------------------------- */

.bo-stars,
.bo-hero__stars { color: var(--bo-star); }

/* --- brama konta kupującego ------------------------------------------------
   Widok dla gościa na stronie „Moje konto". Panel React montuje się dopiero
   po zalogowaniu, więc ten ekran musi się obronić sam.
   -------------------------------------------------------------------------- */

.bo-accountgate {
	max-width: 560px;
	margin: 8px 0 64px;
	padding: 36px 32px;
	border: 1px solid var(--bo-stroke, #d7dad8);
	border-radius: 18px;
	background: var(--bo-white, #fff);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bo-accountgate__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: var(--bo-radius-pill);
	background: var(--bo-green-50);
	color: var(--bo-green-contrast);
}

.bo-accountgate__title {
	font-family: var(--bo-font-heading), sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: var(--bo-ink, #1f2421);
}

.bo-accountgate__lead { color: var(--bo-text-soft, #53565a); }

.bo-accountgate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

/* --- pozycja wyboru wielokrotnego ----------------------------------------- */

/* Wspólne dla filtrów katalogu i okna preferencji na stronie głównej, dlatego
   arkusz komponentów, a nie katalogu — strona główna nie ładuje catalog.css. */

.bo-check {
	display: flex;
	align-items: center;
	gap: var(--bo-space-2);
	font-size: var(--bo-text-sm);
	color: var(--bo-text);
	/*
	 * Filtry katalogu to najczęściej dotykana rzecz na telefonie, a wiersz
	 * miał 21 px wysokości — mniej niż połowę wygodnego celu. Odstęp w pionie
	 * robi z niego pas 37 px, wciąż mieszcząc komplet filtrów bez przewijania.
	 */
	min-height: 36px;
	padding-block: 8px;
}

.bo-check__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border: 1px solid var(--bo-field);
	border-radius: 5px;
	background: var(--bo-white);
	color: transparent;
	transition: background-color var(--bo-transition), border-color var(--bo-transition);
}

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

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

/* Wariant z prawdziwym polem wyboru — filtry katalogu są odnośnikami
   (stan trzyma adres), ale okno preferencji zbiera wybór formularzem. */
.bo-check--field { position: relative; cursor: pointer; }

.bo-check__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.bo-check__input:checked + .bo-check__box {
	background: var(--bo-green-contrast);
	border-color: var(--bo-green-contrast);
	color: var(--bo-white);
}

.bo-check__input:focus-visible + .bo-check__box {
	border-color: var(--bo-green-contrast);
	box-shadow: var(--bo-focus);
}

.bo-check__input:checked ~ .bo-check__label { font-weight: 700; color: var(--bo-ink); }

.bo-check__label { flex: 1 0 0; min-width: 0; }
.bo-check.is-on .bo-check__label { font-weight: 700; color: var(--bo-ink); }
.bo-check__count { color: var(--bo-muted); font-size: 0.75rem; }

/* --- okno modalne --------------------------------------------------------- */

.bo-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: var(--bo-space-5);
}

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

.bo-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(31 36 33 / 0.55);
}

.bo-modal__box {
	position: relative;
	inline-size: min(520px, 100%);
	display: flex;
	flex-direction: column;
	gap: var(--bo-space-3);
	padding: var(--bo-space-8);
	border-radius: 18px;
	background: var(--bo-white);
	box-shadow: 0 24px 64px rgb(31 36 33 / 0.28);
}

.bo-modal__x {
	position: absolute;
	inset-block-start: var(--bo-space-4);
	inset-inline-end: var(--bo-space-4);
	display: grid;
	place-items: center;
	inline-size: 34px;
	block-size: 34px;
	border: 0;
	border-radius: var(--bo-radius-pill);
	background: none;
	color: var(--bo-muted);
	cursor: pointer;
}

.bo-modal__x:hover { background: var(--bo-gray-100); color: var(--bo-ink); }

/* Telefon: zamknięcie okna to cel dotykany najczęściej — 44 px. */
@media (max-width: 599px) {
	.bo-modal__x { inline-size: 44px; block-size: 44px; inset-block-start: var(--bo-space-2); inset-inline-end: var(--bo-space-2); }
}

.bo-modal__icon {
	display: grid;
	place-items: center;
	inline-size: 52px;
	block-size: 52px;
	border-radius: 14px;
	background: var(--bo-green-50);
	color: var(--bo-green-contrast);
}

.bo-modal__icon--warn {
	background: var(--bo-tint-danger);
	color: var(--bo-danger);
}

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

.bo-modal__box--wide { inline-size: min(660px, 100%); }

/* --- wybór wariantu przy dokładaniu do koszyka ---------------------------- */

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

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

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

/*
 * Wariant to pełnoprawny wybór, nie pozycja listy — stąd ramka i stan
 * najechania. Siatka trzyma nazwę i cenę w jednym wierszu, a dopisek
 * o minimum zakupu pod nazwą.
 */
.bo-variantpick__item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px var(--bo-space-3);
	inline-size: 100%;
	padding: var(--bo-space-3) var(--bo-space-4);
	border: 1px solid var(--bo-border);
	border-radius: 14px;
	background: var(--bo-white);
	text-align: left;
	cursor: pointer;
}

.bo-variantpick__item:hover:not(:disabled) {
	border-color: var(--bo-green-contrast);
	background: var(--bo-green-50);
}

.bo-variantpick__item:disabled { opacity: 0.55; cursor: not-allowed; }

.bo-variantpick__name { grid-column: 1; font-weight: 700; color: var(--bo-ink); }
.bo-variantpick__meta { grid-column: 1; font-size: var(--bo-text-sm); color: var(--bo-muted); }

.bo-variantpick__price {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-weight: 700;
	color: var(--bo-green-contrast);
	white-space: nowrap;
}

.bo-modal__text { color: var(--bo-text-soft); }

.bo-modal__foot {
	margin-top: var(--bo-space-2);
	font-size: var(--bo-text-sm);
	color: var(--bo-muted);
}

.bo-modal__foot a { color: var(--bo-green-contrast); font-weight: 600; }

/* Wybór grup produktowych w oknie preferencji. Dwie kolumny, bo przy
   kilkunastu grupach jedna robi z okna długi pas do przewijania. */
.bo-prefpick { border: 0; padding: 0; margin: 0; }

.bo-prefpick__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0 var(--bo-space-4);
	margin-top: 4px;
	max-block-size: 260px;
	overflow-y: auto;
}

.bo-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-space-3);
	margin-top: var(--bo-space-2);
}

/* Tło nie ma się przewijać pod otwartym oknem. */
body.bo-modal-open { overflow: hidden; }

/* Pola formularza w oknie modalnym. Motyw nie miał dotąd ogólnego pola —
   logowanie stylowało własne przez selektory `.bo-authgate__form input`. */
.bo-field { display: flex; flex-direction: column; gap: 6px; }

.bo-field__label {
	font-size: var(--bo-text-sm);
	font-weight: 600;
	color: var(--bo-text-soft);
}

.bo-field__input {
	inline-size: 100%;
	padding: 11px 14px;
	border: 1px solid var(--bo-field);
	border-radius: 10px;
	background: var(--bo-white);
	font: inherit;
	font-size: var(--bo-text-sm);
	color: var(--bo-ink);
}

.bo-field__input::placeholder { color: var(--bo-placeholder); }

.bo-field__input:focus {
	outline: none;
	border-color: var(--bo-green-contrast);
	box-shadow: var(--bo-focus);
}

textarea.bo-field__input { resize: vertical; min-block-size: 110px; }

/* Telefon: 16 px — przy mniejszej czcionce Safari przybliża stronę po
   dotknięciu pola i okno (np. pytanie do sprzedawcy) zostaje rozjechane. */
@media (max-width: 599px) {
	.bo-field__input { font-size: var(--bo-text-base); }
}

.bo-modal__error {
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--bo-tint-danger);
	font-size: var(--bo-text-sm);
	font-weight: 600;
	color: var(--bo-danger);
}

/* --- obserwowanie oferty --------------------------------------------------- */

/* Serce na karcie i w wierszu katalogu. Wypełnione = oferta obserwowana. */
.bo-watch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	flex: 0 0 auto;
	border: 1px solid var(--bo-field);
	border-radius: var(--bo-radius-pill);
	background: var(--bo-white);
	color: var(--bo-text-soft);
	cursor: pointer;
	transition: color var(--bo-transition), border-color var(--bo-transition), background-color var(--bo-transition);
}

.bo-watch:hover { color: var(--bo-sale); border-color: var(--bo-sale); }

.bo-watch.is-on {
	color: var(--bo-sale);
	border-color: var(--bo-sale);
	background: var(--bo-tint-danger);
}

.bo-watch.is-on svg { fill: currentColor; }

.bo-watch[disabled] { opacity: 0.55; cursor: progress; }

/* Na karcie serce siada pod przyciskiem podglądu, w tej samej kolumnie. */
.bo-card__watch {
	position: absolute;
	inset-block-start: 66px;
	inset-inline-end: 10px;
	box-shadow: 0 2px 8px rgb(31 36 33 / 0.14);
}

/* --- pasek potwierdzeń motywu ---------------------------------------------
   Nazwa `bo-flash`, bo `.bo-toast` jest zajęte przez aplikację panelu. */

.bo-flash {
	position: fixed;
	inset-block-end: var(--bo-space-5);
	inset-inline: var(--bo-space-5);
	z-index: 120;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--bo-space-3);
	margin-inline: auto;
	inline-size: fit-content;
	max-inline-size: min(560px, calc(100% - 2 * var(--bo-space-5)));
	padding: 12px 18px;
	border-radius: 12px;
	background: var(--bo-ink);
	font-size: var(--bo-text-sm);
	font-weight: 600;
	color: var(--bo-white);
	box-shadow: 0 12px 32px rgb(31 36 33 / 0.3);
}

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

.bo-flash.is-error { background: var(--bo-danger); }

.bo-flash a { color: var(--bo-white); text-decoration: underline; }

/* --- szybki podgląd oferty -------------------------------------------------- */

.bo-quickview__box { inline-size: min(880px, 100%); padding: var(--bo-space-6); }

/* Na telefonie zdjęcie sięga pod róg okna — przezroczysty krzyżyk znikał
   na jego tle i zostawał sam pierścień fokusu. */
.bo-quickview__box .bo-modal__x { z-index: 1; background: var(--bo-white); box-shadow: var(--bo-shadow); }

.bo-quickview__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--bo-space-6);
	align-items: start;
}

.bo-quickview__state {
	grid-column: 1 / -1;
	padding: var(--bo-space-8) 0;
	text-align: center;
	color: var(--bo-text-soft);
}

.bo-quickview__state.is-error { color: var(--bo-danger); font-weight: 600; }

.bo-quickview__image {
	inline-size: 100%;
	block-size: 320px;
	object-fit: cover;
	border-radius: 14px;
	background: var(--bo-green-50);
}

.bo-quickview__thumbs {
	display: flex;
	gap: var(--bo-space-2);
	margin-block-start: var(--bo-space-2);
}

.bo-quickview__thumb {
	inline-size: 64px;
	block-size: 64px;
	padding: 0;
	border: 1px solid var(--bo-stroke);
	border-radius: 10px;
	background: none;
	overflow: hidden;
	cursor: pointer;
}

.bo-quickview__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }

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

.bo-quickview__badges { display: flex; flex-wrap: wrap; gap: 6px; }

.bo-quickview__seller { font-size: var(--bo-text-sm); color: var(--bo-text-soft); }

.bo-quickview__name {
	/* Tytuł w prawej kolumnie zaczyna się pod przyciskiem zamknięcia. */
	padding-inline-end: var(--bo-space-10);
	font-family: var(--bo-font-heading);
	font-size: var(--bo-text-xl);
	line-height: var(--bo-leading-heading);
	color: var(--bo-ink);
}

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

.bo-quickview__unit { font-size: var(--bo-text-sm); font-weight: 400; color: var(--bo-text-soft); }

.bo-quickview__lead { color: var(--bo-text-soft); }

.bo-quickview__chips { display: flex; flex-wrap: wrap; gap: 6px; }

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

.bo-quickview__stock.is-ok { color: var(--bo-green-contrast); font-weight: 600; }

.bo-quickview__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-space-3);
	margin-block-start: var(--bo-space-2);
}

@media (max-width: 767px) {
	.bo-quickview__body { grid-template-columns: minmax(0, 1fr); }

	.bo-quickview__image { block-size: 220px; }
}

/* Przycisk w trakcie żądania — bez tego dwuklik dokłada dwie pozycje. */
.bo-btn.is-busy, .bo-card__add.is-busy { opacity: 0.6; pointer-events: none; }

.bo-quickview__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--bo-space-3);
	border-radius: 10px;
	background: var(--bo-green-contrast);
	font-size: var(--bo-text-sm);
	font-weight: 700;
	color: var(--bo-white);
	white-space: nowrap;
}

.bo-quickview__badge.is-eko { background: var(--bo-green-dark); }

.bo-quickview__chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--bo-radius-pill);
	background: var(--bo-gray-100);
	font-size: var(--bo-text-sm);
	color: var(--bo-text-soft);
}

/*
 * Komunikaty WooCommerce mieszkały w `auth.css`, ładowanym wyłącznie na
 * ekranach konta. Na karcie oferty i w katalogu arkusza nie ma, więc gdyby
 * komunikat tam trafił, wyglądałby jak surowa lista HTML. Tu widzą go
 * wszystkie ekrany sklepu.
 */
/* --- komunikaty WooCommerce ------------------------------------------------ */

/*
 * Komunikat rozciąga się na szerokość treści i zaczyna od lewej, jak reszta
 * strony. Wyśrodkowana ramka 820 px wisiała nad kartą oferty jak wtrącenie
 * z innego szablonu, a WooCommerce wpisuje w nią jeszcze odnośnik „Zobacz
 * koszyk", który bez oprawy wyglądał na szary prostokąt.
 */
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	margin: 0 0 16px;
	padding: 14px 18px;
	border-radius: 14px;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
}

/* Treść bierze całą wolną przestrzeń, przycisk zostaje przy prawej krawędzi. */
.woocommerce-notices-wrapper .woocommerce-error > .button,
.woocommerce-notices-wrapper .woocommerce-message > .button,
.woocommerce-notices-wrapper .woocommerce-info > .button {
	order: 2;
	flex: 0 0 auto;
	margin-left: auto;
	padding: 8px 16px;
	border: 1px solid currentColor;
	border-radius: var(--bo-radius-pill, 999px);
	background: transparent;
	color: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-notices-wrapper .woocommerce-message > .button:hover,
.woocommerce-notices-wrapper .woocommerce-info > .button:hover,
.woocommerce-notices-wrapper .woocommerce-error > .button:hover {
	background: rgb(255 255 255 / 0.55);
}

/* Tekst komunikatu w kolorze „tekst na tincie", nie w kolorze plakietki:
   czerwień promocji na różowym tle dawała 4,17:1 przy wymaganych 4,5:1
   (1.4.3 WCAG). Ramka i tło niosą ten sam sygnał co wcześniej. */
.woocommerce-notices-wrapper .woocommerce-error { background: var(--bo-tint-danger); border: 1px solid rgb(217 40 47 / 0.35); color: var(--bo-tint-danger-ink, #9a2b2e); }

/*
 * WooCommerce wstawia własną ikonę pseudoelementem i rezerwuje na nią lewy
 * padding (3.5em). Po zmianie odstępów glif lądował NA tekście — „Błąd:" było
 * przekreślone kółkiem. Ikony nie potrzebujemy: kolor i ramka niosą ten sam
 * komunikat, a tekst zaczyna się od słowa „Błąd".
 */
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before { content: none; }

.woocommerce-notices-wrapper .woocommerce-error li,
.woocommerce-notices-wrapper .woocommerce-message li,
.woocommerce-notices-wrapper .woocommerce-info li { list-style: none; }

/* Odnośnik w komunikacie (np. „Nie pamiętasz hasła?") ma być rozpoznawalny. */
.woocommerce-notices-wrapper .woocommerce-error a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info { background: var(--bo-green-50, #e8f5ee); border: 1px solid var(--bo-green-100, #d2ecdd); color: var(--bo-green-contrast, #007737); }

/* --- licznik sztuk -------------------------------------------------------- */

/*
 * Stepper ilości jest KOMPONENTEM, a nie elementem karty oferty. Stał
 * wcześniej w `offer.css`, ładowanym tylko na stronie produktu, więc
 * w koszyku zostawały z niego same nadpisania rozmiaru: pole traciło
 * zdjęcie natywnych strzałek i te zjadały mu połowę szerokości, przycinając
 * dwucyfrową ilość.
 */
.bo-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--bo-stroke);
	border-radius: 10px;
	overflow: hidden;
}

/*
 * `flex: 0 0 auto` nie jest ozdobą: w wąskim wierszu koszyka przyciski
 * kurczyły się do 12 i 18 px, choć reguła mówi o 38 px — domyślne
 * `flex-shrink: 1` zabierało im szerokość, gdy pole ilości i przyciski nie
 * mieściły się obok siebie.
 */
.bo-qty__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 46px;
	background: var(--bo-gray-100);
	color: var(--bo-text-soft);
	font-size: var(--bo-text-lg);
	font-weight: 700;
}

.bo-qty__step:hover { background: var(--bo-green-50); color: var(--bo-green-contrast); }

.bo-qty__input {
	width: 54px;
	height: 46px;
	border: 0;
	text-align: center;
	font-weight: 700;
	color: var(--bo-ink);
	/* Strzałki pola liczbowego zjadają połowę szerokości — mamy własne. */
	appearance: textfield;
	-moz-appearance: textfield;
}

.bo-qty__input::-webkit-outer-spin-button,
.bo-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/*
 * Własna obwódka pola gubiłaby się w ramce licznika, więc pierścień
 * zaznaczenia bierze na siebie CAŁA kontrolka. Samo `outline: none` bez
 * zamiennika zostawiało osobę używającą klawiatury bez informacji, gdzie
 * jest (2.4.7 WCAG) — a licznik sztuk jest po drodze do koszyka.
 */
.bo-qty__input:focus { outline: none; }
.bo-qty:focus-within { border-color: var(--bo-green-contrast); box-shadow: var(--bo-focus); }

/* --- strona 404 ------------------------------------------------------------- */

.bo-notfound {
	display: flex;
	flex-direction: column;
	gap: var(--bo-space-4);
	max-width: 640px;
	margin-inline: auto;
	padding: var(--bo-space-10) var(--bo-space-8);
	border: 1px solid var(--bo-stroke);
	border-radius: var(--bo-radius-lg);
	background: var(--bo-white);
	text-align: center;
}

.bo-notfound__code {
	font-family: var(--bo-font-heading);
	font-size: var(--bo-text-4xl);
	font-weight: 700;
	line-height: 1;
	color: var(--bo-green-contrast);
}

.bo-notfound__title { font-size: clamp(var(--bo-text-xl), 4vw, var(--bo-text-2xl)); }
.bo-notfound__lead { color: var(--bo-text-soft); }

.bo-notfound__search { display: flex; gap: var(--bo-space-2); margin-top: var(--bo-space-2); }

.bo-notfound__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--bo-field);
	border-radius: var(--bo-radius-sm);
	background: var(--bo-white);
	font-size: var(--bo-text-base);
	color: var(--bo-ink);
}

.bo-notfound__field:focus { outline: none; border-color: var(--bo-green-contrast); box-shadow: var(--bo-focus); }

.bo-notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bo-space-3); }

@media (max-width: 599px) {
	.bo-notfound { padding: var(--bo-space-8) var(--bo-space-5); }
	.bo-notfound__actions { flex-direction: column; }
	.bo-notfound__actions .bo-btn { width: 100%; }
}