/* Vitamin Shop - glowna.css
   Sekcje strony glownej: hero, kreator doboru, pasek korzysci, kafle
   kategorii, oferta dnia, subskrypcja, certyfikaty, opinie, sklep
   stacjonarny, FAQ, newsletter, poradnik.
   Warunek ladowania: is_front_page().
   Zrodlo: wizualizacja sklepu (assets/css/style.css). */

/* ==========================================================================
   11. HERO — „MASTHEAD + SCENA"

   Wszystkie odstępy z --s1..--s12, promienie z --r-*.
   Fotografia: opacity:1, zero gradientu, zero warstwy przyciemniającej.
   ========================================================================== */

.hero{position:relative;background:var(--ink-surface);color:#fff;overflow:hidden}

/* Zielona linia na styku z paskiem USP — płaska sygnatura marki. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--brand);z-index:4;pointer-events:none}

/* ---------- 11.1 Siatka ----------
   375  : ZDJĘCIE (pełna szerokość ekranu) → tytuł → lead+CTA → dowody → kreator
   768  : masthead na całą szerokość → kadr → (lead+CTA | kreator) → dowody
   1024 : (masthead | pas akcji) / (kadr | kreator) / (dowody | —)
   W DOM <h1> jest ZAWSZE pierwszy. Jedyny rozjazd kolejności to kadr
   przeskakujący nad tytuł poniżej 768 px — w kadrze nie ma nic fokusowalnego.
   Jeśli ktoś kiedyś opakuje <figure> w <a>, trzeba przenieść ją w DOM. */
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"media" "title" "deck" "trust" "card";
  row-gap:var(--s6);
  padding-block:0 var(--s9);      /* 0 u góry: kadr dotyka paska dostawy */
}
@media(min-width:768px){
  .hero__inner{
    grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);
    grid-template-areas:
      "title title"
      "media media"
      "deck  card"
      "trust .";
    column-gap:var(--s7);
    row-gap:var(--s7);
    padding-block:var(--s8) var(--s9);
  }
}
@media(min-width:1024px){
  .hero__inner{
    /* Kolumna kreatora: 340 px @1024, 408 px @1280, 413 px @1440+.
       Kadr dostaje resztę: 600 / 753 / 763 px. */
    grid-template-columns:minmax(0,1fr) clamp(340px,34%,440px);
    grid-template-areas:
      "title deck"
      "media card"
      "trust .";
    column-gap:var(--s8);
    row-gap:var(--s7);
    padding-block:var(--s7) var(--s10);
  }
}

/* ---------- 11.2 Masthead ---------- */
/* Mobile: „arkusz" aplikacji wjeżdżający 32 px na zdjęcie.
   z-index i kryjące tło są tu load-bearing — bez nich arkusz schowa się
   POD kadrem i zaokrąglone rogi znikną. */
.hero__head{
  grid-area:title;position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s3);
  background:var(--ink-surface);
  margin-inline:calc(var(--s4) * -1);      /* = padding-inline .container na mobile */
  padding:var(--s6) var(--s4) 0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
@media(min-width:768px){
  .hero__head{background:none;margin-inline:0;padding:0;border-radius:0}
}

/* Zieleń marki na --ink-surface = 8,35:1 → eyebrow bezpieczny bez --brand-ink.
   Ta reguła MUSI stać przed .hero__card .eyebrow (równa swoistość 0,2,0). */
.hero .eyebrow{color:var(--brand)}
.hero .eyebrow::before{background:var(--brand)}

.hero__title{
  font-family:'Barlow Condensed','Barlow',system-ui,sans-serif;
  font-weight:700;text-transform:uppercase;color:#fff;margin:0;
  font-size:clamp(2.5rem,5.4vw,4.25rem);   /* 40 px @375 → 68 px @1260+ */
  line-height:1.02;letter-spacing:-.02em;
  overflow-wrap:break-word;
}
/* Łamanie sterowane blokiem, nie <br>: dwa równe wiersze w każdej szerokości.
   „SUPLEMENTY, KTÓRE" = 17 znaków; przy 68 px to 486 px w kolumnie 753 px. */
.hero__title em{font-style:normal;display:block;color:var(--brand)}

/* ---------- 11.3 Zdjęcie — pełna siła koloru ---------- */
/* margin:0 jest OBOWIĄZKOWE: reset (linie 101–123) nie zeruje <figure>,
   a UA daje mu margin:1em 40px. */
.hero__media{
  grid-area:media;position:relative;align-self:start;margin:0;
  margin-inline:calc(var(--s4) * -1);                    /* mobile: pełna szerokość ekranu */
  margin-bottom:calc((var(--s6) + var(--s7)) * -1);      /* −56 = −24 kasuje row-gap, −32 to nachodzenie arkusza */
}
@media(min-width:768px){
  .hero__media{margin-inline:0;margin-bottom:0}
}

.hero__plate{
  position:relative;z-index:1;
  aspect-ratio:16/10;              /* rezerwacja miejsca → CLS = 0 */
  overflow:hidden;
  background:#0B0F0B;              /* placeholder na czas dekodowania */
}
@media(min-width:768px){
  .hero__plate{aspect-ratio:16/9;border-radius:var(--r-lg)}
}
.hero__plate picture{position:absolute;inset:0;display:block}
.hero__plate img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  opacity:1;                       /* CELOWO — to była przyczyna reklamacji */
  filter:saturate(1.06);
}

/* Kryjący blok marki wystający 12 px zza prawego dolnego rogu kadru
   (rejestr drukarski). Zastępuje ramkę opacity .55 — płasko, 100% koloru.
   Mieści się w 40-px rynnie kolumn i 32-px odstępie wierszy. */
@media(min-width:1024px){
  .hero__media::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    inset:var(--s7) calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s7);
    background:var(--brand);border-radius:var(--r-lg);
  }
}

/* Jedyny tekst leżący na fotografii. Tło kryjące → 8,3:1 nad DOWOLNYM kadrem.
   NIE dodawać opacity, rgba ani backdrop-filter. */
.hero__stamp{
  position:absolute;z-index:2;left:0;bottom:0;
  display:inline-flex;align-items:center;gap:var(--s2);
  max-width:calc(100% - var(--s6));
  padding:var(--s3) var(--s4);
  background:var(--brand);color:#0B0F0B;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.9375rem;line-height:1.15;
  border-radius:0 var(--r-md) 0 0;
}
.hero__stamp svg{flex:none}

/* ---------- 11.4 Pas akcji ---------- */
.hero__deck{grid-area:deck;display:flex;flex-direction:column;
  justify-content:flex-end;gap:var(--s5)}
.hero__lead{
  margin:0;color:rgba(255,255,255,.86);        /* 12,5:1 na --ink-surface */
  font-size:1.0625rem;line-height:1.55;max-width:46ch;
}
/* CTA na pełną szerokość w każdej szerokości ekranu — touch-first
   i zero ryzyka, że długa etykieta „Dobierz suplement w 30 s" złamie się
   na dwa wiersze w wąskiej kolumnie. */
.hero__cta{display:grid;gap:var(--s3)}
.hero__cta .btn{width:100%}
/* Baza .btn--ghost to jasny przycisk (--card / --line / --ink) — na grafitowym
   hero byłby białym prostokątem. Trzy właściwości muszą być nadpisane razem. */
.hero__cta .btn--ghost{background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.34);color:#fff}
.hero__cta .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* ---------- 11.5 Dowody ---------- */
/* Mobile: trzy pigułki łamią się na trzy wiersze i dokładają 124 px wysokości
   hero — dlatego jeden pas przewijany poziomo, jak .rail w reszcie systemu.
   margin-inline MUSI być równe padding-inline .container (16 px). */
.hero__trust{
  grid-area:trust;display:flex;gap:var(--s2);
  flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  margin-inline:calc(var(--s4) * -1);
  padding:var(--s5) var(--s4) 0;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero__trust::-webkit-scrollbar{display:none}
.hero__trust .pill{flex:none;background:rgba(255,255,255,.10);color:#fff;
  border:1px solid rgba(255,255,255,.16)}   /* biel na ~#25292D = 14:1 */
.hero__trust .pill svg{color:var(--brand)}
@media(min-width:768px){
  .hero__trust{flex-wrap:wrap;overflow:visible;margin-inline:0;padding:var(--s5) 0 0}
}

/* ---------- 11.6 Karta kreatora (hooki JS bez zmian) ---------- */
.hero__card{
  grid-area:card;align-self:start;position:relative;overflow:hidden;
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);            /* widoczne dopiero w trybie ciemnym */
  border-radius:var(--r-lg);
  padding:var(--s6);                       /* 24 — zamiast 22 spoza skali */
  box-shadow:var(--sh-3);
}
/* Płaski pasek marki zamiast obwódki 2 px opacity .35.
   border:0/opacity:1 to zabezpieczenie na wypadek, gdyby ktoś zostawił
   starą regułę .hero__card::before z inset:0;border:2px solid;opacity:.35. */
.hero__card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--brand);border:0;opacity:1;pointer-events:none;
}
.hero__card-head{margin-bottom:var(--s4)}   /* 16 — zamiast inline 14 */
/* Klasa .h3 ustawia WYŁĄCZNIE font-size; rodzinę Barlow Condensed nadaje
   selektor elementów h1..h5 (linia 117), więc <p class="h3"> renderował się
   zwykłym Barlow. Tytuł karty dostaje własną, kompletną deklarację. */
.hero__card-title{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.375rem;line-height:1.1;letter-spacing:-.005em;
  margin-top:var(--s2);color:var(--ink);
}
.hero__card-note{
  margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid var(--line-2);
  font-size:.75rem;color:var(--slate);       /* 6:1 na białej karcie */
}
/* Karta jest JASNA — cofamy zieleń z ciemnego hero,
   inaczej #0FCA19 na bieli daje 2,2:1. Musi stać PO .hero .eyebrow. */
.hero__card .eyebrow{color:var(--brand-ink)}
.hero__card .eyebrow::before{background:var(--brand)}

/* ---------- 12. QUIZ DOBORU ---------- */
.quiz__steps{display:flex;gap:6px;margin-bottom:var(--s4)}
.quiz__steps i{flex:1;height:5px;border-radius:var(--r-full);background:var(--surface-2)}
.quiz__steps i.is-on{background:var(--brand)}
.quiz__q{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.35rem;
  text-transform:uppercase;line-height:1.15;margin-bottom:4px}
.quiz__hint{font-size:.8125rem;color:var(--slate);margin-bottom:var(--s4)}
.quiz__opts{display:grid;gap:8px}
.quiz__opt{display:flex;align-items:center;gap:12px;padding:var(--s3) var(--s4);
  border:2px solid var(--line);border-radius:var(--r-sm);text-align:left;width:100%;
  min-height:56px;transition:border-color var(--dur-1),background var(--dur-1);
  background:var(--card);font-weight:600;font-size:.9375rem}
.quiz__opt:hover{border-color:var(--brand);background:var(--brand-tint)}
.quiz__opt:active{transform:scale(.985)}
.quiz__opt i{width:34px;height:34px;border-radius:var(--r-sm);background:var(--brand-tint);
  color:var(--brand-ink);display:grid;place-items:center;flex:none}
.quiz__opt.is-sel{border-color:var(--brand);background:var(--brand-tint)}
.quiz__result{display:none}
.quiz__result.is-on{display:block;animation:fadeUp var(--dur-3) var(--ease-out)}
.quiz__pick{display:flex;gap:12px;align-items:center;padding:12px;
  border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px}
.quiz__pick img{width:56px;height:56px;object-fit:cover;border-radius:var(--r-sm);flex:none;
  background:var(--surface-2)}
.quiz__pick b{font-size:.875rem;font-weight:600;display:block;line-height:1.3}
.quiz__pick .price{font-size:1rem;font-weight:800;margin-left:auto;flex:none}

/* ---------- 13. PASEK USP ---------- */
.usp-band{background:var(--bg);border-top:0;border-bottom:1px solid var(--line)}
.usp{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
@media(min-width:900px){.usp{grid-template-columns:repeat(4,1fr)}}
.usp__item{background:var(--bg);padding:var(--s5) var(--s4);display:flex;gap:var(--s3);align-items:flex-start}
.usp__ic{width:42px;height:42px;border-radius:var(--r-sm);background:var(--brand);
  color:#0B0F0B;display:grid;place-items:center;flex:none}
.usp__item b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:1.0625rem;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.2}
.usp__item span{font-size:.8125rem;color:var(--slate);display:block;margin-top:2px}

/* ---------- 14. KATEGORIE ---------- */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.cats{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.cats{grid-template-columns:repeat(4,1fr);gap:16px}}
.cat{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--ink-surface);
  aspect-ratio:1/1;display:block;transition:transform var(--dur-2) var(--ease)}
.cat:hover{transform:translateY(-3px)}
.cat img{width:100%;height:100%;object-fit:cover;opacity:.62;
  transition:transform var(--dur-3) var(--ease),opacity var(--dur-2)}
.cat:hover img{transform:scale(1.06);opacity:.5}
.cat__body{position:absolute;inset:auto 0 0 0;padding:14px;
  background:linear-gradient(transparent,rgba(11,14,16,.9) 55%);color:#fff}
.cat__body b{font-family:'Barlow Condensed',sans-serif;font-size:1.1875rem;
  text-transform:uppercase;letter-spacing:.01em;display:block;line-height:1.1}
.cat__body span{font-size:.75rem;opacity:.75}
.cat__n{position:absolute;top:10px;right:10px;background:var(--brand);color:#0B0F0B;
  font-size:.6875rem;font-weight:800;padding:3px 8px;border-radius:var(--r-full)}
/* Kafel kategorii bez zdjecia dostaje ikone zastepcza. Bez pozycjonowania
   wypada ona w naroznik nad opisem i kafel wyglada na uszkodzony. */
.cat__ico{position:absolute;inset:0;display:grid;place-items:center;color:var(--brand);
  opacity:.55;pointer-events:none}
/* Kafel „bento" — pierwsza kategoria większa na desktopie */
@media(min-width:1024px){
  .cats--bento .cat:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .cats--bento .cat:first-child .cat__body b{font-size:1.75rem}
  /* 8 kafli + bento 2x2 w 4 kolumnach zostawialo dziure 280x280 w ostatnim rzedzie */
  .cats--bento .cat:nth-child(8){grid-column:span 2;aspect-ratio:auto}
  .cats--bento .cat:nth-child(8) img{position:absolute;inset:0}
  .cats--bento .cat:nth-child(8) .cat__body b{font-size:1.375rem}
}
@media(min-width:640px) and (max-width:1023px){
  .cats .cat:nth-child(7){grid-column:span 2;aspect-ratio:auto}
  .cats .cat:nth-child(7) img{position:absolute;inset:0}
}

/* ---------- 16. OFERTA DNIA ---------- */
.deal{background:var(--ink-surface);color:#fff;border-radius:var(--r-lg);overflow:hidden;
  display:grid;gap:0}
@media(min-width:1100px){
  .deal{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .deal__media{aspect-ratio:auto}
}
.deal__media{position:relative;min-height:0;aspect-ratio:16/10;background:var(--surface-2)}
.deal__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.deal__body{padding:var(--pad-panel-lg)}
.deal h3{color:#fff;font-size:clamp(1.5rem,3vw,2.25rem);margin-block:var(--s2) var(--s3)}
.deal__body>p{margin-bottom:var(--s6)}
.deal__price{display:flex;align-items:baseline;gap:var(--s3);margin-block:var(--s6) var(--s2)}
.deal__price .price{font-size:2.75rem;color:var(--brand)}
.deal__price .strike{font-size:1.25rem;color:rgba(255,255,255,.5)}
.countdown{display:flex;gap:var(--s2);margin-block:var(--s6)}
.countdown div{background:rgba(255,255,255,.1);border-radius:var(--r-sm);padding:9px 0;
  min-width:60px;text-align:center}
.countdown b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:1.6rem;
  line-height:1;color:#fff}
.countdown span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;
  line-height:1.2;opacity:.65}
.deal__stock{margin-top:var(--s4)}
.deal__actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s7)}
.deal__stock .bar{height:8px;background:rgba(255,255,255,.14);border-radius:99px;
  overflow:hidden;margin-top:7px}
.deal__stock .bar i{display:block;height:100%;background:var(--hot);border-radius:99px}

/* ---------- 17. SUBSKRYPCJA ---------- */
.sub{display:grid;gap:var(--s6);align-items:center;background:var(--brand-tint);
  border-radius:var(--r-lg);padding:var(--pad-panel-lg)}
@media(min-width:900px){.sub{grid-template-columns:1.1fr .9fr}}
.sub__steps{display:grid;gap:12px;margin-top:var(--s5)}
.sub__step{display:flex;gap:var(--s3);align-items:flex-start}
.sub__step b{width:30px;height:30px;border-radius:50%;background:var(--brand);
  color:#0B0F0B;display:grid;place-items:center;font-family:'Barlow Condensed',sans-serif;
  font-size:1rem;flex:none}
.sub__card{background:var(--card);border-radius:var(--r-md);padding:var(--pad-panel-lg);box-shadow:var(--sh-2)}
.sub__toggle{display:flex;background:var(--surface-2);border-radius:var(--r-sm);padding:4px;
  margin-bottom:var(--s5)}
.sub__toggle button{flex:1;min-height:44px;border-radius:var(--r-xs);font-weight:700;font-size:.875rem;
  transition:background var(--dur-1),color var(--dur-1);color:var(--slate)}
.sub__toggle button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.sub__toggle button:hover:not([aria-pressed="true"]){color:var(--ink)}
.sub__toggle button:active{transform:scale(.96)}
/* :last-of-type nie matchowalo niczego — ostatnim <div> w .sub__card jest
   .sumline--total, wiec zadeklarowany tam border-bottom nigdy sie nie renderowal. */
.sub__save{display:flex;justify-content:space-between;padding:var(--s2) 0;
  border-top:1px dashed var(--line);font-size:.9375rem}

/* ---------- 18. ZAUFANIE / CERTYFIKATY ---------- */
.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:768px){.trust{grid-template-columns:repeat(3,1fr);gap:var(--s4)}}
@media(min-width:1024px){.trust{grid-template-columns:repeat(6,1fr)}}
.trust__item{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5) var(--s4);
  text-align:center;background:var(--card)}
/* kafle certyfikatow nie sa klikalne — podswietlenie bylo falszywym afordansem */
.trust__item:hover{border-color:var(--line)}
.trust__item svg{margin:0 auto 9px;color:var(--brand-ink)}
/* Wtyczka sekcji owija ikone albo logo certyfikatu w spana. Bez wlasnej reguly
   spana nie da sie wysrodkowac (margin auto nie dziala na elemencie liniowym),
   a wgrane logo wychodzi w pelnej rozdzielczosci poza kafel. */
.cert__ico{display:block;margin:0 auto 9px;line-height:0}
.cert__ico img{max-width:56px;height:auto;margin-inline:auto}
.cert__ico svg{margin:0 auto}
.trust__item b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:1rem;
  text-transform:uppercase;letter-spacing:.03em}
.trust__item span{font-size:.75rem;color:var(--slate);display:block;margin-top:3px;line-height:1.45}

/* Marki */
.brands-head{justify-content:center;margin:var(--s7) 0 var(--s5)}
.brands{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center}
.brands a{padding:10px 17px;border:1px solid var(--line);border-radius:var(--r-full);line-height:1.15;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:.9375rem;color:var(--slate);min-height:44px;
  display:inline-flex;align-items:center;transition:all var(--dur-1)}
.brands a:hover{border-color:var(--ink);color:var(--ink);background:var(--surface)}

/* ---------- 19. OPINIE ---------- */
.review{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--pad-panel);display:flex;flex-direction:column;gap:var(--s3);height:100%}
.review__top{display:flex;align-items:center;gap:var(--s3)}
.review__av{width:42px;height:42px;border-radius:50%;background:var(--brand);
  color:#0B0F0B;display:grid;place-items:center;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:1.0625rem;flex:none}
.review__who b{display:block;font-size:.875rem;font-weight:700}
.review__who span{font-size:.75rem;color:var(--slate)}
.review p{font-size:.9375rem;color:var(--ink-2);flex:1}
.review__ver{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;
  color:var(--ok);font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* Podsumowanie ocen (.rev-layout, .rsum, .rbars) stoi w baza.css: ten sam
   komponent rysuje sekcja opinii na stronie glownej ORAZ blok opinii na karcie
   produktu, gdzie ten arkusz sie nie laduje. */

/* ---------- 20. SKLEP STACJONARNY / GEO ---------- */
.geo{display:grid;gap:var(--s6);align-items:stretch}
@media(min-width:900px){.geo{grid-template-columns:1fr 1fr}}
.geo__map{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:300px;
  background:var(--surface-2);border:1px solid var(--line)}
.geo__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.9)}
/* Mapa musi sie sciemnic takze przy ciemnym ustawieniu systemu, nie tylko po
   recznym przelaczeniu - jasny prostokat mapy na ciemnej stronie rozswietla
   pol ekranu. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .geo__map iframe{filter:invert(.9) hue-rotate(180deg) saturate(.7)}
}
:root[data-theme="dark"] .geo__map iframe{filter:invert(.9) hue-rotate(180deg) saturate(.7)}

/* Zgoda na mape. Ramka Google leci dopiero po kliknieciu, wiec do tego czasu
   pole mapy wypelnia przycisk zgody. Bez tej reguly jest to zwykly przycisk
   w lewym gornym rogu pustego prostokata. */
.geo__zgoda{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s3);padding:var(--s6);
  background:var(--surface-2);color:var(--ink);text-align:center;font-size:.9375rem;
  transition:background var(--dur-1)}
.geo__zgoda:hover{background:var(--line-2)}
.geo__zgoda-ico{display:grid;place-items:center;width:56px;height:56px;flex:none;
  border-radius:50%;background:var(--brand-tint);color:var(--brand-ink)}
.geo__map.is-off{cursor:pointer}
.geo__card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad-panel-lg)}
.geo__nap{display:grid;gap:var(--s4);margin-block:var(--s6)}
.geo__nap div{display:flex;gap:12px;align-items:flex-start}
.geo__nap svg{color:var(--brand-ink);flex:none;margin-top:2px}
.geo__nap b{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--slate-2);margin-bottom:1px}
/* Telefon i e-mail to realne CTA — pełne pole dotyku 44 px */
.geo__nap a{display:inline-flex;align-items:center;min-height:44px;color:var(--brand-ink);
  text-decoration:underline;text-underline-offset:3px}
.geo__nap a:hover{text-decoration-thickness:2px}
.geo__hours{width:100%;font-size:.9375rem}
.geo__hours td{padding:var(--s2) 0;border-bottom:1px solid var(--line-2)}
.geo__hours tr:last-child td{border-bottom:0}
.geo__hours td:last-child{text-align:right;font-weight:600}
.geo__hours tr.is-today td{color:var(--brand-ink);font-weight:700}
.geo__open{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.875rem;
  color:var(--ok)}
.geo__open i{width:9px;height:9px;border-radius:50%;background:currentColor;
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- 21. FAQ / AKORDEON ---------- */
.faq{display:grid;gap:10px;max-width:860px;margin-inline:auto}
.acc{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  overflow:hidden;transition:border-color var(--dur-2)}
.acc[open]{border-color:var(--brand)}
.acc summary{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);cursor:pointer;
  font-weight:600;font-size:1rem;list-style:none;min-height:56px}
.acc summary::-webkit-details-marker{display:none}
/* translate MUSI stac przed rotate — w odwrotnej kolejnosci przesuniecie liczy sie
   w ukladzie juz obroconym i strzalka odskakuje po skosie o 6 px zamiast obracac sie w miejscu. */
.acc summary::after,.fgroup__h::after{content:"";flex:none;margin-left:auto;width:10px;height:10px;
  border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);
  transform:translateY(-2px) rotate(45deg);transition:transform var(--dur-2) var(--ease)}
.acc[open] summary::after{transform:translateY(2px) rotate(225deg);border-color:var(--brand-ink)}
.acc summary:hover{background:var(--surface)}
.acc__body{padding:0 var(--s5) var(--s5);color:var(--slate);font-size:.9375rem;max-width:var(--measure-lg)}
.acc__body p+p{margin-top:10px}
.acc__body strong{color:var(--ink)}

/* ---------- 22. NEWSLETTER ---------- */
.news{background:var(--ink-surface);border-radius:var(--r-lg);padding:var(--pad-panel-lg);color:#fff;
  display:grid;gap:var(--s6);align-items:center}
@media(min-width:900px){.news{grid-template-columns:1.1fr .9fr}}
.news h2{color:#fff}
.news p{color:rgba(255,255,255,.72)}
.news form{display:flex;gap:9px;flex-wrap:wrap}
.news input[type=email]{flex:1;min-width:200px;height:48px;border-radius:var(--r-sm);
  border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;
  padding:0 16px;outline:none;font-size:16px}
.news input[type=email]:focus{border-color:var(--brand)}
.news input::placeholder{color:rgba(255,255,255,.45)}
.news .consent{display:flex;gap:9px;align-items:flex-start;font-size:.75rem;
  color:rgba(255,255,255,.6);margin-top:12px;line-height:1.5}
.news .consent input{margin-top:1px;width:20px;height:20px;accent-color:var(--brand);flex:none;
  cursor:pointer}
.news .consent{cursor:pointer}
.news .consent a{color:var(--brand);text-decoration:underline}

/* Stan bledu — w systemie nie istnial, a formularz ma `novalidate` przy `required` */
[aria-invalid="true"]{border-color:var(--danger)}
.news input[type=email][aria-invalid="true"]{border-color:#F2705F;
  background:rgba(242,112,95,.12)}
.form-err{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);
  font-size:.8125rem;font-weight:600;color:var(--danger)}
/* .news stoi na --ink-surface, ciemnym w OBU motywach — --danger dalby tam 3,5:1 */
.news .form-err{color:#F2705F}

/* ---------- 23. BLOG / PORADNIK ---------- */
.post{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;height:100%;transition:border-color var(--dur-2),
  transform var(--dur-2) var(--ease)}
.post:hover{border-color:var(--ink);transform:translateY(-3px)}
.post__media{aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease)}
.post:hover .post__media img{transform:scale(1.05)}
.post__body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.post__body h3{font-size:1.0625rem;text-transform:none;letter-spacing:0;
  font-family:'Barlow',sans-serif;font-weight:700;line-height:1.35}
.post__meta{font-size:.75rem;color:var(--slate-2);margin-top:auto;padding-top:8px}