/* ==========================================================================
   Bronisze online — strona główna
   ========================================================================== */

/* --- hero (Figma 73:255) -------------------------------------------------- */

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

.bo-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--bo-space-8);
	padding-block: var(--bo-space-10);
}

@media (min-width: 1024px) {
	.bo-hero__inner {
		flex-direction: row;
		align-items: center;
		gap: var(--bo-space-12);
		padding-block: 60px;
	}
}

.bo-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bo-space-5);
	flex: 1 0 0;
	min-width: 0;
}

.bo-hero__badge {
	padding: 6px var(--bo-space-3);
	border-radius: 20px;
	background: var(--bo-green-100);
	/* Zieleń podstawowa na jasnej zieleni dawała 4,39:1 w motywie jasnym
	   i 4,26:1 w ciemnym — poniżej progu WCAG AA (WN-30). Odcień ciemny
	   trzyma powyżej 7:1 w obu. */
	color: var(--bo-green-dark);
	font-size: var(--bo-text-sm);
	font-weight: 700;
	line-height: var(--bo-leading-body);
	text-transform: uppercase;
}

.bo-hero__title {
	font-size: 2.25rem; /* 36px — poniżej breakpointu desktopowego */
	color: var(--bo-ink);
	text-wrap: balance;
}

@media (min-width: 1024px) {
	/* Wartość dokładnie z makiety (Figma 73:259). */
	.bo-hero__title { font-size: 3.5rem; }
}

.bo-hero__lead {
	max-width: 560px;
	color: var(--bo-text);
}

.bo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding-top: var(--bo-space-2);
}

.bo-hero__proof {
	display: flex;
	align-items: center;
	gap: var(--bo-space-2);
	padding-top: 6px;
	font-weight: 500;
	color: var(--bo-text);
}

.bo-hero__stars { display: inline-flex; gap: 2px; }

/*
 * Telefon: zdanie płynie pod gwiazdkami jak zwykły tekst. Jako element
 * flex stało obok nich w wąskiej kolumnie na cztery wiersze, a gwiazdki
 * z liczbą wisiały w połowie jego wysokości.
 */
@media (max-width: 599px) {
	.bo-hero__proof { display: block; }
	.bo-hero__proof .bo-hero__stars,
	.bo-hero__proof .bo-hero__proof-icon { margin-right: var(--bo-space-2); vertical-align: -2px; }
}
.bo-hero__stars .bo-icon { width: 15px; height: 15px; }
.bo-hero__proof-icon { color: var(--bo-green-contrast); }

/* --- hero: zdjęcie i slider ----------------------------------------------- */

.bo-hero__media { flex: 0 0 auto; width: 100%; }

/*
 * Slider szedł na sztywne 560 px z makiety o kontenerze 1280 px. Po
 * poszerzeniu układu do 1600 px cała nadwyżka wpadała w kolumnę tekstu i
 * zdjęcie wyglądało na doklejone z boku. Teraz obie kolumny dzielą wiersz
 * po połowie, a slider ma tylko dolną i górną granicę rozsądku.
 */
@media (min-width: 1024px) {
	.bo-hero__media {
		flex: 1 1 0;
		width: auto;
		min-width: 480px;
		max-width: 720px;
	}

	.bo-hero__copy { flex: 1 1 0; }
}

.bo-slider {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 560 / 420;
	background: var(--bo-green-50);
}

.bo-slider__track {
	display: flex;
	height: 100%;
	transition: transform 350ms ease;
}

.bo-slider__slide {
	flex: 0 0 100%;
	margin: 0;
	height: 100%;
}

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

.bo-slider__arrow {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--bo-radius-pill);
	background: var(--bo-white);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
}

.bo-slider__arrow--prev { left: var(--bo-space-4); }
.bo-slider__arrow--next { right: var(--bo-space-4); }
.bo-slider__arrow .bo-icon { width: 14px; height: 14px; }

.bo-slider__dots {
	position: absolute;
	right: var(--bo-space-6);
	bottom: var(--bo-space-4);
	display: flex;
	align-items: center;
	gap: 6px;
}

/*
 * Kropka jest mała z założenia — ale POLE DOTKNIĘCIA nie może być. Sam
 * znacznik 8×8 px trafia się palcem raz na kilka prób; przełączanie slajdów
 * na telefonie było w praktyce niemożliwe. Kropkę rysujemy więc w tle,
 * a przycisk dostaje wysokość, którą da się trafić.
 */
/*
 * Kropka jest mała z założenia — ale POLE DOTKNIĘCIA nie może być. Sam
 * znacznik 8×8 px trafia się palcem raz na kilka prób; przełączanie slajdów
 * na telefonie było w praktyce niemożliwe. Przycisk ma więc stały rozmiar
 * 24×32 px, a widoczną kropkę rysuje warstwa tła. Przy okazji rząd kropek
 * przestał zmieniać szerokość przy przewijaniu slajdów.
 */
.bo-slider__dot {
	position: relative;
	width: 24px;
	height: 32px;
	background: transparent;
	box-shadow: none;
}

.bo-slider__dot::before {
	content: "";
	position: absolute;
	inset: 12px 8px;
	border-radius: var(--bo-radius-pill);
	background: rgb(255 255 255 / 0.55);
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
	transition: inset var(--bo-transition), background-color var(--bo-transition);
}

.bo-slider__dot[aria-selected="true"]::before {
	inset: 12px 1px;
	background: var(--bo-white);
}

/* --- hero: kafel z liczbą ofert ------------------------------------------- */

.bo-hero__stat {
	position: absolute;
	left: var(--bo-space-4);
	bottom: var(--bo-space-4);
	display: flex;
	align-items: center;
	gap: var(--bo-space-3);
	padding: var(--bo-space-3) 18px var(--bo-space-3) var(--bo-space-4);
	border-radius: 14px;
	background: var(--bo-white);
	box-shadow: var(--bo-shadow);
}

.bo-hero__stat-value {
	font-family: var(--bo-font-heading);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: var(--bo-leading-heading);
	color: var(--bo-green);
	white-space: nowrap;
}

.bo-hero__stat-meta { display: flex; flex-direction: column; }
.bo-hero__stat-label { font-weight: 700; color: var(--bo-ink); }

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

@media (min-width: 1024px) {
	/*
	 * Wcześniej `top: 344px` — pozycja wyliczona z makiety przy kadrze
	 * 560×420 px. Kadr rośnie razem z układem, więc nakładka lądowała
	 * w połowie zdjęcia. Trzymamy ją przy dolnej krawędzi, niezależnie od
	 * wysokości slidera.
	 */
	.bo-hero__stat {
		bottom: var(--bo-space-5);
		left: var(--bo-space-5);
	}
}

/* --- pasek zaufania (Figma 73:275) ---------------------------------------- */

.bo-trust {
	background: var(--bo-white);
	border-block: 1px solid var(--bo-stroke);
}

.bo-trust__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bo-space-5);
	padding-block: 22px;
	margin-block: 0;
	list-style: none; /* siatka kafli, nie lista z kropkami */
}

@media (min-width: 640px) {
	.bo-trust__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.bo-trust__list {
		grid-template-columns: repeat(4, auto);
		justify-content: space-between;
		gap: var(--bo-space-6);
	}
}

.bo-trust__item {
	display: flex;
	align-items: center;
	gap: var(--bo-space-3);
	position: relative;
}

/* Separatory jak w makiecie — tylko między kaflami i tylko na desktopie. */
@media (min-width: 1024px) {
	.bo-trust__item + .bo-trust__item::before {
		content: "";
		position: absolute;
		left: calc(-1 * var(--bo-space-6) / 2);
		width: 1px;
		height: 40px;
		background: var(--bo-stroke);
	}
}

.bo-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: var(--bo-radius);
	background: var(--bo-green-50);
	color: var(--bo-green-dark);
}

.bo-trust__text { display: flex; flex-direction: column; }
.bo-trust__title { font-weight: 700; color: var(--bo-ink); }

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

/* --- polecane oferty (Figma 75:304) --------------------------------------- */

.bo-featured__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
}

.bo-featured__inner > .bo-section-head { width: 100%; }

/* --- grupy produktowe (Figma 74:258) -------------------------------------- */

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

.bo-categories__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
}

.bo-categories__inner > .bo-section-head { width: 100%; }

/* --- slot reklamowy (Figma 571:10875) ------------------------------------- */

.bo-ad { background: var(--bo-white); padding-block: var(--bo-space-6); }

/* Tor jedzie w poziomie o 100% na slajd — bez przycięcia sąsiednia kreacja
   wystawała poza kontener. */
.bo-ad__slider { position: relative; overflow: hidden; border-radius: 14px; }
.bo-ad__track { display: flex; transition: transform 350ms ease; }
.bo-ad__slide { flex: 0 0 100%; min-width: 0; }
.bo-ad__slide img { width: 100%; height: auto; border-radius: 14px; }

.bo-ad__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Odstęp liczony od krawędzi celu (24 px), nie od widocznej kropki. */
	gap: 0;
	margin-top: var(--bo-space-3);
}

/*
 * Kropka ma 8 px, ale palec celuje w 24 px. Sam element jest przezroczysty
 * i tylko rysuje kropkę tłem przyciętym do wnętrza obramowania — dzięki temu
 * powiększenie celu nie zmienia wyglądu paska.
 */
.bo-ad__dot {
	box-sizing: content-box;
	width: 8px;
	height: 8px;
	padding: 8px;
	border: 4px solid transparent;
	border-radius: 999px;
	background: var(--bo-stroke);
	background-clip: content-box;
	transition: width var(--bo-transition), background-color var(--bo-transition);
}

.bo-ad__dot[aria-selected="true"] { width: 22px; background: var(--bo-text-soft); background-clip: content-box; }

.bo-ad__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bo-space-3);
	height: 200px;
	padding-inline: var(--bo-space-5);
	background: var(--bo-tint-neutral);
	border: 1px dashed var(--bo-border);
	border-radius: 14px;
	text-align: center;
}

.bo-ad__tag {
	padding: 2px var(--bo-space-2);
	border-radius: 5px;
	background: var(--bo-muted);
	color: var(--bo-white);
	font-size: 0.625rem; /* 10px */
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

.bo-ad__hint {
	font-size: 0.9375rem; /* 15px */
	font-weight: 600;
	line-height: 1.4;
	color: var(--bo-muted);
}

/* --- dla Ciebie (Figma 414:7389) ------------------------------------------ */

.bo-foryou { background: var(--bo-tint-success); padding-block: var(--bo-space-12); }

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

.bo-foryou__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bo-space-5);
	flex-wrap: wrap;
}

.bo-foryou__text { display: flex; flex-direction: column; gap: 6px; }

/* Mały eyebrow „SPERSONALIZOWANE" — 12 px, bez trackingu (sprawdzone w pliku). */
.bo-eyebrow--sm {
	font-size: 0.75rem;
	letter-spacing: 0;
	color: var(--bo-green);
}

.bo-foryou__title { font-size: 1.875rem; /* 30px */ color: var(--bo-ink); }

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

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

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

.bo-foryou__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
	font-size: var(--bo-text-sm);
	font-weight: 700;
	color: var(--bo-green);
	white-space: nowrap;
}

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

/* --- ostatnio przeglądane (Figma 414:7524) -------------------------------- */

.bo-recent { background: var(--bo-white); padding-block: var(--bo-space-12) 56px; }

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

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

.bo-recent__title { font-size: var(--bo-text-xl); color: var(--bo-ink); }
.bo-recent__arrows { display: flex; align-items: center; gap: var(--bo-space-2); }

.bo-recent__track {
	/*
	 * `position: relative` czyni pasek blokiem zawierającym dla podpisów
	 * „Pierwotna cena wynosiła…" (`.screen-reader-text` WooCommerce,
	 * pozycjonowane absolutnie). Bez tego kafelki przewinięte poza pasek
	 * wypuszczały je do okna i zalogowany kupujący z historią oglądania
	 * mógł przesunąć CAŁĄ stronę główną w bok o kilkaset pikseli.
	 */
	position: relative;
	display: flex;
	gap: var(--bo-space-5);
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none; /* jak w rzędach sekcji: przewijają strzałki obok tytułu */
	padding-bottom: var(--bo-space-1);
}

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

.bo-recent__clear button {
	font-size: var(--bo-text-sm);
	font-weight: 500;
	color: var(--bo-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bo-recent__clear button:hover { color: var(--bo-ink); }

/* --- kafle wyróżnione (Figma 106:689) ------------------------------------- */

.bo-highlights { background: var(--bo-white); padding-block: 44px; }

.bo-highlights__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bo-space-6);
	align-items: stretch;
}

@media (min-width: 900px) {
	.bo-highlights__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bo-highlight {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: var(--bo-space-10);
	border-radius: 24px;
}

.bo-highlight--eko { background: var(--bo-green-contrast); color: var(--bo-white); }

.bo-highlight--seller {
	background: var(--bo-white);
	border: 2px solid var(--bo-stroke);
}

.bo-highlight__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	border-radius: 20px;
	font-size: var(--bo-text-base);
	font-weight: 700;
	line-height: var(--bo-leading-body);
	text-transform: uppercase;
}

.bo-highlight--eko .bo-highlight__badge {
	background: var(--bo-white);
	color: var(--bo-green-contrast);
}

.bo-highlight--seller .bo-highlight__badge {
	background: var(--bo-green-50);
	color: var(--bo-green-contrast);
}

.bo-highlight__title { font-size: 1.75rem; /* 28px */ }
.bo-highlight--eko .bo-highlight__title { color: var(--bo-white); }
.bo-highlight--seller .bo-highlight__title { color: var(--bo-ink); }

.bo-highlight__lead { font-weight: 400; }
.bo-highlight--eko .bo-highlight__lead { color: var(--bo-white); }
.bo-highlight--seller .bo-highlight__lead { color: var(--bo-text-soft); }

.bo-highlight__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: auto;
	padding-top: var(--bo-space-2);
}

/* Grafika kategorii zamiast ikony — wypełnia kafel, zachowując proporcje. */

/* --- przewijane rzędy sekcji (WF-63, [D-124]) ------------------------------
   Kategorie, polecane i oferty dla Ciebie to rzędy przewijane w poziomie,
   nie siatki. Reguły mają wyższą szczegółowość niż `.bo-card-grid`
   i `.bo-cat-grid` (components.css), które ustawiają siatkę. */

.bo-section-head__tools {
	display: flex;
	align-items: center;
	gap: var(--bo-space-4);
	flex-wrap: wrap;
}

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

.bo-featured__inner,
.bo-categories__inner,
.bo-foryou__inner { min-width: 0; }

.bo-card-grid.bo-hscroll,
.bo-cat-grid.bo-hscroll {
	display: flex;
	/* Blok zawierający dla elementów pozycjonowanych w kartach (serduszko,
	   szybki podgląd) — bez tego wystawały poza rząd i rozpychały stronę. */
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	gap: var(--bo-space-5);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	/* Suwak ukryty: rząd przewija się strzałkami przy nagłówku, palcem,
	   kółkiem/gładzikiem i klawiaturą, a ucięty ostatni kafel zdradza ciąg dalszy. */
	scrollbar-width: none;
	/* `overflow-x: auto` przycina też w pionie: bez odstępu u góry kafel
	   uniesiony przy najechaniu (`.bo-cat:hover`) i jego cień były ucinane.
	   Ujemny margines zachowuje dotychczasowe położenie rzędu. */
	padding-top: var(--bo-space-2);
	margin-top: calc(-1 * var(--bo-space-2));
	padding-bottom: var(--bo-space-2);
}

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

.bo-card-grid.bo-hscroll > * {
	flex: 0 0 clamp(220px, 23%, 290px);
	min-width: 0;
	scroll-snap-align: start;
}

.bo-cat-grid.bo-hscroll > * {
	flex: 0 0 clamp(150px, 15%, 200px);
	min-width: 0;
	scroll-snap-align: start;
}

.bo-hscroll:focus-visible {
	outline: 2px solid var(--bo-green-contrast);
	outline-offset: 4px;
}

@media (max-width: 599px) {
	.bo-card-grid.bo-hscroll > * { flex-basis: 72%; }
	.bo-cat-grid.bo-hscroll > * { flex-basis: 42%; }
}

/* Oznaczenie treści płatnej: slot reklamowy i sekcja z ofertami promowanymi. */

.bo-ad__tag--slot {
	position: absolute;
	top: var(--bo-space-2);
	left: var(--bo-space-2);
	z-index: 2;
}

/* Na telefonie i tablecie kreacja jest niska (80–160 px) i plakietka
   zasłaniała jej tekst — stoi więc nad kreacją, nie na niej. */
@media (max-width: 1023px) {
	.bo-ad__tag--slot { position: static; display: inline-block; margin-bottom: var(--bo-space-2); }
}

.bo-paid-note {
	display: flex;
	align-items: center;
	gap: var(--bo-space-2);
	margin: 6px 0 0;
	font-size: var(--bo-text-sm);
	color: var(--bo-muted);
}