/* ==========================================================================
   SERWIS v2 — ETAP 1 (SPEC_serwis_v2_etap1_v2.md): HOME (H2–H7), strona produktu Monokarma 180 g i Topper Stawy 180 g.
   Ładowane PO site.css (base.njk, tylko strony v2 i HOME). Tokeny, kroje i komponenty systemu bez zmian: nagłówek, stopka, `.wl-btn`/`.wl-link`/`.wl-chip`, kafel `.wl-tile`,
   akordeon FAQ (`.wl-qa` + `.wl-pm`), koła 0% (`.wl-zero__*`, `clip-path`), `.wl-sh` (jedyna kreska), `border-radius:0`, zero cieni, zero surowych HEX, zero nowych krojów.
   Nowe komponenty (nazwane w specu): AlfaStage (`.v2-alfa`), ProductFacts (`.v2-facts`), RoleSection/`.v2-stmt`, FeedingTeaser (`.v2-result`), ExpertProof (`.v2-expert`), PurchaseBlock (`.v2-buy`),
   UsageSequence (`.v2-seq`), UsageScene (`.v2-usage`), Worlds/TrustPaths/FamilyGrid (HOME).
   RUNDA 3 (BRIEF R3 2026-10-01): minimalizm — zdjęte kreski/ramki/podkreślenia (`.wl-sh`, akordeon, opcje kolumn, ZOBACZ, pasek kart), więcej oddechu (sekcje białe 72/128 px), nagłówek sekcji `.v2-sec-h`, dawkowanie inline, lista 0% pionowa, „W skrócie” czarna.
   Powierzchnie (`data-surface`): sku · orange (HOME + „0% ŚCIEMY.” na stronach Monokarmy, decyzja właściciela 2026-10-02) · black · white · photo · tiles. Reguły R1–R6 sprawdza test V2-RHYTHM na wyrenderowanym HTML.
   ========================================================================== */

:root{
  --v2-hdr:74px;                       /* sticky nagłówek: 72 px belki + 2 px kreski */
  --btn-gap:32px;                      /* odstęp nad przyciskiem (jak --btn-gap karuzeli v2): ≥ 32 px < 800 px, 40 px ≥ 800 px */
  --v2-h2:clamp(2.5rem,1.1rem + 5.4vw,5.25rem);
}
@media (min-width:800px){:root{--btn-gap:40px;}}

/* ---------- POWIERZCHNIE ---------- */
[data-surface="orange"]{background:var(--wl-orange);color:var(--wl-black);}
[data-surface="black"]{background:var(--wl-black);color:var(--wl-paper);}
[data-surface="white"],[data-surface="tiles"]{background:var(--wl-white);color:var(--wl-black);}
[data-surface="sku"]{background:var(--sku,var(--wl-orange));color:var(--sku-ink,var(--wl-black));}
[data-surface="photo"]{background:var(--sku,var(--wl-orange));color:var(--wl-black);}
[data-surface="black"] h2,[data-surface="black"] h3{color:var(--wl-white);}
[data-surface="black"] .wl-lbl{color:var(--wl-paper);}

/* ---------- WSPÓLNE ELEMENTY ---------- */
.v2-sub{font:400 1.125rem/1.45 var(--wl-body);margin:20px 0 0;max-width:32ch;text-wrap:pretty;}
.v2-small{font-size:14px;line-height:1.45;margin:0 0 .6em;max-width:58ch;}
/* Przycisk i link akcji: odstęp NAD nimi ≥ --btn-gap (styl `.wl-btn`/`.wl-link` bez zmian, tylko margines wyjścia). */
.v2-cta{margin:var(--btn-gap) 0 0;max-width:none;}
.v2-kicker{font:600 12px/1.2 var(--wl-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sku,var(--wl-orange));margin:0 0 16px;max-width:none;}

/* ---------- `.v2-stmt` — sekcja-teza: jedna myśl na ekran ----------
   < 800 px: min-height 80svh (jedna teza na ekran); ≥ 800 px: ekran pod sticky belką. Grupa treści stoi w pionowym środku sekcji. Alfa (AlfaStage) jest elementem tej samej sekcji. */
.v2-stmt{
  --sh:80svh;
  --gut:max(var(--wl-pad),calc(50cqw - var(--wl-col) / 2));
  container-type:inline-size;position:relative;overflow:clip;
  min-height:var(--sh);display:flex;align-items:center;padding:48px 0;
}
@media (min-width:800px){
  .v2-stmt{--sh:calc(100svh - var(--v2-hdr));padding:72px 0;}
}
.v2-stmt__in{width:100%;max-width:calc(var(--wl-col) + 2 * var(--wl-pad));margin:0 auto;padding:0 var(--wl-pad);}
.v2-stmt__txt{min-width:0;}
.v2-stmt__txt--wide{max-width:var(--wl-col);}
.v2-stmt h2,.v2-stmt h1{
  font:900 var(--v2-h2)/.9 var(--wl-display);text-transform:uppercase;letter-spacing:-.012em;margin:0;
  max-width:none;overflow-wrap:normal;text-wrap:balance;
}
.v2-stmt .v2-cta .wl-link{padding-left:2px;}

/* ---------- ALFASTAGE ----------
   Zmienne z partialu: --ar (proporcje pliku), --b (spad za prawą krawędź, ułamek szerokości wilka, ≤ 0,20). Wysokość = min(udział wysokości sekcji, miejsce obok tekstu / (1 − b) / proporcje):
   szerokość wilka NIGDY nie wchodzi w tekst, głowa zawsze cała (ogon wychodzi za krawędź). Telefon: Alfa w przepływie pod tekstem, przy dolnej krawędzi sekcji. */
.v2-stmt--alfa{align-items:stretch;padding:96px 0 0;min-height:72svh;}   /* telefon: 72svh (nie 80), żeby Alfa zajmowała ≥ 35 % sekcji także przy szerokiej pozie; H2 niżej (96 px), by odstęp H2 kolejnych tez był ≥ 560 px */
.v2-stmt--alfa .v2-stmt__in{display:flex;flex-direction:column;justify-content:space-between;gap:28px;}
.v2-alfa{
  --ah:min(calc(var(--sh) * .44),calc(100cqw / (1 - var(--b)) / var(--ar)));
  --aw:calc(var(--ah) * var(--ar));
  position:relative;align-self:flex-end;flex:none;width:var(--aw);height:var(--ah);
  margin:0 calc(-1 * (var(--wl-pad) + var(--b) * var(--aw))) 0 0;pointer-events:none;
}
.v2-alfa img{display:block;width:100%;height:100%;max-width:none;}
.v2-alfa--flip img{transform:scaleX(-1);}
@media (min-width:800px){
  .v2-stmt--alfa{align-items:center;padding:72px 0;min-height:var(--sh);}
  .v2-stmt--alfa .v2-stmt__in{display:block;}
  .v2-stmt--alfa .v2-stmt__txt{width:var(--txtw);max-width:var(--txtw);}
  .v2-stmt{--txtw:clamp(19rem,40cqw,35rem);--gap:32px;}
  .v2-stmt.v2-stmt--narrow{--txtw:clamp(17rem,30cqw,26rem);--gap:24px;}
  .v2-stmt.v2-stmt--narrow.v2-stmt--long{--txtw:clamp(30rem,62cqw,48rem);}   /* toppery (2026-10-02, krytyk UX): hasło „DODAJ STAWY DO MISKI.” przy 84 px w kolumnie 272–416 px łamało się w 3–4 wiersze i zostawiało 437–584 px pustki przed Alfą; kolumna do 768 px (48 rem; najdłuższy wiersz „POKARMOWY DO MISKI.” ma 718 px przy 84 px) = najwyżej 2 wiersze przy 1280 / 1440 / 1920, Alfa (≤ 64 % wysokości sekcji) dostaje resztę (--avail); telefon bez zmian (reguła tylko od 800 px) */
  .v2-buy.v2-stmt--long h2{max-width:none;}   /* `.v2-buy h2{max-width:14ch}` (≈ 500 px przy 84 px) nie zawęża szerszej kolumny */
  .v2-stmt.v2-stmt--tight{--txtw:clamp(19rem,40cqw,31rem);--gap:16px;}   /* R5: HOME „Jedna zdobycz, jedna decyzja.” z alfa-62-atak (wyjście ≤ 8 %): tekst nie szerszy niż samo hasło, żeby wilk miał ≥ 55 % wysokości sekcji na 1440×900 */   /* krótkie hasło (M2, TS4): mniej miejsca dla tekstu = większa Alfa */
  .v2-alfa{
    --avail:calc(100cqw - var(--gut) - var(--txtw) - var(--gap));
    --ah:min(calc(var(--sh) * .64),calc(var(--avail) / (1 - var(--b)) / var(--ar)));
    position:absolute;right:calc(-1 * var(--b) * var(--aw));bottom:0;margin:0;
  }
}

/* ---------- M1 · PRODUCTHERO (reużywa `.wl-hero` / `.wl-id` / `.wl-shot`; bez linii roli, dawkowania, meta i podpisu) ---------- */
.v2-hero{grid-template-areas:"id" "shot";}
.v2-hero .wl-id{grid-area:id;}
.v2-hero .wl-shot{grid-area:shot;}
.v2-h1{margin:0;font-size:inherit;line-height:1;max-width:none;}
.v2-h1__name{margin:0 0 14px;color:var(--sku-ink);}
.v2-h1__d{
  display:block;font:900 clamp(2.75rem,1.5rem + 6.2vw,5.25rem)/.88 var(--wl-display);text-transform:uppercase;
  letter-spacing:-.012em;text-wrap:balance;overflow-wrap:normal;
}
.v2-hero .wl-id__chip{margin:18px 0 0;}
.v2-hero .v2-cta{margin-top:var(--btn-gap);}
/* RUNDA 3 (BRIEF R3 §5): hero = pełnoprawny ekran, nie baner. Mało elementów, dużo przestrzeni: tekst z oddechem u góry, słój bez ściskania, pieczęć z odstępem od słoja i od dołu.
   Telefon/tablet w pionie (układ jednokolumnowy do 959 px): sekcja ≥ jeden ekran pod nagłówkiem (100svh − nagłówek − dolny inset), słój do 44 svh (R2: ≤ 36 svh i „śrubowany” pod pieczęć), pieczęć pod słojem z 36 px oddechu. */
@media (max-width:959px){
  .v2-hero{min-height:calc(100svh - var(--v2-hdr) - env(safe-area-inset-bottom,0px));}
  .v2-hero .wl-id{padding-top:28px;padding-bottom:14px;}
  .v2-hero .wl-shot{padding-bottom:max(36px,calc(20px + env(safe-area-inset-bottom,0px)));}
  .v2-hero .wl-shot__field{aspect-ratio:auto;padding:0 11% 0;}
  .v2-hero .wl-shot__field img{max-height:max(200px,min(44svh,420px));}
  .v2-hero .wl-hero__seal{margin-top:14px;}   /* R5 (właściciel 2026-10-01): pieczęć tuż pod słojem, jedna grupa (słój + pieczęć) w pierwszym ekranie telefonu, nie dół sekcji */
}
@media (min-width:960px){
  .v2-hero{grid-template-areas:"id shot";grid-template-rows:auto;}
  .v2-hero .wl-id{grid-area:id;align-self:center;padding:112px 64px 112px max(24px,calc((100vw - 1120px)/2));}
  .v2-hero .wl-shot{grid-area:shot;min-height:max(860px,calc(100svh - var(--v2-hdr)));}
  /* R5 (właściciel 2026-10-01): słój i pieczęć „jedna pod drugą”, jako jedna zbalansowana grupa w pionowym środku pola (`.wl-shot` centruje: justify-content:center);
     pole słoja nie rozciąga się już na całą wysokość (flex:none), więc pieczęć nie spada na dół sekcji. Dużo bieli wokół grupy jest zamierzone. */
  .v2-hero .wl-shot__field{flex:none;padding:0 12%;}
  .v2-hero .wl-hero__seal{height:150px;margin:24px auto 0;}
  /* 2026-10-07 (po jednolitym kadrze studia): wysokie słoje 500/850 g (proporcja ≈ 0,53) wypychały grupę słój + pieczęć poza pierwszy ekran i rozciągały hero. Wysokość słoja ograniczona tak, żeby dolna krawędź pieczęci (150 px + 24 px odstępu) została ≥ 24 px nad dołem okna przy grupie wyśrodkowanej w hero (wysokość hero = max(860 px, 100svh − nagłówek) bez zmian, więc kolumna tekstu stoi jak na 180 g); podłoga 380 px ≥ najwyższy słój 180 g / topper (≈ 381 px), więc te strony bez zmian. */
  .v2-hero .wl-shot__field img{max-height:max(380px,calc(200svh - 2 * var(--v2-hdr) - 222px - max(860px,calc(100svh - var(--v2-hdr)))));}
  .v2-h1__d{font-size:clamp(2.75rem,.6rem + 3.6vw,4.25rem);}   /* kolumna tekstu ma 46 %: „PEŁNY POSIŁEK.” zostaje w jednym wierszu */
}

.v2-hero .v2-hero__sub{margin:14px 0 0;max-width:30ch;}   /* runda 2 (§11.1, §20, §22): podtytuł hero po chipie klasy */

/* ---------- M3 · PRODUCTFACTS ---------- */
.v2-facts{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:10px;}
.v2-facts li{font:900 clamp(1.75rem,1rem + 3.6vw,3.25rem)/.95 var(--wl-display);text-transform:uppercase;letter-spacing:-.01em;color:var(--wl-paper);margin:0;}
.v2-facts__accent{color:var(--wl-orange);}   /* runda 4 składu: „WIEPRZOWINA” w czarnym bloku faktów Monokarmy (tekst bez zmian) */

/* ---------- M4 · COMPOSITION (runda 5, właściciel 2026-10-01): skład ROZWINIĘTY, jak na produkcie, z udziałami. Czysta, przestronna lista w kolejności z etykiety: nazwa po lewej, procent po prawej
   (wyrównany do prawej = jedna oś, cyfry tabelaryczne), bez ramek, kresek i leaderów. Lista ma wąską kolumnę (nazwa i liczba blisko siebie); pod nią etykieta mono dodatków i krótka linia objaśnienia. ---------- */
.v2-acc{max-width:66ch;}
.v2-acc.wl-faqs,.v2-acc .wl-qa{border:0;}   /* R3 §1.1: akordeon bez kresek (używa go dawkowanie: pełna tabela) */
.v2-comp__list{list-style:none;margin:40px 0 0;padding:0;max-width:32rem;}
.v2-comp__row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:0;padding:6px 0;font:400 clamp(1.0625rem,1rem + .35vw,1.25rem)/1.35 var(--wl-body);}
.v2-comp__name{min-width:0;}
.v2-comp__pct{flex:none;min-width:5.5ch;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
.v2-comp__group{margin:32px 0 0;color:var(--wl-black);}
.v2-comp__list--add{margin-top:6px;}
.v2-comp__read{color:var(--wl-black);margin:32px 0 0;max-width:56ch;}

/* ---------- M5 · ZEROPERCENT (runda 3, BRIEF R3 §8): lista PIONOWA — kółko 0% po lewej, nazwa po prawej, jedna oś, stały rytm. Kółka w kolorze SKU na czerni (`clip-path`, nie promień), etykiety w papierze. ---------- */
.v2-zero__list{margin-top:48px;}
.v2-zero .wl-zero__list{display:flex;flex-direction:column;gap:20px;}
.v2-zero .wl-zero__item{flex-direction:row;align-items:center;gap:28px;}
.v2-zero .wl-zero__disc{background:var(--sku,var(--wl-orange));width:72px;height:72px;flex:none;}
.v2-zero .wl-zero__disc span{color:var(--wl-black);font-size:30px;}
.v2-zero .wl-zero__label{color:var(--wl-paper);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);line-height:1;}
@media (min-width:900px){.v2-zero .wl-zero__list{gap:24px;}.v2-zero .wl-zero__disc{width:80px;height:80px;}}
/* wariant B (decyzja właściciela 2026-10-02): „0% ŚCIEMY.” na POMARAŃCZU (`wl-on-color`, tylko strony Monokarmy). Trzy korekty — dysk w kolorze SKU znika na pomarańczowym polu, więc odwrócenie:
   czarny dysk, pomarańczowa cyfra (6,47 : 1 na czerni), etykieta czarna (nie papier). Wymiary, rytm i układ bez zmian; Stawy zostają na czerni (reguły wyżej). */
.v2-zero.wl-on-color .wl-zero__label{color:var(--wl-black);}
.v2-zero.wl-on-color .wl-zero__disc{background:var(--wl-black);}
.v2-zero.wl-on-color .wl-zero__disc span{color:var(--wl-orange);}
/* R5 (właściciel 2026-10-01: pokazać WSZYSTKIE pozycje listy, nie cztery): siedem wierszy na desktopie w DWÓCH kolumnach (kolejność danych w dół: 4 + 3), żeby sekcja nie rosła ponad jeden ekran; ta sama oś kółek i etykiet w każdej kolumnie. Telefon: jedna kolumna. */
@media (min-width:900px){
  .v2-zero .wl-zero__list{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--zrows,4),auto);grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;row-gap:24px;}
}

/* ---------- NAGŁÓWEK SEKCJI NA BIELI (runda 3, BRIEF R3 §1.1): display bez kreski — hierarchię daje skala i oddech, nie linia `.wl-sh` ---------- */
.v2-sec-h{font:900 clamp(2.25rem,1.1rem + 4.4vw,4.5rem)/.92 var(--wl-display);text-transform:uppercase;letter-spacing:-.012em;margin:0;max-width:none;text-wrap:balance;}
.v2-sec-sub{margin:20px 0 0;max-width:62ch;}
.v2-tiles-sec .v2-sec-h{margin-bottom:36px;}
.v2-tiles-sec .v2-sec-h + .v2-sec-sub{margin-top:-16px;margin-bottom:36px;}
.wl-sh{border-top:0;padding-top:0;}   /* kreska nagłówka sekcji (site.css) zdjęta na wszystkich sekcjach v2; pozostałe `.wl-sh` (np. ingredient-cards) bez kreski */
.wl-sec[data-surface]{padding-top:72px;padding-bottom:72px;}
@media (min-width:800px){.wl-sec[data-surface]{padding-top:128px;padding-bottom:128px;}}
.v2-tiles-sec + .v2-tiles-sec{padding-top:0;}   /* dwie sekcje kafli obok siebie: jeden oddech między nimi, nie dwa */

/* ---------- M6 / TS7 · DAWKOWANIE INLINE (runda 3, BRIEF R3 §10–§13, §22): biel; PRZYKŁAD z tabeli → nota → „A ILE WAŻY TWÓJ PIES?” + pole masy + POLICZ → wynik + słoiki → pełna tabela w <details> ---------- */
.v2-feed__in{max-width:var(--wl-col);}
.v2-feed__const{margin:18px 0 0;font-size:14px;color:var(--wl-black);}
.v2-feed__ex{margin-top:56px;}
.v2-feed__eyebrow{margin:0 0 12px;font-size:14px;color:var(--wl-black);}
.v2-result{
  display:flex;flex-wrap:wrap;align-items:center;gap:.06em .28em;margin:0;max-width:none;
  font:900 clamp(2.5rem,1.2rem + 6.4vw,6.25rem)/.92 var(--wl-display);text-transform:uppercase;letter-spacing:-.012em;
}
.v2-result--ex{font-size:var(--ex-fs);}   /* przykład: wynik z tabeli, mniejszy niż odpowiedź personalna */
.v2-feed{--live-fs:clamp(3.25rem,1.4rem + 8vw,7rem);--ex-fs:clamp(1.875rem,1rem + 3.8vw,3.5rem);--jar-s:.4;--jar-hmm:164;--jar-h:calc(var(--jar-hmm) * var(--jar-s) * 1px);--jars-rsv:calc(64px + var(--jar-h));}   /* rozmiar liczby osobistej; ten sam token rezerwuje wysokość slotu (`.v2-feed__personal`) */
.v2-result--live{font-size:var(--live-fs);}
.v2-result__arr{display:inline-flex;color:var(--sku,var(--wl-orange));}
.v2-result__arr .wl-ic{width:.5em;height:.5em;}
.v2-result__arr .wl-ic path{stroke-width:2.4;}
.v2-note{margin:18px 0 0;}
/* R5 (właściciel 2026-10-01): slot „PRZYKŁAD ↔ wynik osobisty”. Oba stany leżą w JEDNEJ komórce siatki (wysokość = większy z nich), przełączane widocznością: zero skoku układu, a przykład po wyniku znika
   (visibility:hidden wyjmuje go też z drzewa dostępności). Treść przy dolnej krawędzi komórki, więc nota orientacyjna pod slotem stoi tuż pod liczbą w obu stanach. */
.v2-feed__swap{display:grid;}
.v2-feed__swap > *{grid-area:1 / 1;min-width:0;align-self:end;}
.v2-result--live .v2-result__a{font-size:var(--ex-fs);}   /* fix r3: wynik osobisty w tym samym wzorcu co przykład (masa → gramy): część „masa” w rozmiarze przykładu, część „gramy” w rozmiarze wyniku */
.v2-feed__personal{visibility:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(var(--live-fs) * .98 + var(--ex-fs) * .92 + var(--jars-rsv));}   /* rezerwa na wysokość wyniku osobistego: wiersz „masa” + wiersz „gramy” (telefon: dwa wiersze) + słoiki z podpisem — slot nie rośnie po wyniku (V2-DOSE-SLOT), treść przy dolnej krawędzi, tuż nad notą */
@media (min-width:800px){.v2-feed{--jar-s:.5;}}   /* skala pictogramów słoików: px na mm słoika (jedna dla 180/500/850 g); telefon .4 → 850 g ma 66 px wysokości, ≥ 800 px .5 → 82 px */
.v2-feed[data-jar="180"]{--jar-hmm:66.9;}   /* rezerwa slotu = wysokość słoika TEJ strony w mm (JARS w dosing-inline.js): 66,9 / 118 / 164; strona z wyborem produktu (/niezbednik/ile-podawac/) rezerwuje najwyższy (850 g = 164 mm) */
.v2-feed[data-jar="500"]{--jar-hmm:118;}
@media (min-width:1100px){.v2-feed__personal{min-height:calc(var(--live-fs) * .92 + var(--jars-rsv));}}   /* ≥ 1100 px „masa → gramy” mieści się w jednym wierszu */
.v2-feed__ex[data-state="result"] .v2-feed__example{visibility:hidden;}
.v2-feed__ex[data-state="result"] .v2-feed__personal{visibility:visible;}
.v2-feed__ex .v2-small + .v2-small{margin-top:10px;}
.v2-stmt .v2-small{color:var(--wl-paper);}
.v2-ask{font:900 clamp(1.75rem,1rem + 3vw,3rem)/.95 var(--wl-display);text-transform:uppercase;letter-spacing:-.01em;margin:0;max-width:none;text-wrap:balance;}
.v2-calc{margin-top:96px;}
.v2-calc__form{margin-top:28px;max-width:60rem;}
.v2-calc__row{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;}
.v2-calc__row .wl-field{margin:0;flex:0 1 220px;}
.v2-calc__row .wl-btn{min-height:52px;}
.v2-calc .wl-field__hint{font-size:14px;color:var(--wl-black);margin:10px 0 0;}
.v2-calc .wl-field__error{margin-top:12px;}
.v2-cols{border:0;padding:0;margin:32px 0 8px;min-width:0;}
.v2-cols legend{font:600 12px/1.3 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;padding:0;margin:0 0 6px;}
.v2-cols .wl-columns{gap:0;}
.v2-cols .wl-columns label{border:0;padding:8px 0;min-height:44px;font-size:16px;}   /* R3 §1.1: opcje kolumn bez ramek (okrągły znacznik radio wystarcza) */
@media (min-width:900px){.v2-cols .wl-columns{display:grid;grid-template-columns:repeat(3,max-content);gap:0 36px;}}
.v2-calc .wl-checkline{margin:6px 0 0;}
.v2-calc__out{margin-top:40px;}
.v2-calc__out:empty{display:none;}
.v2-calc__out .v2-note{margin-top:20px;}
.v2-method{margin-top:28px;max-width:62ch;}
/* słoiki: dawka dobowa ÷ masa netto TEGO SKU; pełne = 100 % wypełnienia, ostatni proporcjonalnie (obrys czarny, wypełnienie w kolorze SKU) */
.v2-jars{margin:32px 0 0;}
.v2-jars__row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 10px;}
.v2-jar{display:block;flex:none;width:calc(var(--jw) * var(--jar-s) * 1px);height:auto;overflow:visible;}   /* --jw = szerokość sylwetki w mm (ustawia skrypt z JARS) */
.v2-jar__line{fill:none;stroke:var(--wl-black);stroke-width:2.2px;vector-effect:non-scaling-stroke;}   /* grubość kreski stała w px, niezależna od skali słoika */
@media (min-width:800px){.v2-jar__line{stroke-width:2.8px;}}
.v2-jar__fill{fill:var(--sku,var(--wl-orange));}
.v2-jars__cap{font:700 12px/1.3 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;margin:16px 0 0;}
/* pełna tabela: <details> w markupie FAQ (bez kresek, znak +) */
.v2-table{margin-top:72px;}
.v2-table .wl-qa__a{padding-right:0;max-width:none;}
.v2-table .wl-table-wrap{max-width:46rem;}
.v2-table table.wl-dosing-table thead th{font-size:12px;}
.v2-table table.wl-dosing-table caption{font-size:12px;color:var(--wl-black);}
.v2-table .v2-small{margin-top:20px;}

/* ---------- M7 / H4b · EXPERTPROOF ---------- */
@media (max-width:799px){.v2-expert{padding-top:64px;}}   /* fix r1: odstęp H2 zero → ekspert ≥ 560 px na 375 (V2-GEOM) */
.v2-expert__in{display:grid;gap:28px;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "photo" "quote";}
.v2-expert__in > h2{grid-area:head;}
/* polish r1 (orzeczenie UX 2026-10-02): „REKLAMOM, SPRAWDŹ.” to jeden nierozdzielny ciąg (filtr `bindComma` w expert.njk) — przecinek nie jest punktem łamania, wiersze: „NIE WIERZ” / „REKLAMOM, SPRAWDŹ.”;
   poniżej ~390 px token --v2-h2 (40 px) jest za duży dla 8,4 em tego ciągu (zmierzone: 333 px przy 40 px), więc TEN nagłówek dostaje płynny rozmiar min(token, (100vw − 2 × --wl-pad) / 8,4) — 33,3 px przy 320, 38,1 przy 360, 39,9 przy 375 */
.v2-nw{white-space:nowrap;}
@media (max-width:799px){.v2-expert__in > h2:has(.v2-nw){font-size:min(var(--v2-h2),calc((100vw - 2 * var(--wl-pad)) / 8.4));}}
.v2-portrait{grid-area:photo;margin:0;width:min(62%,300px);aspect-ratio:4 / 5;background:var(--wl-black);overflow:hidden;}
.v2-portrait img{display:block;width:100%;height:100%;object-fit:cover;}
.v2-expert__q{grid-area:quote;min-width:0;}
/* wariant B (decyzja właściciela 2026-10-02): blok eksperta na CZERNI (`wl-on-black`, tylko strony Monokarmy). Zdjęcie na czerni: prawa i górna krawędź (1,2 : 1 i 1,95 : 1) zlewają się z tłem —
   kreska 2 px w bieli wyznacza krawędź obrazu (nie ozdoba). Obramowanie wewnątrz pudełka (border-box): wymiary i siatka bez zmian, kreska równo z krawędzią kolumny tekstu. */
.v2-expert.wl-on-black .v2-portrait{border:2px solid var(--wl-white);}
.v2-expert__sub{margin:0 0 20px;max-width:none;}   /* runda 2 (§8): zdanie nośnika dowodu nad cytatem (tylko bez linku; z linkiem R4 stoi pod podpisem jako `.v2-cta` > `.wl-link`) */
.v2-quote{margin:0;}
.v2-quote blockquote{margin:0;}
.v2-quote blockquote p{font:italic 600 clamp(1rem,.92rem + .7vw,1.5rem)/1.3 var(--wl-body);max-width:34ch;margin:0;text-wrap:pretty;}
.v2-quote blockquote p{max-width:none;}
@media (max-width:799px){.v2-quote blockquote p{font-size:1rem;font-weight:500;}}   /* telefon: cytat ≤ 3 linie (V2-SCAN) */
.v2-quote figcaption{display:flex;flex-direction:column;gap:3px;margin-top:20px;font:700 12px/1.35 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;}
/* R5 (właściciel 2026-10-01): imię i nazwisko eksperta czytelnie odróżnione od podpisu — pogrubione, krój tekstowy (nie mono wersaliki), jedna linia; „lekarz weterynarii” zwykłą wagą pod spodem;
   linia ujawnienia współpracy bez zmian (mono, wersaliki), z odrobiną oddechu nad sobą. */
.v2-quote__name{font:700 clamp(1.125rem,1rem + .6vw,1.375rem)/1.25 var(--wl-body);letter-spacing:0;text-transform:none;white-space:nowrap;}
.v2-quote__line:not(.v2-quote__disc){font:400 1rem/1.35 var(--wl-body);letter-spacing:0;text-transform:none;}
.v2-quote__disc{margin-top:8px;}
@media (min-width:800px){
  .v2-quote blockquote p{max-width:34ch;}
  .v2-expert__in{grid-template-columns:minmax(0,22rem) minmax(0,1fr);grid-template-areas:"head head" "photo quote";column-gap:72px;row-gap:32px;align-content:center;align-items:start;}   /* 800–1199: nagłówek NAD zdjęciem na pełną szerokość (jak na telefonie), nie w wąskiej kolumnie obok */
  .v2-portrait{width:100%;}
  .v2-expert__in > h2:has(.v2-nw){max-width:9em;}   /* pełna szerokość 720–1120 px mieściłaby cały nagłówek w JEDNYM wierszu (13 em); 9 em (ciąg „REKLAMOM, SPRAWDŹ.” = 8,4 em) wymusza dwa wiersze „NIE WIERZ” / „REKLAMOM, SPRAWDŹ.”; tylko nagłówki z ciągiem nierozdzielnym */
}
@media (min-width:1200px){.v2-expert__in{grid-template-areas:"photo head" "photo quote";column-gap:64px;}.v2-expert__in > h2{align-self:end;}}   /* kolumna H2 696 → 704 px: „NIE WIERZ / REKLAMOM, SPRAWDŹ.” (699,4 px) mieści się w dwóch wierszach, bez jednowyrazowego „SPRAWDŹ.” */

/* ---------- KAFLE (M8 / M9 / TS9 / H5): kolor niosą aple SKU; linia roli formatu ---------- */
.v2-tiles{--n:3;}
.wl-tile__role{font:700 12px/1.3 var(--wl-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wl-black);}
.v2-tiles__label{margin:40px 0 20px;max-width:none;}
.v2-sec-h + .v2-tiles__label,.v2-sec-sub + .v2-tiles__label{margin-top:32px;}
.v2-tiles__label + .v2-tiles__note{font-size:16px;line-height:1.45;margin:-8px 0 20px;max-width:52ch;}   /* dopowiedzenie pod podnagłówkiem grupy (TS9) */
@media (min-width:800px){
  .wl-tiles.v2-tiles{grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:32px;max-width:calc(var(--n) * 300px + (var(--n) - 1) * 32px);}
}
@media (min-width:1100px){.wl-tiles.v2-tiles{grid-template-columns:repeat(var(--n),minmax(0,1fr));}}
.v2-tiles-sec .wl-tile__name{font-size:17px;}
/* Fix r1 (test V2-FONTS: mono ≥ 12 px, tekst ≥ 14 px): chip klasy i meta kafla w komponentach v2 (strony produktu, H5) — 12 px; system w site.css (strony v1) bez zmian */
.v2-page .wl-chip,.v2-tiles .wl-chip{font-size:12px;letter-spacing:.06em;}
.v2-tiles .wl-tile__meta,.v2-tiles .wl-tile__role{font-size:12px;}

/* ---------- M9a · SHORTFACTS (runda 3, BRIEF R3 §16): duża czarna apla (`.v2-stmt`), 3–5 faktów dużym krojem tekstowym, bez ramek, kresek i ikon; pod nimi cichy blok referencyjny ---------- */
.v2-short__facts{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:22px;max-width:44rem;}
.v2-short__facts li{margin:0;font:600 clamp(1.25rem,1rem + 1.3vw,2rem)/1.2 var(--wl-body);color:var(--wl-paper);text-wrap:pretty;}
.v2-short__body{max-width:62ch;margin-top:72px;}
.v2-short__body p{font-size:15px;line-height:1.5;margin:0 0 .8em;max-width:none;color:var(--wl-paper);}
.v2-short__meta{font:600 12px/1.3 var(--wl-mono);letter-spacing:.14em;text-transform:uppercase;margin:1.2em 0 0;}
.v2-short__guide{margin:8px 0 0;}

/* ---------- M10 / TS10 · PURCHASEBLOCK ----------
   Fix r1 (ux-ui-director HIGH): pełna teza `.v2-stmt` (jedyny „Kup” strony nie może być najmniejszą sekcją). Grupa treści leży nieco poniżej środka (większy górny padding),
   więc na telefonie przycisk stoi w dolnej połowie ekranu; odstęp nad przyciskiem ≥ --btn-gap (32/40 px). Dolny padding uwzględnia dolny inset (pływający pasek przeglądarki). */
.v2-buy.v2-stmt{padding:96px 0 max(48px,calc(32px + env(safe-area-inset-bottom)));}
.v2-buy h2{max-width:14ch;}
.v2-closing{margin:22px 0 0;display:flex;flex-direction:column;gap:6px;font:600 clamp(1.125rem,1rem + .6vw,1.375rem)/1.35 var(--wl-body);max-width:none;}
/* podpis „Alfa”: jak w karuzeli S7 (`.wl2-closing__sign`): krój tekstowy 600, bez wersalików — podpis, nie nagłówek */
.v2-closing__sign{font:600 clamp(1.125rem,1rem + .6vw,1.375rem)/1.3 var(--wl-body);}
.v2-buy .v2-small{margin-top:16px;}
@media (min-width:800px){.v2-buy.v2-stmt{padding:96px 0 max(72px,calc(48px + env(safe-area-inset-bottom)));}}
/* R5: końcowa sekcja Monokarmy z Alfą (AlfaStage, `.v2-stmt--alfa`): na telefonie wilk stoi na dolnej krawędzi sekcji (bez dolnego paddingu), na desktopie jest absolutnie przy dolnej i prawej krawędzi. */
@media (max-width:799px){.v2-buy.v2-stmt--alfa.v2-stmt--narrow{min-height:72svh;padding-top:56px;padding-bottom:0;}}   /* 72 svh (nie 80 jak inne tezy z `--narrow`) i 56 px u góry: Alfa ≥ 35 % wysokości sekcji (375×812 i 390×844) */

/* ---------- TS2 · USAGESEQUENCE ---------- */
.v2-seq{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.v2-seq li{display:flex;align-items:center;gap:22px;margin:0;font:900 clamp(2.5rem,1.2rem + 6vw,5.5rem)/.95 var(--wl-display);text-transform:uppercase;letter-spacing:-.012em;color:var(--wl-paper);}
.v2-seq__arr{display:inline-flex;color:var(--sku,var(--wl-orange));transform:rotate(90deg);}   /* telefon: w kolumnie strzałka wskazuje w dół */
.v2-seq__arr .wl-ic{width:.5em;height:.5em;}
.v2-seq__arr .wl-ic path{stroke-width:2.4;}
.v2-seq__cap{margin:36px 0 0;}
@media (min-width:800px){
  .v2-seq{flex-direction:row;align-items:center;gap:28px;}
  .v2-seq__arr{transform:none;}
}

/* Runda 2: sekwencja (3 kroki w kolumnie) + krótsze hasło „STAWY.” po niej — na telefonie odstęp H2 → H2 ≥ 560 px (V2-GEOM): sekwencja i „po co ten wariant” są odrobinę wyższe niż 72/80 svh */
@media (max-width:799px){#jak-uzywac{min-height:90svh;}.v2-stmt--alfa.v2-stmt--narrow{min-height:80svh;}}

/* ---------- TS3 · USAGESCENE (tylko gdy jest zdjęcie) ---------- */
.v2-usage{position:relative;}
.v2-usage__fig{margin:0;}
.v2-usage__fig img{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;}
@media (min-width:800px){.v2-usage__fig img{aspect-ratio:16 / 9;}}
.v2-usage__txt{position:absolute;top:0;left:0;right:0;padding:32px var(--wl-pad) 0;max-width:calc(var(--wl-col) + 2 * var(--wl-pad));margin:0 auto;}
.v2-usage h2{font:900 var(--v2-h2)/.9 var(--wl-display);text-transform:uppercase;letter-spacing:-.012em;margin:0;max-width:12ch;}

/* ---------- TS5 · INGREDIENTCARDS (tryb „b”, po dossier; dziś off) ---------- */
.v2-cards__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.v2-card{padding-top:0;}   /* R3 §1.1: bez paska nad kartą */
.v2-card__name{font:800 1.25rem/1.05 var(--wl-display);text-transform:uppercase;margin:0 0 8px;}
@media (min-width:800px){.v2-cards__list{grid-template-columns:repeat(4,minmax(0,1fr));}}

/* ==========================================================================
   HOME (H2–H7) — saga (H1) bez zmian
   ========================================================================== */

/* H2 / H7 — teza marki na pomarańczu; H7 = Alfa siedzi + pieczęć 100/0 (jedyna na HOME) */
.v2-stmt--orange .v2-seal{display:block;width:clamp(140px,8px + 16vw,230px);height:auto;margin:32px 0 0;}
.v2-stmt--orange .v2-seal + .v2-cta{margin-top:var(--btn-gap);}
.v2-l{display:block;}

/* H3 — „CO TRAFIA DO MISKI?” (runda 3, BRIEF R3 §2): JEDNA biała powierzchnia, dwie równorzędne kolumny; desktop: jedna cienka pionowa kreska między nimi (jedyna), telefon: jedna pod drugą.
   Packshoty: ten sam kafel `.wl-tile__shot` (apla koloru SKU, słoik 180 g) dla Monokarmy i topperów = jedna skala. Zero poziomych kresek, zero pełnoekranowych pól. */
.v2-worlds__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:72px;margin-top:56px;}
.v2-field{min-width:0;}
.v2-field__in{display:flex;flex-direction:column;height:100%;}
.v2-field__txt{flex:1;}
.v2-field__title{font:900 clamp(2.5rem,1.3rem + 5vw,4.5rem)/.9 var(--wl-display);text-transform:uppercase;letter-spacing:-.012em;margin:0;}
.v2-field__line{font:900 clamp(1.5rem,1rem + 2.2vw,2.25rem)/.95 var(--wl-display);text-transform:uppercase;letter-spacing:-.01em;margin:14px 0 0;}
.v2-field__vis{padding:40px 0 0;}
.v2-trio{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:34rem;}
.v2-trio li{margin:0;}
.v2-trio .wl-tile__shot{width:100%;padding:5% 5% 9%;}   /* słoik ~90 % szerokości apli, ta sama apla w obu kolumnach */
.v2-field .v2-cta{margin-top:40px;}
@media (min-width:800px){
  .v2-worlds__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:72px;}
  .v2-field--mono .v2-field__in{padding-right:56px;}
  .v2-field--toppers .v2-field__in{padding-left:56px;border-left:var(--wl-hair);}   /* jedyna kreska: cienka, pionowa, tylko desktop */
}

/* H4 — „Nie wierz nam. Sprawdź.” na czerni (runda 3: tylko SKŁAD, jeden przycisk) */
@media (max-width:799px){.v2-proof.v2-stmt{min-height:92svh;}}   /* telefon: odstęp H2 → H2 ≥ 560 px (V2-GEOM) po zdjęciu kart ze środka sekcji */
.v2-proof .v2-proof__k{margin:40px 0 12px;}
.v2-proof__txt{font-size:1.25rem;line-height:1.4;max-width:34ch;margin:0;}
.v2-proof .v2-cta{margin-top:var(--btn-gap);}
.v2-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;margin-top:56px;}   /* /niezbednik/: karty-ścieżki */
.v2-path{display:flex;flex-direction:column;min-width:0;}
.v2-path .wl-lbl{color:var(--wl-orange);margin:0 0 14px;}
.v2-path__txt{font-size:1.125rem;line-height:1.5;max-width:34ch;margin:0;flex:1;}
.v2-path .v2-cta{margin-top:var(--btn-gap);}
@media (min-width:800px){
  .v2-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;margin-top:72px;}
}

/* H5 — linia (grupy z etykietą i chipem klasy) */
.v2-group{margin-top:48px;}
.v2-group__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 22px;}
.v2-group__label{margin:0;}
.v2-line .wl-sec__link{margin-top:48px;}
@media (min-width:800px){.v2-group{margin-top:64px;}}

/* H6 — Niezbędnik (runda 3, BRIEF R3 §23): zapowiedź huba — cztery pytania jako zwykły tekst (nie lista linków) + jedno wejście */
.v2-ess__q{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:12px;}
.v2-ess__q li{margin:0;font:900 clamp(1.5rem,1rem + 2.2vw,2.5rem)/1 var(--wl-display);text-transform:uppercase;letter-spacing:-.01em;}

/* ==========================================================================
   RUNDA 2 (brief GPT 2026-10-01, ratyfikowany „Wprowadź”): HOME „CO TRAFIA DO MISKI?” z punktami, kafle linii bez „Kup” (cały kafel = link), Niezbędnik
   ========================================================================== */

/* H3 — trzy krótkie punkty w polu (zamiast dopowiedzenia); marker = kwadrat (clip-path nie jest potrzebny: zwykły blok), bez kresek */
.v2-bul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px;max-width:34ch;}
.v2-bul li{position:relative;margin:0;padding-left:20px;font:600 1.0625rem/1.35 var(--wl-body);}
.v2-bul li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:currentColor;}
@media (min-width:800px){.v2-bul{margin-top:10px;}.v2-bul li{font-size:1rem;}}

/* H5 — cały kafel klikalny: link kafla rozciągnięty na `li` (::after), etykieta „ZOBACZ” w stopce kafla (nie jest osobnym linkiem: aria-hidden) */
.v2-line .wl-tile{position:relative;}
.v2-line .wl-tile__link::after{content:"";position:absolute;inset:0;}
.v2-line .wl-tile__link:focus-visible{outline:none;}
.v2-line .wl-tile__link:focus-visible::after{outline:3px solid var(--wl-black);outline-offset:3px;}
.v2-line .wl-tile:hover .wl-tile__img{transform:translateY(-4px);}
.wl-tile__see{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:0 2px;min-height:32px;font:700 12px/1 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--wl-black);
  }
.v2-line .wl-tile:hover .wl-tile__see{background-color:var(--wl-orange);}

/* /niezbednik/ — cztery wejścia: karty-ścieżki z HOME H4 na bieli; pytanie = nagłówek karty */
.v2-ess-hub{padding-top:64px;padding-bottom:72px;}
.v2-ess-hub .v2-cards{margin-top:0;gap:56px 72px;}
.v2-path__q{font:900 clamp(2rem,1.1rem + 3.6vw,3.25rem)/.92 var(--wl-display);text-transform:uppercase;letter-spacing:-.012em;margin:0 0 16px;text-wrap:balance;}
.v2-ess-hub .v2-path__txt{font-size:1.125rem;}
@media (min-width:800px){.v2-ess-hub{padding-top:104px;padding-bottom:112px;}}

/* ==========================================================================
   NIEZBĘDNIK — PODSTRONY /niezbednik/<slug>/ (SPEC_niezbednik_podstrony_v1, 2026-10-01). Szkielet: „← Niezbędnik” (biel) → ekran odpowiedzi (czerń, `.v2-answer`) → sekcje tematu
   (biel / czerń na przemian, `.wl-sec[data-surface]`) → domknięcie `#dalej` (pomarańcz). Tokeny, kroje i komponenty bez zmian; zero kresek, ramek, cieni i szarych teł.
   NOWE modyfikatory (dlaczego nie istniejący komponent):
   · `.v2-answer` — `.v2-stmt` ma 100 svh i centruje grupę w pionie (teza na ekran); ekran odpowiedzi ma wysokość Z TREŚCI, żeby narzędzie/pierwsza sekcja były tuż pod nim;
   · `.v2-pick*` — wybór produktu w „Ile podawać?”: żaden istniejący komponent nie jest radiogroupem z kaflami (kafel `.wl-tile` jest linkiem); tu ten sam kafel jako `<label>` z radiem;
   · `.v2-ess__link` — pytanie na HOME jako `.wl-link` w rozmiarze display pytania (`.wl-link` to 12-px link akcji; pytania są hasłami wielkości 1,5–2,5 rem).
   ========================================================================== */
.v2-nzback{background:var(--wl-white);padding:4px var(--wl-pad) 4px;}
.v2-nzback__in{max-width:var(--wl-col);margin:0 auto;}
.v2-nzback .wl-link{padding-left:0;}
.v2-stmt.v2-answer{min-height:0;display:block;padding:44px 0 56px;}
.v2-answer h1{color:var(--wl-white);}   /* `h1` w site.css jest czarny; inne czarne tezy v2 mają h2 (kolor z `[data-surface=black] h2`) */
.v2-answer__lines{margin-top:24px;display:grid;gap:10px;}
.v2-answer__lines p{font:400 clamp(1.125rem,1rem + .6vw,1.375rem)/1.4 var(--wl-body);margin:0;max-width:34ch;color:var(--wl-paper);text-wrap:pretty;}
@media (min-width:800px){.v2-stmt.v2-answer{padding:80px 0 96px;}.v2-answer__lines{margin-top:32px;}}
.v2-nz__p{font-size:.9375rem;line-height:1.5;max-width:46ch;margin:24px 0 0;}   /* telefon: zwykłe zawijanie (pretty dokładało wiersz przy 120 znakach: V2-SCAN ≤ 3 linii przed akcją) */
@media (min-width:800px){.v2-nz__p{font-size:1.125rem;text-wrap:pretty;}}
.v2-nz__p--lead{margin-top:0;font-weight:600;}
@media (min-width:800px){.v2-nz__p--lead{font-size:clamp(1.25rem,.9rem + 1vw,2rem);line-height:1.25;max-width:34ch;}}
[data-surface="black"] .v2-nz__p{color:var(--wl-paper);}
.v2-nz .wl-sec[data-surface="white"] + .wl-sec[data-surface="white"]{padding-top:0;}   /* dwie białe sekcje obok siebie: jeden oddech, nie dwa */
.v2-nz-sec .v2-sec-h + .v2-nz__p{margin-top:32px;}
.v2-nz-sec .v2-nz__p + .v2-nz__p{margin-top:16px;}
/* domknięcie `#dalej` (pomarańcz, klamra z otwarciem huba): przycisk z długą etykietą łamie się w wierszach zamiast wychodzić poza ekran */
.v2-nz-next.wl-sec[data-surface]{padding-top:64px;padding-bottom:72px;}
.v2-nz-next .v2-cta--first{margin-top:0;}
.v2-nz-next .wl-btn{white-space:normal;text-align:left;justify-content:flex-start;padding-top:14px;padding-bottom:14px;line-height:1.35;max-width:100%;}
@media (min-width:800px){.v2-nz-next.wl-sec[data-surface]{padding-top:96px;padding-bottom:112px;}}

/* „Ile podawać?”: sześć kafli-radio w dwóch grupach (MONOKARMA / TOPPERY); radio natywne (kolor czarny) w rogu apli, zaznaczony kafel ma wewnętrzny obrys apli (stan, nie ozdoba) */
.v2-pick{border:0;padding:0;margin:0;min-width:0;}
.v2-pick__legend{font:600 12px/1.3 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;padding:0;margin:0;}
.v2-pick__group{margin-top:28px;}
.v2-pick .v2-group__head{margin-bottom:14px;}
.wl-tiles.v2-pick__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:34rem;}
.v2-pick__tile{position:relative;cursor:pointer;}
.v2-pick__tile input{position:absolute;left:8px;top:8px;width:22px;height:22px;margin:0;accent-color:var(--wl-black);cursor:pointer;z-index:1;}
.v2-pick__tile input:focus-visible{outline:none;box-shadow:none;}
.v2-pick__tile:has(input:checked) .wl-tile__shot{outline:4px solid var(--wl-black);outline-offset:-4px;}
/* fokus klawiatury (WCAG 2.4.7): ZEWNĘTRZNY pierścień 3 px na całym kaflu (etykieta), niezależny od wewnętrznego obrysu stanu „wybrany” na aplę — wybrany + fokus = oba naraz, więc różni się od samego wybranego */
.v2-pick__tile:has(input:focus-visible){outline:3px solid var(--wl-black);outline-offset:3px;}
.v2-pick__tile .wl-tile__name{min-height:0;font-size:16px;}
.v2-nz-feed .v2-feed__ex{margin-top:56px;}
.v2-nz-feed .v2-pick + .v2-feed__ex{margin-top:56px;}
.v2-nz-more{margin-top:var(--btn-gap);}
.v2-nz-more .wl-link,.v2-nz-links .wl-link{white-space:normal;line-height:1.35;padding-top:8px;padding-bottom:8px;background-position:left calc(100% - 4px);}   /* długa etykieta „{produkt}: zobacz produkt” łamie się bez nakładania wierszy */
/* bez JS: przykłady i cztery tabele widoczne jeden pod drugim, z podpisem produktu; z JS widoczny tylko wybrany (podpis zbędny) */
.v2-nz-feed .v2-feed__swap{display:block;}
.nav-js .v2-nz-feed .v2-feed__swap{display:grid;}
html:not(.nav-js) .v2-nz-feed .v2-feed__personal{display:none;}
html:not(.nav-js) .v2-nz-feed .v2-feed__example + .v2-feed__example{margin-top:36px;}
.nav-js .v2-nz-who{display:none;}

/* HOME: pytania Niezbędnika jako `.wl-link` w rozmiarze hasła (podkreślenie linku, hover = blok pomarańczowy jak każdy `.wl-link`) */
.v2-ess__q:has(.v2-ess__link){gap:0;}   /* link ma standardowe 48 px wysokości (cel dotyku), więc odstępy robi link */
.v2-ess__q .wl-link.v2-ess__link{padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;}
/* wariant V4 (wybór właściciela 2026-10-02): w spoczynku bez kreski, strzałka `next` na końcu wiersza (0,8 em = wysokość wersalika); hover / fokus z klawiatury = strzałka +4 px i kreska POD literami (jak w „OTWÓRZ NIEZBĘDNIK”). 4 px prawego paddingu: przesunięta strzałka zostaje w bloku hover.
   Polish r1 (orzeczenie UX 2026-10-02): (1) link jest `inline-block` (nie inline-flex): ostatni wyraz + strzałka stoją w `.v2-nw` (nowrap), więc przy zawinięciu strzałka nie zostaje sama w wierszu; odstęp 0,3 em = margin strzałki;
   (2) `:hover` tylko w `@media (hover:hover)` (na dotyku bez „lepkiego” hovera po tapnięciu), (3) `:active` = blok pomarańczowy, żeby dotyk dawał odpowiedź. Fokus z klawiatury (`:focus-visible`) działa wszędzie. */
.v2-ess__q .wl-link.v2-ess__link{background:none;display:inline-block;min-height:0;padding:calc((var(--wl-ctl) - 1em)/2) 4px calc((var(--wl-ctl) - 1em)/2) 0;}
.v2-ess__q .wl-link.v2-ess__link .wl-ic{width:.8em;height:.8em;display:inline-block;margin-left:.3em;transition:transform .16s var(--wl-ease);}
.v2-ess__q .wl-link.v2-ess__link:focus-visible .wl-ic{transform:translateX(4px);}
.v2-ess__q .wl-link.v2-ess__link:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;}
.v2-ess__q .wl-link.v2-ess__link:active{background:var(--wl-orange);color:var(--wl-black);}
@media (hover:hover){
  .v2-ess__q .wl-link.v2-ess__link:hover{background:var(--wl-orange);color:var(--wl-black);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;}
  .v2-ess__q .wl-link.v2-ess__link:hover .wl-ic{transform:translateX(4px);}
}
@media (prefers-reduced-motion:reduce){.v2-ess__q .wl-link.v2-ess__link .wl-ic{transition:none;}}
.v2-nz-eyebrow{margin:32px 0 0;color:var(--wl-black);}
.v2-nz-jars .wl-tile__info{gap:4px;}
.v2-nz-jar__name{font-size:15px;line-height:1.3;}
.v2-nz-names{margin-top:40px;}
.v2-nz-jars .wl-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}   /* trzy słoiki w jednym rzędzie także na telefonie (porównanie wielkości); od 800 px szerokość jak kafle linii (--n × 300 px) */
@media (min-width:800px){.v2-nz-jars .wl-tiles.v2-tiles{gap:32px;}}


/* ==========================================================================
   ZESTAW TOPPERA „80 : 20” (decyzja właściciela 2026-10-02, prototyp B2 — _work/serwis_v2_2026-10/topper_dawkowanie/B2.html; bramka `topper_set_80`).
   JEDEN samodzielny blok: wynik dawkowania toppera niesie liczbę toppera (pierwszy plan), pasek proporcji (udział energii: kolumny z danych `share`, tu tylko ramka i kolory), wiersz bazy (wtórny) i przełącznik „inna karma”.
   Reużywa istniejące komponenty: `.v2-result` (nagłówek „PIES n KG →”), `.v2-jars` + `.v2-jar*` (słoiki), `.v2-jars__cap` (etykieta mono), `.v2-cols`/`.wl-columns` (wybór słoika), `.wl-checkline` (przełącznik), `.v2-small`.
   NOWE tylko `.v2-tset*` (żaden istniejący komponent nie koduje proporcji). Kolory: Monokarma = --wl-orange, topper = --sku ustawiany z danych SKU (limonka / niebieski / róż = istniejące tokeny), liczby czarne, pasek w czarnej ramce 2 px.
   `--tset-other`: wypełnienie segmentu bazy przy „innej karmie” = BIEL w istniejącym czarnym obrysie 2 px paska (runda poprawek 2026-10-02: prototyp miał --wl-muted, czyli token TEKSTOWY użyty jako powierzchnia, wbrew regule właściciela; zmiana wartości = jedna linia tutaj).
   ========================================================================== */
.v2-feed__ex[data-set] .v2-feed__example{display:none;}   /* statyczny PRZYKŁAD ustępuje zestawowi (ten sam zestaw dla masy przykładu, z podpisem PRZYKŁAD) */
.v2-feed__ex[data-set] .v2-feed__personal{visibility:visible;min-height:0;}   /* wysokość slotu = wysokość zestawu; rezerwę rzędów słoików liczy skrypt (V2-DOSE-SLOT) */
.v2-tset{--tj-s:.8;--pct-fs:clamp(1.375rem,1rem + 1.6vw,2rem);--base-fs:clamp(1.5rem,.95rem + 2.4vw,2.5rem);--tset-other:var(--wl-white);}
@media (min-width:800px){.v2-tset{--tj-s:1;}}
.v2-tset:not(.is-example) .v2-tset__eyebrow{visibility:hidden;}   /* miejsce na „PRZYKŁAD” zostaje zarezerwowane w wyniku osobistym: zero skoku */
.v2-tset__head{font-size:var(--ex-fs);margin-bottom:28px;}
/* 1. topper: etykieta + duża liczba | słoik w kolorze SKU */
.v2-tset__top{display:grid;row-gap:16px;}
@media (min-width:800px){.v2-tset__top{grid-template-columns:minmax(30rem,max-content) minmax(0,1fr);column-gap:48px;align-items:end;}}
.v2-tset__lbl{font:700 12px/1.3 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px;max-width:none;}
.v2-tset__num{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .28em;margin:0;max-width:none;font:900 var(--live-fs)/.9 var(--wl-display);text-transform:uppercase;letter-spacing:-.012em;}
.v2-tset__suf{font-size:var(--ex-fs);}
.v2-tset__tj{--jar-s:var(--tj-s);}
.v2-tset .v2-jars{margin:0;}
.v2-tset__tj .v2-jars__row{align-content:flex-end;}
/* 2. pasek proporcji: oba segmenty zawsze wypełnione i podpisane (nie pasek postępu), mały segment na końcu; kolumny `Nfr Mfr` z danych, przerwa 2 px nie zjada żadnego segmentu */
.v2-tset__prop{margin:44px 0 0;max-width:36rem;}
.v2-tset__cap{font:700 12px/1.3 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;text-wrap:balance;}
.v2-tset__bar{display:grid;column-gap:2px;height:32px;border:2px solid var(--wl-black);background:var(--wl-black);}
@media (min-width:800px){.v2-tset__bar{height:40px;}}
.v2-tset__seg--base{background:var(--wl-orange);}
.v2-tset[data-base="other"] .v2-tset__seg--base{background:var(--tset-other);}
.v2-tset__seg--top{background:var(--sku,var(--wl-lime));}
.v2-tset__keys{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;margin-top:10px;}
.v2-tset__key{margin:0;display:flex;flex-direction:column;max-width:none;}
.v2-tset__key--top{align-items:flex-end;text-align:right;}
.v2-tset__pct{font:900 var(--pct-fs)/1 var(--wl-display);text-transform:uppercase;letter-spacing:-.005em;}
.v2-tset__name{font:700 12px/1.3 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;margin-top:6px;min-height:2.6em;}   /* telefon: dwa wiersze zarezerwowane (długie nazwy toppera) */
@media (min-width:800px){.v2-tset__name{min-height:0;}}
/* 3. baza (wtórna): dwa stany w jednej komórce siatki, przełączane widocznością (zero skoku układu) */
.v2-tset__base{--sku:var(--wl-orange);margin-top:40px;}
.v2-tset__swap{display:grid;}
.v2-tset__swap > *{grid-area:1 / 1;min-width:0;align-self:start;}
.v2-tset[data-base="other"] .v2-tset__mono{visibility:hidden;}
.v2-tset:not([data-base="other"]) .v2-tset__oth{visibility:hidden;}
.v2-tset__line{font:900 var(--base-fs)/1 var(--wl-display);text-transform:uppercase;letter-spacing:-.005em;margin:0;max-width:none;}
.v2-tset__bj{margin-top:14px;}
.v2-tset__why{font:900 var(--pct-fs)/1.05 var(--wl-display);letter-spacing:-.005em;text-transform:uppercase;margin:14px 0 0;max-width:none;}   /* instrukcja przy „innej karmie” (zmniejsz o ok. 20%) = rząd pierwszego planu neutralnego stanu, krój jak podpisy procentów; wypełnia rezerwę wysokości po wierszu Monokarmy */
.v2-tset__why + .v2-small{margin-top:10px;}
.v2-cols--size{margin:14px 0 0;}
.v2-cols--size .wl-columns{display:flex;flex-direction:row;flex-wrap:wrap;gap:0 24px;}
/* 4. przełącznik „inna karma”: cel dotyku ≥ 44 px */
.v2-tset__switch{align-items:center;min-height:44px;margin:20px 0 0;}
.v2-tset__switch label{display:flex;align-items:center;min-height:44px;font-weight:600;font-size:1rem;padding:0;cursor:pointer;}
/* 5. noty zestawu (zastępują `topper_note`): dwa warianty w jednej komórce siatki (wysokość = dłuższy, zero skoku przy przełączniku), pod nimi zatwierdzone ostrzeżenie */
.v2-tset__notes{margin-top:24px;}
.v2-tset[data-base="other"] .v2-tset__note--mono{visibility:hidden;}
.v2-tset:not([data-base="other"]) .v2-tset__note--oth{visibility:hidden;}
.v2-tset__notes .v2-tset__note{margin:0;}
.v2-tset__disc{margin:12px 0 0;}