/* ==========================================================================
   Wilczy Łup — system szablonów karuzeli QR (9:16, 1080×1920)
   Źródło wzorca: Design/Karuzela QR/v1_2026-06-17/KARUZELA MONOKARMA draft.pdf
   Design system: Vault Wilczy Lup/30_Identyfikacja/{Paleta_Kolorów,Typografia,
   Logo_Plakietka,Pieczęć_100_0}.md — kolory/fonty/logo/pieczęć NIE są tu
   wymyślane na nowo, tylko przenoszone 1:1 z kanonu marki.
   Fonty lokalne, bez CDN — zob. fonts/OFL-LICENSE.txt.
   ========================================================================== */

@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800 900;font-display:swap;
  src:url('/fonts/bigshouldersdisplay-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800 900;font-display:swap;
  src:url('/fonts/bigshouldersdisplay-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:'Work Sans';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('/fonts/worksans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('/fonts/worksans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* Work Sans Italic (cytat dr Helak, slajd 06) — jedyny kursywny użytek w karuzeli;
   ten sam subset variable font obsługuje italic via font-style, bo pliki źródłowe
   to statyczne wagi wycięte z google-webfonts-helper razem z resztą motywu marki. */

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --ink:#0D0D0D;
  --orange:#F1611F;   /* Monokarma / kolor wiodący marki — Paleta_Kolorów.md */
  --lime:#9ABF38;     /* Topper STAWY — tekst zawsze czarny na limonce */
  --sky:#59B1DA;      /* Topper SKÓRA I SIERŚĆ */
  --magenta:#D787B0;  /* Topper UKŁAD POKARMOWY */
  --white:#FFFFFF;

  --slide-w:1080pt;
  --slide-h:1920pt;
  --margin:66pt;      /* margines boczny zmierzony z PDF (logo/dots/tekst) */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:'Work Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}

img{display:block;max-width:none}

/* ==========================================================================
   ADAPTACJA WEB — jedyna dozwolona wg spec: scena 9:16 (slajd 1080x1920,
   NIEZMIENIONY) skalowana do viewportu, jeden slajd = jeden ekran, natywny
   scroll-snap. Reguły niżej zastępują `body{padding/display:flex...}` z
   narzędzia podglądu druku (out/<sku>/carousel.html, poza tym repo) —
   ta strona nie jest tamtym podglądem, tylko osadzeniem sceny w oknie
   przeglądarki. Komponenty slajdu (.wl-slide i niżej) zostają 1:1.
   ========================================================================== */
html.wl-carousel-html,body.wl-carousel-body{height:100%;overflow:hidden}
body.wl-carousel-body{background:var(--ink)}
/* Korekta właściciela 2026-09-08: karuzele przewijają się poziomo (prawo/lewo) —
   dlatego są karuzelami. Tor = jeden poziomy rząd scen (flex), scroll-snap na
   osi x, natywny swipe/scroll poziomy działa bez JS; przewijanie pionowe strony
   wyłączone w reżimie karuzeli (overflow-y:hidden). scroll-behavior:smooth
   dotyczy tylko przewijania programowego (strzałki/klawisze, patrz .wl-nav
   niżej) — nie wpływa na natywny swipe/drag. */
.wl-carousel-viewport{
  height:100vh;height:100svh;
  display:flex;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.wl-carousel-viewport::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){
  .wl-carousel-viewport{scroll-behavior:auto}
}
.wl-scene{
  width:100vw;width:100svw;
  height:100vh;height:100svh;
  flex-shrink:0;
  scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.wl-scene .wl-slide{
  flex-shrink:0;
  /* Współczynnik skali = mniejszy z (szerokość ekranu/1080, wysokość ekranu/1920) —
     scena mieści się CAŁA, wyśrodkowana; tło poza sceną to kolor SKU (ustawiony
     inline na .wl-scene, patrz render.mjs), nie apla strony. */
  transform:scale(min(calc(100vw / 1080pt),calc(100svh / 1920pt)));
}

/* ==========================================================================
   NAWIGACJA STRZAŁKAMI — desktop/mysz, korekta właściciela 2026-09-08.
   Chrome PRZEGLĄDARKI, nie część artboardu 1080×1920: WYŁĄCZNIE wstrzykiwana
   przez JS (src/js/carousel-nav.js, patrz carousel.11ty.js) — bez JS te
   przyciski nie istnieją w DOM i tor działa czysto natywnie. Tokeny wzorca
   (--ink/--white), kanciaste (border-radius:0, jak geometria marki), bez
   nowych barw. Ukryte na dotyku/bez hover (spec: tam tylko swipe). Małe,
   półprzezroczyste, przy samej krawędzi — DYSKRETNE (spec), nie zasłaniają
   packshotu/ilustracji na środku artboardu (QA wizualne 375×812, 2026-09-08:
   pierwsza wersja 52pt/pełna biel zachodziła na fotografię słoika na środku).
   ========================================================================== */
.wl-nav{
  position:fixed;top:50%;transform:translateY(-50%);
  width:34pt;height:34pt;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.55);color:var(--ink);
  border:2pt solid var(--ink);border-radius:0;
  font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:16pt;line-height:1;
  cursor:pointer;z-index:30;opacity:.7;transition:opacity .15s,background .15s;
}
.wl-nav:hover,.wl-nav:focus-visible{opacity:1;background:var(--white)}
.wl-nav:focus-visible{outline:2pt solid var(--ink);outline-offset:2pt}
.wl-nav.wl-nav-prev{left:10pt}
.wl-nav.wl-nav-next{right:10pt}
@media (hover:none){
  .wl-nav{display:none}
}

/* ==========================================================================
   SLIDE — artboard 1080×1920, tło = kolor SKU (domyślnie pomarańcz marki)
   ========================================================================== */
.wl-slide{
  position:relative;
  width:var(--slide-w);
  height:var(--slide-h);
  background:var(--sku-color, var(--orange));
  overflow:hidden;
  box-shadow:0 8pt 32pt rgba(0,0,0,.18);
  flex-shrink:0;
}

/* ==========================================================================
   HEADER — plakietka logo (lewy górny) + 7 kropek postępu (prawy górny)
   Pomiar z PDF: badge x66/y67 w135 · dots top67 right66 d31 gap19. Wysokość
   przeliczona z proporcji SVG źródłowego (49,45×47,02mm → w135/h128,4pt);
   pierwotne h142 dawało letterbox (białe listwy góra/dół, QA A1, 2026-09-07).
   ========================================================================== */
.wl-logo-badge{position:absolute;left:66pt;top:67pt;width:135pt;height:128.4pt;z-index:10}
.wl-logo-badge img{position:relative;display:block;width:100%;height:100%}

.wl-dots{position:absolute;right:66pt;top:67pt;display:flex;gap:19pt;z-index:10}
.wl-dots .d{width:31pt;height:31pt;border-radius:50%;box-sizing:border-box}
.wl-dots .d.off{border:3pt solid var(--ink);background:transparent}
.wl-dots .d.on{background:var(--ink)}

/* ==========================================================================
   TYPOGRAFIA — Big Shoulders Display 900 (nagłówki) / Work Sans 600 (body)
   Rozmiary per-slajd zdefiniowane niżej (skala karuzeli ≠ skala brandbooka:
   nagłówki 66–252pt, mierzone z PDF) — bez text-transform: copy jest verbatim,
   wielkość liter jak w źródle.
   ========================================================================== */
.wl-h{font-family:'Big Shoulders Display',sans-serif;font-weight:900;line-height:.86;letter-spacing:-.005em;color:var(--headline-color, var(--ink))}
.wl-body{font-family:'Work Sans',sans-serif;font-weight:600;line-height:1.24;color:var(--body-color,#fff)}
.wl-body.on-ink{color:var(--body-color,#fff)}
.wl-mono{font-family:'JetBrains Mono',monospace;font-weight:400;color:var(--body-color,#fff)}

/* ==========================================================================
   PIGUŁKA / PRZYCISK obrysowany — slajd 03 „KLIKNIJ TUTAJ", slajd 06 „PEŁNA ROZMOWA"
   ========================================================================== */
.wl-pill{
  position:absolute;
  border:3pt solid var(--ink);
  border-radius:999pt;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  gap:4pt;
  text-decoration:none;
  color:inherit;
  cursor:default;
}
.wl-pill .l1{font-family:'Big Shoulders Display',sans-serif;font-weight:900;color:var(--ink);line-height:1}
.wl-pill .l2{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--ink);line-height:1;letter-spacing:.02em}

/* ==========================================================================
   LISTA „0%" — czarne koło + białe „0%" + etykieta (slajd 05)
   Pomiar: koło Ø178pt, left margin, pitch 201.6pt, label gap ~51pt od koła
   ========================================================================== */
.wl-zero-row{position:absolute;left:66pt;width:100%;display:flex;align-items:center}
.wl-zero-row .circle{
  width:178pt;height:178pt;border-radius:50%;background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.wl-zero-row .circle span{font-family:'Big Shoulders Display',sans-serif;font-weight:900;color:#fff;font-size:75pt;line-height:1}
.wl-zero-row .label{margin-left:51pt;font-family:'Big Shoulders Display',sans-serif;font-weight:900;color:var(--body-color,#fff);font-size:75pt;line-height:1}
.wl-divider{position:absolute;left:66pt;width:948pt;height:3pt;background:var(--ink)}

/* ==========================================================================
   PIECZĘĆ 100/0 (slajd 07) — QA_WIZUALNE_build_v1.md A2 (2026-09-07): tekst
   composowany w HTML/CSS wychodził ~⅓ rozmiaru wzorca. Pieczęć to stały znak,
   nie szablon — teraz wstawiana jako gotowy raster 1:1 z wzorca
   (assets/shared/pieczec-100.png / pieczec-0.png, wycięte bezpośrednio z
   `Design/Karuzela QR/v1_2026-06-17/KARUZELA MONOKARMA draft.pdf` str.7,
   alpha-matting wobec tła strony, 2× nadpróbkowanie) — patrz slides.mjs.
   ========================================================================== */

/* ==========================================================================
   SKŁAD — tabela składnik→funkcja (2 kol, wariant PEŁNA) lub sama lista
   składnik+% (1 kol, wariant MINIMUM/„Skład w liczbach"). Nowy typ slajdu 06
   topperów + fallback slajdu 06 mono bez autoryzacji cytatu (KONCEPCJA_v2_1 §6).
   ========================================================================== */
/* QA_WIZUALNE_build_v1_1.md poprawka 4: lista idzie w naturalnym przepływie
   (grid, auto-rows) zamiast na sztywnym pitchu — wysokość każdego wiersza
   (i odległość do linii nad kolejnym) rodzi się z realnej treści (fn może
   zawinąć się do 2-3 linii), więc linia nigdy nie przecina tekstu i nie
   zostawia dziur przy krótkiej treści. */
.wl-sklad-list{position:absolute;left:66pt;width:948pt;display:grid;grid-auto-rows:auto;row-gap:32pt}
.wl-sklad-row{display:flex;flex-wrap:wrap;align-items:baseline;border-top:1.5pt solid rgba(13,13,13,.35);padding-top:32pt}
.wl-sklad-row:first-child{border-top:none;padding-top:0}
.wl-sklad-row .label{font-family:'Big Shoulders Display',sans-serif;font-weight:900;color:var(--body-color,var(--ink));line-height:1;flex-shrink:0}
.wl-sklad-row .fn{font-family:'Work Sans',sans-serif;font-weight:600;color:var(--body-color,var(--ink));line-height:1.15}
.wl-sklad-footer{position:absolute;left:66pt;width:948pt;font-family:'Work Sans',sans-serif;font-weight:600;color:var(--body-color,var(--ink));text-align:center}

/* ==========================================================================
   Ilustracje wspólne (crop z wzorca PDF, tło pomarańcz zgodne z --orange —
   dlatego bezszwowo łączą się z tłem slajdu bez maski alfa)
   ========================================================================== */
.wl-abs{position:absolute}

/* ==========================================================================
   PLACEHOLDER PACKSHOTU — WYŁĄCZNIE web, WYŁĄCZNIE gdy realny packshot
   niesie błędną gramaturę na etykiecie (D6, patrz slides.mjs photoOrPlaceholder
   i scripts/generate-carousel.mjs). Nie istnieje w szablonie druku (tam każdy
   SKU ma realne zdjęcie) — ramka zajmuje dokładnie ten sam `photoRect`, więc
   reszta slajdu (headline/asterisk/body) stoi tam, gdzie w oryginale.
   ========================================================================== */
.wl-photo-placeholder{
  border:3pt solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);
}
.wl-photo-placeholder span{
  font-family:'Big Shoulders Display',sans-serif;font-weight:900;
  color:var(--headline-color,var(--ink));font-size:52pt;text-align:center;
}