/* Montserrat gostimo sami (spremenljiva pisava, wght 400-800, Google v31).
   Prej je bil <link> na fonts.googleapis.com, ki je blokiral izris in
   prenesel 5 statičnih rezov. Datoteki sta v /ponudba/fonts/; na produkciji
   ju port_ponudba.py preslika v /ponudba/fonts/. unicode-range je prepisan
   iz Googlovega CSS-ja — slovenščina (čšž) živi v latin-ext. */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(/ponudba/fonts/montserrat-var-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:'Montserrat';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(/ponudba/fonts/montserrat-var-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;
}
:root{
  --orange:#CF4B0C;
  --orange-2:#F5813C;
  --orange-soft:#FDE4D8;
  --orange-ink:#B4470F;
  --star:#CE8412;
  /* CTA (poziv k dejanju) — 8. 9. 2026, Max: »this orange black is really
     good, just make CTA buttons more red«.
     Zeton je LOCEN od --orange namenoma: --orange nosi tudi nadnaslove, pike,
     trakove, izbrana stanja in ikone (~30 rab kot ozadje), teh Max ni hotel
     premikati. --cta velja SAMO za polne gumbe poziva:
       .btn-orange · .btn-hdr · .bb2 .bb-cta · .sticky-cta .sticky-btn · .oto-cta
     in za napis na obrnjenem gumbu .up-cta (kremna kapsula na temnem pasu).
     Odtenek: 19,4° -> 10,8°. Svetlost ostane 42 proti 43, zato gumb enako
     izstopa. Belo besedilo na njem zraste s 4,50:1 na 5,44:1 — #CF4B0C je bil
     natanko na meji AA in je pri gumbih padel skozi.
     ⚠ Ce dodas nov gumb poziva, uporabi var(--cta), ne var(--orange). */
  --cta:#C7300F;
  --cta-hover:#B32B0D;      /* belo besedilo 6,43:1 */
  /* Topel zakljucni pas (»orange black«) — 8. 9. 2026, Max: »this orange black
     is really good«. Uporabljata ga .up-sklep na /uspeh in .np-sklep na
     /neuspeh; zeton je EN, da se pasova ne razideta.
     Izvira iz preliva, ki ga je vzporedna seja postavila in nato umaknila
     (`linear-gradient(150deg,#8E3308,#3A1204 78%)`, v3 paleta). Tu je isti
     preliv v GLAVNI paleti: odtenek 10,8° kot --cta, svetlost enaka izvirniku.
     Kontrast je boljsi od izvirnika — na svetlem koncu #8A210A ima belo
     besedilo 9,12:1 (prej 7,99:1) in odstavek #C4C5C9 5,29:1 (prej 4,64:1). */
  --band-warm:linear-gradient(150deg,#8A210A,#390E04 78%);
  --ink:#1B1C1E;
  --text:#27282A;
  --muted:#66676C;
  --dim:#6C6D72;
  --line:#E5E7EB;
  --cream:#F2F1EC;
  --panel:#FFFFFF;
  --dark:#0F0F10;
  --green:#4A8167;
  --radius-sec:28px;   /* DS r-block; prej 44 (28. 8., raven 2) */
  --gap-head:clamp(28px,4vw,46px);
  /* Sence po oblikovnem sistemu invisalign (28. 8. 2026, Max, »raven 1«).
     Natanko tri; vse dvizne sence na strani so preslikane nanje. Ostanejo
     samo obrobni obroci (0 0 0 1px), notranji leski v maketah in mikro
     sence z zameglitvijo < 10 px — to niso dvizne sence. */
  /* --sh-btn in --sh-soft sta 8. 9. 2026 prevzela mehkejsi vrednosti z glavne
     ponudbe (prej samo v polish.css na .lp-polished, zato so podstrani imele
     globlje sence kot /ponudba). Izvirni vrednosti DS: --sh-btn
     0 12px 28px rgba(207,75,12,.28), --sh-soft 0 12px 28px rgba(70,30,8,.10).
     --sh-btn-strong ostane nespremenjen: polish.css ga ni prepisal, zato je
     enak na vseh straneh ze od 28. 8. 2026. */
  --sh-btn:0 6px 16px rgba(180,71,15,.16);
  --sh-btn-strong:0 14px 32px rgba(207,75,12,.32);
  --sh-soft:0 6px 24px rgba(40,30,20,.045);
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--cream);color:var(--text);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:500;
  -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* 28. 8. 2026 (Max): enaka debelina naslovov kot na invisalign.vbo.si.
   Izmerjeno tam: veliki naslovi (29-58px) so 500, kartice (19px) 600,
   izjema je le velika cena, ki je 800. Prej je bilo tu 700 / h2 800.
   Tudi razmik crk: -.02em namesto -.03em (invisalign: -0,828px pri 41,4px). */
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.06;font-weight:500;color:var(--ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px;min-width:0}

/* ---------- napovedni pas + znamka ---------- */
/* =====================================================================
   VRHNJI BLOK — prepis navigacije z invisalign.vbo.si (28. 8. 2026, Max).
   Vse stevilke (11,25px, 42px, #FFF3E9, #B4470F, #CF4B0C, clamp odmiki) so
   prebrane z zive strani invisalign.vbo.si, ne izmisljene.
   ===================================================================== */
.vrh{position:sticky;top:0;z-index:90;transition:transform .28s ease}
.vrh.skrit{transform:translateY(-100%)}
/* Vrstica z navigacijo se ob umiku se zatemni — tako kot [data-nav] tam. */
.vrh header{transition:opacity .28s ease}
.vrh.skrit header{opacity:0}

/* ---- 2. oranzni napovedni pas ---- */
.annc{position:relative;z-index:1;background:#B4470F;color:#fff;font-size:11.25px;line-height:1.6}
.annc-in{max-width:1280px;margin:0 auto;padding:12px clamp(18px,4vw,56px);display:flex;align-items:center;
  justify-content:center;gap:16px;flex-wrap:wrap}
.annc-txt{display:inline-flex;flex-direction:column;text-align:left;line-height:1.28;min-width:0}
.annc-txt b{font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:#fff;font-size:11.25px}
.annc-txt span{opacity:.9;color:#fff;font-size:11.25px}
.annc-cd{display:inline-flex;align-items:center;gap:4px;flex:none}
.annc-cd span{display:inline-flex;flex-direction:column;align-items:center;min-width:30px;padding:3px 5px;
  border-radius:7px;background:rgba(0,0,0,.18);line-height:1.05}
.annc-cd b{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;
  letter-spacing:0;text-transform:none}
.annc-cd i{font-size:9px;font-style:normal;letter-spacing:.07em;opacity:.88;color:#fff;margin:0}
.annc-cta{flex:none;font-size:11.25px;font-weight:600;color:#fff;white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px}
.annc-cta:hover{color:#fff}
.brand img{height:22px;width:auto}
.trust-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted);font-weight:600}
.trust-row img.g{width:15px;height:15px}
.trust-row b{color:var(--ink)}
.trust-row .divider{width:1px;height:14px;background:var(--line)}
.trust-row .tr-loc{display:inline-flex;align-items:center;gap:6px}
.trust-row .tr-loc svg{flex:none;color:var(--orange)}
.vesna{display:grid;grid-template-columns:190px 1fr;gap:clamp(18px,3vw,34px);align-items:center;background:#fff;border:1px solid #EBE9E3;border-radius:28px;padding:clamp(18px,2.6vw,28px);box-shadow:var(--sh-soft)}
.vesna>img{border-radius:14px;width:100%;height:230px;object-fit:cover;object-position:center top}
.vesna .quote{font-size:clamp(19px,2.4vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:8px 0 10px;color:var(--ink)}
.vesna p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.vesna .podpis{height:54px;width:auto;margin-top:12px;opacity:.9}
@media (max-width:720px){.vesna{grid-template-columns:1fr}.vesna>img{height:220px}}

/* ---------- header ---------- */
/* Osnovna glava. TRAPa (28. 8. 2026): tu je bil `backdrop-filter` stare
   steklene glave. Ta iz <header> naredi VSEBOVALNI BLOK za potomce s
   `position:fixed` — prekrivni mobilni meni je zato dobil visino 39,5 px
   namesto cele visine zaslona. Steklene glave ni vec, zato ga ni vec. */
header{position:relative;z-index:1;background:transparent}
.hdr{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .mark{width:30px;height:30px;border-radius:14px;background:linear-gradient(150deg,var(--orange-2),var(--orange));display:grid;place-items:center;box-shadow:var(--sh-btn)}
.brand .word{font-size:10.5px;font-weight:800;line-height:1.06;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
nav{display:flex;gap:26px;margin:0 auto;font-size:13.5px;font-weight:500;color:#4A4B50}
nav a:hover{color:var(--orange)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:600;white-space:nowrap;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:var(--dark);color:#fff;height:38px;padding:0 17px;font-size:13px}
/* 28. 8. 2026 (Max): brez preliva in brez animacije `flow` — en cist oranzen
   ton kot na invisalign.vbo.si, da so CTA-ji enaki v celotni znamki. */
.btn-orange{background:var(--cta);color:#fff;height:58px;padding:0 30px;font-size:18px;font-weight:700;box-shadow:var(--sh-btn)}
.btn-ghost{background:#fff;color:var(--ink);height:58px;padding:0 26px;font-size:16px;border:1px solid #DCDBD5;box-shadow:0 2px 8px rgba(27,28,30,.05)}
@keyframes flow{to{background-position:220% 0}}
.burger{display:none;width:38px;height:38px;border-radius:14px;border:1px solid #DCDBD5;background:#fff;place-items:center;cursor:pointer}
.nav-cenik{display:none}

/* ---------- hero ---------- */
.hero{padding:clamp(22px,3.2vw,44px) 0 clamp(48px,6vw,72px)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,46px);align-items:center}
h1{font-size:clamp(30px,4.6vw,54px);max-width:100%;overflow-wrap:break-word}
.h1-line{display:block;max-width:100%}
.hero p.sub{margin:18px 0 0;font-size:16px;line-height:1.55;color:var(--muted);max-width:34em}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-note{margin-top:14px;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;font-size:14px;font-weight:600;color:var(--text)}
.hero-note b{font-weight:700;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px}
.hero-note .hn-ok{flex:none}
.hero-note .hn-ok circle{fill:var(--green)}


/* hero collage */
.collage{position:relative;min-height:400px;display:grid;place-items:center}
.collage::before{content:'';position:absolute;inset:6% -4%;border-radius:50%;background:radial-gradient(closest-side,rgba(245,129,60,.42),rgba(245,129,60,0) 72%);filter:blur(6px)}
.card-f{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--sh-soft);border:1px solid rgba(0,0,0,.05);overflow:hidden}
.cf1{width:236px;right:2%;top:2%;transform:rotate(7deg);padding:12px}
.cf2{width:210px;right:26%;top:22%;transform:rotate(-5deg);padding:10px;z-index:3}
.cf3{width:214px;left:0;top:9%;transform:rotate(-9deg);padding:12px}
.cf4{width:250px;left:6%;bottom:2%;transform:rotate(4deg);padding:13px 14px;z-index:4}
.mini-t{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.mini-row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;white-space:nowrap}
.mini-row+.mini-row{margin-top:8px}
.mini-row span.p{margin-left:auto;color:var(--orange);font-weight:700}
.thumb{border-radius:14px;overflow:hidden;background:#F2F2F3}
.thumb img{width:100%;height:112px;object-fit:cover}
.stack{display:flex}
.stack img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-9px;background:#eee}
.stack img:first-child{margin-left:0}

/* ---------- vsl hero ---------- */
.hero-vsl{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.hero-vsl > *{min-width:0;max-width:100%}
.hero-vsl .badge{margin:0 0 12px}
.hero-vsl h1{margin:0 auto 14px}
.hero-vsl .sub{margin:0 auto 16px;text-align:center;max-width:34rem;font-size:17px;line-height:1.5}
.hero-vsl .trust-row{margin:0 0 20px}
.hero-vsl .vsl{margin:0 auto 18px}
.hero-vsl .hero-cta{margin:0 0 12px}
.hero-vsl .cta-badges{margin:0 0 8px}
.hero-vsl .hero-note{margin:0}
.vsl{position:relative;width:100%;max-width:880px;min-width:0}
.vsl::before{content:'';position:absolute;inset:-10% -12%;border-radius:50%;background:radial-gradient(closest-side,rgba(245,129,60,.40),rgba(245,129,60,0) 72%);filter:blur(4px);z-index:0}
.vsl-frame{position:relative;z-index:1;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#0F0F10;box-shadow:var(--sh-soft);border:6px solid #fff;min-width:0;max-width:100%}
.vsl-frame video{width:100%;height:100%;max-width:100%;min-width:0;object-fit:cover;display:block}
/* Prekrivni poziv cez video. Klik zazhene posnetek od zacetka in vklopi zvok.
   Ozadje poziva je prosojno, zato bralec ves cas vidi, da video tece.
   TRAPa: oba gumba imata display (grid oziroma flex), kar povozi privzeti
   [hidden] — zato izrecno pravilo [hidden]{display:none}. */
.vsl-tap{position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  margin:0;padding:0;border:0;background:transparent;font:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.vsl-tap[hidden]{display:none}
.vsl-tap-box{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:clamp(13px,1.7vw,18px) clamp(20px,3vw,34px);border-radius:14px;
  background:rgba(8,8,9,.90);border:2px solid var(--orange);color:var(--orange-2);
  box-shadow:var(--sh-soft), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s ease,border-color .18s ease}
.vsl-tap:hover .vsl-tap-box{transform:translateY(-2px);border-color:var(--orange-2)}
.vsl-tap:focus-visible .vsl-tap-box{outline:3px solid #fff;outline-offset:3px}
.vsl-tap-t{font-size:clamp(13px,1.5vw,16px);font-weight:800;letter-spacing:-.01em;line-height:1.2;white-space:nowrap}
.vsl-tap-i{width:clamp(40px,5.2vw,58px);height:auto;stroke:currentColor}
@media (prefers-reduced-motion:no-preference){
  .vsl-tap-box{animation:vboPozivUtrip 2.6s ease-in-out infinite}
}
@keyframes vboPozivUtrip{
  0%,100%{box-shadow:var(--sh-soft), 0 0 0 0 rgba(207,75,12,.40)}
  50%{box-shadow:var(--sh-soft), 0 0 0 13px rgba(207,75,12,0)}
}
/* Ko zvok tece, ostane samo majhno stikalo — brez besedila. */
.vsl-mute{position:absolute;right:14px;bottom:16px;z-index:3;display:grid;place-items:center;
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(15,15,16,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:var(--sh-soft);transition:background .18s ease,transform .18s ease}
.vsl-mute[hidden]{display:none}
.vsl-mute:hover{background:rgba(15,15,16,.82);transform:translateY(-1px)}
/* 5 px, ne 9: vtisnjeni podnapisi sedijo ob dnu 16:9 kadra (7. 9. 2026). */
.vsl-bar{position:absolute;left:0;right:0;bottom:0;height:5px;
  background:rgba(255,255,255,.22);z-index:3}
/* Prehod zgladi stopnice: timeupdate se sprozi priblizno stirikrat na sekundo. */
.vsl-bar i{display:block;height:100%;width:0;border-radius:0 999px 999px 0;
  background:linear-gradient(90deg,#F5813C,#CF4B0C);
  box-shadow:0 0 14px rgba(245,129,60,.55);transition:width .25s linear}

/* ---------- kviz ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chips span{background:#fff;border:1px solid #E4E2DC;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;color:#4A4B50}
.kviz-card{position:relative;max-width:760px;margin:0 auto;background:#fff;border:1px solid #EFE7DD;border-radius:28px;padding:clamp(22px,3vw,34px);box-shadow:var(--sh-soft)}
.kviz-top{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.kviz-step{font-size:11.25px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6E655C}
.kviz-bar{height:6px;border-radius:999px;background:#EDEBE5;overflow:hidden}
.kviz-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--orange);transition:width .35s ease}
.kviz-q{font-size:clamp(19px,2.5vw,25px);font-weight:600;letter-spacing:-.02em;line-height:1.22;color:var(--ink);margin:0 0 6px}
.kviz-help{margin:0 0 16px;font-size:13.5px;color:var(--muted)}
.kviz-opts{display:flex;flex-direction:column;gap:10px}
.kviz-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid #E0D8CD;border-radius:14px;padding:16px 19px;font:inherit;font-size:15px;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .12s ease}
.kviz-opt:hover{border-color:#CF7A4D;background:#FFF9F5;transform:translateY(-1px)}
.kviz-opt[aria-pressed="true"]{border-color:var(--orange);background:#FDF3EC;box-shadow:inset 0 0 0 1px var(--orange)}
.kviz-opt .box{flex:none;width:20px;height:20px;border-radius:14px;border:2px solid #CFCCC4;display:grid;place-items:center}
.kviz-opt[aria-pressed="true"] .box{border-color:var(--orange);background:var(--orange)}
.kviz-opt .box svg{opacity:0}
.kviz-opt[aria-pressed="true"] .box svg{opacity:1}
.kviz-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.kviz-scale .kviz-opt{justify-content:center;font-size:19px;font-weight:700;padding:18px 0}
.kviz-scale-lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-top:8px}
.kviz-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap}
.kviz-back{background:none;border:0;font:inherit;font-size:13px;color:var(--dim);cursor:pointer;padding:6px 0}
.kviz-back:hover{color:var(--orange)}
.kviz-note{font-size:12px;color:var(--dim)}
.kviz-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.kviz-field label{font-size:12.5px;font-weight:700;color:#4A4B50}
.kviz-field input{font:inherit;font-size:15px;padding:13px 15px;border:1px solid #E0D8CD;border-radius:14px;background:#fff;color:var(--text)}
.kviz-field input:focus{outline:2px solid rgba(207,75,12,.35);border-color:var(--orange)}
.kviz-load{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;padding:26px 0}
.kviz-ring{width:84px;height:84px;border-radius:50%;border:7px solid #EDEBE5;border-top-color:var(--orange);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.kviz-load ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15px;color:var(--muted);font-weight:600}
.kviz-load li{opacity:0;animation:fadeIn .5s ease forwards}
@keyframes fadeIn{to{opacity:1}}
@media (max-width:560px){.kviz-scale{gap:6px}}

/* ---------- kviz: pomiritveni vmesni zasloni (28. 8. 2026) ----------
   Prenos iz glavnega lijaka /quiz-a. Zaslon se pokaze PO oddanem odgovoru,
   zato zivi v isti .kviz-card kot vprasanja — brez svoje skatle, sicer bi
   se kartica ob preklopu vidno prerisala. */
.kviz-re-img{display:block;width:100%;height:auto;max-height:300px;object-fit:cover;
  border-radius:14px;margin:2px 0 16px;background:#F5F3EE}
.kviz-re-body{margin:0 0 18px;font-size:15.5px;line-height:1.62;color:var(--text)}
.kviz-re-stars{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.kviz-re-stars>span:first-child{display:inline-flex;gap:2px;flex:none}
.kviz-re-stars>span:last-child{font-size:13.5px;font-weight:600;color:var(--text)}
.kviz-re-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 4px}
.kviz-re-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.kviz-re-stat .ik{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:999px;background:#fff;border:1px solid #E4E2DC;
  color:var(--ink);box-shadow:0 1px 4px rgba(27,28,30,.06)}
.kviz-re-stat .lb{font-size:13px;line-height:1.35;color:var(--text);max-width:150px}
/* Opomba je majhna in siva, NE lezeca: hisni slog VBO ne uporablja poudarkov
   z lezeco pisavo. */
.kviz-re-note{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* primerjava stroska (korak 13 glavnega lijaka) */
.kviz-cc{display:flex;flex-direction:column;gap:16px;margin:0 0 4px}
.kviz-cc-chip{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;
  background:var(--orange-soft);color:#8E3208;border-radius:999px;padding:8px 16px;
  font-size:14px;font-weight:600}
.kviz-cc-chip b{font-size:20px;font-weight:800;line-height:1;letter-spacing:-.02em}
.kviz-cc-row{display:flex;flex-direction:column;gap:7px}
.kviz-cc-row .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.kviz-cc-row .lbl span{font-size:14.5px;font-weight:500;color:var(--text)}
.kviz-cc-row .lbl b{font-size:20px;font-weight:700;white-space:nowrap;color:var(--ink);
  font-variant-numeric:tabular-nums}
.kviz-cc-row.hi .lbl b{color:#A93C0A}
.kviz-cc-row .bar{height:12px;border-radius:999px;background:#EDEBE5;overflow:hidden}
/* Draga vrstica je 100 % siroka, zato jo mora barva LOCITI od tira. #CFCCC4
   na #EDEBE5 je bral kot prazen tir in primerjava se ni videla. */
.kviz-cc-row .bar i{display:block;height:100%;border-radius:999px;background:#8A8B90}
.kviz-cc-row.hi .bar i{background:var(--orange)}

@media (max-width:560px){
  /* Tri ikone v vrsti se na telefonu stisnejo v neberljive stolpce. */
  .kviz-re-stats{grid-template-columns:1fr;gap:12px}
  .kviz-re-stat{flex-direction:row;text-align:left;gap:12px}
  .kviz-re-stat .lb{max-width:none}
  .kviz-re-img{max-height:220px}
  .kviz-cc-row .lbl b{font-size:18px}
}

/* ---------- cenik ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{background:#fff;border:1px solid #EBE9E3;border-radius:28px;padding:24px 22px 26px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh-soft)}
.plan .pname{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.plan .amt{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.plan .amt b{font-size:40px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.plan .amt span{font-size:14px;font-weight:600;color:var(--muted)}
.plan .amt s{font-size:15px;color:var(--dim)}
.plan .sub2{font-size:13px;color:var(--muted);margin-top:-4px}
.plan ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.plan li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:#3E3F44}
.plan li svg{flex:none;margin-top:2px}
.plan .btn{width:100%}
.plan .fine{font-size:11.5px;color:var(--dim);text-align:center}
.plan.best{background:#fff;border:2px solid var(--orange);color:inherit;padding:30px 24px 30px;box-shadow:var(--sh-soft);position:relative;transform:scale(1.03)}
.plan.best .pname{color:var(--orange)}
.plan.best .amt b{color:var(--ink)}
.plan.best .amt span,.plan.best .sub2,.plan.best .fine{color:var(--muted)}
.plan.best .amt s{color:var(--dim)}
.plan.best li{color:#3E3F44}
.ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;border-radius:999px;padding:6px 15px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;box-shadow:var(--sh-btn)}
.plans-note{text-align:center;font-size:12.5px;color:var(--dim);margin-top:22px}
@media (max-width:980px){.plans{grid-template-columns:1fr}.plan.best{transform:none;order:-1}}

/* ---------- sections ---------- */
section.panel{background:var(--panel);border-radius:var(--radius-sec);padding:clamp(44px,6vw,78px) 0;margin-top:18px;position:relative;z-index:5}
section.soft{background:transparent;border-radius:0;padding:clamp(44px,6vw,78px) 0;margin-top:0}
section.plain{padding:clamp(44px,6vw,78px) 0}
.badge{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:8px 15px;
  background:linear-gradient(180deg,#2E2F33 0%,#1B1C1E 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:var(--sh-soft), inset 0 1px 0 rgba(255,255,255,.10);
  color:#F1EFEA;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap}
.badge b{flex:none;width:9px;height:9px;border-radius:50%;font-size:0;
  background:radial-gradient(circle at 32% 30%,#F9A472,#CF4B0C 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20), 0 0 0 2px rgba(207,75,12,.14)}
.badge b:last-child{background:radial-gradient(circle at 32% 30%,#6E6F74,#3A3B3E 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:var(--gap-head)}
.head h2{font-size:clamp(27px,3.6vw,40px)}
.head p{margin:0;max-width:32em;font-size:14.5px;line-height:1.6;color:var(--muted)}
.cta-block{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(30px,4vw,44px)}
.trusted{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--dim);font-weight:500}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:#fff;border:1px solid #EBE9E3;border-radius:28px;padding:14px 14px 20px;box-shadow:var(--sh-soft)}
.step .tile{border-radius:14px;background:linear-gradient(160deg,#FFB27C 0%,#F5813C 46%,#E4560F 100%);height:168px;display:grid;place-items:center;overflow:hidden;position:relative}
.step .tile img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.22))}
.step .tile.cover img{width:86%;height:80%;object-fit:cover;border-radius:14px;box-shadow:var(--sh-soft)}
.step .k{margin-top:16px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.step h3{margin-top:6px;font-size:18px;font-weight:600}
.step p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* bento */
.bento{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:auto auto;gap:14px}
.bx{border-radius:28px;border:1px solid #E4E2DC;padding:20px;background:linear-gradient(170deg,#FAF9F6,#F2F1EC);position:relative;overflow:hidden}
.bx h3{font-size:19px;font-weight:600}
.bx p{margin:7px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:34em}
.bx.tall{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;gap:16px;background:linear-gradient(170deg,#FFFFFF,#F3F1EC)}
.gauge{align-self:center;position:relative;width:170px;height:170px;display:grid;place-items:center}
.gauge svg{position:absolute;inset:0;transform:rotate(-90deg)}
.gauge .val{font-size:46px;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.rev-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--sh-soft);max-width:330px}
.stars{color:var(--star);letter-spacing:2px;font-size:13px}
.bx.dark{background:linear-gradient(150deg,#B54009,#8E3208);border-color:transparent;color:#fff;display:grid;grid-template-columns:1fr 1.15fr;gap:16px;align-items:center;padding:22px}
.bx.dark h3{color:#fff}.bx.dark p{color:#F3D9CD}
.bx.dark .shot{border-radius:14px;overflow:hidden;box-shadow:var(--sh-soft)}
.bx.dark .shot img{width:100%;height:172px;object-fit:cover}
.protect{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.shield{width:64px;height:64px;border-radius:14px;background:linear-gradient(150deg,var(--orange-2),var(--orange));display:grid;place-items:center;box-shadow:var(--sh-btn)}
.marquee{margin-top:16px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee .track{display:flex;gap:10px;width:max-content;animation:slide 42s linear infinite}
.marquee img{width:66px;height:66px;border-radius:14px;object-fit:cover;flex:none;filter:grayscale(.15)}
@keyframes slide{to{transform:translateX(-50%)}}
.mq-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}

/* benefits / offer */
.offer{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ben{background:#fff;border:1px solid #EBE9E3;border-radius:14px;padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px}
.ben .ico{width:38px;height:38px;border-radius:14px;background:var(--orange-soft);display:grid;place-items:center;color:var(--orange)}
.ben h3{font-size:16.5px;font-weight:600}
.ben p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.ben .tag{align-self:flex-start;background:var(--orange-soft);color:#A93C0A;border-radius:999px;padding:5px 11px;font-size:11px;font-weight:700}
.ben.price{grid-column:span 3;background:var(--dark);color:#fff;border-color:transparent;display:grid;grid-template-columns:1.3fr auto;align-items:center;gap:20px;padding:26px 28px}
.ben.price h3{color:#fff;font-size:22px}
.ben.price p{color:#A9AAAE}
.pricebox{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pricebox .old{color:#8A8B90;text-decoration:line-through;font-size:15px}
.pricebox .now{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1}
.pricebox .now small{font-size:15px;font-weight:600;color:#A9AAAE;letter-spacing:0}

/* carousel */
.carousel{position:relative}
.rail{display:flex;gap:18px;align-items:center;justify-content:center}
.vcard{position:relative;border-radius:28px;overflow:hidden;background:#27282A;flex:none;width:322px;height:446px;
  box-shadow:var(--sh-soft);transition:width .4s ease,height .4s ease,opacity .4s ease,filter .4s ease}
.vcard.side{width:266px;height:368px;box-shadow:var(--sh-soft)}
.vcard.side::after{content:'';position:absolute;inset:0;background:rgba(250,249,246,.58);z-index:2}
.vcard.side .veil{background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(19,11,7,.72) 100%)}
.vcard img,.vcard video{width:100%;height:100%;object-fit:cover;display:block}
.vcard.side img{object-position:50% 6%;transform:scale(1.14);transform-origin:50% 10%}
.vcard .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 32%,rgba(142,50,8,.72) 74%,rgba(74,25,5,.94) 100%)}
.vcard .meta{position:absolute;left:20px;right:20px;bottom:18px;color:#fff;z-index:3}
.vcard .nm{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.vcard.side .nm{font-size:17px}
.vcard .qt{font-size:15px;line-height:1.35;font-weight:600;text-wrap:pretty;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.vcard .rev{margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,240,232,.78)}
.vcard .rev b{display:block;margin-top:3px;font-size:15px;font-weight:800;letter-spacing:-.01em;text-transform:none;color:#FFB98C}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.82);backdrop-filter:blur(6px);border:1px solid rgba(27,28,30,.08);
  display:grid;place-items:center;box-shadow:var(--sh-soft);cursor:pointer;z-index:5;transition:transform .2s ease,background .2s ease}
.arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.arrow.l{left:calc(50% - 300px)}.arrow.r{right:calc(50% - 300px)}
.dots{display:flex;justify-content:center;gap:7px;margin-top:20px}
.dots b{width:7px;height:7px;border-radius:50%;background:#D8D5CE;cursor:pointer;transition:width .3s ease,background .3s ease}
.dots b.on{width:22px;background:var(--orange)}

/* faq */
.faq-panel{max-width:760px;margin:0 auto;position:relative;border:1px solid #F0D8C9;border-radius:28px;background:#fff;padding:12px 18px;box-shadow:0 0 0 8px rgba(245,129,60,.06), var(--sh-btn-strong)}
details.q{border-bottom:1px solid #EFEEE9}
details.q:last-child{border-bottom:0}
details.q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 4px;font-size:14.5px;font-weight:600}
details.q summary::-webkit-details-marker{display:none}
details.q summary svg{flex:none;transition:transform .2s ease}
details.q[open] summary svg{transform:rotate(180deg)}
details.q[open] summary{padding-bottom:10px}
details.q p{margin:0 4px 16px;font-size:14px;line-height:1.62;color:var(--muted)}

/* footer — prepis podnožja z invisalign.vbo.si (Max, 29. 8. 2026).
   Vse mere izmerjene tam z getComputedStyle: ozadje #F5F0E8, mreža
   1.1fr/.9fr/1.4fr, povezave 13,05 px podčrtane (offset 3px), drobni
   tisk 11,25 px, vodni znak clamp(79,2px,15,75vw,226,8px) v
   rgba(42,37,34,.07), pod 760 px ena LEVO poravnana kolona (gap 30). */
footer{margin:0;background:#F5F0E8;color:#2A2522;border-top:1px solid #EFE7DD;overflow:hidden;padding:clamp(34px,5vw,72px) 0}
.f-wrap{max-width:1280px;margin:0 auto;padding:0 clamp(18px,4vw,56px)}
.f-grid{display:grid;grid-template-columns:1.1fr .9fr 1.4fr;gap:clamp(30px,4.4vw,60px)}
.f-head{font-size:11.25px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6E655C;margin-bottom:16px}
.f-lnk{display:block;font-size:13.05px;color:#5A5148;text-decoration:underline;text-underline-offset:3px;margin-bottom:8px}
.f-info{font-size:11.25px;color:#6E655C;line-height:1.6}
.f-info p{margin:0 0 14px;font-size:13.05px;line-height:1.6;color:#5A5148;max-width:46ch}
.f-info p b{font-weight:600;color:#2A2522}
.f-made{display:block;margin-top:16px;padding-top:12px;border-top:1px solid rgba(42,37,34,.08)}
.f-made a,.f-fine a{color:#5A5148;text-decoration:underline;text-underline-offset:2px}
.f-fine{font-size:11.25px;line-height:1.6;color:#6E655C;border-top:1px solid rgba(42,37,34,.08);margin:clamp(26px,3.4vw,44px) 0 0;padding-top:clamp(20px,2.6vw,32px);max-width:96ch}
.f-fine b{font-weight:600;color:#5A5148}
.f-mark{font-size:clamp(79.2px,15.75vw,226.8px);color:rgba(42,37,34,.07);user-select:none;display:flex;flex-direction:column;align-items:center;gap:.12em;border-top:1px solid rgba(42,37,34,.08);margin-top:clamp(26px,3.4vw,44px);padding-top:clamp(30px,4.4vw,60px)}
.f-mark svg{display:block;width:1.55em;height:auto;fill:currentColor}
.f-mark span{font-size:1em;font-weight:700;letter-spacing:.02em;line-height:.82;white-space:nowrap}
/* Pas pomoči in pas zaupanja v nogi (Max, 29. 8. 2026, vzor vitapur.si) */
.f-pomoc{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,7vw,110px);border-bottom:1px solid rgba(42,37,34,.08);padding-bottom:clamp(26px,3.4vw,44px);margin-bottom:clamp(26px,3.4vw,44px)}
.f-pombtn{display:flex;align-items:flex-start;gap:12px;background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit;text-decoration:none}
.f-pombtn svg{flex:0 0 auto;margin-top:2px}
.f-pombtn b{display:block;font-size:14.4px;font-weight:600;color:#B4470F}
.f-pombtn i{display:block;font-style:normal;margin-top:4px;font-size:13.05px;color:#6E655C}
.f-zaupanje{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 36px;border-top:1px solid rgba(42,37,34,.08);margin-top:clamp(26px,3.4vw,44px);padding-top:clamp(20px,2.6vw,32px)}
.f-nagrada{height:clamp(64px,18vw,92px);width:auto}
.f-placila{display:flex;align-items:center;gap:12px}
.f-chip{display:inline-flex;align-items:center;justify-content:center;width:58px;height:38px;background:#fff;border:1px solid rgba(42,37,34,.12);border-radius:8px}

@media (max-width:760px){
  .f-grid{grid-template-columns:1fr;gap:30px}
}

/* responsive */
@media (max-width:980px){
  .hdr{flex-wrap:wrap;height:auto;min-height:70px}
  /* Stari mobilni meni (burger <=980, bela plosca pod glavo) je odstranjen
     29. 8.: nova navigacija po vzoru invisalign (blok "VRHNJI BLOK" nizje)
     kaze povezave v vrsti do 860 px, burger in prekrivni meni pa obstajata
     samo pod 860 px. Ostanek tu je med 861 in 980 px risal lebdeco plosco
     kar ob zaprtem meniju, poleg nje pa se burger. */
  .hero-grid{grid-template-columns:1fr}
  .collage{min-height:360px;margin-top:14px}
  .steps{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}.bx.tall{grid-row:auto}
  .offer{grid-template-columns:1fr}.ben.price{grid-column:auto;grid-template-columns:1fr}
  .pricebox{align-items:flex-start}
  .arrow.l{left:4px}.arrow.r{right:4px}
  .vcard.side{display:none}
}
@media (max-width:560px){

  .brand img{height:17px}
  header .btn-dark{display:none}
  .hdr{gap:10px;min-width:0;width:100%}
  .brand{flex:none}
  .burger{flex:none}
  .vsl-mute{right:10px;bottom:12px;width:36px;height:36px}
  /* 7. 9. 2026: VSL je 16:9 z grafikami ob straneh. 4:5 izrez odreze kartice. */
  .vsl-frame{border-width:4px;border-radius:14px;aspect-ratio:16/9}
  .vsl-frame video{object-position:50% 50%}
  .vsl::before{inset:-8% 0}
  .cf1,.cf3{display:none}.cf2{right:auto;left:2%;top:6%}.cf4{left:12%}
  .bx.dark{grid-template-columns:1fr}
  .hero{padding:16px 0 40px;max-width:100vw;overflow-x:clip}
  .hero-vsl{width:100%;max-width:100%;align-items:stretch;overflow-x:clip}
  .hero-vsl .badge{order:1;font-size:11px;padding:6px 10px;white-space:normal;justify-content:center;max-width:100%;margin:0 auto 10px}
  .wrap{padding-left:16px;padding-right:16px}
  .hero-vsl h1{order:2;width:100%;max-width:100%;min-width:0;font-size:28px;line-height:1.14;white-space:normal;overflow-wrap:anywhere;margin-bottom:10px}
  .hero .hero-vsl p.sub{order:3;width:100%;max-width:100%;font-size:14px;line-height:1.45;margin:0 auto 10px;padding:0 8px;box-sizing:border-box;overflow-wrap:break-word}
  .hero-vsl .trust-row{order:4;width:100%;margin:0 0 12px}
  .hero-vsl .hero-cta{order:5;width:100%;max-width:none;flex-direction:column;margin:0 0 8px}
  .hero-vsl .hero-cta .btn-orange{width:100%;font-size:18px;padding:14px;box-sizing:border-box;white-space:normal;height:auto;min-height:64px}
  .hero-vsl .hero-cta .btn-ghost{display:none}
  .hero-vsl .cta-badges{order:6;width:100%;margin:0 0 4px}
  .hero-vsl .hero-note{order:7;width:100%;margin:0 0 12px}
  .hero-vsl .vsl{order:8;width:100%;margin:0 auto;overflow:hidden}
  .head{align-items:stretch}
  .head h2,.head p,.s3 h3,.s3 p{max-width:100%;width:100%}
}
@media (max-width:360px){
  .hero-vsl h1{font-size:22px}
  .hero-vsl .badge{font-size:10px;padding:5px 8px}
  .hero-vsl .hero-cta .btn-orange{font-size:16px;padding-left:10px;padding-right:10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---------- stran z rezultatom ---------- */
.rez-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,40px);align-items:center;background:#fff;border:1px solid #EBE9E3;border-radius:28px;padding:clamp(22px,3vw,36px);box-shadow:var(--sh-soft)}
.rez-eyebrow{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin:0 0 12px}
.rez-hero h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.03em;line-height:1.08}
.rez-hero h1 u{text-decoration-color:var(--orange);text-underline-offset:5px;text-decoration-thickness:3px}
.rez-hero p{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--muted);max-width:34em}
.rez-hero img{border-radius:14px;width:100%;height:280px;object-fit:cover;box-shadow:var(--sh-soft)}
.rez-chip{display:inline-flex;align-items:center;gap:8px;background:var(--orange-soft);color:#A93C0A;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700;margin-top:16px}
.rez-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rez-card{background:#fff;border:1px solid #EBE9E3;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px}
.rez-card .n{width:30px;height:30px;border-radius:14px;background:var(--orange-soft);color:#A93C0A;font-weight:800;font-size:14px;display:grid;place-items:center}
.rez-card p{margin:0;font-size:14px;line-height:1.55;color:#3E3F44}
.rez-arrow{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;background:#B4470F;color:#fff;border-radius:28px;padding:clamp(20px,2.6vw,28px)}
.rez-arrow .mid svg{stroke:#fff}
.rez-arrow .lbl{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:6px}
.rez-arrow .val{font-size:clamp(16px,2vw,20px);font-weight:700;line-height:1.3}
.rez-arrow .val.goal{color:#FFE1CF}
.rez-sign{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.rez-sign li{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #EBE9E3;border-radius:14px;padding:13px 16px;font-size:14px;font-weight:600;color:#3E3F44}
.rez-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #EBE9E3;border-radius:14px;overflow:hidden;font-size:14px}
.rez-table td{padding:12px 16px;border-bottom:1px solid #F0EEE9}
.rez-table tr:last-child td{border-bottom:0}
.rez-table td:first-child{color:var(--muted);width:46%}
.rez-table td:last-child{font-weight:600;color:var(--ink)}
@media (max-width:860px){.rez-hero{grid-template-columns:1fr}.rez-hero img{height:220px}.rez-grid{grid-template-columns:1fr}.rez-arrow{grid-template-columns:1fr;text-align:left}.rez-arrow .mid{transform:rotate(90deg)}}

/* ---------- pas pacientov (preslikano iz /ponudba, komponenta pacienti.jsx) ---------- */
.rail-head{margin-bottom:var(--gap-head)}
.rail-head h2{max-width:24ch;font-size:clamp(27px,3.6vw,44px)}
/* TRAPa: overflow-x:auto sam izracuna overflow-y:auto, zato je bilo mogoce
   pas premikati tudi navzgor in navzdol. overflow-y:hidden to zapre. */
.prail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:4px clamp(20px,4vw,56px) 14px;scroll-padding-left:clamp(20px,4vw,56px);cursor:grab}
.prail-track{display:flex;align-items:flex-start;gap:16px;width:max-content}
.prail::-webkit-scrollbar{display:none}
.rc{flex:0 0 auto;width:clamp(206px,21vw,264px);height:clamp(392px,40vw,470px);scroll-snap-align:start;position:relative;border-radius:14px;overflow:hidden;background:#EFE8E0}
.rc>img,.rc>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rc .veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 44%,rgba(19,11,7,.8) 100%)}
.rc .meta{position:absolute;left:0;right:0;bottom:0;padding:16px}
.rc .nm{display:flex;align-items:center;gap:8px;font-size:14.4px;font-weight:600;letter-spacing:-.014em;color:#fff}
.rc .role{margin-top:4px;font-size:11.5px;color:rgba(255,240,232,.72)}
.rc .play{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-24px 0 0 -24px;border-radius:999px;background:rgba(19,11,7,.34);backdrop-filter:blur(10px);border:1px solid rgba(255,240,232,.4);display:flex;align-items:center;justify-content:center;pointer-events:none}
.rc-wide{flex:0 0 auto;width:clamp(320px,44vw,512px);height:clamp(392px,40vw,470px);scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
.rc-wide .ph{flex:0 0 42%;border-radius:14px;overflow:hidden;background:#EFE8E0}
.rc-wide .ph img{width:100%;height:100%;object-fit:cover;display:block}
.rc-wide .qt{flex:1 1 auto;min-height:0;overflow:hidden;border-radius:14px;background:#F4EFE9;padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.rc-wide .qt p{margin:0;font-size:12px;line-height:1.62;color:#3A342E;text-wrap:pretty}
.rc-wide .qt .who{margin-top:12px;display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink)}
.rc-wide .qt .role{margin-top:4px;font-size:11.5px;color:#6E655C}

/* ---------- skupnost (preslikano iz /ponudba, komponenta skupnost.jsx) ---------- */
.sk{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.sk-hero{flex:1 1 320px;min-width:0;position:relative;border-radius:14px;overflow:hidden;min-height:clamp(322px,34.5vw,460px);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.6vw,32px)}
.sk-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.sk-hero .veil{position:absolute;inset:0;background:linear-gradient(178deg,rgba(23,15,11,.62) 0%,rgba(23,15,11,.28) 34%,rgba(23,15,11,.78) 100%)}
.sk-hero .big{position:relative;font-size:clamp(31px,3.96vw,47px);font-weight:600;letter-spacing:-.042em;line-height:.94;color:#fff}
.sk-hero .sm{position:relative;margin-top:8px;font-size:13px;color:rgba(255,240,232,.72)}
.sk-hero .cap{position:relative;font-size:clamp(15px,1.53vw,19px);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.sk-hero .cap span{color:rgba(255,255,255,.5)}
.sk-grid{flex:2 1 480px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px}
.sk-card{border-radius:14px;border:1px solid #EDE6DE;background:linear-gradient(180deg,#F1EBE3 0%,#FFFFFF 76%);padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:16px;min-height:225px}
.sk-card .art{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-width:0}
.sk-card .cap{text-align:center}
.sk-card .cap b{display:block;font-size:13px;font-weight:700;letter-spacing:-.01em}
.sk-card .cap span{display:block;margin-top:4px;font-size:13px;line-height:1.6;color:#6E655C}
.sk-rows{width:100%;max-width:230px;display:grid;gap:8px}
.sk-rows i{font-style:normal;border-radius:14px;padding:8px 12px;font-size:13px;font-weight:500;background:#fff;color:#6E655C;box-shadow:inset 0 0 0 1px #E9E1D8;animation:vboRow 7.5s ease-in-out infinite}
@keyframes vboRow{0%,5%{background-color:#fff;color:#6E655C;box-shadow:inset 0 0 0 1px #E9E1D8}13%,27%{background-color:#2A1509;color:#FFF0E8;box-shadow:var(--sh-soft)}35%,100%{background-color:#fff;color:#6E655C;box-shadow:inset 0 0 0 1px #E9E1D8}}
.sk-dots{position:relative;width:100%;max-width:230px;height:106px;border-radius:14px;background-color:#fff;background-image:radial-gradient(circle,#DCD2C7 1.7px,transparent 1.9px);background-size:15px 15px;border:1px solid #E9E1D8;display:flex;align-items:center;justify-content:center;animation:vboDots 6s linear infinite}
.sk-dots span{padding:4px 8px;border-radius:999px;background:#2A1509;color:#FFF0E8;font-size:13px;font-weight:600;letter-spacing:-.01em;animation:vboPulse 3.4s ease-in-out infinite}
@keyframes vboDots{from{background-position:0 0}to{background-position:15px 15px}}
@keyframes vboPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.sk-bars{width:100%;max-width:230px;display:grid;gap:8px}
.sk-bars .top{display:flex;align-items:baseline;gap:8px}
.sk-bars .top b{font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1}
.sk-bars .top span{color:var(--orange);font-size:13px;letter-spacing:.1em}
.sk-bars .bar{height:34px;border-radius:999px;background:#E9E1D8;overflow:hidden}
.sk-bars .bar i{display:block;height:100%;border-radius:999px;transform-origin:left center;animation:vboBar 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes vboBar{0%{transform:scaleX(.05)}20%,78%{transform:scaleX(1)}100%{transform:scaleX(.05)}}
.sk-price{width:100%;max-width:230px;border-radius:14px;background:#fff;border:1px solid #E9E1D8;padding:16px}
.sk-price .r{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#6E655C}
.sk-price .r+.r{margin-top:8px}
.sk-price .r b{color:var(--ink);font-weight:600}
.sk-price .r .free{color:var(--orange);font-weight:700}
.sk-price .tot{margin-top:12px;padding-top:12px;border-top:1px solid #EDE6DE;display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;color:var(--ink)}

/* preverjanje pogojev v kvizu */
.kviz-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;width:100%;max-width:420px;text-align:left}
.kviz-checks li{display:flex;align-items:flex-start;gap:10px;background:#F7F5F0;border:1px solid #EDEBE5;border-radius:14px;padding:11px 14px;font-size:13.5px;color:var(--muted);opacity:0;animation:fadeIn .45s ease forwards}
.kviz-checks li svg{flex:none;margin-top:2px}
.kviz-checks b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:1px}

/* ---------- osebni načrt (rezultat kviza) ---------- */
.plan-doc{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,2.6vw,32px);align-items:stretch}
.plan-status{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:8px 15px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.plan-status.ok{background:#EAF4EF;color:#3E7A5E}
.plan-status.warn{background:var(--orange-soft);color:#A93C0A}
.plan-status.info{background:#EDEBE5;color:#55565B}
.plan-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.plan-meta span{background:#fff;border:1px solid #E4E2DC;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:600;color:#4A4B50}
.polica{background:#fff;border:1px solid #EBE9E3;border-radius:28px;padding:clamp(18px,2.2vw,26px);box-shadow:var(--sh-soft);display:flex;flex-direction:column;gap:12px}
.polica .ttl{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px dashed #E0DDD5;padding-bottom:12px}
.polica .ttl b{font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.polica .ttl span{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.polica dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:13.5px}
.polica dt{color:var(--muted)}
.polica dd{margin:0;text-align:right;font-weight:600;color:var(--ink)}
.polica .big{margin-top:4px;padding-top:12px;border-top:1px solid #F0EEE9;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.polica .big b{font-size:32px;font-weight:800;letter-spacing:-.03em}
.polica .big span{font-size:12.5px;color:var(--muted)}
.polica .fineprint{font-size:11.5px;color:var(--dim);line-height:1.5}
.cover{width:100%;border-collapse:collapse;background:#fff;border:1px solid #EBE9E3;border-radius:14px;overflow:hidden;font-size:14px}
.cover th{text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);padding:14px 18px;background:#FAF9F6;font-weight:800}
.cover td{padding:14px 18px;border-top:1px solid #F0EEE9;vertical-align:top}
.cover td.v{text-align:right;white-space:nowrap;font-weight:700;color:#A93C0A}
.cover b{display:block;color:var(--ink)}
.cover small{display:block;margin-top:3px;color:var(--muted);font-size:12.5px;line-height:1.45}
.cover tr.sum td{background:#FAF9F6;font-weight:700;color:var(--ink)}
.cover tr.sum td.v{color:var(--ink)}
.excl{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.excl div{background:#fff;border:1px solid #EBE9E3;border-radius:14px;padding:16px 18px}
.excl b{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;color:var(--ink)}
.excl p{margin:7px 0 0 26px;font-size:13px;line-height:1.5;color:var(--muted)}
.rec{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:stretch}
.rec .why{grid-column:1 / -1;background:var(--orange-soft);border-radius:14px;padding:14px 18px;font-size:13.5px;line-height:1.55;color:#8E3208}
.steps-num{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:s}
.steps-num div{background:#fff;border:1px solid #EBE9E3;border-radius:14px;padding:20px}
.steps-num .k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.steps-num b{display:block;margin-top:6px;font-size:16.5px;color:var(--ink)}
.steps-num p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.disclaim{max-width:760px;margin:22px auto 0;text-align:center;font-size:12.5px;line-height:1.6;color:var(--dim)}
@media (max-width:860px){.plan-doc{grid-template-columns:1fr}.excl{grid-template-columns:1fr}.rec{grid-template-columns:1fr}.steps-num{grid-template-columns:1fr}}

/* ---------- izboljšave strani z načrtom ---------- */
.meter{margin-top:18px;max-width:420px}
.meter .track{display:flex;gap:5px}
.meter .seg{flex:1;height:9px;border-radius:999px;background:#E4E2DC}
.meter .seg.on{background:var(--orange)}
.meter .lbl{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px;color:var(--dim);font-weight:600}
.meter .lbl b{color:var(--ink)}
.mech{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.mech details{background:#fff;border:1px solid #F0D8C9;border-radius:14px;overflow:hidden}
.mech summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 18px;font-size:15.5px;font-weight:700;color:var(--ink)}
.mech summary::-webkit-details-marker{display:none}
.mech summary .n{flex:none;width:26px;height:26px;border-radius:14px;background:var(--orange-soft);color:#A93C0A;display:grid;place-items:center;font-size:13px;font-weight:800}
.mech summary svg{margin-left:auto;flex:none;transition:transform .2s ease}
.mech details[open] summary svg{transform:rotate(180deg)}
.mech p{margin:0 18px 16px 56px;font-size:14px;line-height:1.6;color:var(--muted)}
/* pas v polni oranzni #B4470F — kot napovedni pas na invisalign.vbo.si (29. 8. 2026) */
.band{background:#B4470F;border-radius:var(--radius-sec);padding:clamp(44px,6vw,78px) 0;margin-top:18px}
.band h2{color:#fff;text-align:center;font-size:clamp(25px,3.2vw,38px)}
.band .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--gap-head)}
.band .cards>div{background:#fff;border-radius:14px;padding:22px}
.band .cards b{display:block;font-size:17px;color:var(--ink);margin-bottom:8px}
.band .cards p{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.band .cards a{font-size:13.5px;font-weight:700;color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.prod{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(18px,2.6vw,32px);align-items:center}
.prod .shot{position:relative;border-radius:28px}
.prod .shot img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;border-radius:28px;box-shadow:var(--sh-soft)}
.prod .card{background:#fff;border:1px solid #EBE9E3;border-radius:28px;padding:clamp(20px,2.4vw,30px);box-shadow:var(--sh-soft)}
.prod .card h3{font-size:clamp(20px,2.4vw,26px);text-align:center}
.prod .card .stars{display:block;text-align:center;margin:8px 0 4px}
.prod .card .lead{text-align:center;font-size:13.5px;color:var(--muted);margin:0 0 16px}
.prod ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.prod li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#3E3F44}
.prod li svg{flex:none;margin-top:2px}
.prod li b{color:var(--ink)}
.prod .hl{margin-top:16px;background:#FDF3EC;border:1px solid #F5D9C6;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:#8E3208}
.prod .hl span{display:flex;gap:8px;align-items:flex-start}
.rev3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rev3>div{background:#fff;border:1px solid #EBE9E3;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px}
.rev3 .who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.rev3 .who b{color:var(--ink)}
.rev3 p{margin:0;font-size:14px;line-height:1.55;color:#3E3F44}
.rev3 .ver{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--green);font-weight:700;margin-top:auto}
@media (max-width:860px){.band .cards{grid-template-columns:1fr}.prod{grid-template-columns:1fr}.rev3{grid-template-columns:1fr}}

/* ---------- cenik: primerjava ---------- */
.phead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pbadge{background:var(--orange-soft);color:#A93C0A;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.plan.best .pbadge{background:linear-gradient(100deg,#E4560F,#F5813C);color:#fff}
.ptag{margin:-4px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.plan.best .ptag{color:#A9AAAE}
.valuebox{background:#F5F3EE;border:1px solid #EAE7E0;border-radius:14px;padding:14px}
.plan.best .valuebox{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.valuebox .vb-top{font-size:12.5px;color:var(--muted)}
.plan.best .valuebox .vb-top{color:#A9AAAE}
.valuebox .vb-top b{font-size:15px;color:var(--ink);font-weight:700}
.plan.best .valuebox .vb-top b{color:#fff}
.valuebox .vb-bar{height:8px;border-radius:999px;background:#E4E2DC;margin:10px 0 8px;overflow:hidden}
.plan.best .valuebox .vb-bar{background:rgba(255,255,255,.16)}
.valuebox .vb-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#F5813C,#CF4B0C)}
.valuebox .vb-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;color:var(--ink)}
.plan.best .valuebox .vb-row{color:#fff}
.valuebox .vb-row span:last-child{color:#A93C0A}
.plan.best .valuebox .vb-row span:last-child{color:#F5A379}
.fgroup{margin-top:16px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.plan.best .fgroup{color:#8A8B90}
.flist{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.flist li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:#3E3F44}
.plan.best .flist li{color:#E8E8EA}
.flist li.off{color:var(--dim)}
.plan.best .flist li.off{color:#7A7B80}
.flist li svg{flex:none;margin-top:2px}
.plan .cta-wrap{margin-top:auto;padding-top:16px}

/* ---------- zaupanje pod gumbom CTA ---------- */
.cta-badges{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:12px}
.cta-badges span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted)}
.cta-badges svg{flex:none}
.plan.best .cta-badges span{color:#A9AAAE}

/* ---------- zgodba pacienta (Pero Martič) ---------- */
.story{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,4vw,56px);align-items:center}
.story .ph{border-radius:28px;overflow:hidden;background:#EFE8E0;box-shadow:var(--sh-soft)}
.story .ph img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5}
.story .eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink);margin:0 0 14px}
.story blockquote{margin:0;font-size:clamp(26px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.14;color:var(--ink)}
.story blockquote em{font-style:normal;color:var(--orange)}
.story .who{margin-top:20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px}
.story .who b{font-weight:700;color:var(--ink)}
.story .who span{color:var(--muted)}
.story .role{margin-top:4px;font-size:13.5px;color:var(--muted)}
.story .cta{margin-top:26px}
.story .note{margin-top:12px;font-size:12.5px;color:var(--dim)}
@media (max-width:860px){.story{grid-template-columns:1fr}}

/* ---------- kaj se spremeni ---------- */
.change{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;background:#fff;border-radius:28px;overflow:hidden;border:1px solid #EBE9E3;box-shadow:var(--sh-soft);height:clamp(440px,46vw,520px)}
.change .panel-img{position:relative;height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,3vw,40px);color:#fff}
.change .panel-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 25%}
.change .panel-img .veil{position:absolute;inset:0;background:linear-gradient(160deg,rgba(142,50,8,.74),rgba(23,15,11,.40) 52%,rgba(23,15,11,.78))}
.change .panel-img .k{position:relative;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#F5A379;margin-bottom:12px}
.change .panel-img h3{position:relative;color:#fff;font-size:clamp(25px,3.2vw,38px);line-height:1.1}
.change .panel-img p{position:relative;margin:14px 0 0;font-size:14.5px;line-height:1.55;color:rgba(255,240,232,.86)}
.change .list{padding:clamp(14px,2vw,24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#DCD9D2 transparent}
.change .list-h{font-size:18px;margin:4px 4px 6px;letter-spacing:-.02em}
.change .list::-webkit-scrollbar{width:6px}
.change .list::-webkit-scrollbar-thumb{background:#DCD9D2;border-radius:999px}
.change details p,.change .chips2{animation:fadeIn .3s ease}
.change details{border-bottom:1px solid #F0EEE9}
.change details:last-child{border-bottom:0}
.change summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 4px;font-size:16px;font-weight:700;color:var(--ink)}
.change summary::-webkit-details-marker{display:none}
.change summary .ico{flex:none;color:var(--orange)}
.change summary .pm{margin-left:auto;flex:none;color:var(--dim);transition:transform .2s ease}
.change details[open] summary .pm{color:var(--orange);transform:rotate(180deg)}
.change details p{margin:0 4px 12px 36px;font-size:14px;line-height:1.6;color:var(--muted)}
.chips2{display:flex;flex-wrap:wrap;gap:8px;margin:0 4px 18px 36px}
.chips2 span{border:1px solid #E4E2DC;border-radius:999px;padding:6px 12px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#55565B}
@media (max-width:860px){.change{grid-template-columns:1fr;height:auto}.change .panel-img{height:300px}.change .list{overflow:visible}}

/* ---------- za koga ---------- */
.whofor{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,34px)}
/* 28. 8. 2026 (Max): brez crte nad karticami. Odstranjena je v vseh treh
   odsekih, ki si delijo .whofor (#razlogi, #zakoga, #kdo) — ce bi ostala
   samo v enem, bi izgledala kot napaka. */
.whofor>div{padding-top:clamp(18px,2.4vw,28px);text-align:center}
/* 14. 9. 2026: v #zakoga so krogi OBRAZI pacientov, v #razlogi in #kdo pa
   izdelki. Obraz pritegne pogled mocneje od izdelka, zato so obrazi tu vecji.
   ID v izbirniku premaga tudi polish.css (.lp-polished .whofor img, 120 px). */
#zakoga .whofor img{width:clamp(190px,22vw,260px);height:clamp(190px,22vw,260px)}
.whofor img{width:clamp(140px,15vw,180px);height:clamp(140px,15vw,180px);border-radius:50%;object-fit:cover;margin:0 auto clamp(16px,2vw,24px);display:block}
.whofor .k{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-ink)}
.whofor h3{margin-top:8px;font-size:clamp(21px,2.6vw,28px);font-weight:500}
.whofor p{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
@media (max-width:860px){.whofor{grid-template-columns:1fr}.whofor>div{text-align:left}.whofor img{margin-left:0}}

/* ---------- poudarjen pas »Dejstvo« in trije razlogi (28. 8.) ---------- */
.dejstvo{background:linear-gradient(115deg,#C24409 0%,#8E3207 55%,#5E2205 100%);
  padding:clamp(28px,3.8vw,46px) 0;text-align:center;position:relative;overflow:hidden}
/* rahla pika-mreza, isti motiv kot na temni ploscici v mrezi zaupanja */
.dejstvo::before{content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.5) 1px,transparent 1.6px);
  background-size:12px 12px}
.dejstvo .wrap{position:relative}
.dejstvo h2{color:#fff;font-size:clamp(20px,2.7vw,31px);line-height:1.16;
  letter-spacing:-.025em;text-wrap:balance}
.dejstvo p{max-width:50rem;margin:12px auto 0;font-size:clamp(13.5px,1.4vw,15.5px);
  line-height:1.6;color:#F7DDD0;text-wrap:pretty}

/* Trije razlogi uporabijo isto mrezo kot »Kdo lahko nosi Invisalign«,
   dodana je le velika stevilka v ozadju, kot v predlogi. */
.whofor.rz>div{position:relative}
.rz-st{position:absolute;top:-16px;right:-2px;z-index:0;pointer-events:none;
  font-size:clamp(58px,7.4vw,92px);font-weight:800;letter-spacing:-.05em;line-height:1;
  color:var(--orange-soft)}
@media (max-width:860px){.rz-st{right:auto;left:clamp(96px,26vw,150px);top:-8px}}
.whofor.rz img,.whofor.rz h3,.whofor.rz p,.whofor.rz .k{position:relative;z-index:1}

/* Pas po treh razlogih: meritev, ki je klub za retainerje nima. */
.rz-edge{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);
  gap:clamp(16px,2.6vw,32px);align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:clamp(16px,2.2vw,26px);box-shadow:var(--sh-soft)}
.rz-edge img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px;display:block}
.rz-edge .k{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.rz-edge h3{margin-top:8px;font-size:clamp(20px,2.4vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.18}
.rz-edge p{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:44ch}
@media (max-width:860px){.rz-edge{grid-template-columns:1fr}}

/* ---------- septembrski žreb ---------- */
.zreb-top{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.zreb-num{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,26px)}
.zreb-num img{height:clamp(56px,7vw,96px);width:auto}
.zreb-num b{font-size:clamp(48px,8.6vw,110px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--orange)}
.zreb-top h2{margin-top:14px;font-size:clamp(19px,2.3vw,26px)}
.zreb-top .sub{margin:0;font-size:13.5px;color:var(--muted)}
.zreb-pills{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;background:#fff;border:1px solid #EBE9E3;border-radius:999px;padding:8px 10px 8px 8px;margin-top:22px;box-shadow:var(--sh-soft)}
.zreb-pills .p1{background:var(--orange);color:#fff;border-radius:999px;padding:8px 14px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.zreb-pills .p2{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4A4B50}
.zreb-pills .p3{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);padding-right:8px}
.zreb-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,52px);align-items:center;margin-top:var(--gap-head)}
.zreb-grid .eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink);margin:0 0 14px}
.zreb-grid h3{font-size:clamp(26px,3.6vw,42px);line-height:1.1}
.zreb-grid p{margin:16px 0 0;font-size:15px;line-height:1.6;color:var(--muted);max-width:34em}
.zreb-grid .kolaz{border-radius:14px;overflow:hidden;box-shadow:var(--sh-soft)}
.zreb-grid .kolaz img{width:100%;display:block}
.zreb-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.zreb-facts div{background:#fff;border:1px solid #EBE9E3;border-radius:14px;padding:14px 16px}
.zreb-facts b{display:block;font-size:17px;color:var(--ink)}
.zreb-facts span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
@media (max-width:860px){.zreb-grid{grid-template-columns:1fr}.zreb-facts{grid-template-columns:1fr}}

/* ---------- gibanje ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(20px);transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
  .rv.in{opacity:1;transform:none}
  .rv-1{transition-delay:.07s}.rv-2{transition-delay:.14s}.rv-3{transition-delay:.21s}.rv-4{transition-delay:.28s}.rv-5{transition-delay:.35s}
  .step .tile img,.prod .shot img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
  .step:hover .tile img{transform:scale(1.04) translateY(-2px)}
  .prod .shot:hover img{transform:scale(1.02)}
  .plan{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}
  .plan:hover{transform:translateY(-4px)}
  .plan.best:hover{transform:scale(1.03) translateY(-4px)}
  .rc,.rc-wide .ph{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
  .rc:hover{transform:translateY(-5px)}
  .btn svg{transition:transform .25s ease}
  .btn:hover svg{transform:translateX(3px)}
  .marquee:hover .track{animation-play-state:paused}
}
.gauge .arc{stroke-dasharray:270 270;stroke-dashoffset:270;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.3,1) .1s}
.gauge.in .arc{stroke-dashoffset:11}
.meter .seg{transform:scaleX(.08);transform-origin:left center;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.meter.in .seg{transform:scaleX(1)}
.meter.in .seg:nth-child(2){transition-delay:.08s}.meter.in .seg:nth-child(3){transition-delay:.16s}
.meter.in .seg:nth-child(4){transition-delay:.24s}.meter.in .seg:nth-child(5){transition-delay:.32s}
.valuebox .vb-bar i{transform:scaleX(0);transform-origin:left center;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.valuebox.in .vb-bar i{transform:scaleX(1)}
.kviz-bar i{transition:width .45s cubic-bezier(.2,.7,.3,1)}
.prail.drag{cursor:grabbing;scroll-snap-type:none}
.prail.drag *{pointer-events:none}

/* ================= ponovitev: koraki z animiranimi maketami ================= */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.s3{background:#fff;border:1px solid #EBE9E3;border-radius:28px;padding:14px 14px 24px;box-shadow:var(--sh-soft)}
.s3-art{position:relative;height:246px;border-radius:14px;overflow:hidden;
  background:linear-gradient(165deg,#FFB27C 0%,#F5813C 45%,#E4560F 100%)}
.s3-art::before{content:'';position:absolute;inset:0;opacity:.35;
  background-image:radial-gradient(circle,rgba(255,255,255,.55) 1px,transparent 1.6px);background-size:11px 11px;
  animation:s3dots 9s linear infinite}
@keyframes s3dots{to{background-position:11px 11px}}
.s3-art::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92))}
.s3-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}

/* korak 1 */
.s3-pair{display:flex;align-items:center;gap:14px;animation:s3float 5s ease-in-out infinite}
@keyframes s3float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.s3-tile{width:82px;height:82px;border-radius:28px;display:grid;place-items:center;box-shadow:var(--sh-soft)}
.s3-tile.o{background:linear-gradient(160deg,#FFAE7A,#E4560F);border:3px solid rgba(255,255,255,.85)}
.s3-tile.d{background:linear-gradient(160deg,#3A3B3E,#141416);border:3px solid rgba(255,255,255,.85)}
.s3-lbl{display:flex;gap:14px;font-size:11.5px;font-weight:700;color:#7A3A18}
.s3-lbl span{width:82px;text-align:center}
.s3-scan{position:absolute;left:12%;right:12%;top:22%;height:2px;background:linear-gradient(90deg,transparent,#fff,transparent);
  box-shadow:0 0 12px rgba(255,255,255,.9);animation:s3scan 2.6s ease-in-out infinite}
@keyframes s3scan{0%,100%{transform:translateY(0);opacity:.15}50%{transform:translateY(74px);opacity:1}}

/* korak 2 */
.s3-ui{width:78%;background:#fff;border-radius:14px 14px 0 0;box-shadow:var(--sh-soft);overflow:hidden}
.s3-ui .h{padding:9px 12px;font-size:11.5px;font-weight:700;color:var(--ink);border-bottom:1px solid #EFEDE8}
.s3-ui .row{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;font-size:10.5px;color:var(--muted);border-bottom:1px solid #F5F3EF}
.s3-ui .row b{color:var(--ink)}
.s3-slip{position:absolute;z-index:3;right:8%;bottom:26%;width:62%;background:#fff;border-radius:14px;padding:10px 12px;
  box-shadow:var(--sh-soft);transform:rotate(-5deg);animation:s3slip 5.5s ease-in-out infinite}
@keyframes s3slip{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-9px)}}
.s3-slip .t{font-size:10px;color:var(--muted)}
.s3-slip .v{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}

/* korak 3 */
.s3-big{font-size:34px;font-weight:800;letter-spacing:-.03em;color:rgba(255,255,255,.92);text-shadow:0 4px 18px rgba(0,0,0,.18)}
.s3-card{width:72%;background:#fff;border-radius:14px;padding:10px;box-shadow:var(--sh-soft)}
.s3-card .c{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted);margin-bottom:8px}
.s3-ok{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:14px;
  background:linear-gradient(180deg,#4A8167,#3B6B52);color:#fff;font-size:13px;font-weight:800;letter-spacing:.06em;
  animation:s3ok 4s ease-in-out infinite}
@keyframes s3ok{0%,64%,100%{transform:scale(1)}72%{transform:scale(1.045)}}
.s3-note{margin-top:8px;height:26px;border-radius:14px;background:#F1EFEA;display:grid;place-items:center;font-size:10.5px;color:var(--muted)}

/* podnožje kartice */
.s3-div{display:flex;align-items:center;gap:10px;margin:18px 0 0}
.s3-div i{flex:1;height:1px;background:#E7E4DE}
.s3-div .tick{display:flex;gap:3px}
.s3-div .tick s{width:2px;height:9px;background:#E0DCD5;text-decoration:none;border-radius:2px}
/* 28. 8. 2026 (Max): ena ploscica za vse oznake — »1. korak«, »Takoj«,
   »7. dan«, »vrednost 200 €«, »−120 €«. Breskovo ozadje in oranzno
   besedilo, brez preliva in brez sence, da je znamka enotna. */
.s3-pill{background:var(--orange-soft);color:#A93C0A;border-radius:14px;padding:6px 12px;font-size:12.5px;font-weight:700}
.s3 h3{margin-top:14px;text-align:center;font-size:19px;font-weight:600}
.s3 p{margin:6px 0 0;text-align:center;font-size:13.5px;line-height:1.5;color:var(--muted)}
@media (max-width:900px){.steps3{grid-template-columns:1fr}}

/* ================= ponovitev: mreža zaupanja ================= */
.bento2{display:grid;grid-template-columns:1.55fr 1fr;grid-auto-rows:auto;gap:16px}
.b2{border-radius:28px;border:1px solid #E4E2DC;background:linear-gradient(180deg,#F7F5F1,#fff 72%);padding:22px;position:relative;overflow:hidden}
.b2 h3{font-size:19px;font-weight:600}
.b2 p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted);max-width:34em}
.b2-art{position:relative;height:210px;display:grid;place-items:center}

/* ---- »Sveze prileganje vsako leto«: fotografija (28. 8. 2026) --------
   Druga razlicica. Prva je bila zaga (graf prileganja po letih) — Max jo je
   zavrnil. Zdaj je tu prava fotografija `opornica-nova-obrabljena.webp`:
   levo nov komplet, desno komplet po letu nosenja. Fotografija pove isto kot
   besedilo in ne potrebuje nobene izmisljene stevilke.
   Odstranjeni slogi: .b2-art-fit, .b2-fit-top, .b2-fit, .b2-fit-years. */
/* POZOR: .b2-art je visok 210-230 px, kartica pa je v sirokem stolpcu ~1230 px
   (razmerje 5,3:1). `object-fit:cover` je zato opornici prerezal na pol.
   Resitev: posebej obrezana razlicica `-pas.webp` (1168x555, ~2,1:1) in
   `contain`, da je fotografija VEDNO cela. Sirino ji doloci visina skatle,
   poravnana je na sredino — enako kot prej stari lok (width:330px). */
.b2-art-foto{padding:0;overflow:visible;display:grid;place-items:center}
/* Ovoj se skrci na sirino fotografije, zato sta oznaki na NJEJ in ne na robu
   siroke skatle. */
.b2-foto{position:relative;display:block;height:100%;max-width:100%;
  aspect-ratio:1600/760;border-radius:14px;overflow:hidden}
.b2-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Oznaki sta beli ploscici na fotografiji, tako kot .kmini in .b2-chip. */
.b2-ozn{position:absolute;bottom:12px;z-index:2;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:14px;padding:5px 10px;font-size:11px;font-weight:700;color:var(--ink);
  box-shadow:var(--sh-soft);white-space:nowrap}
.b2-ozn.l{left:12px}
.b2-ozn.r{right:12px}
@media (max-width:560px){
  .b2-ozn{font-size:10px;padding:4px 8px;bottom:8px}
  .b2-ozn.l{left:8px}
  .b2-ozn.r{right:8px}
}

/* ---- »Brez vezave«: scit je zdaj v .b2-art nad naslovom -------------- */
/* Napis v ozadju je bil prej pripet na DNO kartice, za besedilom. Zdaj je
   grafika zgoraj, zato je napis vodni znak celotne grafike: poravnan na
   sredino, svetlejsi in za scitom (z-index 0). Prejsnja postavitev
   (bottom) je scit in ploscico »14 dni« rezala na pol. */
.b2-art-scit{overflow:hidden}
.b2-art-scit .b2-ghost{
  top:50%;bottom:auto;transform:translateY(-50%);
  z-index:0;opacity:1;color:#F2EFEA;
  font-size:clamp(24px,3.1vw,40px);
}
.b2-art-scit .b2-shield{margin:0 auto}
.b2-art-scit .b2-chip{margin:14px auto 0}
.b2.tall{grid-row:span 3;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.b2-check{width:64px;height:64px;border-radius:14px;background:linear-gradient(160deg,#7CC79B,#4E9E72);display:grid;place-items:center;
  box-shadow:var(--sh-soft);animation:s3ok 4s ease-in-out infinite;margin:0 auto}
.b2-foot{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;color:var(--muted);border-top:1px solid #E7E4DE;padding-top:14px}
.b2-foot b{color:var(--ink)}
.b2-num{font-size:clamp(46px,6vw,72px);font-weight:800;letter-spacing:-.04em;color:#4A4B50;text-align:center;line-height:1}
.b2-ghost{position:absolute;left:0;right:0;bottom:-14px;opacity:.75;text-align:center;font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.03em;
  color:#EDEAE4;line-height:.96;pointer-events:none;user-select:none}
.b2-shield{position:relative;z-index:2;width:96px;height:96px;border-radius:28px;background:linear-gradient(160deg,#FFAE7A,#E4560F);
  display:grid;place-items:center;box-shadow:var(--sh-btn-strong);margin:26px auto 0;animation:s3float 5s ease-in-out infinite}
.b2-rays{position:absolute;inset:-26px;z-index:1}
.b2-rays i{position:absolute;left:50%;top:50%;width:3px;height:16px;border-radius:2px;background:#F5A379;transform-origin:50% 62px;opacity:.75;animation:b2ray 3.4s ease-in-out infinite}
@keyframes b2ray{0%,100%{opacity:.25;height:12px}50%{opacity:.9;height:20px}}
.b2-chip{position:relative;z-index:3;display:block;width:max-content;margin:14px auto 34px;background:#fff;border:1px solid #E4E2DC;border-radius:14px;padding:5px 10px;font-size:11px;font-weight:700;box-shadow:var(--sh-soft)}
.b2.dark{background:linear-gradient(150deg,#B54009,#5E2205 78%);border-color:transparent;color:#fff;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px}
.b2.dark::before{content:'';position:absolute;inset:0;opacity:.30;background-image:radial-gradient(circle,rgba(255,255,255,.5) 1px,transparent 1.6px);background-size:12px 12px;animation:s3dots 9s linear infinite}
.b2.dark h3{color:#fff;position:relative}
.b2.dark p{color:#F3D9CD;position:relative}
.b2-drop{position:absolute;left:6%;right:6%;top:12%;z-index:2;background:#fff;border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-soft)}
.b2-drop .load{flex:1;font-size:13px;color:var(--dim)}
.b2-drop .load i{display:block;height:7px;border-radius:999px;margin-top:7px;background:linear-gradient(90deg,#EDEBE5 0%,#F5813C 50%,#EDEBE5 100%);background-size:220% 100%;animation:b2load 1.8s linear infinite}
@keyframes b2load{to{background-position:-220% 0}}
.b2-thumb{position:absolute;left:10%;top:44%;z-index:3;width:96px;border-radius:14px;overflow:hidden;box-shadow:var(--sh-soft);animation:b2drag 5.5s cubic-bezier(.5,0,.3,1) infinite}
.b2-thumb img{width:100%;height:64px;object-fit:cover;display:block}
@keyframes b2drag{0%,10%{transform:translate(0,0) scale(1);opacity:1}55%,72%{transform:translate(34px,-88px) scale(.86);opacity:1}84%{transform:translate(34px,-88px) scale(.8);opacity:0}85%,100%{transform:translate(0,0) scale(1);opacity:1}}
.b2-hand{position:absolute;left:calc(10% + 76px);top:calc(44% + 42px);z-index:4;animation:b2drag 5.5s cubic-bezier(.5,0,.3,1) infinite}
/* Oglasni pas v mrezi zaupanja (28. 8.). Temna podlaga iz iste druzine kot
   znacke in vrhnji pas, oranzen sij zgoraj, spodaj stiri bele kartice.
   Razmik med logotipom, naslovom in seznamom dela space-between iz .b2.tall. */
.b2.banner{background:linear-gradient(168deg,#3B2A20 0%,#241A14 44%,#15100C 100%);
  border-color:transparent;color:#fff;text-align:center;
  padding:clamp(22px,2.3vw,30px);gap:clamp(18px,2.2vw,26px)}
.b2.banner::before{content:"";position:absolute;left:50%;top:-22%;width:130%;aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(207,75,12,.40),rgba(207,75,12,0) 62%)}
.bn-logo{position:relative;width:clamp(120px,11vw,150px);height:auto;margin:2px auto 0}
.bn-head{position:relative}
.bn-head span{display:block;font-size:clamp(15px,1.5vw,19px);font-weight:500;
  letter-spacing:-.01em;color:#EFE4DC}
.bn-head b{display:block;margin-top:5px;font-size:clamp(28px,2.8vw,36px);font-weight:800;
  line-height:1.03;letter-spacing:-.035em;color:#fff}
.bn-list{position:relative;list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:10px}
.bn-list li{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;
  border-radius:14px;padding:13px 15px;box-shadow:var(--sh-soft)}
.bn-list svg{flex:none;color:var(--ink)}
.bn-list span{font-size:11.5px;font-weight:800;line-height:1.32;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink)}
@media (max-width:900px){.bento2{grid-template-columns:1fr}.b2.tall{grid-row:auto}}

nav a.on{color:var(--orange);font-weight:700}
nav a.on::after{content:'';display:block;height:2px;border-radius:2px;background:var(--orange);margin-top:3px}

/* ---------- ugodnosti v slogu korakov ---------- */
.gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gifts .s3-art{height:200px}
.gifts .s3-art::before{animation:none}
.gifts .g-rows,.gifts .g-prod{animation:none}
/* cista zelena, brez preliva (Max, 28. 8.) */
.gifts .s3-pill.free{background:#41835F;color:#fff}
/* Sedma kartica (zlata vstopnica, 2. 9. 2026) sama v tretji vrsti: na treh stolpcih
   stoji v sredini, na dveh čez oba stolpca z ozjo širino, na enem kot vse druge. */
.gifts .s3:nth-child(7):last-child{grid-column:2}
.g-vstopnica{max-width:86%;max-height:130px}
@media (max-width:980px){.gifts .s3:nth-child(7):last-child{grid-column:1/-1;width:calc(50% - 8px);margin:0 auto}}
@media (max-width:680px){.gifts .s3:nth-child(7):last-child{grid-column:auto;width:auto;margin:0}}
.g-prod{max-height:140px;max-width:78%;width:auto;object-fit:contain;filter:drop-shadow(0 14px 24px rgba(0,0,0,.28));animation:s3float 5.5s ease-in-out infinite}
/* iTero: 1. 9. 2026 slika je PROSOJNA (izrez aparata), zato ni več bele plošče.
   Prej je bil `background:#fff` + `padding` + `border-radius` bela ploščica, v njej
   pa je `object-fit:cover` na 96 px REZAL aparat na nerazpoznaven pas. Zdaj velja
   `contain` in cel aparat stoji na oranžnem prelivu, kot knjiga v [.g-knjiga].
   `position:relative` ostane samo zaradi .s3-scan, ki ga tu skrijemo (glej spodaj). */
.g-screen{width:auto;position:relative;display:flex;align-items:center;justify-content:center}
/* `max-width:100%` NAMENOMA: pri razmerju 530/640 je aparat pri 180 px visok
   le 149 px širok, zato širina nikoli ne omejuje — meja je VIŠINA in aparat je
   enako visok kot knjiga v sosednji kartici. Z manjšim odstotkom (82 %) je bil
   izmerjeno 122×148 px, torej nižji od knjige in kartice so bile neenake. */
.g-screen img{width:auto;max-width:100%;max-height:180px;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 16px 26px rgba(20,10,4,.32))}
/* Črta skeniranja je posnemala sken na BELEM zaslončku. Brez ploščice bi bila samo
   bela svetla proga čez prosojen aparat, zato je tu skrita. Drugi .s3-scan (kartica
   s ploščicama »Vi / VBO«) ostane — zato je pravilo zoženo na .g-screen. */
.g-screen .s3-scan{display:none}
.g-rows{width:76%;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--sh-soft);animation:s3float 6s ease-in-out infinite}
.g-rows .r{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted);padding:5px 0}
.g-rows .r b{color:var(--ink)}
.g-rows .r s{color:var(--dim)}
.g-rows .r.hi b{color:#A93C0A}
.g-rows .tot{margin-top:6px;padding-top:8px;border-top:1px dashed #E4E2DC;display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;color:var(--ink)}
.g-chip{position:absolute;right:10px;top:10px;background:linear-gradient(180deg,#CF4B0C,#A83C08);color:#fff;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800;box-shadow:var(--sh-btn);animation:s3ok 4s ease-in-out infinite}
@media (max-width:980px){.gifts{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.gifts{grid-template-columns:1fr}}

/* ---------- cenik: ploščica v slogu korakov ---------- */
.plan .s3-art{height:172px;border-radius:14px;margin:0 0 16px}
.plan .s3-art::before{animation:none}
.plan .s3-art::after{height:38%}
.p-mock{width:82%;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--sh-soft);position:relative}
.p-mock .r{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted);padding:4px 0}
.p-mock .r b{color:var(--ink)}
.p-mock .r s{color:var(--dim)}
.p-mock .big{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:2px 0 4px}
.p-mock .big b{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.p-mock .big s{font-size:14px;color:var(--dim)}
.p-chip{position:absolute;right:-8px;top:-10px;border-radius:999px;padding:5px 10px;font-size:10.5px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#CF4B0C,#A83C08);box-shadow:var(--sh-btn)}
.p-chip.green{background:linear-gradient(180deg,#4A8167,#3B6B52);box-shadow:var(--sh-soft)}
.p-dots{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:8px}
.p-dots i{width:12px;height:12px;border-radius:4px;background:#F0DCCF}
.p-dots i.on{background:linear-gradient(180deg,#F5813C,#CF4B0C)}
.p-prod{max-height:112px;max-width:78%;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.28))}

/* ---------- animacija harmonik ---------- */
html{interpolate-size:allow-keywords}
details.q, .change details, .mech details, .faq-box details{interpolate-size:allow-keywords}
details.q::details-content, .change details::details-content, .mech details::details-content,
.faq-box details::details-content{
  height:0;overflow:hidden;opacity:0;
  transition:height .34s cubic-bezier(.2,.7,.3,1),opacity .26s ease,content-visibility .34s allow-discrete}
details.q[open]::details-content, .change details[open]::details-content, .mech details[open]::details-content,
.faq-box details[open]::details-content{height:auto;opacity:1}
@supports not selector(details::details-content){
  details.q[open] p,.change details[open] p,.mech details[open] p,.faq-box details[open] p{
    animation:faqIn .32s cubic-bezier(.2,.7,.3,1)}
  .change details[open] .chips2{animation:faqIn .32s cubic-bezier(.2,.7,.3,1) .04s both}
}
/* besedilo odgovora se rahlo dvigne, ko se vrstica odpre */
details.q[open] > p, .faq-box details[open] > p{animation:faqIn .34s cubic-bezier(.2,.7,.3,1) .04s both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  details.q::details-content, .change details::details-content, .mech details::details-content,
  .faq-box details::details-content{transition:none}
  details.q[open] > p, .faq-box details[open] > p{animation:none}
}
details.q summary{transition:color .2s ease}
details.q summary:hover{color:var(--orange)}
details.q[open] summary{color:var(--orange)}

/* ================================================================
   OBLIKOVNI DVIG — bliže referenčnim primerom
   1. globlje kartice (obroč + mehka senca)
   2. ploščice z notranjim odsevom in makete, ki segajo čez rob
   3. tesnejša tipografija naslovov, ožji podnaslov
   4. več zraka med razdelki
   5. gumbi z notranjim odsevom in barvno senco
   ================================================================ */
:root{
  --card-ring:0 0 0 1px #EFEDE7, 0 1px 2px rgba(27,28,30,.04), var(--sh-soft);
  --card-ring-hover:0 0 0 1px #E7E4DD, 0 2px 4px rgba(27,28,30,.05), var(--sh-soft);
}

/* 1 — kartice */
.s3,.plan,.b2,.ben,.rez-card,.rev3>div,.step,.kviz-card,.faq-panel,.vesna,.polica,.change,.story .ph,.prod .card{
  border-color:transparent;
  box-shadow:var(--card-ring);
}
.s3:hover,.plan:hover,.rev3>div:hover{box-shadow:var(--card-ring-hover)}
.plan.best{box-shadow:0 0 0 1px rgba(255,255,255,.06), var(--sh-soft)}
.b2.dark{box-shadow:0 0 0 1px rgba(255,255,255,.05), var(--sh-btn-strong)}

/* 2 — ploščice */
.s3-art{box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -30px 44px -30px rgba(255,255,255,.9)}
.s3-art::after{height:44%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96))}
/* .g-screen NI več na tem seznamu (1. 9. 2026): ni bela ploščica, ampak prosojen
   ovoj, in vsebovana senca bi risala pravokotnik okoli ničesar. */
.s3-ui,.s3-card,.g-rows,.p-mock{box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--sh-soft)}
.steps3 .s3-ui{transform:translateY(6px)}

/* 3 — tipografija */
h2{letter-spacing:-.02em}
.head h2{font-size:clamp(28px,3.8vw,44px);line-height:1.05}
.head p{max-width:44ch;font-size:15px;line-height:1.65;color:var(--muted)}
.s3 h3,.ben h3,.b2 h3{letter-spacing:-.02em}
.s3 p{font-size:14px;color:var(--muted)}
.badge{letter-spacing:.005em}

/* 4 — več zraka */
section.panel,section.soft,section.plain{padding:clamp(56px,7vw,96px) 0}
.band{padding:clamp(56px,7vw,96px) 0}
.wrap{max-width:1160px}

/* 5 — gumbi */
.btn-orange{box-shadow:var(--sh-btn)}
.btn-orange:hover{background:var(--cta-hover);box-shadow:var(--sh-btn-strong)}
.btn-dark{box-shadow:inset 0 1px 0 rgba(255,255,255,.10), var(--sh-soft)}
.btn-ghost{box-shadow:0 0 0 1px #E7E4DD, var(--sh-soft);border-color:transparent}

/* 6 — pas pod naslovom razdelka diha enako kot referenca */
.chips span{box-shadow:0 0 0 1px #EAE7E0;border-color:transparent}

/* dodatek: bento kartice bolj zračne (kot referenca) */
.b2{padding:26px}
.b2-art{height:230px}
.b2 h3{font-size:20px}
.b2 p{font-size:14px;line-height:1.6}
.s3 h3{font-size:19.5px}
.s3 p{line-height:1.55}

/* ================= cenik: kartica z ločenim cenovnim blokom ================= */
.plans{align-items:start}
.plan{padding:14px;gap:0}
.plan.best{padding:14px;transform:none}
.plan-head{background:linear-gradient(180deg,#FBF7F3,#F7F2EC);border-radius:14px;padding:20px}
.plan.best .plan-head{background:rgba(255,255,255,.07)}
.plan-head .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan-name{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:700;color:var(--ink)}
.plan.best .plan-name{color:#fff}
.plan-name svg{flex:none;color:var(--orange)}
.plan-chip{background:#fff;box-shadow:0 0 0 1px #E7E4DD;border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:600;color:#55565B;white-space:nowrap}
.plan.best .plan-chip{background:linear-gradient(100deg,#E4560F,#F5813C);box-shadow:none;color:#fff;font-weight:700}
.plan-price{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:18px;flex-wrap:wrap}
.plan-price .now{display:flex;align-items:baseline;gap:7px}
.plan-price b{font-size:clamp(30px,3.4vw,38px);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.plan.best .plan-price b{color:#fff}
.plan-price .per{font-size:14.5px;font-weight:600;color:var(--muted)}
.plan.best .plan-price .per{color:#A9AAAE}
.plan-price s{font-size:17px;color:var(--dim)}
.plan-head .btn{width:100%;margin-top:16px}
.plan-head .fine{margin-top:10px;text-align:center}
.plan-body{padding:20px 8px 8px}
.plan-sub{font-size:13px;line-height:1.5;color:var(--muted);margin:10px 0 0}
.plan.best .plan-sub{color:#A9AAAE}
.flist2{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.flist2 li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:#3E3F44}
.plan.best .flist2 li{color:#E8E8EA}
.flist2 li.off{color:var(--dim)}
.plan.best .flist2 li.off{color:#7A7B80}
.flist2 .ic{width:21px;height:21px;border-radius:50%;flex:none;display:grid;place-items:center;margin-top:1px}
.flist2 .ic.ok{background:#E9F5EE}
.flist2 .ic.no{background:#FBECEC}
.plan.best .flist2 .ic.ok{background:rgba(124,199,155,.18)}
.plan.best .flist2 .ic.no{background:rgba(197,63,64,.20)}
.plan-div{display:flex;align-items:center;gap:12px;margin:22px 0 16px;font-size:12.5px;font-weight:600;color:var(--dim)}
.plan-div i{flex:1;height:1px;background:#EDEAE4}
.plan.best .plan-div i{background:rgba(255,255,255,.12)}

/* ---------- poenotenje: pisava in velikosti naslovov ---------- */
button,input,select,textarea{font-family:inherit}
.whofor h3{font-weight:500}
.zreb-grid h3,.change .panel-img h3{font-size:clamp(26px,3.4vw,38px)}
.prod .card h3{font-size:clamp(20px,2.2vw,24px)}
.fine,.plans-note,.hero-note,.disclaim,.kviz-note,.trusted{font-size:12.5px}

/* ================= cenik: CRO nadgradnja ================= */
.anchor-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:920px;margin:0 auto clamp(22px,3vw,34px)}
.anchor-bar div{background:#fff;border-radius:14px;padding:14px 18px;text-align:center;box-shadow:var(--card-ring)}
.anchor-bar .lbl{font-size:12px;color:var(--muted);line-height:1.4}
.anchor-bar b{display:block;margin-top:6px;font-size:clamp(18px,2.2vw,24px);font-weight:800;letter-spacing:-.03em;color:#C53F40}
.anchor-bar .win b{color:var(--orange)}
.anchor-bar .win{box-shadow:0 0 0 2px var(--orange), var(--sh-btn-strong)}
.shared{max-width:920px;margin:0 auto clamp(20px,2.6vw,30px);background:#fff;border-radius:14px;padding:16px 20px;box-shadow:var(--card-ring)}
.shared .t{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;text-align:center}
.shared ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px}
.shared li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#3E3F44}
.stack-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.stack-list li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:#E8E8EA}
.stack-list li b{color:#fff;font-weight:700;white-space:nowrap}
.stack-sum{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.16);display:flex;justify-content:space-between;font-size:13.5px;color:#A9AAAE}
.stack-sum s{font-size:16px}
.stack-save{margin-top:10px;background:rgba(207,75,12,.22);border:1px solid rgba(245,129,60,.45);border-radius:14px;padding:9px 12px;text-align:center;font-size:13px;font-weight:800;color:#FFB98C}
.decoy{margin-top:12px;background:#FBECEC;border-radius:14px;padding:10px 12px;font-size:12.5px;font-weight:700;color:#A33436;display:flex;gap:8px;align-items:flex-start}
.rok{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;max-width:920px;margin:0 auto clamp(20px,2.6vw,30px);background:var(--dark);color:#fff;border-radius:14px;padding:14px 20px}
.rok .k{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-2)}
.rok .t{font-size:14px;color:#E8E8EA}
.rok .cd{display:flex;gap:8px}
.rok .cd span{background:rgba(255,255,255,.08);border-radius:14px;padding:6px 10px;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.rok .cd small{display:block;font-size:9.5px;font-weight:600;color:#A9AAAE;letter-spacing:.06em;text-transform:uppercase}
.po-nakupu{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:920px;margin:clamp(22px,3vw,34px) auto 0}
.po-nakupu div{display:flex;gap:11px;align-items:flex-start;background:#fff;border-radius:14px;padding:14px 16px;box-shadow:var(--card-ring)}
.po-nakupu .n{flex:none;width:24px;height:24px;border-radius:14px;background:var(--orange-soft);color:#A93C0A;font-size:12px;font-weight:800;display:grid;place-items:center}
.po-nakupu b{display:block;font-size:14px;color:var(--ink)}
.po-nakupu span{font-size:12.5px;color:var(--muted)}
.proof-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.plan.best .proof-row{color:#A9AAAE}
@media (max-width:860px){.anchor-bar,.po-nakupu{grid-template-columns:1fr}}

/* ---------- mreža zaupanja: temna kartica čez celo širino, visoka kartica nižja ---------- */
.b2.tall{grid-row:span 2}
.b2.tall .b2-art{height:150px}
.b2.tall .b2-num{margin-top:34px!important}
.b2.dark{grid-column:1 / -1;min-height:264px;justify-content:flex-end}
.b2.dark h3,.b2.dark p{max-width:46%}
.b2.dark .b2-drop{left:52%;right:5%;top:26%}
.b2.dark .b2-thumb{left:54%;top:54%}
.b2.dark .b2-hand{left:calc(54% + 76px);top:calc(54% + 42px)}
@media (max-width:900px){
  .b2.dark{grid-column:auto;min-height:300px}
  .b2.dark h3,.b2.dark p{max-width:none}
  .b2.dark .b2-drop{left:6%;right:6%;top:12%}
  .b2.dark .b2-thumb{left:10%;top:44%}
  .b2.dark .b2-hand{left:calc(10% + 76px);top:calc(44% + 42px)}
}

/* ================= cenik: lepši kontekstni blok ================= */
.kontekst{max-width:980px;margin:0 auto clamp(18px,2.4vw,26px);background:#fff;border-radius:28px;padding:8px;box-shadow:var(--card-ring);overflow:hidden}
.k-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.k-grid>div{border-radius:14px;padding:20px 18px;text-align:center;background:#FAF8F5}
.k-grid .k-lbl{display:block;font-size:12px;line-height:1.4;color:var(--muted)}
.k-grid b{display:block;margin-top:8px;font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.03em;color:#8A5D55}
.k-grid b small{font-size:13px;font-weight:600;color:var(--dim);margin-left:5px;letter-spacing:0}
.k-grid .k-sub{display:block;margin-top:5px;font-size:11.5px;color:var(--dim)}
.k-grid .win{background:linear-gradient(180deg,#FFF3EC,#FDE4D8)}
.k-grid .win b{color:var(--orange)}
.k-grid .win .k-lbl{color:#A93C0A;font-weight:600}
.k-grid .win .k-sub{color:#A93C0A;opacity:.75}
.k-foot{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:14px 18px 10px}
.k-rok{background:var(--dark);color:#fff;border-radius:999px;padding:6px 13px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.k-txt{font-size:13px;color:var(--muted)}
.k-foot .cd{display:flex;gap:6px}
.k-foot .cd span{background:#F4F1EC;border-radius:14px;padding:5px 9px;font-size:14px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;text-align:center;line-height:1.1}
.k-foot .cd small{display:block;font-size:9px;font-weight:700;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.k-chips{max-width:980px;margin:0 auto clamp(24px,3vw,34px)}
.k-chips span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#3E3F44}
@media (max-width:860px){.k-grid{grid-template-columns:1fr}}

/* ================= cenik: dodelava kartic ================= */
.plans{gap:20px}
.plan{padding:16px}
.plan-head{padding:22px;border-radius:14px}
.plan.best .plan-head{background:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.plan-name{font-size:17px}
.plan-price{margin-top:16px}
.plan-price b{font-size:clamp(32px,3.6vw,40px)}
.plan-body{padding:22px 10px 10px}
.flist2{gap:13px}

/* sklad vrednosti v poudarjeni kartici */
.plan.best .stack-list{background:rgba(255,255,255,.05);border-radius:14px;padding:14px 16px;margin-top:16px}
.stack-list li{font-size:13.5px}
.stack-sum{margin-top:14px;padding-top:0;border:0;align-items:baseline}
.stack-sum s{color:#8A8B90}
.stack-save{background:linear-gradient(100deg,rgba(228,86,15,.28),rgba(245,129,60,.20));border-color:rgba(245,129,60,.38);
  border-radius:999px;padding:8px 14px;font-size:12.5px}

/* mehkejša opozorilna škatla */
.decoy{background:#FDF1EC;border-radius:14px;padding:12px 14px;color:#A33436;font-weight:600;gap:9px;
  box-shadow:inset 0 0 0 1px #F6DDD2}
.decoy .ic{width:19px;height:19px;background:#F8DCD5}

/* dokaz pod gumbom */
.proof-row{gap:9px;font-size:12px}
.proof-row .stack img{width:26px;height:26px}
.plan.best{padding:16px}

/* referenčni ritem: siva stran, beli zaobljeni paneli */
section.plain{background:transparent}
section.panel+section.plain,section.plain+section.panel{margin-top:18px}

/* ---------- koraki po nakupu (isti slog kot »Vzdrževanje v treh korakih«) ---------- */
.pokupu{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:clamp(28px,3.6vw,44px) auto 0}
/* V lastnem razdelku #koraki zgornji rob prevzame ze odmik razdelka. */
#koraki .pokupu{margin-top:0}
.pokupu .s3-art{height:186px}
.pokupu .s3-art::before{animation:none}
.pokupu .p-mock,.pokupu .g-prod{animation:none}
@media (max-width:900px){.pokupu{grid-template-columns:1fr}}

/* ---------- bel blok od zgodbe Pera do noge ---------- */
section.bel{background:#fff;border-radius:0;margin-top:0;padding:clamp(56px,7vw,96px) 0;position:relative;z-index:5}
#pero{border-radius:var(--radius-sec) var(--radius-sec) 0 0;margin-top:18px}
#pero+.bel,#pacienti+.bel,#ekipa+.bel{margin-top:0}
#ekipa{padding-top:0}

/* ================= RAZLIČICA B: minimalističen cenik ================= */
.mini-intro{max-width:640px;margin:0 auto clamp(30px,4vw,48px);text-align:center;font-size:14.5px;line-height:1.7;color:var(--muted)}
.mini-intro b{color:var(--ink);font-weight:600}
.mini{max-width:1060px;margin:0 auto;background:#fff;border-radius:14px;display:grid;grid-template-columns:repeat(3,1fr);
  box-shadow:0 0 0 1px #ECEAE4, var(--sh-soft);overflow:hidden}
.mini-col{padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,30px);position:relative}
.mini-col+.mini-col{box-shadow:inset 1px 0 0 #ECEAE4}
.mini-col.mini-rec::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange)}
.mini-tag{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);height:14px}
.mini-col.mini-rec .mini-tag{color:var(--orange)}
.mini-name{margin-top:14px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.mini-price{margin-top:18px;display:flex;align-items:baseline;gap:9px;font-variant-numeric:tabular-nums}
.mini-price b{font-size:clamp(34px,3.8vw,46px);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.mini-price .per{font-size:14px;color:var(--muted)}
.mini-price s{font-size:14px;color:#B9B6AE}
.mini-note{margin-top:10px;font-size:13px;line-height:1.55;color:var(--muted);min-height:40px}
.mini-cta{margin-top:22px}
.mini-cta .btn{width:100%;height:52px;font-size:14.5px;box-shadow:none;background:var(--orange);animation:none}
.mini-cta .btn:hover{background:#B8420B;transform:none}
.mini-link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink);height:52px}
.mini-link:hover{color:var(--orange)}
.mini-rule{height:1px;background:#ECEAE4;margin:24px 0 20px}
.mini-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.mini-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;color:#2F3033}
.mini-list li span.v{color:#9A978F}
.mini-list li.off{color:#A5A29B}
.mini-list li.off .m{color:#C9C6BE}
.mini-list .m{flex:none;width:14px;margin-top:3px;color:var(--ink)}
.mini-foot{max-width:1060px;margin:18px auto 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--dim)}
.mini-foot b{color:var(--ink);font-weight:600}
@media (max-width:1000px){
  .mini{grid-template-columns:1fr}
  .mini-col+.mini-col{box-shadow:inset 0 1px 0 #ECEAE4}
  .mini-col.mini-rec::before{height:2px}
}

/* »Za koga je vzdrževanje«: brez okvirja, samo tanka črta zgoraj */
.whofor>div{background:transparent;box-shadow:none;border:0;border-radius:0;
  padding:clamp(18px,2.4vw,28px) 0 0}

/* ================= mobilna dodelava (dopolnjuje obstoječi blok zgoraj) ================= */
@media (max-width:620px){
  /* vrstica zaupanja brez navpičnih ločil */
  .trust-row{gap:6px 12px;font-size:12.5px}
  .trust-row .divider{display:none}

  /* značke pod gumbom bolj strnjene */
  .cta-badges{gap:12px;margin-top:8px}
  .cta-badges span{font-size:11.5px}

  /* naslovi razdelkov in razmiki */
  .head h2{font-size:clamp(25px,7.4vw,32px)}
  .head p{font-size:14px}
  section.panel,section.soft,section.plain{padding:clamp(40px,11vw,60px) 0}

  /* gumbi v razdelkih čez celo širino */
  .cta-block .btn{width:100%}
  .mini-cta .btn,.plan .btn{width:100%}
}

.sticky-cta{display:none}
.sticky-cta.on{display:block;position:fixed;left:16px;right:16px;bottom:14px;z-index:80}
.sticky-in{
  display:flex;align-items:center;gap:18px;
  background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:28px;
  padding:14px 18px 14px 16px;
  box-shadow:var(--sh-soft);
}
.sticky-img{
  width:52px;height:52px;border-radius:14px;object-fit:contain;flex:none;padding:6px;
  background:#fff;box-shadow:0 1px 2px rgba(15,15,16,.06), 0 0 0 1px rgba(15,15,16,.06);
}
.sticky-copy{flex:1;min-width:0}
.sticky-top{
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
  font-size:16px;font-weight:600;color:#1A1A1A;letter-spacing:-.02em;
}
.sticky-top b{font-weight:600}
.sticky-time{display:inline-flex;gap:6px;flex:none}
.sticky-time span{
  background:#F8E4D8;color:#A8420E;border-radius:999px;padding:5px 8px;
  font-size:12px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1;
}
.sticky-copy p{margin:5px 0 0;font-size:13.5px;line-height:1.35;color:#6B6B6B;font-weight:400}
.sticky-act{position:relative;flex:none;padding-top:12px}
.sticky-pill{
  position:absolute;top:0;right:10px;z-index:2;
  background:#BE5823;color:#fff;border-radius:999px;
  padding:4px 10px;font-size:11px;font-weight:700;white-space:nowrap;
  box-shadow:0 2px 8px rgba(229,106,42,.28);
}
.sticky-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 28px;border-radius:999px;
  background:#111;color:#fff;font-weight:600;font-size:15px;white-space:nowrap;
}
.sticky-btn:hover{background:#000;color:#fff;transform:none}
body:has(.sticky-cta.on){padding-bottom:100px}
@media (max-width:720px){
  .sticky-cta.on{left:8px;right:8px;bottom:8px}
  .sticky-in{flex-wrap:wrap;gap:10px;padding:12px;border-radius:28px}
  .sticky-img{width:44px;height:44px}
  .sticky-top{font-size:13.5px;flex-wrap:wrap;gap:6px}
  .sticky-time span{padding:4px 6px;font-size:11px}
  .sticky-copy p{display:none}
  .sticky-act{width:100%;padding-top:14px}
  .sticky-btn{width:100%;min-height:48px;height:48px}
  .sticky-pill{right:auto;left:50%;transform:translateX(-50%);top:0}
  body:has(.sticky-cta.on){padding-bottom:128px}
}
/* ================= mobilna konverzija ================= */
@media (max-width:980px){
  html,body{overflow-x:clip;max-width:100%}
  .wrap,header,.hero,.hero-vsl,section,h1,h2,h3,p{max-width:100%}
  h1,h2,h3,p,.sub,.mini-note,.head p{overflow-wrap:break-word}
  .burger{width:44px;height:44px}
  nav a{min-height:44px;display:flex;align-items:center}
  .nav-cenik{justify-content:center;min-height:48px;border-radius:999px}
  .cta-block .btn,.hero-vsl .btn,.story .btn,.zreb-grid .btn{width:100%;min-height:64px}
  .mini-link{width:100%;justify-content:center;min-height:48px}
  .vsl-tap-box{max-width:calc(100% - 32px)}
}
@media (max-width:560px){
  .hero-vsl h1{font-size:24px;letter-spacing:-.03em;padding:0 2px}
  .hero-vsl .badge{font-size:11px;max-width:100%;white-space:normal}
  .wrap{width:100%;overflow-x:clip}
  .head{padding:0 4px}
  .head h2{font-size:22px;line-height:1.15}
  .chips{justify-content:flex-start}
  .cta-badges{flex-wrap:wrap;justify-content:center}
  .trust-row{justify-content:center}
}
body:has(header.open) .sticky-cta{display:none!important}
.vsound{position:absolute;right:14px;top:14px;z-index:5;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:rgba(15,15,16,.46);backdrop-filter:blur(8px);color:#fff;
  box-shadow:var(--sh-soft);transition:background .18s ease,transform .18s ease}
.vsound:hover{background:rgba(15,15,16,.66);transform:scale(1.06)}
.vsound:focus-visible{outline:3px solid #fff;outline-offset:2px}
.vcard:not(.side) video{cursor:pointer}
@media (max-width:560px){.vsound{width:38px;height:38px;right:10px;top:10px}}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:56px;height:56px;border-radius:50%;
  background:rgba(19,11,7,.46);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;cursor:pointer}

/* ---------- ritem v heroju (širši zasloni; mobilni blok ostane svoj) ---------- */
@media (min-width:621px){
  .hero-vsl h1{margin-bottom:0}
  .hero-vsl .sub{margin:20px auto 0}
  .hero-vsl .trust-row{margin:22px 0 0}
  .hero-vsl .vsl{margin:32px auto 0}
  .hero-vsl .hero-cta{margin:26px 0 0}
  .hero-vsl .cta-badges{margin-top:14px}
  .hero-vsl .hero-note{margin-top:12px}
}

/* ---------- mobilni QA: večje tipke, berljivejši drobni tisk ---------- */
@media (max-width:620px){
  /* dotikalne tarče vsaj 44 px */
  .mini-foot a{display:inline-block;padding:9px 0}
  .vsl-mute{width:44px;height:44px}
  .kviz-back{padding:12px 4px}
  .mini-link{height:56px}
  .dots b{width:10px;height:10px}
  .dots{gap:10px;padding:8px 0}

  /* drobni tisk berljiv */
  .badge{font-size:11.5px}
  .fine,.plans-note,.hero-note,.mini-foot,.trusted,.kviz-note{font-size:12px}
  .mini-list li{font-size:14px}
}
@media (max-width:620px){
  #zreb a[href*="rules."]{display:inline-block;padding:10px 0}
  .zreb-facts{gap:10px}
}
@media (max-width:620px){
  /* povezave v temnem pasu in v besedilu dobijo tarčo */
  .band .cards a,.rez-card a,.trusted a,.disclaim a{display:inline-block;padding:10px 0}
}

/* ================= obsežna pogosta vprašanja ================= */
.faq-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px;margin:0 auto clamp(30px,4vw,46px)}
.faq-chips a{background:#fff;box-shadow:0 0 0 1px #E7E4DD;border-radius:999px;padding:9px 15px;font-size:13px;font-weight:600;color:#4A4B50;transition:all .18s ease}
.faq-chips a:hover{color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.faq-cat{max-width:900px;margin:0 auto clamp(30px,4vw,44px);scroll-margin-top:90px}
.faq-cat h3{font-size:clamp(19px,2.4vw,24px);font-weight:600;color:var(--ink);margin-bottom:14px}
/* 29. 8. 2026: skatla je prozorna, vrstice so bele z robom #E0D8CD —
   isti jezik kot moznosti kviza in vnosi na invisalign.vbo.si */
.faq-box{background:transparent;border-radius:0;padding:0;box-shadow:none}
.faq-box details{border-radius:14px;background:#fff;border:1px solid #E0D8CD;margin:8px 0;
  transition:background .24s ease,border-color .24s ease,box-shadow .24s ease,transform .24s ease}
.faq-box details:hover{border-color:#CF7A4D}
.faq-box summary{transition:color .18s ease}
.faq-box summary:hover{color:var(--orange)}
.faq-box details[open]{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.faq-box summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:18px 20px;font-size:15.5px;font-weight:600;line-height:1.45;color:var(--ink)}
.faq-box summary::-webkit-details-marker{display:none}
.faq-box .zn{flex:none;width:20px;height:20px;position:relative;margin-top:2px}
.faq-box .zn::before,.faq-box .zn::after{content:'';position:absolute;left:50%;top:50%;background:#8A8B90;border-radius:2px;transition:transform .25s ease,background .2s ease}
.faq-box .zn::before{width:15px;height:1.8px;transform:translate(-50%,-50%)}
.faq-box .zn::after{width:1.8px;height:15px;transform:translate(-50%,-50%)}
.faq-box details[open] .zn::before{background:var(--orange);transform:translate(-50%,-50%) rotate(45deg)}
.faq-box details[open] .zn::after{background:var(--orange);transform:translate(-50%,-50%) rotate(45deg)}
.faq-box details[open] summary{color:var(--ink);padding-bottom:10px}
.faq-box p{margin:0 20px 18px;font-size:14.5px;line-height:1.65;color:var(--muted);max-width:64ch}
.faq-viri{max-width:900px;margin:clamp(24px,3vw,36px) auto 0;font-size:12px;line-height:1.6;color:var(--dim);text-align:center}
@media (max-width:620px){
  .faq-box summary{padding:15px 16px;font-size:14.5px}
  .faq-box p{margin:0 16px 15px;font-size:14px}
  .faq-chips a{font-size:12.5px;padding:8px 13px}
}

/* ================= edinstvenost: samo pri VBO (bento) ================= */
#edini .head h2 em{font-style:normal;color:var(--orange)}
.kred{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.3vw,18px)}
.kcard{display:flex;flex-direction:column;background:#fff;border:1px solid #EBE9E3;border-radius:28px;
  overflow:hidden;box-shadow:var(--sh-soft)}
.kbig{grid-column:span 2}
.kcap{padding:clamp(18px,2vw,26px)}
.kcap h3{font-size:clamp(17px,1.6vw,21px);font-weight:600;letter-spacing:-.01em;line-height:1.2}
.kcap p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted);max-width:44ch}
.kcap-2{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(14px,2vw,30px);align-items:start}
.kcap-2 p{margin:0}
.kart{position:relative;flex:1;min-height:clamp(178px,19vw,244px);overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%,#FBFAF8 0%,#F2F0EB 100%)}
.kart::before{content:'';position:absolute;inset:0;opacity:.55;
  background-image:radial-gradient(rgba(27,28,30,.10) 1px,transparent 1px);background-size:13px 13px}

/* A — priznanja */
.kart-foto{display:grid;place-items:end center;padding:clamp(20px,2.4vw,34px) clamp(20px,2.4vw,34px) 0}
.kart-foto img{position:relative;width:100%;max-width:560px;aspect-ratio:16/9;object-fit:cover;
  border-radius:14px 14px 0 0;box-shadow:var(--sh-soft)}
.kpill{position:absolute;top:clamp(16px,1.8vw,24px);right:clamp(16px,1.8vw,24px);z-index:2;
  display:inline-flex;align-items:center;gap:9px;background:#1B1C1E;border-radius:999px;
  padding:8px 14px;box-shadow:var(--sh-soft)}
.kpill img{height:13px;width:auto;aspect-ratio:auto;object-fit:contain;
  border-radius:0;box-shadow:none;max-width:none;opacity:.95}
.kpill-loc{width:1px;height:12px;background:rgba(255,255,255,.22);flex:none}
.kpill-dia{flex:none;color:var(--orange-2)}
.kpill b{font-size:11.5px;font-weight:700;color:#fff;letter-spacing:.01em}

/* B — lok z eno */
.kart-lok{display:grid;place-items:center;padding:clamp(18px,2vw,26px)}
.klok{position:relative;width:min(78%,220px);height:auto;margin-top:14px}
.kznak{position:absolute;top:clamp(16px,2vw,26px);z-index:2;width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;background:linear-gradient(160deg,#F5813C,#CF4B0C);
  box-shadow:var(--sh-btn)}
.kstev{position:absolute;left:50%;bottom:clamp(50px,5.8vw,68px);transform:translateX(-50%);
  font-size:clamp(46px,5.4vw,68px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.kpod{position:absolute;left:0;right:0;bottom:clamp(16px,1.8vw,22px);text-align:center;
  font-size:11.5px;font-weight:600;color:var(--dim)}

/* C — tuji aparati */
.kart-tuji{display:grid;place-items:center;align-content:center;padding:clamp(18px,2vw,26px) clamp(18px,2vw,26px) clamp(34px,3.6vw,50px)}
.kduh{position:absolute;left:0;right:0;bottom:-10px;text-align:center;font-size:clamp(36px,4.4vw,56px);
  font-weight:800;line-height:.88;letter-spacing:-.03em;color:rgba(27,28,30,.075);white-space:nowrap}
.kkocka{position:relative;width:78px;height:78px;border-radius:28px;display:grid;place-items:center;
  background:linear-gradient(160deg,#FFB27C 0%,#F5813C 46%,#E4560F 100%);
  box-shadow:var(--sh-btn-strong)}
.kmini{position:relative;margin-top:14px;background:#fff;border:1px solid #EBE9E3;border-radius:999px;
  padding:6px 13px;font-size:11.5px;font-weight:700;box-shadow:var(--sh-soft)}

/* D — temna kartica */
.ktemn{background:linear-gradient(150deg,#1B1C1E 0%,#0F0F10 62%);border-color:#26272A;
  box-shadow:var(--sh-soft)}
.ktemn .kcap h3{color:#fff}
.ktemn .kcap p{color:#C9C7C4}
.kart-mock{background:radial-gradient(120% 110% at 50% 0%,rgba(207,75,12,.55) 0%,rgba(207,75,12,0) 62%),
  linear-gradient(180deg,#2A1A12 0%,#141416 74%);display:grid;place-items:center;align-content:center;
  gap:clamp(14px,1.6vw,20px);padding:clamp(20px,2.4vw,32px)}
.kart-mock::before{background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);opacity:.5}
.kmock{position:relative;width:min(100%,420px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:14px;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--sh-soft)}
.kmock-img{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(160deg,#FBFAF8,#EFEDE8)}
.kmock-img img{width:86%;height:86%;object-fit:contain}
.kmock-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.kmock-t b{font-size:14px;font-weight:700;letter-spacing:-.01em}
.kmock-t i{font-style:normal;font-size:12px;color:var(--muted)}
.kmock-ok{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#12A150}
.kleta{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.kleta span{border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:700;color:#C9C7C4;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.kleta span.on{color:#fff;background:rgba(207,75,12,.9);border-color:transparent}

@media (max-width:960px){
  .kred{grid-template-columns:repeat(2,1fr)}
  .kbig{grid-column:span 2}
  .kcap-2{grid-template-columns:1fr;gap:8px}
}
@media (max-width:640px){
  .kred{grid-template-columns:1fr}
  .kbig{grid-column:span 1}
  .kart{min-height:190px}
  .kpill{top:10px;right:10px;padding:6px 11px}
  .kpill img{height:11px}
  .kpill b{font-size:10.5px}
  .kart-foto{padding:18px 14px 0}
  .kcap p{font-size:13px}
}

/* ============ pojavno okno »Preizkusi svojo srečo« (praskanka) ============
   Zamenjalo je okno za zajem e-pošte 1. 9. 2026. Slika je izrez oblikovne
   predloge BREZ vpečenega besedila (vbo-brand/tools/pop-sreca/build.py);
   temno ozadje, oranžno kartico in vse besedilo nariše ta CSS.
   Zlato folijo čez kartico nariše <canvas> v popudba/popup.js; ko obiskovalec
   odrgne polovico, dobi .pop razred `odkrito` in obrazec se prikaže. */
.pop-ozadje{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;
  max-width:none;max-height:none;border-radius:0;opacity:0;pointer-events:none;
  /* Klepetalni gumb AIB (#aib-widget-host) ima z-index 2147483000 in je do
     1. 9. 2026 lebdel nad oknom. Okno je celozaslonsko in mora biti vrh. */
  z-index:2147483001;
  background:
    radial-gradient(122% 80% at 100% 104%, rgba(24,96,200,.70) 0%, rgba(24,96,200,0) 62%),
    radial-gradient(88% 58% at 100% 0%, rgba(48,66,148,.42) 0%, rgba(48,66,148,0) 72%),
    linear-gradient(180deg,#221D3A 0%,#1C1830 100%);
  transition:opacity .32s ease}
.pop-ozadje.vidno{opacity:1;pointer-events:auto}
.pop{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;max-width:none;margin:0;padding:0;
  border:0;border-radius:0;overflow:hidden;background:transparent}

/* fotografija: namizje levo, telefon zgoraj — v obeh primerih se zlije v ozadje */
.pop-slika{position:absolute;left:0;top:0;width:54%;height:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 56%,transparent 97%);
  mask-image:linear-gradient(90deg,#000 0%,#000 56%,transparent 97%)}
.pop-slika picture{display:block;width:100%;height:100%}
.pop-slika img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}

.pop-vsebina{position:absolute;right:0;top:0;width:46%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,20px);
  padding:clamp(24px,3vw,48px) clamp(18px,2.4vw,44px);text-align:center;color:#fff;overflow-y:auto}

.ps-marka{margin:0;font-size:clamp(17px,1.9vw,27px);font-weight:400;letter-spacing:-.01em;color:#fff}
.ps-marka b{font-weight:800}
.pop-sreca h2{margin:0;color:#fff;font-size:clamp(30px,3.5vw,50px);font-weight:600;line-height:1.06;
  letter-spacing:-.025em;max-width:16ch;text-wrap:balance}
.pop-sreca .ps-pod{margin:0;font-size:clamp(14px,1.2vw,19px);line-height:1.45;color:rgba(255,255,255,.92);max-width:34ch}

/* ---- kartica z nagrado ---- */
.ps-karta{position:relative;width:min(85%,490px);aspect-ratio:1.46;margin-top:clamp(14px,15vh,160px);
  border-radius:clamp(20px,2vw,32px);overflow:hidden;isolation:isolate;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  cursor:pointer;box-shadow:0 18px 44px rgba(0,0,0,.34)}
/* Kartica je poizvedbena vsebnica (container-type), zato NIMA prehoda na
   `width`: Chrome ob vsakem koraku prehoda znova ovrednoti poizvedbo, prehod
   se ne dokonča in širina obstane na začetni vrednosti (izmerjeno 1. 9. 2026:
   230 px namesto 165 px). Gibanje ob odkritju nosita folija in .ps-nagrada. */
.ps-karta:focus-visible{outline:3px solid #fff;outline-offset:4px}
.ps-nagrada{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:10% 6% 8%;text-align:center;color:#fff;overflow:hidden;
  background:linear-gradient(180deg,#D45C20 0%,#C25120 52%,#B4471B 100%)}
.ps-zob{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:70%;height:auto;
  fill:rgba(118,34,4,.17);pointer-events:none}
.ps-nagrada>span,.ps-nagrada>strong{position:relative}
.ps-uvod{font-size:clamp(13px,6vw,23px);font-weight:400;line-height:1.2;letter-spacing:-.01em;color:rgba(255,255,255,.97)}
.ps-znesek{font-size:clamp(40px,17.6vw,68px);font-weight:700;line-height:1.08;letter-spacing:-.04em;
  word-spacing:-.24em;margin-top:.06em}
.ps-popusta{font-size:clamp(16px,7.1vw,28px);font-weight:700;line-height:1.15;letter-spacing:0}
.ps-darila{margin-top:auto;font-size:clamp(9px,3.3vw,13px);font-weight:700;line-height:1.2;letter-spacing:.055em}

/* Besedilo v kartici meri po ŠIRINI KARTICE, ne po zaslonu — kartica se ob
   odkritju zoži in nagrada se mora zožiti z njo. */
@supports (container-type: inline-size){
  .ps-karta{container-type:inline-size}
  .ps-uvod{font-size:7.2cqw}
  .ps-znesek{font-size:21.2cqw}
  .ps-popusta{font-size:8.6cqw}
  .ps-darila{font-size:4cqw}
}

/* ---- zlata folija ---- */
.ps-folija{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;
  touch-action:none;transition:opacity .42s ease,transform .42s ease}
.ps-folija.ps-konec{opacity:0;transform:scale(1.05);pointer-events:none}
.ps-namig{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:3;pointer-events:none;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:clamp(10.5px,1vw,13.5px);font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  color:#6B4A11;transition:opacity .22s ease;animation:psUtrip 1.9s ease-in-out infinite}
.ps-namig svg{width:1.3em;height:1.3em;flex:none}
.ps-karta.ps-v-teku .ps-namig,.pop.odkrito .ps-namig{opacity:0;animation:none}
@keyframes psUtrip{0%,100%{opacity:.92;transform:translateX(-50%) translateY(0)}50%{opacity:.62;transform:translateX(-50%) translateY(-3px)}}

/* ---- drugi korak: obrazec ---- */
.pop-sreca .ps-po{display:none}
.pop-sreca .ps-po:focus{outline:0}
.pop.odkrito .ps-po{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.2vw,16px);
  width:min(430px,100%);animation:psPojav .4s ease both}
.pop.odkrito:not(.hvala) h2,.pop.odkrito .ps-pod{display:none}
.pop.odkrito .ps-karta{width:min(74%,360px);cursor:default}
.pop.odkrito .ps-nagrada{animation:psNagrada .5s ease both}
.ps-pod2{margin:0;font-size:clamp(13.5px,1.05vw,16.5px);line-height:1.5;color:rgba(255,255,255,.92);max-width:40ch}
@keyframes psPojav{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes psNagrada{0%{transform:scale(.94)}60%{transform:scale(1.03)}100%{transform:scale(1)}}

.pop form{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:2px}
.pop input,.pop select{font:inherit;font-size:16px;height:54px;padding:0 22px;border-radius:999px;border:0;text-align:center;
  background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.pop input::placeholder{color:rgba(255,255,255,.72)}
.pop input:focus,.pop select:focus{outline:0;background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
/* Izbirnik ordinacije (14. 9. 2026). `text-align-last` je edini način, da je
   izbrana vrednost v <select> res na sredini kot v poljih nad njim; Safari
   samega `text-align` na sredino ne postavi. Seznam se odpre v sistemskih
   barvah, zato ima <option> svoje — bel na belem bi bil neberljiv. */
.pop select{appearance:none;-webkit-appearance:none;text-align-last:center;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 22px center}
.pop select:invalid{color:rgba(255,255,255,.72)}
.pop select option{color:#2A2522;background:#fff}
/* Neveljavno polje. Do 14. 9. je oddaja tiho vrnila žarišče in videti je bilo,
   kot da gumb ne dela. */
.pop .ps-slabo{box-shadow:inset 0 0 0 2px #FF8A5B}
.pop .ps-napaka{margin:0;font-size:14px;line-height:1.45;color:#FFC7AE;text-align:center}
.pop .ps-zasebnost{margin:0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.62);text-align:center;max-width:38ch}
.pop .ps-zasebnost a{color:rgba(255,255,255,.82)}
.pop button{font:inherit;height:58px;border:0;border-radius:999px;background:#D9531A;color:#fff;
  font-size:17px;font-weight:700;cursor:pointer;transition:transform .15s ease,background .15s ease}
.pop button:hover{transform:translateY(-1px);background:#E45D22}
.pop button:focus-visible{outline:3px solid #fff;outline-offset:3px}

.pop button.pop-zapri{position:absolute;top:clamp(14px,2vw,28px);right:clamp(14px,2vw,28px);z-index:20;
  width:46px;height:46px;min-height:0;padding:0;margin:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(20,18,32,.42);backdrop-filter:blur(6px);display:grid;place-items:center;box-shadow:none;
  color:#fff;pointer-events:auto;transition:background .18s ease,transform .18s ease}
.pop button.pop-zapri:hover{background:rgba(20,18,32,.66);transform:scale(1.06)}
.pop button.pop-zapri svg{stroke:#fff;pointer-events:none}
.pop button.pop-zapri:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---- zahvala po oddaji ---- */
.ps-hvala-naslov{max-width:20ch}
.pop-hvala{margin:0;font-size:clamp(14px,1.1vw,17px);line-height:1.55;color:rgba(255,255,255,.94);max-width:36ch}
.pop-opomba{margin-top:4px;padding:11px 15px;border-radius:12px;border-left:3px solid #D9531A;
  background:rgba(217,83,26,.12);font-size:13.5px}
.pop.hvala form{width:min(430px,100%)}
/* pas nujnosti + gumb za prevzem (2. 9. 2026) */
.pop-nujno{display:flex;align-items:flex-start;gap:10px;text-align:left}
.pop-nujno i{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:#FF7A3D;
  box-shadow:0 0 0 0 rgba(255,122,61,.55);animation:psNujno 1.6s ease-out infinite}
.pop-nujno b{color:#fff}
@keyframes psNujno{0%{box-shadow:0 0 0 0 rgba(255,122,61,.55)}100%{box-shadow:0 0 0 9px rgba(255,122,61,0)}}
.pop .ps-cta{display:flex;align-items:center;justify-content:center;height:58px;border-radius:999px;background:#D9531A;color:#fff;
  font-size:17px;font-weight:700;text-decoration:none;transition:transform .15s ease,background .15s ease}
.pop .ps-cta:hover{transform:translateY(-1px);background:#E45D22}
.pop .ps-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
.pop button.ps-nazaj{height:auto;padding:6px;background:none;font-size:14px;font-weight:600;color:rgba(255,255,255,.8);
  text-decoration:underline;text-underline-offset:3px}
.pop button.ps-nazaj:hover{transform:none;background:none;color:#fff}
@media (max-width:900px){.pop .ps-cta{height:54px;font-size:16px}}
@media (prefers-reduced-motion:reduce){.pop-nujno i{animation:none}}

/* ---- telefon ---- */
@media (max-width:900px){
  /* Navpičen tok namesto absolutne postavitve: besedilo z nagrado vzame
     toliko višine, kolikor jo potrebuje, fotografija pa ves preostanek.
     Tako je gostota enaka na 667 px in na 932 px visokem zaslonu, ob
     odkritju nagrade pa se fotografija sama umakne obrazcu. */
  .pop{display:flex;flex-direction:column}
  .pop-slika{position:relative;left:auto;top:auto;width:100%;height:auto;flex:1 1 auto;min-height:0;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 100%)}
  .pop-slika picture{position:absolute;inset:0}
  .pop-slika img{object-position:52% 44%}
  .pop-vsebina{position:relative;right:auto;top:auto;width:100%;height:auto;flex:0 0 auto;max-height:100%;
    justify-content:flex-end;gap:8px;padding:0 12px clamp(28px,15vw,64px)}
  .ps-marka{font-size:clamp(19px,6.3vw,25px)}
  /* 8,3vw: »Preizkusite svojo srečo« (vikanje, 2. 9. 2026) meri ~11,1em in ostane
     v eni vrstici od 320 px navzgor (12 px stranskega odmika). Pri 9vw, ki je
     ustrezal krajšemu »Preizkusi« (10,12em), se je novi naslov lomil v dve vrstici. */
  .pop-sreca h2{font-size:clamp(24px,8.3vw,38px);max-width:24ch}
  .pop-sreca .ps-pod{font-size:clamp(13px,4.1vw,16px)}
  .ps-karta{width:min(78%,300px);aspect-ratio:1.58;margin-top:6px}
  .pop.odkrito .ps-karta{width:min(60%,220px)}
  .pop.odkrito .pop-vsebina{padding-bottom:clamp(16px,4.5vw,26px)}
  /* Na nizkem zaslonu ostane od fotografije le trak; pogled prestavimo na
     obraz, da v njem ni same brade. */
  .pop.odkrito .pop-slika img{object-position:52% 30%}
  .ps-pod2{font-size:13.5px}
  .pop input{height:50px}
  .pop button{height:54px;font-size:16px}
  .pop button.pop-zapri{width:42px;height:42px}
}
/* ležeč telefon: fotografija ob strani, da ostane prostor za kartico */
@media (max-width:900px) and (max-height:560px){
  .pop{flex-direction:row}
  .pop-slika{width:42%;height:auto;flex:0 0 42%;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 54%,transparent 98%);
    mask-image:linear-gradient(90deg,#000 0%,#000 54%,transparent 98%)}
  .pop-vsebina{width:58%;flex:1 1 auto;height:auto;align-self:stretch;justify-content:center;
    padding:14px 16px;overflow-y:auto}
  .pop-sreca h2{font-size:24px}
  .ps-karta{width:min(80%,230px);margin-top:6px}
  .pop.odkrito .ps-karta{width:min(56%,165px)}
}
@media (max-height:620px) and (min-width:901px){
  .pop-sreca h2{font-size:34px}
  .pop-vsebina{gap:10px}
  .ps-karta{width:min(78%,360px);margin-top:12px}
  .pop.odkrito .ps-karta{width:min(58%,260px)}
}
@media (prefers-reduced-motion:reduce){
  .ps-namig{animation:none}
  .pop.odkrito .ps-po,.pop.odkrito .ps-nagrada{animation:none}
  .ps-folija{transition:none}
}

/* =====================================================================
   MOBILNI POPRAVKI — 27. 8. 2026
   Ta blok je NAMENOMA zadnji v datoteki: prepisuje starejša mobilna
   pravila zgoraj (glava, lepljiv pas, poravnave, velikosti naslovov).
   ===================================================================== */

/* ---- 1. glava in meni ------------------------------------------------ */
@media (max-width:980px){
  /* temni gumb v glavi tekmuje z burgerjem — na mobilnem ga skrijemo */
  header .btn-dark{display:none}

  .hdr{position:relative;flex-wrap:nowrap;height:62px;min-height:62px;gap:12px}
  .brand{margin-right:auto;min-width:0}
  .brand img{height:19px}
  .burger{margin-left:auto;flex:none;width:44px;height:44px;border-radius:14px}

  /* Lebdeca plosca menija (position:absolute + width 340 px) je odstranjena
     29. 8. — glej opombo pri starem mobilnem meniju zgoraj. `width` iz
     pravila za lezece telefone je prezivel prek prekrivnega menija
     (header.open #site-nav ne nastavlja width) in ga stisnil na 340 px. */
}

/* ---- 2. lepljiv pas s ceno (ena vrstica, nižji) ----------------------
   Velja tudi na ležečem telefonu, kjer je zaslon nizek.            */
@media (max-width:720px),(max-height:520px){
  .sticky-cta.on{left:10px;right:10px;bottom:10px}
  .sticky-in{flex-wrap:nowrap;align-items:center;gap:9px;padding:8px 9px;border-radius:14px}
  .sticky-img{width:38px;height:38px;border-radius:14px;padding:3px}
  .sticky-copy{flex:1;min-width:0}
  .sticky-top{display:block;font-size:12.5px;line-height:1.2;letter-spacing:-.015em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sticky-copy p{display:none}
  .sticky-time{display:flex;gap:3px;margin-top:5px}
  .sticky-time span{padding:3px 4px;font-size:9.5px;border-radius:14px}
  .sticky-pill{display:none}
  .sticky-act{width:auto;flex:none;padding-top:0}
  .sticky-btn{width:auto;height:44px;min-height:44px;padding:0 14px;font-size:13px}
  body:has(.sticky-cta.on){padding-bottom:84px}
}
@media (max-width:360px){
  .sticky-time span{font-size:9px;padding:3px}
  .sticky-btn{padding:0 11px;font-size:12.5px}
}

/* ---- 3. vse na sredino ---------------------------------------------- */
@media (max-width:900px){
  .head{align-items:center;text-align:center;padding:0}
  .head .badge,.vesna .badge{align-self:center}
  .head h2,.head p{margin-left:auto;margin-right:auto}

  .rail-head{text-align:center}
  .rail-head h2{max-width:22ch;margin:0 auto}

  .chips,.cta-badges,.trust-row,.faq-chips{justify-content:center}
  .mini-foot{justify-content:center;text-align:center}

  .b2 p,.mini-intro{margin-left:auto;margin-right:auto}
}
/* enostolpcni razdelki: besedilo na sredino, kot naslovi */
@media (max-width:860px){
  .whofor>div{text-align:center}
  .whofor img{margin-left:auto;margin-right:auto}

  .story{text-align:center;justify-items:center}
  .story .eyebrow{margin-bottom:12px}
  .story .who{justify-content:center}
  .story .cta,.story .note{width:100%}

  .zreb-grid>div:first-child{text-align:center}
  .zreb-grid p{margin-left:auto;margin-right:auto}
  .zreb-grid .zreb-facts div{text-align:center}
  .zreb-grid>div>div[style*="flex"]{justify-content:center}
}

/* ---- 4. cenik (enostolpcni, torej pod 1000 px) ---------------------- */
@media (max-width:1000px){
  .mini-col{text-align:center;padding:26px 20px 30px}
  .mini-tag{height:auto;min-height:14px}
  .mini-name{margin-top:10px}
  .mini-price{justify-content:center;margin-top:12px}
  .mini-note{min-height:0;margin-top:8px;margin-left:auto;margin-right:auto;max-width:34ch}
  .mini-cta{display:flex;justify-content:center;margin-top:18px}
  .mini-cta .btn{max-width:340px}
  .mini-link{justify-content:center;width:100%;max-width:340px}
  .mini-rule{margin:20px 0 18px}
  .mini-list{width:fit-content;max-width:100%;margin:0 auto;text-align:left}
  .mini-foot{gap:6px 14px}
}

/* ---- 5. enotna velikost naslovov ------------------------------------ */
@media (max-width:620px){
  .hero-vsl h1{font-size:31px;line-height:1.1;letter-spacing:-.02em;padding:0}

  /* en sam razred velikosti za vse naslove razdelkov */
  .head h2,
  .rail-head h2,
  .band h2,
  .zreb-grid h3,
  .change .panel-img h3,
  .story blockquote,
  .prod .card h3{font-size:27px;line-height:1.14;letter-spacing:-.032em}

  .zreb-top h2{font-size:21px}
  .whofor h3{font-size:22px}
  .vesna .quote{font-size:22px}
  .s3 h3,.b2 h3,.bx h3,.step h3,.kcap h3,.faq-cat h3{font-size:18.5px}

  .head p{font-size:15px;line-height:1.6}
  .hero .hero-vsl p.sub{font-size:15px}
}
@media (max-width:360px){
  .hero-vsl h1{font-size:27px}
  .head h2,.rail-head h2,.band h2,.zreb-grid h3,
  .change .panel-img h3,.story blockquote,.prod .card h3{font-size:24px}
}

/* ---- 6. dr. Vesna: cela slika, brez rezanja -------------------------- */
@media (max-width:720px){
  .vesna{text-align:center;padding:20px 18px 26px;gap:14px}
  .vesna>img{width:100%;max-width:250px;height:auto;aspect-ratio:669/1100;
    object-fit:contain;margin:0 auto;background:#fff}
  .vesna .quote{margin:10px 0 10px}
  .vesna p{margin-left:auto;margin-right:auto;max-width:38ch}
  .vesna .podpis{margin:14px auto 0}
}

/* ---- 7. pas s pacienti: neskoncno drsenje z desne proti levi ---------
   28. 8. 2026 (Max): prej je pas tekel sam samo na telefonu (<=760px), na
   namizju pa se ga je vleklo z misko. Zdaj tece na VSEH sirinah.
   Zamik `-50% - polovica razmika` je pol steze: kartice so podvojene v /ponudba/ui.js,
   zato se zanka sklene brez poskoka. Razmik je 16px na namizju in 12px na
   telefonu, zato sta odmika razlicna. */
.prail{padding-left:0;padding-right:0;scroll-snap-type:none;cursor:default;
  overflow:hidden;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.prail-track.tece{animation:vboPasLevo 68s linear infinite}
@keyframes vboPasLevo{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 8px))}
}
/* Ob dotiku ali misko nad pasom se ustavi, da si kartico lahko ogledate. */
.prail:hover .prail-track.tece,
.prail:active .prail-track.tece{animation-play-state:paused}
/* Kdor ne mara gibanja, dobi spet rocno drsenje. */
@media (prefers-reduced-motion:reduce){
  .prail{overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;
    padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px);cursor:grab}
  .prail-track.tece{animation:none;transform:none}
}

@media (max-width:760px){
  .prail-track{gap:12px}
  /* Na telefonu je steza ozja, zato hitrejsi obhod in manjsi popravek razmika. */
  .prail-track.tece{animation-duration:52s}
  @keyframes vboPasLevo{
    from{transform:translateX(0)}
    to{transform:translateX(calc(-50% - 6px))}
  }
  @media (prefers-reduced-motion:reduce){
    .prail{padding-left:16px;padding-right:16px}
  }
  .rc{width:min(66vw,248px)}
  .rc-wide{width:min(86vw,320px)}
  .rc,.rc-wide{height:clamp(360px,97vw,430px)}
  /* Na ozkem zaslonu dobi citat vec prostora, sicer se dolgi ne izide. */
  .rc-wide .ph{flex:0 0 28%}
  /* Omejitev vrstic je varovalka za se daljsi citat v prihodnje;
     sedanja dva se izideta v celoti. */
  .rc-wide .qt p{font-size:11.5px;line-height:1.55;display:-webkit-box;
    -webkit-box-orient:vertical;-webkit-line-clamp:12;overflow:hidden}
}

/* ---- 8. noga: po prepisu invisalign je mobilni odziv v osnovnem
   bloku podnožja (ena leva kolona pod 760 px), tu ni več pravil. ---- */

/* =====================================================================
   BUYBOX — cenik z vrtiljakom in tremi načini plačila (27. 8. 2026)
   Levo slike, desno ponudba. Brez JS: vidna je letna izbira, pas slik
   pa se da premikati s prstom.
   ===================================================================== */
/* display:flex prepiše privzeti hidden — vrnemo mu moč */
.bb-list[hidden],.bb-price[hidden],.bb-cta[hidden]{display:none}

.buybox{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(24px,3.2vw,52px);align-items:start;
  max-width:1180px;margin:0 auto}

/* ---- levo: vrtiljak ---- */
.bb-media{position:relative;min-width:0}
.bb-stage{position:relative;border-radius:28px;overflow:hidden;background:#EFEDE8}
.bb-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.bb-track::-webkit-scrollbar{display:none}
.bb-slide{flex:0 0 100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always}
.bb-slide img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.bb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;
  border-radius:50%;border:0;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);
  display:none;place-items:center;cursor:pointer;box-shadow:var(--sh-soft);
  opacity:0;transition:opacity .2s ease,background .2s ease}
.bb-arrow.l{left:12px}.bb-arrow.r{right:12px}
.bb-arrow[disabled]{opacity:0!important;pointer-events:none}
.bb-stage:hover .bb-arrow{opacity:1}
.bb-arrow:hover{background:#fff}
.bb-arrow:focus-visible{opacity:1;outline:3px solid var(--orange);outline-offset:2px}

.bb-nav{display:flex;align-items:center;gap:16px;margin-top:16px}
.bb-segs{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.bb-seg{flex:1 1 0;height:4px;padding:0;border:0;border-radius:999px;background:#DEDCD6;cursor:pointer;
  transition:flex-grow .35s ease,background .25s ease}
.bb-seg:hover{background:#C6C3BB}
.bb-seg.is-on{flex-grow:3.4;background:var(--ink)}
.bb-seg:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.bb-count{flex:none;font-size:13px;font-weight:500;color:var(--dim);font-variant-numeric:tabular-nums}
.bb-count b{font-weight:600;color:var(--ink)}

/* ---- desno: ponudba ---- */
.bb-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.bb-info .badge{margin-bottom:14px}
.bb-info h2{font-size:clamp(29px,3.3vw,41px);line-height:1.04;letter-spacing:-.02em;max-width:15ch}
.bb-lead{margin:13px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:46ch}
.bb-lead b{color:var(--ink);font-weight:600}

.bb-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;width:100%}
.bb-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:#2F3033}
.bb-list .m{flex:none;width:15px;margin-top:2px;color:var(--ink)}
.bb-list li span.v{color:#9A978F}
/* »gratis« je bonus, ne vrednost — zato oranzen, ne siv kot .v */
.bb-list li b{font-weight:700;color:var(--orange)}
.bb-list li.off{color:#A5A29B}
/* pomišljaj je besedilo, kljukica pa SVG; brez enake škatle bi vrstice skakale */
.bb-list li.off .m{margin-top:0;height:20px;line-height:20px;color:#C9C6BE;text-align:center;font-weight:700}

/* izbira plačila */
.bb-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:100%;margin-top:20px}
.bb-plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  font:inherit;text-align:left;cursor:pointer;background:#fff;border:1.5px solid #E4E2DC;border-radius:14px;
  padding:12px 13px 11px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.bb-plan:hover{border-color:#C9C6BE}
.bb-plan.is-on{border-color:var(--orange);box-shadow:0 0 0 1.5px var(--orange), var(--sh-btn)}
.bb-plan:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.bb-plan-tag{position:absolute;top:-10px;left:12px;background:var(--orange);color:#fff;border-radius:999px;
  padding:3px 9px;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:var(--sh-btn)}
.bb-plan-name{font-size:13px;font-weight:700;color:var(--ink)}
.bb-plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;font-size:19px;font-weight:700;
  letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.bb-plan-price i{font-style:normal;font-size:11.5px;font-weight:500;color:var(--muted)}
.bb-plan-note{font-size:11.5px;font-weight:600;color:var(--dim)}
.bb-plan.is-on .bb-plan-note{color:var(--orange)}

/* cena, gumb in zaupanje */
.bb-buy{width:100%;margin-top:20px}
.bb-price{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 14px}
.bb-price b{flex:none;white-space:nowrap;font-size:clamp(42px,4.6vw,54px);font-weight:700;letter-spacing:-.05em;
  line-height:.94;color:var(--ink);font-variant-numeric:tabular-nums}
.bb-price span{display:flex;flex-direction:column;gap:2px;padding-bottom:5px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.bb-price em{font-style:normal}
.bb-price i{font-style:normal;font-weight:600;color:var(--ink)}
.bb-price s{color:#B9B6AE}

/* Cena med dvema crtama (28. 8. 2026, vzor Gruns). Crti obrobita ceno in jo
   locita od podnaslova zgoraj in od treh nacinov placila spodaj.
   POZOR: .bb-info je flex stolpec z align-items:flex-start, zato bi se <hr>
   skrcil na sirino 0 — potrebuje izrecen width:100%.
   Barva je temen topel sivi ton (#4A473F), ne --line (#E5E7EB): ta je hladno
   moder in na kremnem ozadju sekcije skoraj neviden. Temna crta je namen —
   ceno mora poudariti, ne samo locevati (Max, 28. 8.). */
.bb-rule{width:100%;height:0;margin:18px 0 0;border:0;border-top:1px solid #4A473F}
/* Rob dobi cena, ne crta: skriti .bb-price ima display:none in ne ustvari
   skatle, zato se rob pri preklopu nacina nikoli ne sesteje dvakrat. */
.bb-price{margin-top:16px}

.bb-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:64px;margin-top:18px;
  border-radius:999px;background:var(--ink);color:#fff;font-size:18px;font-weight:700;letter-spacing:-.01em;
  /* Napis je zdaj vecji in se na telefonu prelomi v dve vrstici. `balance`
     razdeli vrstici enako, da »150 €« ne ostane sam v drugi vrstici. */
  text-align:center;text-wrap:balance;
  transition:background .2s ease,transform .15s ease}
.bb-cta:hover{background:#000;color:#fff;transform:translateY(-1px)}
.bb-cta:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.bb-trust{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;margin-top:14px;
  font-size:12.5px;font-weight:500;color:#4A4B50}
.bb-trust span{display:inline-flex;align-items:center;gap:7px}
.bb-trust i{font-style:normal}
.bb-trust svg{flex:none;color:var(--orange)}
.bb-fine{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:var(--dim)}

/* ---- tablica in telefon ---- */
@media (max-width:980px){
  .buybox{grid-template-columns:1fr;gap:28px}
  .bb-info{align-items:center;text-align:center}
  .bb-info h2{max-width:18ch}
  .bb-lead{margin-left:auto;margin-right:auto}
  .bb-list{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;text-align:left}
  .bb-price{justify-content:center}
  .bb-trust{justify-content:center}
  .bb-fine{max-width:46ch;margin-left:auto;margin-right:auto}
}
@media (max-width:620px){
  .bb-stage{border-radius:14px}
  .bb-nav{margin-top:12px;gap:12px}
  .bb-info h2{font-size:27px;line-height:1.14}
  .bb-lead{font-size:14.5px}
  .bb-plans{gap:8px;margin-top:22px}
  .bb-plan{padding:12px 9px 11px;border-radius:14px}
  .bb-plan-name{font-size:11.5px}
  .bb-plan-price{font-size:16px;gap:2px}
  .bb-plan-price i{font-size:10px;width:100%}
  .bb-plan-note{font-size:10.5px}
  .bb-plan-tag{left:50%;transform:translateX(-50%);font-size:9px;padding:3px 8px}
  .bb-price b{font-size:46px}
  .bb-price span{font-size:12.5px}
  .bb-cta{min-height:64px;font-size:18px;padding:0 14px;text-align:center}
  .bb-trust{gap:8px 16px;font-size:12px}
}
@media (max-width:360px){
  .bb-plan-price{font-size:14.5px}
  .bb-plan-name{font-size:11px}
  .bb-cta{font-size:16px}
}
@media (min-width:981px){
  .bb-arrow{display:grid}
  /* slika je nizja od ponudbe; posadimo jo na sredino, da je blok miren.
     Vsi trije nacrti imajo enako visok seznam, zato se ob preklopu nic ne premakne. */
  .bb-media{align-self:center}
}

/* =====================================================================
   NAPOVEDNI PAS + zaporedje heroja na telefonu (27. 8. 2026)
   ===================================================================== */

/* ---- vrhnja pasova na ozkih zaslonih --------------------------------
   28. 8. 2026: prepis vedenja z invisalign.vbo.si. Tam se na telefonu skrije
   samo DALJSI del besedila (`[data-annc-dolgo]`), pas pa ostane cel. Prej je
   tu izginil ves podnaslov in mere so bile drugacne od namizja. Tukaj to
   pocne razred `.dolgo`. Velikosti pisave ostanejo 11,25 px kot na namizju —
   tam se na telefonu ne zmanjsajo. */
/* 3. 9. 2026 (Max): pas je ENA VRSTICA na vseh širinah — naslov, odštevanje in
   CTA drug ob drugem. Prej je `.annc-txt{flex:1 1 100%}` pod 900 px potisnil
   naslov v svojo vrstico, pod njim pa sta padla odštevanje in povezava, zato je
   bil pas na telefonu visok ~210 px. Zdaj se namesto lomljenja po vrsti
   umikajo: najprej podnaslov, nato sekunde, nato naslov. */
@media (max-width:900px){
  .annc-in{flex-wrap:nowrap;gap:12px}
  /* ⚠ BREZ `align-items:flex-start`: v stolpčnem flexu bi se `b` razširil na
     svojo vsebino (167 px) in ušel iz skrčene škatle (154 px) — naslov je pri
     375 px zlezel v odštevanje. Privzeti `stretch` ga priveže na širino
     starša, zato tropičje sploh deluje. */
  .annc-txt{flex:0 1 auto;text-align:left;min-width:0;overflow:hidden}
  .annc-txt span{display:none}          /* podnaslov gre prvi */
  .annc-txt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dolgo{display:none}
}
@media (max-width:640px){
  .annc-in{gap:9px;padding:9px clamp(12px,3vw,18px)}
  .annc-cd{gap:3px}
  .annc-cd span{min-width:26px;padding:2px 4px}
  .annc-cd b{font-size:11.5px}
  .annc-cd i{font-size:8px}
}
@media (max-width:460px){
  .annc-cd span:last-child{display:none}   /* sekunde gredo druge (odsek riše ui.js brez razredov) */
  .annc-in{gap:8px}
  /* Puščica sprosti 13 px — ravno toliko, da se naslov pri 375 px izpiše cel
     namesto s tropičjem. Povezava je podčrtana, zato ostane razvidna. */
  .annc-cta span[aria-hidden]{display:none}
  /* Še 6 px: ožja razpletenost naslova. Skupaj z umaknjeno puščico se
     »PRIJAVE SE ZAPREJO ČEZ« pri 375 px izpiše v celoti. */
  .annc-txt b{letter-spacing:.03em}
}
@media (max-width:360px){
  .annc-txt{display:none}               /* naslov gre zadnji */
  .annc-in{gap:10px;padding:9px 12px;justify-content:space-between}
}

/* ---- hero na telefonu: video pred gumbom ---- */
@media (max-width:560px){
  .hero-vsl .vsl{order:5;margin:0 auto 16px}
  .hero-vsl .hero-cta{order:6;margin:0 0 8px}
  .hero-vsl .cta-badges{order:7;margin:0 0 4px}
  .hero-vsl .hero-note{order:8;margin:0}
}

/* =====================================================================
   KVIZ: značke z ikonami v eni vrstici + prenovljen pečat (27. 8. 2026)
   ===================================================================== */

/* ---- tri značke, vedno v eni vrstici ---- */
.chips{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:8px;max-width:100%}
.chips span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  /* slog sekundarne ploščice z invisalign.vbo.si: rgba(28,12,2,.07), brez roba */
  background:rgba(28,12,2,.07);border-radius:999px;box-shadow:none;border-color:transparent;
  padding:8px 14px;font-size:12.5px;font-weight:500;color:#2A2522}
.chips svg{flex:none;width:14px;height:14px;color:var(--orange)}

/* Besedilo se na ozkem zaslonu zmanjša toliko, da vrstica ostane ena. 11 px je
   spodnja meja — enako kot značke pod gumbom v heroju. Če bi kdo vseeno prišel
   na še ožji zaslon, se vrstica raje podrsa, kot da bi jo `nowrap` odrezal. */
.chips{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.chips::-webkit-scrollbar{display:none}
@media (max-width:620px){
  .chips{gap:5px}
  .chips span{gap:4px;padding:7px 8px;font-size:clamp(11px,3.1vw,12.5px)}
  .chips svg{width:12px;height:12px}
}
@media (max-width:340px){
  .chips{justify-content:flex-start}
}

/* ---- ploščica »100 % brezplačno« — slog NOVO z invisalign.vbo.si ----
   Izmerjeno tam: polna oranžna #CF4B0C, bela pisava 11,25 px / 700 /
   razmik .675px, polmer 999. Okrogli pečat s prelivom je odstranjen
   (29. 8. 2026), ker ga referenci nimata. */
.seal{position:absolute;top:-13px;right:22px;z-index:2;display:inline-flex;align-items:center;gap:4px;
  background:var(--orange);color:#fff;border-radius:999px;padding:6px 12px;
  box-shadow:var(--sh-btn)}
.seal b,.seal i{font-style:normal;font-size:11.25px;font-weight:700;letter-spacing:.675px;
  text-transform:uppercase;line-height:1}
@media (max-width:620px){
  .seal{top:-12px;right:14px;padding:5px 10px}
  .seal b,.seal i{font-size:10.5px}
}

/* ---- kviz v slogu invisalign.vbo.si + reviews.vbo.si (29. 8. 2026) ----
   Temna ploščica nad naslovom je zamenjana z oranžnim nadnaslovom,
   kot ga imata obe referenci (invisalign: 11,25/600/.12em #B4470F,
   reviews: enak vzorec). Velja samo v odseku kviza — .badge drugod
   (buybox, vesna) ostane temna ploščica. */
#kviz .badge,#rez .badge,body.pod .badge{background:none;border:0;box-shadow:none;padding:0;gap:0;
  color:#B4470F;font-size:11.25px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
#kviz .badge b,#rez .badge b,body.pod .badge b{display:none}

/* Vrstica zaupanja pod kartico: obrazi + oranžne zvezdice + ocena,
   vsebina značke z reviews.vbo.si v svetlem slogu invisalign. */
.kviz-trust{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:#5A5148}
.kviz-trust .stars{color:var(--star);letter-spacing:2px;font-size:13px}
.kviz-trust b{font-weight:600;color:#2A2522}

/* =====================================================================
   LIQUID GLASS GLAVA + SPODNJI PAS
   Glava ima dve stanji:
     - na vrhu strani je DEL strani: ravna, brez ozadja in senc, logotip
       poravnan z besedilom spodaj;
     - ko se stran zapelje navzgor, se preoblikuje v lebdeco stekleno
       kapsulo (zamegljeno ozadje, odsev na robu, mehka senca).
   Visina se med stanjema NE spreminja — sicer bi se vsebina pod glavo
   ob prehodu poskocila.
   Blok je namenoma na koncu datoteke, da povozi staro glavo zgoraj.
   ===================================================================== */

/* ---- 1. vrstica z navigacijo: prepis z invisalign.vbo.si -------------
   28. 8. 2026 (Max). Nadomestila je »liquid glass« kapsulo: glava zdaj ni
   vec sama lepljiva in ne dobi steklenega stanja `.stuck` ob drsenju —
   lepljiv je cel .vrh blok, ki se ob drsenju navzdol odpelje navzgor.
   Zato so odstranjeni: header.stuck, .hdr::before, nav .nav-pill in
   `sync()` v /ponudba/ui.js, ki je dodajal razred `stuck`. */
/* 28. 8. 2026 (Max, tretji popravek): navigacija je VIDNA skatlo cez CELO
   sirino, ne lebdeca kapsula. Bel pas se dotika oranznega napovednega pasu —
   brez odmika in brez zaobljenih vogalov, kot na invisalign.vbo.si, kjer je
   vrstica prav tako zlepljena z pasom nad sabo.
   Zaporedje popravkov: prosojna vrstica -> lebdeca kapsula -> pas cez celo
   sirino. Vsebina ostane omejena na 1280 px z istim clamp odmikom kot pasova. */
header{position:relative;z-index:1;background:#fff;
  border-bottom:1px solid #EBE9E3;
  padding:0;top:auto;margin:0;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.hdr{
  max-width:1280px;margin:0 auto;padding:0 clamp(18px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:64px;min-height:64px;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:auto;
}
/* Logotip je zdaj PNG (Max). Bele kapsule pod njim ne rabi vec — cela
   vrstica je bela, kapsula bi bila nevidna. */
.brand{height:auto;border-radius:0;background:transparent;display:flex;
  align-items:center;padding:0;flex:0 0 auto;gap:0;min-height:0}
.brand img{height:20px;width:auto}

nav{position:static;margin:0;gap:clamp(20px,2.6vw,32px)}
#site-nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,32px)}
#site-nav a{position:static;padding:0;border-radius:0;
  font-size:11.25px;font-weight:500;color:#2A2522;white-space:nowrap}
#site-nav a:hover{color:var(--orange)}
.hdr-desno{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.hdr-tel{font-size:11.25px;font-weight:500;color:#6E655C;white-space:nowrap}
.hdr-tel:hover{color:var(--orange)}
/* Brez zunanje sence: znotraj bele kapsule bi mazala njen zaobljeni rob.
   Na invisalign.vbo.si senca ima smisel, ker gumb stoji na ozadju strani. */
.btn-hdr{display:inline-flex;align-items:center;justify-content:center;height:46px;
  padding:0 24px;border-radius:999px;background:var(--cta);color:#fff;
  font-size:15px;font-weight:700;white-space:nowrap;box-shadow:var(--sh-btn)}
.btn-hdr:hover{background:var(--cta-hover);color:#fff}

/* ---- 2. mobilno: povezave in telefon se umaknejo v burger -------------
   invisalign.vbo.si povezave in telefon pod 860 px samo skrije in menija
   nima. Tu burger ostane, sicer bi obiskovalec na telefonu izgubil dostop
   do Kviza, Mnenj, Vprasanj in Kontakta. */
@media (max-width:860px){
  #site-nav{display:none}
  .hdr-tel{display:none}
  /* flex, ne grid: v gumbu sta ikona in napis MENI drug ob drugem */
  .burger{display:flex;align-items:center;justify-content:center}
  .hdr{gap:10px;height:60px;min-height:60px;padding:0 clamp(14px,4vw,20px)}
  /* Burger je na BELEM pasu, zato brez svojega belega ozadja — dvojna bela
     skatla bi se zlila. Topel svetel ton ga loci. */
  .burger{background:#F5F3EE;border-color:transparent}
  .brand img{height:17px}
  /* CTA je enako visok kot gumb MENI (44 px), da se robova ujemata.
     Sam `height` ne zadostuje: poznejsi blok »dotikalne tarce vsaj 44 px«
     (<=980) postavi .btn na min-height:46px in je CTA gledal 1 px nad in
     pod burgerjem. Zato .hdr .btn-hdr — visja specificnost od .btn. */
  .hdr .btn-hdr{height:44px;min-height:44px;padding:0 16px;font-size:11.25px}
}
@media (max-width:400px){
  /* Trije elementi v vrsti pri 390 px: logotip, CTA in burger.
     Visin tu NE nastavljamo: kasnejsi blok »dotikalne tarce vsaj 44 px«
     (<=980) postavi .btn na min-height:46px in bi jih povozil. */
  .hdr{gap:8px;padding:0 12px}
  .brand img{height:14px}
  .btn-hdr{padding:0 12px}
}

/* ---- 5. spodnji pas s ceno: prilepljen na dno, cez celo sirino ------- */
.sticky-cta.on{left:0;right:0;bottom:0}
.sticky-in{
  border:0;border-top:1px solid rgba(15,15,16,.08);
  border-radius:0;
  /* vsebina pasu ostane v isti 1136px koloni kot ostala stran */
  padding:12px max(22px,calc((100% - 1180px) / 2 + 22px));
  box-shadow:0 -10px 30px rgba(15,15,16,.10);
}
@media (max-width:980px){
  .sticky-cta.on{left:0;right:0;bottom:0}
  .sticky-in{padding:12px 16px;border-radius:0}
}
/* isti pogoj kot izvirni "ena vrstica, nizji" blok, da ohranimo njegov
   navpicni razmik in samo poravnamo pas na rob zaslona */
@media (max-width:720px),(max-height:520px){
  .sticky-cta.on{left:0;right:0;bottom:0}
  .sticky-in{padding:8px 12px;border-radius:0}
}

/* ---- 6. zasilne resitve --------------------------------------------- */
/* Prekrivni meni na telefonu je iz stekla; brez backdrop-filter (starejsi
   Firefox) ni berljiv, zato polno ozadje. Glava sama stekla nima vec. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #site-nav{background:#fff}
}
@media (prefers-reduced-motion:reduce){
  /* Kdor ne mara gibanja, dobi glavo brez drsenja — vedno vidna. */
  .vrh{transition:none}
  .vrh.skrit{transform:none}
  .vrh.skrit header{opacity:1}
}

/* ---- pas z mediji: prepis z invisalign.vbo.si (28. 8. 2026) ----------
   Izmerjeno tam: odmik odseka 43,52 px (= clamp), presledek med logotipi
   56,32 px (= clamp), prosojnost logotipov 0,5, besedila 13,05 px / 600 /
   #6E655C pri prosojnosti 0,75, maska od 5 % do 95 %, obhod 78 s.
   Steza se premakne za POLOVICO svoje sirine; zaporedje je v HTML-ju stirikrat,
   zato je prehod nesiven. */
.medpas{padding:clamp(28px,3.4vw,44px) 0;background:transparent}
.mp-maska{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mp-steza{display:flex;align-items:center;width:max-content;
  animation:mpTece 78s linear infinite}
@keyframes mpTece{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Presledek je desni rob vsakega clena, ne `gap`: pri `gap` bi se ob preskoku
   na -50 % izgubil en presledek in pas bi poskocil. */
.mp-steza > *{flex:0 0 auto;margin-right:clamp(30px,4.4vw,56px)}
/* 14. 9. 2026: logotipi so dokaz v ozadju, obrazi pacientov so glavni.
   Zato so logotipi nizji in bledejsi. Stevila kopij NE zmanjsuj: animacija
   tece do -50 %, polovica steze pa mora ostati sirsa od najsirsega zaslona. */
.mp-steza img{width:auto;max-height:26px;opacity:.38;display:block}
.mp-steza span{font-size:clamp(11px,1.02vw,13px);font-weight:600;letter-spacing:.02em;
  color:#6E655C;opacity:.75;white-space:nowrap;line-height:1}
.mp-pika{width:4px;height:4px;border-radius:999px;background:rgba(42,37,34,.28)}
/* Ob dotiku ali misko nad pasom se ustavi. */
.medpas:hover .mp-steza,.medpas:active .mp-steza{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .mp-maska{overflow-x:auto;overflow-y:hidden;-webkit-mask-image:none;mask-image:none}
  .mp-steza{animation:none}
}

/* ---- 7. razdelek "Kdo lahko nosi Invisalign" ------------------------- */
/* Postavitev je ista kot pri "Za koga je vzdrzevanje" — razdelek si deli
   razred .whofor, zato tu potrebujemo samo nadnaslov in krog za sliko. */
#kdo .head .kicker{
  font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-ink);
}
/* 28. 8. 2026: fotografije so zdaj <img loading="lazy">, prej so bile ozadje
   spana. Ozadja CSS se nalozijo ze ob prvem izrisu, a z NIZKO prednostjo —
   na produkciji so se tri slike po 36 kB zacele nalagati pri 1,8 s, konchale
   pa sele pri 5,7 s, ker so cakale v vrsti za videom in slikami nad pregibom.
   Ta razdelek je ~13.400 px nizko, zato lazy pomeni: nic ne caka v vrsti,
   nalozijo se, ko se jim obiskovalec priblizza, in takrat je omrezje prosto.
   Topel krog znamke ostane kot ozadje same slike, dokler ta ne pride. */
#kdo .kdo-foto{
  display:block;
  width:clamp(140px,15vw,180px);height:clamp(140px,15vw,180px);
  border-radius:50%;margin:0 auto clamp(16px,2vw,24px);
  object-fit:cover;
  background-color:var(--orange-soft);
  box-shadow:inset 0 0 0 1px rgba(27,28,30,.06);
}
/* 28. 8. 2026 (Max): besedilo na sredino, pod krogom. Prej je bilo levo
   poravnano po predlogi; zdaj je poravnano s krogom na vseh sirinah. */
#kdo .whofor>div{text-align:center}

/* ---- 8. cenik: kljukice in vrstica z oceno ---------------------------- */
/* Kljukica postane bel znak v temnem krogu — bolj berljiva kot sama crta.
   Pravilo velja samo za SVG; vrstice z "off" imajo pomisljaj v <span>. */
.bb-list svg.m{
  width:20px;height:20px;padding:3.5px;margin-top:1px;
  border-radius:50%;background:var(--dark);color:#fff;
  stroke-width:3;
  box-shadow:0 1px 2px rgba(15,15,16,.18);
}
/* POZOR: razred .bb-trust je ze zaseden za vrstico jamstev pod gumbom,
   zato ima ocena svoje ime — sicer bi ji povozili slog. */
.bb-rating{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-bottom:14px;font-size:13px;font-weight:600;color:var(--muted);
}
.bb-rating b{color:var(--ink)}
.bb-rating img.g{width:15px;height:15px}
.bb-rating .divider{width:1px;height:14px;background:var(--line)}
@media (max-width:980px){
  .bb-rating{justify-content:center}
  .bb-rating .divider{display:none}
}

/* ---- 9. cenik: slika sega od ocene do dna gumba ----------------------- */
/* Jamstva in drobni tisk sta zdaj pod obema stolpcema, zato se ponudba
   konca pri gumbu — slika se lahko raztegne natanko cez isto visino. */
.buybox{align-items:stretch}
.bb-media{display:flex;flex-direction:column}
.bb-stage{flex:1 1 auto;min-height:0;display:flex}
.bb-track{flex:1 1 auto;align-items:stretch}
.bb-slide{display:flex}
/* contain, ne cover: raztegnjen stolpec je ozji od kvadratne slike in
   cover bi odrezal 63 px na vsaki strani — s tem gresta laver "Diamond
   Provider" in besedilo ob robu. Raje pustimo ozek pas ozadja. */
.bb-slide img{height:100%;aspect-ratio:auto;object-fit:contain;background:#EFEDE8}
.bb-info{justify-content:flex-start}

/* ---- 11. cenik: ponudba v svoji skatli (28. 8. 2026, Max) -------------
   Desni stolpec je prej stal neposredno na kremnem ozadju odseka in se ni
   locil od strani. Zdaj je bela kartica z robom in mehko senco, da je
   ponudba poudarjena.
   POZOR: `.bb-plan` je bil bel; na beli kartici bi izginil, zato dobi topel
   svetel ton. Rob mu ostane, oranzni izbrani nacin pa se ne spremeni. */
.bb-info{
  background:#fff;border:1px solid #EBE9E3;border-radius:28px;
  padding:clamp(20px,2.2vw,30px);
  box-shadow:var(--sh-soft);
}
.bb-plan{background:#FAF8F4}
.bb-plan:hover{background:#F6F2EC}
.bb-plan.is-on{background:#fff}
.bb-buy{margin-top:auto}

/* Jamstva in drobni tisk stojijo pod gumbom, a v desnem stolpcu — tako
   ponudba v prvi vrstici mreze se vedno konca pri gumbu in se slika levo
   lahko poravna z njim. */
.bb-foot{grid-column:2;margin-top:0}
.bb-foot .bb-trust{margin-top:0}
.buybox{row-gap:16px}
@media (max-width:980px){
  .buybox{align-items:start;row-gap:0}
  /* Negativni odmik je gumb polozil cez vrstico jamstev (10 px prekrivanja
     na telefonu). Pod gumbom mora ostati navaden razmik. */
  .bb-foot{grid-column:auto;margin-top:14px}
  .bb-media{display:block}
  .bb-stage{display:block}
  .bb-slide img{height:auto;aspect-ratio:1/1;object-fit:cover}
  .bb-buy{margin-top:20px}
}
@media (min-width:981px){
  /* Prej je bila slika nizja od ponudbe in posajena na sredino (glej pravilo
     zgoraj). Zdaj se razteza cez isto visino, zato sredinjenja ne rabimo vec. */
  .bb-media{align-self:stretch}
}

/* ---- 12. cenik: CEL buybox v ENI beli skatli (29. 8. 2026, Max) --------
   Blok 11 je pobelil samo desni stolpec; vrtiljak je ostal na kremi.
   Zdaj je bela kartica cel .buybox — slike in ponudba na istem belem
   ozadju. Notranja kartica .bb-info zato svojo izgubi (dve beli skatli
   z robom druga v drugi), toni .bb-plan iz bloka 11 ostanejo. Pasova ob
   `contain` slikah pobelita, da se vrtiljak zlije s kartico. */
.buybox{background:#fff;border:1px solid #EBE9E3;border-radius:32px;
  padding:clamp(16px,2.4vw,30px);box-shadow:var(--sh-soft)}
.bb-info{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.bb-stage,.bb-slide img{background:#fff}

/* =====================================================================
   MOBILNA OPTIMIZACIJA — 28. 8. 2026 (vzor: Content Rewards)
   1. meni cez cel zaslon, 2. dotikalne tarce >= 44 px, 3. berljive cene
   Ta blok je NAMENOMA zadnji: pri enaki specificnosti zmaga vrstni red.
   ===================================================================== */
@media (max-width:980px){

  /* ---- 1. meni cez cel zaslon --------------------------------------
     Prej je bil meni prosojna plosca pod glavo in naslov junaka se je
     bral skoznjo. Zdaj prekrije stran, ozadje je neprosojno.
     --meni-top nastavi /ponudba/ui.js po dejanski spodnji ivici glave, ker jo
     vrhnji pas z odstevanjem premakne navzdol. */
  header.open{--meni-top:62px}
  /* TRAPa: backdrop-filter na .hdr naredi iz nje vsebovalni blok za
     position:fixed potomce — prekrivni meni se je zato zamaknil za 13 px.
     Ko je meni odprt, steklena kapsula ni potrebna; glava postane ravna,
     kot v vzoru, in fixed se spet meri po oknu. */
  header.open .hdr{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:transparent;border-color:transparent;box-shadow:none;padding:0 6px}
  header.open .hdr::before{opacity:0}
  header.open .burger{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:#fff;box-shadow:none}
  header.open #site-nav{
    position:fixed;left:0;right:0;top:var(--meni-top);bottom:0;z-index:1;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:clamp(16px,5vw,28px) 22px calc(20px + env(safe-area-inset-bottom));
    max-height:none;overflow-y:auto;
    border:0;border-radius:0;box-shadow:none;
    background:var(--cream);-webkit-backdrop-filter:none;backdrop-filter:none;
    /* Zaslon pod menijem se ne sme premikati. Telesa NE zaklepamo z
       overflow:hidden — s tem glava izgubi lepljivost in odskoci na vrh
       dokumenta. Prekrivni sloj zajame gib sam. */
    overscroll-behavior:contain;touch-action:pan-y;
  }
  header.open #site-nav a{
    display:flex;align-items:center;min-height:64px;padding:6px 0;
    border-radius:0;background:none;color:var(--ink);
    font-size:clamp(26px,7.4vw,35px);font-weight:700;letter-spacing:-.035em;
    text-transform:uppercase;
  }
  header.open #site-nav a:active{color:var(--orange)}
  header.open #site-nav .nav-cenik{
    margin-top:auto;justify-content:center;min-height:60px;padding:0 20px;
    border-radius:999px;background:var(--ink);color:#fff;
    font-size:16px;font-weight:600;letter-spacing:-.01em;text-transform:none;
  }
  /* logotip in gumb morata ostati nad prekrivnim menijem */
  header.open .brand{position:relative;z-index:2}
  .burger{position:relative;z-index:2;
    width:auto;min-width:44px;height:44px;padding:0 11px;gap:8px}
  /* `display` tu NE: gumb je viden samo pod 860 px (blok navigacije);
     display:flex na <=980 ga je risal se ob vrsti povezav. */
  .burger-t{font-size:11.5px;font-weight:700;letter-spacing:.11em;
    text-transform:uppercase;color:var(--ink)}

  /* ---- 2. dotikalne tarce vsaj 44 px -------------------------------- */
  .annc-cta{min-height:44px;display:inline-flex;align-items:center}
  .f-lnk{min-height:34px;display:flex;align-items:center}
  .btn{min-height:46px}
  .brand{min-height:44px;display:flex;align-items:center}
  /* Crtice vrtiljaka so visoke 4 px. Vidno ostanejo enake, prst pa dobi
     nevidno tarco cez vso visino. */
  .bb-seg{position:relative}
  .bb-seg::after{content:'';position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px}

  /* ---- 3. cena mora biti berljiva ----------------------------------- */
  /* povezava na pravila je bila visoka 40 px */
  #zreb a[href*="rules."]{min-height:44px;display:inline-flex;align-items:center}

  .bb-plan-note{font-size:11.5px}
  .bb-plan-price i{font-size:11.5px}
  .chips2 span{font-size:11.5px}
}

/* NOGA: pas pomoči/zaupanja — na telefonu leva poravnava kot .f-grid (29. 8. 2026) */
@media (max-width:760px){
  .f-pomoc{flex-direction:column;align-items:flex-start;gap:22px}
  .f-zaupanje{justify-content:flex-start}
  .f-pombtn{min-height:44px}
}

/* =====================================================================
   KORAKI NAKUPA — vodilo »Kviz → Vaša analiza → Plačilo« (29. 8. 2026)
   Trikoracni tok po vzoru onboardinga (Immortals/Function): tanek pas s
   tremi segmenti in oznakami. Stanja: .je = opravljeno, .zdaj = aktivno
   (aria-current="step"). Pas stoji na kviz.html, rezultat.html in
   blagajna.html; index ga NIMA, ker je tam kviz sele ena od sekcij.
   ===================================================================== */
.koraki-wrap{padding-top:clamp(22px,3vw,34px)}
.koraki{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:0;margin:0 auto;max-width:560px}
.koraki li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin:0}
.koraki li i{display:block;width:100%;height:5px;border-radius:999px;background:#E9E6DF}
.koraki li span{font-size:12.5px;font-weight:600;color:var(--dim)}
.koraki li.je i,.koraki li.zdaj i{background:var(--orange)}
.koraki li.je span{color:var(--muted)}
.koraki li.zdaj span{color:var(--ink)}
#kviz .koraki{margin-bottom:clamp(26px,4vw,40px)}
@media (max-width:520px){.koraki{gap:10px}.koraki li span{font-size:11.5px}}

/* neobvezno polje v kviznem obrazcu (profil): oznaka ob nazivu polja */
.kviz-field label em{font-style:normal;font-weight:500;color:var(--dim)}

/* =====================================================================
   BLAGAJNA — korak Plačilo (blagajna.html, 29. 8. 2026)
   Stran pokaze IZBRANI paket (?paket=letno|mesecno|enkratno; privzeto
   letno), sezname prepise iz buyboxa, placilni gumb pa nosi data-plan,
   da ga /ponudba/funnel.js ozici na ponudnika z utm + sid kot povsod drugje.
   ===================================================================== */
.bg-glava{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;max-width:760px;margin:0 auto clamp(18px,3vw,26px)}
.bg-glava h1{font-size:clamp(26px,3.4vw,38px);margin:0}
.bg-glava p{margin:6px 0 0;font-size:14px;color:var(--muted)}
.bg-nazaj{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;padding:6px 0}
.bg-nazaj:hover{color:var(--orange)}
.bg-kart{max-width:760px;margin:0 auto;background:#fff;border:1px solid #EFE7DD;border-radius:28px;padding:clamp(22px,3vw,34px);box-shadow:var(--sh-soft)}
.bg-za{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);border-bottom:1px solid #EFE7DD;padding-bottom:14px;margin-bottom:18px}
.bg-za b{color:var(--ink)}
.bg-paket h2{font-size:clamp(20px,2.6vw,26px);margin:0}
.bg-cena{display:flex;align-items:baseline;gap:10px;margin:12px 0 4px}
.bg-cena b{font-size:clamp(30px,4vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.bg-cena span{font-size:14px;font-weight:600;color:var(--muted)}
.bg-danes{margin:0 0 16px;font-size:13.5px;color:var(--muted)}
.bg-danes s{color:var(--dim)}
.bg-paket .bb-list{margin:0 0 18px}
.bg-cta{width:100%}
.bg-trust{display:flex;gap:16px 22px;flex-wrap:wrap;margin-top:16px;font-size:12.5px;font-weight:600;color:var(--muted)}
.bg-trust span{display:inline-flex;align-items:center;gap:7px}
.bg-pay{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid #EFE7DD;font-size:12.5px;color:var(--muted)}
.bg-pay .f-chip{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid #E4E2DC;border-radius:8px;padding:4px 8px}
.bg-fine{max-width:760px;margin:14px auto 0;font-size:12px;color:var(--dim);text-align:center}
.bg-menjava{max-width:760px;margin:18px auto 0;font-size:13px;color:var(--muted);text-align:center}
@media (max-width:560px){
  .bg-glava{flex-direction:column;align-items:flex-start}
  .bg-cena b{font-size:30px}
}

/* =====================================================================
   SKLAD VREDNOSTI + BELJENJE (31. 8. 2026, tabla Max)
   Letni seznam v buyboxu (.bb-stack) dobi desni stolpec vrednosti:
   prečrtana cena + »gratis« pri darilih, pod seznamom vsota
   »Po delih 384,40 € → v članstvu 150 € / leto«. Stoji na index.html,
   rezultat.html in blagajna.html (letno kartico uskladi povsod).
   .bb-bump je izbirnik beljenja (+100 €) — TEMEN, dokler ga /ponudba/ui.js ne
   pokaže (BELJENJE.ziv ali ?beljenje=1).
   ===================================================================== */
/* besedilo se krči, vrednost ne — vrstica ostane v eni črti do preloma */
.bb-stack li > span:not(.bs-v){flex:1 1 auto;min-width:0}
.bs-v{flex:none;margin-left:auto;padding-left:10px;white-space:nowrap;
  font-size:13px;font-weight:600;color:#9A978F;font-variant-numeric:tabular-nums}
.bs-v s{color:#B9B6AE;margin-right:5px}
/* »gratis« podeduje oranžno od .bb-list li b */

.bb-total{width:100%;margin-top:14px;padding:12px 14px;background:#FAF8F4;
  border:1px solid #EFE7DD;border-radius:14px;font-variant-numeric:tabular-nums}
.bb-total .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;color:var(--muted)}
.bb-total .row + .row{margin-top:4px}
.bb-total .row.hi{font-size:14.5px;color:var(--ink)}
.bb-total .row.hi b{font-weight:800;color:var(--ink)}
.bb-total .save{margin-top:9px;padding-top:9px;border-top:1px dashed #E4E2DC;
  font-size:12.5px;font-weight:700;color:var(--orange)}

/* [hidden] mora premagati display:flex (glej pravilo pri .bb-list) */
.bb-total[hidden],.bb-bump[hidden],.bb-bump-wrap[hidden]{display:none}
.bb-bump{display:flex;gap:11px;align-items:flex-start;width:100%;margin-top:12px;
  padding:13px 14px;background:#FFF7EF;border:1.5px dashed var(--orange);
  border-radius:14px;cursor:pointer;text-align:left}
.bb-bump input{flex:none;width:19px;height:19px;margin:1px 0 0;
  accent-color:var(--orange);cursor:pointer}
.bb-bump input:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.bb-bump .bump-txt{display:flex;flex-direction:column;gap:3px;
  font-size:13.5px;line-height:1.45;color:var(--muted)}
.bb-bump .bump-txt b{font-size:14px;font-weight:700;color:var(--ink)}
.bb-bump .bump-txt i{font-style:normal}

/* na blagajni kartica teče navzdol kot blok: razmik do gumba */
.bg-paket .bb-total,.bg-paket .bb-bump{margin-bottom:18px}
.bg-paket .bb-stack{margin-bottom:0}

@media (max-width:980px){
  /* seznam s stolpcem vrednosti rabi vso širino, sicer se vrednosti
     zlepijo ob besedilo (splošni .bb-list ima width:fit-content) */
  .bb-stack{width:100%}
  .bb-total,.bb-bump{text-align:left}
}
@media (max-width:420px){
  .bs-v{font-size:12px}
  .bb-stack li{font-size:13.5px}
}

/* Grafika paketa v izbirniku beljenja (31. 8. 2026, Higgsfield + oznake).
   Sliko strezhe overlay pod /ponudba/slike/ (port preslika /ponudba/slike/). */
.bb-bump .bump-img{flex:none;width:92px;height:92px;border-radius:12px;
  object-fit:cover;background:#fff;border:1px solid #EFE7DD}
@media (max-width:420px){
  .bb-bump .bump-img{width:72px;height:72px}
}

/* Kartica protokola v »Sedem stvari«: knjižni mockup kot mini plakat
   (31. 8. 2026, Max — zamenja g-rows kartico).
   1. 9. 2026: slika je PROSOJNA (izrez knjige, brez lastnega temnega ozadja),
   zato ni več `border-radius` — zaobljal je le tisto temno škatlo. `drop-shadow`
   zdaj sledi obrisu knjige in ne robu slike. */
.g-knjiga{max-height:180px;filter:drop-shadow(0 16px 26px rgba(20,10,4,.32))}

/* Nabor slik v vrtiljaku (31. 8. 2026): skrite figure drugega nabora.
   .bb-slide ima display:flex (blok 9) — [hidden] rabi izrecno pravilo. */
.bb-slide[hidden]{display:none}

/* =====================================================================
   ZNANOST — /ponudba/znanost.html (1. 9. 2026, Max)
   Prepis oblikovanja »Vivera Znanost v2.dc.html« iz Claude Design
   (projekt »Vivera Science Page Build«, a66651be, Tim).

   Trije zavestni odmiki od izvoza, da stran sede v ostalo spletno mesto:
   1. Pisava: izvoz kliče Figtree z Google Fonts, tu ostane samoglasovani
      Montserrat (izvoz ga navaja kot prvi nadomestek). Brez zunanje pisave
      stran ne izgubi hitrosti, ki smo jo dobili 28. 8.
   2. Debelina naslovov: veliki naslovi 500, kartice 600 — kot na
      invisalign.vbo.si. Izvoz ima vse na 600.
   3. Glava, napovedni pas, noga in lepljivi CTA so skupni deli tega mesta,
      ne izvoza; izvozovo lastno glavo in nogo nadomestita.

   Zavihki »Tri sile« so radijski gumbi + :has() — brez JS. Kjer :has() ni
   podprt, se vse tri plošče izpišejo eno pod drugo in vrstica zavihkov se
   skrije, da ne kaže gumbov, ki nič ne naredijo.
   ===================================================================== */
body.zn{
  /* 2. 9. 2026 (Max): topla bež paleta izvoza je zamenjana z žetoni te
     strani, da je Znanost videti kot /ponudba (ista krema, isti sivi toni,
     isti temni in oranžni). Imena spremenljivk ostajajo zaradi pravil spodaj. */
  --zn-line:var(--line);
  --zn-line-2:#DADCE0;
  --zn-cream:var(--cream);
  --zn-cream-2:#F7F6F2;
  --zn-peach:var(--orange-soft);
  --zn-peach-2:var(--orange-soft);
  --zn-dark:var(--dark);
  --zn-dark-line:rgba(255,255,255,.14);
  --zn-warm:var(--orange-2);
  --zn-body:var(--muted);
  /* Opombe o virih: nevtralna siva z vsaj 4,5:1 na beli in kremi. */
  --zn-dim:#66676C;
}

/* ---- skupni gradniki ---- */
.zn-sec{padding:clamp(40px,5.6vw,88px) 0}
.zn-sec.tesno{padding-top:0}
.zn-mid{max-width:886px;margin:0 auto;min-width:0}
.zn-stolpec{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.zn-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-ink)}
.zn-kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.zn-ac{color:var(--orange)}
.zn-sec h2{font-size:clamp(28px,3.8vw,44px);line-height:1.05;text-wrap:balance}
.zn-sec h3{font-size:clamp(18px,1.9vw,21px);line-height:1.2;font-weight:600}
.zn-sredina{text-align:center}
.zn-h2-mb{margin-bottom:clamp(20px,2.4vw,32px)}
.zn-blok-mb{margin-bottom:clamp(26px,3.4vw,48px)}
.zn-blok-mt{margin-top:clamp(30px,3.8vw,48px)}
.zn-lead{margin:0;font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.6;color:var(--muted);text-wrap:pretty}
.zn-p{margin:0;font-size:clamp(14.5px,1.35vw,16px);line-height:1.65;color:var(--zn-body);text-wrap:pretty}
.zn-note{margin:20px 0 0;font-size:12.5px;line-height:1.6;color:var(--zn-dim)}
.zn-src{font-size:13px;font-weight:500;color:var(--zn-dim)}
.zn-uvod{margin:0;font-size:clamp(13.5px,1.4vw,15px);line-height:1.6;font-weight:500;color:var(--zn-body)}

/* ---- hero ---- */
.zn-hero{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.8vw,22px);text-align:center}
.zn-hero h1{text-wrap:balance}
.zn-hero .zn-lead{max-width:34ch}
/* Slika je podlaga (absolutna), kartici pa določata višino bloka. Tako se
   besedilo v karticah nikoli ne odreže, tudi ko se prelomi v več vrstic —
   pri fiksni višini slike (520 px kot v izvozu) se je. */
.zn-shot{position:relative;margin-top:clamp(26px,3.6vw,56px);border-radius:var(--radius-sec);overflow:hidden;
  display:grid;align-items:end;min-height:clamp(240px,40vw,520px)}
.zn-shot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%}
.zn-po-sliki{margin:clamp(28px,3.2vw,48px) auto 0}
.zn-shot-kartice{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:end;
  gap:clamp(14px,2vw,24px);padding:clamp(150px,17vw,240px) clamp(16px,2.4vw,32px) clamp(16px,2.4vw,32px)}
.zn-kart{background:#fff;border-radius:20px;padding:clamp(18px,2.1vw,26px);max-width:420px;box-shadow:var(--card-ring)}
.zn-kart .zn-kicker{display:block;margin-bottom:8px}
.zn-kart b{display:block;font-size:clamp(17px,1.8vw,20px);line-height:1.2;font-weight:600;color:var(--ink);margin-bottom:10px}
.zn-kart p{margin:0;font-size:clamp(13.5px,1.3vw,14.5px);line-height:1.55;color:var(--zn-body)}
.zn-kart.temna{background:var(--zn-dark);justify-self:end}
.zn-kart.temna .zn-kicker{color:var(--zn-warm)}
.zn-kart.temna b{color:#fff}
.zn-kart.temna p{color:rgba(255,255,255,.78)}
@media (max-width:900px){
  /* Na telefonu kartici ne moreta stati na sliki (besedilo bi ostalo brez
     prostora), zato se postavita pod njo, ena pod drugo. */
  .zn-shot{display:block;overflow:visible;min-height:0}
  .zn-shot>img{position:static;height:clamp(200px,50vw,340px);border-radius:16px}
  .zn-shot-kartice{grid-template-columns:1fr;padding:14px 0 0}
  .zn-kart,.zn-kart.temna{max-width:none;justify-self:stretch}
}

/* ---- vrstica sider ---- */
.zn-sidra{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(26px,3.2vw,40px)}
.zn-sidra a{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:#fff;
  border:1px solid var(--zn-line-2);font-size:13.5px;font-weight:600;color:var(--ink);
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.zn-sidra a:hover{background:var(--orange);border-color:transparent;color:#fff}

/* ---- zavihki »Tri sile« ---- */
.zn-tabbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:clamp(20px,2.4vw,32px)}
.zn-tabbar input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.zn-tabbar label{display:inline-flex;align-items:center;min-height:46px;padding:8px 22px;border-radius:999px;
  background:#fff;border:1px solid var(--zn-line-2);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.zn-tabbar input:focus-visible+label{outline:2px solid var(--orange);outline-offset:2px}
.zn-tabs:has(#zn-s1:checked) label[for=zn-s1],
.zn-tabs:has(#zn-s2:checked) label[for=zn-s2],
.zn-tabs:has(#zn-s3:checked) label[for=zn-s3]{background:var(--orange);border-color:transparent;color:#fff;box-shadow:var(--sh-btn)}
.zn-tabbox{background:#fff;border-radius:var(--radius-sec);padding:clamp(22px,3.4vw,48px);box-shadow:var(--card-ring)}
.zn-tabp{display:flex;flex-direction:column;gap:14px;max-width:886px;margin:0 auto}
.zn-tabp+.zn-tabp{margin-top:22px;padding-top:22px;border-top:1px solid var(--zn-line)}
@supports selector(:has(*)){
  .zn-tabp{display:none}
  .zn-tabp+.zn-tabp{margin-top:0;padding-top:0;border-top:0}
  .zn-tabs:has(#zn-s1:checked) .zn-tabp[data-s="1"],
  .zn-tabs:has(#zn-s2:checked) .zn-tabp[data-s="2"],
  .zn-tabs:has(#zn-s3:checked) .zn-tabp[data-s="3"]{display:flex}
}
@supports not selector(:has(*)){
  .zn-tabbar{display:none}
}

/* ---- poudarjeni bloki ---- */
.zn-callout{background:#fff;border:0;border-radius:var(--radius-sec);padding:clamp(24px,3.2vw,44px);box-shadow:var(--card-ring)}
.zn-callout p{margin:14px 0;font-size:clamp(16px,1.8vw,19px);line-height:1.55;font-weight:500;color:var(--ink);text-wrap:pretty}
.zn-orange{background:#B4470F;color:#fff;border-radius:var(--radius-sec);text-align:center;
  padding:clamp(30px,4.4vw,56px) clamp(22px,3.6vw,48px)}
.zn-orange .zn-kicker{display:block;color:#fff;margin-bottom:16px}
.zn-orange p{margin:0;font-size:clamp(16px,1.8vw,19px);line-height:1.55;text-wrap:pretty}
.zn-peach{background:#fff;border-radius:var(--radius-sec);padding:clamp(22px,2.8vw,36px);box-shadow:var(--card-ring)}
.zn-peach h3{margin-bottom:12px}
.zn-peach p{margin:0;font-size:clamp(14.5px,1.35vw,16px);line-height:1.65;color:var(--zn-body);text-wrap:pretty}
.zn-panel{background:#fff;border-radius:var(--radius-sec);padding:clamp(18px,2.8vw,40px);box-shadow:var(--card-ring)}

/* ---- graf ---- */
.zn-legenda{display:flex;flex-wrap:wrap;gap:12px 24px;margin-bottom:20px;font-size:13px;font-weight:600}
.zn-legenda span{display:inline-flex;align-items:center;gap:10px}
.zn-legenda i{width:26px;height:4px;border-radius:2px;flex:none}
.zn-legenda i.a{background:var(--orange)}
.zn-legenda i.b{background:var(--dim)}
.zn-legenda i.c{background:var(--green)}
.zn-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.zn-graf{width:100%;height:auto;display:block}
/* Namig se pokaže samo tam, kjer graf in tabela res drsita v stran. */
.zn-namig{display:none}
@media (max-width:760px){
  /* Pisave v grafu so v koordinatah viewBoxa: pod ~680 px postanejo
     neberljive, zato graf raje drsi kot se krči. */
  .zn-graf{min-width:680px}
  .zn-namig{display:block;margin:8px 0 0;font-size:12px;font-weight:600;color:var(--zn-dim)}
}

/* ---- tabeli ---- */
.zn-tab{display:grid;gap:1px;background:var(--zn-line);border-radius:14px;overflow:hidden;
  font-size:14.5px;font-weight:500;margin-top:clamp(20px,2.4vw,32px)}
.zn-tab>div{background:#fff;padding:14px 16px}
.zn-tab .h{background:var(--zn-cream);font-weight:600}
.zn-tab .k{font-weight:600}
.zn-tab .v{color:var(--zn-body);line-height:1.6}
.zn-tab .alt{background:var(--zn-cream-2)}
.zn-tab-4{grid-template-columns:1.2fr 1fr 1fr 1.4fr;min-width:760px}
.zn-tab-2{grid-template-columns:1fr 2fr}
@media (max-width:760px){
  /* dve trditvi ena pod drugo; glava ni več smiselna, ker je vrstica ena sama */
  .zn-tab-2{grid-template-columns:1fr}
  .zn-tab-2 .h{display:none}
  .zn-tab-2 .k{background:var(--zn-cream)}
}

/* ---- tri poti ---- */
.zn-band{background:#fff;border-radius:var(--radius-sec);padding:clamp(44px,5.6vw,88px) 0;margin-top:clamp(44px,5.6vw,88px)}
.zn-poti{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.8vw,32px);align-items:start}
.zn-pot{display:flex;flex-direction:column;gap:12px;padding-right:clamp(18px,2.2vw,32px);border-right:1px solid var(--zn-line-2)}
.zn-pot:last-child{padding-right:0;border-right:0}
.zn-pot p{margin:0;font-size:clamp(14px,1.45vw,16px);line-height:1.65;color:var(--zn-body)}
@media (max-width:900px){
  .zn-poti{grid-template-columns:1fr}
  .zn-pot{padding:0 0 22px;border-right:0;border-bottom:1px solid var(--zn-line-2)}
  .zn-pot:last-child{padding-bottom:0;border-bottom:0}
}

/* ---- temni pas s podatki ---- */
.zn-dark{background:var(--zn-dark);color:#fff;padding:clamp(44px,5.6vw,88px) 0}
.zn-dark-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.2vw,64px)}
.zn-dark .zn-kicker{color:var(--zn-warm)}
.zn-dark p{margin:0;font-size:clamp(15px,1.5vw,17px);line-height:1.65;color:rgba(255,255,255,.86);text-wrap:pretty}
.zn-fakti{display:flex;flex-direction:column;gap:12px}
.zn-fakt{border-top:1px solid var(--zn-dark-line);padding-top:12px;font-size:clamp(14.5px,1.35vw,16px);
  line-height:1.6;color:rgba(255,255,255,.86)}
@media (max-width:820px){
  .zn-dark-grid{grid-template-columns:1fr}
}

/* ---- mit / dejstvo ---- */
.zn-miti{display:flex;flex-direction:column;gap:14px}
.zn-mit{background:#fff;border-radius:20px;padding:clamp(20px,2.4vw,32px);box-shadow:var(--card-ring)}
.zn-mit b{display:block;font-size:clamp(16px,1.7vw,18px);font-weight:600;color:var(--ink);margin-bottom:10px}
.zn-mit p{margin:0;font-size:clamp(14.5px,1.35vw,16px);line-height:1.65;color:var(--zn-body)}
.zn-mit i{font-style:normal;font-weight:600;color:var(--orange)}

/* ---- glas zdravnice ---- */
.zn-glas{display:grid;grid-template-columns:200px 1fr;gap:clamp(22px,3.4vw,40px);align-items:center}
.zn-glas>img{width:100%;height:250px;object-fit:cover;object-position:center top;border-radius:16px;
  background:#fff;border:1px solid #EBE9E3}
.zn-glas blockquote{margin:0;font-size:clamp(17px,2vw,21px);line-height:1.5;font-weight:500;color:var(--ink);text-wrap:pretty}
.zn-glas cite{display:block;margin-top:14px;font-size:13.5px;font-style:normal;font-weight:600;color:var(--muted)}
@media (max-width:720px){
  .zn-glas{grid-template-columns:1fr;gap:18px}
  .zn-glas>img{height:270px;object-position:center 10%}
}

/* ---- zaključni CTA + viri ---- */
.zn-cta{background:#fff;border-radius:var(--radius-sec);text-align:center;display:flex;flex-direction:column;align-items:center;
  gap:clamp(16px,2.2vw,24px);padding:clamp(34px,5vw,72px) clamp(22px,3.6vw,48px);box-shadow:var(--card-ring)}
.zn-cta h2{max-width:22ch}
.zn-cta .zn-lead{max-width:38ch}
.zn-refs{margin:0;padding:0 0 0 26px;display:flex;flex-direction:column;gap:12px;
  font-size:14px;line-height:1.6;font-weight:500;color:var(--zn-body)}
.zn-refs li{padding-left:4px}

/* =====================================================================
   CENIK v2b — nova ponudba (1. 9. 2026, Claude Design »VBO Cenik Paket v2b«)
   =====================================================================
   Kaj se je spremenilo proti prejšnjemu buyboxu:
     · stolpca sta zamenjana — LEVO ponudba, DESNO slike (prej obratno),
     · trije enakovredni pilulasti gumbi so zamenjani z ENO razširjeno kartico
       (letni načrt s celotnim skladom vrednosti) in kompaktnimi vrsticami,
     · gumb je oranžen, ne temen,
     · pod gumbom stojita dva citata, ob slikah pa znamka in ordinacija.

   Vsi novi razredi imajo predpono .bb2- in veljajo samo tukaj. Razrede .bb-*
   si /ponudba deli z rezultat.html in blagajna.html — teh NE spreminjamo,
   povozimo jih samo znotraj .buybox.bb2.
   ===================================================================== */

/* ---- razporeditev: ponudba levo, slike desno ---- */
.buybox.bb2{grid-template-columns:minmax(0,9fr) minmax(0,11fr);align-items:start;row-gap:0;
  gap:clamp(24px,3.2vw,44px);max-width:1230px}
.cenik-head{margin-bottom:clamp(24px,3vw,36px)}
.cenik-head h2{max-width:26ch;margin:0 auto;text-align:center;text-wrap:balance;color:#27282A;
  font-size:clamp(30px,3.6vw,46px);line-height:1.12;font-weight:600}
.cenik-head h2 .akcija{color:#C0341B}

/* .bb-info je flex stolpec z align-items:flex-start; nova vsebina hoče polno
   širino, zato tukaj stretch. Gumb ne sme več pasti na dno stolpca — pod njim
   stojijo jamstva in citata. */
.bb2 .bb-info{align-items:stretch}
.bb2 .bb-buy{margin-top:0}
.bb2 .bb-media{display:flex;flex-direction:column;gap:16px}
.bb2 .bb-stage{flex:none}
.bb2 .bb-slide img{height:auto;aspect-ratio:1/1;object-fit:cover}
.bb2 .bb-nav{margin-top:0}
.bb2 .bb-fine{max-width:none;text-align:center;margin-top:16px}

/* ---- pas nujnosti ---- */
.bb2-urg{display:flex;align-items:center;gap:10px;border-radius:20px;background:var(--orange-soft);
  padding:11px 16px;font-size:13.5px;font-weight:700;color:var(--text)}
.bb2-urg .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.bb2 .bb-rating{margin:16px 0 0}
.bb2 .bb-rating a{font-weight:700;color:var(--orange)}
.bb2 .bb-rating a:hover{color:#A93C0A}
.bb2 .bb-info h2{margin-top:14px}
.bb2 .bb-lead{margin:10px 0 0;font-size:15.5px;font-weight:600;color:var(--text);max-width:44ch}

/* ---- štiri prednosti z ikonami ---- */
.bb2-feat{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.bb2-feat li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--text)}
.bb2-feat .ic{flex:none;width:32px;height:32px;border-radius:50%;background:var(--orange-soft);
  display:inline-flex;align-items:center;justify-content:center;color:var(--orange)}

.bb2-title{margin-top:18px;font-size:16px;font-weight:700;color:var(--ink)}
/* V izvozu je v verzalkah SAMO naslov nad paketi; »Izberite prevzem« in
   »Koliko oseb?« sta navadna, zato je to modifikator in ne privzetek. */
.bb2-title.verzalke{text-transform:uppercase;letter-spacing:.04em}
.bb2-hint{display:inline-block;margin-left:8px;border:1px dashed #D1D5DB;border-radius:999px;
  padding:4px 12px;font-size:12px;font-weight:600;color:var(--muted)}

/* ---- skupina paketov ---- */
.bb2-plans{margin-top:0}

/* =====================================================================
   CENIK v2c — dva koraka (3. 9. 2026, Claude Design »VBO Cenik Paket v2c«)
   Isti tok kot v2d, okroglejši robovi in debelejša pisava.
   Stari .bb2-card / .bb2-row ostanejo v CSS za morebitni predogled.
   ===================================================================== */
.bb2-korak{margin-top:22px;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text)}
.bb2-nacin{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;margin-top:10px;align-items:stretch}
.bb2-nacin-kartica{position:relative;display:flex;flex-direction:column;gap:6px;
  border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:16px;
  cursor:pointer;font-family:inherit;color:var(--text);text-align:left}
.bb2-nacin-kartica:hover{border-color:#C9C6BE}
.bb2-nacin-kartica:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.bb2-nacin-sub{box-shadow:0 4px 12px rgba(0,0,0,.06)}
.bb2-nacin-kartica.is-on,
#bbPlans:not(:has([data-pick="enkratno"].is-on)) .bb2-nacin-sub{
  box-shadow:inset 0 0 0 2px var(--orange);background:rgba(253,228,216,.22)}
#bbPlans:not(:has([data-pick="enkratno"].is-on)) .bb2-nacin-sub{
  box-shadow:inset 0 0 0 2px var(--orange),0 4px 12px rgba(0,0,0,.06)}
.bb2-nacin-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bb2-nacin-top b{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bb2-nacin-top b.oranzna{color:var(--orange-ink)}
.bb2-nacin-kartica .bb2-radio{width:22px;height:22px}
.bb2-nacin-cena{margin-top:4px;font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1}
.bb2-nacin-kartica>i{font-style:normal;font-size:12.5px;line-height:1.45;color:var(--muted)}
.bb2-nacin-cena-vrstica{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.bb2-nacin-cena-vrstica s{font-size:14px;font-weight:600;color:#C0341B}
.bb2-nacin-cena-vrstica i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted)}
.bb2-nacin-plus{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.bb2-nacin-plus span{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text)}
.bb2-nacin-plus svg{flex:none;color:var(--green)}
.bb2-nacin-sub .bb2-flag{top:-11px;left:16px;transform:none;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;padding:4px 10px;border-radius:6px;text-transform:uppercase}

.bb2-nacin-kartica.is-on .bb2-radio,
#bbPlans:not(:has([data-pick="enkratno"].is-on)) .bb2-nacin-sub .bb2-radio,
.bb2-up-kartica.is-on .bb2-radio{
  border-color:var(--orange);background:var(--orange);color:#fff;box-shadow:none}
.bb2-nacin-kartica.is-on .bb2-radio svg,
#bbPlans:not(:has([data-pick="enkratno"].is-on)) .bb2-nacin-sub .bb2-radio svg,
.bb2-up-kartica.is-on .bb2-radio svg{opacity:1}

.bb2-up{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:22px;padding-top:14px;align-items:stretch}
.bb2-up-kartica{position:relative;display:flex;flex-direction:column;gap:4px;min-height:262px;
  border:1.5px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fff 0%,#F7F6F3 100%);
  padding:14px;cursor:pointer;min-width:0;overflow:visible;font-family:inherit;color:var(--text);text-align:left}
.bb2-up-kartica:hover{border-color:#C9C6BE}
.bb2-up-kartica.is-on{box-shadow:inset 0 0 0 2px var(--orange);background:rgba(253,228,216,.18)}
.bb2-up-kartica:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.bb2-up-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;z-index:1}
.bb2-up-top b{font-size:13px;font-weight:700;line-height:1.25}
.bb2-up-kartica .bb2-radio{width:22px;height:22px}
.bb2-up-cena{margin-top:6px;font-size:clamp(15px,3.1cqi,19px);font-weight:700;letter-spacing:-.03em;
  line-height:1.15;white-space:normal;z-index:1;max-width:100%;overflow-wrap:anywhere}
.bb2-up-cena span{font-size:.74em;font-weight:600;letter-spacing:0;white-space:nowrap}
.bb2-up-kartica>i{font-style:normal;font-size:11.5px;line-height:1.35;color:var(--muted);
  white-space:normal;z-index:1}
.bb2-up-badge{align-self:flex-start;margin-top:6px;background:var(--green);color:#fff;font-size:10.5px;
  font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;z-index:1}
.bb2-up-kartica>img{position:absolute;right:-6px;bottom:-8px;width:64%;height:auto;object-fit:contain;
  pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.16));z-index:0}
.bb2-up-kartica[data-pick="mesecno"]>img{width:54%;right:-4px;bottom:-6px}
.bb2-up-kartica .bb2-flag{top:-11px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;
  letter-spacing:.04em;padding:4px 10px;border-radius:6px;text-transform:uppercase}
.bb2-up-kartica.kmalu{cursor:default;background:#FBFBFC;border-style:dashed;border-color:#DDD9D2}
.bb2-up-kartica.kmalu:hover{border-color:#DDD9D2}
.bb2-up-kartica.kmalu .bb2-radio{border-color:#DFDCD6;background:#F4F2EE}
.bb2-up-kartica.kmalu .bb2-up-cena{color:var(--muted)}

.bb2-vklj{margin-top:14px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.bb2-vklj-in{padding:16px 18px 0}
.bb2-gift-pill{margin-left:6px;background:var(--green);color:#fff;padding:3px 9px;border-radius:999px;
  font-size:10.5px;letter-spacing:.04em;vertical-align:2px}
.bb2-mesec-opozorilo{display:flex;align-items:center;gap:10px;margin:12px 0 4px;padding:10px 12px;
  border:1px dashed #D1D5DB;border-radius:10px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.bb2-mesec-opozorilo svg{flex:none}
.bb2-skok{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--orange);
  text-decoration:underline;cursor:pointer}
.bb2 .bb-price b{font-weight:700}
.bb2-cardfoot.stiri{grid-template-columns:repeat(4,1fr)}
.bb2-cardfoot.stiri span{border-right:1px solid var(--line)}
.bb2-cardfoot.stiri span:last-child{border-right:0}
.bb2-cardfoot.dva{grid-template-columns:1fr 1fr}
.bb2-cardfoot.dva span{white-space:nowrap}
.bb2-enkrat-note{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.bb2-enkrat-note[hidden]{display:none}

@media (max-width:720px){
  .bb2-nacin{grid-template-columns:1fr}
  .bb2-up{gap:8px}
  .bb2-up-kartica{min-height:220px;padding:12px 10px}
  .bb2-up-cena{font-size:16px}
  .bb2-nacin-cena{font-size:26px}
  .bb2-cardfoot.stiri{grid-template-columns:1fr 1fr}
  .bb2-cardfoot.stiri span:nth-child(2){border-right:0}
}
@media (max-width:420px){
  .bb2-up{grid-template-columns:1fr}
  .bb2-up-kartica{min-height:160px}
  .bb2-up-kartica>img{width:48%}
}

/* Letni načrt: kartica z zeleno zastavico, glavo in skladom vrednosti.
   Zastavica visi čez rob, zato kartica NE sme imeti overflow:hidden na
   zunanjem ovoju — polmer režejo notranji elementi sami. */
.bb2-card{position:relative;border-radius:14px;background:#fff;border:1.5px solid var(--line);
  box-shadow:0 4px 12px rgba(0,0,0,.08)}
.bb2-flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:6;
  background:var(--green);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:5px 16px;border-radius:8px;white-space:nowrap;box-shadow:0 2px 8px rgba(96,168,134,.3)}

.bb2-head{display:flex;align-items:center;gap:12px;width:100%;padding:14px 18px;cursor:pointer;
  border:0;border-bottom:1px solid var(--line);border-radius:12.5px 12.5px 0 0;
  background:#fff;color:var(--text);font-family:inherit;text-align:left}
.bb2-head.is-on{background:var(--orange);color:#fff;border-bottom-color:transparent}
.bb2-card:has(.bb2-head.is-on){box-shadow:0 4px 12px rgba(0,0,0,.08),inset 0 0 0 2px var(--orange)}
.bb2-head:focus-visible,.bb2-row:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.bb2-radio{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid #D1D5DB;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;color:var(--orange)}
.bb2-radio svg{opacity:0}
.is-on .bb2-radio{border-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.is-on .bb2-radio svg{opacity:1}

.bb2-name{font-size:16.5px;font-weight:700}
.bb2-money{margin-left:auto;text-align:right;line-height:1.2}
.bb2-money b{display:block;font-size:19px;font-weight:700;white-space:nowrap}
.bb2-money i{display:block;font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.is-on .bb2-money i,.is-on .bb2-txt i{color:rgba(255,255,255,.88)}

.bb2-body{padding:16px 18px 0}
.bb2-kicker{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--text)}
.bb2-item{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #F2F2F3}
.bb2-kicker + .bb2-item{padding:14px 0}
.bb2-item:last-child{border-bottom:0}
.bb2-item.sep{border-bottom:0;border-top:1px solid #F2F2F3}
/* Sličice so kvadratni izrezi z alfo (tools: PIL, glej slike/t-*.webp), zato
   contain in brez roba — cover bi izdelek odrezal, rob pa bi okoli prosojnega
   ozadja narisal prazen okvir. */
.bb2-item>img{flex:none;width:54px;height:54px;object-fit:contain}
.bb2-item .ic{flex:none;width:54px;height:54px;border-radius:10px;background:var(--orange-soft);
  display:inline-flex;align-items:center;justify-content:center;color:var(--orange)}
.bb2-item>span:not(.bb2-val):not(.ic){min-width:0}
.bb2-item b{display:block;font-size:14px;font-weight:700;color:var(--text)}
.bb2-item i{display:block;font-style:normal;font-size:12.5px;line-height:1.4;color:var(--muted)}
.bb2-val{margin-left:auto;flex:none;background:var(--green);color:#fff;font-size:11.5px;font-weight:700;
  padding:5px 12px;border-radius:999px;white-space:nowrap}

.bb2-gift{display:flex;align-items:center;gap:12px;padding:14px 0 4px}
.bb2-gift i{flex:1;border-top:1.5px dashed #D1D5DB}
.bb2-gift span{flex:none;background:var(--green);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.06em;padding:4px 12px;border-radius:6px}

.bb2-cardfoot{display:grid;grid-template-columns:1fr 1fr;background:#F2F2F3;border-top:1px solid var(--line);
  border-radius:0 0 12.5px 12.5px;margin-top:12px}
.bb2-cardfoot span{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;
  font-size:12.5px;font-weight:600;color:var(--text)}
.bb2-cardfoot span:first-child{border-right:1px solid var(--line)}
.bb2-cardfoot svg{flex:none;color:var(--dim)}

/* ---- kompaktni vrstici (paket z beljenjem, mesečno) ---- */
.bb2-row{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;cursor:pointer;
  border:1px solid var(--line);border-radius:14px;background:#fff;padding:15px 18px;
  font-family:inherit;color:var(--text);text-align:left}
.bb2-row:hover{border-color:#C9C6BE}
.bb2-row.is-on{background:var(--orange);color:#fff;border-color:var(--orange);
  box-shadow:0 4px 14px rgba(207,75,12,.28)}
.bb2-row .bb2-radio{width:24px;height:24px}
.bb2-txt{min-width:0}
.bb2-txt b{display:block;font-size:15px;font-weight:700}
.bb2-txt i{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}
.bb2-row .bb2-money b{font-size:17px}

/* ---- zaklenjena nadgradnja (»Kmalu«) --------------------------------
   Vrstica z beljenjem je vidna, ker ponudbo napove, a je ni mogoče izbrati,
   dokler ni plačilne poti. Ne bledimo je čez mero — še vedno mora prodajati.
   Signal, da klik ne bo nič naredil, nosita črtkan rob in značka; prazen
   krogec pa pove, da to ni izbran paket. */
.bb2-row.kmalu{cursor:default;background:#FBFBFC;border-style:dashed;border-color:#DDD9D2}
.bb2-row.kmalu:hover{border-color:#DDD9D2}
.bb2-row.kmalu .bb2-radio{border-color:#DFDCD6;background:#F4F2EE}
.bb2-row.kmalu .bb2-money b{color:var(--muted)}
.bb2-row.kmalu .bb2-money i{color:var(--dim)}
.bb2-kmalu{display:inline-block;margin-left:6px;background:var(--orange-soft);color:#A93C0A;
  border-radius:999px;padding:3px 9px;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;vertical-align:1px}

/* ---- enkratni nakup ---- */
.bb2-once{margin-top:14px;text-align:center}
.bb2-link{position:relative;border:0;background:none;padding:4px 8px;font-family:inherit;
  font-size:13.5px;font-weight:700;color:var(--muted);text-decoration:underline;cursor:pointer}
.bb2-link:hover{color:var(--ink)}
.bb2-link.is-on{color:var(--orange);border-radius:8px;box-shadow:0 0 0 2px var(--orange)}
.bb2-link:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.bb2-note{margin:8px 0 0;font-size:12px;color:var(--muted)}
.bb2-note[hidden]{display:none}

/* ---- prevzem in število oseb ---- */
.bb2-seg{display:flex;gap:12px;margin-top:10px}
.bb2-seg button{position:relative;flex:1;min-height:44px;border:1px solid var(--line);border-radius:10px;
  background:#fff;font-family:inherit;font-size:14px;font-weight:700;color:var(--text);cursor:pointer}
.bb2-seg.okrogel button{border-radius:999px}
.bb2-seg button:hover{border-color:#C9C6BE}
.bb2-seg button.is-on{box-shadow:inset 0 0 0 2px var(--orange);background:rgba(253,228,216,.35)}
.bb2-seg button:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.bb2-osebe{margin-top:20px}

/* ⚠ PAST, ki je v tej datoteki že enkrat ugriznila (.bb-list, .bb-price,
   .bb-cta): lasten `display` v pravilu razreda povozi privzeti [hidden] iz
   brskalnika, ker imata isto specifičnost in pravilo razreda pride pozneje.
   Vsi novi bloki so flex ali grid, zato temna vrata (paket z beljenjem,
   izbirnik oseb) brez te vrstice sploh ne bi bila temna. Selektor je zaprt v
   .buybox.bb2, da ne poseže v rezultat.html in blagajna.html. */
.buybox.bb2 [hidden]{display:none}

/* ---- cena in gumb ---- */
.bb2 .bb-rule{margin-top:20px;border-top-color:var(--line)}
.bb2 .bb-price{margin-top:16px;align-items:flex-end;gap:12px;min-height:40px}
.bb2 .bb-price b{font-size:clamp(32px,3.4vw,38px);letter-spacing:-.04em;line-height:1}
.bb2 .bb-price span{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:5px;padding-bottom:4px;
  font-size:13.5px;color:var(--muted)}
.bb2 .bb-price em{font-style:normal}
/* Gumb je oranžen (Claude Design v2b), ne temen kot v prejšnji različici. */
.bb2 .bb-cta{background:var(--cta);color:#fff;font-size:19px;font-weight:700;margin-top:16px}
.bb2 .bb-cta:hover{background:var(--cta-hover);color:#fff}
.bb2 .bb-trust{justify-content:center}

/* ---- citata pod gumbom ---- */
.bb2-quotes{display:grid;grid-template-columns:1fr 1fr;margin-top:10px;border:1px solid var(--line);
  border-radius:10px;background:#FBFBFC;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.bb2-quotes>div{display:flex;flex-direction:column;gap:10px;padding:18px 20px}
.bb2-quotes>div:first-child{border-right:1.5px dotted #D1D5DB}
.bb2-qh{display:flex;align-items:center;gap:10px;color:var(--orange)}
.bb2-qh b{font-size:14.5px;font-weight:700;color:var(--text)}
.bb2-quotes p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text)}
.bb2-qa{display:flex;align-items:center;gap:10px;margin-top:auto}
.bb2-qa img{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 12%;
  border:1px solid var(--line)}
.bb2-qa i{font-style:normal;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* ---- desni stolpec: znamka in ordinacija ---- */
.bb2-marks{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid #D1D5DB;border-radius:18px;
  background:#fff;overflow:hidden}
.bb2-marks span{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 10px;
  text-align:center;color:var(--orange)}
.bb2-marks span+span{border-left:1px solid var(--line)}
.bb2-marks b{font-size:13px;font-weight:600;line-height:1.35;color:var(--text)}

.bb2-klinika{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;
  background:#fff;padding:14px 18px;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.bb2-klinika:hover{border-color:#C9C6BE}
.bb2-klinika>img{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 12%;
  border:1px solid var(--line)}
.bb2-klinika .l1{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;line-height:1.5;color:var(--text)}
.bb2-klinika .l2{display:block;font-size:13px;line-height:1.5;color:var(--text)}
.bb2-klinika .ok{display:inline-flex;align-items:center;justify-content:center;flex:none;width:17px;height:17px;
  border-radius:50%;background:var(--orange)}

/* ---- vmesna širina: en stolpec, poravnava ostane leva ----------------
   Osnovni buybox pri 980 px vse posreduje na sredino (.bb-info{align-items:
   center;text-align:center}). Tukaj tega nočemo: sklad vrednosti in vrstice
   paketov se berejo levo poravnano. */
@media (max-width:1020px){
  .buybox.bb2{display:flex;flex-direction:column;grid-template-columns:1fr}
  .bb2 .bb-info{display:contents;align-items:stretch;text-align:left}
  .bb2-urg{order:1}
  .bb2 .bb-rating{order:2;justify-content:flex-start}
  .bb2 .bb-info>h2{order:3}
  .bb2 .bb-lead{order:4;margin-left:0;margin-right:0}
  .bb2-feat{order:5}
  .bb2-live{order:6}
  .bb2 .bb-media,.bb2 .bb2-stick{display:contents}
  .bb2 .bb-stage{order:7;margin:16px 0 0;width:100%}
  .bb2 .bb-nav{order:8;margin:10px 0 8px;width:100%}
  .bb2-nakup{order:9}
  .bb2-marks{order:10}
  .bb2-klinika{order:11}
  .bb2-trak-blok{order:12}
  .bb2 .bb-trust{justify-content:center}
  .bb2 .bb-price{justify-content:flex-start}
}
@media (max-width:620px){
  .cenik-head h2{font-size:clamp(24px,6.4vw,30px)}
  .bb2-urg{font-size:12.5px;padding:10px 13px;align-items:flex-start;line-height:1.4}
  .bb2-urg .dot{margin-top:5px}
  .bb2-feat li{font-size:13.5px}
  .bb2-plans{margin-top:30px}
  .bb2-head,.bb2-row{padding:13px 14px;gap:10px}
  .bb2-name{font-size:14.5px}
  .bb2-money b{font-size:16px}
  .bb2-money i{font-size:10.5px}
  .bb2-body{padding:14px 14px 0}
  .bb2-item{gap:11px;padding:11px 0}
  .bb2-item>img,.bb2-item .ic{width:44px;height:44px}
  .bb2-item b{font-size:13.5px}
  .bb2-item i{font-size:12px}
  .bb2-val{font-size:10.5px;padding:4px 9px}
  .bb2-txt b{font-size:14px}
  .bb2-quotes{grid-template-columns:1fr}
  .bb2-quotes>div:first-child{border-right:0;border-bottom:1.5px dotted #D1D5DB}
  .bb2-marks{border-radius:14px}
  .bb2-marks span{padding:14px 6px;gap:7px}
  .bb2-marks b{font-size:11.5px}
  .bb2-marks svg{width:22px;height:22px}
  .bb2-klinika{padding:12px 14px;gap:11px}
  .bb2-klinika .l1,.bb2-klinika .l2{font-size:12.5px}
}
/* Zelo ozki zasloni: zastavica je daljša od kartice in bi jo prerezala. */
@media (max-width:400px){
  .bb2-flag{font-size:10.5px;padding:4px 10px;left:12px;transform:none;white-space:normal;max-width:calc(100% - 24px)}
  .bb2-cardfoot span{font-size:11px;padding:9px 4px;gap:5px}
}

/* =====================================================================
   OTO: časovno omejena ponudba beljenja + povečava slike
   Oboje je TEMNO, dokler PAKETI.beljenje v /ponudba/ui.js ne postane true.
   ===================================================================== */
.bb2-modal[hidden],.bb2-lb[hidden]{display:none}
.bb2-modal{position:fixed;inset:0;z-index:50;background:rgba(15,15,16,.55);
  display:flex;align-items:center;justify-content:center;padding:20px}
.bb2-modal .box{width:min(640px,100%);max-height:calc(100vh - 40px);overflow:auto;overflow-x:hidden;
  background:#fff;border-radius:10px;box-shadow:0 24px 64px rgba(0,0,0,.4)}
.bb2-modal .top{display:flex;align-items:center;gap:14px;background:#1D1D1F;color:#fff;padding:15px 22px}
.bb2-modal .top b{font-size:16px;font-weight:700;letter-spacing:.04em}
.bb2-modal .cas{flex:none;margin-left:auto;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.bb2-modal .cas:empty{display:none}
.bb2-modal .x{flex:none;width:30px;height:30px;border:1px solid #55565A;border-radius:4px;background:none;
  color:#fff;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.bb2-modal .in{padding:20px 24px 24px}
.bb2-modal .in>p{margin:0;font-size:15px;line-height:1.5;color:var(--text)}
.bb2-modal .art{position:relative;margin-top:18px;border-radius:6px;overflow:hidden;background:#F2F2F3}
.bb2-modal .art img{display:block;width:100%;height:auto}
/* Med odprtim OTO oknom lepljivi pas in gumb klepeta ne smeta segati čez okno
   (Max, 2. 9. 2026). Razred postavi ui.js ob odprtju in ga ob zaprtju odstrani. */
body.oto-odprto .sticky-cta,body.oto-odprto #aib-widget-host{display:none!important}
.bb2-modal .art span{position:absolute;top:12px;left:12px;background:var(--orange);color:#fff;
  font-size:13px;font-weight:700;padding:5px 12px;border-radius:3px}
.bb2-modal h4{margin:16px 0 0;font-size:20px;font-weight:700;color:var(--text)}
.bb2-modal .cena{margin-top:4px;font-size:19px;font-weight:700;color:var(--orange)}
.bb2-modal .cena s{font-size:15px;font-weight:600;color:var(--muted)}
.bb2-modal .opis{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.bb2-modal .da{margin-top:16px;min-height:50px;padding:0 28px;border:0;border-radius:8px;
  background:var(--orange);color:#fff;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
.bb2-modal .da:hover{background:#A93C0A}
.bb2-modal .ne{margin:18px 0 0;font-size:12.5px;color:var(--muted)}
.bb2-modal .ne button{border:0;background:none;padding:0;font-family:inherit;font-size:12.5px;
  color:var(--muted);text-decoration:underline;cursor:pointer}

.bb2-lb{position:fixed;inset:0;z-index:60;background:rgba(24,24,26,.94);
  display:flex;align-items:center;justify-content:center;padding:32px}
.bb2-lb img{max-width:min(88vh,100%);max-height:88vh;border-radius:12px}
.bb2-lb .x{position:absolute;top:22px;right:26px;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:19px;cursor:pointer}
.bb2-zoom{cursor:zoom-in}
.bb2-lb .velika{display:block;object-fit:contain;background:#18181A}
.bb2-lb .rail{position:absolute;top:50%;right:22px;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:9px;max-height:88vh;overflow:auto;scrollbar-width:none}
.bb2-lb .rail::-webkit-scrollbar{display:none}
.bb2-lb .rail img{width:62px;height:62px;border-radius:8px;object-fit:cover;cursor:pointer;
  transition:opacity .24s ease}
@media (max-width:900px){
  .bb2-lb{padding:20px}
  .bb2-lb .rail{position:static;transform:none;flex-direction:row;max-height:none;margin-top:14px;
    width:100%;justify-content:flex-start}
  .bb2-lb{flex-direction:column}
  .bb2-lb .rail img{width:46px;height:46px}
}
@media (min-width:901px){
  .bb2-lb{padding:32px 120px 32px 32px}
}

/* Ponudba je precej višja od slik (sklad vrednosti ima šest postavk), zato bi
   desni stolpec pustil ~1200 px praznine. Na namizju ga prilepimo: izdelek
   ostane v vidnem polju, dokler bralec hodi po ponudbi. Na ožjih zaslonih je
   mreža enostolpčna in lepljenje nima smisla. */
/* Lepljiv desni stolpec po v2b: ZUNANJI ovoj (.bb-media) je raztegnjen cez
   celo vrstico, lepljiv je NOTRANJI (.bb2-stick). Tako ima kam potovati —
   sticky na raztegnjenem elementu se nima kam premakniti. Odmik 20px je iz
   oblikovanja; glava strani se ob drsenju navzdol umakne, ob drsenju navzgor
   pa za hip prekrije vrh slike. */
@media (min-width:1021px){
  .bb2 .bb-media{align-self:stretch}
  .bb2-stick{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px}
}
@media (max-width:1020px){
  .bb2-stick{display:flex;flex-direction:column;gap:16px}
}

/* =====================================================================
   CENIK v2b — dopolnitve iz predaje 1. 9. 2026 (handoff bundle)
   Novo: ura v pasu nujnosti, števec gledalcev, blok varnega nakupa,
   garancijski trak, trak zadovoljnih uporabnikov (Instagram).
   ===================================================================== */

/* Pas nujnosti ima zdaj ikono ure namesto pike. */
.bb2-urg{color:var(--text)}
.bb2-urg>svg{flex:none;color:var(--orange)}

/* Števec gledalcev. ⚠ Številka je simulirana v /ponudba/ui.js. */
.bb2-live{display:flex;align-items:center;gap:9px;margin-top:16px;
  font-size:14px;font-weight:700;color:var(--orange)}
.bb2-live>svg{flex:none}
/* Stavek mora ostati EN kos: v flex vrstici bi vsak besedilni vozel in <b>
   postal svoj element in med njimi bi zazijal gap:9px. */
.bb2-live>span{min-width:0}
.bb2-live b{font-variant-numeric:tabular-nums}

/* ---- varen nakup ---- */
.bb2-varno{margin-top:16px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  background:#FBFBFC;display:flex;flex-direction:column;align-items:center;gap:12px}
.bb2-varno-l{display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.4;
  color:var(--text);text-align:center}
.bb2-varno-l>svg{flex:none;color:var(--text)}
.bb2-varno-l b{font-weight:700}
.bb2-znaki{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.bb2-znaki>span{display:inline-flex;align-items:center;justify-content:center;height:30px;
  padding:0 10px;border:1px solid var(--line);border-radius:5px;background:#fff}
.bb2-znaki>span.txt{height:26px;padding:0 9px;font-size:10.5px;font-weight:700;
  letter-spacing:.02em;color:var(--text)}
/* Logotipi ponudnikov so PNG z belim ozadjem — multiply ga stopi s ploščico. */
.bb2-znaki img{height:16px;width:auto;object-fit:contain;mix-blend-mode:multiply}

/* ---- garancijski trak ---- */
.bb2-garancija{margin-top:10px;padding:16px 18px;border:1px solid #E7DCC9;border-radius:12px;
  background:#F4EADB;display:flex;align-items:center;gap:14px}
.bb2-garancija>img{flex:none;width:60px;height:60px;object-fit:contain;mix-blend-mode:multiply}
.bb2-garancija>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.bb2-garancija b{font-size:15.5px;font-weight:700;color:var(--text)}
.bb2-garancija i{font-style:normal;font-size:13px;line-height:1.5;color:var(--muted)}
.bb2-garancija a{color:var(--muted);text-decoration:underline}
.bb2-garancija a:hover{color:var(--text)}

/* ---- trak zadovoljnih uporabnikov ----------------------------------
   Prepis vzorca s pasu pacientov (.prail): kartice so v HTML, /ponudba/ui.js
   jih podvoji in doda razred `tece`. Brez JS ostane mirna vrsta osmih kartic
   in nič ne skače. Zamik je `-50% - pol razmika` (razmik 20px → 10px). */
/* ⚠ NE dajaj sem `width:100%` ali `max-width` v pikslih: to je element mreže
   in njegova največja vsebina povleče stolpec s sabo — na telefonu je bil
   stolpec zato 1230px namesto 358px in cel cenik je ušel iz zaslona.
   `min-width:0` mreži dovoli, da stolpec skrči; širino postavi mreža sama. */
.bb2-trak-blok{grid-column:1/-1;min-width:0;margin:64px 0 0}
.bb2-trak-blok h3{margin:0;text-align:center;font-size:clamp(22px,2.2vw,30px);
  font-weight:700;letter-spacing:-.02em;color:var(--text)}
.bb2-trak-okno{margin-top:26px;min-width:0;overflow:hidden;padding:4px 0 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
.bb2-trak{display:flex;gap:20px;width:max-content}
.bb2-trak.tece{animation:vboTrakLevo 60s linear infinite}
@keyframes vboTrakLevo{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 10px))}
}
.bb2-trak-okno:hover .bb2-trak.tece{animation-play-state:paused}
.bb2-trak figure{flex:none;width:230px;margin:0;border:1px solid var(--line);border-radius:10px;
  background:#fff;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.06)}
/* ⚠ `height:auto` je nujen: atributa width/height na <img> se preslikata v
   predstavitveni namig `height:509px`, ta pa povozi `aspect-ratio` (razmerje
   velja le, kadar je ena mera auto). Brez tega so kartice visoke 554px namesto
   288px in trak ne izgleda kot v izvozu. */
.bb2-trak img{display:block;width:100%;height:auto;aspect-ratio:1/1.06;object-fit:cover;
  object-position:50% 30%;background:var(--cream)}
.bb2-trak figcaption{display:flex;align-items:center;gap:10px;padding:12px 14px;color:#8A8D93}
.bb2-trak figcaption i{font-style:normal;font-size:13px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb2-trak figcaption svg{flex:none;margin-left:auto}
/* Kdor ne mara gibanja: animacijo ubije globalno pravilo v vrstici 510,
   zato tu vrnemo samo ročno drsenje, da so vidne vse kartice. */
@media (prefers-reduced-motion:reduce){
  .bb2-trak-okno{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .bb2-trak-okno::-webkit-scrollbar{display:none}
}
@media (max-width:620px){
  .bb2-trak-blok{margin-top:44px}
  .bb2-trak{gap:12px}
  @keyframes vboTrakLevo{
    from{transform:translateX(0)}
    to{transform:translateX(calc(-50% - 6px))}
  }
  .bb2-trak figure{width:176px}
  .bb2-trak figcaption{padding:10px 11px;gap:8px}
  .bb2-trak figcaption i{font-size:12px}
  .bb2-varno,.bb2-garancija{padding:14px}
  .bb2-garancija>img{width:52px;height:52px}
  .bb2-garancija b{font-size:14.5px}
}

/* =====================================================================
   ZID DOKAZOV — stran Mnenja (2. 9. 2026): 80 zgodb z reviews.vbo.si.
   Stolpci namesto mreže, ker so slike različnih višin (zgodbe 9:16, objave
   1:1). Najprej je vidnih 20 (na telefonu 12), gumb v ui.js odpre vse.
   ===================================================================== */
.zid{columns:4 230px;column-gap:14px}
.zid figure{position:relative;break-inside:avoid;margin:0 0 14px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--card-ring)}
.zid img{width:100%;height:auto;display:block}
.zid-chip{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;border-radius:999px;padding:6px 11px;
  font-size:11.5px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
  box-shadow:0 0 0 1px rgba(27,28,30,.06)}
.zid-chip.brand{background:var(--orange);color:#fff}
.zid.skrcen figure:nth-child(n+21){display:none}
.zid-sec .head a{text-decoration:underline;text-underline-offset:3px}
.zid-vec{margin-top:8px}
.zid-vec button{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:#fff;box-shadow:var(--card-ring);
  transition:transform .15s ease,box-shadow .15s ease}
.zid-vec button:hover{transform:translateY(-1px);box-shadow:var(--card-ring-hover)}
@media (max-width:680px){
  .zid{columns:2 150px;column-gap:10px}
  .zid figure{margin-bottom:10px}
  .zid.skrcen figure:nth-child(n+13){display:none}
}

/* =====================================================================
   TIPOGRAFSKA LESTVICA — 3. 9. 2026, uskladena 8. 9. 2026
   Popravek devetih nedoslednosti iz QA (T1–T5, S1, A1).
   Blok stoji NA KONCU namerno: prejšnja pravila pusti pri miru, zmaga po
   vrstnem redu vira, in ga je mogoče v celoti odstraniti, če se kaj podre.
   ⚠ Medijska poizvedba na dnu tega bloka MORA ponoviti mobilne velikosti —
   pravilo brez @media, ki stoji POZNEJE, premaga @media pravilo iz vrstice
   1917, ker medijska poizvedba ne doda specifičnosti.

   USKLADITEV 8. 9. 2026 (Max: »vse pristajalne strani enake pisave«).
   Do tega dne sta živeli DVE lestvici: polish.css je pisal iste žetone na
   .lp-polished (= <body>), kar premaga :root, zato so /ponudba, /ponudba/v2 in
   /ponudba/v3 imeli --body 16px in --h2-size clamp(30px,3.5vw,44px), vse druge
   strani (znanost, mnenja, kviz, rezultat, vprasanja, kontakt, blagajna, oto,
   uspeh, neuspeh) pa --body 15px in clamp(28px,3.8vw,44px). Vrednosti spodaj so
   zdaj TISTE Z GLAVNE PONUDBE; v polish.css so podvojeni žetoni odstranjeni.
   ⚠ Ne dodajaj teh žetonov nazaj v polish.css — s tem se lestvici spet
   razideta, in razlika se ne vidi na /ponudba, ampak na podstraneh.
   ===================================================================== */
:root{
  /* naslovi */
  --h2-size:clamp(30px, 3.5vw, 44px);
  --h3-display:clamp(26px,3.4vw,38px);   /* naslov čez cel pas */
  --h3-lg:23px;                          /* velika kartica, kategorija FAQ */
  --h3-md:21px;                          /* običajen naslov kartice */
  --h3-sm:17px;                          /* zbita kartica, korak */
  --h3-weight:600;
  /* besedilo */
  --body-lead:18px;
  --body:16px;
  --body-card:15px;
  --body-fine:14px;
  --lh-body:1.65;
  --lh-card:1.6;
  --lh-fine:1.5;
  /* nadnaslov (ena sama ploska različica; temna ploščica .badge ostaja) */
  --label-size:11.25px;
  --label-weight:600;
  --label-ls:.12em;
}

/* ---- T1 + T5: naslovi na eno lestvico ----
   Pravilo: index je vozlišče in edini bere 54px (.hero-vsl h1).
   VSAKA podstran bere 44px — tudi zdaj, ko je njen naslov h1 in ne več h2. */
.head h1,.head h2,.rail-head h2,.zn-hero h1{font-size:var(--h2-size);line-height:1.05}
.head h1{letter-spacing:-.02em;font-weight:500}
.zreb-grid h3,.change .panel-img h3{font-size:var(--h3-display)}
.prod .card h3,.faq-cat h3,.faq-cat h2,.whofor h3,.kviz-q,.bb2-trak-blok h3{font-size:var(--h3-lg)}
.b2 h3,.s3 h3,.bx h3,.ben.price h3{font-size:var(--h3-md)}
.step h3,.ben h3{font-size:var(--h3-sm)}
.kcap h3{font-size:clamp(17px,1.6vw,20px);letter-spacing:-.02em}
/* enotna teža naslovov kartic */
.prod .card h3,.faq-cat h3,.faq-cat h2,.whofor h3,.kviz-q,.bb2-trak-blok h3,
.b2 h3,.s3 h3,.bx h3,.ben h3,.ben.price h3,.step h3,.kcap h3{font-weight:var(--h3-weight)}

/* T5: promocijski naslov je IZRECNA raven poudarka, ne naključje.
   Velikost gre na lestvico h2, teža 600 ostane in je zdaj poimenovana. */
.cenik-head h2{font-size:var(--h2-size);line-height:1.05;font-weight:600}

/* ---- T2: en sam ploski nadnaslov (temna ploščica .badge ostaja svoja) ---- */
.eyebrow,.kicker,.zn-eyebrow,.zn-kicker{
  font-size:var(--label-size);font-weight:var(--label-weight);
  letter-spacing:var(--label-ls);text-transform:uppercase;
  color:var(--orange-ink);margin:0 0 14px}
.zn-kart .zn-kicker,.zn-orange .zn-kicker{margin-bottom:8px}
.zn-eyebrow{margin-bottom:0}
.zn-orange .zn-kicker{color:#fff}
.zn-kart.temna .zn-kicker,.zn-dark .zn-kicker{color:var(--zn-warm)}

/* ---- T3 + T4: eno besedilo, ena višina vrstice na korak ---- */
.head p,.faq-box p,.zn-p{font-size:var(--body);line-height:var(--lh-body)}
.zn-lead{font-size:var(--body-lead);line-height:var(--lh-body)}
details.q p,.change details p,.flist2 li{font-size:var(--body-card);line-height:var(--lh-card)}
.kviz-re-body{line-height:var(--lh-body)}
.plan li,.flist li,.sticky-copy p{line-height:var(--lh-fine)}
.kviz-re-stat .lb,.cover small{line-height:var(--lh-fine)}
.rc-wide .qt p{font-size:var(--body-fine);line-height:var(--lh-fine)}

/* ---- S1: znanost na isti navpični ritem kot ostale strani ----
   Ritem ima DVA koraka: namizje clamp(56,7vw,96), telefon clamp(40,11vw,60)
   (vrstica 1386). Brez druge polovice znanost na telefonu ostane pri 56px,
   ostale strani pa gredo na 41. */
.zn-sec{padding:clamp(56px,7vw,96px) 0}
.zn-sec.tesno{padding-top:0}
.zn-band,.zn-dark{padding:clamp(56px,7vw,96px) 0}
@media (max-width:760px){
  .zn-sec,.zn-band,.zn-dark{padding:clamp(40px,11vw,60px) 0}
  .zn-sec.tesno{padding-top:0}
}

/* ---- A1: en ožji stolpec namesto štirih vkodiranih širin ----
   rezultat.html je imel v predlogah JS vkodirane 1000 / 900 / 1000 / 1000 / 760 px,
   zato je levi rob vsebine ob drsenju skakal 140 -> 220 -> 270 -> 340. */
.wrap.ozji{max-width:900px}
.ozji-blok{max-width:760px;margin-left:auto;margin-right:auto}

/* ---- mobilna ponovitev (glej opozorilo na vrhu bloka) ---- */
@media (max-width:760px){
  .s3 h3,.b2 h3,.bx h3,.step h3,.kcap h3,.faq-cat h3,.faq-cat h2,.ben h3{font-size:18.5px}
  .head p{font-size:var(--body);line-height:var(--lh-body)}
  .faq-box p{font-size:var(--body-card);line-height:var(--lh-card)}
}

/* ---- T4 + T5, drugi krog: preostali osamelci ------------------------
   Prvi krog je pobral glavnino; te vrstice pobiralijo, kar je ostalo.
   Vsaka velikost dobi eno samo višino vrstice: 1.6 branje, 1.55 kartica,
   1.5 drobni tisk. ------------------------------------------------- */

/* naslovi, ki so ostali izven lestvice */
.change .list-h{font-size:var(--h3-md);font-weight:var(--h3-weight)}
.zn-sec h3,.zn-kart b{font-size:var(--h3-md);line-height:1.2;font-weight:var(--h3-weight)}
.rez-podnaslov{font-size:var(--h3-md);font-weight:var(--h3-weight);text-align:center;margin:0}

/* branje 1.6 */
.zn-dark p,.zn-orange p,.zn-callout p,.zn-glas blockquote{line-height:var(--lh-body)}
.zn-dark p{font-size:var(--body-lead)}
.zn-orange p,.zn-callout p{font-size:var(--body-lead)}
.kviz-re-body{font-size:15.5px;line-height:var(--lh-body)}
.hero p.sub{font-size:16px;line-height:var(--lh-body)}

/* kartica 1.55 */
.zn-peach p,.zn-pot p,.zn-mit p,.zn-kart p{font-size:var(--body-card);line-height:var(--lh-card)}
.zn-p{font-size:var(--body);line-height:var(--lh-body)}
.bb-list li,.flist2 li{font-size:var(--body-card);line-height:var(--lh-card)}
.bb-lead{line-height:var(--lh-card)}

/* drobni tisk 1.5 */
.plan li,.flist li,.cover small,.sticky-copy p,.kviz-re-stat .lb,
.bb2-nacin-kartica>i,.zn-note{line-height:var(--lh-fine)}
.rc-wide .qt p{font-size:var(--body-fine);line-height:var(--lh-fine)}
.vcard .qt{line-height:1.3}

@media (max-width:760px){
  .hero .hero-vsl p.sub{line-height:var(--lh-card)}
}

/* ---- T2 + T4, tretji krog: specifičnost in zadnji osamelci -----------
   ⚠ `.eyebrow` sam (0,1,0) NE premaga `.story .eyebrow` (0,2,0) — zato so
   nadnaslovi ostali 12px/800. Tu jih dobimo z enako specifičnostjo. ---- */
.story .eyebrow,.zreb-grid .eyebrow,#kdo .head .kicker,#razlogi .kicker,
.zn-sec .zn-eyebrow,.zn-sec .zn-kicker{
  font-size:var(--label-size);font-weight:var(--label-weight);
  letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--orange-ink)}
.zn-orange .zn-kicker{color:#fff}
.zn-kart.temna .zn-kicker,.zn-dark .zn-kicker{color:var(--zn-warm)}

/* zadnji naslov izven lestvice */
.zn-pot h3{font-size:var(--h3-md);font-weight:var(--h3-weight);line-height:1.2}

/* ena višina vrstice na velikost: 15.5 in 14 = kartica 1.55, 13.5 in 12 = drobno 1.5 */
.whofor p,.mech details p,.zn-pot p{line-height:var(--lh-card)}
.zn-pot p{font-size:var(--body-card)}
.band .cards p,.kcap p,.zreb-top p.sub{line-height:var(--lh-fine)}

/* ---- T4, zaključek: ena višina vrstice na velikost ------------------
   Pravilo je zdaj preprosto in ga je mogoče preveriti:
     15px -> 1.6 (branje) · 14px -> 1.55 (kartica) · 13.5px in manj -> 1.5
   Nadnaslovi imajo svojo, ker niso tekoče besedilo. ------------------ */
.head p,.zreb-grid p,.faq-box p,.zn-p{line-height:var(--lh-body)}
.whofor p,.list details p,.s3 p,.b2 p,.vesna p,.rez-card p,
.mech details p,.rev3 p,.pokupu .s3 p{line-height:var(--lh-card)}
.kcap p,.bb2-quotes p,.band .cards p,.cards p,.sticky-copy p,
.zreb-top p.sub,.f-fine{line-height:var(--lh-fine)}
.eyebrow,.kicker,.zn-eyebrow,.zn-kicker,
.story .eyebrow,.zreb-grid .eyebrow,#kdo .head .kicker,#razlogi .kicker{line-height:var(--lh-fine)}

@media (max-width:760px){
  /* Iste velikosti kot na namizju, a clamp() jih na telefonu prestavi v drug
     korak lestvice — zato dobijo tu višino vrstice, ki ustreza NOVI velikosti. */
  .hero .hero-vsl p.sub{line-height:var(--lh-body)}      /* 15px  -> branje */
  .mini-note{line-height:var(--lh-fine)}                 /* 13px -> drobno */
}

@media (max-width:760px){
  /* section.bel (1328) in .band (1148) nimata mobilnega koraka in sta zato na
     telefonu ostala pri 56px sredi 41px odsekov. Zdaj bereta isti ritem. */
  section.bel,.band{padding:clamp(40px,11vw,60px) 0}
}

/* =====================================================================
   BLAGAJNA v2 — Stripe checkout (Claude Design »VBO Blagajna«, 3. 9. 2026)
   Dva stolpca: obrazec + povzetek (#F4EADB). Kartice NE zbiramo tu
   (PCI): Plačaj in Apple/Google/PayPal peljejo na Stripovo sejo.
   Stari razredi .bg-* zgoraj ostanejo za morebitni prepis; ta stran
   uporablja .blag-*.
   ===================================================================== */
body.blagajna{background:#fff;color:#27282A}
body.blagajna a{color:#27282A}
body.blagajna a:hover{color:#CF4B0C}
.blag-hdr{background:#27282A;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 20px 16px}
.blag-hdr img{height:30px;width:auto}
.blag-badge{background:#CF4B0C;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 10px;border-radius:4px}
.blag-proof{display:flex;gap:18px;font-size:12px;font-weight:600;color:#F5EFE6;flex-wrap:wrap;justify-content:center}
.blag-proof span{display:flex;align-items:center;gap:5px}
.blag-grid{flex:1;display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);min-width:0}
.blag-form{display:flex;justify-content:flex-end;padding:44px 56px 72px 20px;min-width:0}
.blag-form-in{width:100%;max-width:500px;display:flex;flex-direction:column}
.blag-hitro-naslov{margin:0;text-align:center;font-size:14px;color:#636469}
.blag-hitro{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}
.blag-hitro .bg-cta{display:flex;align-items:center;justify-content:center;gap:6px;height:48px;border-radius:6px;font-family:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;width:100%}
.blag-apple{border:0;background:#000;color:#fff}
.blag-apple:hover{color:#fff;filter:brightness(1.15)}
.blag-google{border:1px solid #D1D5DB;background:#fff;color:#27282A}
.blag-google:hover{color:#27282A;border-color:#CF4B0C}
.blag-paypal{border:0;background:#FFC439;color:#003087;font-size:17px;font-weight:800;font-style:italic;letter-spacing:-.02em}
.blag-paypal:hover{color:#003087;filter:brightness(.97)}
.blag-paypal i{font-style:italic;color:#009CDE;font-weight:800}
.blag-fine{margin:12px 0 0;font-size:12px;line-height:1.5;color:#636469}
.blag-fine a{text-decoration:underline}
.blag-ali{display:flex;align-items:center;gap:14px;margin:22px 0 26px;font-size:13px;color:#636469}
.blag-ali i{flex:1;height:1px;background:#E5E7EB;font-style:normal}
.blag-h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em;color:#27282A}
.blag-h2 + .blag-h2-row{margin-top:0}
.blag-h2-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.blag-h2-row a{font-size:13.5px;text-decoration:underline}
.blag-field{position:relative;margin-top:14px}
.blag-field.mt0{margin-top:0}
.blag-in, .blag-sel{
  box-sizing:border-box;width:100%;height:52px;padding:0 14px;
  border:1px solid #D1D5DB;border-radius:6px;font-family:inherit;
  font-size:16px;color:#27282A;background:#fff;outline:none;appearance:none}
.blag-in:focus, .blag-sel:focus{border-color:#CF4B0C;box-shadow:0 0 0 1px #CF4B0C}
.blag-in::placeholder{color:#8A8D93}
.blag-ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#8A8D93}
.blag-in.has-ico{padding-right:44px}
.blag-float{position:relative}
.blag-float label{position:absolute;left:14px;top:8px;font-size:11.5px;color:#636469;pointer-events:none}
.blag-float .blag-sel{height:56px;padding:18px 40px 0 14px}
.blag-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.blag-2.posta{grid-template-columns:1fr 2fr}
.blag-check{display:flex;align-items:flex-start;gap:10px;margin-top:12px;font-size:14px;cursor:pointer;line-height:1.45}
.blag-check input{position:absolute;opacity:0;width:1px;height:1px}
.blag-box{flex:none;width:20px;height:20px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid #8A8D93;margin-top:1px}
.blag-check.is-on .blag-box{background:#CF4B0C;border-color:#CF4B0C}
.blag-odsek{margin-top:32px}
.blag-odsek .blag-h2{margin:0}
.blag-odsek > p{margin:10px 0 0;font-size:14.5px}
.blag-sms{display:flex;gap:10px;margin-top:12px}
.blag-sms .blag-in{flex:1;min-width:0;margin:0}
.blag-sms-btn{flex:none;height:52px;padding:0 18px;border:1px solid #D1D5DB;border-radius:6px;background:#fff;font-family:inherit;font-size:15px;font-weight:600;color:#CF4B0C;cursor:pointer}
.blag-sms-btn:hover{border-color:#CF4B0C}
.blag-sms-btn.is-on{color:#60A886;border-color:#60A886}
.blag-legal{margin:12px 0 0;font-size:12px;line-height:1.55;color:#636469}
.blag-legal a{font-weight:700;text-decoration:underline}
.blag-dostava{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.blag-nacin{margin-top:14px;border:1px solid #D1D5DB;border-radius:6px;overflow:hidden}
.blag-nacin-vrsta{display:flex;align-items:center;gap:12px;padding:16px 14px;cursor:pointer;background:#fff;border:0;width:100%;text-align:left;font-family:inherit;color:inherit}
.blag-nacin-vrsta + .blag-nacin-vrsta{border-top:1px solid #E5E7EB}
.blag-nacin-vrsta.is-on{background:#FDF5F1}
.blag-radio{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #8A8D93;display:inline-flex;align-items:center;justify-content:center}
.blag-nacin-vrsta.is-on .blag-radio{border-color:#CF4B0C}
.blag-nacin-vrsta.is-on .blag-radio i{width:8px;height:8px;border-radius:50%;background:#CF4B0C}
.blag-nacin-vrsta span{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.blag-nacin-vrsta b{font-size:14.5px;font-weight:600}
.blag-nacin-vrsta em{font-style:normal;font-size:12.5px;color:#636469}
.blag-nacin-vrsta strong{font-size:14.5px;font-weight:600}
.blag-pay-kart{margin-top:14px;border:1px solid #D1D5DB;border-radius:6px;overflow:hidden}
.blag-pay-glava{display:flex;align-items:center;gap:12px;padding:14px;background:#FDF5F1;border-bottom:1px solid #E5E7EB}
.blag-pay-glava .blag-radio{border:5px solid #CF4B0C;box-sizing:border-box}
.blag-pay-glava b{flex:1;font-size:14.5px;font-weight:600}
.blag-pay-znaki{display:flex;gap:6px}
.blag-pay-znaki img{height:18px;width:auto;border:1px solid #E5E7EB;border-radius:3px;padding:1px 3px;background:#fff}
.blag-pay-telo{padding:14px;background:#FAFAFA}
.blag-stripe{margin:0;font-size:13.5px;line-height:1.55;color:#636469}
.blag-obnova{margin-top:22px;padding:14px 16px;border:1px solid #E7DCC9;border-radius:8px;background:#F4EADB;font-size:12.5px;line-height:1.55;color:#27282A}
.blag-pay-btn{margin-top:22px;height:58px;border:0;border-radius:8px;background:#E0A88F;color:#fff;font-family:inherit;font-size:17px;font-weight:700;letter-spacing:.01em;cursor:not-allowed;box-shadow:0 8px 20px rgba(207,75,12,.25);display:flex;align-items:center;justify-content:center;text-decoration:none;width:100%}
.blag-pay-btn.is-ready{background:var(--cta);cursor:pointer}
.blag-pay-btn.is-ready:hover{color:#fff;filter:brightness(.95)}
.blag-pay-btn:hover{color:#fff}
.blag-lock{margin:12px 0 0;text-align:center;font-size:12.5px;color:#636469;display:flex;align-items:center;justify-content:center;gap:6px}
.blag-noga{display:flex;flex-wrap:wrap;gap:18px;margin-top:40px;padding-top:18px;border-top:1px solid #E5E7EB;font-size:12.5px}
.blag-noga a{text-decoration:underline}
.blag-err{margin:8px 0 0;font-size:13px;color:#C0362B;display:none}
.blag-err.is-on{display:block}
.blag-rail{background:#F4EADB;border-left:1px solid #E7DCC9;min-width:0}
.blag-rail-in{position:sticky;top:0;padding:44px 20px 60px 44px}
.blag-rail-box{max-width:420px;display:flex;flex-direction:column}
.blag-item{display:flex;align-items:center;gap:14px}
.blag-item + .blag-item{margin-top:18px}
.blag-thumb{position:relative;flex:none;width:64px;height:64px;border-radius:8px;border:1px solid #E7DCC9;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.blag-thumb img{height:52px;width:auto;object-fit:contain}
.blag-thumb img.cover{width:100%;height:100%;object-fit:cover;border-radius:7px}
.blag-qty{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:#27282A;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.blag-item span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.blag-item b{font-size:14.5px;font-weight:600}
.blag-item em{font-style:normal;font-size:12.5px;line-height:1.4;color:#636469}
.blag-item strong{font-size:14px;font-weight:700;text-align:right;flex:none}
.blag-item strong s{display:block;font-weight:500;color:#8A8D93}
.blag-koda{display:flex;gap:0;margin-top:26px;border:1px solid #D1D5DB;border-radius:6px;background:#fff;overflow:hidden}
.blag-koda .blag-in{flex:1;min-width:0;height:52px;border:0;box-shadow:none}
.blag-koda .blag-in:focus{box-shadow:none;border:0}
.blag-koda-btn{flex:none;margin:6px;padding:0 16px;border:0;border-radius:4px;background:#F2F1EC;font-family:inherit;font-size:14px;font-weight:600;color:#636469;cursor:pointer}
.blag-koda-btn:hover{background:#E7DCC9;color:#27282A}
.blag-chip{display:flex;margin-top:12px}
.blag-chip b{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;background:#fff;border:1px solid #E7DCC9;font-size:13px;font-weight:700}
.blag-chip button{border:0;background:0;cursor:pointer;color:#636469;font-weight:500;line-height:1;font-size:14px;padding:0}
.blag-sum{display:flex;flex-direction:column;gap:10px;margin-top:26px;font-size:14.5px}
.blag-sum > span{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.blag-sum b{font-weight:600}
.blag-sum .skupaj{align-items:baseline;margin-top:6px}
.blag-sum .skupaj b:first-child{font-size:19px;font-weight:700}
.blag-sum .skupaj strong{font-size:22px;font-weight:700}
.blag-sum .skupaj i{font-style:normal;font-size:12px;color:#636469;margin-right:8px}
.blag-prihranek{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700}
.blag-obnovitev{padding-top:12px;border-top:1px solid #E7DCC9}
.blag-gar{display:flex;gap:12px;margin-top:26px;padding:16px 18px;border-radius:10px;background:#fff;border:1px solid #E7DCC9}
.blag-gar img{flex:none;width:40px;height:40px;object-fit:contain}
.blag-gar span{display:flex;flex-direction:column;gap:4px}
.blag-gar b{font-size:14.5px;font-weight:700}
.blag-gar em{font-style:normal;font-size:13px;line-height:1.5;color:#636469}
.blag-zaup{display:flex;flex-direction:column;gap:20px;margin-top:26px}
.blag-zaup-vrsta{display:flex;gap:14px}
.blag-zaup-vrsta svg{flex:none}
.blag-zaup-vrsta span{display:flex;flex-direction:column;gap:3px}
.blag-zaup-vrsta b{font-size:14.5px;font-weight:700}
.blag-zaup-vrsta em{font-style:normal;font-size:13px;line-height:1.5;color:#636469}
.blag-kolaz{margin-top:26px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid #E7DCC9}
.blag-kolaz img{display:block;width:100%;height:auto}
.blag-kolaz div{padding:18px 20px 20px;text-align:center}
.blag-kolaz b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.blag-kolaz em{display:block;margin-top:6px;font-style:normal;font-size:13px;line-height:1.55;color:#636469}
.blag-page{min-height:100vh;display:flex;flex-direction:column}
body.blagajna [hidden]{display:none !important}
@media (max-width:960px){
  .blag-grid{grid-template-columns:1fr}
  .blag-rail{order:-1;border-left:0;border-bottom:1px solid #E7DCC9}
  .blag-form{padding:28px 20px 48px}
  .blag-rail-in{position:static;padding:28px 20px 32px}
  .blag-hitro{grid-template-columns:1fr;gap:8px}
}
@media (max-width:520px){
  .blag-2{grid-template-columns:1fr}
  .blag-proof{gap:10px 14px;font-size:11.5px}
  .blag-sms{flex-direction:column}
}

/* ---- T4, pas do 964 px: višina vrstice mora slediti clamp() --------------
   Oba odstavka spodaj imata `font-size:clamp(13.5px,1.4vw,…)`. 1.4vw doseže
   13,5 px šele pri **964 px** (13,5 / 0,014), zato pod to širino SEDITA NA TLEH
   clamp-a in sta 13,5 px — višina vrstice pa je bila pripeta zgornji vrednosti
   (1,55 oziroma 1,6). Pri 900 px je zato 13,5 px besedilo dobilo dve različni
   višini vrstice in QA je prijavil razhajanje.

   Poskusil sem višini vrstice dati isto obliko clamp-a kot velikosti, a to ne
   deluje: tla obeh clamp-ov se dosežejo pri RAZLIČNI širini, zato se v ozkem
   pasu razmerje spet razide. Če pa clamp-a poravnaš tako, da se ujemata na
   obeh koncih, dobiš konstantno razmerje — torej navadni `line-height:1.5`,
   samo zapisan zapleteno. Zato dve stopnji na izračunani prelomni točki.

   Blok stoji ZA medijskimi poizvedbami namerno: pravilo brez @media, ki stoji
   pozneje, premaga @media pravilo prej v datoteki. --------------------------- */
.dejstvo p{line-height:var(--lh-card)}   /* 15,5px nad 964 px */
@media (max-width:964px){
  .dejstvo p{line-height:var(--lh-fine)}  /* tu je 13,5px — drobni tisk */
}

/* `.zn-uvod` dobi namesto druge prelomne točke ODPRAVLJEN clamp: dvostopenjsko
   pravilo je razhajanje samo prestavilo na 1000 px, kjer je bil odstavek 14 px
   z višino 1,6, sosednji 14 px pa 1,55. Ker je uvodni odstavek isti tip
   besedila kot `.zn-p`, bere zdaj isto stopnjo lestvice pri VSEH širinah in
   ne more več pasti med dve stopnji. */
.zn-uvod{font-size:var(--body);line-height:var(--lh-body)}

/* ---- video pas »družina« (#druzina, 5. 9. 2026) ---------------------------
   Prepis pasu »Life can be messy, retainers shouldn't be« z vivera.com:
   posnetek čez celo širino, belo besedilo na sredini. Plakat je CSS ozadje
   (16:9 na namizju, kvadrat pod 860 px) in se ujema z object-position videa,
   zato je preklop plakat → video brez skoka. Senca je zaradi berljivosti:
   posnetek je svetel (bele stene, bela oblačila) in belo besedilo brez nje
   ne doseže 3:1. Debelina naslova 600 (ne 500 kot drugi h2): besedilo leži
   na fotografiji, ne na kremni podlagi. Blok stoji ZA medijskimi
   poizvedbami namerno (pravilo brez @media pozneje premaga @media prej). -- */
.vidpas{position:relative;overflow:hidden;margin:0;color:#fff;
  background:#3A2A20 url(/ponudba/video/druzina-poster.webp) 50% 20%/cover no-repeat;
  height:clamp(440px,44vw,640px);display:flex;align-items:center;justify-content:center}
.vidpas-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.vidpas-senca{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,15,16,.34) 0%,rgba(15,15,16,.48) 55%,rgba(15,15,16,.62) 100%)}
.vidpas-txt{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.vidpas h2{color:#fff;font-size:clamp(28px,4.4vw,54px);font-weight:600;line-height:1.06;
  letter-spacing:-.02em;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.vidpas p{margin:0;max-width:40em;font-size:clamp(15px,1.5vw,18px);font-weight:600;line-height:1.55;
  color:#fff;text-wrap:pretty;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.vidpas .btn{margin-top:6px}
@media (max-width:860px){
  .vidpas{height:auto;aspect-ratio:1/1;min-height:400px;
    background-image:url(/ponudba/video/druzina-poster-m.webp);background-position:50% 50%}
  .vidpas-video{object-position:50% 50%}
  .vidpas h2 br{display:none}
  .vidpas-txt{padding-top:28px;padding-bottom:28px}
}

/* ---- prepis iz vivera-lp-v2 (5. 9. 2026): cena v junaku, primerjava,
   pošteno, ekipa s številkami, obnova pod gumbom, opomba o materialu ------ */
.hero-cena{display:flex;align-items:center;justify-content:center;gap:12px 16px;flex-wrap:wrap;margin:0 0 14px}
.hero-cena>b{font-size:clamp(34px,4.2vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.hero-cena>span{font-size:13px;line-height:1.35;color:var(--muted);font-weight:600;text-align:left}
.hero-cena>em{font-style:normal;display:inline-flex;align-items:center;background:var(--dark);color:#fff;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;white-space:nowrap}
.hero-kljuk{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.hero-kljuk li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text);text-align:left}
.hero-kljuk li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E") center/11px no-repeat}
.hero-vsl .hero-cena,.hero-vsl .hero-kljuk{margin-left:auto;margin-right:auto}
/* Telefon: otroci junaka imajo `order` 1–8 (vrstica ~493); brez lastnega reda bi
   cena in kljukci skočili PRED naslov. Enak red kot .sub (3) = takoj za njim. */
@media (max-width:860px){
  .hero-vsl .hero-cena{order:3;width:100%;margin:0 0 10px}
  .hero-vsl .hero-kljuk{order:3;display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0 auto 14px;width:auto;max-width:100%}
  .hero-kljuk li{font-size:13.5px}
}

.rz-opomba{max-width:62ch;margin:22px auto 0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--dim)}

.prim-ovoj{max-width:980px;margin:0 auto;background:#fff;border:1px solid #EBE9E3;border-radius:var(--radius-sec);overflow:hidden;box-shadow:var(--sh-soft)}
.prim{width:100%;border-collapse:collapse;font-size:15px}
.prim thead th{background:var(--dark);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:16px 18px;text-align:center}
.prim thead th:first-child{text-align:left}
.prim thead th:nth-child(2){background:#1F4A38}
.prim thead th:nth-child(3){background:#3A3B40}
.prim tbody th{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:18px 20px;width:22%;border-top:1px solid #EFECE6}
.prim td{padding:18px 20px;text-align:center;vertical-align:middle;border-top:1px solid #EFECE6;line-height:1.4}
.prim tbody tr:first-child th,.prim tbody tr:first-child td{border-top:0}
.prim td.da{color:#2F6B4F;font-weight:700}
.prim td.ne{color:var(--muted)}
@media (max-width:700px){
  /* Dva stalna stolpca: zeleni (letno) in sivi (enkrat). Ime lastnosti
     je majhna oznaka čez oba, da ne prekine stolpcev. */
  .prim{border-collapse:separate;border-spacing:0}
  .prim thead,.prim tbody{display:block}
  .prim tbody{background:linear-gradient(to right,#EEF6F1 50%,#F6F5F1 50%)}
  .prim thead tr,.prim tbody tr{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }
  .prim thead th{padding:14px 10px;text-align:center;line-height:1.3}
  .prim thead th:first-child{display:none}
  .prim tbody th{
    grid-column:1/-1;width:auto;padding:12px 14px 0;
    border:0;background:transparent;text-align:left;
    font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5F6065
  }
  .prim tbody tr + tr th{padding-top:16px;box-shadow:inset 0 1px 0 rgba(15,15,16,.08)}
  .prim td{
    display:block;width:auto;text-align:left;padding:8px 14px 16px;
    border:0;background:transparent;overflow-wrap:break-word
  }
  .prim td.da,.prim td.ne{background:transparent}
  .prim td.da{position:relative;padding-left:36px}
  .prim td.da::after{
    content:"";position:absolute;left:14px;top:10px;width:14px;height:14px;
    background:center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6B4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E")
  }
  .prim td::before{display:none;content:none}
}

.posteno{background:var(--dark);color:#fff;padding:clamp(48px,6vw,84px) 0;position:relative;z-index:5}
.posteno-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
.posteno .kicker{display:block;color:var(--orange-2);margin-bottom:12px}
.posteno h2{color:#fff;font-size:var(--h2-size);line-height:1.05;text-wrap:balance}
.posteno .lead{margin:16px 0 0;font-size:var(--body-lead);line-height:var(--lh-body);color:#E7E4DD}
.posteno p{margin:10px 0 0;font-size:var(--body);line-height:var(--lh-body);color:#BDB9B1}
.posteno-list{list-style:none;margin:0;padding:22px 24px;background:#1B1C1E;border:1px solid #2A2B2E;border-radius:22px;display:flex;flex-direction:column;gap:14px}
.posteno-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:#F2F1EC}
.posteno-list li::before{content:"";flex:none;margin-top:2px;width:20px;height:20px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E") center/12px no-repeat}
@media (max-width:860px){.posteno-grid{grid-template-columns:1fr}}

.vesna h2{font-size:clamp(23px,2.8vw,32px);line-height:1.1;margin:10px 0 4px;text-wrap:balance}
.vesna .quote{margin:6px 0 10px;font-size:clamp(17px,2vw,21px)}
.vesna-stat{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.vesna-stat span{display:flex;flex-direction:column;gap:2px;background:#FAF8F4;border:1px solid #EBE9E3;border-radius:14px;padding:10px 14px;min-width:120px}
.vesna-stat b{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.vesna-stat i{font-style:normal;font-size:12px;color:var(--muted);font-weight:600}

.bb2-obnova{display:none}

/* ---- Junak A ostane kot v produkciji (Max, 6. 9. 2026) -------------------------
   Codexov polish.css (naložen ZA to datoteko, telo .lp-polished) v junaku prestavi
   ponudbo pred video, skrije opombo »Za premislek imate 14 dni«, odstrani sij in
   prebarva vabo. Max: »keep option A hero as it's now live« — te vrstice z višjo
   specifičnostjo (body.lp-polished #top …) vrnejo živi junak na vseh širinah.
   Zaprto na .hero-vsl (junak A); junak v2 (.pdp) in odsek #video v v2 ne. ---- */
body.lp-polished #top .hero:has(.hero-vsl){padding:clamp(22px,3.2vw,44px) 0 clamp(48px,6vw,72px)}
body.lp-polished #top .hero-vsl > *{order:0}
body.lp-polished #top .hero-vsl h1{max-width:100%;margin:0 auto 14px;font-size:clamp(30px,4.6vw,54px);font-weight:500;line-height:1.06;letter-spacing:-.02em}
body.lp-polished #top .hero .hero-vsl p.sub{max-width:34rem;margin:0 auto 16px;padding:0;font-size:17px;line-height:1.5;color:var(--muted)}
body.lp-polished #top .hero-vsl .trust-row{margin:0 0 20px;font-size:13px;gap:10px}
body.lp-polished #top .hero-vsl .vsl{max-width:880px;margin:0 auto 18px}
body.lp-polished #top .hero-vsl .vsl::before{display:block}
body.lp-polished #top .hero-vsl .vsl-frame{border-width:6px;box-shadow:var(--sh-soft)}
body.lp-polished #top .hero-vsl .vsl-tap-box{padding:clamp(13px,1.7vw,18px) clamp(20px,3vw,34px);border-radius:14px;
  background:rgba(8,8,9,.90);border:2px solid var(--orange);color:var(--orange-2);box-shadow:var(--sh-soft), inset 0 1px 0 rgba(255,255,255,.06)}
body.lp-polished #top .hero-vsl .vsl-tap-t{font-size:clamp(13px,1.5vw,16px);font-weight:800}
body.lp-polished #top .hero-vsl .vsl-tap-i{width:clamp(40px,5.2vw,58px);color:currentColor}
body.lp-polished #top .hero-vsl .hero-cta{margin:0 0 12px}
body.lp-polished #top .hero-vsl .cta-badges{margin:0 0 8px;font-size:12.5px}
body.lp-polished #top .hero-vsl .hero-note{display:inline-flex;margin:0}
/* Živi vrstni red na telefonu (styles.css 478–503 + 2197–2201 sta OBA v @media ≤560 px):
   h1, podnaslov, zaupanje, VIDEO, gumb, značke, opomba. Med 561 in 860 px ni order pravil. */
@media (max-width:560px){
  body.lp-polished #top .hero-vsl .badge{order:1}
  body.lp-polished #top .hero-vsl h1{order:2;font-size:28px;line-height:1.14;margin-bottom:10px}
  body.lp-polished #top .hero .hero-vsl p.sub{order:3;font-size:14px;line-height:1.45;margin:0 auto 10px;padding:0 8px}
  body.lp-polished #top .hero-vsl .trust-row{order:4;margin:0 0 12px}
  body.lp-polished #top .hero-vsl .vsl{order:5;margin:0 auto 16px}
  body.lp-polished #top .hero-vsl .hero-cta{order:6;margin:0 0 8px}
  body.lp-polished #top .hero-vsl .cta-badges{order:7;margin:0 0 4px}
  body.lp-polished #top .hero-vsl .hero-note{order:8;margin:0}
}

/* ---- Lepljiv stolpec slik v ceniku ostane (Max, 6. 9. 2026) ---------------------
   polish.css (Codex) je lepljivost prestavil z NOTRANJEGA .bb2-stick na ZUNANJI
   .bb-media, ki je raztegnjen čez celo vrstico — lepljiv element brez prostora se ne
   premakne, zato so slike ob drsenju izginile. Tu vrnemo izvirni v2b prijem:
   zunanji ovoj raztegnjen in statičen, notranji .bb2-stick lepljiv (top 20 px). ---- */
@media (min-width:1021px){
  body.lp-polished #top .bb2 .bb-media{position:static;align-self:stretch}
  body.lp-polished #top .bb2-stick{position:sticky;top:20px}
}

/* ---- Video pas: duo Vivera + beljenje (Max, 6. 9. 2026) ------------------------
   Dva steklena čipa na temni podlagi + gumb, ki predizbere paket v ceniku. ------- */
.vidpas-duo{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.vidpas-duo>span{display:grid;grid-template-columns:18px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;
  padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:left}
.vidpas-duo>span svg{grid-row:1/3;color:#FFC8A9}
.vidpas-duo b{font-size:13.5px;font-weight:700;line-height:1.2;color:#fff}
.vidpas-duo i{font-style:normal;font-size:12px;line-height:1.3;color:rgba(255,255,255,.82)}
.vidpas-duo>em{font-style:normal;align-self:center;font-size:22px;font-weight:700;color:#FFC8A9;line-height:1}
.vidpas-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.vidpas-cta .btn{margin:0}
.vidpas-alt{font-size:13px;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
.vidpas-alt:hover{text-decoration-color:#fff}
.vidpas-txt:not(.x){align-items:flex-start}
@media (max-width:860px){
  .vidpas-duo{flex-direction:column;gap:8px}
  .vidpas-duo>em{display:none}
  .vidpas-cta{width:100%}
  .vidpas-cta .btn{width:100%}
  .vidpas-cta .vidpas-alt{align-self:center}
}

/* Sticky CTA: na namizju pas na vrhu, na telefonu pas na dnu.
   7. 9. 2026 je bil pas na telefonu izklopljen. Stran je na telefonu visoka
   38.000 px, zato kupec po prvem zaslonu ni videl nobenega gumba za nakup.
   14. 9. 2026 ga telefon dobi nazaj: cena levo, velik gumb desno. ui.js pas
   skrije, ko je pravi gumb v blagajni ze na zaslonu, da gumba ne tekmujeta. */
@media (max-width:860px){
  .sticky-cta{display:none}
  .sticky-cta.on{
    display:block;position:fixed;left:0;right:0;bottom:0;top:auto;
    z-index:95;transform:none;pointer-events:auto
  }
  .sticky-cta.on .sticky-in{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:nowrap;gap:12px;
    background:var(--dark);color:#fff;border:0;border-radius:0;
    /* env() varuje gumb pred domaco vrstico na iPhonu */
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 28px rgba(15,15,16,.22)
  }
  .sticky-cta.on .sticky-img,
  .sticky-cta.on .sticky-copy,
  .sticky-cta.on .sticky-proof,
  .sticky-cta.on .sticky-pill{display:none}
  .sticky-cta.on .sticky-price{
    display:flex;flex-direction:column;flex:none;line-height:1.05
  }
  .sticky-cta.on .sticky-price b{
    font-size:22px;font-weight:800;letter-spacing:-.03em;color:#fff
  }
  .sticky-cta.on .sticky-price i{
    font-style:normal;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.66)
  }
  .sticky-cta.on .sticky-act{
    position:static;display:block;flex:1;min-width:0;width:auto;padding-top:0
  }
  .sticky-cta.on .sticky-btn{
    display:flex;width:100%;height:56px;min-height:56px;padding:0 14px;
    border-radius:999px;background:var(--cta);color:#fff;
    font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap
  }
  body:has(.sticky-cta.on){padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}
@media (max-width:360px){
  .sticky-cta.on .sticky-price b{font-size:19px}
  .sticky-cta.on .sticky-btn{height:52px;min-height:52px;font-size:15px}
}
@media (min-width:861px){
  .sticky-cta{
    display:block;position:fixed;top:0;left:0;right:0;bottom:auto!important;
    z-index:95;transform:translateY(-110%);pointer-events:none;
    transition:transform .32s ease
  }
  .sticky-cta.on{transform:translateY(0);pointer-events:auto}
  body:has(.sticky-cta.on){padding-bottom:0}
  body:has(.sticky-cta.on) .vrh{transform:translateY(-100%)}
  .sticky-in{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    max-width:none;border:0;border-radius:0;
    background:var(--dark);color:#fff;
    padding:10px max(24px, calc((100% - 1180px) / 2 + 24px));
    box-shadow:0 10px 28px rgba(15,15,16,.22)
  }
  .sticky-img,.sticky-copy,.sticky-price{display:none}
  .sticky-proof{
    display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;
    font-size:13px;font-weight:600;color:rgba(255,255,255,.88);min-width:0
  }
  .sticky-proof .stars{color:#E8B15A;letter-spacing:1px;font-size:13px}
  .sticky-proof b{color:#fff;font-weight:700}
  .sticky-sep{opacity:.35;font-weight:500}
  .sticky-cta .sticky-act{
    position:relative;display:flex;flex-direction:row;align-items:center;
    gap:10px;flex:none;padding-top:0
  }
  .sticky-cta .sticky-pill,
  .lp-polished .sticky-cta .sticky-pill{
    position:static;left:auto;right:auto;top:auto;transform:none;
    display:inline-flex;align-items:center;height:28px;padding:0 12px;z-index:auto;
    background:#E8C36A;color:#1B1C1E;border-radius:999px;
    font-size:11px;font-weight:800;letter-spacing:.02em;
    white-space:nowrap;box-shadow:none
  }
  .sticky-cta .sticky-btn{
    height:50px;padding:0 26px;border-radius:999px;
    background:var(--cta);color:#fff;font-size:17px;font-weight:700
  }
  .sticky-cta .sticky-btn:hover{background:var(--cta-hover);color:#fff}
}

/* ======================================================================
   RAZLIKA: RAVNANJE PROTI VZDRZEVANJU (8. 9. 2026, Max)
   Dve kartici v odseku #razlika. Leva je »ravnanje zob« (nevtralno siva,
   ni ta ponudba), desna »vzdrzevanje« (zelena, je ta ponudba). Zelena in
   siva sta isti kot v tabeli #primerjava (.prim td.da / td.ne).
   Polish.css teh razredov ne pozna, zato prepisov ni.
   ====================================================================== */
.razl{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:980px;margin:0 auto}
.razl-c{display:flex;flex-direction:column;align-items:flex-start;background:#fff;border:1px solid #EBE9E3;border-radius:var(--radius-sec);padding:26px 24px}
.razl-k{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.razl-c h3{margin:0 0 10px;font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.razl-c p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.razl-tag{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700}
.razl-tag svg{flex:none}
.razl-ne .razl-tag{background:#F2F1ED;color:#5F6065}
.razl-da{background:#F4F8F2;border-color:#CFE3D6}
.razl-da .razl-k{color:#2F6B4F}
.razl-da .razl-tag{background:#2F6B4F;color:#fff}
.razl-op{max-width:66ch;margin:0 auto;text-align:center;font-size:14.5px;line-height:1.6;color:var(--muted)}
.razl-op a{color:var(--orange-ink);font-weight:700;white-space:nowrap}
@media (max-width:760px){
  .razl{grid-template-columns:1fr;gap:14px}
  .razl-c{padding:22px 20px}
  .razl-c h3{font-size:18px}
  .razl-op{font-size:14px}
}

/* ======================================================================
   BLOK IZDELKA POD PASOM »ZOBJE SE PREMIKAJO« — .hitra (8. 9. 2026, Max)
   Prepis pravil iz v2.css, da isti blok deluje tudi na /ponudba, ki nalozi
   samo styles.css + polish.css. Razredov .hitra / .pdp-* / .kljuki index.html
   prej ni uporabljal, zato ta pravila ne morejo vplivati na stare odseke.
   v2.html in v3.html nalozita v2.css ZA styles.css, zato tam nic ne spremeni.
   ====================================================================== */
.kljuki{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.kljuki li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:#3C3D40;font-weight:500}
.kljuki li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;
  background:#E6F0EB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A8167' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E") center/11px no-repeat}

main > section.plain.hitra-sec{padding-bottom:0}
.hitra{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(22px,3.4vw,44px);align-items:center;max-width:1040px;margin:0 auto;
  padding:clamp(20px,3vw,32px);border:1px solid #EBE9E3;border-radius:var(--radius-sec);background:#fff;
  box-shadow:0 0 0 1px #EFEDE7,0 1px 2px rgba(27,28,30,.04),0 18px 44px rgba(70,30,8,.08)}
.hitra-vizual{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;border-radius:20px;border:1px solid #EFECE6;
  background:radial-gradient(circle at 50% 42%,rgba(245,129,60,.30),rgba(245,129,60,0) 62%),linear-gradient(160deg,#FFF9F5,#F5F1EA 60%,#F2F1EC)}
.hitra-vizual img{width:84%;height:auto;max-height:84%;object-fit:contain;filter:drop-shadow(0 22px 28px rgba(40,30,24,.18))}
.hitra-vsebina{min-width:0}
.hitra h3{margin:0 0 12px;font-size:clamp(21px,2.3vw,27px);font-weight:500;letter-spacing:-.02em;line-height:1.15;color:var(--ink);text-wrap:balance}
.hitra-kljuki{margin-top:18px;grid-template-columns:1fr 1fr;gap:9px 18px}
.hitra-cta{margin-top:22px}
.hitra .pdp-trust{margin-top:16px}
.hitra .pdp-pay{margin-top:14px}

.pdp-badge{position:absolute;top:16px;left:16px;z-index:2;padding:7px 12px;border-radius:999px;background:var(--dark);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.pdp-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 14px;margin-bottom:12px}
.pdp-top .kicker{margin:0}
.pdp-rating{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted)}
.pdp-rating .stars{color:#C67A08;letter-spacing:1px;font-size:13px}
.pdp-rating b{color:var(--ink);font-weight:700}
.pdp-rating:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
.pdp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.pdp-price>b{font-size:clamp(38px,3.8vw,50px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.pdp-per{font-size:15px;font-weight:600;color:var(--text)}
.pdp-price>s{font-size:17px;color:#B9B6AE}
.pdp-save{font-style:normal;display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#EAF3EE;color:#2F6B4F;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.pdp-day{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.pdp-btn{width:100%;height:56px;font-size:16px}
.pdp-trust{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px 16px;margin-top:16px;font-size:13px;font-weight:600;color:var(--muted)}
.pdp-trust span{display:inline-flex;align-items:center;gap:7px}
.pdp-trust svg{flex:none;color:var(--orange)}
.pdp-pay{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px 12px;margin-top:16px;padding:10px 14px;border:1px solid #EFECE6;border-radius:12px;background:#FBFAF7;color:var(--muted);font-size:12px;font-weight:600}
.pdp-pay img{width:auto;height:16px;object-fit:contain}

@media (max-width:720px){
  .pdp-badge{top:12px;left:12px;font-size:11px}
  .pdp-price>b{font-size:40px}
  .pdp-btn{height:54px}
  .pdp-trust{justify-content:flex-start;gap:8px 14px}
  .pdp-pay{justify-content:flex-start}
  .hitra{padding:18px;gap:18px;border-radius:20px;grid-template-columns:minmax(0,1fr)}
  .hitra-vizual{aspect-ratio:5/4;border-radius:16px}
  .hitra-kljuki{grid-template-columns:1fr}
}
@media (max-width:390px){
  .pdp-price>b{font-size:36px}
}

/* ==========================================================================
   VRHNJI PAS IN GLAVA PO ZGLEDU v3 (Max, 8. 9. 2026)

   Prepis pasu z odstevanjem in glave z logotipom na sredini z /ponudba/v3.
   Markup je isti kot tam (tools/v3/pas_v3.html in tools/v3/glava_v3.html),
   zato so pravila spodaj dobesedni prepis razdelkov 1 in 2 iz v3.css.
   Tu morajo stati, ker /ponudba nalozi samo styles.css in polish.css.

   Barva #7C2B08 je ista kot zeton --v3-deep v v3.css. Tu je zapisana
   neposredno, da paleta /ponudba (--orange:#CF4B0C) ostane nedotaknjena.

   Na /ponudba/v3 se ta pravila podvojijo, a se nic ne spremeni: v3.css se
   nalozi ZA styles.css in zapise iste vrednosti.
   Na /ponudba/v2 in na podstraneh (kviz, znanost, mnenja, vprasanja,
   kontakt) teh razredov ni, zato pravila tam ne naredijo nicesar.
   ========================================================================== */

/* ---- 1) pas z odstevanjem ------------------------------------------------
   Na sredini ponudba in odstevanje, na desni kraj obravnave. Stevilke polni
   ui.js prek #anncTime; markup <span><b>NN</b><i>DNI</i></span> je isti kot
   pri prejsnjem pasu, zato v ui.js ni sprememb.
   ------------------------------------------------------------------------ */
.v3-bar{
  position:relative;
  color:#fff;
  background:linear-gradient(90deg,#5E1D03 0%,#7C2B08 18%,#B4470F 52%,#DD5F16 78%,#F07A28 100%);
}
.v3-bar-in{
  max-width:1180px;margin:0 auto;padding:9px 22px;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,3vw,44px);
  min-height:56px;box-sizing:border-box;
}

/* Ponudba: krepka vrstica in pod njo drobni razlogi. */
.v3-bar-offer{text-align:center;line-height:1.25}
.v3-bar-offer b{
  display:block;
  font-size:clamp(12px,1.12vw,15px);font-weight:800;
  letter-spacing:.055em;text-transform:uppercase;
}
.v3-bar-offer span{
  display:block;margin-top:3px;
  font-size:clamp(10.5px,.92vw,12.5px);font-weight:500;
  color:rgba(255,255,255,.86);
}
.v3-bar-offer i{font-style:normal;opacity:.72;padding:0 2px}

/* Odstevanje: stiri stevilke z drobnimi oznakami in dvopicji vmes. */
.v3-bar-cd{display:flex;align-items:flex-start;gap:clamp(14px,1.5vw,20px);flex:none}
.v3-bar-cd span{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  min-width:clamp(20px,1.9vw,26px);
}
/* Dvopicje sedi na sredini reze med stevilkama: pol razmika levo. */
.v3-bar-cd span+span::before{
  content:":";
  position:absolute;top:-1px;left:calc(-1 * clamp(7px,.75vw,10px));
  transform:translateX(-50%);
  font-size:clamp(14px,1.4vw,19px);font-weight:600;line-height:1.15;
  color:rgba(255,255,255,.5);
}
.v3-bar-cd b{
  font-size:clamp(16px,1.62vw,21px);font-weight:700;
  line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.v3-bar-cd i{
  margin-top:2px;
  font-size:8.5px;font-style:normal;font-weight:600;
  letter-spacing:.12em;color:rgba(255,255,255,.72);
}

/* Kraj obravnave: v zgledu je na tem mestu izbirnik valute. */
.v3-bar-loc{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;text-decoration:none;white-space:nowrap;
}
.v3-bar-loc:hover{color:#fff;opacity:.82}
.v3-bar-loc svg{flex:none;opacity:.8}

/* Ovoj pasu: razred .annc je na njem samo zato, da ui.js po 30. 9. 2026
   skrije pas (isce el.closest('.annc')). Temna podlaga, velikost in visina
   vrstice iz .annc so tu odvec, ker barvo nosi .v3-bar. */
.v3-annc{background:none;color:inherit;font-size:inherit;line-height:inherit}
.v3-annc::before{display:none}

/* ---- 2) glava: logotip na sredini ---------------------------------------
   Logotip na sredini je samo na sirokem zaslonu. Pod 981 px prevzame glavo
   prvotna prozna postavitev zgoraj (.hdr{flex-wrap:wrap}, nav z
   flex-basis:100% in order:10) — mreza tega spustnega menija ne razporedi,
   ker flex-basis in order v mrezi ne veljata.

   Razredi .hdr-desno, .hdr-tel in .btn-hdr so oblikovani ze zgoraj. Tu jih
   samo razporedi mreza, gumb pa dobi temno oranzno polnilo, da se ujema s
   pasom nad njim. Nad 981 px, ker je 239 px siroka skupina telefona in
   poziva na ozjem zaslonu potisnila burger iz vrstice. Poziv na telefonu
   nosi lepljiva vrstica na dnu, telefonska stevilka pa je v meniju in v nogi.
   ------------------------------------------------------------------------ */
@media (min-width:981px){
  .v3-hdr .hdr{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:clamp(10px,2vw,26px);
  }
  /* nav ima zgoraj margin:0 auto; v mrezi ga poravna justify-self */
  .v3-hdr #site-nav{grid-column:1;justify-self:start;margin:0}
  .v3-hdr .brand{grid-column:2;justify-self:center}
  .v3-hdr .burger{grid-column:3;justify-self:end}

  .v3-hdr .hdr-desno{
    grid-column:3;justify-self:end;
    display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);
  }
  .v3-hdr .hdr-tel{
    font-size:13px;font-weight:700;letter-spacing:.01em;
    color:var(--ink);text-decoration:none;white-space:nowrap;
  }
  .v3-hdr .hdr-tel:hover{color:#7C2B08}
  /* 14. 9. 2026: gumb v glavi je bil z 11,25-13 px najmanjsi gumb za nakup
     na strani — manjsi od besedila okoli njega. Zdaj 15 px, visina 46 px. */
  .v3-hdr .btn-hdr{
    height:46px;padding:0 22px;border-radius:999px;
    font-size:15px;font-weight:700;color:#fff;white-space:nowrap;
    background:linear-gradient(96deg,#5E1D03 0%,#7C2B08 46%,#A93C09 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px -8px rgba(94,29,3,.6);
  }
  /* Preliv velja tudi ob miski: .v3-hdr .btn-hdr stoji ZA pravilom
     .btn-hdr:hover{background:#B8420B} in ima isto natancnost. */
  .v3-hdr .btn-hdr:hover{filter:brightness(1.09)}
  /* polish.css:71 postavi .lp-polished .btn-hdr{box-shadow:none} ZA to
     datoteko, zato senco vrne samo enako natancno pravilo. */
  .lp-polished .v3-hdr .btn-hdr{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px -8px rgba(94,29,3,.6);
  }
}

@media (max-width:1040px){
  .v3-bar-loc{display:none}
}

@media (max-width:980px){
  .v3-hdr .hdr-desno{display:none}
  /* Na telefonu je burger levo in logotip na sredini. Samodejna robova
     logotipa ga ne postavita na sredino, ker burger v prozni vrstici porabi
     del prostora. Zato je logotip postavljen absolutno na sredino PRVE
     vrstice, burger pa ostane prvi v toku. Odmik je pol visine vrstice v
     px in ne 50 %: ko se meni odpre, .hdr zraste v drugo vrstico in
     logotip ne sme zdrsniti navzdol.
     Visino .hdr postavi polish.css: 76 px, pod 861 px 68 px. */
  .v3-hdr .burger{order:-1;margin-left:0;margin-right:auto}
  .v3-hdr .brand{
    position:absolute;left:50%;top:38px;
    transform:translate(-50%,-50%);
    margin:0;
  }
  /* Ko je meni odprt, ga pravilo header.open .brand{position:relative}
     (natancnost 0,2,1) vrne v tok in logotip odskoci z sredine. Tu ostane
     na sredini; z-index 2 ga zadrzi nad prekrivnim menijem.
     Na /ponudba/v3 tega popravka ni — tam logotip ob odprtem meniju odskoci. */
  header.v3-hdr.open .brand{position:absolute;z-index:2}
}

@media (max-width:860px){
  .v3-hdr .brand{top:34px}
  .v3-bar-in{
    flex-direction:column;gap:8px;padding:10px 16px;min-height:0;
  }
  .v3-bar-offer b{font-size:11.5px;letter-spacing:.04em}
  .v3-bar-offer span{font-size:10.5px}
  .v3-bar-cd span{min-width:38px}
  .v3-bar-cd b{font-size:17px}
}

/* ===== Zadnji CTA s člansko kartico (8. 9. 2026) =========================
   Odsek #clanstvo pred </main>: levo seznam vključenega, desno 3D kartica s
   ceno, pod njo plačilni znaki in gumb, spodaj pas zaupanja.

   ⚠ Barve kartice so LOKALNI žetoni na .bb2-kartica-oder. polish.css piše
   žetone na .lp-polished (= body) in bi premagal :root.
   ⚠ [hidden] ne deluje na flex/grid — spodaj so izrecna pravila display:none.
   ========================================================================= */
.zclan{padding-block:clamp(48px,6vw,86px)}
.zclan[hidden]{display:none}
.zclan-head{text-align:center;max-width:44ch;margin:0 auto clamp(28px,3.4vw,44px)}
.zclan-head h2{font-size:clamp(27px,3.5vw,44px);line-height:1.08;letter-spacing:-.025em;font-weight:600}
.zclan-head h2 s{color:var(--muted);text-decoration-thickness:.055em}
.zclan-head h2 b{color:var(--orange-ink);font-weight:600}
.zclan-head p{margin-top:12px;font-size:15px;color:var(--muted)}

.zclan-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,58px);align-items:start}

.zclan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.zclan-list li{display:flex;gap:13px;align-items:flex-start}
.zclan-list li[hidden]{display:none}
.zclan-list .ic{flex:none;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin-top:1px;border-radius:999px;
  background:var(--orange-soft);color:var(--orange-ink)}
.zclan-list b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.zclan-list i{display:block;margin-top:4px;font-style:normal;font-size:13.5px;line-height:1.5;color:var(--muted)}

.zclan-desno{display:flex;flex-direction:column;gap:22px;align-items:stretch;
  padding-left:clamp(24px,3.6vw,58px);border-left:1px solid var(--line)}
.zclan-kupi{display:flex;flex-direction:column;gap:14px;align-items:center}
.zclan-placila{display:flex;align-items:center;justify-content:center;gap:16px;opacity:.62}
.zclan-placila img{height:20px;width:auto;filter:grayscale(1)}
.zclan-placila span{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.zclan-cta{width:100%;max-width:420px;justify-content:center;text-align:center}
.zclan-cta[hidden]{display:none}
.zclan-vrni{font-size:13px;line-height:1.45;color:var(--muted);text-align:center}
.zclan-vrni[hidden]{display:none}
.zclan-vrni button{background:none;border:0;padding:0;font:inherit;color:var(--orange-ink);
  font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}

.zclan-zaupanje{display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(34px,4vw,56px);border-top:1px solid var(--line)}
.zclan-zaupanje span{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:20px 14px;color:var(--muted)}
.zclan-zaupanje span + span{border-left:1px solid var(--line)}
.zclan-zaupanje b{font-size:13.5px;font-weight:600;color:var(--text)}

/* ===== Članska kartica 3D ================================================
   Nagib, sij in obrat so prepis zlate vstopnice iz
   vbo-nagradna-test/immortals.html (vrstici 79 in 2608). Razlika: tam sta bili
   dve .webp sliki, tukaj je kartica HTML + CSS, ker se stopnja, cena, datum in
   ugodnosti spreminjajo z izbranim paketom v #cenik.
   ========================================================================= */
.bb2-kartica-oder{
  --k-1:#C24A12; --k-2:#8E3208; --k-3:#38190A;
  --k-rob:rgba(255,214,170,.28); --k-zlato:#E8C48C; --k-blaga:#F7E2CB;
  --k-cip1:#F3D9A8; --k-cip2:#C8A163; --k-cip3:#EBD4A6;
  --k-sen:rgba(58,27,12,.30);
  position:relative;padding:6px 0 0;
  display:flex;flex-direction:column;align-items:center;gap:14px
}
.bb2-kartica-zar{
  position:absolute;left:50%;top:2%;width:86%;aspect-ratio:2/1;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(207,75,12,.16) 0%,rgba(207,75,12,.05) 46%,transparent 72%);
  pointer-events:none
}

.bb2-kartica{
  position:relative;z-index:2;width:100%;max-width:430px;aspect-ratio:1.586;
  perspective:1200px;background:none;border:0;padding:0;margin:0;cursor:pointer;
  font-family:inherit;color:#fff;-webkit-tap-highlight-color:transparent
}
.bb2-kartica:focus-visible{outline:3px solid var(--orange);outline-offset:6px;border-radius:20px}
.bb2-kartica-notri{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.2,.7,.2,1);
  transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + var(--flip,0deg)))
}
.bb2-kartica.obrnjena .bb2-kartica-notri{--flip:180deg}

.bb2-kartica-stran{
  position:absolute;inset:0;display:flex;flex-direction:column;
  border-radius:16px;overflow:hidden;text-align:left;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 10px),
    linear-gradient(135deg,var(--k-1) 0%,var(--k-2) 46%,var(--k-3) 100%);
  box-shadow:0 22px 40px var(--k-sen), inset 0 0 0 1px var(--k-rob)
}
/* spodnja senca: drobne oznake so na svetlem delu preliva padle pod 3:1 */
.bb2-kartica-stran::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:58%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(28,11,3,.10) 38%,rgba(28,11,3,.46) 100%)
}
.bb2-kartica-stran>*{position:relative;z-index:1}
.bb2-kartica-stran::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 12% -10%,rgba(255,236,214,.20) 0%,transparent 58%)
}
.bb2-kartica-lice{padding:19px 21px 17px}
.bb2-kartica-hrbet{transform:rotateY(180deg);padding:0 21px 15px}

/* ---- lice ---- */
.bb2-kartica-vrh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.bb2-kartica-znamka img{display:block;height:14px;width:auto;opacity:.96}
.bb2-kartica-znamka i{display:block;margin-top:6px;font-style:normal;font-size:13px;
  font-weight:500;letter-spacing:-.005em;color:rgba(255,255,255,.80)}
.bb2-kartica-stopnja{
  flex:none;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.32)
}
.bb2-kartica-cip{
  margin-top:16px;width:37px;height:27px;border-radius:5px;flex:none;
  display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 6px;
  background:linear-gradient(135deg,var(--k-cip1),var(--k-cip2) 55%,var(--k-cip3))
}
.bb2-kartica-cip i{display:block;height:1px;background:rgba(88,58,20,.42)}

.bb2-kartica-dno{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:auto}
.bb2-kartica-cena{display:block}
.bb2-kartica-cena>b{font-size:clamp(30px,2.6vw,40px);font-weight:600;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.20)}
.bb2-kartica-cena em{margin-left:5px;font-style:normal;font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.84)}
.bb2-kartica-cena>i{display:block;margin-top:9px;font-style:normal;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.bb2-kartica-cena>i b{font-weight:700;color:rgba(255,255,255,.94)}
.bb2-kartica-drobno{flex:none;text-align:right;font-size:10.5px;line-height:1.5;
  color:rgba(255,255,255,.80)}
.bb2-kartica-zig{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-11deg);
  font-size:15px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.86);border:2.5px solid rgba(255,255,255,.62);
  border-radius:8px;padding:7px 15px;white-space:nowrap;pointer-events:none;z-index:2
}
.bb2-kartica-zig[hidden]{display:none}

/* ---- hrbet ---- */
.bb2-kartica-trak{display:block;flex:none;height:34px;margin:18px -21px 0;background:#180D06}
.bb2-kartica-kicker{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;
  font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.76)
}
.bb2-kartica-kicker b{
  font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.90);background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:3px 9px;white-space:nowrap
}
.bb2-kartica-seznam{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.bb2-kartica-seznam span{position:relative;padding-left:17px;font-size:12px;line-height:1.4;font-weight:500}
.bb2-kartica-seznam span[hidden]{display:none}
.bb2-kartica-seznam span::before{
  content:"";position:absolute;left:0;top:5px;width:8px;height:4.5px;
  border-left:1.8px solid var(--k-blaga);border-bottom:1.8px solid var(--k-blaga);
  transform:rotate(-45deg)
}
.bb2-kartica-noga{margin-top:auto;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.78)}
.bb2-kartica-noga b{font-weight:700;color:rgba(255,255,255,.94);font-variant-numeric:tabular-nums}

/* ---- sij, ki sledi miški ---- */
.bb2-kartica-sij{
  position:absolute;inset:0;border-radius:16px;pointer-events:none;opacity:0;
  transition:opacity .3s ease;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 38%,rgba(255,245,220,.40) 50%,transparent 62%);
  background-size:260% 100%;background-position:var(--sij,120%) 0
}
.bb2-kartica:hover .bb2-kartica-sij{opacity:1}

.bb2-kartica-namig{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--muted)
}

/* ---- stanja po izbranem paketu v #cenik ---- */
.bb2-kartica-oder.zlato .bb2-kartica-stran{box-shadow:0 22px 40px var(--k-sen), inset 0 0 0 1.6px var(--k-zlato)}
.bb2-kartica-oder.zlato .bb2-kartica-stopnja{
  background:linear-gradient(135deg,#F1D8A9,#D9B472);color:#4A2A0C;border-color:rgba(255,255,255,.45)
}
.bb2-kartica-oder.mesec{--k-1:#5C4C3F;--k-2:#3D332B;--k-3:#241D18;--k-sen:rgba(30,22,16,.28)}
.bb2-kartica-oder.brez{
  --k-1:#9C978F;--k-2:#7A756E;--k-3:#4E4A45;--k-rob:rgba(255,255,255,.18);
  --k-cip1:#DAD6CF;--k-cip2:#A7A29B;--k-cip3:#CFCAC3;--k-sen:rgba(60,58,54,.24)
}
.bb2-kartica-oder.brez .bb2-kartica-zar{opacity:0}
.bb2-kartica-oder.brez .bb2-kartica-znamka i{opacity:.72}

/* ---- gib ---- */
@keyframes bb2KarticaUtrip{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
.bb2-kartica.utrip{animation:bb2KarticaUtrip .34s ease}
@keyframes bb2KarticaZib{
  0%{transform:rotateY(0) rotateX(0)}
  30%{transform:rotateY(11deg) rotateX(-3.5deg)}
  64%{transform:rotateY(-8deg) rotateX(2.5deg)}
  100%{transform:rotateY(0) rotateX(0)}
}
.bb2-kartica-notri.zib{animation:bb2KarticaZib 1.9s cubic-bezier(.4,0,.2,1)}

@media (prefers-reduced-motion:reduce){
  .bb2-kartica-notri{transition:none}
  .bb2-kartica-notri.zib{animation:none}
  .bb2-kartica.utrip{animation:none}
}

@media (max-width:900px){
  .zclan-grid{grid-template-columns:1fr;gap:30px}
  .zclan-desno{order:-1;padding-left:0;border-left:0}
  .zclan-zaupanje{grid-template-columns:1fr}
  .zclan-zaupanje span{justify-content:flex-start;padding:15px 2px}
  .zclan-zaupanje span + span{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:720px){
  .bb2-kartica-oder{padding:20px 15px 14px;border-radius:16px}
  .bb2-kartica{max-width:330px}
  .bb2-kartica-lice{padding:16px 17px 15px}
  .bb2-kartica-hrbet{padding:0 17px 13px}
  .bb2-kartica-trak{margin:15px -17px 0;height:30px}
  .bb2-kartica-znamka i{font-size:12px}
  .bb2-kartica-cena>b{font-size:30px}
  .bb2-kartica-drobno{font-size:9.5px}
  .zclan-cta{max-width:none}
}