/**
 * Pesto — strona główna: warianty układu i nowe sekcje Pesto Builder (hero ×4, kafle kategorii ×3, kolumny produktów ×3,
 * baner promocyjny, „Dlaczego my”, „Płatności i dostawa”, „Własna treść”) oraz wygląd nowej strony głównej 0.8.15
 * (skala typografii, rytm odstępów, dwa pasma tonalne z kolorów marki, kafle kategorii, karuzele ze wskaźnikiem postępu, hero, wstęga newslettera).
 *
 * Ładowany tylko na stronie głównej, PO base.css (dziedziczy tokeny marki --pesto-*). Domyślne warianty (hero „tekst i obraz”,
 * kategorie „karty”, 4 kolumny produktów) NIE mają tu żadnych reguł — wyglądają dokładnie jak przed Builderem.
 * Zasady: zero kolorów na sztywno poza blokiem tokenów, zero overflow-x na html/body (psuje sticky), zero szerokości liczonych z okna przeglądarki.
 * Rebranding = zmiana zmiennych w bloku tokenów poniżej albo --pesto-* w :root.
 *
 * @package pestotheme
 */

/* ========================== TOKENY ========================== */
.pesto-front {
	/* Hero „obraz w tle”: tekst jasny + stała warstwa przyciemniająca (kontrast względem nieznanego zdjęcia gwarantuje ona). */
	--pesto-hero-ink: #fff;
	--pesto-hero-scrim: linear-gradient(180deg, rgb(18 19 22 / 0.6), rgb(18 19 22 / 0.74));
	--pesto-hero-overlay-min: clamp(320px, 52vw, 520px);
	/* Baner promocyjny: tło (z Customizera) i kolor tekstu (liczony automatycznie z tła). */
	--pesto-promo-fallback-bg: var(--pesto-ink);
	--pesto-promo-fallback-ink: #fff;
	--pesto-promo-pad: clamp(1.6rem, 4vw, 3rem);
	/* „Dlaczego my”: minimalna szerokość karty punktu i rozmiar ikony. */
	--pesto-whyus-min: 220px;
	--pesto-whyus-ic: 52px;
	/* Efekty „premium” (wszystkie domyślnie wyłączone): czas i krzywa ruchu, siła uniesienia i powiększenia, wysokości hero. */
	--pesto-fx-dur: 0.45s;
	--pesto-fx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--pesto-fx-rise-y: 22px;
	--pesto-fx-lift-y: -8px;
	--pesto-fx-zoom: 1.07;
	--pesto-fx-lift-shadow: 0 18px 38px rgb(18 19 22 / 0.14);
	--pesto-fx-kenburns-dur: 24s;
	--pesto-fx-kenburns-scale: 1.08;
	--pesto-hero-h-tall: clamp(520px, 82vh, 860px);
	--pesto-density-compact: 0.62;
	--pesto-density-airy: 1.5;
	--pesto-divider-color: var(--pesto-line);
	--pesto-divider-wave-h: 14px;
	--pesto-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 7 Q12 -1 24 7 T48 7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
	--pesto-ticker-dur: 34s;
	--pesto-ticker-gap: 2.6rem;
	--pesto-trust-card-pad: 1.05rem 1.2rem;
	--pesto-trust-solid-size: 44px;

	/* ----- Nowa strona główna (0.8.15): skala typografii, rytm, pasma, karuzele. Dopracowanie wyglądu = zmiana tych tokenów (jedno miejsce). ----- */
	/* Skala (SPEC §3): display = hero i nagłówek pasma, h2 = nagłówki sekcji, lead = zdanie pod nagłówkiem. */
	--pesto-fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
	--pesto-fs-h2: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem);
	--pesto-fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	/* Odstęp MIĘDZY sekcjami (połowa na górze, połowa na dole sekcji). Uwaga: nazwa inna niż w SPEC, bo --pesto-home-gap jest już zajęte
	   w base.css (odstęp między kaflami kategorii). */
	--pesto-home-section-gap: clamp(2.25rem, 1.2rem + 4.8vw, 5.25rem);
	/* Pasma tonalne (pełna szerokość, maks. 2 na stronę) WYPROWADZONE Z KOLORÓW MARKI, więc pasują do każdego sklepu (złoto, koral, granat…):
	   tint-1 = akcent sklepu, tint-2 = kolor dodatkowy (--pesto-coral), tint-3 = neutralny szary; każdy rozjaśniony do pastelu mieszaniem z bielą
	   (--pesto-tint-mix = „moc” koloru). Tekst na nich: --pesto-ink i --pesto-body (>= 4,5:1; kontrast mierzy test przeglądarkowy HB-shots).
	   Starsze przeglądarki bez color-mix() dostają stałe pastele z bloku @supports tuż pod tokenami. */
	--pesto-tint-white: #fff;
	--pesto-tint-mix: 20%;
	--pesto-tint-1: color-mix(in srgb, var(--pesto-accent) var(--pesto-tint-mix), var(--pesto-tint-white));
	--pesto-tint-2: color-mix(in srgb, var(--pesto-coral) var(--pesto-tint-mix), var(--pesto-tint-white));
	--pesto-tint-3: color-mix(in srgb, var(--pesto-ink) 9%, var(--pesto-tint-white));
	/* Przesunięta kolorowa ramka za zdjęciem „O nas” i hybrydy (pełny kolor marki z przezroczystością, sama dekoracja). */
	--pesto-frame-offset: 0.9rem;
	--pesto-frame-story: color-mix(in srgb, var(--pesto-accent) 34%, transparent);
	--pesto-frame-hybrid: color-mix(in srgb, var(--pesto-coral) 30%, transparent);
	--pesto-band-eyebrow: color-mix(in srgb, var(--pesto-accent-on-light) 75%, var(--pesto-ink));
	--pesto-radius-card: 16px;
	/* Zdjęcia dużych bloków (hero, „O nas”, hybryda) mają większe zaokrąglenie niż małe karty. */
	--pesto-radius-photo: 24px;
	/* Poświata za hero (dwa miękkie, kolorowe plamy z kolorów marki — jedyna dekoracja tła, bez obrazków). */
	--pesto-hero-glow-a: color-mix(in srgb, var(--pesto-accent) 15%, transparent);
	--pesto-hero-glow-b: color-mix(in srgb, var(--pesto-accent) 7%, transparent);
	--pesto-hero-blob-from: color-mix(in srgb, var(--pesto-accent) 55%, var(--pesto-tint-white));
	/* Krótki pasek akcentu pod nagłówkami sekcji. */
	--pesto-head-bar-w: 44px;
	--pesto-head-bar-h: 4px;
	/* Karuzele ze scroll-snap (telefon/tablet): ile kart widać naraz (2,3 = dwie pełne i „zajawka” trzeciej) i odstęp między nimi. */
	--pesto-snap-cards: 2.3;
	--pesto-snap-gap: 0.75rem;
	--pesto-snap-btn: 44px;
	--pesto-snap-btn-top: 34%;
	/* Wskaźnik postępu karuzeli: wysokość paska, odstęp od listy. */
	--pesto-snap-bar-h: 4px;
	--pesto-snap-bar-room: calc(var(--pesto-snap-bar-h) + 0.5rem);
	/* Hero na telefonie: docelowa wysokość <= 520 px (kolaż 2:1; własne zdjęcie 16:9). */
	--pesto-hero-mobile-media: 2 / 1;
	--pesto-hero-mobile-photo: 16 / 9;
	/* Kafle kategorii (karty): proporcje zdjęcia i wysunięcie etykiety na zdjęcie. */
	--pesto-cat-ratio: 1 / 1;
	--pesto-cat-ratio-mobile: 4 / 5;
	--pesto-cat-label-lift: 1.3rem;
	--pesto-cat-gap: clamp(0.75rem, 0.4rem + 1.4vw, 1.5rem);
	/* Kolekcje, porady, hybryda. */
	--pesto-collection-ratio: 4 / 5;
	--pesto-advice-ratio: 16 / 10;
	--pesto-hybrid-media-min: 380px;
	--pesto-story-ratio: 4 / 5;
	--pesto-chip-h: 56px;
	--pesto-chip-thumb: 44px;
	/* Wstęga newslettera: kolory komunikatów na ciemnym tle (semantyczne: zielony = sukces, czerwony = błąd) i podpis prawny. */
	--pesto-club-ok: #8ee3ad;
	--pesto-club-err: #ffb4ba;
	--pesto-club-fine: #c9ccd2;
	--pesto-club-input-bg: #fff;
}

/* Zapas dla przeglądarek bez color-mix(): stałe pastele (jak w pierwszej wersji strony). */
@supports not (color: color-mix(in srgb, red 10%, white)) {
	.pesto-front {
		--pesto-tint-1: #fde8da;
		--pesto-tint-2: #e7f1e3;
		--pesto-tint-3: #ececee;
		--pesto-hero-glow-a: transparent;
		--pesto-hero-glow-b: transparent;
	}
}

/* ========================== HERO ========================== */

/* Obraz i tekst: kolumny zamienione miejscami (na telefonie jak zawsze — tekst nad obrazem). */
@media (min-width: 981px) {
	.pesto-hero--rev .pesto-hero__grid {
		grid-template-columns: 0.95fr 1.05fr;
	}

	.pesto-hero--rev .pesto-hero__copy {
		order: 2;
	}
}

/* Wyśrodkowany: tekst na środku, obraz pod spodem. */
.pesto-hero--center .pesto-hero__grid {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}

.pesto-hero--center .pesto-hero__copy p {
	margin-inline: auto;
}

.pesto-hero--center .pesto-hero__cta {
	justify-content: center;
}

.pesto-hero--center .pesto-hero__media {
	max-width: min(100%, 640px);
	aspect-ratio: 16 / 9;
}

/* Obraz w tle: zdjęcie na całą szerokość pod tekstem, z warstwą przyciemniającą. Wymaga własnego obrazu (PHP inaczej wraca do układu domyślnego). */
.pesto-hero--overlay {
	position: relative;
	isolation: isolate;
	color: var(--pesto-hero-ink);
}

.pesto-hero--overlay .pesto-hero__grid {
	grid-template-columns: 1fr;
	align-content: center;
	min-height: var(--pesto-hero-overlay-min);
}

.pesto-hero--overlay .pesto-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none;
	aspect-ratio: auto;
	margin: 0;
}

.pesto-hero--overlay .pesto-blob {
	display: none;
}

.pesto-hero--overlay .pesto-hero__photo {
	inset: 0;
	border-radius: 0;
	box-shadow: none;
}

.pesto-hero--overlay .pesto-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--pesto-hero-scrim);
}

.pesto-hero--overlay h1,
.pesto-hero--overlay .pesto-hero__copy p,
.pesto-hero--overlay .pesto-eyebrow {
	color: var(--pesto-hero-ink);
}

.pesto-hero--overlay .pesto-btn--ghost {
	color: var(--pesto-hero-ink);
	border-color: currentcolor;
}

.pesto-hero--overlay .pesto-btn--ghost:hover {
	border-color: var(--pesto-hero-ink);
}

/* ========================== KATEGORIE ========================== */

/* Koła: okrągłe zdjęcia z podpisem pod spodem, bez ramki karty. */
.pesto-cats--circles .pesto-cat {
	align-items: center;
	gap: 0.55rem;
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.pesto-cats--circles .pesto-cat:hover {
	box-shadow: none;
}

.pesto-cats--circles .pesto-cat__img {
	width: 100%;
	aspect-ratio: 1;
	border: 1px solid var(--pesto-line);
	border-radius: 50%;
}

.pesto-cats--circles .pesto-cat__name {
	padding: 0;
}

/* Pigułki (chipy): okrągła miniatura 44 px + nazwa w pigułce 56 px. Na telefonie poziomy pas ze snap wewnątrz kontenera (nie strony),
   z „zajawką” kolejnego chipa. Kategoria bez zdjęcia = sama nazwa (bez pustego kółka z ikoną). */
.pesto-cats--pills {
	gap: 0.6rem;
}

.pesto-cats--pills .pesto-cat {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	gap: 0.7rem;
	min-height: var(--pesto-chip-h);
	padding: 6px 1.3rem 6px 6px;
	border-radius: var(--pesto-radius-pill);
}

.pesto-cats--pills .pesto-cat--noimg {
	padding-inline-start: 1.3rem;
}

.pesto-cats--pills .pesto-cat__img {
	flex: none;
	width: var(--pesto-chip-thumb);
	height: var(--pesto-chip-thumb);
	aspect-ratio: 1;
	border-radius: 50%;
}

.pesto-cats--pills .pesto-cat__name {
	flex: none;
	padding: 0;
	font-size: 0.95rem;
	white-space: nowrap;
}

@media (max-width: 760px) {
	.pesto-cats--pills {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		margin-inline: calc(var(--pesto-gap, 1rem) * -1);
		padding: 0.25rem var(--pesto-gap, 1rem) 0.6rem;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--pesto-gap, 1rem);
		scrollbar-width: none;
	}

	.pesto-cats--pills::-webkit-scrollbar {
		display: none;
	}

	.pesto-cats--pills .pesto-cat {
		scroll-snap-align: start;
	}
}

/* ========================== PRODUKTY: KOLUMNY ========================== */
.pesto-home-cols--3 {
	--pesto-shop-cols: 3;
}

.pesto-home-cols--5 {
	--pesto-shop-cols: 5;
}

/* ========================== NOWA STRONA GŁÓWNA (0.8.15) ==========================
 * Skala, rytm i bloki nowych sekcji. Wszystko liczone z tokenów na górze pliku. Zasady: bez poziomego scrolla STRONY (przewijają się tylko
 * kontenery z listami), cele dotykowe >= 44 px, ruch tylko przy prefers-reduced-motion: no-preference, treść widoczna bez JS. */

/* ---------- Skala typografii i rytm sekcji ---------- */
.pesto-front .pesto-section__head {
	margin-bottom: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
}

.pesto-front .pesto-section__head h2 {
	font-size: var(--pesto-fs-h2);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Krótki pasek akcentu pod nagłówkiem sekcji: kolor marki, sama dekoracja (nie niesie znaczenia). */
.pesto-front .pesto-section__head h2::after {
	content: "";
	display: block;
	width: var(--pesto-head-bar-w);
	height: var(--pesto-head-bar-h);
	margin: 0.75rem auto 0;
	background: var(--pesto-accent);
	border-radius: var(--pesto-head-bar-h);
}

/* Rytm: odstęp między sekcjami to --pesto-home-section-gap (połowa jako padding góra i dół każdej sekcji); „zwarte” sekcje (Nowości, Promocje)
   mają ten sam oddech, bo oddzielają je bloki treści. */
.pesto-front .pesto-section,
.pesto-front .pesto-section--compact {
	padding-block: calc(var(--pesto-home-section-gap) / 2);
}

.pesto-front .pesto-section--compact + .pesto-section--compact {
	padding-top: 0;
}

.pesto-front .pesto-hero h1 {
	font-size: var(--pesto-fs-display);
	line-height: 1.04;
	letter-spacing: -0.025em;
}

.pesto-front .pesto-hero p {
	font-size: var(--pesto-fs-lead);
}

.pesto-front .pesto-hero:not(.pesto-hero--overlay) p {
	color: var(--pesto-body);
}

/* Pasmo tonalne: pełna szerokość (sekcja jest bezpośrednim dzieckiem <main>), wewnątrz podwójny oddech. */
.pesto-band--tint-1 {
	background: var(--pesto-tint-1);
}

.pesto-band--tint-2 {
	background: var(--pesto-tint-2);
}

.pesto-band--tint-3 {
	background: var(--pesto-tint-3);
}

.pesto-front .pesto-story__grid {
	padding-block: var(--pesto-home-section-gap);
	gap: clamp(1.5rem, 0.5rem + 4vw, 4.5rem);
}

.pesto-front .pesto-story__grid h2 {
	font-size: var(--pesto-fs-display);
	line-height: 1.04;
	letter-spacing: -0.025em;
}

.pesto-front .pesto-story__grid p {
	max-width: 56ch;
	font-size: var(--pesto-fs-lead);
	color: var(--pesto-body);
}

.pesto-front .pesto-story__media {
	aspect-ratio: var(--pesto-story-ratio);
	border-radius: var(--pesto-radius-photo);
	box-shadow: var(--pesto-frame-offset) var(--pesto-frame-offset) 0 var(--pesto-frame-story), var(--pesto-shadow-sm);
}

/* Na pasmach drugorzędny tekst nie może być szary (kontrast na pastelu < 4,5:1) — ciemny tekst treści. */
.pesto-band--tint-1 .pesto-story__grid p,
.pesto-band--tint-2 .pesto-story__grid p,
.pesto-band--tint-3 .pesto-story__grid p,
.pesto-band--tint-1 .pesto-hybrid__body p,
.pesto-band--tint-2 .pesto-hybrid__body p,
.pesto-band--tint-3 .pesto-hybrid__body p {
	color: var(--pesto-ink);
}

/* Nadtytuł na pasmie: nieco ciemniejszy niż na jasnym tle strony (pastel obniża kontrast koloru marki). */
.pesto-band .pesto-eyebrow {
	color: var(--pesto-band-eyebrow);
}

/* Telefon: zdjęcie „O nas” w proporcji 4:3 zamiast wysokiego 4:5 (strona nie rośnie o ekran). Tablet (561–900 px): zostają dwie kolumny, nagłówek w skali h2. */
@media (max-width: 900px) {
	.pesto-front .pesto-story__media {
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 561px) and (max-width: 900px) {
	.pesto-front .pesto-story__grid:not(.pesto-story__grid--solo) {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: 2rem;
	}

	.pesto-front .pesto-story__media {
		aspect-ratio: var(--pesto-story-ratio);
	}

	.pesto-front .pesto-story__grid h2 {
		font-size: var(--pesto-fs-h2);
	}
}

@media (max-width: 560px) {
	.pesto-front {
		--pesto-frame-offset: 0.55rem;
	}
}

/* ---------- Hero ---------- */

/* Poświata za tekstem i zdjęciem: dwie miękkie plamy z kolorów marki (hero z tłem-zdjęciem ma własne tło). */
.pesto-front .pesto-hero:not(.pesto-hero--overlay) {
	background:
		radial-gradient(ellipse 62% 95% at 94% 4%, var(--pesto-hero-glow-a), transparent 72%),
		radial-gradient(ellipse 46% 70% at 2% 104%, var(--pesto-hero-glow-b), transparent 72%);
}

/* Plama za zdjęciem: z jasnego do pełnego koloru AKCENTU (dawniej z --pesto-leaf, który u sklepu o innym kolorze marki dawał brudny brąz). */
.pesto-front .pesto-blob {
	background: radial-gradient(120% 120% at 30% 20%, var(--pesto-hero-blob-from), var(--pesto-accent));
}

/* Zdjęcie hero: kadr (punkt ostrości) z jednego tokenu; ramka większa niż inset z base.css, żeby zdjęcie z życia nie było „znaczkiem”. */
.pesto-front .pesto-hero__photo img {
	object-position: var(--pesto-hero-focus, 50% 45%);
}

/* Kadr wybrany w ustawieniach hero (klasy z hero.php): które miejsce zdjęcia zostaje, gdy jego brzegi są ucinane. */
.pesto-hero--focus-top {
	--pesto-hero-focus: 50% 12%;
}

.pesto-hero--focus-bottom {
	--pesto-hero-focus: 50% 88%;
}

.pesto-hero--focus-left {
	--pesto-hero-focus: 12% 45%;
}

.pesto-hero--focus-right {
	--pesto-hero-focus: 88% 45%;
}

@media (min-width: 981px) {
	.pesto-front .pesto-hero--photo:not(.pesto-hero--overlay):not(.pesto-hero--center) .pesto-hero__media {
		max-width: 540px;
		aspect-ratio: 5 / 4;
	}

	.pesto-front .pesto-hero--photo:not(.pesto-hero--overlay) .pesto-hero__photo {
		inset: 5%;
		border-radius: var(--pesto-radius-photo);
	}
}

/* Telefon i tablet: tekst, potem obraz. Docelowa wysokość całego hero <= 520 px. */
@media (max-width: 980px) {
	.pesto-front .pesto-hero:not(.pesto-hero--overlay) .pesto-hero__grid {
		gap: 1rem;
		padding-block: 1.25rem 1.5rem;
	}

	.pesto-front .pesto-hero:not(.pesto-hero--overlay) .pesto-hero__media {
		aspect-ratio: var(--pesto-hero-mobile-media);
		max-width: 520px;
	}

	/* Własne zdjęcie: cały kadr 16:9 na całą szerokość kolumny, bez plamy marki pod spodem. */
	.pesto-front .pesto-hero--photo:not(.pesto-hero--overlay) .pesto-hero__media {
		aspect-ratio: var(--pesto-hero-mobile-photo);
		max-width: none;
	}

	.pesto-front .pesto-hero--photo .pesto-blob {
		display: none;
	}

	.pesto-front .pesto-hero--photo:not(.pesto-hero--overlay) .pesto-hero__photo {
		inset: 0;
		border-radius: var(--pesto-radius-photo);
	}

	.pesto-front .pesto-hero p {
		max-width: 44ch;
		margin: 0.7rem 0 1.1rem;
	}

	.pesto-front .pesto-hero h1 + .pesto-hero__cta {
		margin-top: 1rem;
	}

	.pesto-front .pesto-hero__collage {
		inset: 0;
	}
}

/* Duży telefon i tablet (600–980 px): tekst z lewej, obraz z prawej — hero nie rośnie do 700 px wysokości jak przy układzie jednokolumnowym. */
@media (min-width: 600px) and (max-width: 980px) {
	.pesto-front .pesto-hero:not(.pesto-hero--overlay):not(.pesto-hero--rev):not(.pesto-hero--center) .pesto-hero__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: center;
		gap: 1.5rem;
		padding-block: 1.5rem 1.75rem;
	}

	.pesto-front .pesto-hero:not(.pesto-hero--overlay):not(.pesto-hero--rev):not(.pesto-hero--center) .pesto-hero__media {
		aspect-ratio: 1 / 1;
		max-width: 380px;
	}

	.pesto-front .pesto-hero--photo:not(.pesto-hero--overlay):not(.pesto-hero--rev):not(.pesto-hero--center) .pesto-hero__media {
		aspect-ratio: 5 / 4;
		max-width: none;
	}

	.pesto-front .pesto-hero:not(.pesto-hero--overlay):not(.pesto-hero--rev):not(.pesto-hero--center) h1 {
		font-size: clamp(2rem, 1.1rem + 3vw, 2.9rem);
	}
}

@media (max-width: 560px) {
	.pesto-front .pesto-hero:not(.pesto-hero--overlay) .pesto-hero__grid {
		gap: 0.9rem;
		padding-block: 1rem 1.25rem;
	}

	.pesto-front .pesto-hero .pesto-eyebrow {
		display: block;
		margin-bottom: 0.35rem;
	}

	.pesto-front .pesto-hero h1 {
		margin-bottom: 0;
	}

	.pesto-front .pesto-hero__cta {
		gap: 0.6rem;
	}

	.pesto-front .pesto-hero__cta .pesto-btn {
		flex: 1 1 auto;
		justify-content: center;
		min-height: 46px;
		padding-inline: 1.1rem;
	}
}

/* ---------- Pas zaufania: cienka linia ---------- */
/* Siatka o równych kolumnach (4 na komputerze, 2 x 2 na tablecie i telefonie): kafle nie zawijają się nierówno po załadowaniu fontu (CLS) i są w każdym
   języku symetryczne. Każdy kafel: ikona + tytuł nad podpisem. */
.pesto-trust--line {
	background: var(--pesto-base);
	border-block: 1px solid var(--pesto-line);
}

.pesto-trust--line .pesto-trust__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 0.75rem 1.25rem;
	padding-block: 0.9rem;
}

@media (min-width: 981px) {
	.pesto-trust--line .pesto-trust__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
}

.pesto-trust--line .pesto-trust__item {
	justify-content: center;
	gap: 0.65rem;
}

/* Ikony jednej rodziny: kontur 1,8 px, ten sam rozmiar i kolor marki (na jasnym tle), bez kółek. */
.pesto-trust--line .pesto-trust__item .pesto-trust__ic {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	color: var(--pesto-accent-on-light);
}

.pesto-trust--line .pesto-trust__ic svg {
	width: 24px;
	height: 24px;
}

.pesto-trust--line .pesto-trust__item > div {
	display: block;
}

.pesto-trust--line .pesto-trust__item strong,
.pesto-trust--line .pesto-trust__item span {
	display: block;
	line-height: 1.25;
}

.pesto-trust--line .pesto-trust__item strong {
	margin: 0;
	font-size: 0.92rem;
}

.pesto-trust--line .pesto-trust__item span {
	font-size: 0.82rem;
}

/* Telefon: ten sam układ 2 x 2, zwarty i wyrównany do lewej (widać wszystkie cztery fakty bez przewijania). */
@media (max-width: 560px) {
	.pesto-trust--line .pesto-trust__grid {
		gap: 0.7rem 0.9rem;
		padding-block: 0.85rem;
	}

	.pesto-trust--line .pesto-trust__item {
		justify-content: flex-start;
		gap: 0.5rem;
	}

	.pesto-trust--line .pesto-trust__ic svg {
		width: 20px;
		height: 20px;
	}

	.pesto-trust--line .pesto-trust__item strong {
		font-size: 0.84rem;
	}

	.pesto-trust--line .pesto-trust__item span {
		font-size: 0.76rem;
	}
}

/* ---------- Kategorie: kafle ze zdjęciami (wariant „karty”) ---------- */
/* Kafel = zdjęcie z zaokrągleniem i miękkim cieniem + biała etykieta wsunięta na dolną krawędź zdjęcia. Odstęp między kaflami to --pesto-cat-gap;
   szerokość kafla liczymy tu od niego (a nie od --pesto-home-gap z base.css), więc rząd nigdy nie zawija się za wcześnie. */
.pesto-front .pesto-cats--cards {
	gap: var(--pesto-cat-gap);
}

.pesto-front .pesto-cats--cards .pesto-cat {
	flex-basis: calc((100% - (var(--pesto-home-cats-cols) - 1) * var(--pesto-cat-gap)) / var(--pesto-home-cats-cols));
}

.pesto-front .pesto-cats--cards .pesto-cat {
	gap: 0;
	overflow: visible;
	background: none;
	border: 0;
	border-radius: 0;
}

.pesto-front .pesto-cats--cards .pesto-cat:hover {
	border-color: transparent;
	box-shadow: none;
	text-decoration: none;
}

/* Fokus klawiatury obejmuje cały kafel (zdjęcie + etykieta) z zaokrągleniem jak zdjęcie. */
.pesto-front .pesto-cats--cards .pesto-cat:focus-visible {
	border-radius: var(--pesto-radius-card);
}

.pesto-front .pesto-cats--cards .pesto-cat__img {
	aspect-ratio: var(--pesto-cat-ratio);
	border-radius: var(--pesto-radius-card);
	box-shadow: var(--pesto-shadow-sm);
}

.pesto-front .pesto-cats--cards .pesto-cat__name {
	position: relative;
	z-index: 1;
	margin: calc(var(--pesto-cat-label-lift) * -1) 0.6rem 0;
	padding: 0.6rem 0.7rem;
	font-size: 1rem;
	background: var(--pesto-base);
	border-radius: var(--pesto-radius-sm);
	box-shadow: var(--pesto-shadow-sm);
}

.pesto-section__foot {
	display: flex;
	justify-content: center;
	margin-top: 1.6rem;
}

/* Telefon: siatka 2 x 3 (maks. 6 kafli widocznych); pozostałe są pod przyciskiem „Zobacz wszystkie kategorie”. */
@media (max-width: 560px) {
	.pesto-front .pesto-cats--cards .pesto-cat:nth-child(n + 7) {
		display: none;
	}

	.pesto-front .pesto-cats--cards {
		--pesto-cat-gap: 0.75rem;
	}

	.pesto-front .pesto-cats--cards .pesto-cat__img {
		aspect-ratio: var(--pesto-cat-ratio-mobile);
	}

	.pesto-front .pesto-cats--cards .pesto-cat__name {
		margin-inline: 0.4rem;
		padding: 0.5rem 0.4rem;
		font-size: 0.93rem;
	}
}

/* Ruch na kaflach (tylko myszka, tylko gdy ruch nie jest wyłączony): zdjęcie lekko się przybliża. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pesto-front .pesto-cats--cards .pesto-cat__photo {
		transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.pesto-front .pesto-cats--cards .pesto-cat:hover .pesto-cat__photo {
		transform: scale(1.06);
	}
}

/* ---------- Karuzele ze scroll-snap (produkty, kolekcje, porady) ---------- */
.pesto-snap-host {
	position: relative;
}

.pesto-snap__btn {
	position: absolute;
	top: var(--pesto-snap-btn-top);
	z-index: 2;
	display: grid;
	place-items: center;
	width: var(--pesto-snap-btn);
	height: var(--pesto-snap-btn);
	padding: 0;
	color: var(--pesto-ink);
	cursor: pointer;
	background: var(--pesto-base);
	border: 1px solid var(--pesto-line);
	border-radius: 50%;
	box-shadow: var(--pesto-shadow-sm);
	transform: translateY(-50%);
}

.pesto-snap__btn:hover {
	color: var(--pesto-base);
	background: var(--pesto-ink);
	border-color: var(--pesto-ink);
}

.pesto-snap__btn[hidden] {
	display: none;
}

.pesto-snap__btn--prev {
	inset-inline-start: 0.3rem;
}

.pesto-snap__btn--next {
	inset-inline-end: 0.3rem;
}

.pesto-snap__btn:focus-visible,
.pesto-tabs__tab:focus-visible {
	outline: 3px solid var(--pesto-focus, var(--pesto-ink));
	outline-offset: 2px;
}

/* Wskaźnik postępu pod listą: cienki pasek z suwakiem (długość i położenie ustawia skrypt zmiennymi --pesto-snap-thumb/-pos). */
.pesto-snap__bar {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	width: min(100%, 14rem);
	height: var(--pesto-snap-bar-h);
	margin-inline: auto;
	overflow: hidden;
	background: var(--pesto-line);
	border-radius: var(--pesto-snap-bar-h);
}

.pesto-snap__bar[hidden] {
	display: none;
}

/* Miejsce na wskaźnik jest zarezerwowane w CSS (a nie dokładane przez skrypt), więc jego pojawienie się nie przesuwa strony (CLS). */
@media (max-width: 900px) {
	.pesto-snap-host {
		padding-bottom: var(--pesto-snap-bar-room);
	}
}

@media (min-width: 901px) {
	.pesto-front [data-pesto-section="products"] .pesto-snap-host {
		padding-bottom: var(--pesto-snap-bar-room);
	}
}

.pesto-snap__bar > span {
	display: block;
	width: var(--pesto-snap-thumb, 30%);
	height: 100%;
	margin-inline-start: calc((100% - var(--pesto-snap-thumb, 30%)) * var(--pesto-snap-pos, 0));
	background: var(--pesto-ink);
	border-radius: inherit;
}

/* Karta produktu w liście: ZAWSZE równa wysokość i przycisk na dole karty (cena nad nim). Tylko układ kontenera — wygląd karty bez zmian.
   Link z miniaturą, nazwą i ceną rośnie, cena dosuwa się do dołu linku, a przycisk (margines nad sobą jak dotąd) leży pod nim. */
.pesto-front .pesto-snap-host ul.products[data-pesto-snap] li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

@media (max-width: 900px) {
	/* W wąskich kartach napis przycisku bywa w jednej albo w dwóch liniach — przyciski mają tę samą wysokość i napis na środku. */
	.pesto-front .pesto-snap-host ul.products[data-pesto-snap] li.product > a.button,
	.pesto-front .pesto-snap-host ul.products[data-pesto-snap] li.product > a.added_to_cart {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2.9rem;
		line-height: 1.2;
	}

	/* Lista produktów jako jeden przewijany rząd: karta = (szerokość - odstępy) / liczba widocznych kart; zajawka kolejnej karty zachęca do przesunięcia. */
	.pesto-front .pesto-snap-host ul.products[data-pesto-snap] {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - (var(--pesto-snap-cards) - 1) * var(--pesto-snap-gap)) / var(--pesto-snap-cards));
		gap: var(--pesto-snap-gap);
		padding: 0.25rem 0 0.3rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.pesto-front .pesto-snap-host ul.products[data-pesto-snap]::-webkit-scrollbar {
		display: none;
	}

	.pesto-front .pesto-snap-host ul.products[data-pesto-snap] li.product {
		scroll-snap-align: start;
	}

	/* Zdjęcia kart w rzędzie: stałe proporcje (zero skoków układu). */
	.pesto-front .pesto-snap-host ul.products[data-pesto-snap] li.product a img {
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}
}

@media (min-width: 561px) and (max-width: 900px) {
	.pesto-front {
		--pesto-snap-cards: 3.3;
	}
}

/* Sekcja z dwoma produktami (np. „Promocje”): dwie równe karty na całą szerokość zamiast dwóch i pustego miejsca obok. */
@media (max-width: 560px) {
	.pesto-front .pesto-section--n2 {
		--pesto-snap-cards: 2;
	}
}

/* Komputer: główna lista produktów („Bestsellery”) to jeden rząd z przyciskami zamiast dwóch pięter siatki — strona nie jest „za bardzo produktowa”.
   Widać tyle kart, ile kolumn (--pesto-shop-cols); reszta po strzałce albo przewinięciu. Bez JS to zwykły przewijany rząd ze scroll-snap.
   Pionowy i boczny zapas wewnątrz listy (z ujemnym marginesem) mieści uniesienie karty i jej cień przy najechaniu — bez ucinania. */
@media (min-width: 901px) {
	.pesto-front [data-pesto-section="products"] .pesto-snap-host ul.products[data-pesto-snap] {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - (var(--pesto-shop-cols, 4) - 1) * var(--pesto-card-gap, 22px)) / var(--pesto-shop-cols, 4));
		max-width: none;
		padding: 0.9rem 1rem 2.6rem;
		margin: -0.9rem -1rem -2.6rem;
		scroll-padding-inline: 1rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
	}

	.pesto-front [data-pesto-section="products"] .pesto-snap-host ul.products[data-pesto-snap] li.product {
		scroll-snap-align: start;
	}

	.pesto-snap__btn--prev {
		inset-inline-start: -1.1rem;
	}

	.pesto-snap__btn--next {
		inset-inline-end: -1.1rem;
	}
}

/* Gdy skrypt dołożył strzałki, pasek przewijania jest zbędny. */
.pesto-snap-host.has-overflow [data-pesto-snap] {
	scrollbar-width: none;
}

.pesto-snap-host.has-overflow [data-pesto-snap]::-webkit-scrollbar {
	display: none;
}

/* ---------- Kolekcje ---------- */
.pesto-collections {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.1rem;
}

.pesto-collections--n3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pesto-collection {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--pesto-ink);
	text-decoration: none;
	background: var(--pesto-base);
	border: 1px solid var(--pesto-line);
	border-radius: var(--pesto-radius-card);
}

.pesto-collection:hover {
	text-decoration: none;
	border-color: var(--pesto-ink);
}

.pesto-collection__img {
	display: block;
	aspect-ratio: var(--pesto-collection-ratio);
	overflow: hidden;
	background: var(--pesto-surface);
}

.pesto-collection__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pesto-collection__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem 1rem 1rem;
}

.pesto-collection__title {
	font-family: var(--pesto-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
}

.pesto-collection__cta {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--pesto-accent-on-light);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.pesto-collections[data-pesto-snap] {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - (var(--pesto-snap-cards) - 1) * var(--pesto-snap-gap)) / var(--pesto-snap-cards));
		gap: var(--pesto-snap-gap);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.pesto-collections[data-pesto-snap]::-webkit-scrollbar {
		display: none;
	}

	.pesto-collections[data-pesto-snap] .pesto-collection {
		scroll-snap-align: start;
	}

	.pesto-collection__body {
		padding: 0.7rem 0.8rem 0.85rem;
	}

	.pesto-collection__title {
		font-size: 1.02rem;
	}
}

/* ---------- Produkty z zakładkami ---------- */
.pesto-tabs__label {
	margin: 1.6rem 0 0.9rem;
	font-size: 1.3rem;
}

.pesto-tabs__label:first-child {
	margin-top: 0;
}

/* Bez JS zakładek nie ma (nie działałyby): widać panele jeden pod drugim z nagłówkami. Skrypt dodaje is-ready. */
.pesto-tabs:not(.is-ready) .pesto-tabs__list {
	display: none;
}

.pesto-tabs.is-ready .pesto-tabs__label {
	display: none;
}

.pesto-tabs__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 0 1.4rem;
}

.pesto-tabs__tab {
	min-height: 46px;
	padding: 0 1.4rem;
	font: inherit;
	font-weight: 600;
	color: var(--pesto-ink);
	cursor: pointer;
	background: transparent;
	border: 1.5px solid var(--pesto-line);
	border-radius: var(--pesto-radius-pill);
}

.pesto-tabs__tab:hover {
	border-color: var(--pesto-ink);
}

.pesto-tabs__tab[aria-selected="true"] {
	color: var(--pesto-base);
	background: var(--pesto-ink);
	border-color: var(--pesto-ink);
}

@media (max-width: 560px) {
	.pesto-tabs__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-inline: calc(var(--pesto-gap, 1rem) * -1);
		padding-inline: var(--pesto-gap, 1rem);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.pesto-tabs__list::-webkit-scrollbar {
		display: none;
	}

	.pesto-tabs__tab {
		flex: none;
	}
}

/* ---------- Hybryda: zdjęcie + tekst + 3 produkty ---------- */
/* Hybryda leży na pasmie tonalnym (drugie z dwóch na stronie): sekcja jest pełną szerokością, treść w kontenerze wewnątrz z podwójnym oddechem. */
.pesto-front .pesto-band .pesto-hybrid-section {
	padding-block: var(--pesto-home-section-gap);
}

.pesto-hybrid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	grid-template-areas:
		"media body"
		"media products";
	gap: 1.5rem clamp(2rem, 1rem + 3vw, 4rem);
	align-items: start;
}

.pesto-hybrid--rev {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	grid-template-areas:
		"body media"
		"products media";
}

.pesto-hybrid__media {
	position: relative;
	grid-area: media;
	align-self: stretch;
	min-height: var(--pesto-hybrid-media-min);
	overflow: hidden;
	background: var(--pesto-surface);
	border-radius: var(--pesto-radius-photo);
	box-shadow: var(--pesto-frame-offset) var(--pesto-frame-offset) 0 var(--pesto-frame-hybrid), var(--pesto-shadow-sm);
}

.pesto-hybrid__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pesto-hybrid__body {
	grid-area: body;
	align-self: end;
}

.pesto-hybrid__body h2 {
	margin: 0.2rem 0 0.6rem;
	font-size: var(--pesto-fs-h2);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.pesto-hybrid__body p {
	max-width: 52ch;
	margin: 0 0 1.1rem;
	font-size: var(--pesto-fs-lead);
}

.pesto-hybrid__products {
	grid-area: products;
	min-width: 0;
}

.pesto-hybrid__products .woocommerce ul.products {
	--pesto-shop-cols: 3;
}

@media (max-width: 900px) {
	.pesto-hybrid,
	.pesto-hybrid--rev {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"media"
			"body"
			"products";
		gap: 1.2rem;
	}

	.pesto-hybrid__media {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.pesto-hybrid__body {
		align-self: start;
	}
}

/* Tablet (561–900 px): zdjęcie i tekst obok siebie, trzy produkty pod spodem na całą szerokość. */
@media (min-width: 561px) and (max-width: 900px) {
	.pesto-hybrid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		grid-template-areas:
			"media body"
			"products products";
		gap: 1.6rem 2rem;
		align-items: center;
	}

	.pesto-hybrid--rev {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		grid-template-areas:
			"body media"
			"products products";
	}

	.pesto-hybrid__media {
		aspect-ratio: 4 / 5;
	}

	.pesto-hybrid__body {
		align-self: center;
	}
}

/* ---------- Porady ---------- */
.pesto-advice {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.4rem;
}

.pesto-advice__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--pesto-ink);
	text-decoration: none;
	background: var(--pesto-base);
	border: 1px solid var(--pesto-line);
	border-radius: var(--pesto-radius-card);
}

.pesto-advice__card:hover {
	text-decoration: none;
	border-color: var(--pesto-ink);
}

.pesto-advice__img {
	display: block;
	aspect-ratio: var(--pesto-advice-ratio);
	overflow: hidden;
	background: var(--pesto-surface);
}

.pesto-advice__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Czas czytania jako biała plakietka na zdjęciu (zajmuje miejsce zdjęcia, nie osobny wiersz). */
.pesto-advice__meta {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	padding: 0.3rem 0.75rem;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--pesto-ink);
	background: var(--pesto-base);
	border-radius: var(--pesto-radius-pill);
	box-shadow: var(--pesto-shadow-sm);
}

.pesto-advice__title {
	flex: 1;
	padding: 1rem 1.2rem 1.3rem;
	font-family: var(--pesto-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

.pesto-advice__card:hover .pesto-advice__title {
	color: var(--pesto-accent-on-light);
}

@media (max-width: 900px) {
	.pesto-advice[data-pesto-snap] {
		--pesto-snap-cards: 1.2;

		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - (var(--pesto-snap-cards) - 1) * var(--pesto-snap-gap)) / var(--pesto-snap-cards));
		gap: var(--pesto-snap-gap);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.pesto-advice[data-pesto-snap]::-webkit-scrollbar {
		display: none;
	}

	.pesto-advice[data-pesto-snap] .pesto-advice__card {
		scroll-snap-align: start;
	}
}

@media (min-width: 561px) and (max-width: 900px) {
	.pesto-advice[data-pesto-snap] {
		--pesto-snap-cards: 2.2;
	}
}

/* ---------- Wstęga newslettera („Klub”): ciemna karta z kolorowymi plamami i dużym formularzem ---------- */
.pesto-front .pesto-club {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 0.5rem + 3.5vw, 3.5rem);
	padding: clamp(1.75rem, 1rem + 3.5vw, 3.5rem);
	border-radius: var(--pesto-radius-photo);
}

/* Druga plama (kolor dodatkowy marki) w dolnym rogu; pierwsza (akcent) jest w base.css. Obie pod treścią (isolation + z-index). */
.pesto-front .pesto-club::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-end: -5.5rem;
	inset-inline-start: -4rem;
	width: 14rem;
	height: 14rem;
	background: var(--pesto-coral);
	border-radius: 50%;
	opacity: 0.32;
}

.pesto-front .pesto-club h2 {
	margin: 0 0 0.6rem;
	font-size: var(--pesto-fs-h2);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.pesto-front .pesto-club > div:first-child > p {
	max-width: 46ch;
	margin: 0;
	font-size: var(--pesto-fs-lead);
}

/* Formularz (markup i podstawowy wygląd dostarcza moduł Newsletter we wtyczce): tu tylko skala i kontrast na ciemnym tle. */
.pesto-front .pesto-club .pesto-nl__form {
	max-width: 520px;
}

.pesto-front .pesto-club .pesto-nl__form input {
	min-height: 52px;
	color: var(--pesto-ink);
	background: var(--pesto-club-input-bg);
	border-color: transparent;
}

.pesto-front .pesto-club .pesto-nl__form button {
	min-height: 52px;
}

.pesto-front .pesto-club .pesto-nl__legal {
	margin-top: 0.7rem;
	color: var(--pesto-club-fine);
}

.pesto-front .pesto-club .pesto-nl__ok {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.1rem;
	color: var(--pesto-club-ok);
}

.pesto-front .pesto-club .pesto-nl__err {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
	color: var(--pesto-club-err);
}

@media (max-width: 760px) {
	.pesto-front .pesto-club {
		grid-template-columns: minmax(0, 1fr);
	}

	.pesto-front .pesto-club .pesto-nl__form button {
		flex: 1 1 100%;
	}
}

/* ---------- Ruch: tylko gdy użytkownik go nie wyłączył ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pesto-collection,
	.pesto-advice__card {
		transition: border-color 0.2s ease, transform 0.2s ease;
	}

	.pesto-collection:hover,
	.pesto-advice__card:hover {
		transform: translateY(-3px);
	}

	.pesto-advice__img img,
	.pesto-collection__img img {
		transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.pesto-advice__card:hover .pesto-advice__img img,
	.pesto-collection:hover .pesto-collection__img img {
		transform: scale(1.05);
	}
}

/* ========================== BANER PROMOCYJNY ========================== */
.pesto-promo__box {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: center;
	padding: var(--pesto-promo-pad);
	color: var(--pesto-promo-ink, var(--pesto-promo-fallback-ink));
	background: var(--pesto-promo-bg, var(--pesto-promo-fallback-bg));
	border-radius: var(--pesto-radius-xl);
	overflow: hidden;
}

.pesto-promo__box--img {
	grid-template-columns: 1.2fr 0.8fr;
}

.pesto-promo h2 {
	margin: 0 0 0.6rem;
	color: inherit;
}

.pesto-promo__copy p {
	max-width: 52ch;
	margin: 0 0 1.2rem;
	color: inherit;
	opacity: 0.92;
}

/* Przycisk banera = odwrócone kolory banera (tekst banera jako tło, tło banera jako tekst) — czytelny na każdym wybranym tle. */
.pesto-promo .pesto-btn--primary {
	color: var(--pesto-promo-bg, var(--pesto-promo-fallback-bg));
	background: var(--pesto-promo-ink, var(--pesto-promo-fallback-ink));
	border-color: transparent;
	box-shadow: none;
}

.pesto-promo .pesto-btn--primary:hover {
	color: var(--pesto-promo-bg, var(--pesto-promo-fallback-bg));
	opacity: 0.9;
}

.pesto-promo__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pesto-radius-lg);
}

@media (max-width: 760px) {
	.pesto-promo__box--img {
		grid-template-columns: 1fr;
	}
}

/* ========================== DLACZEGO MY ========================== */
.pesto-whyus__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--pesto-whyus-min), 1fr));
	gap: 1.2rem;
}

.pesto-whyus__item {
	padding: 1.5rem 1.2rem;
	text-align: center;
	background: var(--pesto-base);
	border: 1px solid var(--pesto-line);
	border-radius: var(--pesto-radius-lg);
}

.pesto-whyus__ic {
	display: grid;
	place-items: center;
	width: var(--pesto-whyus-ic);
	height: var(--pesto-whyus-ic);
	margin: 0 auto 0.9rem;
	color: var(--pesto-accent-on-light, var(--pesto-accent));
	background: var(--pesto-surface);
	border-radius: var(--pesto-radius-pill);
}

.pesto-whyus__ic svg {
	display: block;
}

.pesto-whyus__title {
	margin: 0 0 0.35rem;
	font-size: 1.08rem;
}

.pesto-whyus__item p {
	margin: 0;
	color: var(--pesto-muted);
}

/* ========================== PŁATNOŚCI I DOSTAWA ========================== */
.pesto-payments__box {
	padding: clamp(1.4rem, 3vw, 2.2rem);
	text-align: center;
	background: var(--pesto-surface);
	border-radius: var(--pesto-radius-xl);
}

.pesto-payments h2 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
}

.pesto-payments__box p {
	max-width: 60ch;
	margin: 0 auto 0.4rem;
	color: var(--pesto-muted);
}

.pesto-payments__delivery {
	font-weight: 600;
	color: var(--pesto-ink);
}

.pesto-payments .pesto-footer__pay {
	justify-content: center;
	margin-top: 1rem;
}

/* ========================== WŁASNA TREŚĆ ========================== */
.pesto-custom__content > :first-child {
	margin-top: 0;
}

.pesto-custom__content > :last-child {
	margin-bottom: 0;
}

/* ========================== EFEKTY I STYL (Pesto Builder) ==========================
 * Wszystko poniżej włącza się wyłącznie klasą na <body> (efekty całej strony) albo na sekcji pasa zaufania; domyślna strona
 * nie ma żadnej z tych klas. Ruch zawsze tylko przy prefers-reduced-motion: no-preference. Animacje przy przewijaniu używają
 * CSS animation-timeline (Chrome, Edge, Safari); gdzie jej nie ma, sekcje po prostu są widoczne — bez skryptu i bez migotania. */

@keyframes pesto-fx-rise {
	from {
		opacity: 0;
		transform: translateY(var(--pesto-fx-rise-y));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes pesto-fx-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes pesto-fx-kenburns {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(var(--pesto-fx-kenburns-scale));
	}
}

@keyframes pesto-fx-ticker {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* ---------- Pas zaufania: wygląd ---------- */

/* Karty: każdy kafel na własnej karcie. */
.pesto-trust--cards {
	background: transparent;
	border-block: 0;
}

.pesto-trust--cards .pesto-trust__grid {
	padding-block: clamp(1.2rem, 2.4vw, 1.8rem);
}

.pesto-trust--cards .pesto-trust__item {
	padding: var(--pesto-trust-card-pad);
	background: var(--pesto-card-bg, var(--pesto-base));
	border: 1px solid var(--pesto-line);
	border-radius: var(--pesto-radius);
	box-shadow: var(--pesto-shadow);
}

/* Pasek: jasne tło na całą szerokość, kafle wyśrodkowane. */
.pesto-trust--band {
	background: var(--pesto-surface);
	border-block-color: transparent;
}

.pesto-trust--band .pesto-trust__item {
	justify-content: center;
	text-align: start;
}

/* ---------- Pas zaufania: ikony ---------- */
.pesto-trust--icons-outline .pesto-trust__ic {
	background: transparent;
	border: 1.5px solid currentColor;
}

.pesto-trust--icons-solid .pesto-trust__ic {
	width: var(--pesto-trust-solid-size);
	height: var(--pesto-trust-solid-size);
	background: var(--pesto-accent);
	color: var(--pesto-accent-ink);
}

/* ---------- Pas zaufania: animacja ---------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.pesto-trust--anim-rise .pesto-trust__item {
			animation: pesto-fx-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}

		.pesto-trust--anim-rise .pesto-trust__item:nth-child(2) {
			animation-range: entry 6% entry 61%;
		}

		.pesto-trust--anim-rise .pesto-trust__item:nth-child(3) {
			animation-range: entry 12% entry 67%;
		}

		.pesto-trust--anim-rise .pesto-trust__item:nth-child(4) {
			animation-range: entry 18% entry 73%;
		}
	}
}

/* Przewijany pasek: dwa identyczne zestawy, przesunięcie o połowę = pętla bez szwu. Pauza: najechanie, fokus albo przycisk. */
.pesto-trust--anim-ticker .pesto-trust__grid {
	display: flex;
	flex-wrap: nowrap;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	overflow: hidden;
}

.pesto-trust--anim-ticker .pesto-trust__set {
	display: flex;
	flex: none;
	align-items: center;
}

.pesto-trust--anim-ticker .pesto-trust__item {
	flex: none;
	padding-inline-end: var(--pesto-ticker-gap);
}

@media (prefers-reduced-motion: no-preference) {
	.pesto-trust--anim-ticker {
		overflow: hidden;
	}

	.pesto-trust--anim-ticker .pesto-trust__grid {
		width: max-content;
		animation: pesto-fx-ticker var(--pesto-ticker-dur) linear infinite;
	}

	.pesto-trust--anim-ticker:hover .pesto-trust__grid,
	.pesto-trust--anim-ticker:focus-within .pesto-trust__grid,
	.pesto-trust--anim-ticker.is-paused .pesto-trust__grid {
		animation-play-state: paused;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Bez ruchu: zwykły rząd kafli, bez kopii i bez przycisku pauzy. */
	.pesto-trust--anim-ticker .pesto-trust__grid {
		flex-wrap: wrap;
		justify-content: center;
		padding-inline: var(--pesto-gap, clamp(1rem, 4vw, 2rem));
	}

	.pesto-trust--anim-ticker .pesto-trust__set {
		flex-wrap: wrap;
	}

	.pesto-trust--anim-ticker .pesto-trust__set--dup,
	.pesto-trust--anim-ticker .pesto-trust__pause {
		display: none;
	}
}

.pesto-trust {
	position: relative;
}

.pesto-trust__pause {
	position: absolute;
	inset-block-end: 6px;
	inset-inline-end: var(--pesto-gap, clamp(1rem, 4vw, 2rem));
	display: inline-grid;
	place-items: center;
	min-width: 32px;
	min-height: 32px;
	padding: 0 6px;
	border: 1px solid var(--pesto-line);
	border-radius: var(--pesto-radius-pill, 999px);
	background: var(--pesto-base);
	color: var(--pesto-ink);
	font-size: 0.7rem;
	line-height: 1;
	cursor: pointer;
}

.pesto-trust__pause:focus-visible {
	outline: 2px solid var(--pesto-accent);
	outline-offset: 2px;
}

@media (pointer: coarse) {
	.pesto-trust__pause {
		min-width: 44px;
		min-height: 44px;
	}
}

/* ---------- Efekty całej strony: pojawianie się sekcji ---------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.pesto-fx-reveal-fade .pesto-front > [data-pesto-section]:not([data-pesto-section="hero"]) {
			animation: pesto-fx-fade linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}

		.pesto-fx-reveal-rise .pesto-front > [data-pesto-section]:not([data-pesto-section="hero"]) {
			animation: pesto-fx-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 50%;
		}
	}
}

/* ---------- Efekty całej strony: najechanie na kafle i produkty (tylko urządzenia z myszką) ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pesto-fx-hover-lift .pesto-front .pesto-cat,
	.pesto-fx-hover-lift .pesto-front ul.products li.product {
		transition: transform var(--pesto-fx-dur) var(--pesto-fx-ease), box-shadow var(--pesto-fx-dur) var(--pesto-fx-ease);
	}

	.pesto-fx-hover-lift .pesto-front .pesto-cat:hover,
	.pesto-fx-hover-lift .pesto-front ul.products li.product:hover {
		transform: translateY(var(--pesto-fx-lift-y));
		box-shadow: var(--pesto-fx-lift-shadow);
	}

	.pesto-fx-hover-zoom .pesto-front .pesto-cat__img,
	.pesto-fx-hover-zoom .pesto-front ul.products li.product img {
		transition: transform var(--pesto-fx-dur) var(--pesto-fx-ease);
	}

	.pesto-fx-hover-zoom .pesto-front .pesto-cat:hover .pesto-cat__img,
	.pesto-fx-hover-zoom .pesto-front ul.products li.product:hover img {
		transform: scale(var(--pesto-fx-zoom));
	}
}

.pesto-fx-hover-zoom .pesto-front ul.products li.product > a:first-child {
	display: block;
	overflow: hidden;
	border-radius: inherit;
}

/* ---------- Hero: powolny ruch zdjęcia i wysokość ---------- */
@media (prefers-reduced-motion: no-preference) {
	.pesto-fx-hero-zoom .pesto-hero__photo img,
	.pesto-fx-hero-zoom .pesto-hero__tile > img {
		animation: pesto-fx-kenburns var(--pesto-fx-kenburns-dur) ease-in-out infinite alternate;
		will-change: transform;
	}
}

.pesto-hero-h-compact .pesto-hero__grid {
	padding-block: clamp(1rem, 2.4vw, 1.8rem);
}

.pesto-hero-h-tall .pesto-hero__grid {
	min-height: var(--pesto-hero-h-tall);
}

/* ---------- Dekoracja za zdjęciem w hero (opcja „Hero: dekoracja za zdjęciem”) ---------- */
.pesto-hero-deco-flat .pesto-blob {
	animation: none;
	background: var(--pesto-surface);
	border-radius: var(--pesto-radius-xl);
}

.pesto-hero-deco-none .pesto-blob {
	display: none;
}

/* ---------- Odstępy i separatory między sekcjami ---------- */
@media (min-width: 700px) {
	.pesto-density-compact .pesto-front .pesto-section {
		padding-block: calc(var(--pesto-section-pad) * var(--pesto-density-compact));
	}

	.pesto-density-airy .pesto-front .pesto-section {
		padding-block: calc(var(--pesto-section-pad) * var(--pesto-density-airy));
	}
}

.pesto-divider-line .pesto-front > [data-pesto-section] + [data-pesto-section] {
	border-top: 1px solid var(--pesto-divider-color);
}

.pesto-divider-wave .pesto-front > [data-pesto-section] + [data-pesto-section] {
	position: relative;
}

.pesto-divider-wave .pesto-front > [data-pesto-section] + [data-pesto-section]::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: calc(var(--pesto-divider-wave-h) / -2);
	height: var(--pesto-divider-wave-h);
	background: var(--pesto-divider-color);
	-webkit-mask: var(--pesto-wave-mask) repeat-x center / 48px var(--pesto-divider-wave-h);
	mask: var(--pesto-wave-mask) repeat-x center / 48px var(--pesto-divider-wave-h);
	pointer-events: none;
}