/* Vitamin Shop - baza.css
   Tokeny marki i tryb ciemny, reset, typografia, uklad, przyciski,
   plakietki, pasek gorny, naglowek, stopka, dolny pasek zakladek,
   warstwy nakladane, powiadomienia, okruszki, animacje, dostepnosc.
   Ladowany na KAZDEJ podstronie.
   Zrodlo: wizualizacja sklepu (assets/css/style.css). */

/* ---------- 1. TOKENY ---------- */
:root{
  /* Marka — kolory pobrane bezpośrednio z logo i zdjęć sklepu */
  --brand:        #0FCA19;   /* zieleń z logo */
  --brand-ink:    #0B7A10;   /* zieleń do tekstu na białym (5.6:1) */
  --brand-deep:   #075C0B;
  --brand-tint:   #E9FBEA;
  --brand-tint-2: #D2F6D4;
  --hot:          #D03312;   /* czerwień lad i wnętrza sklepu — promocje */
  --on-hot:       #FFFFFF;   /* tekst NA czerwieni — w ciemnym motywie ciemny */
  --hot-tint:     #FDEDE9;

  /* Neutralne */
  --ink:      #101418;
  --ink-2:    #1B2229;
  /* Powierzchnia CELOWO ciemna w obu motywach (hero, oferta dnia, newsletter,
     stopka, kafle kategorii). NIE używać do tego `--ink`, bo w trybie ciemnym
     `--ink` staje się prawie biały i biały tekst na nim znika. */
  --ink-surface: #101418;
  --slate:    #5A646E;   /* 6,0:1 na bieli */
  --slate-2:  #6B747C;   /* 4,8:1 na bieli — używany też jako tekst (ceny za jednostkę) */
  --line:     #E4E8EC;
  --line-2:   #F0F3F5;
  --bg:       #FFFFFF;
  --surface:  #F6F8F9;
  --surface-2:#EEF2F4;
  --card:     #FFFFFF;

  /* Semantyczne */
  --ok:       #0B7A10;
  --warn:     #B45309;
  --danger:   #C0261C;
  --info:     #1D4ED8;

  /* Skala odstępów 4/8 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:48px; --s10:64px; --s11:80px; --s12:96px;

  /* Promienie */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  /* Warstwy */
  --z-base:0; --z-sticky:20; --z-header:40; --z-overlay:60; --z-drawer:70;
  --z-modal:80; --z-toast:90;

  /* Ruch */
  --dur-1:140ms; --dur-2:220ms; --dur-3:320ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Cienie — flat design: minimalne, tylko dla warstw unoszących się */
  --sh-1: 0 1px 2px rgba(16,20,24,.06);
  --sh-2: 0 4px 14px rgba(16,20,24,.08);
  --sh-3: 0 12px 34px rgba(16,20,24,.14);
  --sh-up:0 -6px 20px rgba(16,20,24,.10);   /* cien w gore — sticky pasek zakupu */

  /* Miara wiersza. `ch` to szerokosc glifu "0", a w Barlow zero jest o ~32%
     szersze od sredniego znaku polskiego tekstu — 62ch dawalo realnie 82 znaki.
     `em` skaluje sie z font-size elementu, wiec jedna wartosc = stala liczba znakow. */
  --measure:    28em;   /* ok. 66 znakow */
  --measure-lg: 30em;   /* ok. 70 znakow */

  /* Rytm pionowy — trzy stopnie zamiast jednej wartosci 80/80.
     clamp() zdejmuje potrzebe media query i daje plynne skalowanie. */
  --rhythm-xl: clamp(48px, 5.3vw + 28px, 96px);   /* sekcja-filar */
  --rhythm-lg: clamp(40px, 3.5vw + 27px, 72px);   /* standard */
  --rhythm-md: clamp(32px, 2.65vw + 22px, 56px);  /* sekcja wspierajaca */

  /* Odstepy naglowek -> tresc */
  --gap-head:       clamp(24px, 1.77vw + 17px, 40px);
  --gap-eyebrow:    var(--s2);
  --gap-title-lead: var(--s3);

  /* Paddingi wewnetrzne — dwa poziomy zamiast osmiu wartosci */
  --pad-card:     var(--s4);
  --pad-panel:    var(--s6);
  --pad-panel-lg: clamp(24px, 1.77vw + 17px, 40px);

  --container: 1280px;
  --header-h: 64px;
  --topbar-h: 34px;
  --tabbar-h: 62px;

  color-scheme: light;
}

/* Tryb ciemny — pełna podmiana tokenów (nie inwersja) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F2F5F7; --ink-2:#DCE2E7; --slate:#A3ADB6; --slate-2:#7C868F;
    --ink-surface:#080B0D;
    --line:#2A3138; --line-2:#222930;
    --bg:#0E1215; --surface:#151A1F; --surface-2:#1C2228; --card:#161B21;
    --brand-ink:#3BE045; --brand-tint:#122814; --brand-tint-2:#173A1A;
    --hot:#F2613F; --on-hot:#2A0A04; --hot-tint:#33150F;
    --ok:#3BE045; --danger:#F2705F;
    --sh-1:0 1px 2px rgba(0,0,0,.5);
    --sh-2:0 4px 16px rgba(0,0,0,.55);
    --sh-3:0 14px 40px rgba(0,0,0,.65); --sh-up:0 -6px 20px rgba(0,0,0,.60);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:#F2F5F7; --ink-2:#DCE2E7; --slate:#A3ADB6; --slate-2:#7C868F;
    --ink-surface:#080B0D;
  --line:#2A3138; --line-2:#222930;
  --bg:#0E1215; --surface:#151A1F; --surface-2:#1C2228; --card:#161B21;
  --brand-ink:#3BE045; --brand-tint:#122814; --brand-tint-2:#173A1A;
  --hot:#F2613F; --on-hot:#2A0A04; --hot-tint:#33150F;
  --ok:#3BE045; --danger:#F2705F;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 4px 16px rgba(0,0,0,.55);
  --sh-3:0 14px 40px rgba(0,0,0,.65); --sh-up:0 -6px 20px rgba(0,0,0,.60);
  color-scheme: dark;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,
.h1,.h2,.h3,.h4{margin:0;font-family:'Barlow Condensed',
  'Barlow',system-ui,sans-serif; font-weight:700; line-height:1.05;
  letter-spacing:-.005em; text-transform:uppercase;}
p{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand);color:#0B0F0B}

/* Liczby w jednakowej szerokości — ceny nie „skaczą" */
.num,.price,.price *,td.num,.tabular,
.countdown b,.strike,.buybox__omni,.card__unit,
.rating b,.sumline,.toolbar__count b,.rbar,.cat__n,.geo__hours{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- 3. TYPOGRAFIA ---------- */
.h1{font-size:clamp(2rem,5.5vw,3.25rem)}
.h2{font-size:clamp(1.65rem,4vw,2.5rem)}
.h3{font-size:clamp(1.25rem,2.5vw,1.6rem)}
.h4{font-size:1.125rem}
.eyebrow{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:.8125rem;
  color:var(--brand-ink);
  /* flex, nie inline-flex: inline-box dokladal strut linii bazowej (~10 px)
     nad kazdym naglowkiem. Blok pelnej szerokosci zachowuje wysrodkowanie
     przy `justify-content:center` z HTML-a. */
  display:flex;align-items:center;gap:8px;line-height:1.2;
}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--brand);border-radius:2px}
.lead{font-size:1.0625rem;color:var(--slate);max-width:var(--measure)}
.muted{color:var(--slate)}
.small{font-size:.8125rem}
.tiny{font-size:.75rem}
.strike{text-decoration:line-through;color:var(--slate-2);font-weight:500;line-height:1.2}

/* ---------- 4. UKŁAD ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:16px}
@media(min-width:768px){.container{padding-inline:24px}}
@media(min-width:1024px){.container{padding-inline:32px}}
.section{padding-block:var(--rhythm-lg)}
/* Modyfikatory maja swoistosc 0,2,0 — wygrywaja przez swoistosc, nie kolejnosc.
   Wczesniej .section--tight bilo media query wylacznie dlatego, ze stalo nizej. */
.section.section--feature{padding-block:var(--rhythm-xl)}
.section.section--tight{padding-block:var(--rhythm-md)}
.section--surface{background:var(--surface)}
.stack>*+*{margin-top:var(--s4)}
.row{display:flex;align-items:center;gap:var(--s3)}
.row--between{justify-content:space-between}
.grid{display:grid;gap:var(--s4)}
/* Trzy karty w auto-fit zostawialy na tablecie sierote w drugim rzedzie */
.grid--3{grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--3>:last-child:nth-child(odd){grid-column:span 2}
  .grid--3>.post:last-child:nth-child(odd) .post__media{aspect-ratio:21/9}
}
@media(min-width:900px){
  .grid--3{grid-template-columns:repeat(3,1fr);gap:var(--s6)}
  .grid--3>:last-child:nth-child(odd){grid-column:auto}
  .grid--3>.post:last-child:nth-child(odd) .post__media{aspect-ratio:16/10}
}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
/* Naglowek z leadem potrzebuje wiecej powietrza niz sam h2 */
.sec-head:has(.lead){margin-bottom:var(--gap-head)}
.sec-head .eyebrow + :is(h2,.h2,h3,.h3){margin-top:var(--gap-eyebrow)}
.sec-head p{margin-top:var(--gap-title-lead)}

/* Naglowki poza .sec-head — klasy zamiast inline'ow i selektorow strukturalnych */
.sec-title{margin-bottom:var(--gap-title-lead)}
.sec-title--solo{margin-bottom:var(--gap-head)}
.sec-lead{margin-bottom:var(--gap-head)}
.sub-title{margin-top:var(--gap-head);margin-bottom:var(--gap-title-lead)}
.eyebrow + .sec-title,.eyebrow + .sec-title--solo{margin-top:var(--gap-eyebrow)}
.link-more{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--brand-ink);
  display:inline-flex;align-items:center;gap:6px;font-size:.9375rem;
  padding:8px 4px;min-height:44px}
.link-more svg{transition:transform var(--dur-1) var(--ease)}
.link-more:hover svg{transform:translateX(3px)}

/* Skip link ma jedna definicje w sekcji 33.1 - druga, stojaca tutaj, roznila sie
   od tamtej brakiem text-decoration i tylko mnozyla miejsca do poprawiania. */

/* ---------- 5. PRZYCISKI ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;border-radius:var(--r-sm);
  /* line-height jest tu load-bearing: bez niego .btn dziedziczy 1.6 z body,
     realna wysokosc rosnie do 55,2 px i min-height nigdy nie dziala. */
  line-height:1.15;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.0625rem;
  text-transform:uppercase;letter-spacing:.05em;cursor:pointer;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
  border:2px solid transparent;user-select:none;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;text-align:center;
}
.btn:active{transform:scale(.97)}
/* Główne CTA = dokładnie zestaw z logo: zieleń marki + czarny tusz (8.3:1) */
.btn--primary{background:var(--brand);color:#0B0F0B}
.btn--primary:hover{background:#0BB715}
.btn--dark{background:var(--ink);color:var(--bg)}
.btn--dark:hover{background:var(--ink-2)}
.btn--hot{background:var(--hot);color:var(--on-hot)}
.btn--hot:hover{filter:brightness(.93)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:var(--card)}
.btn--ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn--quiet{color:var(--ink);background:var(--surface-2)}
.btn--quiet:hover{background:var(--line)}
.btn--lg{min-height:56px;padding:14px 30px;font-size:1.1875rem}  /* 14, nie 16: przy 16 wychodzi 57,8 px i min-height znow martwe */
.btn--sm{min-height:40px;padding:8px 14px;font-size:.9375rem}
.btn--block{width:100%}
.btn svg{flex:none}   /* ikony nie moga sie kurczyc jako flex-item */
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn.is-loading{position:relative;color:transparent!important}
.btn.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;
  border:2.5px solid rgba(0,0,0,.25);border-top-color:#0B0F0B;border-radius:50%;
  animation:spin .7s linear infinite}
.btn--dark.is-loading::after,.btn--hot.is-loading::after{
  border-color:rgba(255,255,255,.3);border-top-color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}

/* Ikonowy przycisk — pole dotyku zawsze 44px */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-sm);color:var(--ink);
  position:relative;transition:background var(--dur-1) var(--ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn:active{transform:scale(.94)}

/* ---------- 6. ZNACZNIKI / BADGE ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:0 9px;line-height:1;
  border-radius:var(--r-xs);font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;
  white-space:nowrap}
.badge.badge--hot{background:var(--hot);color:var(--on-hot)}
.badge.badge--brand{background:var(--brand);color:#0B0F0B}
.badge.badge--dark{background:var(--ink);color:var(--bg)}
.badge.badge--soft{background:var(--brand-tint);color:var(--brand-ink)}
.badge.badge--line{border:1px solid var(--line);padding:0 8px;color:var(--slate)}
.badge.badge--warn{background:#FEF3C7;color:#8A5A00}
/* Plakietka ostrzegawcza ma wpisane kolory zamiast tokenow, wiec ciemna wersja
   musi byc powtorzona w OBU trybach: przy ustawieniu systemowym i przy recznym
   przelaczniku. Sam warunek [data-theme] omijal wszystkich, ktorzy nigdy nie
   dotkneli przelacznika, a maja ciemny system. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .badge.badge--warn{background:#3A2C08;color:#FBBF24}
}
:root[data-theme="dark"] .badge.badge--warn{background:#3A2C08;color:#FBBF24}

.pill{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;
  line-height:1;border-radius:var(--r-full);background:var(--surface-2);color:var(--ink);
  font-size:.8125rem;font-weight:600;white-space:nowrap}
.pill svg{flex:none;color:var(--brand-ink)}

/* ---------- 7. GWIAZDKI ---------- */
.stars{display:inline-flex;align-items:center;gap:2px;color:#F5A524}
.stars svg{width:15px;height:15px}
.rating{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;color:var(--slate)}
.rating b{color:var(--ink);font-size:.875rem}

/* ---------- 8. TOPBAR ---------- */
.topbar{background:var(--ink-surface);color:#fff;font-size:.8125rem;
  height:var(--topbar-h);display:flex;align-items:center;overflow:hidden}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ticker{display:flex;align-items:center;gap:28px;overflow:hidden;flex:1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.ticker__track{display:flex;align-items:center;gap:28px;white-space:nowrap;
  animation:ticker 34s linear infinite}
.ticker__track span{display:inline-flex;align-items:center;gap:7px;opacity:.92}
.ticker__track svg{color:var(--brand);flex:none}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.topbar__links{display:none;gap:var(--s5);flex:none}
.topbar__links a{opacity:.85;padding:6px 0}
.topbar__links a:hover{opacity:1;color:var(--brand)}
@media(min-width:900px){.topbar__links{display:flex}}

/* ---------- 9. HEADER ---------- */
.header{position:sticky;top:0;z-index:var(--z-header);background:var(--bg);
  border-bottom:1px solid var(--line);transition:box-shadow var(--dur-2)}
.header.is-stuck{box-shadow:var(--sh-2)}
.header__bar{display:flex;align-items:center;gap:12px;height:var(--header-h)}
@media(min-width:1024px){.header__bar{height:76px;gap:24px}}

.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo img{width:40px;height:40px;flex:none}
@media(min-width:1024px){.logo img{width:48px;height:48px}}
.logo__txt{display:none;line-height:1}
@media(min-width:420px){.logo__txt{display:block}}
.logo__name{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:1.3rem;text-transform:uppercase;letter-spacing:-.01em;
  color:var(--ink);display:block}
.logo__sub{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);font-weight:600;display:block;margin-top:1px}

/* Wyszukiwarka */
.search{flex:1;position:relative;display:none}
@media(min-width:900px){.search{display:block}}
.search__field{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:2px solid var(--line);border-radius:var(--r-sm);padding:0 6px 0 14px;
  height:48px;transition:border-color var(--dur-1)}
.search__field:focus-within{border-color:var(--brand);background:var(--bg)}
/* Lupa w polu wyszukiwania. Bez wlasnej reguly dziedziczy kolor tekstu i jest
   rownie mocna co wpisana fraza - ma byc ozdoba pola, nie trescia. */
.search__ikona{display:flex;align-items:center;color:var(--slate-2);flex:none}
/* 16px, nie mniej: iOS Safari przybliza strone przy fokusie na polu ponizej 16px */
.search__field input{flex:1;border:0;background:none;outline:none;font-size:16px;min-width:0}
.search__field input::placeholder{color:var(--slate-2)}
.search__go{height:38px;padding:0 16px;border-radius:var(--r-xs);background:var(--brand);
  color:#0B0F0B;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:.9375rem;flex:none}
.search__go:hover{background:#0BB715}

.suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);
  padding:8px;max-height:70vh;overflow:auto;z-index:var(--z-overlay);display:none}
.suggest.is-open{display:block}
.suggest__label{font-size:.6875rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--slate-2);font-weight:700;padding:10px 12px 6px}
.suggest__item{display:flex;align-items:center;gap:12px;padding:9px 12px;
  border-radius:var(--r-sm);width:100%;text-align:left;min-height:56px}
.suggest__item:hover,.suggest__item.is-active{background:var(--surface)}
.suggest__item img{width:44px;height:44px;object-fit:cover;border-radius:var(--r-sm);
  background:var(--surface-2);flex:none}
.suggest__item b{display:block;font-size:.875rem;font-weight:600;line-height:1.3}
.suggest__item span{font-size:.75rem;color:var(--slate)}
.suggest__price{margin-left:auto;font-weight:700;font-size:.9375rem;flex:none}

.header__actions{display:flex;align-items:center;gap:2px;margin-left:auto;flex:none}
.act{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:64px;min-height:48px;border-radius:var(--r-sm);gap:2px;position:relative;
  transition:background var(--dur-1)}
.act:hover{background:var(--surface-2)}
.act:active{transform:scale(.95)}
.act span{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;line-height:1.2;
  font-weight:700;color:var(--slate);display:none}
@media(min-width:1024px){.act span{display:block}}
/* Uwaga: musi mieć wyższą swoistość niż `.act span`, inaczej licznik
   dziedziczy szary kolor etykiety i znika na czerwonym tle. */
.act .act__count{position:absolute;top:2px;right:6px;min-width:19px;height:19px;
  padding:0 5px;border-radius:var(--r-full);background:var(--hot);color:var(--on-hot);
  font-size:.6875rem;font-weight:700;display:flex;align-items:center;
  justify-content:center;line-height:1;border:2px solid var(--bg)}
@media(min-width:1024px){.act__count{top:0;right:2px}}
.act .act__count[data-count="0"]{display:none}

/* Nawigacja desktop */
.nav{display:none;border-top:1px solid var(--line)}
@media(min-width:1024px){.nav{display:block}}
.nav__list{display:flex;align-items:center;gap:2px;height:50px}
.nav__link{display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 14px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink);
  border-bottom:3px solid transparent;transition:color var(--dur-1),border-color var(--dur-1)}
.nav__link:hover{color:var(--brand-ink);border-bottom-color:var(--brand)}
.nav__link[aria-current="page"]{color:var(--brand-ink);border-bottom-color:var(--brand)}
.nav__link--hot{color:var(--hot)}
.nav__link--hot:hover{color:var(--hot);border-bottom-color:var(--hot)}

/* Podmenu WordPressa. Menu glowne dopuszcza drugi poziom, a bez tych regul
   lista podrzedna renderuje sie caly czas i rozpycha pasek nawigacji.
   Otwarcie takze na focus-within, zeby dalo sie wejsc do niej tabulatorem. */
.nav__list li{position:relative}
.nav__list .sub-menu{position:absolute;top:100%;left:0;min-width:240px;padding:8px;
  background:var(--card);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r-md) var(--r-md);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(-6px);z-index:var(--z-overlay);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility var(--dur-2)}
.nav__list li:hover>.sub-menu,
.nav__list li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav__list .sub-menu a{display:flex;align-items:center;min-height:44px;padding:6px 12px;
  border-radius:var(--r-sm);font-family:'Barlow',sans-serif;font-weight:600;
  font-size:.9375rem;text-transform:none;letter-spacing:0;border-bottom:0;color:var(--ink)}
.nav__list .sub-menu a:hover,
.nav__list .sub-menu a[aria-current="page"]{background:var(--surface);color:var(--brand-ink)}

/* Mega menu */
.mega{position:absolute;left:0;right:0;background:var(--card);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-3);padding:28px 0;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility var(--dur-2);
  z-index:var(--z-overlay)}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
/* Etykiety grup w mega menu — celowo NIE są nagłówkami (h2–h6),
   bo w kodzie stoją przed <h1> i psułyby hierarchię dla czytników ekranu. */
.mega__h{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:.8125rem;letter-spacing:.1em;color:var(--slate-2);
  margin-bottom:10px;line-height:1.2}
.mega__col a{display:block;padding:7px 0;font-size:.9375rem;transition:color var(--dur-1)}
.mega__col a:hover{color:var(--brand-ink)}
.mega__promo{background:var(--brand-tint);border-radius:var(--r-md);padding:20px;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s4)}

/* ---------- 10. PASEK POSTĘPU DARMOWEJ DOSTAWY ---------- */
.ship-bar{background:var(--brand-tint);border-bottom:1px solid var(--brand-tint-2);
  font-size:.8125rem;padding:9px 0}
.ship-bar .container{display:flex;align-items:center;gap:12px;justify-content:center;
  flex-wrap:wrap;text-align:center}
.ship-bar strong{color:var(--brand-ink)}
.ship-progress{width:150px;height:7px;border-radius:var(--r-full);
  background:var(--brand-tint-2);overflow:hidden;flex:none}
.ship-progress i{display:block;height:100%;background:var(--brand);
  border-radius:inherit;transition:width var(--dur-3) var(--ease)}

/* Sekcja 11 (HERO) stoi w glowna.css razem z reszta regul .hero__*. Tutaj byla
   ladowana na kazdej podstronie sklepu, gdzie zadnego hero nie ma - a jej dolna
   polowa i tak siedziala w tamtym arkuszu, wiec jeden komponent mial dwa domy. */

/* ---------- 24. STOPKA ---------- */
.footer{background:var(--ink-surface);color:rgba(255,255,255,.72);
  padding-block:var(--rhythm-md);margin-top:0}
.footer__grid{display:grid;gap:var(--s8)}
@media(min-width:768px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
/* .footer__naglowek musi byc w tym selektorze: szablon stopki wypisuje naglowki
   kolumn jako h2 z ta klasa, wiec sama regula na h3 nie lapala ich wcale
   i kolumny dostawaly wielkosc naglowka pierwszego poziomu. */
.footer h3,.footer__naglowek{color:#fff;font-size:1rem;letter-spacing:.08em;margin-bottom:var(--s5);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;line-height:1.2}
/* Listy kolumn stopki. Te sama klase dostaja menu z panelu (przez menu_class)
   i wpisana w szablon kolumna adresowa - bez wlasnej reguly obie zdawaly sie
   na sam reset list i kolumna z adresem oraz godzinami stala na interlinii 1,6
   z body, przez co byla o dwa wiersze wyzsza od sasiednich. */
.footer__lista{display:grid;gap:2px;line-height:1.5}
.footer a{color:rgba(255,255,255,.72);transition:color var(--dur-1)}
.footer a:hover{color:var(--brand)}
.footer li{padding:2px 0}
/* Pole dotyku w stopce: linki muszą mieć min. 44 px wysokości */
.footer li a,.footer__legal a{display:inline-flex;align-items:center;min-height:44px;
  padding-block:4px}
.footer__bottom{align-items:center}
.footer__logo{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.footer__logo img{width:52px;height:52px}
.footer__logo b{font-family:'Barlow Condensed',sans-serif;font-size:1.375rem;color:#fff;
  text-transform:uppercase;display:block;line-height:1.05}
.footer__logo span{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand)}
.footer__soc{display:flex;gap:var(--s2);margin-top:var(--s5)}
.footer__soc a{width:44px;height:44px;border-radius:var(--r-sm);background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;transition:background var(--dur-1)}
.footer__soc a:hover{background:var(--brand);color:#0B0F0B}
.footer__pay{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.footer__pay span{padding:7px 11px;background:rgba(255,255,255,.07);border-radius:var(--r-xs);
  font-size:.75rem;font-weight:700;letter-spacing:.05em;color:rgba(255,255,255,.8)}
.footer__bottom{margin-top:var(--s7);padding-block:var(--s6);border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);justify-content:space-between;font-size:.8125rem}
.footer__legal{display:flex;flex-wrap:wrap;gap:16px}
/* Ostrzeżenie wymagane prawem — musi być czytelne (min. 4,5:1) */
.footer__note{font-size:.75rem;color:rgba(255,255,255,.58);padding-bottom:0;
  max-width:var(--measure);line-height:1.6}

/* ---------- 25. DOLNY PASEK — MOBILE JAK APLIKACJA ---------- */
/* Kolumny liczone z liczby pozycji, a nie wpisane na sztywno. Lista zakladek
   przechodzi przez filtr vs_pozycje_paska_dolnego, wiec kazda zmiana liczby
   pozycji przy repeat(5,1fr) zostawiala pusta szoste pole albo scinala piata. */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-header);
  background:var(--bg);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
}
@media(min-width:1024px){.tabbar{display:none}}
.tabbar__item{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:var(--tabbar-h);color:var(--slate);position:relative;
  transition:color var(--dur-1);-webkit-tap-highlight-color:transparent}
.tabbar__item span{font-size:.75rem;font-weight:700;letter-spacing:.06em;line-height:1.2;
  text-transform:uppercase}
.tabbar__item:active{transform:scale(.93)}
.tabbar__item[aria-current="page"]{color:var(--brand-ink)}
.tabbar__item[aria-current="page"]::before{content:"";position:absolute;top:0;
  width:30px;height:3px;background:var(--brand);border-radius:0 0 3px 3px}
.tabbar__count{position:absolute;top:6px;right:calc(50% - 22px);min-width:18px;height:18px;
  padding:0 5px;border-radius:99px;background:var(--hot);color:var(--on-hot);font-size:.625rem;
  font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);line-height:1}
.tabbar__count[data-count="0"]{display:none}
/* Miejsce pod paskiem, aby treść nie chowała się pod nim */
body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
@media(min-width:1024px){body{padding-bottom:0}}

/* ---------- 26. WARSTWY: SZUFLADA, ARKUSZ, MODAL ---------- */
.scrim{position:fixed;inset:0;background:rgba(11,14,16,.55);backdrop-filter:blur(3px);
  z-index:var(--z-overlay);opacity:0;visibility:hidden;transition:opacity var(--dur-2),visibility var(--dur-2)}
.scrim.is-open{opacity:1;visibility:visible}

/* visibility jest tu obowiazkowa, nie kosmetyczna: samo wysuniecie warstwy poza
   ekran zostawia jej pola i przyciski w kolejnosci tabulacji. Uzytkownik
   klawiatury wpadal w niewidoczny formularz, a czytnik ekranu czytal tresc
   oznaczona jako ukryta. Skokowa zmiana visibility trzyma warstwe widoczna
   do konca animacji zamykania. */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--bg);
  z-index:var(--z-drawer);display:flex;flex-direction:column;transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--dur-3) var(--ease-out),visibility var(--dur-3);box-shadow:var(--sh-3)}
.drawer.is-open{transform:none;visibility:visible}
.drawer__head{display:flex;align-items:center;gap:12px;padding:16px;
  border-bottom:1px solid var(--line);flex:none}
.drawer__head h3{font-size:1.25rem;flex:1}
.drawer__body{flex:1;overflow-y:auto;padding:16px;overscroll-behavior:contain}
.drawer__foot{flex:none;padding:16px;border-top:1px solid var(--line);background:var(--bg);
  padding-bottom:calc(16px + env(safe-area-inset-bottom))}

/* Arkusz dolny (mobile filtry) */
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:88vh;background:var(--bg);
  z-index:var(--z-drawer);border-radius:var(--r-xl) var(--r-xl) 0 0;display:flex;
  flex-direction:column;transform:translateY(100%);visibility:hidden;
  transition:transform var(--dur-3) var(--ease-out),visibility var(--dur-3);box-shadow:var(--sh-3)}
.sheet.is-open{transform:none;visibility:visible}
.sheet__grab{width:44px;height:5px;border-radius:99px;background:var(--line);
  margin:10px auto 4px;flex:none}
.sheet__head{display:flex;align-items:center;gap:12px;padding:8px 16px 14px;
  border-bottom:1px solid var(--line);flex:none}
.sheet__head h3{font-size:1.25rem;flex:1}
.sheet__body{flex:1;overflow-y:auto;padding:16px;overscroll-behavior:contain}
.sheet__foot{flex:none;padding:14px 16px;border-top:1px solid var(--line);display:flex;gap:10px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom))}

/* Nakładka wyszukiwania (mobile) */
.searchlayer{position:fixed;inset:0;background:var(--bg);z-index:var(--z-modal);
  display:flex;flex-direction:column;transform:translateY(-100%);visibility:hidden;
  transition:transform var(--dur-3) var(--ease-out),visibility var(--dur-3)}
.searchlayer.is-open{transform:none;visibility:visible}
.searchlayer__head{display:flex;gap:10px;align-items:center;padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top));border-bottom:1px solid var(--line)}
.searchlayer__body{flex:1;overflow-y:auto;padding:16px}
.searchlayer .search__field{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button,.chips a{padding:9px 14px;border-radius:var(--r-full);background:var(--surface-2);
  font-size:.875rem;font-weight:600;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.chips button:hover,.chips a:hover{background:var(--line)}

/* Modal (szybki podgląd / porównanie) */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;
  padding:16px;opacity:0;visibility:hidden;transition:opacity var(--dur-2),visibility var(--dur-2)}
.modal.is-open{opacity:1;visibility:visible}
.modal__box{background:var(--bg);border-radius:var(--r-lg);width:min(900px,100%);
  max-height:88vh;overflow:auto;box-shadow:var(--sh-3);transform:scale(.96) translateY(10px);
  transition:transform var(--dur-3) var(--ease-out)}
.modal.is-open .modal__box{transform:none}

/* Koszyk — pozycje */
.citem{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.citem img{width:72px;height:72px;object-fit:cover;border-radius:var(--r-sm);background:var(--surface-2);flex:none}
.citem__b{flex:1;min-width:0}
.citem__b b{font-size:.875rem;font-weight:600;display:block;line-height:1.35}
.citem__b .card__brand{margin-bottom:2px}
.citem__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden}
.qty button{width:40px;height:40px;display:grid;place-items:center;font-size:1.125rem;
  color:var(--ink);transition:background var(--dur-1)}
.qty button:hover{background:var(--surface-2)}
.qty input{width:44px;height:40px;text-align:center;border:0;background:none;outline:none;
  font-weight:700;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.citem__rm{color:var(--slate-2);font-size:.75rem;text-decoration:underline;
  display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin-left:-8px}
.citem__rm:hover{color:var(--danger)}

.sumline{display:flex;justify-content:space-between;padding:var(--s2) 0;font-size:.9375rem}
.sumline--total{border-top:1px solid var(--line);margin-top:var(--s2);padding-top:var(--s4);
  font-size:1.125rem;font-weight:700}
.sumline--total .price{font-size:1.75rem}

/* Pusty stan */
/* grid-column: komunikat o pustym wyniku bywa jedynym dzieckiem siatki
   produktow. Bez tej deklaracji zajmuje jedna sciezke i tekst stoi
   w waskiej kolumnie przy lewej krawedzi zamiast na srodku. */
.empty{text-align:center;padding:var(--s8) var(--s5);grid-column:1/-1}
.empty svg{margin:0 auto 16px;color:var(--slate-2)}
.empty h4{font-size:1.25rem;margin-bottom:7px}
.empty p{color:var(--slate);font-size:.9375rem;margin-bottom:20px;max-width:38ch;
  margin-inline:auto}

/* ---------- 27. TOAST ---------- */
.toasts{position:fixed;z-index:var(--z-toast);left:16px;right:16px;
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  display:flex;flex-direction:column;gap:9px;pointer-events:none}
@media(min-width:1024px){.toasts{left:auto;right:24px;bottom:24px;width:370px}}
.toast{background:var(--ink);color:#fff;border-radius:var(--r-md);padding:13px 15px;
  display:flex;gap:12px;align-items:center;box-shadow:var(--sh-3);pointer-events:auto;
  animation:toastIn var(--dur-3) var(--ease-out)}
/* Powiadomienie stoi na tokenie --ink z bialym tekstem. W trybie ciemnym
   --ink robi sie prawie bialy, wiec bez tej podmiany bialy napis znika na
   bialym tle. Warunek musi objac tez ustawienie systemowe, nie tylko przelacznik. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .toast{background:#22282F;border:1px solid var(--line)}
}
:root[data-theme="dark"] .toast{background:#22282F;border:1px solid var(--line)}
.toast.is-out{animation:toastOut var(--dur-2) var(--ease) forwards}
.toast__ic{width:34px;height:34px;border-radius:var(--r-sm);background:var(--brand);color:#0B0F0B;
  display:grid;place-items:center;flex:none}
/* Kolumna tekstu powiadomienia. min-width:0 jest tu obowiazkowe: element flex
   ma domyslnie min-width:auto, wiec dluga nazwa produktu w dowodzie spolecznym
   rozpychala powiadomienie poza prawa krawedz telefonu razem z krzyzykiem. */
.toast__body{flex:1;min-width:0}
.toast b{font-size:.875rem;display:block;line-height:1.3}
.toast span{font-size:.75rem;opacity:.72;display:block}
/* 44 px, nie 32: to jedyny sposob zamkniecia powiadomienia przed uplywem
   czasu, a powiadomienia pokazuja sie glownie na telefonie. */
.toast__x{margin-left:auto;opacity:.6;width:44px;height:44px;display:grid;place-items:center;
  flex:none;color:#fff}
.toast__x:hover{opacity:1}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.97)}}

/* Blad. Pasek z lewej, a nie inne tlo: powiadomienie ma byc rozpoznawalne
   jednym spojrzeniem, ale nie moze krzyczec kolorem przez pol ekranu.
   Tlo .toast jest ciemne w obu motywach, wiec --hot ma tu pelny kontrast. */
.toast--blad{box-shadow:var(--sh-3),inset 4px 0 0 var(--hot)}
.toast--blad .toast__ic{background:var(--hot);color:var(--on-hot)}

/* Dowód społeczny */
.toast--social{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.toast--social .toast__ic{background:var(--brand-tint);color:var(--brand-ink);overflow:hidden;
  padding:0}
.toast--social .toast__ic img{width:100%;height:100%;object-fit:cover}
.toast--social .toast__x{color:var(--slate)}

/* ---------- 28. OKRUSZKI ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:.8125rem;
  color:var(--slate);padding-block:14px}
.crumbs a{color:var(--slate);display:inline-flex;align-items:center;min-height:26px;
  padding-block:2px}
.crumbs a:hover{color:var(--brand-ink)}
.crumbs li{display:flex;align-items:center;gap:7px;min-height:26px}
.crumbs li+li::before{content:"";width:5px;height:5px;border-right:1.5px solid var(--slate-2);
  border-bottom:1.5px solid var(--slate-2);transform:rotate(-45deg)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ---------- 28.1 PODSUMOWANIE OCEN ---------- */
/* Komponent wspolny dla sekcji opinii na stronie glownej i bloku opinii na
   karcie produktu. Dlatego siedzi w arkuszu ladowanym wszedzie - w arkuszu
   strony glownej blok na karcie produktu zostawal bez ukladu i bez slupkow. */
.rev-layout{display:grid;gap:24px;align-items:start;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.rev-layout{grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:32px}}
.rsum{text-align:center;padding:var(--s6);border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--card)}
.rsum .price{font-size:3.5rem;line-height:1;display:block}
.rsum .stars{justify-content:center;margin:6px 0 4px}
.rsum__score{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:3.5rem;
  line-height:1;display:block;color:var(--ink)}
.rsum__n{display:block;font-size:.8125rem;color:var(--slate)}

/* Rozkład ocen */
.rbars{display:grid;gap:var(--s2);margin-top:var(--s5)}
.rbar{display:grid;grid-template-columns:52px 1fr 38px;gap:10px;align-items:center;
  font-size:.8125rem}
.rbar .t{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.rbar .t i{display:block;height:100%;background:#F5A524;border-radius:99px}

/* ---------- 29. PAGINACJA ---------- */
/* Ten sam markup wypisuje archiwum sklepu, lista wpisow, archiwum bloga
   i wyniki wyszukiwania. Regula musi wiec byc w arkuszu ladowanym wszedzie,
   inaczej numery stron poza sklepem stoja jeden pod drugim bez ramek. */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:var(--s7);
  flex-wrap:wrap}
.pager a,.pager span{min-width:44px;height:44px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:var(--r-sm);border:1px solid var(--line);
  font-weight:600;font-size:.9375rem;padding:0 10px;transition:all var(--dur-1)}
.pager a:hover{border-color:var(--ink);background:var(--surface)}
.pager [aria-current]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pager .dots{border:0}

/* ---------- 31. ANIMACJE WEJŚCIA ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Ukrycie wchodzi WYLACZNIE z klasa vs-anim, ktora doklada skrypt motywu.
   Bez tego warunku blad w dowolnym skrypcie na stronie zostawial cala tresc
   z opacity:0 - odwiedzajacy widzial pusta sekcje i wychodzil. */
.vs-anim .reveal{opacity:0}
.reveal.is-in{animation:fadeUp 520ms var(--ease-out) forwards}
.vs-anim .reveal-stagger>*{opacity:0}
.reveal-stagger.is-in>*{animation:fadeUp 480ms var(--ease-out) forwards}
.reveal-stagger.is-in>*:nth-child(1){animation-delay:0ms}
.reveal-stagger.is-in>*:nth-child(2){animation-delay:45ms}
.reveal-stagger.is-in>*:nth-child(3){animation-delay:90ms}
.reveal-stagger.is-in>*:nth-child(4){animation-delay:135ms}
.reveal-stagger.is-in>*:nth-child(5){animation-delay:180ms}
.reveal-stagger.is-in>*:nth-child(6){animation-delay:225ms}
.reveal-stagger.is-in>*:nth-child(7){animation-delay:270ms}
.reveal-stagger.is-in>*:nth-child(8){animation-delay:315ms}

/* Szkielet ładowania */
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line-2) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- 32. DOSTĘPNOŚĆ / PREFERENCJE ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.is-locked{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.reveal-stagger>*{opacity:1!important}
  .ticker__track{animation:none}
  .geo__open i{animation:none}
}
/* Sticky .header przy >=1024 ma 76 px (.header__bar) + 50 px (.nav__list) = 126 px.
   Przy 120 px kotwica #quiz chowała górę karty pod nagłówkiem.
   NIE dodawać scroll-margin-top na .hero__card — sumuje się z tym paddingiem. */
html{scroll-behavior:smooth;scroll-padding-top:132px}
@media(min-width:1024px){
  html{scroll-padding-top:144px}                 /* 128 naglowka + 16 */
  html:has(.pdp-nav){scroll-padding-top:196px}   /* + 52 px paska sekcji PDP */
}

@media print{
  .header,.tabbar,.topbar,.stickybuy,.toasts,.drawer,.sheet,.scrim,.footer__soc{display:none!important}
  body{padding-bottom:0}
}

/* ---------- 33. WORDPRESS I GENERATEPRESS ---------- */

/* 33.1 Klasy dostepnosciowe WordPressa.
   MUSZA byc tutaj, bo motyw zdejmuje arkusz generate-style, a razem z nim
   znikaja .screen-reader-text i style skip-linku. Bez tego napis
   "Przejdz do tresci" wisi na stale w lewym gornym rogu strony glownej. */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* Element pozostaje pozycjonowany absolutnie takze po fokusie. Wczesniejsze
   position:static!important wracalo z nim do zwyklego przeplywu: skip-link po
   nacisnieciu Tab wskakiwal nad pasek gorny i zjezdzal cala strone o wysokosc
   przycisku, zamiast polozyc sie nad trescia. */
.screen-reader-text:focus{
  width:auto;height:auto;margin:0;padding:12px 18px;
  overflow:visible;clip:auto;white-space:normal;
  left:8px;top:8px;z-index:200;
  background:var(--brand);color:#0B0F0B;border-radius:var(--r-sm);
  font-weight:700;text-decoration:none;
}
/* Skip-link widoczny dopiero przy fokusie - ukryty na stale lamie WCAG 2.4.1 */
.skip-link{
  position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--brand);color:#0B0F0B;padding:12px 18px;
  border-radius:var(--r-sm);font-weight:700;text-decoration:none;
  transition:top var(--dur-1);
}
.skip-link:focus{top:8px}

/* Cel skip-linku dostaje tabindex minus jeden, wiec przegladarka rysuje przy nim
   obwodke fokusu na calej szerokosci strony. To cel programowy, a nie element
   sterujacy - obwodka tylko myli. */
.vs-tresc{display:block}
.vs-tresc:focus{outline:none}

/* 33.2 Zerowanie wrapperow GeneratePress.
   Wlasne szablony pokrywaja wszystkie widoki, wiec jedyne miejsce, w ktorym
   opakowania rodzica jeszcze wchodza, to haczyk woocommerce_before_main_content
   wolany przez nasze szablony sklepu - a tam nasz uklad juz stoi w kontenerze.
   Bez tego dostajemy max-width w max-width, podwojny padding na desktopie
   i poziomy scroll przy sekcjach full-bleed.
   UWAGA: opakowanie z tego haczyka zawiera takze wlasny element main, czyli
   na widokach sklepu w drzewie sa DWA punkty orientacyjne main. Zdjecie go
   wymaga nazwy funkcji rodzica, wiec swiadomie tego nie robimy - patrz
   README, sekcja o utrzymaniu GeneratePress. */
.vs-motyw #page.grid-container,
.vs-motyw #content.site-content,
.vs-motyw #primary.content-area,
.vs-motyw #main.site-main,
.vs-motyw .inside-article{
  max-width:none;width:100%;padding:0;margin:0;background:none;box-shadow:none;
}
.vs-motyw .site-content{display:block}
.vs-motyw .entry-content > *{max-width:none}

/* 33.3 Deklaracje odporne na powrot dynamicznego CSS motywu nadrzednego.
   Zdjecie tego arkusza opiera sie na nazwie funkcji rodzica, wiec po jego
   aktualizacji moze cicho wrocic. Ponizsze reguly sprawiaja, ze nawet wtedy
   typografia, kolory i przyciski zostaja nasze. */
.vs-motyw body,
body.vs-motyw{
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--bg);
}
.vs-motyw h1,.vs-motyw h2,.vs-motyw h3,.vs-motyw h4,.vs-motyw h5{
  font-family:'Barlow Condensed','Barlow',system-ui,sans-serif;
}
/* CTA = zielen marki z CZARNYM tekstem, dokladnie jak w logo (8,3:1).
   Zielen #0FCA19 na bieli ma tylko 2,2:1 i NIGDY nie idzie pod tekst.

   Sama klasa .btn dostaje TYLKO krój i ramkę. Kolory ida na modyfikatory.
   Wczesniej zielen siedziala w regule .vs-motyw .btn, ktora ma swoistosc 0,2,0
   i bila wszystkie modyfikatory 0,1,0 z sekcji 5: przycisk Anuluj w warstwie
   wyszukiwania (.btn--quiet), ciemny (.btn--dark) i promocyjny (.btn--hot)
   renderowaly sie jako zielone CTA. Kazdy wariant ma tu wiec wlasnego blizniaka
   o tej samej swoistosci. */
.vs-motyw .btn{
  font-family:'Barlow Condensed',sans-serif;
  border:2px solid transparent;
}
.vs-motyw .btn--primary{background:var(--brand);color:#0B0F0B}
.vs-motyw .btn--dark{background:var(--ink);color:var(--bg)}
.vs-motyw .btn--hot{background:var(--hot);color:var(--on-hot)}
.vs-motyw .btn--quiet{background:var(--surface-2);color:var(--ink)}
.vs-motyw .btn--ghost{
  background:var(--card);color:var(--ink);border-color:var(--line);
}
/* Stany najechania MUSZA byc powtorzone w tej samej konwencji. Selektor
   .btn--primary:hover to swoistosc 0,2,0 - tyle samo co .vs-motyw .btn--primary,
   a ten stoi nizej w arkuszu i wygrywal kolejnoscia. Efekt: zaden przycisk
   w calym serwisie nie zmienial koloru pod kursorem. */
.vs-motyw .btn--primary:hover{background:#0BB715}
.vs-motyw .btn--dark:hover{background:var(--ink-2)}
.vs-motyw .btn--hot:hover{filter:brightness(.93)}
.vs-motyw .btn--quiet:hover{background:var(--line)}
.vs-motyw .btn--ghost:hover{border-color:var(--ink);background:var(--surface)}

/* 33.4 Pola formularzy: nigdy ponizej 16px.
   iOS Safari przybliza cala strone przy fokusie na polu mniejszym niz 16px,
   co rozwala pelnoekranowa warstwe wyszukiwania i kase. */
.vs-motyw input[type=text],.vs-motyw input[type=email],.vs-motyw input[type=tel],
.vs-motyw input[type=search],.vs-motyw input[type=number],.vs-motyw input[type=password],
.vs-motyw textarea,.vs-motyw select{
  font-size:16px;
}