/* ==========================================================================
   WAMP — wamp.css · GENEROVANÝ SÚBOR, NEUPRAVUJTE HO RUČNE.
   Zdroje: src/css/tokens.css + base.css + components.css
   Prestavba: node tools/build-css.mjs
   ========================================================================== */

/* ── tokens.css ─────────────────────────────────────────────────────── */
/* ==========================================================================
   WAMP, s.r.o. — dizajnové tokeny · „GRAPHITE & SIGNAL YELLOW" · v1.0
   Žltá #FFE100 = doložená identita klienta (banner + areál). Kontrasty WCAG 2.1.
   ========================================================================== */
:root{
  /* 1 · NEUTRÁLY — svetlý režim (~70 %) */
  --w-paper:#FFFFFF;
  --w-mist:#F4F5F2;          /* striedavá sekcia — teplejšia neutrálna (nie modrastá, kvôli žltej) */
  --w-mist-2:#E9EBE5;        /* vnorená plocha, placeholder */
  --w-line:#DFE2DB;          /* dekoratívna linka */
  --w-line-strong:#C9CEC4;   /* okraj karty, riadky tabuľky */
  --w-border-field:#7C8278;  /* okraj inputu — 3,95:1 na paper · 3,61:1 na mist ✅ 1.4.11 */
  --w-text:#0F1310;          /* 18,73:1 na paper ✅ */
  --w-muted:#59615A;         /* 6,40:1 na paper · 5,85:1 na mist ✅ AA */

  /* 2 · GRAFIT — tmavé kotvy (~30 %) */
  --w-ink:#0B0F14;           /* biely text 19,22:1 ✅ */
  --w-ink-2:#131A21;         /* karta na tmavom */
  --w-ink-3:#1C242D;         /* hover na tmavom */
  --w-ink-line:rgba(255,255,255,.09);
  --w-ink-line-2:rgba(255,255,255,.16);
  --w-ink-field:#6B7581;     /* okraj inputu na tmavom — 4,11:1 na ink ✅ */
  --w-on-ink:#FFFFFF;
  --w-on-ink-muted:#9AA6B2;  /* 7,75:1 ✅ */

  /* 3 · SIGNAL YELLOW — rampa (jediná farba systému)
     Žltá = PLOCHA. Nikdy text na svetlom. */
  --w-brand-tint:#FFF9D6;    /* podložka badge „ZADARMO" — ink text 18,10:1 ✅ */
  --w-brand-500:#FFE100;     /* VÝPLŇ CTA · akcent na tmavom (14,66:1 s ink ✅)
                                ⚠ na bielej 1,31:1 → NIKDY text, NIKDY samostatná linka bez okraja */
  --w-brand-550:#F5D800;     /* hover CTA (13,46:1 s ink ✅) */
  --w-brand-600:#A88A00;     /* OKRAJ CTA a UI prvkov na svetlom — non-text (3,33:1 na paper · 3,05:1 na mist ✅) */
  --w-brand-700:#8A6D00;     /* veľký akcent na svetlom ≥24 px (4,92:1 na paper · 4,50:1 na mist ✅) */
  --w-brand-800:#7A6200;     /* „žltý" TEXT na svetlom — odkazy, ceny (5,87:1 na paper · 5,37:1 na mist ✅ AA) */
  --w-brand-a12:rgba(255,225,0,.12);

  /* 4 · SÉMANTIKA */
  --w-ok:#12784B;   --w-ok-on-ink:#3DDC97;
  --w-warn:#8A5A00; --w-warn-on-ink:#FFC15E;
  --w-err:#B3261E;  --w-err-on-ink:#F87171;
  --w-info:#1B5E9E; --w-info-on-ink:#7FB2F0;

  /* 5 · ROLOVÉ ALIASY (používaj TIETO) */
  --w-surface:var(--w-paper);
  --w-fg:var(--w-text);
  --w-fg-muted:var(--w-muted);
  --w-edge:var(--w-line-strong);
  --w-link:var(--w-brand-800);
  --w-focus:var(--w-ink);
  --w-cta-bg:var(--w-brand-500);
  --w-cta-fg:var(--w-ink);            /* 14,66:1 ✅ — NIKDY biela na žltej */
  --w-cta-edge:var(--w-brand-600);
  --w-cta-bg-hover:var(--w-brand-550);
  --w-cta2-bg:var(--w-ink);
  --w-cta2-fg:var(--w-on-ink);

  /* 6 · TYPOGRAFIA */
  --w-font-display:"Archivo","Archivo Fallback",system-ui,sans-serif;   /* wght+wdth VF */
  --w-font-text:"Inter","Inter Fallback",system-ui,sans-serif;          /* wght+opsz VF */
  --w-fs-hero:clamp(2.125rem,1.417rem + 3.148vw,4.25rem);
  --w-fs-h1:clamp(1.875rem,1.417rem + 2.037vw,3.25rem);
  --w-fs-h2:clamp(1.625rem,1.333rem + 1.296vw,2.5rem);
  --w-fs-h3:clamp(1.3125rem,1.167rem + 0.648vw,1.75rem);
  --w-fs-h4:clamp(1.125rem,1.063rem + 0.278vw,1.3125rem);
  --w-fs-lead:clamp(1.125rem,1.042rem + 0.370vw,1.375rem);
  --w-fs-body:clamp(1.0625rem,1.042rem + 0.093vw,1.125rem);
  --w-fs-sm:0.9375rem;
  --w-fs-micro:clamp(0.75rem,0.729rem + 0.093vw,0.8125rem);
  --w-fs-price:clamp(1.75rem,1.417rem + 1.481vw,2.75rem);
  --w-lh-tight:1.04; --w-lh-head:1.10; --w-lh-h3:1.20;
  --w-lh-h4:1.30; --w-lh-lead:1.45; --w-lh-body:1.62; --w-lh-sm:1.50;
  --w-ls-hero:-0.022em; --w-ls-h1:-0.020em; --w-ls-h2:-0.018em;
  --w-ls-h3:-0.012em; --w-ls-h4:-0.006em; --w-ls-eyebrow:0.14em;
  --w-wd-hero:92; --w-wd-h1:94; --w-wd-h2:96; --w-wd-norm:100;
  --w-measure:68ch; --w-measure-lead:46ch; --w-measure-head:24ch;

  /* 7 · PRIESTOR (8 px základ) */
  --w-s-1:.25rem; --w-s-2:.5rem; --w-s-3:.75rem; --w-s-4:1rem;
  --w-s-6:1.5rem; --w-s-8:2rem; --w-s-12:3rem; --w-s-16:4rem;
  --w-s-24:6rem; --w-s-32:8rem;

  /* 8 · LAYOUT */
  --w-container:1200px; --w-container-wide:1360px; --w-container-text:760px;
  --w-gutter:clamp(1.25rem,4vw,2.5rem);
  --w-gap:clamp(1rem,2vw,1.5rem);
  --w-section:clamp(4.5rem,9vw,7.5rem);
  --w-section-hero:clamp(6rem,11vw,9.5rem);
  --w-header-h:76px; --w-header-h-sm:64px; --w-utility-h:34px;

  /* 9 · RÁDIUSY (strop 20 px) */
  --w-r-1:8px; --w-r-2:12px; --w-r-3:16px; --w-r-4:20px; --w-r-pill:999px;

  /* 10 · TIENE (hrany > tiene) */
  --w-sh-1:0 1px 2px rgba(11,15,20,.05);
  --w-sh-2:0 2px 4px rgba(11,15,20,.05),0 8px 20px rgba(11,15,20,.06);
  --w-sh-3:0 12px 34px rgba(11,15,20,.10),0 4px 10px rgba(11,15,20,.06);
  --w-sh-brand:0 8px 22px rgba(255,225,0,.30);  /* len hover primárneho CTA */

  /* 11 · POHYB */
  --w-dur-1:140ms; --w-dur-2:260ms; --w-dur-3:420ms; --w-dur-4:500ms;
  --w-ease:cubic-bezier(.2,.7,.2,1);
  --w-ease-out:cubic-bezier(.16,1,.3,1);

  /* 12 · FOTOGRAFIA */
  --w-photo-ar:4/3;                     /* jednotný orez kariet a detailov */
  --w-photo-ar-hero:16/9;               /* len fotky ≥2400 px */
  --w-photo-pos:50% 60%;
  --w-photo-edge:inset 0 0 0 1px rgba(11,15,20,.10);
  --w-photo-max-sm:320px;               /* strop pre 18 fotiek 640×480 */
  --w-scrim:linear-gradient(to top,rgba(11,15,20,.86) 0%,
            rgba(11,15,20,.55) 42%,rgba(11,15,20,0) 78%);

  /* 13 · VRSTVENIE */
  --w-z-base:1; --w-z-sticky:100; --w-z-header:200;
  --w-z-drawer:300; --w-z-modal:400; --w-z-toast:500;
}

/* Tmavé sekcie — aliasy sa preklopia jednou triedou */
.on-ink{
  --w-surface:var(--w-ink); --w-fg:var(--w-on-ink); --w-fg-muted:var(--w-on-ink-muted);
  --w-edge:var(--w-ink-line); --w-link:var(--w-brand-500); --w-focus:var(--w-brand-500);
  --w-border-field:var(--w-ink-field);
  --w-cta2-bg:transparent; --w-cta2-fg:var(--w-on-ink);
  --w-ok:var(--w-ok-on-ink); --w-warn:var(--w-warn-on-ink);
  --w-err:var(--w-err-on-ink); --w-info:var(--w-info-on-ink);
  background:var(--w-surface); color:var(--w-fg);
}

/* Žltý panel (badge ZADARMO, hero doska) — text vždy ink */
.on-brand{background:var(--w-brand-500);color:var(--w-ink);}

/* Deliaca linka odvodená z loga (zúžené konce) */
.rule{height:2px;border:0;width:100%;
  background:linear-gradient(90deg,transparent 0%,currentColor 6%,currentColor 94%,transparent 100%);
  opacity:.30;}

/* Primárne CTA — jediná správna kombinácia */
.btn-primary{
  background:var(--w-cta-bg);color:var(--w-cta-fg);           /* 14,8:1 ✅ */
  box-shadow:inset 0 0 0 1px var(--w-cta-edge);               /* hranica ≥3:1 na bielej */
  border-radius:var(--w-r-2);min-height:48px;
  font:600 1.0625rem/1 var(--w-font-text);letter-spacing:.005em;
  padding:0 var(--w-s-6);
  transition:transform var(--w-dur-1) var(--w-ease-out),
             background-color var(--w-dur-1) linear,
             box-shadow var(--w-dur-1) linear;}
@media (hover:hover){
  .btn-primary:hover{background:var(--w-cta-bg-hover);
    transform:translateY(-1px);box-shadow:var(--w-sh-brand);}}
.btn-primary:active{transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(11,15,20,.24);}

/* Fokus — nikdy nevypínať */
:focus-visible{outline:3px solid var(--w-focus);outline-offset:2px;border-radius:4px;}

/* Číslice */
.tnum,table,.price,.spec,.phone{font-variant-numeric:tabular-nums;}

/* Obmedzený pohyb — na úrovni tokenov */
@media (prefers-reduced-motion:reduce){
  :root{--w-dur-1:.01ms;--w-dur-2:.01ms;--w-dur-3:.01ms;--w-dur-4:.01ms;}
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important;}
  .reveal{opacity:1!important;transform:none!important;}}

/* Zvýšený kontrast */
@media (prefers-contrast:more){
  :root{--w-line:#B8BDB1;--w-line-strong:#8D948A;--w-muted:#3E463F;
        --w-border-field:#4B5148;}}

/* iOS guard */
html,body{overflow-x:clip;max-width:100vw;}


/* ── base.css ─────────────────────────────────────────────────────── */
/* ==========================================================================
   WAMP — base.css · reset, fonty, typografia, utility · v1.0 (WP1)
   Poradie načítania: tokens.css → base.css → components.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · FONTY — self-host woff2 (Archivo VF wght+wdth · Inter VF wght)
   Jeden subset na rodinu (latin + Latin Extended-A) — pokrýva celú slovenčinu,
   takže sa slovo nikdy nerozpadne medzi dva súbory. Preload oboch v <head>.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("../fonts/archivo-sk.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/inter-sk.woff2") format("woff2");
}

/* Fallbacky s metrickou korekciou — nulový CLS pri swape (aproximácia z Arial metrík) */
@font-face{
  font-family:"Archivo Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Helvetica");
  size-adjust:104.5%;ascent-override:88%;descent-override:21%;line-gap-override:0%;
}
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Helvetica");
  size-adjust:107%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;
}

/* --------------------------------------------------------------------------
   2 · RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--w-font-text);
  font-size:var(--w-fs-body);
  line-height:var(--w-lh-body);
  color:var(--w-fg);
  background:var(--w-surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,picture,svg,video{display:block;max-width:100%;height:auto;}
input,button,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;padding:0;cursor:pointer;}
ul[class],ol[class]{list-style:none;padding:0;}
fieldset{border:0;padding:0;min-width:0;}
address{font-style:normal;}
hr{border:0;border-top:1px solid var(--w-line);}
iframe{border:0;}
[hidden]{display:none!important;}

/* Kotvy — scroll nezacestuje pod sticky header */
[id]{scroll-margin-top:calc(var(--w-header-h) + var(--w-s-4));}

/* Výber textu — grafit + biela (žltá by nemala kontrast na text) */
::selection{background:var(--w-ink);color:var(--w-on-ink);}
.on-ink ::selection{background:var(--w-brand-500);color:var(--w-ink);}

/* --------------------------------------------------------------------------
   3 · TYPOGRAFIA — Archivo (display, zúžená wdth) + Inter (text)
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{font-family:var(--w-font-display);text-wrap:balance;}
h1{
  font-size:var(--w-fs-h1);font-weight:700;line-height:var(--w-lh-head);
  letter-spacing:var(--w-ls-h1);font-stretch:calc(var(--w-wd-h1)*1%);
  max-width:var(--w-measure-head);
}
h2{
  font-size:var(--w-fs-h2);font-weight:700;line-height:var(--w-lh-head);
  letter-spacing:var(--w-ls-h2);font-stretch:calc(var(--w-wd-h2)*1%);
}
h3{
  font-size:var(--w-fs-h3);font-weight:650;line-height:var(--w-lh-h3);
  letter-spacing:var(--w-ls-h3);
}
h4,h5,h6{
  font-size:var(--w-fs-h4);font-weight:600;line-height:var(--w-lh-h4);
  letter-spacing:var(--w-ls-h4);
}
p{max-width:var(--w-measure);}
.lead{font-size:var(--w-fs-lead);line-height:var(--w-lh-lead);max-width:var(--w-measure-lead);}
small,.text-sm{font-size:var(--w-fs-sm);line-height:var(--w-lh-sm);}
.text-micro{font-size:var(--w-fs-micro);line-height:var(--w-lh-sm);}
.muted{color:var(--w-fg-muted);}
strong,b{font-weight:650;}

/* Eyebrow — malý nadtitulok sekcie (na tmavom smie byť žltý) */
.eyebrow{
  font-family:var(--w-font-text);font-size:var(--w-fs-micro);font-weight:700;
  letter-spacing:var(--w-ls-eyebrow);text-transform:uppercase;
  color:var(--w-brand-800);
}
.on-ink .eyebrow{color:var(--w-brand-500);}

/* Odkazy — na svetlom „žltý" text = tmavá okrová --w-link (6,63:1) */
a{color:var(--w-link);text-decoration-thickness:1px;text-underline-offset:.18em;}
a:hover{text-decoration-thickness:2px;}
.link-plain{color:inherit;text-decoration:none;}
.link-plain:hover{text-decoration:underline;}

/* --------------------------------------------------------------------------
   4 · LAYOUT UTILITY
   -------------------------------------------------------------------------- */
.container{max-width:var(--w-container);margin-inline:auto;padding-inline:var(--w-gutter);}
.container-wide{max-width:var(--w-container-wide);margin-inline:auto;padding-inline:var(--w-gutter);}
.container-text{max-width:var(--w-container-text);margin-inline:auto;padding-inline:var(--w-gutter);}

.section{padding-block:var(--w-section);}
.section-hero{padding-block:var(--w-section-hero);}
.section-tight{padding-block:var(--w-s-16);}
/* Jemná sivá plocha sekcie — jediná definícia pre celý web (predtým sa duplikovala
   v každej stránke raz ako .section-mist, raz ako .bg-mist). */
.section-mist{background:var(--w-mist);}

/* Responzívny grid — .grid-2/-3/-4 sa lámu na 1 stĺpec na mobile */
.grid{display:grid;gap:var(--w-gap);}
.grid-2{display:grid;gap:var(--w-gap);grid-template-columns:1fr;}
.grid-3{display:grid;gap:var(--w-gap);grid-template-columns:1fr;}
.grid-4{display:grid;gap:var(--w-gap);grid-template-columns:1fr;}
@media (min-width:480px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1024px){
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-4{grid-template-columns:repeat(4,1fr);}
}

/* Vertikálny rytmus bez margin-hackov */
.stack{display:flex;flex-direction:column;gap:var(--w-s-4);}
.stack-sm{display:flex;flex-direction:column;gap:var(--w-s-2);}
.stack-lg{display:flex;flex-direction:column;gap:var(--w-s-8);}
.cluster{display:flex;flex-wrap:wrap;gap:var(--w-s-2) var(--w-s-3);align-items:center;}

/* Drobné vertikálne odsadenia (kanonické snippety nesmú mať inline štýly) */
.mt-2{margin-top:var(--w-s-2);}
.mt-3{margin-top:var(--w-s-3);}
.mt-4{margin-top:var(--w-s-4);}
.mt-6{margin-top:var(--w-s-6);}

/* --------------------------------------------------------------------------
   5 · PRÍSTUPNOSŤ
   -------------------------------------------------------------------------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-100px;left:var(--w-s-4);z-index:calc(var(--w-z-header) + 1);
  background:var(--w-ink);color:var(--w-on-ink);padding:var(--w-s-3) var(--w-s-6);
  border-radius:var(--w-r-2);text-decoration:none;font-weight:600;
}
.skip-link:focus-visible{top:var(--w-s-4);outline-color:var(--w-brand-500);}

/* Scroll-lock pri otvorenom mobilnom menu / draweri (nastavuje common.js) */
html.is-locked,html.is-locked body{overflow:hidden;}

/* Reveal on scroll — common.js pridá .is-visible; reduced-motion rieši tokens.css */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity var(--w-dur-4) var(--w-ease-out),transform var(--w-dur-4) var(--w-ease-out);}
.reveal.is-visible{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* --------------------------------------------------------------------------
   6 · PRINT — základ (cenník a ponuka majú vlastné doplnky vo svojich WP)
   -------------------------------------------------------------------------- */
@media print{
  body{background:var(--w-paper);color:var(--w-text);font-size:11pt;}
  .site-header,.utility-bar,.site-footer,.sticky-bar,.nav-burger,
  .skip-link,.btn,.toast,.drawer-overlay{display:none!important;}
  a{color:var(--w-text);text-decoration:none;}
  .section{padding-block:1.5rem;}
  .on-ink{background:var(--w-paper)!important;color:var(--w-text)!important;}
}


/* ── components.css ─────────────────────────────────────────────────────── */
/* ==========================================================================
   WAMP — components.css · komponentová knižnica · v1.0 (WP1)
   Poradie: tokens.css → base.css → components.css
   Všetky farby VÝHRADNE cez tokeny. Jediná výnimka: blok mpify-credit
   (limetka + near-black = logo mpify, povolené LEN v pätičkovom kredite).
   Obsah:
     01 Tlačidlá          08 Formuláre           15 Toast
     02 Chips a plate     09 Tabuľky             16 Map card
     03 Badge             10 Hero                17 Dept card (oddelenie)
     04 Karty             11 Tmavé sekcie        18 Kroky sprievodcu
     05 Karta vozidla     12 Stat / čísla        19 Filter lišta
     06 Akordeón          13 Breadcrumb          20 Utility bar + header + nav
     07 Drawer            14 Sticky lišta        21 Pätička + mpify kredit
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · TLAČIDLÁ — .btn + variant (.btn-primary je definovaný v tokens.css,
   tu pridávame len layout cez spoločný .btn). Vždy: <a class="btn btn-primary">
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--w-s-2);
  min-height:48px;padding:0 var(--w-s-6);
  border-radius:var(--w-r-2);border:0;
  font:600 1.0625rem/1 var(--w-font-text);letter-spacing:.005em;
  text-decoration:none;cursor:pointer;user-select:none;
  transition:transform var(--w-dur-1) var(--w-ease-out),
             background-color var(--w-dur-1) linear,
             box-shadow var(--w-dur-1) linear,
             color var(--w-dur-1) linear;
}
.btn svg{flex:none;}

/* Sekundárne — grafit (na tmavom sa cez .on-ink preklopí na obrys) */
.btn-secondary{background:var(--w-cta2-bg);color:var(--w-cta2-fg);}
.on-ink .btn-secondary{box-shadow:inset 0 0 0 1px var(--w-ink-line-2);}
@media (hover:hover){
  .btn-secondary:hover{transform:translateY(-1px);box-shadow:var(--w-sh-2);}
  .on-ink .btn-secondary:hover{background:var(--w-ink-3);
    box-shadow:inset 0 0 0 1px var(--w-ink-line-2);}
}
.btn-secondary:active{transform:translateY(0);}

/* Ghost — tichá akcia s hairline okrajom */
.btn-ghost{background:transparent;color:var(--w-fg);
  box-shadow:inset 0 0 0 1px var(--w-border-field);}
@media (hover:hover){
  .btn-ghost:hover{background:var(--w-mist);}
  .on-ink .btn-ghost:hover{background:var(--w-ink-3);}
}

/* Veľkosti — nikdy pod 44 px dotykový cieľ */
.btn-sm{min-height:44px;padding:0 var(--w-s-4);font-size:var(--w-fs-sm);}
.btn-lg{min-height:56px;padding:0 var(--w-s-8);font-size:1.125rem;}
.btn-block{display:flex;width:100%;}

/* Stavy */
.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none;}
.btn:focus-visible{outline:3px solid var(--w-focus);outline-offset:2px;}

/* --------------------------------------------------------------------------
   02 · CHIPS A PLATE — chip = filter/výber (pill) · plate = faktický štítok
   odvodený zo zúženej linky loga (hranatý, tabular-nums)
   -------------------------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:var(--w-s-2);
  min-height:44px;padding:0 var(--w-s-4);
  border-radius:var(--w-r-pill);
  background:var(--w-surface);color:var(--w-fg);
  box-shadow:inset 0 0 0 1px var(--w-border-field);
  font:500 var(--w-fs-sm)/1 var(--w-font-text);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color var(--w-dur-1) linear,box-shadow var(--w-dur-1) linear;
}
@media (hover:hover){.chip:hover{background:var(--w-mist);}}
/* Aktívny filter chip — žltá PLOCHA + ink text + okrová hranica (1.4.11) */
.chip[aria-pressed="true"],.chip.is-active{
  background:var(--w-brand-500);color:var(--w-ink);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--w-brand-600);
}
.chip-count{font-variant-numeric:tabular-nums;color:var(--w-fg-muted);}
.chip[aria-pressed="true"] .chip-count,.chip.is-active .chip-count{color:var(--w-ink);}

.plate{
  display:inline-flex;align-items:center;gap:var(--w-s-1);
  padding:var(--w-s-1) var(--w-s-2);
  border-radius:var(--w-r-1);
  background:var(--w-mist);color:var(--w-fg);
  box-shadow:inset 0 0 0 1px var(--w-line-strong);
  font:600 var(--w-fs-micro)/1.2 var(--w-font-text);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.on-ink .plate{background:var(--w-ink-2);color:var(--w-on-ink);
  box-shadow:inset 0 0 0 1px var(--w-ink-line-2);}
/* Plate na fotke (kategória v rohu karty) */
.plate-photo{background:var(--w-ink);color:var(--w-on-ink);box-shadow:none;}

/* --------------------------------------------------------------------------
   03 · BADGE — zvýraznený fakt („ZADARMO", „Dlhodobý prenájom")
   Žltý tint podklad + ink text (~17:1) — nikdy žltý text na svetlom
   -------------------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:var(--w-s-1);
  padding:var(--w-s-1) var(--w-s-3);
  border-radius:var(--w-r-1);
  background:var(--w-brand-tint);color:var(--w-ink);
  box-shadow:inset 0 0 0 1px var(--w-brand-600);
  font:700 var(--w-fs-micro)/1.4 var(--w-font-text);
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.badge-solid{background:var(--w-brand-500);box-shadow:none;}
.badge-neutral{background:var(--w-mist);box-shadow:inset 0 0 0 1px var(--w-line-strong);
  text-transform:none;letter-spacing:0;font-weight:600;}

/* --------------------------------------------------------------------------
   04 · KARTY — hrany > tiene; celá karta klikateľná cez .card-link
   -------------------------------------------------------------------------- */
.card{
  position:relative;display:flex;flex-direction:column;gap:var(--w-s-3);
  padding:var(--w-s-6);
  background:var(--w-surface);border-radius:var(--w-r-3);
  box-shadow:inset 0 0 0 1px var(--w-edge),var(--w-sh-1);
  transition:transform var(--w-dur-3) var(--w-ease-out),box-shadow var(--w-dur-3) var(--w-ease-out);
}
.on-ink .card{background:var(--w-ink-2);}
@media (hover:hover){
  .card-hover:hover{transform:translateY(-2px);
    box-shadow:inset 0 0 0 1px var(--w-brand-600),var(--w-sh-2);}
}
/* Celá karta = jeden odkaz (pseudo-prvok cez celú plochu) */
.card-link{color:inherit;text-decoration:none;}
.card-link::after{content:"";position:absolute;inset:0;border-radius:inherit;}
.card:has(.card-link:focus-visible){outline:3px solid var(--w-focus);outline-offset:2px;}
.card-link:focus-visible{outline:none;}

.card-title{margin:0;}
.card-icon{width:32px;height:32px;color:var(--w-brand-700);}
.on-ink .card-icon{color:var(--w-brand-500);}
.card-cta{font-weight:600;color:var(--w-link);text-decoration:none;margin-top:auto;}

/* Žltá tint dlaždica („Neviete, čo hľadáte?") */
.card-tint{background:var(--w-brand-tint);
  box-shadow:inset 0 0 0 1px var(--w-brand-600),var(--w-sh-1);}

/* --------------------------------------------------------------------------
   05 · KARTA VOZIDLA — foto 4:3 + chips + cena; render z fleet.json (WP4)
   -------------------------------------------------------------------------- */
.card-vehicle{padding:0;overflow:hidden;gap:0;}
.card-vehicle-media{
  position:relative;aspect-ratio:var(--w-photo-ar);
  background:var(--w-mist-2);overflow:hidden;
}
.card-vehicle-media img{
  width:100%;height:100%;object-fit:cover;object-position:var(--w-photo-pos);
  transition:transform var(--w-dur-3) var(--w-ease-out);
}
@media (hover:hover){
  .card-vehicle.card-hover:hover .card-vehicle-media img{transform:scale(1.03);}
}
/* Strop pre zdroje 640×480 — nikdy neupscalovať nad 320 CSS px */
.card-vehicle-media.is-lowres img{max-width:var(--w-photo-max-sm);margin-inline:auto;}
/* Placeholder bez fotky (mist + ikona auta) */
.card-vehicle-media.is-placeholder{display:grid;place-items:center;color:var(--w-muted);}
.card-vehicle-media .plate{position:absolute;left:var(--w-s-3);bottom:var(--w-s-3);}
.card-vehicle-media .badge{position:absolute;right:var(--w-s-3);top:var(--w-s-3);}

.card-vehicle-body{display:flex;flex-direction:column;gap:var(--w-s-3);padding:var(--w-s-4) var(--w-s-6) var(--w-s-6);}
.card-vehicle-title{font-family:var(--w-font-display);font-weight:600;font-size:var(--w-fs-h4);margin:0;}
.card-vehicle-specs{display:flex;flex-wrap:wrap;gap:var(--w-s-1);}
.card-vehicle-price{
  display:flex;align-items:baseline;gap:var(--w-s-2);flex-wrap:wrap;
  border-top:1px solid var(--w-line);padding-top:var(--w-s-3);
}
.price{
  font-family:var(--w-font-display);font-weight:700;
  color:var(--w-brand-800);font-size:1.375rem;line-height:1;
}
.on-ink .price{color:var(--w-brand-500);}
.price-lg{font-size:var(--w-fs-price);}
.price-note{font-size:var(--w-fs-sm);color:var(--w-fg-muted);}

/* --------------------------------------------------------------------------
   06 · AKORDEÓN — natívny <details>/<summary>, animácia cez grid rows
   -------------------------------------------------------------------------- */
.accordion{border-top:1px solid var(--w-line-strong);}
.accordion > details{border-bottom:1px solid var(--w-line-strong);}
.accordion summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--w-s-4);
  min-height:56px;padding:var(--w-s-4) var(--w-s-1);
  font:600 var(--w-fs-h4)/var(--w-lh-h4) var(--w-font-text);
  cursor:pointer;list-style:none;
}
.accordion summary::-webkit-details-marker{display:none;}
.accordion summary::after{
  content:"";flex:none;width:12px;height:12px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transform-origin:66% 66%;
  transition:transform var(--w-dur-2) var(--w-ease);
}
.accordion details[open] summary::after{transform:rotate(225deg);}
.accordion-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--w-dur-2) var(--w-ease);
}
.accordion details[open] .accordion-body{grid-template-rows:1fr;}
.accordion-body > div{overflow:hidden;}
.accordion-body p,.accordion-body ul{padding:0 var(--w-s-1) var(--w-s-4);}
@media (hover:hover){.accordion summary:hover{color:var(--w-brand-800);}
  .on-ink .accordion summary:hover{color:var(--w-brand-500);}}

/* --------------------------------------------------------------------------
   07 · DRAWER — detail vozidla: sprava (desktop) / bottom sheet (mobil)
   Otvára fleet.js; common.js exportuje trapFocus(). aria-modal="true".
   -------------------------------------------------------------------------- */
.drawer-overlay{
  position:fixed;inset:0;z-index:var(--w-z-drawer);
  background:rgba(11,15,20,.55);
  opacity:0;pointer-events:none;
  transition:opacity var(--w-dur-2) linear;
}
.drawer-overlay.is-open{opacity:1;pointer-events:auto;}
.drawer{
  position:fixed;z-index:calc(var(--w-z-drawer) + 1);
  inset:auto 0 0 0;max-height:88dvh;
  background:var(--w-surface);color:var(--w-fg);
  border-radius:var(--w-r-4) var(--w-r-4) 0 0;
  box-shadow:var(--w-sh-3);
  transform:translateY(102%);
  /* visibility:hidden vyradí zatvorený drawer z tab-poradia aj z čítačiek obrazovky
     (samotný transform ho len odsunie mimo obrazovku a prvky by ostali fokusovateľné). */
  visibility:hidden;
  transition:transform var(--w-dur-2) var(--w-ease-out),
             visibility 0s linear var(--w-dur-2);
  display:flex;flex-direction:column;
}
.drawer.is-open{transform:none;visibility:visible;transition-delay:0s;}
@media (min-width:768px){
  .drawer{
    inset:0 0 0 auto;width:min(480px,92vw);max-height:none;
    border-radius:0;
    transform:translateX(102%);
  }
  .drawer.is-open{transform:none;}
}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--w-s-4);
  padding:var(--w-s-4) var(--w-s-6);
  border-bottom:1px solid var(--w-line);flex:none;
}
.drawer-body{overflow-y:auto;overscroll-behavior:contain;padding:var(--w-s-6);flex:1;}
.drawer-close{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;border-radius:var(--w-r-2);
  color:var(--w-fg);
}
@media (hover:hover){.drawer-close:hover{background:var(--w-mist);}}

/* --------------------------------------------------------------------------
   08 · FORMULÁRE — labely nad poľom, inline chyby, honeypot
   -------------------------------------------------------------------------- */
.form{display:flex;flex-direction:column;gap:var(--w-s-4);}
.form-row{display:grid;gap:var(--w-s-4);}
@media (min-width:768px){.form-row{grid-template-columns:1fr 1fr;}}
.form-field{display:flex;flex-direction:column;gap:var(--w-s-1);}
.form-label{font:600 var(--w-fs-sm)/1.4 var(--w-font-text);}
.form-hint{font-size:var(--w-fs-micro);color:var(--w-fg-muted);}

.form-input,.form-select,.form-textarea{
  width:100%;min-height:48px;padding:var(--w-s-3) var(--w-s-4);
  background:var(--w-surface);color:var(--w-fg);
  border:1px solid var(--w-border-field);border-radius:var(--w-r-1);
  transition:border-color var(--w-dur-1) linear,box-shadow var(--w-dur-1) linear;
}
.on-ink .form-input,.on-ink .form-select,.on-ink .form-textarea{background:var(--w-ink-2);}
.form-textarea{min-height:120px;resize:vertical;}
.form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible{
  outline:3px solid var(--w-focus);outline-offset:1px;
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--w-fg-muted);opacity:.8;}
.form-select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px;background-repeat:no-repeat;
  padding-right:var(--w-s-8);
}

/* Chybový stav — hláška + červený okraj + aria-invalid v JS */
.form-field.has-error .form-input,
.form-field.has-error .form-select,
.form-field.has-error .form-textarea{
  border-color:var(--w-err);box-shadow:inset 0 0 0 1px var(--w-err);
}
.form-error{display:none;font-size:var(--w-fs-sm);font-weight:500;color:var(--w-err);}
.form-field.has-error .form-error{display:block;}

/* Checkbox / radio — 24 px box v 44 px cieli */
.form-check{display:flex;gap:var(--w-s-3);align-items:flex-start;min-height:44px;cursor:pointer;}
.form-check input{
  appearance:none;flex:none;width:24px;height:24px;margin-top:2px;
  border:1px solid var(--w-border-field);border-radius:var(--w-r-1);
  background:var(--w-surface);cursor:pointer;display:grid;place-items:center;
  transition:background-color var(--w-dur-1) linear,border-color var(--w-dur-1) linear;
}
.form-check input:checked{background:var(--w-ink);border-color:var(--w-ink);}
.form-check input:checked::before{
  content:"";width:12px;height:7px;margin-top:-2px;
  border-left:2.5px solid var(--w-brand-500);border-bottom:2.5px solid var(--w-brand-500);
  transform:rotate(-45deg);
}
.form-check input:focus-visible{outline:3px solid var(--w-focus);outline-offset:2px;}
.form-check-label{font-size:var(--w-fs-sm);line-height:var(--w-lh-sm);}

/* Honeypot — vizuálne preč, pre botov prítomný (nie display:none) */
.form-trap{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* Blok po odoslaní (mailto fallback) */
.form-after{
  display:none;padding:var(--w-s-6);border-radius:var(--w-r-3);
  background:var(--w-mist);box-shadow:inset 0 0 0 1px var(--w-line-strong);
}
.form-after.is-visible{display:block;}

/* --------------------------------------------------------------------------
   09 · TABUĽKY — cenník; tabular-nums dedí z tokens (table)
   -------------------------------------------------------------------------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table{width:100%;border-collapse:collapse;font-size:var(--w-fs-sm);}
.table caption{
  text-align:left;font:650 var(--w-fs-h4)/var(--w-lh-h4) var(--w-font-display);
  padding-bottom:var(--w-s-3);
}
.table th{
  text-align:left;font:700 var(--w-fs-micro)/1.4 var(--w-font-text);
  letter-spacing:.08em;text-transform:uppercase;color:var(--w-fg-muted);
  padding:var(--w-s-2) var(--w-s-3);border-bottom:2px solid var(--w-line-strong);
}
.table td{
  padding:var(--w-s-3);border-bottom:1px solid var(--w-line);
  vertical-align:top;
}
.table td.is-num,.table th.is-num{text-align:right;white-space:nowrap;}
.table tbody tr:hover{background:var(--w-mist);}
.table .price{font-size:1.0625rem;}

/* --------------------------------------------------------------------------
   10 · HERO — ink kotva s eyebrow + H1 + foto doska (grid 7/5)
   -------------------------------------------------------------------------- */
.hero{position:relative;}
.hero-grid{display:grid;gap:var(--w-s-8);align-items:center;}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:7fr 5fr;gap:var(--w-s-12);}
}
.hero-title{
  font-size:var(--w-fs-hero);line-height:var(--w-lh-tight);
  letter-spacing:var(--w-ls-hero);font-stretch:calc(var(--w-wd-hero)*1%);
  font-weight:700;max-width:var(--w-measure-head);
}
.hero-media{position:relative;border-radius:var(--w-r-4);overflow:hidden;
  box-shadow:var(--w-sh-3);}
.hero-media::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:var(--w-photo-edge);pointer-events:none;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--w-photo-pos);}
.hero-media .plate{position:absolute;left:var(--w-s-4);bottom:var(--w-s-4);}
/* Trust riadok pod hero panelom */
.hero-trust{display:flex;flex-wrap:wrap;gap:var(--w-s-2) var(--w-s-6);
  font-size:var(--w-fs-sm);color:var(--w-fg-muted);}
.hero-trust li{display:flex;align-items:center;gap:var(--w-s-2);}
.hero-trust li::before{content:"";width:6px;height:6px;border-radius:2px;
  background:var(--w-brand-500);box-shadow:inset 0 0 0 1px var(--w-brand-600);flex:none;}
.on-ink .hero-trust li::before{box-shadow:none;}

/* --------------------------------------------------------------------------
   11 · TMAVÉ SEKCIE — .section-ink = .on-ink + tvrdá hrana so žltou linkou
   -------------------------------------------------------------------------- */
.section-ink{position:relative;}
/* voliteľná žltá linka na hornej hrane tmavého pásu */
.section-ink.has-edge::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--w-brand-500);
}
/* „Stupnica" — motív zúženej linky, max 2× na stránku, len na tmavom */
.scale-motif{
  height:10px;
  background:repeating-linear-gradient(90deg,
    var(--w-brand-500) 0 2px,transparent 2px 18px);
  opacity:.55;border:0;
}

/* --------------------------------------------------------------------------
   12 · STAT — číslo-dôkaz (2005 · 10 000 m² · do 15 t)
   -------------------------------------------------------------------------- */
.stat{display:flex;flex-direction:column;gap:var(--w-s-1);}
.stat-value{
  font-family:var(--w-font-display);font-weight:700;
  font-size:var(--w-fs-price);line-height:1.05;
  font-stretch:calc(var(--w-wd-h2)*1%);
  font-variant-numeric:tabular-nums;color:var(--w-brand-700);
}
.on-ink .stat-value{color:var(--w-brand-500);}
.stat-label{font-size:var(--w-fs-sm);color:var(--w-fg-muted);max-width:26ch;}

/* --------------------------------------------------------------------------
   13 · BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb{font-size:var(--w-fs-sm);}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--w-s-1);align-items:center;}
.breadcrumb a{color:var(--w-fg-muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--w-link);text-decoration:underline;}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:var(--w-s-1);color:var(--w-line-strong);}
.breadcrumb [aria-current="page"]{color:var(--w-fg);font-weight:500;}

/* --------------------------------------------------------------------------
   14 · STICKY LIŠTA (mobil < 768 px) — Vozidlá · Cenník · Zavolať · Dopyt
   common.js ju zobrazí po scrollY > 70vh (.is-shown), skryje pri fokuse formulára
   -------------------------------------------------------------------------- */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--w-z-sticky);
  display:none;
  /* Lišta je na grafite → fokusový prstenec musí byť žltý, inak by sa kreslil
     grafitom na grafit (kontrast 1:1) a klávesnicová navigácia by bola neviditeľná. */
  --w-focus:var(--w-brand-500);
  background:var(--w-ink);color:var(--w-on-ink);
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid var(--w-ink-line-2);
  transform:translateY(102%);
  transition:transform var(--w-dur-2) var(--w-ease-out);
}
.sticky-bar.is-shown{transform:none;}
.sticky-bar-in{display:grid;grid-template-columns:repeat(4,1fr);}
.sticky-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:64px;padding:var(--w-s-2) var(--w-s-1);
  color:var(--w-on-ink);text-decoration:none;
  font:600 var(--w-fs-micro)/1.2 var(--w-font-text);text-align:center;
}
.sticky-bar a svg{width:22px;height:22px;}
.sticky-bar a:focus-visible{outline-offset:-3px;}
/* „Zavolať" — žltý blok + ink text */
.sticky-bar .sticky-bar-call{background:var(--w-brand-500);color:var(--w-ink);}
@media (max-width:767.98px){.sticky-bar{display:block;}}

/* --------------------------------------------------------------------------
   15 · TOAST — potvrdenie kopírovania; container vytvára common.js (aria-live)
   -------------------------------------------------------------------------- */
.toast-region{
  position:fixed;left:50%;bottom:calc(var(--w-s-6) + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:var(--w-z-toast);
  display:flex;flex-direction:column;gap:var(--w-s-2);align-items:center;
  pointer-events:none;
}
.toast{
  background:var(--w-ink);color:var(--w-on-ink);
  padding:var(--w-s-3) var(--w-s-6);border-radius:var(--w-r-2);
  box-shadow:var(--w-sh-3);font:500 var(--w-fs-sm)/1.4 var(--w-font-text);
  opacity:0;transform:translateY(8px);
  transition:opacity var(--w-dur-2) linear,transform var(--w-dur-2) var(--w-ease-out);
}
.toast.is-visible{opacity:1;transform:none;}

/* --------------------------------------------------------------------------
   16 · MAP CARD — statická mapa (obrázok) → klik otvorí Google Maps
   -------------------------------------------------------------------------- */
.map-card{overflow:hidden;padding:0;gap:0;}
.map-card-media{position:relative;aspect-ratio:16/10;background:var(--w-mist-2);}
.map-card-media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--w-dur-2) var(--w-ease-out);}
.map-card-media a{position:absolute;inset:0;display:block;}
@media (hover:hover){
  .map-card-media a:hover{box-shadow:inset 0 0 0 3px var(--w-brand-500);}
  .map-card-media:has(a:hover) img{transform:scale(1.02);}
}
.map-card-body{display:flex;flex-wrap:wrap;gap:var(--w-s-3);align-items:center;
  padding:var(--w-s-4) var(--w-s-6);}
.map-card-gps{font-variant-numeric:tabular-nums;font-size:var(--w-fs-sm);color:var(--w-fg-muted);}

/* --------------------------------------------------------------------------
   17 · DEPT CARD — karta oddelenia; celá karta = tel:, živý stav z common.js
   -------------------------------------------------------------------------- */
.dept-card{gap:var(--w-s-2);}
.dept-card-name{font:650 var(--w-fs-h4)/var(--w-lh-h4) var(--w-font-display);margin:0;}
.dept-card-phone{
  font-family:var(--w-font-display);font-weight:700;font-size:var(--w-fs-h3);
  font-variant-numeric:tabular-nums;color:var(--w-fg);letter-spacing:.01em;
}
.dept-card-mail{font-size:var(--w-fs-sm);}
.dept-card-hours{font-size:var(--w-fs-micro);color:var(--w-fg-muted);
  font-variant-numeric:tabular-nums;}
/* Živý stav — bodku kreslí ::before, farba podľa stavu */
.dept-status{display:inline-flex;align-items:center;gap:var(--w-s-2);
  font:600 var(--w-fs-sm)/1.4 var(--w-font-text);}
.dept-status::before{content:"";width:8px;height:8px;border-radius:50%;
  background:currentColor;flex:none;}
.dept-status.is-open{color:var(--w-ok);}
.dept-status.is-lunch{color:var(--w-warn);}
.dept-status.is-closed{color:var(--w-err);}

/* --------------------------------------------------------------------------
   18 · KROKY SPRIEVODCU — vertikálna os, čísla Archivo, spojené linkou
   -------------------------------------------------------------------------- */
.steps{counter-reset:krok;display:flex;flex-direction:column;}
.steps > li{
  counter-increment:krok;
  position:relative;display:grid;grid-template-columns:56px 1fr;gap:var(--w-s-4);
  padding-bottom:var(--w-s-8);
}
.steps > li::before{
  content:counter(krok);
  grid-row:1/3;
  width:56px;height:56px;display:grid;place-items:center;
  font:700 1.5rem/1 var(--w-font-display);color:var(--w-brand-800);
  background:var(--w-surface);border-radius:var(--w-r-2);
  box-shadow:inset 0 0 0 1px var(--w-line-strong);
  position:relative;z-index:1;
}
.on-ink .steps > li::before{color:var(--w-brand-500);background:var(--w-ink-2);
  box-shadow:inset 0 0 0 1px var(--w-ink-line-2);}
/* spojovacia linka medzi číslami */
.steps > li:not(:last-child)::after{
  content:"";position:absolute;left:28px;top:56px;bottom:0;width:1px;
  background:var(--w-line-strong);
}
.on-ink .steps > li:not(:last-child)::after{background:var(--w-ink-line-2);}
.steps-title{font:650 var(--w-fs-h4)/var(--w-lh-h4) var(--w-font-text);margin:0;}
.steps-body{grid-column:2;color:var(--w-fg-muted);}

/* --------------------------------------------------------------------------
   19 · FILTER LIŠTA — chips + rozšírené filtre (desktop sticky / mobil sheet)
   -------------------------------------------------------------------------- */
.filter-bar{display:flex;flex-direction:column;gap:var(--w-s-4);}
.filter-chips{display:flex;flex-wrap:wrap;gap:var(--w-s-2);}
@media (max-width:1023.98px){
  .filter-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--w-s-2);
    scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
}
.filter-group{display:flex;flex-direction:column;gap:var(--w-s-2);}
.filter-group-label{font:700 var(--w-fs-micro)/1.4 var(--w-font-text);
  letter-spacing:.08em;text-transform:uppercase;color:var(--w-fg-muted);}
/* Počet výsledkov — aria-live="polite" v HTML */
.filter-count{font-size:var(--w-fs-sm);color:var(--w-fg-muted);
  font-variant-numeric:tabular-nums;}
@media (min-width:1024px){
  .filter-sticky{position:sticky;top:calc(var(--w-header-h) + var(--w-s-4));
    align-self:start;max-height:calc(100dvh - var(--w-header-h) - var(--w-s-8));
    overflow-y:auto;}
}

/* --------------------------------------------------------------------------
   20 · UTILITY BAR + HEADER + NAVIGÁCIA (shell — snippet shared/header.html)
   -------------------------------------------------------------------------- */
.utility-bar{
  min-height:var(--w-utility-h);
  display:none;align-items:center;
  font-size:var(--w-fs-micro);
}
.utility-bar .container{display:flex;justify-content:space-between;gap:var(--w-s-4);
  align-items:center;width:100%;}
.utility-bar-item{display:inline-flex;align-items:center;gap:var(--w-s-2);
  color:var(--w-on-ink-muted);font-variant-numeric:tabular-nums;}
@media (min-width:768px){.utility-bar{display:flex;}}

.site-header{
  position:sticky;top:0;z-index:var(--w-z-header);
  min-height:var(--w-header-h-sm);
  border-bottom:1px solid transparent;
  transition:border-color var(--w-dur-2) linear;
}
/* common.js pridá .is-scrolled pri scrollY > 8 → hairline */
.site-header.is-scrolled{border-bottom-color:var(--w-ink-line-2);}
@media (min-width:768px){.site-header{min-height:var(--w-header-h);}}
.site-header-in{
  display:flex;align-items:center;gap:var(--w-s-4);
  min-height:inherit;padding-block:var(--w-s-2);
}

/* Logo — inline SVG, biele na ink (currentColor) */
.brand{display:flex;align-items:center;color:var(--w-on-ink);flex:none;}
.brand svg{width:140px;height:auto;display:block;}
@media (min-width:1024px){.brand svg{width:168px;}}
.brand:focus-visible{outline:3px solid var(--w-brand-500);outline-offset:4px;}

/* Desktop navigácia */
.site-nav{display:none;}
.nav-list{display:flex;align-items:center;gap:var(--w-s-1);}
.nav-list > li{position:relative;}
.nav-link{
  display:inline-flex;align-items:center;gap:var(--w-s-1);
  min-height:44px;padding:var(--w-s-2) var(--w-s-3);
  color:var(--w-on-ink);text-decoration:none;
  font:500 var(--w-fs-sm)/1.2 var(--w-font-text);
  border-radius:var(--w-r-1);white-space:nowrap;
  border:0;background:none;cursor:pointer;
}
@media (hover:hover){.nav-link:hover{background:var(--w-ink-3);}}
/* Aktívna stránka — žlté 2 px podčiarknutie */
.nav-link[aria-current="page"],.nav-list > li.is-active > .nav-link{
  box-shadow:inset 0 -2px 0 0 var(--w-brand-500);border-radius:var(--w-r-1) var(--w-r-1) 0 0;
}
.nav-caret{width:10px;height:10px;flex:none;transition:transform var(--w-dur-1) var(--w-ease);}
.nav-link[aria-expanded="true"] .nav-caret{transform:rotate(180deg);}

/* Podmenu — klik, nie hover (dotyk) */
.sub-list{
  position:absolute;top:100%;left:0;min-width:280px;
  background:var(--w-ink-2);border-radius:var(--w-r-2);
  box-shadow:var(--w-sh-3),inset 0 0 0 1px var(--w-ink-line);
  padding:var(--w-s-2);margin-top:var(--w-s-1);
  display:none;
}
.nav-list > li.is-open > .sub-list{display:block;}
.sub-list a{
  display:block;padding:var(--w-s-3) var(--w-s-4);
  color:var(--w-on-ink);text-decoration:none;border-radius:var(--w-r-1);
  font-size:var(--w-fs-sm);
}
@media (hover:hover){.sub-list a:hover{background:var(--w-ink-3);}}
.sub-list a[aria-current="page"]{box-shadow:inset 2px 0 0 0 var(--w-brand-500);}

/* Pravá časť headera */
.site-header-actions{display:flex;align-items:center;gap:var(--w-s-3);margin-left:auto;}
/* Telefón v hlavičke je na mobile jediné CTA nad ohybom — nesmie zmiznúť.
   Pod 480 px sa zmenší na ikonu 44×44 (číslo sa skryje, tel: odkaz zostáva). */
.header-phone{
  white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--w-s-2);
  color:var(--w-on-ink);text-decoration:none;
  font:700 1.0625rem/1 var(--w-font-display);letter-spacing:.01em;
  min-width:44px;min-height:44px;padding:var(--w-s-2);border-radius:var(--w-r-1);
}
@media (hover:hover){.header-phone:hover{color:var(--w-brand-500);}}
@media (max-width:479.98px){
  .header-phone{background:var(--w-brand-500);color:var(--w-ink);}
  .header-phone [data-phone-text]{position:absolute;width:1px;height:1px;
    margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  .header-phone svg{width:22px;height:22px;}
}
.header-cta{display:none;}

/* Hamburger ≥44 px */
.nav-burger{
  width:48px;height:48px;flex:none;
  display:grid;place-items:center;border-radius:var(--w-r-1);
  color:var(--w-on-ink);
}

/* Desktop: plná navigácia, hamburger preč.
   POZOR: tento blok musí stáť ZA základnou definíciou .nav-burger,
   inak by ho neskoršie `display:grid` prebilo (rovnaká špecificita). */
@media (min-width:1140px){
  .site-nav{display:block;}
  .header-cta{display:inline-flex;}
  .nav-burger{display:none;}
}
.nav-burger-bars,.nav-burger-bars::before,.nav-burger-bars::after{
  content:"";display:block;width:24px;height:2px;background:currentColor;
  border-radius:1px;transition:transform var(--w-dur-2) var(--w-ease),opacity var(--w-dur-1) linear;
  position:relative;
}
.nav-burger-bars::before{position:absolute;top:-7px;}
.nav-burger-bars::after{position:absolute;top:7px;}
.nav-burger[aria-expanded="true"] .nav-burger-bars{background:transparent;}
.nav-burger[aria-expanded="true"] .nav-burger-bars::before{transform:translateY(7px) rotate(45deg);}
.nav-burger[aria-expanded="true"] .nav-burger-bars::after{transform:translateY(-7px) rotate(-45deg);}

/* Mobilné menu — celoobrazovkový akordeón pod headerom */
@media (max-width:1139.98px){
  .site-nav{
    display:none;
    position:fixed;z-index:calc(var(--w-z-header) - 1);
    inset:0;
    background:var(--w-ink);color:var(--w-on-ink);
    padding:calc(var(--w-header-h-sm) + var(--w-s-6)) var(--w-gutter) var(--w-s-12);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .site-nav.is-open{display:block;}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;}
  .nav-list > li{border-bottom:1px solid var(--w-ink-line);}
  .nav-link{width:100%;justify-content:space-between;min-height:56px;
    font-size:var(--w-fs-h4);font-weight:600;border-radius:0;}
  .nav-link[aria-current="page"],.nav-list > li.is-active > .nav-link{
    box-shadow:inset 3px 0 0 0 var(--w-brand-500);border-radius:0;padding-left:var(--w-s-4);}
  .sub-list{position:static;min-width:0;box-shadow:none;background:transparent;
    padding:0 0 var(--w-s-2) var(--w-s-4);margin:0;}
  .sub-list a{min-height:48px;display:flex;align-items:center;}
}

/* Blok „Zavolať na správne oddelenie" na konci mobilného menu */
.nav-call{margin-top:var(--w-s-8);display:none;}
.site-nav.is-open .nav-call{display:block;}
@media (min-width:1140px){.nav-call{display:none!important;}}
.nav-call-title{font:700 var(--w-fs-micro)/1.4 var(--w-font-text);
  letter-spacing:var(--w-ls-eyebrow);text-transform:uppercase;
  color:var(--w-brand-500);margin-bottom:var(--w-s-3);}
.nav-call-list{display:flex;flex-direction:column;}
.nav-call-list a{
  display:flex;justify-content:space-between;align-items:center;gap:var(--w-s-3);
  min-height:56px;padding:var(--w-s-2) 0;
  color:var(--w-on-ink);text-decoration:none;
  border-bottom:1px solid var(--w-ink-line);
  font-size:var(--w-fs-sm);
}
.nav-call-list .phone{font:700 1rem/1 var(--w-font-display);white-space:nowrap;}
.nav-call-dept{display:flex;flex-direction:column;gap:2px;}
.nav-call-dept .dept-status{font-size:var(--w-fs-micro);}

/* --------------------------------------------------------------------------
   21 · PÄTIČKA + mpify KREDIT (shell — snippet shared/footer.html)
   -------------------------------------------------------------------------- */
.site-footer{font-size:var(--w-fs-sm);}
.site-footer-grid{
  display:grid;gap:var(--w-s-8);
  padding-block:var(--w-section) var(--w-s-12);
}
@media (min-width:768px){.site-footer-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.site-footer-grid{grid-template-columns:1.3fr 1fr 1.2fr 1.2fr;}}
.site-footer h2{
  font:700 var(--w-fs-micro)/1.4 var(--w-font-text);
  letter-spacing:var(--w-ls-eyebrow);text-transform:uppercase;
  color:var(--w-on-ink-muted);margin-bottom:var(--w-s-4);
}
.site-footer .brand svg{width:140px;}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--w-s-2);}
.site-footer a{color:var(--w-on-ink);text-decoration:none;}
.site-footer a:hover{text-decoration:underline;color:var(--w-brand-500);}
.site-footer .muted{color:var(--w-on-ink-muted);}
.footer-contact-line{display:flex;flex-direction:column;gap:2px;}
.footer-contact-line .phone{font-weight:600;}
.footer-hours dt{font-weight:600;color:var(--w-on-ink);margin-top:var(--w-s-3);}
.footer-hours dd{margin:0;color:var(--w-on-ink-muted);font-variant-numeric:tabular-nums;}
.footer-social{display:inline-flex;align-items:center;gap:var(--w-s-2);min-height:44px;}
.footer-social svg{width:20px;height:20px;}

.site-footer-bottom{
  border-top:1px solid var(--w-ink-line);
  padding-block:var(--w-s-6);
  display:flex;flex-wrap:wrap;gap:var(--w-s-4) var(--w-s-8);
  align-items:center;justify-content:space-between;
  font-size:var(--w-fs-micro);color:var(--w-on-ink-muted);
}
.site-footer-bottom nav{display:flex;flex-wrap:wrap;gap:var(--w-s-4);}
.site-footer-bottom a{color:var(--w-on-ink-muted);}
.site-footer-bottom a:hover{color:var(--w-on-ink);}

/* mpify-credit — KANONICKÝ, VARIANT A (docs/mpify-client-footer-credit.html).
   Limetka + near-black = logo mpify, JEDINÉ povolené farby mimo tokenov. */
.mpify-credit{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;line-height:1;color:inherit;opacity:.62;
  text-decoration:none;transition:opacity .18s ease;
}
.mpify-credit:hover{opacity:1;}
.mpify-credit:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px;}
.mpify-credit-mark{
  width:22px;height:22px;border-radius: 6px;
  background:#CBFF00;color:#060609; /* mpify-credit — fixné logo mpify, nikdy nemeniť */
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:11px;letter-spacing:-.04em;flex-shrink:0;
}
.mpify-credit-text strong{font-weight:700;}