/* ==========================================================================
   OAZA / Mindfull Wellness - Vouchery
   Design system built directly on the OAZA brandbook:
     - "OAZA_kolorystyka i typografia-2.pdf"  (palette + type)
     - "OAZA_KV finalny.pdf"                  (key visual: "Linearnie i eterycznie")

   Brandbook rules encoded here:
     * "inwersja kolorystyczna - jasny layout strony, ktory rownowazy ciemne
        wnetrze lokalu"  -> light canvas is the primary theme.
     * "naglowki / teksty potraktowane minimalistycznie; maly rozmiar fontu
        w stosunku do uzytych zdjec"  -> restrained type scale, large imagery.
     * "delikatna linearnosc" -> circle/arc construction lines as the only
        decorative motif (.kv-arcs), never gradients-for-show.
     * Book Antiqua = titles, Poppins SemiBold = headings/lids, Poppins Regular = body.

   Shape system (locked):
     --r-pill  buttons, chips, badges
     --r-card  cards, media, panels
     --r-field form inputs
   Accent lock: the gold gradient is the ONLY accent. Olive is a brand-tinted
   neutral reserved for the sygnet mark and category meta.
   ========================================================================== */

/* ---------- Fonts ------------------------------------------------------- */
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/poppins-300-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:Poppins;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/poppins-300-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:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/poppins-400-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:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/poppins-400-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:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/poppins-500-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:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/poppins-500-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:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/poppins-600-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:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/poppins-600-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}

/* Krój nagłówkowy. Brandbook wskazuje Book Antiqua, ale ten font nie ma wolnej
   licencji webowej, więc u odwiedzających bez pakietu Office nagłówki spadały
   na Georgię i strona rozjeżdżała się z drukiem vouchera. Osadzamy TeX Gyre
   Pagella (GUST Font License, wolna) - klon Palatino, z którego wywodzi się
   Book Antiqua, więc rysunek liter i metryka są praktycznie te same.
   Book Antiqua zostaje pierwszy w stosie --f-title: kto go ma, widzi oryginał. */
@font-face{font-family:Pagella;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/pagella-regular-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:Pagella;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/pagella-regular-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:Pagella;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/pagella-bold-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:Pagella;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/pagella-bold-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}

/* Atrybut hidden ma niska specyficznosc, wiec kazda regula komponentu
   ustawiajaca display (np. .panel{display:grid}) go przebija i element
   zostaje na ekranie - pusty. Domykamy to raz, globalnie. */
[hidden]{display:none !important}

/* ---------- Tokens ------------------------------------------------------ */
:root{
  /* brandbook / kolorystyka podstawowa */
  --c-sand:      #DCD6C4;   /* R220 G214 B196 */
  --c-sand-deep: #C5BEA3;   /* R197 G190 B163 */
  --c-bark:      #704F45;   /* R112 G79  B69  */
  /* kolorystyka dopelniajaca */
  --c-blush:     #D9A88A;   /* R217 G168 B138 */
  --c-olive:     #9E9952;   /* R158 G153 B82  */
  --c-olive-dp:  #7E782A;   /* R126 G120 B42  */
  /* akcent zloty (gradient) */
  --c-gold-1:    #ECC381;
  --c-gold-2:    #BE964E;
  --c-gold-3:    #E2B56F;
  --grad-gold: linear-gradient(115deg, var(--c-gold-1) 0%, var(--c-gold-2) 48%, var(--c-gold-3) 100%);

  /* semantic surfaces - light (brand primary theme) */
  --canvas:   #DCD6C4;
  --paper:    #EDE9DD;
  --paper-2:  #E4DFD0;
  --sunk:     #D2CBB7;
  --ink:      #43302A;
  --ink-2:    #5A473F;
  --ink-3:    #6A554B;
  /* Złoty gradient zostaje akcentem wypełnień. Do ikon, obramowań stanu
     i drobnego tekstu używamy jego ciemniejszego wariantu, żeby wszystko
     przechodziło kontrast WCAG AA także na piaskowym tle marki. */
  --accent-ink: #8A6628;
  --olive-ink:  #66621F;
  --brand:    #704F45;
  --line:     rgba(112,79,69,.18);
  --line-soft:rgba(112,79,69,.10);
  --on-accent:#43302A;               /* tekst leżący na złotym akcencie */
  --focus:    #7E782A;
  --shade:    12,8,6;                 /* tinted shadow base (rgb triplet)  */

  /* type */
  --f-title: "Book Antiqua",Pagella,"Palatino Linotype",Palatino,"URW Palladio L",Georgia,serif;
  --f-body:  Poppins,-apple-system,"Segoe UI",system-ui,sans-serif;

  --t-display: clamp(2.25rem, 1.35rem + 3.1vw, 3.9rem);
  --t-h2:      clamp(1.7rem, 1.24rem + 1.6vw, 2.6rem);
  --t-h3:      clamp(1.18rem, 1.05rem + .5vw, 1.45rem);
  --t-lid:     .82rem;
  --t-body:    1rem;
  --t-small:   .875rem;
  --t-micro:   .78rem;

  /* shape (locked system) */
  --r-pill: 999px;
  --r-card: 20px;
  --r-field: 14px;

  /* rhythm */
  --gap:  clamp(1rem, .6rem + 1.2vw, 1.6rem);
  --gutter: 1.25rem;             /* margines boczny kontenera .shell */
  --pad-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --shell: 1320px;

  /* motion (MOTION_INTENSITY 5: fluid CSS, no scroll hijack) */
  --ease: cubic-bezier(.16,1,.3,1);
  --dur:  .45s;

  /* skala elewacji (Dimensional Layering): jeden zestaw cieni na cala strone */
  --e-1: 0 1px 3px  rgba(var(--shade),.10);
  --e-2: 0 6px 14px -6px rgba(var(--shade),.30);
  --e-3: 0 14px 30px -18px rgba(var(--shade),.45);
  --e-4: 0 26px 52px -24px rgba(var(--shade),.60);

  --z-nav: 40; --z-drawer: 60; --z-overlay: 55; --z-grain: 70;
  color-scheme: light;
}

/* Dark theme. The brandbook mandates the light layout jako bazowy motyw
   strony - nie przelacza sie juz automatycznie wraz z prefers-color-scheme,
   zeby kazdy odwiedzajacy widzial ta sama, markowa kolorystyke. Zostaje
   dostepny wylacznie jako recznie wlaczany wariant przez [data-theme="dark"]. */
:root[data-theme="dark"]{
  --canvas:#1D1512; --paper:#261C18; --paper-2:#2F231D; --sunk:#17110E;
  --ink:#EFE8DA; --ink-2:#C3B4A3; --ink-3:#9C8A7C; --brand:#D9A88A;
  --accent-ink:#ECC381; --olive-ink:#C3BD72;
  --line:rgba(236,195,129,.20); --line-soft:rgba(236,195,129,.10);
  --focus:#ECC381; --shade:0,0,0; color-scheme: dark;
}

/* ---------- Reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-body);font-weight:400;line-height:1.65;
  -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}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--c-gold-1);color:#43302A}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- Layout primitives ------------------------------------------ */
/* zakotwiczenia nie chowają się pod przyklejoną nawigacją */
/* --sticky-h aktualizowany z JS (assets/js/app.js) na realna wysokosc
   .site-sticky - rosnie, gdy pokazuje sie baner promocji, zeby klik w link
   kotwicowy nie chowal naglowka sekcji pod nawigacja. 96px to sensowna
   wartosc zanim JS zdazy policzyc (i fallback bez JS). */
[id]{scroll-margin-top:var(--sticky-h, 96px)}
.shell{width:min(100% - 2 * var(--gutter), var(--shell));margin-inline:auto}
@media (max-width:640px){:root{--gutter:1rem}}
.section{padding-block:var(--pad-section)}
.section--tight{padding-block:clamp(3rem,2rem + 3vw,5rem)}
.stack{display:grid;gap:var(--gap)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Type -------------------------------------------------------- */
.display,.h2,.h3{font-family:var(--f-title);font-weight:400;letter-spacing:-.012em}
.display{font-size:var(--t-display);line-height:1.06}
.h2{font-size:var(--t-h2);line-height:1.14}
.h3{font-size:var(--t-h3);line-height:1.25}
.display em,.h2 em{font-style:italic;line-height:1.12;padding-bottom:.06em;display:inline-block}
.lid{font-family:var(--f-body);font-weight:600;font-size:var(--t-lid);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.lead{font-size:clamp(1rem,.95rem + .3vw,1.12rem);color:var(--ink-2);max-width:52ch}
.body-muted{color:var(--ink-2)}
.small{font-size:var(--t-small)}
.micro{font-size:var(--t-micro);color:var(--ink-3)}

/* ---------- Buttons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  white-space:nowrap;padding:.85rem 1.6rem;border-radius:var(--r-pill);
  font-weight:600;font-size:.92rem;letter-spacing:.01em;
  transition:transform .18s var(--ease),box-shadow var(--dur) var(--ease),
             background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn:active{transform:scale(.975)}
/* Bez połysku i bez poświaty. Pełny brąz marki czyta się drożej niż złoty
   gradient, a złoto zostaje tam, gdzie faktycznie znaczy: cena, znak, karta. */
.btn--primary{background:var(--brand);color:#EDE9DD}
.btn--primary:hover{background:var(--ink);transform:translateY(-1px)}
:root[data-theme="dark"] .btn--primary{background:var(--c-gold-1);color:#1D1512}
:root[data-theme="dark"] .btn--primary:hover{background:#F6D9A6}
.btn--ghost{border:1px solid var(--brand);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--paper)}
.btn--wide{width:100%}
.btn--sm{padding:.6rem 1.15rem;font-size:.85rem}
.btn[disabled]{opacity:.5;pointer-events:none}

.link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.9rem;
  color:var(--brand);border-bottom:1px solid var(--line);padding-bottom:.15rem;
  transition:gap .3s var(--ease),border-color .3s var(--ease)}
.link-arrow svg{width:1em;height:1em}
.link-arrow:hover{gap:.75rem;border-color:currentColor}

/* ==========================================================================
   KV construction arcs - motyw linearny marki
   Brandbook, plansza "Linearnie i eterycznie": okregi konstrukcyjne pojawiaja
   sie na roznych planszach w roznych barwach i w roznym kadrze. Tu to samo
   zamkniete w systemie z trzech niezaleznych osi:

     1. FIGURA  - ktory rysunek (sprite: #arc-rosette / -orbit / -ring /
                  -swell / -wave). Zawsze uklad 1000 x 1000.
     2. BARWA   - .kv-arcs--bark | --gold | --blush | --olive | --sand.
                  Wylacznie kolory z brandbooka. Kazda barwa ma wlasna krycie,
                  dobrane tak, zeby wszystkie wazyly optycznie tyle samo na
                  swoim tle (blush na piasku potrzebuje .50, braz tylko .20).
     3. KADR    - .kv-arcs--tl|tr|bl|br|t|b|l|r|c wybiera kotwice, a
                  --arc-size / --arc-in / --arc-in-x stroja ja w miejscu uzycia.

   Zasady uzycia, zeby motyw zostal motywem, a nie tapeta:
     * jedna figura na sekcje, nigdy w dwoch sasiadujacych sekcjach;
     * kazde kolejne wystapienie na stronie ma inna figure i inna barwe;
     * figura kotwiczy sie w pustej strefie sekcji, nigdy pod blokiem tekstu;
     * nigdy w sekcjach roboczych (katalog, formularz, FAQ) - tam kreski
       konkuruja z trescia, ktora klientka realnie czyta.
   ========================================================================== */
.kv-arcs{
  --arc-size: clamp(300px, 42vw, 620px);
  /* Ile figury wchodzi w sekcje, jako ulamek jej wlasnego boku (0 do 1).
     Reszta wychodzi poza kadr i zostaje przycieta przez .has-arcs.
     Ulamek, a nie procent sekcji: sekcje maja od 285 do 1083 px wysokosci,
     wiec procent sekcji dawal raz peine kolo, raz niewidoczny wlos.
     Zasada doboru: sekcja pusta -> figura mniejsza, wejscie duze (.5 do .9);
     sekcja zajeta -> figura duza, wejscie male (.1 do .2), czyli jeden
     dlugi, plaski luk przy samej krawedzi. */
  --arc-in:   .5;   /* w pionie   */
  --arc-in-x: .6;   /* w poziomie */

  position:absolute;z-index:0;pointer-events:none;overflow:visible;
  aspect-ratio:1;width:var(--arc-size);
  /* reset globalny daje svg max-width:100%, co na waskim ekranie ucielo by
     figure do szerokosci sekcji i zabralo caly bleed */
  max-width:none;
  color:var(--arc-ink,var(--brand));opacity:var(--arc-a,.2);
}

/* --- barwy: kolorystyka podstawowa, dopelniajaca i akcent zloty ---------- */
.kv-arcs--bark { --arc-ink:var(--c-bark);   --arc-a:.20 }  /* na piasku       */
.kv-arcs--blush{ --arc-ink:var(--c-blush);  --arc-a:.50 }  /* na piasku       */
.kv-arcs--olive{ --arc-ink:var(--c-olive);  --arc-a:.38 }  /* na piasku       */
.kv-arcs--sand { --arc-ink:var(--c-sand);   --arc-a:.42 }  /* na zdjeciu      */
/* Zloto swieci tylko na ciemnym: na piaskowym tle znika, wiec zostaje
   zarezerwowane dla brazowego pasa i dla motywu ciemnego. */
.kv-arcs--gold { --arc-ink:var(--c-gold-1); --arc-a:.34 }  /* na brazie       */

/* --- kadr: figura jest kwadratem, kotwiczy sie rogiem lub bokiem sekcji --- */
/* Offset = bok figury razy (wejscie minus jeden), czyli ujemna reszta,
   ktora ma zostac poza sekcja. */
.kv-arcs{ --arc-off:calc(var(--arc-size) * (var(--arc-in)   - 1));
          --arc-off-x:calc(var(--arc-size) * (var(--arc-in-x) - 1)) }
.kv-arcs--tl{ top:var(--arc-off);    left:var(--arc-off-x) }
.kv-arcs--tr{ top:var(--arc-off);    right:var(--arc-off-x) }
.kv-arcs--bl{ bottom:var(--arc-off); left:var(--arc-off-x) }
.kv-arcs--br{ bottom:var(--arc-off); right:var(--arc-off-x) }
.kv-arcs--l { top:50%; left:var(--arc-off-x);  transform:translateY(-50%) }
.kv-arcs--r { top:50%; right:var(--arc-off-x); transform:translateY(-50%) }
.kv-arcs--t { left:50%; top:var(--arc-off);    transform:translateX(-50%) }
.kv-arcs--b { left:50%; bottom:var(--arc-off); transform:translateX(-50%) }
.kv-arcs--c { top:50%; left:50%; transform:translate(-50%,-50%) }

/* Bez osobnej korekty na telefon. Wejscie jest ulamkiem boku figury, a bok
   skaluje sie z vw, wiec proporcja widocznej czesci jest ta sama na 390 px
   i na 1440 px. Kazda dodatkowa korekta wypychala figury calkiem poza kadr. */

/* --- sekcja goszczaca figure -------------------------------------------- */
/* overflow:clip zamiast hidden: przycina bleed, ale nie tworzy kontenera
   przewijania, wiec sticky w srodku sekcji dalej dziala. */
.has-arcs{position:relative;overflow:clip;isolation:isolate}
.has-arcs > .shell,
.has-arcs > .closing__in{position:relative;z-index:1}

/* --- mapa calego serwisu -------------------------------------------------
   Zapis rozmieszczenia, zeby przy dokladaniu sekcji bylo widac, co juz jest
   zajete. Kolejne wystapienie zawsze inna figura i inna barwa, nigdy w dwoch
   sasiadujacych sekcjach.

     index.html    hero              rozeta          piasek   (na zdjeciu)
                   voucher kwotowy   orbita          zloto    (na brazie)
                   wartosci          pierscien       blush
                   opinie            fala            oliwka
                   domkniecie        rozeta (*)      brand
     voucher.html  personalizacja    pierscien       blush
                   pytania           fala            oliwka
     obie strony   karta vouchera    orbita          braz (druk, poza motywami)

   (*) Domkniecie NIE jest z tego systemu: to przywrocona, wczesniejsza
   kompozycja tej sekcji (dwa okregi koncentryczne plus dwa boczne plus jeden
   gorny, viewBox 1400x520), scoped do wlasnej klasy .closing__rings zamiast
   .kv-arcs. Zostaje wyjatkiem od reguly "kazde wystapienie inna figura":
   ta sekcja mial byc dokladnie taka, jaka byla, nie przeliczana na wspolny
   ukland 1000x1000.

   Bez figury celowo: gwarancje, katalog z wyszukiwarka, FAQ na landingu,
   opis zabiegu, powiazane, koszyk. To sekcje robocze albo gesto zapisane. */

/* --- domkniecie: przywrocona oryginalna kompozycja ----------------------- */
/* Poza systemem powyzej celowo (patrz (*) w mapie). Kolor niesie var(--brand),
   nie --c-bark, bo ma sie odwracac razem z motywem tak jak reszta strony -
   dokladnie tak, jak dzialalo to przed wprowadzeniem systemu figur/barw. */
.closing__rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  overflow:visible;color:var(--brand);opacity:0;transition:opacity 1.3s var(--ease)}
.closing__rings.is-in{opacity:.16}
.closing__rings circle{fill:none;stroke:currentColor;stroke-width:.6;vector-effect:non-scaling-stroke}

/* --- rysowanie kreski przy wejsciu w kadr -------------------------------- */
/* stroke-dasharray i stroke-dashoffset dziedzicza sie do klonu spod <use>,
   wiec cala figura rysuje sie jedna wlasciwoscia na zewnetrznym <svg>.
   pathLength="1" na kazdym okregu sprawia, ze wszystkie konczą rysunek
   razem, niezaleznie od obwodu. Klase .is-in dokłada ten sam obserwator,
   ktory obsluguje .reveal, wiec przy prefers-reduced-motion figury sa
   narysowane od razu. @media (scripting) chroni przed wylaczonym JS. */
@media (scripting: enabled){
  .kv-arcs--draw{stroke-dasharray:1;stroke-dashoffset:1;
    transition:stroke-dashoffset 2.2s var(--ease)}
  .kv-arcs--draw.is-in{stroke-dashoffset:0}
}

/* --- motyw ciemny -------------------------------------------------------- */
/* Braz i oliwka gina na ciemnym tle, wiec obie przechodza na jasne warianty
   z brandbooka. Krycie spada, bo jasna kreska na ciemnym tle czyta sie
   mocniej niz ciemna na jasnym przy tej samej wartosci. */
:root[data-theme="dark"]{
  --arc-dark-warm:#ECC381; --arc-dark-olive:#C3BD72;
}
:root[data-theme="dark"] .kv-arcs--bark { --arc-ink:var(--arc-dark-warm);  --arc-a:.13 }
:root[data-theme="dark"] .kv-arcs--blush{ --arc-a:.24 }
:root[data-theme="dark"] .kv-arcs--olive{ --arc-ink:var(--arc-dark-olive); --arc-a:.24 }
:root[data-theme="dark"] .kv-arcs--sand { --arc-a:.30 }
:root[data-theme="dark"] .kv-arcs--gold { --arc-a:.22 }

/* ---------- Pasek promocji + nawigacja: jeden sklejony sticky blok --------
   Zamiast liczyc w JS wysokosc baneru i doklejac ja jako "top" nawigacji,
   przyklejamy do gory CALY kontener - baner + nav trzymaja sie razem, w
   dowolnej kolejnosci wysokosci (mobile wrap, zmiana tekstu promocji itd.)
   bez zadnej matematyki. */
.site-sticky{position:sticky;top:0;z-index:var(--z-nav)}

/* Baner wypelniany z JS (assets/js/app.js, Promo.active()) - w markupie
   zaczyna sie z atrybutem hidden, wiec bez JS (albo poza oknem promocji)
   nic sie nie renderuje. Tekst i data konca pochodza z panelu admina
   (admin/ceny.php). Celowo BIALE tlo niezalezne od jasny/ciemny motyw
   strony - promocja ma się wizualnie wybijac z reszty, nie wtapiac. */
.promo-bar{margin:0;background:#FFFFFF;border-bottom:2px solid var(--brand);
  box-shadow:0 2px 14px rgba(0,0,0,.10)}
.promo-bar__in{max-width:1280px;margin:0 auto;padding:.55rem 1rem;
  display:flex;align-items:center;justify-content:center;gap:.65rem .9rem;flex-wrap:wrap;text-align:center}
.promo-bar__logo{width:24px;height:auto;flex:none;color:#704F45}
.promo-bar__text{font-family:var(--f-body);font-weight:700;font-size:1.05rem;
  line-height:1.25;letter-spacing:.005em;color:#2A1D18}
.promo-bar__timer{display:flex;align-items:center;gap:.4rem;font-family:var(--f-body)}
.promo-bar__lead{font-size:.74rem;font-weight:600;color:#6B564D;text-transform:uppercase;letter-spacing:.03em}
.promo-bar__seg{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#2A1D18;color:#fff;border-radius:8px;padding:.18rem .5rem;min-width:2.5rem;line-height:1.05}
.promo-bar__seg b{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.promo-bar__seg em{font-style:normal;display:block;font-size:.58rem;letter-spacing:.03em;
  text-transform:uppercase;opacity:.72;margin-top:.05rem}
@media (max-width:640px){
  .promo-bar__logo{width:19px}
  .promo-bar__text{font-size:.88rem;width:100%}
  .promo-bar__lead{display:none}
  .promo-bar__seg{min-width:2.05rem;padding:.14rem .32rem}
  .promo-bar__seg b{font-size:.86rem}
}

/* Odznaka "-20%" przy glownych CTA (hero, personalizacja) - to samo zrodlo
   promocji (Promo.active()), wiec znika automatycznie razem z banerem. */
.hero__cta-row{display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.promo-badge{display:inline-flex;align-items:center;font-family:var(--f-body);
  font-weight:700;font-size:.82rem;padding:.4rem .75rem;border-radius:999px;
  background:#2A1D18;color:#fff;letter-spacing:.01em;white-space:nowrap}

/* ---------- Header ------------------------------------------------------ */
.nav{background:color-mix(in srgb,var(--canvas) 88%,transparent);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line-soft)}
@supports not (backdrop-filter:blur(1px)){.nav{background:var(--canvas)}}
.nav__in{display:flex;align-items:center;gap:1.5rem;height:78px}
@media (max-width:900px){.nav__in{height:66px}}
.nav__logo{flex:none;display:block}
.nav__logo img{height:54px;width:auto}
@media (max-width:900px){.nav__logo img{height:44px}}

/* Znak OAZA w dwóch wariantach: brązowy na jasnym tle, kremowy na ciemnym.
   Sam rysunek znaku pozostaje bez zmian, zmienia się wyłącznie barwa. */
.logo-on-dark{display:none}
:root[data-theme="dark"] .logo-on-light{display:none}
:root[data-theme="dark"] .logo-on-dark{display:block}
.nav__links{display:flex;align-items:center;gap:1.65rem;margin-left:auto}
.nav__links a{font-size:.88rem;font-weight:500;color:var(--ink-2);position:relative;
  transition:color .3s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--c-gold-2);transition:right .35s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
.nav__tools{display:flex;align-items:center;gap:.5rem;margin-left:.75rem}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:var(--r-pill);color:var(--brand);position:relative;
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.icon-btn svg{width:21px;height:21px}
.icon-btn:hover{background:var(--paper);color:var(--ink)}
.cart-count{position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;
  display:none;align-items:center;justify-content:center;border-radius:var(--r-pill);
  background:var(--c-gold-2);color:#43302A;font-size:.66rem;font-weight:600;line-height:1}
.cart-count[data-on]{display:flex}
.nav__cta{display:inline-flex}
@media (max-width:1080px){
  .nav__links{display:none}
  /* .nav__links niosło margin-left:auto, ktore wypychalo .nav__tools do
     prawej krawedzi. Znika razem z linkami, wiec koszyk i hamburger musza
     przejac to wypychanie same, inaczej lezą tuz przy znaku. */
  .nav__tools{margin-left:auto}
}
@media (max-width:560px){.nav__cta{display:none}}
.nav__burger{display:none}
@media (max-width:1080px){.nav__burger{display:inline-flex}}

/* mobile menu */
.mobmenu{position:fixed;inset:0;z-index:var(--z-drawer);background:var(--canvas);
  display:grid;align-content:center;justify-items:center;gap:1.2rem;padding:2rem;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.mobmenu[data-open]{opacity:1;visibility:visible}
.mobmenu a:not(.btn){font-family:var(--f-title);font-size:1.7rem}
.mobmenu .btn{margin-top:.6rem}
.mobmenu .icon-btn{position:absolute;top:12px;right:16px}

/* ---------- Hero -------------------------------------------------------- */
/* Zdjęcie na całą szerokość, tekst na nim. Tak samo jak w KV: fotografia
   niesie stronę, typografia jest mała względem niej. Wysokość celowo
   niepełna, żeby pasek gwarancji wystawał zza krawędzi ekranu. */
.hero{position:relative;isolation:isolate;overflow:clip;
  min-height:min(78svh, 760px);display:grid;align-content:end}
/* Rozeta z KV lezy nad zdjeciem, ale pod tekstem i pod rozjasnieniem po lewej,
   wiec kotwiczy sie w pustej, prawej czesci kadru. */
.hero .kv-arcs{z-index:0}
.hero .shell{position:relative;z-index:1}
@media (max-width:760px){.hero{min-height:min(80svh, 620px)}}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:58% 40%;
  animation:hero-zoom 5s var(--ease) both}
@media (max-width:760px){.hero__bg img{object-position:66% 42%}}
/* Kadr jest ciemny sam z siebie (rytuał w przyćmionym świetle), więc rozjaśnienie
   z jasnego motywu zamienia się na stonowaną, ciemną winietę: dołu pilnuje
   czytelności tekstu, góra zostaje czysta pod znakiem marki. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(17,12,9,.82) 0%,
    rgba(17,12,9,.52) 30%,
    rgba(17,12,9,.14) 54%,
    transparent 72%);
  animation:hero-fade-in 1.1s ease-out both}
@media (max-width:760px){
  .hero::before{background:linear-gradient(to top,
    rgba(17,12,9,.88) 0%,
    rgba(17,12,9,.62) 34%,
    rgba(17,12,9,.22) 56%,
    transparent 76%)}
  .hero__copy .lead{max-width:22rem}
}
/* Znak marki na fotografii: kremowo-złoty wariant, bo brąz ginie na ciemnym
   kadrze. Kotwiczy się nad głową, w pustej, ciemnej górze zdjęcia. */
.hero__mark{position:absolute;z-index:1;top:clamp(1.5rem,3vw + 1rem,3.75rem);
  left:0;right:0;margin-inline:auto;width:clamp(140px,15vw,208px);height:auto;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55))}
@media (max-width:760px){.hero__mark{top:clamp(1.25rem,5vw,2.25rem);width:clamp(120px,32vw,168px)}}
.hero__copy{max-width:30rem;display:grid;gap:1.15rem;justify-items:start;
  padding-block:clamp(2.5rem,4vw,4.5rem)}
/* Nagłówek celowo mniejszy niż typowy hero: brandbook każe trzymać typografię
   małą względem zdjęcia. Rozmiar dobrany tak, żeby oba wersy mieściły się
   w kolumnie i nie wchodziły na sylwetkę na fotografii. */
.hero .display{font-size:clamp(1.75rem, 1.05rem + 2vw, 2.6rem)}
.hero__copy .lead{max-width:24rem}
/* Tekst leży teraz na ciemnym kadrze zamiast na piaskowym rozjaśnieniu, więc
   przechodzi na jasny wariant marki: kremowa czerń zamiast brązowego inku. */
.hero--spa .hero__copy .display{color:#F5F0E4}
.hero--spa .hero__copy .lead{color:rgba(245,240,228,.86)}
.hero--spa .hero__copy .btn--primary{background:var(--grad-gold);color:#2A1D16}
.hero--spa .hero__copy .btn--primary:hover{background:#F6D9A6;color:#2A1D16}

/* --- wejście na starcie: znak, nagłówek, lead i CTA wchodzą fade-in-up
   z narastającym opóźnieniem (patrz transition-delay w markupie); .reveal
   odpala się od razu, bo hero jest w viewporcie przy załadowaniu strony.
   .reveal--fade zdefiniowany jest przy .reveal na dole pliku - ten sam
   wariant wraca w domknieciu i jest baza dla .stagger, ktory powtarza ten
   rytm .14s w reszcie strony. */
@keyframes hero-zoom{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes hero-fade-in{from{opacity:0}to{opacity:1}}

/* ---------- Assurance strip -------------------------------------------- */
.assure{border-block:1px solid var(--line-soft);background:var(--paper-2)}
.assure__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media (max-width:860px){.assure__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.assure__grid{grid-template-columns:1fr}}
.assure__item{display:flex;align-items:flex-start;gap:.75rem;padding:1.5rem clamp(.9rem,2vw,1.6rem);
  border-left:1px solid var(--line-soft)}
.assure__item:first-child{border-left:0}
@media (max-width:860px){
  .assure__item:nth-child(odd){border-left:0}
  .assure__item:nth-child(n+3){border-top:1px solid var(--line-soft)}
}
@media (max-width:460px){
  .assure__item{border-left:0}
  .assure__item + .assure__item{border-top:1px solid var(--line-soft)}
}
.assure__item svg{width:22px;height:22px;color:var(--accent-ink);flex:none;margin-top:2px}
.assure__item b{display:block;font-weight:600;font-size:.92rem}
.assure__item span{font-size:var(--t-small);color:var(--ink-2)}

/* ---------- Search + filters ------------------------------------------- */
.finder{display:grid;gap:1rem}
.search{position:relative;display:flex;align-items:center}
.search svg:first-child{position:absolute;left:1.1rem;width:20px;height:20px;color:var(--ink-3);
  pointer-events:none}
.search input{
  width:100%;padding:1.05rem 3.2rem 1.05rem 3.1rem;border-radius:var(--r-field);
  background:var(--paper);border:1px solid var(--line);color:var(--ink);
  font-size:1rem;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.search input::placeholder{color:var(--ink-3);opacity:1}
/* własny przycisk czyszczenia zastępuje natywny krzyżyk pola type="search" */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.search input:focus{outline:none;border-color:var(--accent-ink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-ink) 28%,transparent)}
.search__clear{position:absolute;right:.55rem;width:38px;height:38px;border-radius:var(--r-pill);
  display:none;align-items:center;justify-content:center;color:var(--ink-2)}
.search__clear svg{width:18px;height:18px}
.search__clear:hover{background:var(--paper-2);color:var(--ink)}
.search__clear[data-on]{display:flex}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{padding:.5rem 1.05rem;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:.85rem;font-weight:500;color:var(--ink-2);background:transparent;
  transition:all .28s var(--ease)}
.chip:hover{border-color:var(--brand);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--paper);font-weight:600}
:root[data-theme="dark"] .chip[aria-pressed="true"]{color:#1D1512}
.finder__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem;font-size:var(--t-small);color:var(--ink-2)}

/* ---------- Voucher grid (bento rhythm) --------------------------------- */
.vgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.vgrid > *{grid-column:span 2}
.vgrid > .v-card--wide{grid-column:span 3}
@media (max-width:1080px){
  .vgrid{grid-template-columns:repeat(4,1fr)}
  .vgrid > *{grid-column:span 2}
  .vgrid > .v-card--wide{grid-column:span 4}
}
@media (max-width:680px){
  .vgrid{grid-template-columns:1fr}
  .vgrid > *,.vgrid > .v-card--wide{grid-column:span 1}
}

/* ==========================================================================
   Kafel vouchera
   Wzorzec: Dimensional Layering + Soft UI Evolution (ui-ux-pro-max).
   Zdjęcie niesie kafel, treść leży na płycie wsuniętej w kadr i uniesionej
   cieniem. Wariant i cena są na kaflu, więc wybór nie wymaga wejścia w kartę.
   Zasada hover-vs-tap: nic istotnego nie chowa się pod najechaniem myszą.
   ========================================================================== */
.vc{position:relative;display:flex;flex-direction:column;
  border-radius:var(--r-card);background:transparent}

.vc__media{position:relative;aspect-ratio:1/1;border-radius:var(--r-card);
  overflow:hidden;background:var(--sunk);display:block;
  box-shadow:var(--e-1);transition:box-shadow .28s var(--ease)}
.v-card--wide .vc__media{aspect-ratio:16/10}
.vc__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter .28s var(--ease)}
.vc:hover .vc__media img,.vc:focus-within .vc__media img{transform:scale(1.045)}
.vc:hover .vc__media,.vc:focus-within .vc__media{box-shadow:var(--e-2)}

/* Kadr zastepczy dla zabiegow bez wlasnego zdjecia. Zamiast powtarzac ten sam
   kadr na kilku kaflach albo siegac po stocki, bierzemy figure konstrukcyjna
   z KV w barwie przypisanej pozycji w katalogu i sygnet marki na srodku.
   Barwe niesie klasa .kv-arcs--* na wrapperze, wiec obowiazuje ta sama paleta
   i te same krycia co w figurach sekcyjnych, razem z wariantem ciemnym. */
.vc__media--arc{background:var(--sunk)}
.vc__arcwrap{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.vc__arcfig{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:132%;aspect-ratio:1;overflow:visible;
  color:var(--arc-ink);opacity:var(--arc-a);
  transition:transform .8s var(--ease)}
.vc__arcmark{position:relative;width:26%;height:auto;color:var(--brand);opacity:.62}
.vc:hover .vc__arcfig,.vc:focus-within .vc__arcfig{transform:translate(-50%,-50%) scale(1.045)}

.vc__badge{position:absolute;top:.9rem;left:.9rem;z-index:2;
  padding:.36rem .82rem;border-radius:var(--r-pill);
  background:var(--paper);color:var(--brand);
  font-size:.66rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  line-height:1.4;box-shadow:var(--e-2)}
.vc__badge--new{color:var(--olive-ink)}

/* płyta: wsunięta w kadr, uniesiona, to ona buduje warstwowość */
.vc__plate{position:relative;z-index:1;margin:-2.6rem 1rem 0;
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--r-card);padding:1.15rem 1.2rem 1.25rem;
  display:grid;gap:.7rem;box-shadow:var(--e-3);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.vc:hover .vc__plate,.vc:focus-within .vc__plate{transform:translateY(-4px);box-shadow:var(--e-4)}
@media (max-width:520px){.vc__plate{margin:-2rem .75rem 0}}

.vc__meta{display:flex;align-items:center;gap:.42rem;font-size:.78rem;color:var(--ink-3)}
.vc__meta svg{width:15px;height:15px;color:var(--accent-ink);flex:none}
.vc__title{font-family:var(--f-title);font-size:clamp(1.08rem,1rem + .3vw,1.28rem);
  line-height:1.22;font-weight:400}
.vc__title a{display:block}
.vc__title a::after{content:"";position:absolute;inset:0;z-index:0}

/* przełącznik wariantu: prawdziwe przyciski, obsługa klawiatury i dotyku */
.vc__vars{display:flex;flex-wrap:wrap;gap:.35rem;position:relative;z-index:2}
.vc__var{padding:.42rem .78rem;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:.76rem;font-weight:500;color:var(--ink-2);background:transparent;
  min-height:32px;transition:border-color .22s var(--ease),background-color .22s var(--ease),
  color .22s var(--ease)}
.vc__var:hover{border-color:var(--brand);color:var(--ink)}
.vc__var[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);
  color:#EDE9DD;font-weight:600}
:root[data-theme="dark"] .vc__var[aria-pressed="true"]{background:var(--c-gold-1);
  border-color:var(--c-gold-1);color:#1D1512}

/* Cena i przycisk stoja obok siebie, ale przy waskim kaflu (320 px) i dluzszej
   etykiecie - np. "Zapytaj o cenę" przy zabiegu bez ustalonej ceny - para nie
   miesci sie w jednym wierszu i rozpychala cala siatke. Zawijamy zamiast
   rozpychac; .vc__price dostaje min-width:0, zeby moglo sie skurczyc. */
.vc__buy{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:.6rem .9rem;padding-top:.85rem;border-top:1px solid var(--line-soft)}
.vc__price{display:grid;gap:.15rem;line-height:1;min-width:0}
.vc__price small{font-size:.69rem;color:var(--ink-3);letter-spacing:.03em}
/* cyfry tabelaryczne: przy zmianie wariantu cena nie skacze na boki */
.vc__price b{font-family:var(--f-title);font-size:1.5rem;font-weight:400;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.45rem}
.vc__price s{font-family:var(--f-body);font-size:.78rem;font-weight:400;color:var(--ink-3)}
.vc__save{font-size:var(--t-micro);font-weight:600;color:var(--olive-ink)}

.vc__go{position:relative;z-index:2;flex:none;display:inline-flex;align-items:center;
  gap:.4rem;white-space:nowrap;padding:.62rem 1.05rem;border-radius:var(--r-pill);
  background:var(--brand);color:#EDE9DD;font-size:.82rem;font-weight:600;min-height:40px;
  transition:background-color .22s var(--ease),transform .18s var(--ease)}
.vc__go svg{width:15px;height:15px;transition:transform .22s var(--ease)}
.vc__go:hover{background:var(--ink)}
.vc__go:hover svg{transform:translateX(3px)}
.vc__go:active{transform:scale(.97)}
:root[data-theme="dark"] .vc__go{background:var(--c-gold-1);color:#1D1512}
:root[data-theme="dark"] .vc__go:hover{background:#F6D9A6}

/* rozwijane "co daje": treść dostępna bez opuszczania siatki */
.vc__more{position:relative;z-index:2;margin:.55rem 1rem 0}
.vc__more summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.5rem .2rem;cursor:pointer;list-style:none;font-size:.79rem;font-weight:600;
  color:var(--ink-2);min-height:36px;transition:color .22s var(--ease)}
.vc__more summary::-webkit-details-marker{display:none}
.vc__more summary:hover{color:var(--ink)}
.vc__more summary svg{width:16px;height:16px;flex:none;color:var(--ink-3);
  transition:transform .28s var(--ease)}
.vc__more[open] summary svg{transform:rotate(180deg)}
.vc__more ul{display:grid;gap:.4rem;padding:.1rem .2rem .5rem}
.vc__more li{display:flex;gap:.5rem;align-items:flex-start;font-size:.81rem;
  color:var(--ink-2);line-height:1.5}
.vc__more li svg{width:14px;height:14px;color:var(--accent-ink);flex:none;margin-top:.28em}

.empty{display:grid;justify-items:center;gap:.9rem;text-align:center;padding:4rem 1rem;
  border:1px dashed var(--line);border-radius:var(--r-card);color:var(--ink-2)}
.empty svg{width:44px;height:44px;color:var(--ink-3)}

/* ---------- Open-value band -------------------------------------------- */
.openval{background:var(--brand);color:var(--paper);position:relative;overflow:clip}
:root[data-theme="dark"] .openval{background:var(--paper-2);color:var(--ink)}
.openval__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,5rem);align-items:center;position:relative;z-index:1}
@media (max-width:900px){.openval__grid{grid-template-columns:1fr}}
.openval .lead{color:inherit;opacity:.86}
.openval .lid{color:inherit;opacity:.66}
/* Na pełnym brązie przycisk marki zlewałby się z tłem, więc odwracamy go. */
.openval .btn--primary{background:#EDE9DD;color:#43302A}
.openval .btn--primary:hover{background:#FBF8F0}
.openval__amounts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.openval__amounts span{padding:.5rem 1rem;border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,currentColor 30%,transparent);font-size:.85rem;font-weight:500}

/* ---------- Voucher art: podglad prawdziwej karty ----------------------- */
/* Odwzorowanie strony 2 z OAZA_voucher 02.pdf, zeby podglad na zywo pokazywal
   dokladnie to, co klientka dostanie w PDF - a nie osobny, autorski projekt.
   Barwy odczytane z pliku: tlo #D8D5C3, naglowek #7B782D (zloto-oliwka
   z brandbooka), etykiety i linie #704F45 (braz marki). Karta jest drukiem,
   wiec ma stale barwy w obu motywach strony. */
.vart{
  position:relative;aspect-ratio:224/114;border-radius:var(--r-card);overflow:hidden;
  background:#D8D5C3;color:#704F45;
  box-shadow:0 30px 60px -34px rgba(12,8,6,.75);
  display:grid;grid-template-rows:auto 1fr auto;
  padding:5.5cqi 8cqi 4.5cqi;container-type:inline-size}
.vart__arcs{position:absolute;top:50%;left:-24%;transform:translateY(-50%);
  width:96%;aspect-ratio:1;color:#FFFFFF;opacity:.55;pointer-events:none;overflow:visible}
.vart__title{position:relative;z-index:1;text-align:center;
  font-family:var(--f-title);font-weight:700;color:#7B782D;line-height:1;
  font-size:clamp(1rem,6.4cqi,2.6rem);margin:0}
.vart__fields{position:relative;z-index:1;display:grid;align-content:center;
  gap:clamp(.5rem,3.4cqi,1.5rem);margin:0}
.vart__row{display:flex;align-items:baseline;gap:.6ch;margin:0}
.vart__row dt{font-weight:600;font-size:clamp(.5rem,2.6cqi,1.05rem);white-space:nowrap}
.vart__row dd{margin:0;flex:1;min-width:0;
  font-size:clamp(.48rem,2.4cqi,1rem);
  border-bottom:1px solid currentColor;padding-bottom:.15em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Pole jeszcze niewypelnione: sama linia, bez tekstu zastepczego udajacego wpis. */
.vart__row dd[data-empty]{color:transparent}
.vart__row--short dd{flex:0 1 42%}
.vart__foot{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:1ch;
  font-weight:600;font-size:clamp(.4rem,1.9cqi,.78rem)}
.vart__foot svg{width:clamp(16px,7cqi,54px);height:auto;color:#7B782D;flex:none}
.vart__addr{position:relative;z-index:1;text-align:center;margin:.6cqi 0 0;
  font-weight:600;font-size:clamp(.4rem,1.9cqi,.78rem)}

/* ---------- Strony tekstowe (regulamin, polityka) ----------------------- */
.prose{max-width:44rem;margin-inline:auto}
.prose h1{margin-bottom:1.4rem}
.prose h2{margin:2.2rem 0 .7rem}
.prose p,.prose ul{margin:0 0 .9rem}
.prose ul{padding-left:1.15rem;display:grid;gap:.4rem}
.prose li{list-style:disc}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:.18em}
.prose code{font-size:.9em;background:var(--sunk);padding:.1em .4em;border-radius:6px}
/* Miejsca czekajace na dane od klientki. Widoczne celowo: lepiej, zeby luka
   rzucala sie w oczy na etapie odbioru, niz zeby regulamin poszedl na produkcje
   z pustym NIP-em. Do usuniecia razem z uzupelnieniem tresci. */
.prose [data-todo]{border:1px dashed color-mix(in srgb,var(--brand) 45%,transparent);
  border-radius:var(--r-card);padding:.8rem 1rem;background:color-mix(in srgb,var(--brand) 6%,transparent);
  color:var(--ink-2);letter-spacing:.01em}

/* Miniatura zastepcza w koszyku i cross-sellu - ten sam jezyk co .vc__media--arc,
   tylko w rozmiarze kciuka. Wymiary dziedziczy po regulach .cart-line img /
   .xsell__row img, wiec siada dokladnie tam, gdzie stalo zdjecie. */
.thumb-arc{position:relative;display:grid;place-items:center;overflow:hidden;
  border-radius:var(--r-sm,10px);background:var(--sunk)}
.thumb-arc > svg:first-child{position:absolute;width:150%;aspect-ratio:1;overflow:visible;
  color:var(--arc-ink);opacity:var(--arc-a)}
.thumb-arc__mark{position:relative;width:46%;height:auto;color:var(--brand);opacity:.6}

/* ---------- Wartości: koła z KV ----------------------------------------- */
.values{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:center}
@media (max-width:900px){.values{grid-template-columns:1fr}}
.values__media{border-radius:var(--r-card);overflow:hidden;aspect-ratio:3/4;background:var(--sunk)}
/* To samo wolne przybliżenie co w tle hero (hero-zoom), tylko wyzwolone
   wejściem w kadr zamiast załadowaniem strony: zdjęcie wjeżdża lekko
   przybliżone i osiada na docelowej skali w tym samym rytmie co .reveal. */
.values__media img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  transform:scale(1.08);transition:transform 1.6s var(--ease)}
.values__media.is-in img{transform:scale(1)}
/* na wąskim ekranie kadr spłaszcza się mniej, żeby twarz została w ramce */
@media (max-width:900px){.values__media{aspect-ratio:5/4}}
.circles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.6rem);margin-top:1.9rem}
@media (max-width:420px){.circles{grid-template-columns:1fr}}
.circle{display:grid;gap:.9rem;justify-items:center;text-align:center}
.circle__ring{width:clamp(88px,13vw,124px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--brand);display:grid;place-items:center;color:var(--brand);
  transition:transform .5s var(--ease),background-color .5s var(--ease),
             border-color .5s var(--ease)}
.circle__ring svg{width:38%;height:auto}
.circle:hover .circle__ring{transform:scale(1.06);background:var(--paper);
  border-color:var(--accent-ink);color:var(--accent-ink)}
.circle p{font-size:var(--t-small);line-height:1.5;max-width:19ch;color:var(--ink-2)}
.circle b{display:block;font-weight:600;color:var(--ink);margin-bottom:.2rem}

/* ---------- Pas domykający ---------------------------------------------- */
.closing{text-align:center}
.closing__in{display:grid;gap:1.3rem;justify-items:center}
.closing__mark{width:46px;height:auto;color:var(--accent-ink)}

/* ---------- Steps ------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);
  border-top:1px solid var(--line);padding-top:1.6rem}
@media (max-width:800px){.steps{grid-template-columns:1fr;gap:0}}
.step{display:grid;gap:.5rem;align-content:start}
.step__mark{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--accent-ink);margin-bottom:.5rem}
.step__mark svg{width:20px;height:20px}
@media (max-width:800px){
  .step{padding-block:1.4rem;border-top:1px solid var(--line-soft)}
  .step:first-child{border-top:0;padding-top:0}
}

/* ---------- Testimonials ------------------------------------------------ */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,5rem);
  align-items:start}
@media (max-width:820px){.quotes{grid-template-columns:1fr;gap:2.5rem}}
.quote{display:grid;gap:.9rem;border-left:1px solid var(--brand);padding-left:clamp(1.1rem,2vw,1.8rem)}
.quote p{font-family:var(--f-title);font-size:clamp(1.1rem,1rem + .5vw,1.4rem);line-height:1.45}
.quote figcaption{font-size:var(--t-small);color:var(--ink-3)}
.quote figcaption b{color:var(--ink-2);font-weight:600}

/* ---------- FAQ --------------------------------------------------------- */
.faq{display:grid;gap:0;border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;cursor:pointer;list-style:none;font-weight:600;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;color:var(--ink-3);flex:none;
  transition:transform .35s var(--ease)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq p{padding-bottom:1.4rem;color:var(--ink-2);max-width:68ch;font-size:.95rem}

/* ---------- Footer ------------------------------------------------------ */
.foot{border-top:1px solid var(--line);background:var(--canvas)}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem;
  padding-block:clamp(2.5rem,4vw,3.5rem)}
@media (max-width:720px){.foot__grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media (max-width:460px){.foot__grid{grid-template-columns:1fr}}
.foot h4{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:.85rem}
.foot li + li{margin-top:.5rem}
.foot a{font-size:var(--t-small);color:var(--ink-2);transition:color .3s var(--ease)}
.foot a:hover{color:var(--ink)}
.foot__logo{grid-column:1/-1}
@media (min-width:721px){.foot__logo{grid-column:auto}}
.foot__logo img{height:44px;width:auto;margin-bottom:.9rem}
.foot__bar{border-top:1px solid var(--line-soft);padding-block:1.1rem;display:flex;
  flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;font-size:var(--t-micro);
  color:var(--ink-3)}

/* ---------- Cart drawer ------------------------------------------------- */
.scrim{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(29,21,18,.5);
  backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.scrim[data-open]{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);
  width:min(100%,430px);background:var(--canvas);border-left:1px solid var(--line);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .42s var(--ease);will-change:transform}
.drawer[data-open]{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.25rem;border-bottom:1px solid var(--line-soft)}
.drawer__body{flex:1;overflow-y:auto;padding:1.25rem;display:grid;gap:1rem;align-content:start}
.drawer__foot{border-top:1px solid var(--line-soft);padding:1.25rem;display:grid;gap:.85rem;
  background:var(--paper-2)}
.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:.85rem;align-items:start}
.cart-line img,.cart-line .thumb-arc{width:64px;height:64px;object-fit:cover;
  border-radius:var(--r-field);background:var(--sunk);flex:none}
.cart-line b{font-size:.92rem;font-weight:600;display:block;line-height:1.35}
.cart-line span{font-size:var(--t-micro);color:var(--ink-3);display:block}
.cart-line button{color:var(--ink-3);font-size:var(--t-micro);text-decoration:underline;
  text-underline-offset:2px}
.cart-line button:hover{color:var(--ink)}
.cart-ship{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .8rem;border:1px solid var(--line);
  border-radius:var(--r-field);background:var(--paper);cursor:pointer;font-size:.86rem;line-height:1.4}
.cart-ship input{margin-top:.2rem;flex:none}
.cart-ship b{white-space:nowrap;color:var(--ink-2)}
.cart-total{display:flex;align-items:baseline;justify-content:space-between}
.cart-total b{font-family:var(--f-title);font-size:1.4rem;font-weight:400}
.xsell{border-top:1px solid var(--line-soft);padding-top:1rem;display:grid;gap:.75rem}
.xsell__row{display:grid;grid-template-columns:48px 1fr auto;gap:.75rem;align-items:center}
.xsell__row img,.xsell__row .thumb-arc{width:48px;height:48px;object-fit:cover;
  border-radius:12px;background:var(--sunk);flex:none}
.xsell__row b{font-size:.85rem;font-weight:600;display:block;line-height:1.3}
.xsell__row span{font-size:var(--t-micro);color:var(--ink-3)}

/* ---------- Toast ------------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,calc(100% + 48px));z-index:var(--z-drawer);
  background:var(--ink);color:var(--canvas);padding:.85rem 1.35rem;border-radius:var(--r-pill);
  font-size:.88rem;font-weight:500;box-shadow:0 18px 40px -20px rgba(var(--shade),.9);
  transition:transform .45s var(--ease),visibility .45s;display:flex;align-items:center;
  gap:.5rem;max-width:90vw;visibility:hidden}
/* Toast odwraca się razem z motywem: w jasnym ma ciemne tło, w ciemnym jasne.
   Ptaszek musi więc zmieniać odcień złota w drugą stronę niż reszta strony. */
.toast svg{width:18px;height:18px;color:var(--c-gold-1)}
:root[data-theme="dark"] .toast svg{color:#8A6628}
.toast[data-on]{transform:translate(-50%,0);visibility:visible}

/* ---------- Reveal on scroll (IntersectionObserver) --------------------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}

/* Warianty poczatkowego stanu, uzywane tak samo jak w hero: --fade dla
   samego znaku (bez przesuniecia), --card dla obiektu, ktory ma wygladac
   jakby ktos go stawial na stole, nie tylko wjezdzal z dolu. */
.reveal--fade{transform:none}
.reveal--card{transform:translateY(28px) scale(.97)}

/* ---------- Stagger: ten sam rytm wejscia co w .hero__copy --------------- */
/* Hero wpisuje naglowek, lead i CTA jako trzy osobne .reveal ze wzrastajacym
   o .14s opoznieniem (patrz transition-delay w markupie hero). .stagger
   przenosi dokladnie ten sam krok na powtarzalne grupy elsewhere na stronie:
   gwarancje, kola "Dlaczego OAZA", kroki "Jak to dziala", cytaty, pitch
   vouchera kwotowego. Kazde dziecko-.reveal w grupie jest wciaz osobno
   obserwowane przez IntersectionObserver - stagger tylko odsuwa w czasie
   ich wspolny start, nie zmienia mechanizmu wyzwalania. */
.stagger > .reveal:nth-child(1){transition-delay:0s}
.stagger > .reveal:nth-child(2){transition-delay:.14s}
.stagger > .reveal:nth-child(3){transition-delay:.28s}
.stagger > .reveal:nth-child(4){transition-delay:.42s}
.stagger > .reveal:nth-child(5){transition-delay:.56s}
.stagger > .reveal:nth-child(6){transition-delay:.7s}

/* ==========================================================================
   Voucher detail page
   ========================================================================== */
.crumbs{display:flex;align-items:center;gap:.4rem;font-size:var(--t-small);color:var(--ink-3);
  padding-block:1.25rem}
.crumbs a:hover{color:var(--ink)}
.crumbs svg{width:14px;height:14px;color:var(--ink-3)}

.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.75rem,3.5vw,4rem);align-items:start;padding-bottom:var(--pad-section)}
@media (max-width:980px){.detail{grid-template-columns:1fr}}
.detail__left{display:grid;gap:1.25rem;position:sticky;top:96px}
@media (max-width:980px){.detail__left{position:static}}
.detail__hero{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;background:var(--sunk)}
@media (max-width:980px){.detail__hero{aspect-ratio:16/10}}
.detail__hero img{width:100%;height:100%;object-fit:cover}

.panel{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-card);
  padding:clamp(1.25rem,2.4vw,1.85rem);display:grid;gap:1.1rem}
.panel__head{display:flex;align-items:center;gap:.6rem}
.panel__head svg{width:18px;height:18px;color:var(--accent-ink)}
.panel__head h3{font-family:var(--f-body);font-size:.95rem;font-weight:600;letter-spacing:.01em}

.field{display:grid;gap:.4rem}
.field label{font-size:var(--t-small);font-weight:600;color:var(--ink)}
.field .hint{font-size:var(--t-micro);color:var(--ink-3)}
.field .err{font-size:var(--t-micro);color:#A6402F;display:none}
:root[data-theme="dark"] .field .err{color:#F0A08C}
.field[data-invalid] .err{display:block}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:#A6402F}
.field input,.field textarea,.field select{
  width:100%;padding:.8rem 1rem;border-radius:var(--r-field);background:var(--canvas);
  border:1px solid var(--line);color:var(--ink);font-size:.95rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:1}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent-ink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-ink) 28%,transparent)}
.field textarea{resize:vertical;min-height:84px;line-height:1.6}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}

.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:.6rem}
.opt{position:relative; height:100%}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:grid;align-content:start;gap:.15rem;height:100%;box-sizing:border-box;
  padding:.85rem .9rem;border-radius:var(--r-field);
  border:1px solid var(--line);cursor:pointer;text-align:left;
  transition:border-color .28s var(--ease),background-color .28s var(--ease)}
.opt b{font-weight:600;font-size:.95rem}
.opt em{font-style:normal;font-size:var(--t-micro);color:var(--ink-3)}
.opt input:hover + span{border-color:var(--brand)}
.opt input:checked + span{border-color:var(--accent-ink);background:color-mix(in srgb,var(--c-gold-1) 16%,transparent);
  box-shadow:0 0 0 1px var(--accent-ink) inset}
.opt input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}

.summary{display:grid;gap:.5rem;font-size:.92rem}
.summary__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  color:var(--ink-2)}
.summary__row span:last-child{white-space:nowrap}
.summary__total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--line);padding-top:.75rem;margin-top:.25rem}
.summary__total b{font-family:var(--f-title);font-size:1.6rem;font-weight:400}

/* Pasek zakupu jest potrzebny tam, gdzie podsumowanie nie trzyma się ekranu,
   czyli poniżej progu, na którym prawa kolumna przestaje być sticky. */
@media (min-width:981px){.buybar{display:none}}
.buybar{position:sticky;bottom:0;z-index:20;background:color-mix(in srgb,var(--canvas) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:.9rem 0;margin-top:1rem}
@supports not (backdrop-filter:blur(1px)){.buybar{background:var(--canvas)}}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.buybar__in > div{min-width:0}
.buybar b{font-family:var(--f-title);font-size:1.35rem;font-weight:400;line-height:1.1;display:block}
.buybar span{font-size:var(--t-micro);color:var(--ink-3);display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.spec{display:grid;gap:0}
.spec div{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:.7rem 0;font-size:.92rem}
.spec div + div{border-top:1px solid var(--line-soft)}
.spec dt{color:var(--ink-3)}
.spec dd{margin:0;font-weight:500;text-align:right}

.effects{display:grid;gap:.6rem}
.effects li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:var(--ink-2)}
.effects svg{width:16px;height:16px;color:var(--accent-ink);flex:none;margin-top:.35em}

.related{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:820px){.related{grid-template-columns:1fr}}