/* ==========================================================================
   Wilczy Łup: karuzela QR v2, wariant B (2026-09-30; A i C usunięte w rundzie 3). Style slajdu: tony, chrome slajdu (logo, progres,
   PRODUKT) i treść kart. Powłoka B (tor, snap, ruch) = osobny plik: carousel-v2b.css.
   Ładowane PO site.css: tokeny (--wl-*), fonty, .wl-link, .wl-ic, .wl-sr-only, fokus. Zero surowych HEX, zero nowych krojów,
   tylko czerń / biel / pomarańcz / papier. Treść kart w jednostkach kontenera (cq*) liczonych od OBSZARU TREŚCI karty
   (.wl2-card = slajd minus strefy chrome), nie od całej karty. Runda 2 B (2026-09-30): S1 = cały pies w kadrze, S5 = bańki „0%”
   (reguły skopiowane ze strony produktu: site.css .wl-zero*), S6 = slot na portret, S7 = przycisk .wl-btn.
   Runda 3 (2026-09-30): S1 = zdjęcie śpiącego psa z puli (losowane), S5 bez kresek, S6 przebudowany (bez kreski, przycisk jak S7).
   Runda 4 (2026-09-30): jednostka rytmu karty (--u/--s/--btn-gap), S3 = duża Alfa + jeden blok tekstu, S6 = cytat kursywą i podpis pod nim,
   przerwa nad przyciskiem S6/S7.
   ========================================================================== */

/* ---------- 0. STRONA: czerń, bez przewijania w pionie, scena = cały ekran telefonu ---------- */
:root{
  /* Wcięcia bezpiecznego obszaru. Na desktopowym Chrome env() = 0, więc test nadpisuje te zmienne (html.style) wartościami
     iPhone'a z Dynamic Island (59 px góra, 34 px dół) i sprawdza, czy chrome i treść się mieszczą. */
  --wl2-sat:env(safe-area-inset-top,0px);
  --wl2-sab:env(safe-area-inset-bottom,0px);
  --wl2-sal:env(safe-area-inset-left,0px);
  --wl2-sar:env(safe-area-inset-right,0px);
}
html.wl2v{height:100%;overflow:hidden;background:var(--wl-black);}
body.wl2v-body{height:100%;margin:0;overflow:hidden;background:var(--wl-black);color:var(--wl-paper);display:flex;justify-content:center;}
.wl2-stage{
  position:relative;width:100%;
  height:100vh;height:100svh;height:100dvh;    /* dvh ze stopniowym fallbackiem; strona nie przewija się w pionie, więc pasek Safari się nie zwija */
  overflow:hidden;
  /* Logo: 64 px przy 375 (min. z briefu), rośnie do 76 px; pole ochronne = 1/3 wysokości plakietki (Logo_Plakietka.md). */
  --wl2-logo:clamp(64px,17vw,76px);
  --wl2-clear:calc(var(--wl2-logo) / 3);
  --wl2-gx:max(22px,calc(var(--wl2-clear) + 1px));             /* margines boczny chrome i treści ≥ pole ochronne logo */
  --wl2-top:max(calc(var(--wl2-sat) + 6px),var(--wl2-clear),22px);   /* górna krawędź logo: pod wycięciem / Dynamic Island, ≥ pole ochronne */
  --wl2-bot:max(var(--wl2-sab),16px);                           /* dolna krawędź chrome: nad paskiem home */
  --wl2-row:48px;                                               /* wiersz chrome = cel dotyku linku (--wl-ctl) */
  /* Strefy chrome (wysokości zajęte przez chrome nad i pod obszarem treści karty); warianty mogą je nadpisać. */
  --wl2-zone-top:calc(var(--wl2-top) + var(--wl2-logo) + var(--wl2-clear));
  --wl2-zone-bot:calc(var(--wl2-bot) + var(--wl2-row) + 4px);
}
/* Desktop / tablet: pas o szerokości telefonu, wyśrodkowany na czerni (proporcje karty jak na telefonie). */
@media (min-width:31rem){
  .wl2-stage{width:min(30rem,max(24rem,calc((100dvh - 2rem) * 0.52)));--wl2-logo:72px;}
}
.wl2-main{position:relative;height:100%;}
.wl2-track{
  height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  touch-action:pan-x pinch-zoom;               /* pinch-zoom zostaje: WCAG 1.4.4 */
  scrollbar-width:none;overflow-anchor:none;
}
.wl2-track::-webkit-scrollbar{display:none;}
.wl2-track:focus-visible{outline:3px solid var(--wl-paper);outline-offset:-3px;box-shadow:none;}
.wl2-rail{position:relative;display:flex;height:100%;width:max-content;}

/* ---------- 1. SLAJD: ton + trzy warstwy (obszar treści, chrome górna, chrome dolna) ---------- */
.wl2-slide{
  position:relative;flex:none;height:100%;overflow:hidden;
  background:var(--wl-white);color:var(--wl-black);
  --ink:var(--wl-black);
}
.wl2-slide--foto,.wl2-slide--biel{background:var(--wl-white);color:var(--wl-black);}
.wl2-slide--pomarancz{background:var(--sku,var(--wl-orange));color:var(--wl-black);}   /* --sku: toppery (limonka / błękit / magenta, token na <html>); Monokarma bez --sku = pomarańcz */
.wl2-slide--czern{background:var(--wl-black);color:var(--wl-paper);--ink:var(--wl-paper);}

/* Obszar treści = slajd minus strefy chrome; kontener dla jednostek cq treści. */
.wl2-card{
  position:absolute;left:0;right:0;top:var(--wl2-zone-top);bottom:var(--wl2-zone-bot);
  container-type:size;
}

/* ---------- 2. CHROME SLAJDU (część karty, w jej tonie; nie pasek) ---------- */
.wl2-chrome{
  position:absolute;left:max(var(--wl2-gx),var(--wl2-sal));right:max(var(--wl2-gx),var(--wl2-sar));
  display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink);
  pointer-events:none;                        /* tylko linki są klikalne; reszta chrome przepuszcza tap do toru */
}
.wl2-chrome a{pointer-events:auto;}
.wl2-chrome--top{top:var(--wl2-top);height:var(--wl2-logo);}
.wl2-chrome--bottom{bottom:var(--wl2-bot);height:var(--wl2-row);}
/* Logo: goła plakietka, bez kafla i obrysu; pole klikalne = sama plakietka (≥ 64 px). */
.wl2-logo{display:block;flex:none;height:var(--wl2-logo);}
.wl2-logo img{display:block;height:100%;width:auto;}
.wl2-logo:focus-visible{outline-offset:4px;}
/* PRODUKT →: ranga 2, cicho; cel = cały wiersz (48 px). Kolor = atrament tonu. */
.wl2-product{flex:none;margin-left:auto;min-height:var(--wl2-row);font-size:14px;letter-spacing:.08em;color:var(--ink);}
.wl2-slide--czern .wl2-product{color:var(--wl-paper);}
/* Polityka prywatności: stopka prawna ostatniego slajdu (2026-10-10). Najcichszy element chrome: mały tekst z podkreśleniem, atrament tonu, cel dotyku = wiersz 48 px. */
.wl2-privacy{flex:none;display:inline-flex;align-items:center;min-height:var(--wl2-row);font-size:13px;line-height:1.2;color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
/* Progres: „3 / 7” (mono, atrament tonu) + 7 kresek (1..n pełne, reszta 30 %). */
.wl2-prog{display:flex;flex-direction:column;align-items:flex-start;gap:7px;color:var(--ink);}
.wl2-prog__num{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 var(--wl-mono);letter-spacing:.06em;white-space:nowrap;}
.wl2-prog__num .wl-ic{width:13px;height:13px;}
.wl2-prog__seg{display:flex;gap:4px;}
.wl2-prog__seg i{display:block;width:12px;height:3px;background:currentColor;opacity:.3;}
.wl2-prog__seg i.is-on{opacity:1;}
@media (max-width:359px){ .wl2-prog__seg i{width:9px;} }   /* 320 px: progres + „ZOBACZ PRODUKT →” mieszczą się w jednym wierszu */

/* ---------- 3. SZABLON TREŚCI (1:1 z /v2/, jednostki względem obszaru treści) ---------- */
.wl2-slide__in{
  height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;
  gap:2cqh;padding:3cqh max(var(--wl2-gx),var(--wl2-sar)) 3cqh max(var(--wl2-gx),var(--wl2-sal));
}
.wl2-top{display:flex;flex-direction:column;gap:2.2cqh;min-width:0;}
/* Jednostka rytmu karty (runda 4): --u = 1,4 % wysokości obszaru treści (6-9 px), krok --s = 2 u to JEDEN odstęp między blokami tekstu
   na S3, S6 i S7; przerwa nad przyciskiem --btn-gap = 4 u (≥ 1,5 x krok), nie mniej niż 32 px (24 px w niskiej karcie, 320 x 568). */
.wl2-card{--u:clamp(6px,1.4cqh,9px);--s:calc(var(--u) * 2);--btn-gap:max(32px,calc(var(--u) * 3.6));}
.wl2-card{--h:clamp(1.875rem,min(14cqw,8.4cqh),4.5rem);}
.wl2-slide--posilek .wl2-card,.wl2-slide--zero .wl2-card{--h:clamp(1.875rem,min(18cqw,11.5cqh),5.25rem);}
.wl2-slide--produkt .wl2-card{--h:clamp(1.5rem,min(9.8cqw,6cqh),3rem);}   /* runda poprawek 2026-09-30: nagłówek S4 mniejszy (było 12,6cqw / 7,8cqh; teraz 9,8cqw / 6cqh), słoik dominuje */
.wl2-slide--dowod .wl2-card{--h:clamp(1.5rem,min(9.4cqw,4.9cqh),2.6rem);}   /* S6: mniejszy stopień nagłówka, żeby portret (48 % szerokości), cytat, podpis i przycisk oddychały */
.wl2-slide--domkniecie .wl2-card{--h:clamp(1.875rem,min(17cqw,11.2cqh),5.25rem);}
.wl2-h{
  margin:0;font-family:var(--wl-display);font-weight:900;text-transform:uppercase;
  font-size:2.4rem;font-size:var(--h);
  line-height:1.06;letter-spacing:-.01em;text-wrap:balance;color:inherit;   /* 1,06 (było .92): akcent / ogonek wiersza niżej nie wchodzi w litery wiersza wyżej (Ó czytało się jak Q); najmniejsza wartość bez styku atramentu (z 1 px prześwitu) na wszystkich nagłówkach = 1,05, test V2C-ATRAMENT */
}
.wl2-h span{display:block;}
.wl2-slide--produkt:not(.wl2-slide--rola) .wl2-h{line-height:.92;}   /* S4 Monokarmy („MONOKARMA / WIEPRZOWINA 850 G”): nagłówek bez ogonków i akcentów, więc dawny ciaśniejszy odstęp zostaje (słoik ≥ 43 % karty przy 320 × 568); test V2C-ATRAMENT pilnuje, że żaden nagłówek nie ma styku atramentu */
.wl2-h--accent{color:var(--sku,var(--wl-orange));}   /* pomarańcz na czerni: 6,4:1, duży napis; toppery: kolor SKU (limonka 9,9, błękit 8,7, magenta 8,0 na czerni) */
.wl2-sub{margin:0;max-width:none;font:600 1.0625rem/1.35 var(--wl-body);font-size:clamp(1rem,5.2cqw,1.4rem);text-wrap:balance;}
.wl2-sub--strong{font-weight:800;}
/* S3: dwa zdania jako JEDEN blok tekstu (ten sam krój, ta sama interlinia, bez odstępu akapitowego): linie stoją w równym kroku. */
.wl2-lede{display:flex;flex-direction:column;gap:0;}
.wl2-lede .wl2-sub{font-size:clamp(1rem,4.9cqw,1.3rem);line-height:1.35;text-wrap:wrap;}
.wl2-lede .wl2-sub--strong:not(:first-child){text-wrap:balance;}   /* trzecia linia S3 (np. „… Nie zastępuje posiłku.”): bez sieroty w ostatnim wierszu (test V2C-ATRAMENT) */
.wl2-lede .wl2-sub:first-child{max-width:var(--lede1,21ch);}   /* 21ch = mistrz 180 g; inne SKU: subline.max_ch z danych */   /* zdanie pierwsze łamie się zawsze po „mokra” (Pełnoporcjowa mokra / karma dla psa.), nigdy „Pełnoporcjowa / …” */

.wl2-fig{margin:0;display:flex;align-items:center;justify-content:center;min-height:0;}
.wl2-fig img{display:block;max-width:100%;height:auto;}
/* S2 i S3 (runda 4; S2 od rundy 5 tym samym mechanizmem): Alfa = duży element slajdu (S3 ≥ 45 %, S2 52 % wysokości obszaru treści; wymiary i kotwica z danych: pose.options[].place, zmienne
   --ph/--ar/--bleed|--left|--right/--pb). Stoi nad dolnym marginesem slajdu, ogon albo tułów może wyjść za prawą krawędź, głowa zawsze
   cała; nie wchodzi w lewe 12 % karty. Tekst jest nad nią (osobna warstwa, bez nakładania). Lustro poziome (.wl2-pose--flip), nigdy obrót. */
.wl2-pose{
  position:absolute;margin:0;pointer-events:none;
  height:var(--ph);width:calc(var(--ph) * var(--ar));
  bottom:calc(-1 * var(--pb));
  right:calc(var(--ph) * var(--ar) * var(--bleed,0) * -1);
}
.wl2-pose--l{right:auto;left:var(--left);
  /* głowa cała w karcie także na wysokim ekranie: szerokość ≤ (prawa krawędź karty − 4cqw − lewa krawędź pozy) / zasięg głowy (--hx z danych), wysokość z proporcji */
  width:min(calc(var(--ph) * var(--ar)), calc((100cqw - var(--left) - 4cqw) / var(--hx,1)));height:auto;aspect-ratio:var(--ar);}
.wl2-pose--r{right:var(--right);
  /* Poza kotwiczona do prawej nie może wejść w lewe 12 % karty (strefa zerkania): szerokość ograniczona do 88cqw minus odstęp,
     wysokość wynika z proporcji (poza „oblizuje się” jest prawie kwadratowa, więc na wysokich ekranach sama wysokość nie wystarcza). */
  width:min(calc(var(--ph) * var(--ar)), calc(88cqw - var(--right)));height:auto;aspect-ratio:var(--ar);}
.wl2-pose img{display:block;width:100%;height:100%;max-width:none;}
.wl2-pose--flip img{transform:scaleX(-1);}
/* S4 (runda poprawek 2026-09-30): słoik = DOMINUJĄCY element karty. Zajmuje całe wolne miejsce między nagłówkiem a faktami (flex 1, nie stała
   wysokość), więc nic nie nachodzi i nie ma przewijania przy żadnym rozmiarze; obraz jest przycięty do obrysu (bez przezroczystych marginesów) i
   wpisany object-fit:contain. --pack-h (image.h_cqh z danych) = górny limit wysokości na wysokich ekranach. Słoik od lewego marginesu tekstu do prawej krawędzi. */
.wl2-slide--produkt .wl2-slide__in{--g4:clamp(6px,1.3cqh,11px);gap:var(--g4);}
.wl2-slide--produkt .wl2-top{gap:var(--g4);}
.wl2-fig--pack{flex:1 1 0;min-height:0;max-height:var(--pack-h,46cqh);margin-left:max(0px,calc(12cqw - var(--wl2-gx) + 1px));margin-right:calc(-1 * var(--wl2-gx) + 4px);}   /* margin-left: słoik nie wchodzi w lewe 12 % karty (strefa zerkania poprzedniej karty) */
.wl2-fig--pack img{width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 50%;}
/* S4, mikro-link pod faktami (850 g: SPRAWDŹ, ILE POTRZEBUJE TWÓJ PIES →): ranga 2 (.wl-link), jedyna akcja slajdu; tekst może zawinąć się do dwóch linii.
   Stoi w dolnej strefie jak przycisk S6/S7: przerwa nad nim = --btn-gap (≥ 32 px, 24 px w niskiej karcie), a kreska linku (12 px od dołu pola) na linii dołu
   przycisków (margin-bottom: -12px), czyli ten sam odstęp od dołu karty. */
.wl2-link{flex:none;align-self:flex-start;align-items:flex-start;font-size:14px;letter-spacing:.08em;line-height:1.25;text-align:left;text-wrap:balance;padding:4px 2px 18px;min-height:var(--wl2-row);margin-top:max(0px,calc(var(--btn-gap) - var(--g4)));margin-bottom:-12px;}   /* kreska .wl-link (12 px od dołu) zostaje pod ostatnią linią także po zawinięciu */
.wl2-fig--seal{flex:none;}
.wl2-fig--seal img{max-height:30cqh;width:auto;}

/* S1 (runda 3): ZWYKŁE ZDJĘCIE śpiącego psa na całe pole od nagłówka do samego dołu slajdu (w B chrome dolne jest puste; przy fladze
   product_link pole kończy się nad nim, patrz carousel-v2b.css), od krawędzi do krawędzi, nad nim biały pas z logo, progresem
   i nagłówkiem (płaski, bez gradientu: kontrast nagłówka nie zależy od zdjęcia). Zdjęcie losuje z puli skrypt pod <img> (dane:
   content/carousel/MONO-WP-150/v2.json, slajd s1-sen, pool[]). Kadr `.wl2-frame` liczony jak `object-fit:cover` (najmniejszy
   prostokąt o proporcji pliku, który kryje pole; kotwica pozioma --px), dzięki czemu dymek jest przypięty do KADRU, nie do pola, i
   czubek jego ogonka (lewy dolny róg warstwy: 21,3 % / 99,5 % jej rozmiaru) zawsze celuje w to samo miejsce na głowie psa.
   Szerokość dymka: --bwp % pola, ale nie więcej, niż mieści się nad głową (8 px od nagłówka) i w poziomie (8 px od krawędzi). */
.wl2-slide--sen{background:var(--wl-white);}
.wl2-slide--sen .wl2-card{--h:clamp(1.875rem,min(12.4cqw,6.2cqh),4.25rem);}
.wl2-slide--sen .wl2-slide__in{padding:2cqh 0 0;justify-content:flex-start;gap:2.4cqh;}
.wl2-slide--sen .wl2-h{padding:0 max(var(--wl2-gx),var(--wl2-sar)) 0 max(var(--wl2-gx),var(--wl2-sal));flex:none;}
.wl2-photo{margin:0;flex:1 1 0;min-height:0;position:relative;container-type:size;overflow:hidden;background:var(--wl-black);}
.wl2-frame{
  --fw:max(100cqw,calc(100cqh * var(--ar,.6)));                  /* szerokość kadru (cover) */
  --fh:calc(var(--fw) / var(--ar,.6));
  /* Pionowe położenie kadru: domyślnie dół do dołu pola (pies przy dnie), ale gdy pole jest niskie (telefon 320 x 568) i dymek
     nie mieści się nad głową, kadr zjeżdża w dół (mniej uciętej góry), byle twarz (--fy1 = dół prostokąta oczy+nos) została w polu. */
  --top:min(0px,calc(100cqh - var(--fy1,.9) * var(--fh)),max(calc(100cqh - var(--fh)),calc(var(--bwp,62) * 1cqw / 1.106 + 8px - var(--ty,.4) * var(--fh))));
  --tipx:calc((100cqw - var(--fw)) * var(--px,.5) + var(--tx,.5) * var(--fw));   /* czubek ogonka dymka w polu */
  --tipy:calc(var(--top) + var(--ty,.4) * var(--fh));
  --bw:min(calc(var(--bwp,62) * 1cqw),calc((var(--tipy) - 8px) * 1.106),calc((100cqw - 8px - var(--tipx)) / .787),calc((var(--tipx) - 8px) / .213));
  position:absolute;width:var(--fw);height:var(--fh);
  left:calc((100cqw - var(--fw)) * var(--px,.5));top:var(--top);
}
.wl2-photo__dog{position:absolute;left:0;top:0;width:100%;height:100%;display:block;object-fit:cover;}
.wl2-photo__bubble{                                            /* dymek 469 x 424: ogonek w lewym dolnym rogu, celuje w głowę */
  position:absolute;left:calc(var(--tx,.5) * 100%);top:calc(var(--ty,.4) * 100%);
  width:var(--bw);height:auto;transform:translate(-21.3%,-99.5%);
}

/* S4: fakty jako trzy wiersze z kreską. */
.wl2-facts{list-style:none;margin:0;padding:0;}
.wl2-facts li{
  padding:.3em 0;border-top:var(--wl-rule);   /* runda poprawek 2026-09-30: ciaśniejsze wiersze (było .5em / 7,6cqw), żeby słoik dostał miejsce */
  font:800 1.5rem/1 var(--wl-display);font-size:clamp(1.125rem,min(5.4cqw,3.2cqh),1.625rem);text-transform:uppercase;letter-spacing:.02em;
}
.wl2-facts li:last-child{border-bottom:var(--wl-rule);}
/* S5: lista „0%” w bańkach (kopia reguł strony produktu: site.css .wl-zero__list/__item/__disc/__label, te same proporcje:
   bańka : cyfra : etykieta = 56 : 24 : 24). Na czerni bańka jest odwrócona jak przyciski `.wl-on-black .wl-btn` w site.css:
   pomarańcz z czarnym „0%” (6,4:1); etykiety papier. Koło wycinane maską, NIE border-radius (kanon Geometria_Kanciasta,
   wyjątek koła idiomu 0% jak w site.css). Rozmiary w jednostkach kontenera: cztery wiersze wypełniają obszar treści. */
.wl2-zero{list-style:none;margin:0;padding:0;flex:1 1 0;min-height:0;display:grid;grid-template-rows:repeat(4,1fr);align-items:center;}   /* bez kresek (runda 3); cztery rzędy rozkładają się równo w karcie pod nagłówkiem */
.wl2-zero__item{display:flex;align-items:center;gap:4.6cqw;}
.wl2-card{--disc:clamp(3.5rem,min(25cqw,14cqh),6.5rem);}
.wl2-zero__disc{
  width:var(--disc);height:var(--disc);flex:none;background:var(--wl-orange);
  clip-path:circle(50% at 50% 50%);
  display:flex;align-items:center;justify-content:center;
}
.wl2-zero__disc span{font-family:var(--wl-display);font-weight:900;font-size:calc(var(--disc) * .43);line-height:1;color:var(--wl-black);}
.wl2-zero__label{
  min-width:0;font-family:var(--wl-display);font-weight:900;line-height:.95;
  /* .43 bańki jak na stronie; nie większa, niż mieści się najdłuższe słowo listy („MIĘSNO‑KOSTNYCH” ≈ 7,3 em, dzielnik 7,4 daje ≥ 24 px na 320 px; do 2026-10-09 „konserwantów” ≈ 6,5 em, dzielnik był 6,7) w kolumnie obok bańki */
  font-size:min(calc(var(--disc) * .43),calc((100cqw - 2 * var(--wl2-gx) - var(--disc) - 4.6cqw) / 7.4));
  text-transform:uppercase;letter-spacing:.01em;color:var(--wl-paper);text-wrap:balance;
}
/* Przycisk karty (S6: SPRAWDŹ SKŁAD →, S7: ZOBACZ PRODUKT →; wzorzec .wl-btn): pełna szerokość kolumny treści, 48 px, dół obszaru
   treści. Ostatni element karty na obu slajdach, więc ta sama wielkość i to samo miejsce. */
.wl2-btn{font-size:14px;letter-spacing:.08em;}
.wl2-slide--czern .wl-btn{--bg:var(--sku,var(--wl-orange));}   /* przycisk na czerni: kolor SKU jak kicker pasa czarnego w site.css; Monokarma (bez --sku) = pomarańcz jak dotąd */
/* S6 (runda 4): nagłówek, portret 4:5 (48 % szerokości karty, od lewego marginesu tekstu, kwadratowe rogi, bez ramki), cytat w „…”
   KURSYWĄ, podpis (imię pogrubione, tytuł w osobnej linii) bezpośrednio POD cytatem, przerwa, przycisk. Ta sama siatka co S7: trzy
   bloki (góra | portret | dół = cytat + podpis + przerwa + przycisk) rozłożone równo (wolne miejsce dzieli się po równo między nimi,
   minimum = krok --s). Kursywa: od 2026-09-30 prawdziwy krój Work Sans Italic (src/fonts/worksans-italic-*.woff2, @font-face w site.css). */
.wl2-quote{margin:0;}
.wl2-quote blockquote{margin:0;}
.wl2-quote blockquote p{margin:0;max-width:none;font:italic 600 1.25rem/1.3 var(--wl-body);font-size:clamp(1rem,5cqw,1.5rem);text-wrap:pretty;}
.wl2-quote figcaption{display:flex;flex-direction:column;gap:2px;margin-top:var(--s);}
.wl2-sign__name{font:800 1rem/1.25 var(--wl-body);font-size:clamp(1rem,4.6cqw,1.25rem);white-space:nowrap;}
.wl2-sign__line{font:400 1rem/1.25 var(--wl-body);font-size:clamp(1rem,4.3cqw,1.125rem);white-space:nowrap;}
/* linia ujawnienia współpracy pod podpisem (decyzja właściciela 2026-10-09): ten sam styl co `.v2-quote__disc` w bloku eksperta strony (v2.css: mono 700 12px/1.35, rozstrzelenie .1em, kapitaliki, odstęp 8px nad linią) */
.wl2-sign__disc{font:700 12px/1.35 var(--wl-mono);letter-spacing:.1em;text-transform:uppercase;margin-top:8px;}
.wl2-portrait{--pw:min(46cqw,32cqh);width:var(--pw);aspect-ratio:4 / 5;margin:0;overflow:hidden;background:var(--wl-black);flex:none;}
.wl2-portrait img{display:block;width:100%;height:100%;object-fit:cover;}
.wl2-portrait--ph{display:flex;align-items:center;justify-content:center;padding:0 12px;color:var(--wl-paper);text-align:center;font:700 12px/1 var(--wl-mono);letter-spacing:.06em;}
/* TOPPERY (2026-10-02). S4 `uzycie`: trzy kroki (SŁOIK, ODMIERZENIE, MISKA) jako wielkie wiersze display w tym samym rytmie co lista „0%” (trzy rzędy dzielą wolne miejsce karty
   pod nagłówkiem), strzałka SVG (ta sama ścieżka co w przyciskach) obrócona w dół = „dalej”. Bez kresek, bez ikon, bez nowych krojów. S5 `rola` = układ S4 Monokarmy (słoik wypełnia wolne miejsce)
   z nagłówkiem w skali S3 (jedno słowo, duży napis). */
.wl2-steps{list-style:none;margin:0;padding:0;flex:1 1 0;min-height:0;display:grid;grid-template-rows:repeat(3,1fr);}
.wl2-steps li{position:relative;display:flex;align-items:center;font-family:var(--wl-display);font-weight:900;font-size:clamp(1.75rem,min(13.5cqw,8.5cqh),3.75rem);line-height:.95;text-transform:uppercase;letter-spacing:.01em;}
/* strzałka MIĘDZY krokami (runda poprawek 2026-10-02: przy prawej krawędzi wiersza czytała się jak szewron akordeonu): pod słowem, wyrównana do jego lewej krawędzi, środkiem na granicy wierszy; jak na stronie produktu (.v2-seq) wskazuje w dół */
.wl2-steps__arr{position:absolute;left:0;top:100%;transform:translateY(-50%);display:block;line-height:0;}
.wl2-steps__arr .wl-ic{display:block;width:.5em;height:.5em;transform:rotate(90deg);}
.wl2-slide--rola .wl2-fig--pack{margin-right:calc(-1 * var(--wl2-gx));}   /* S5 toppera (runda poprawek 2026-10-02): słoik jest bohaterem slajdu, więc od strefy zerkania (lewe 12 %) do samej prawej krawędzi karty: sam słoik (bez przezroczystego marginesu obrazu) ≥ 85 % szerokości slajdu i ≈ 98 % szerokości obszaru treści; mierzy go sonda jarInkProbe, nie pudełko <img> */
.wl2-slide--rola .wl2-card{--h:clamp(1.875rem,min(15cqw,11.5cqh),5.25rem);}
.wl2-slide--bez-obrazu .wl2-slide__in{justify-content:center;}   /* 2026-10-11: S5 toppera bez packshotu do renderów v6 (decyzja właściciela): sam blok tekstu, wyśrodkowany w pionie, bez pustej ramki */   /* 15cqw: „POKARMOWY.” mieści się w kolumnie z kropką (przy 18cqw kropka spadała do osobnej linii) */
.wl2-slide--dawka .wl2-card{--h:clamp(2.5rem,min(27cqw,15cqh),7rem);}   /* S6 toppera: jedno pytanie; nagłówek niesie slajd */
.wl2-slide--dawka .wl2-top .wl2-btn{margin-top:var(--s);}
.wl2-slide--czern.wl2-slide--dawka .wl2-slide__in{justify-content:center;}   /* 2026-10-11 (decyzja właściciela): S5 toppera na czerni nie ma Alfy (Alfa nigdy na czerni), więc blok nagłówek + przycisk stoi w pionowym środku karty; czarny S5 Monokarmy (typ `zero`) bez zmian */   /* S6 toppera: przycisk tuż pod nagłówkiem (tekst u góry, Alfa u dołu), odstęp = krok rytmu karty */
/* S7: nagłówek u góry, pieczęć w środku, „Nie kombinuj.” + podpis w dolnej części. */
/* Dół S6 i S7 (runda 4): tekst, PRZERWA (--btn-gap), przycisk. Ta sama reguła na obu slajdach, więc przycisk stoi tak samo (wielkość, odstęp
   od dołu karty, przerwa nad nim); wolne miejsce karty trafia między bloki wyżej, nie w przerwę nad przyciskiem. */
.wl2-slide--dowod .wl2-slide__in,.wl2-slide--domkniecie .wl2-slide__in{gap:var(--s);}
.wl2-bottom{display:flex;flex-direction:column;}
.wl2-bottom .wl2-btn{margin-top:var(--btn-gap);}
.wl2-closing{margin:0;max-width:none;display:flex;flex-direction:column;gap:2px;}
.wl2-closing__line{font:800 1.5rem/1.1 var(--wl-display);font-size:clamp(1.5rem,min(8.4cqw,5.4cqh),2.5rem);text-transform:uppercase;letter-spacing:.01em;}
.wl2-closing__sign{font:600 1.0625rem/1.3 var(--wl-body);font-size:clamp(1rem,5.2cqw,1.375rem);}
.wl2-slide--pomarancz .wl-link:hover{background:var(--wl-white);color:var(--wl-black);}
.wl2-slide--czern .wl-link{color:var(--wl-paper);}

/* S6 (decyzja właściciela 2026-10-09: trzecia linia podpisu „współpracuje z Wilczym Łupem”, ≈ +24 px): w niższej karcie (ekran ≈ 667 px i niżej) portret mniejszy, żeby przycisk został w karcie, a nad nim była przerwa --btn-gap (≥ 32 px). */
@container (max-height:560px){
  .wl2-portrait{--pw:min(46cqw,24cqh);}
}
/* Niskie obszary treści (iPhone SE 320×568, telefon z dużymi wcięciami): ciaśniejsze odstępy, treść się mieści. */
@container (max-height:430px){
  .wl2-slide__in{padding-block:2.5cqh 1.5cqh;gap:1.5cqh;}
  .wl2-top{gap:1.6cqh;}
  .wl2-slide__in{--u:4.5px;--s:calc(var(--u) * 2);--btn-gap:24px;}   /* karta jest kontenerem, więc jednostki nadpisujemy poziom niżej */
  /* S6 (320 x 568): mniejszy nagłówek, portret i cytat, żeby nagłówek + portret + cytat + podpis + przycisk zmieściły się w karcie */
  .wl2-slide--dowod .wl2-slide__in{--h:1.3rem;}
  .wl2-portrait{--pw:min(26cqw,24cqh);}
  .wl2-quote blockquote p{font-size:1rem;line-height:1.2;}   /* 2026-10-09: 1,25 → 1,2 i .wl2-sign__disc 4 px nad linią: odzyskane ≈ 9 px na linię ujawnienia współpracy (S6 mieści się w karcie 320 × 568) */
  .wl2-sign__disc{margin-top:4px;}
}
/* Telefon poziomo: kompaktowa rama. */
@media (max-height:460px){
  .wl2-stage{--wl2-logo:48px;}
}

/* ---------- 4. RUCH: wspólne wyłączenia (warianty dokładają swoje) ---------- */
@media (prefers-reduced-motion:reduce){
  .wl2-track{scroll-behavior:auto;}
}