/* DAI TO SE - system wizualny wspólny dla wszystkich podstron (etap 1 z Claude Design, 4.10.2026).
   Źródło prawdy: .wayfinder/cd-export-system/ (dts-tokeny.css + komponenty *.dc.html); wartości przeniesione 1:1.
   Kolejność: fonty, tokeny, baza, typografia, układ, 6 kontrolek, scena i karta produktu, pasek zakupu, wejście treści,
   pasek strony, menu, koszyk. Moduły (assets/*.css) składają się tylko z tych klas i tokenów. */
@font-face { font-family: "Druk Wide"; src: url("../brand_assets/fonts/druktextwide-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Relative"; src: url("../brand_assets/fonts/relative-book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Relative"; src: url("../brand_assets/fonts/relative-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Relative 11 Pitch"; src: url("../brand_assets/fonts/relative-11pitch.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* KOLOR: interfejs (neutralny) */
  --krem: #F6EFE4;            /* tło strony */
  --piasek: #ECE4D7;          /* scena produktu, gdy produktów jest wiele; tło po najechaniu */
  --piasek-2: #E2D9CA;        /* przycisk nieaktywny, tło wciśnięcia */
  --tusz: #131313;            /* tekst, obrys przycisku pobocznego, zaznaczenie */
  --tusz-2: #5F5A52;          /* tekst drugiego planu: 5,99:1 na kremie, 5,42:1 na piasku */
  --linia: #8A847A;           /* obrys kontrolek: 3,25:1 na kremie */
  --linia-jasna: #D9D1C4;     /* separator w listach (dekoracyjny) */
  /* KOLOR: działanie (jedyny kolor interfejsu) */
  --czerwien: #D2110E;        /* przycisk główny, link; krem na czerwieni 4,8:1 */
  --czerwien-najechanie: #B00E0B;
  --czerwien-wcisniety: #960C0A;
  /* KOLOR: smaki (z etykiet klienta) - tylko scena pojedynczego produktu i znacznik 12 px w kaflu smaku */
  --smak-klasyczny: #1F6E4E; --smak-miod: #26477A; --smak-trufla: #2B2A28; --smak-xo: #D9D8D2; --smak-salsa: #5E3596;
  --smak-agrest: #7C9E2F; --smak-mango: #D8741E; --smak-sliwka: #8A1A2B; --smak-panko: #A69CD3;

  /* TYPOGRAFIA: trzy kroje, dziewięć stopni */
  --f-druk: "Druk Wide", "Arial Black", sans-serif;      /* tylko nagłówki, wersaliki */
  --f-tekst: "Relative", "Helvetica Neue", Arial, sans-serif; /* wszystko, co się czyta i klika */
  --f-mono: "Relative 11 Pitch", ui-monospace, Menlo, monospace; /* liczby i fakty, małe litery */
  --t-display: clamp(40px, 19.2px + 5.333cqi, 96px);  /* Druk, lh .92 - hero, jeden na stronę */
  --t-h1: clamp(26px, 19.31px + 1.714cqi, 44px);      /* Druk, lh 1 - nagłówek sekcji */
  --t-h2: clamp(20px, 17.77px + .571cqi, 26px);       /* Druk, lh 1.1 - nazwa produktu, tytuł panelu */
  --t-teza: clamp(26px, 19.31px + 1.714cqi, 44px);    /* Relative Book, lh 1.15 - manifest, hasło produktu */
  --t-lead: clamp(18px, 16.51px + .381cqi, 22px);     /* Relative Book, lh 1.4 - zdanie pod nagłówkiem sekcji */
  --t-tekst: 16px;   /* Relative Book, lh 1.55 - opisy */
  --t-ui: 16px;      /* Relative Medium, lh 1.25 - przyciski, kafle, linki, nazwy w kartach */
  --t-maly: 14px;    /* Relative Book, lh 1.45 - dopiski, cechy, drugi wiersz kafla */
  --t-liczba: 14px;  /* Relative 11 Pitch, lh 1.3 - ceny, ilości, czas, linia produktu */

  /* SIATKA: 12 kolumn na komputerze, 4 na telefonie */
  --margines: clamp(20px, 9.6px + 2.667cqi, 48px);
  --rynna: clamp(12px, 7.54px + 1.143cqi, 24px);
  --tresc-max: 1344px;

  /* ODSTĘPY */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 120px;
  --sekcja: clamp(72px, 54.17px + 4.571cqi, 120px);          /* góra i dół każdej sekcji */
  --naglowek-odstep: clamp(32px, 26.06px + 1.524cqi, 48px);  /* nagłówek sekcji -> treść */

  /* KONTROLKI */
  --h-kontrolki: 48px;   /* przycisk, licznik, przycisk ikonowy */
  --h-kafla: 72px;       /* kafel opcji (minimum) */
  --obrys: 1px;
  --obrys-zazn: 2px;
  --pasek-h: clamp(56px, 53.03px + .762cqi, 64px);
  --pasek-zakupu-h: 72px;

  /* PRODUKT: jedna zasada sceny */
  --scena-podstawa: 13%;   /* dół produktu nad dolną krawędzią sceny */
  --scena-wysoki: 62%;     /* wysoki słoik: wysokość względem sceny */
  --scena-niski: 46%;      /* niski słoik chutney */
  --scena-torebka: 70%;    /* torebka panko */
  --scena-cien: radial-gradient(closest-side, rgba(19,19,19,.26), rgba(19,19,19,0));

  /* RUCH: tylko przesunięcie, skala, przezroczystość */
  --czas-szybki: 120ms;  /* wciśnięcie */
  --czas: 240ms;         /* zmiana zdjęcia, pojawienie się w zestawie, pasek zakupu */
  --czas-panel: 300ms;   /* szuflada koszyka, menu, slajd galerii */
  --czas-wejscie: 480ms; /* wejście treści sekcji, raz */
  --krzywa: cubic-bezier(.2, .7, .2, 1);
  --krzywa-panel: cubic-bezier(.4, 0, .2, 1);
}

/* ===== BAZA ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--krem); color: var(--tusz); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-padding-top: calc(var(--pasek-h) + var(--s-4)); }
body { font-family: var(--f-tekst); font-weight: 400; font-size: var(--t-tekst); line-height: 1.55; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; touch-action: manipulation; } /* manipulation: bez opóźnienia i powiększenia przy szybkim podwójnym tapnięciu */
img, video { max-width: 100%; }
ul, ol { list-style: none; }
s { text-decoration-thickness: 1px; }
::selection { background: var(--tusz); color: var(--krem); }
/* fokus z klawiatury: dwa pierścienie (krem + tusz), widoczne na kremie, zdjęciu i każdym kolorze smaku */
:focus-visible { outline: 2px solid var(--tusz); outline-offset: 2px; box-shadow: 0 0 0 2px var(--krem); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ===== TYPOGRAFIA: stopnie do użycia wprost ===== */
.t-h1 { font-family: var(--f-druk); font-weight: 500; font-size: var(--t-h1); line-height: 1; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; }
.t-h2 { font-family: var(--f-druk); font-weight: 500; font-size: var(--t-h2); line-height: 1.1; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; }
.t-teza { font-size: var(--t-teza); line-height: 1.15; text-wrap: balance; }
.t-lead { font-size: var(--t-lead); line-height: 1.4; color: var(--tusz-2); text-wrap: pretty; }
.t-tekst { font-size: var(--t-tekst); line-height: 1.55; text-wrap: pretty; }
.t-ui { font-weight: 500; font-size: var(--t-ui); line-height: 1.25; }
.t-maly { font-size: var(--t-maly); line-height: 1.45; }
.t-liczba { font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1.3; }
.t-2 { color: var(--tusz-2); }

/* ===== UKŁAD: sekcja, treść, nagłówek sekcji ===== */
.sekcja { position: relative; padding: var(--sekcja) var(--margines); }
.sekcja[id] { scroll-margin-top: calc(var(--s-6) - var(--sekcja)); } /* kotwica (#polka, #zestawy) zatrzymuje nagłówek sekcji tuż pod paskiem, a nie 120 px niżej */
/* zwykłe strony tekstowe (page.php: regulamin, polityka, gdzie kupić) */
.proza > :not(h1) { max-width: 72ch; }
.proza { overflow-wrap: anywhere; } /* długie adresy w regulaminie nie poszerzają strony na telefonie */
.proza > h1 { margin-bottom: var(--s-6); }
.proza > * + :not(h1) { margin-top: var(--s-4); }
.proza > h2 { margin-top: var(--s-6); font-weight: 500; font-size: var(--t-lead); line-height: 1.25; text-wrap: balance; } /* śródtytuły regulaminu i polityki: mniejsze od h1 strony */
.proza :is(ul, ol) { list-style: disc; padding-left: var(--s-5); }
.proza li + li { margin-top: var(--s-2); }
.proza ol { list-style: decimal; }
.proza a { text-decoration: underline; text-underline-offset: 3px; }
.proza a:hover { text-decoration-thickness: 2px; }
.tresc { max-width: var(--tresc-max); margin-left: auto; margin-right: auto; }
.ns { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; max-width: 880px; }
.ns__t { font-family: var(--f-druk); font-weight: 500; font-size: var(--t-h1); line-height: 1; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; } /* anywhere: bezpiecznik dla długiego słowa w Druku na 320 px */
.ns__lead { max-width: 640px; font-size: var(--t-lead); line-height: 1.4; color: var(--tusz-2); text-wrap: pretty; }
/* nagłówek z akcjami (filtry, strzałki, link) po prawej na linii tytułu; na telefonie akcje schodzą pod zdanie */
.ns-rzad { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-5); margin-bottom: var(--naglowek-odstep); }
.ns-akcje { display: flex; align-items: center; gap: var(--s-2); flex: none; }
@media (max-width: 720px) { .ns-rzad { flex-direction: column; } .ns-akcje:not(:has(> :not(.tor-strzalki))) { display: none; } } /* same strzałki na telefonie znikają, więc pusty kontener akcji nie dokłada odstępu */

/* ===== KONTROLKA 1: PRZYCISK (główny: czerwień; poboczny: obrys tusz; zaznaczony = tusz) ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 16px; flex: none; height: var(--h-kontrolki); padding: 0 24px; border: var(--obrys) solid var(--czerwien); border-radius: 0; background: var(--czerwien); color: var(--krem); font-family: var(--f-tekst); font-weight: 500; font-size: var(--t-ui); line-height: 1.25; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--czas-szybki) var(--krzywa); }
.btn--cena { justify-content: space-between; }
.btn--pelny { width: 100%; }
.btn--waski { padding: 0 16px; }
.btn__cena { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--f-mono); font-size: var(--t-liczba); font-weight: 400; line-height: 1.3; white-space: nowrap; }
.btn--poboczny { background: transparent; color: var(--tusz); border-color: var(--tusz); }
@media (hover: hover) {
  .btn:hover { background: var(--czerwien-najechanie); border-color: var(--czerwien-najechanie); }
  .btn--poboczny:hover { background: var(--piasek); border-color: var(--tusz); }
}
.btn:active { background: var(--czerwien-wcisniety); border-color: var(--czerwien-wcisniety); transform: scale(.98); }
.btn--poboczny:active { background: var(--piasek-2); border-color: var(--tusz); }
.btn--poboczny[aria-pressed="true"], .btn--poboczny.is-on { background: var(--tusz); color: var(--krem); border-color: var(--tusz); }
.btn[aria-disabled="true"] { background: var(--piasek-2); color: var(--tusz-2); border-color: var(--piasek-2); cursor: not-allowed; transform: none; }
.btn--poboczny[aria-disabled="true"] { background: transparent; color: var(--tusz-2); border-color: var(--linia); }

/* ===== KONTROLKA 2: PRZYCISK IKONOWY 48 x 48 (strzałka, dodaj, zamknij, menu, graj) ===== */
.ikb { display: inline-grid; place-items: center; flex: none; width: var(--h-kontrolki); height: var(--h-kontrolki); padding: 0; border: var(--obrys) solid var(--tusz); border-radius: 0; background: var(--krem); color: var(--tusz); cursor: pointer; transition: transform var(--czas-szybki) var(--krzywa); }
.ikb svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; pointer-events: none; }
.ikb svg.ik--pelna { fill: currentColor; stroke: none; }
.ikb svg.ik--gruba { stroke-width: 2; }
.ikb__n { font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1; }
.ikb--bez { border-color: transparent; background: transparent; }
@media (hover: hover) {
  .ikb:hover { background: var(--tusz); color: var(--krem); }
  .ikb--bez:hover { background: var(--piasek); color: var(--tusz); }
}
.ikb:active { background: var(--tusz); color: var(--krem); transform: scale(.94); }
.ikb--bez:active { background: var(--piasek-2); color: var(--tusz); }
.ikb.is-on { background: var(--tusz); color: var(--krem); border-color: var(--tusz); }
.ikb[aria-disabled="true"] { color: var(--linia); border-color: var(--linia-jasna); background: var(--krem); cursor: not-allowed; transform: none; }
.ikb--bez[aria-disabled="true"] { border-color: transparent; background: transparent; }
.ikb.is-on[aria-disabled="true"] { background: var(--piasek-2); color: var(--tusz); border-color: var(--piasek-2); }

/* ===== KONTROLKA 3: KAFEL OPCJI (smak, ilość, sposób zakupu, częstotliwość, rozmiar zestawu); role="radio" ===== */
.kafel { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: var(--h-kafla); padding: 16px 20px; border: var(--obrys) solid var(--linia); border-radius: 0; background: transparent; color: var(--tusz); font-family: var(--f-tekst); text-align: left; text-decoration: none; cursor: pointer; transition: transform var(--czas-szybki) var(--krzywa); }
.kafel--pion { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
.kafel__gl { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.kafel__et { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: var(--t-ui); line-height: 1.25; }
.kafel__znak { flex: none; width: 12px; height: 12px; background: var(--smak, var(--piasek-2)); box-shadow: inset 0 0 0 1px rgba(19,19,19,.2); }
.kafel__opis { font-size: var(--t-maly); line-height: 1.45; color: var(--tusz-2); font-weight: 400; }
.kafel__cena { display: flex; align-items: baseline; gap: 8px; flex: none; font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1.3; white-space: nowrap; }
.kafel__cena s { color: var(--tusz-2); }
@media (hover: hover) { .kafel:hover { border-color: var(--tusz); } }
.kafel:active { background: var(--piasek); border-color: var(--tusz); transform: scale(.99); }
.kafel[aria-checked="true"], .kafel[aria-current="true"], .kafel.is-on { padding: 15px 19px; border-width: var(--obrys-zazn); border-color: var(--tusz); }
.kafel[aria-disabled="true"] { border-color: var(--linia-jasna); color: var(--tusz-2); cursor: not-allowed; transform: none; background: transparent; }

/* ===== KONTROLKA 4: LICZNIK ILOŚCI (koszyk; 1 do 10 sztuk) ===== */
.licznik { display: inline-flex; align-items: center; flex: none; height: var(--h-kontrolki); border: var(--obrys) solid var(--linia); color: var(--tusz); background: transparent; }
.licznik button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer; touch-action: manipulation; transition: transform var(--czas-szybki) var(--krzywa); }
.licznik svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; pointer-events: none; }
.licznik__n { min-width: 40px; text-align: center; font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1; }
@media (hover: hover) { .licznik button:hover { background: var(--piasek); } }
.licznik button:active { background: var(--piasek-2); transform: scale(.94); }
.licznik button[aria-disabled="true"] { color: var(--linia); background: transparent; cursor: not-allowed; transform: none; }

/* ===== KONTROLKA 5 i 6: LINK (czerwień z podkreśleniem, pole 44 px) i LINK W PASKU (tusz) ===== */
.link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font-family: var(--f-tekst); font-weight: 500; font-size: var(--t-ui); line-height: 1.25; color: var(--czerwien); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; cursor: pointer; transition: opacity var(--czas-szybki) var(--krzywa); }
.link--nav { color: var(--tusz); text-decoration-line: none; }
.link--tekst { display: inline; min-height: 0; font-size: inherit; line-height: inherit; text-underline-offset: 3px; white-space: normal; }
@media (hover: hover) {
  .link:hover { color: var(--czerwien-najechanie); text-decoration-thickness: 2px; }
  .link--nav:hover { color: var(--tusz); text-decoration-line: underline; text-decoration-thickness: 1px; }
}
.link:active { opacity: .7; text-decoration-line: underline; }
.link--nav[aria-current="page"] { text-decoration-line: underline; text-decoration-thickness: 2px; }
.link[aria-disabled="true"] { color: var(--tusz-2); text-decoration-line: none; cursor: not-allowed; }
.etykieta { font-weight: 500; font-size: var(--t-ui); line-height: 1.25; }

/* ===== PRODUKT: SCENA (jedna zasada pokazywania słoika). Markup składa DTS.scena() z assets/site.js =====
   Tło: piasek, gdy produktów jest kilka; kolor smaku (--smak), gdy na ekranie jest jeden produkt. Wycinek na środku, dno na 13%,
   wysokość według sylwetki (data-rodzaj), jeden cień kontaktowy. Proporcje: karta 4:5, galeria 6:7 (telefon 39:34), miejsce w zestawie 1:1. */
.scena { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--piasek); overflow: hidden; }
.scena--67 { aspect-ratio: 6 / 7; }
.scena--11 { aspect-ratio: 1 / 1; }
.scena--3934 { aspect-ratio: 39 / 34; }
.scena--smak { background: var(--smak, var(--piasek)); }
.scena--krem { background: var(--krem); }
.scena__img { position: absolute; left: 50%; bottom: var(--scena-podstawa); height: var(--scena-wysoki); width: auto; max-width: none; transform: translateX(-50%); display: block; user-select: none; -webkit-user-drag: none; }
.scena[data-rodzaj="niski"] .scena__img { height: var(--scena-niski); }
.scena[data-rodzaj="torebka"] .scena__img { height: var(--scena-torebka); }
.scena__cien { position: absolute; left: 50%; bottom: calc(var(--scena-podstawa) - 2.2%); width: var(--cien, 50%); height: 4.4%; transform: translateX(-50%); background: var(--scena-cien); }
.scena__foto, .scena__foto2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.scena__foto2 { opacity: 0; transition: opacity var(--czas) var(--krzywa); }

/* ===== PRODUKT: KARTA (półka, zestawy, „Do kompletu”). Markup składa DTS.karta() ===== */
.karta { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; } /* isolation: kolejność warstw (link na całą kartę, nad nim „dodaj”) zostaje wewnątrz karty */
.karta__scena { position: relative; display: block; }
.karta__plus { position: absolute; z-index: 1; right: 12px; bottom: 12px; }
.karta--mala .karta__plus { right: 8px; bottom: 8px; }
.karta__opis { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.karta__linia { font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1.3; color: var(--tusz-2); }
.karta__nazwa { font-weight: 500; font-size: var(--t-ui); line-height: 1.25; color: var(--tusz); text-wrap: balance; text-underline-offset: 4px; }
.karta__nazwa::after { content: ""; position: absolute; inset: 0; } /* link z nazwy rozciągnięty na całą kartę: kliknięcie w zdjęcie, linię i cenę też prowadzi na stronę produktu */
.pk__tytul::after { content: ""; position: absolute; inset: -12px 0; } /* pole dotyku 44 px bez zmiany układu */
.karta__cena { font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1.3; }
/* Omnibus: najniższa cena z 30 dni, zawsze przy cenie produktu (karta, panel zakupu, „Do kompletu”) */
.omnibus { display: block; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--tusz-2); text-wrap: balance; }
.omnibus span { white-space: nowrap; } /* 12 px (było 14): uwaga klienta z 8.10.2026; nie schodzić niżej, to informacja wymagana prawem i ma być czytelna */
@media (hover: hover) { .karta:hover .scena__foto2 { opacity: 1; } a.karta__nazwa:hover { text-decoration: underline; } }
.karta:has(:focus-visible) .scena__foto2 { opacity: 1; } /* tylko fokus z klawiatury: po zamknięciu koszyka fokus wraca na „dodaj” i kadr nie zostaje na karcie */

/* ===== KARUZELA: rząd przewijany w bok natywnie, bez pętli. Strzałki to dwa przyciski ikonowe w nagłówku sekcji (.tor-strzalki), podpina je DTS.tor() =====
   --tor-n: ile kart widać naraz. Na telefonie rząd idzie od krawędzi do krawędzi okna i widać początek następnej karty; strzałki znikają (przesuwa się palcem). */
/* dopełnienie 4 px odjęte marginesem: rząd przycina to, co wystaje, więc pierścień fokusu przy krawędzi potrzebuje miejsca; układ zostaje ten sam */
.tor { --tor-n: 4; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--tor-n) - 1) * var(--rynna)) / var(--tor-n)); gap: var(--rynna); padding: var(--s-1); margin: calc(var(--s-1) * -1); scroll-padding: 0 var(--s-1); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tor::-webkit-scrollbar { display: none; }
.tor > * { position: relative; scroll-snap-align: start; min-width: 0; } /* relative: teksty .sr z kart poza kadrem nie poszerzają strony */
.tor-strzalki { display: flex; gap: var(--s-2); flex: none; }
@media (max-width: 1024px) { .tor { --tor-n: 3; } }
@media (max-width: 720px) {
  .tor { margin: calc(var(--s-1) * -1) calc(var(--margines) * -1); padding: var(--s-1) var(--margines); scroll-padding: 0 var(--margines); grid-auto-columns: calc((100% - var(--rynna)) / 2.15); }
  .tor-strzalki { display: none; }
}

/* ===== KARTA PRZEPISU (strona główna, strona produktu, „inne przepisy”). Markup składa DTS.przepisKarta() z assets/przepisy.js =====
   Ta sama budowa co karta produktu: kadr 4:5, przycisk ikonowy w prawym dolnym rogu (graj: film rusza po dotknięciu), fakty w mono, tytuł jako link. */
.pk { position: relative; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.pk__media { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--piasek); overflow: hidden; }
.pk__media img, .pk__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pk__graj { position: absolute; right: 12px; bottom: 12px; }
.pk__opis { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.pk__meta { font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1.3; color: var(--tusz-2); }
.pk__tytul { position: relative; font-weight: 500; font-size: var(--t-ui); line-height: 1.25; color: var(--tusz); text-wrap: balance; text-underline-offset: 4px; }
@media (hover: hover) { a.pk__tytul:hover { text-decoration: underline; } }

/* ===== PASEK ZAKUPU (telefon): nazwa, wybór, cena i przycisk; widać go, gdy główny przycisk modułu jest poza ekranem =====
   .pz-kotwica stoi na końcu sekcji modułu (sticky, wysokość 0), więc pasek działa tylko w obrębie modułu. */
.pz-kotwica { position: sticky; bottom: 0; height: 0; z-index: 20; margin: 0 calc(var(--margines) * -1); }
.pz { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--s-4); height: var(--pasek-zakupu-h); padding: 0 var(--margines); background: var(--krem); border-top: var(--obrys) solid var(--linia-jasna); color: var(--tusz); transition: transform var(--czas) var(--krzywa), opacity var(--czas) var(--krzywa); }
.pz[aria-hidden="true"] { transform: translateY(100%); opacity: 0; pointer-events: none; }
.pz__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pz__n { font-weight: 500; font-size: var(--t-ui); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz__o { font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1.3; color: var(--tusz-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== RUCH: wejście treści sekcji (jedno dla całej strony): przezroczystość i 24 px w górę, raz, 480 ms. Klasę is-in dokłada site.js ===== */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .wej { opacity: 0; transform: translateY(24px); }
  .wej.is-in { opacity: 1; transform: none; transition: opacity var(--czas-wejscie) var(--krzywa), transform var(--czas-wejscie) var(--krzywa); }
}
@media print { .wej { opacity: 1 !important; transform: none !important; } } /* w druku widać też sekcje, do których nie przewinięto */

/* ===== PASEK STRONY: 64 / 56 px, pełne tło kremowe, bez rozmycia; po przewinięciu linia 1 px =====
   Tło paska to warstwa ::before. Na stronie z hero (zdjęcie pod paskiem) na samej górze strony warstwa jest przezroczysta, a tekst kremowy;
   po przewinięciu (klasa is-przewiniety z site.js) tło wraca w 240 ms. Decyzja użytkownika z 4.10.2026. */
.nav { position: sticky; top: 0; z-index: 100; height: var(--pasek-h); display: flex; align-items: center; gap: var(--s-6); padding: 0 var(--margines); color: var(--tusz); transition: color .25s ease-in-out; }
/* pojawianie się tła jak na graza.co (pomiar 4.10.2026): tło 0 -> 1 w 0,4 s ease-in-out, kolor tekstu w 0,25 s ease-in-out, bez przesunięcia */
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--krem); transition: opacity .4s ease-in-out; }
body:has(.hero) .nav:not(.is-przewiniety) { color: var(--krem); }
body:has(.hero) .nav:not(.is-przewiniety)::before { opacity: 0; }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linia-jasna); opacity: 0; transition: opacity .4s ease-in-out; }
.nav.is-przewiniety::after { opacity: 1; }
.nav__logo { display: inline-flex; align-items: center; flex: none; min-height: 44px; margin-right: auto; color: inherit; font-family: var(--f-druk); font-weight: 500; font-size: 22px; line-height: 1; white-space: nowrap; }
.nav__links { display: flex; align-items: center; gap: var(--s-6); flex: none; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: var(--t-ui); line-height: 1.25; color: inherit; white-space: nowrap; text-underline-offset: 4px; transition: opacity var(--czas-szybki) var(--krzywa); }
.nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.nav__cart { display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 44px; min-height: 44px; justify-content: flex-end; padding: 0; border: 0; background: none; color: inherit; font-family: var(--f-tekst); font-weight: 500; font-size: var(--t-ui); line-height: 1.25; cursor: pointer; white-space: nowrap; text-underline-offset: 4px; }
.nav__cart svg { display: block; flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.nav__n { font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1; }
/* prawa strona paska: konto obok koszyka (11.10.2026). Na stronach konta ikona jest wypełniona (aria-current). */
.nav__prawa { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.nav__konto { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; color: inherit; }
.nav__konto svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.nav__konto[aria-current="page"] svg { fill: currentColor; }
@media (hover: hover) { .nav__konto:hover svg { stroke-width: 2.25; } }
.nav__konto:active { opacity: .7; }
.nav__burger { display: none; color: inherit; }
@media (hover: hover) { .nav__links a:hover, .nav__cart:hover { text-decoration: underline; text-decoration-thickness: 1px; } }
.nav__links a:active, .nav__cart:active { opacity: .7; }
/* telefon: menu po lewej, logo na środku, koszyk po prawej (decyzja użytkownika z 5.10.2026); boczne kolumny równe, więc logo stoi w osi ekranu */
@media (max-width: 820px) {
  .nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-4); }
  .nav__links { display: none; }
  .nav__burger { display: inline-grid; justify-self: start; margin: 0 0 0 -12px; }
  .nav__logo { justify-self: center; margin-right: 0; font-size: 16px; }
  .nav__prawa { justify-self: end; gap: 0; }
  .nav__konto { width: 32px; } /* węższe pole (wysokość 44 px zostaje): przy 320-360 px ikona nie wchodzi na logo */
}
@media print { .nav { position: static; } }

/* ===== MENU NA TELEFONIE: natywny <dialog>, panel z prawej, 300 ms; Druk i powietrze ===== */
.mn { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(100%, 440px); height: 100%; height: 100dvh; max-width: none; max-height: none; padding: 0; border: 0; background: var(--krem); color: var(--tusz); overflow: auto; }
.mn:not([open]) { display: none; }
.mn[open] { animation: panelIn var(--czas-panel) var(--krzywa-panel); }
.mn.is-closing { animation: panelOut var(--czas-panel) var(--krzywa-panel) forwards; }
.mn::backdrop { background: rgba(19,19,19,.5); animation: zaslonaIn var(--czas-panel) var(--krzywa-panel); }
.mn.is-closing::backdrop { animation: zaslonaOut var(--czas-panel) var(--krzywa-panel) forwards; }
@keyframes panelIn { from { transform: translateX(100%); } }
@keyframes panelOut { from { transform: var(--panel-x, none); } to { transform: translateX(100%); } } /* --panel-x: pozycja w chwili zamknięcia (zamknięcie w trakcie wjazdu nie skacze) */
@keyframes zaslonaIn { from { opacity: 0; } }
@keyframes zaslonaOut { to { opacity: 0; } }
.mn__head { display: flex; align-items: center; justify-content: flex-end; height: var(--pasek-h); padding: 0 calc(var(--margines) - 12px) 0 var(--margines); }
.mn__panel { display: flex; flex-direction: column; gap: var(--s-7); padding: var(--s-6) var(--margines) var(--s-7); }
.mn__list { display: flex; flex-direction: column; gap: var(--s-2); }
.mn__list a, .mn__cart { display: inline-flex; align-items: center; min-height: 48px; padding: 0; border: 0; background: none; color: var(--tusz); cursor: pointer; font-family: var(--f-druk); font-weight: 500; font-size: var(--t-h2); line-height: 1.1; text-transform: uppercase; text-underline-offset: 6px; }
.mn__foot { display: flex; flex-direction: column; align-items: flex-start; }
@media (hover: hover) { .mn__list a:hover, .mn__cart:hover { text-decoration: underline; text-decoration-thickness: 2px; } }
.mn__list a:active, .mn__cart:active { opacity: .7; }

/* ===== KOSZYK: szuflada z prawej (natywny <dialog>), 300 ms. Zawartość renderuje assets/site.js ===== */
.kz { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: min(100%, 440px); height: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; background: var(--krem); color: var(--tusz); font-family: var(--f-tekst); font-size: var(--t-maly); line-height: 1.45; overflow: hidden; }
.kz:not([open]) { display: none; }
.kz[open] { display: flex; flex-direction: column; animation: panelIn var(--czas-panel) var(--krzywa-panel); }
.kz.is-closing { animation: panelOut var(--czas-panel) var(--krzywa-panel) forwards; }
.kz::backdrop { background: rgba(19,19,19,.5); animation: zaslonaIn var(--czas-panel) var(--krzywa-panel); }
.kz.is-closing::backdrop { animation: zaslonaOut var(--czas-panel) var(--krzywa-panel) forwards; }
@media (prefers-reduced-motion: reduce) { .kz[open], .kz.is-closing, .kz::backdrop, .kz.is-closing::backdrop, .mn[open], .mn.is-closing, .mn::backdrop, .mn.is-closing::backdrop { animation: none; } }
.kz__head { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--pasek-h); padding: 0 12px 0 24px; }
.kz__title { font-family: var(--f-druk); font-weight: 500; font-size: var(--t-h2); line-height: 1.1; text-transform: uppercase; }
.kz__bar { flex: none; padding: var(--s-2) 24px var(--s-4); border-bottom: 1px solid var(--linia-jasna); }
.kz__track { height: 2px; background: var(--linia-jasna); overflow: hidden; }
.kz__track i { display: block; height: 100%; background: var(--tusz); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--czas) var(--krzywa-panel); }
.kz__barmsg { margin-top: var(--s-2); color: var(--tusz-2); }
.kz__note { flex: none; padding: var(--s-3) 24px; background: var(--piasek); }
.kz__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 24px; }
.kz__line { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--linia-jasna); }
.kz__line:last-child { border-bottom: 0; }
.kz__thumb { position: relative; width: 72px; height: 72px; flex: none; background: var(--piasek); overflow: hidden; }
.kz__thumb.is-set { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9px; }
.kz__thumb.is-set img { display: block; max-width: 28px; max-height: 40px; margin: 0 -3px; }
.kz__info { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.kz__top { display: flex; justify-content: space-between; gap: var(--s-3); }
.kz__name { font-weight: 500; font-size: var(--t-ui); line-height: 1.25; text-wrap: balance; text-underline-offset: 4px; }
.kz__price { display: flex; align-items: baseline; gap: 8px; flex: none; font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1.3; white-space: nowrap; }
.kz__price s { order: -1; color: var(--tusz-2); }
.kz__desc { color: var(--tusz-2); }
.kz__qty { align-self: flex-start; margin-top: var(--s-2); }
.kz__empty { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-5); padding: 24px; }
.kz__empty p { max-width: 300px; font-size: var(--t-tekst); line-height: 1.55; }
.kz__more { flex: none; padding: var(--s-4) 24px var(--s-2); border-top: 1px solid var(--linia-jasna); }
.kz__eyebrow { font-family: var(--f-mono); font-size: var(--t-liczba); font-weight: 400; line-height: 1.3; color: var(--tusz-2); margin-bottom: var(--s-1); }
.kz__rec { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; }
.kz__rec + .kz__rec { border-top: 1px solid var(--linia-jasna); }
.kz__rec .kz__thumb { width: 48px; height: 48px; }
.kz__rec .kz__price { display: block; }
.kz__foot { flex: none; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) 24px 24px; border-top: 1px solid var(--linia-jasna); }
.kz__rabat { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: var(--t-maly); line-height: 1.45; color: var(--tusz-2); } /* rabat za ilość, którego nie ma w cenach pozycji */
.kz__rabat[hidden] { display: none; }
.kz__rabat.kz__dost b { color: inherit; }
.kz__rabat b { font-family: var(--f-mono); font-size: var(--t-liczba); font-weight: 400; color: var(--czerwien); }
.kz__sum { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; font-size: var(--t-ui); line-height: 1.25; }
.kz__sum b { font-family: var(--f-mono); font-size: var(--t-liczba); font-weight: 400; }
/* ===== WYBÓR PRZY „DORZUĆ JESZCZE”: gdy w koszyku jest subskrypcja, okienko pyta „zakup jednorazowy” czy „dodaj do subskrypcji” (natywny <dialog>, assets/site.js) ===== */
.kw { margin: auto; width: min(calc(100% - 32px), 440px); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: var(--obrys) solid var(--tusz); border-radius: 0; background: var(--krem); color: var(--tusz); font-family: var(--f-tekst); overflow: auto; overscroll-behavior: contain; }
.kw[open] { animation: kwIn var(--czas) var(--krzywa-panel); }
.kw::backdrop { background: rgba(19,19,19,.5); animation: zaslonaIn var(--czas) var(--krzywa-panel); }
@keyframes kwIn { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .kw[open], .kw::backdrop { animation: none; } }
.kw__in { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-3) 24px 24px; }
.kw__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-right: -12px; }
.kw__title { font-family: var(--f-druk); font-weight: 500; font-size: var(--t-h2); line-height: 1.1; text-transform: uppercase; }
/* zdjęcie produktu na kolorze smaku, obok nazwa i zdanie */
.kw__prod { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.kw__foto { display: grid; place-items: center; width: 88px; height: 88px; border: var(--obrys) solid var(--tusz); }
.kw__foto img { display: block; max-width: 66%; max-height: 70%; }
.kw__co { font-size: var(--t-maly); line-height: 1.45; color: var(--tusz-2); }
.kw__co b { font-weight: 500; color: var(--tusz); }
.kw__opcje { display: flex; flex-direction: column; gap: var(--s-2); }
.kw__op { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%; min-height: 64px; padding: var(--s-3) var(--s-4); border: var(--obrys) solid var(--tusz); border-radius: 0; background: var(--krem); color: var(--tusz); font-family: var(--f-tekst); text-align: left; cursor: pointer; }
.kw__nazwa { display: flex; flex-direction: column; gap: 2px; font-weight: 500; font-size: var(--t-ui); line-height: 1.25; }
.kw__rz { display: flex; align-items: center; gap: var(--s-2); }
.kw__rz svg { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.kw__nazwa small { font-weight: 400; font-size: var(--t-maly); line-height: 1.45; color: var(--tusz-2); }
.kw__cena { display: flex; align-items: baseline; gap: 8px; flex: none; font-family: var(--f-mono); font-size: var(--t-liczba); line-height: 1.3; white-space: nowrap; }
.kw__cena s { color: var(--tusz-2); }
@media (hover: hover) { .kw__op:hover { background: var(--piasek); } }
.kw__op:active { background: var(--piasek-2); }
/* „zobacz koszyk” pod przyciskiem kasy (prośba użytkownika z 8.10.2026, jak na Kickbacku): link do strony koszyka; ujemne marginesy zjadają zapas pola dotyku 44 px */
.kz__zobacz { align-self: center; margin: -4px 0 -14px; color: var(--tusz); }
@media (hover: hover) { .kz__zobacz:hover { color: var(--tusz); } }
@media (hover: hover) { .kz__name a:hover { text-decoration: underline; } }
.kz__name a:active { opacity: .7; }
@media (max-width: 720px) {
  .kz__head { padding: 0 8px 0 20px; }
  .kz__bar, .kz__more, .kz__note { padding-left: 20px; padding-right: 20px; }
  .kz__foot, .kz__empty { padding-left: 20px; padding-right: 20px; }
  .kz__list { padding: 0 20px; }
}
/* niskie okna (telefon poziomo, duży zoom): przewija się cały panel, a nie sama lista, więc pozycje i „do kasy” są zawsze osiągalne */
@media (max-height: 560px) {
  .kz { overflow-y: auto; overscroll-behavior: contain; }
  .kz__list { flex: none; overflow: visible; }
  .kz__head { position: sticky; top: 0; z-index: 1; background: var(--krem); }
}
@media (forced-colors: active) { .kz__track i { background: CanvasText; } .btn, .ikb { border-color: ButtonText; } }

/* ===== PRZYCISKI: najechanie i wciśnięcie jak na eatfishwife.com (pomiar 6.10.2026, decyzja użytkownika) =====
   Przycisk odjeżdża o 5 px w górę i w prawo, a w jego miejscu zostaje twardy cień -5px 5px bez rozmycia; 0,2 s liniowo. Wciśnięty wygląda tak samo jak najechany.
   Dotyczy przycisków z napisem (główne, „do koszyka”, pigułki filtrów, pauza filmów); nie dotyczy przycisków ikonowych, kafli wyboru ani przycisków kart chutney,
   które mają własny ruch. `body` w selektorze: reguła ma wygrać z :active modułów (scale). --cien: kolor cienia, na ciemnym tle krem. */
body :is(.btn, .pp__cta, .pd__cta, .pl__dodaj, .kl__add, .pr__hold, .pl__pill, .kl__pill, .kw__op) { transition: box-shadow .2s linear, transform .2s linear, opacity .3s; }
@media (hover: hover) { body :is(.btn, .pp__cta, .pd__cta, .pl__dodaj, .kl__add, .pr__hold, .pl__pill, .kl__pill, .kw__op):not([aria-disabled="true"]):hover { transform: translate(5px, -5px); box-shadow: -5px 5px 0 0 var(--cien, var(--tusz)); } }
body :is(.btn, .pp__cta, .pd__cta, .pl__dodaj, .kl__add, .pr__hold, .pl__pill, .kl__pill, .kw__op):not([aria-disabled="true"]):active { transform: translate(5px, -5px); box-shadow: -5px 5px 0 0 var(--cien, var(--tusz)); }
.hero, .pp__haslo { --cien: var(--krem); }
@media (prefers-reduced-motion: reduce) { body :is(.btn, .pp__cta, .pd__cta, .pl__dodaj, .kl__add, .pr__hold, .pl__pill, .kl__pill, .kw__op) { transition: none; } }