/* ===================================================================================
   AMREP FITNESS - CSS temy. GENEROVANE zo scripts/port_css.py z prototype/index.html - neupravovat rucne tu,
   upravit prototyp a spustit skript. Farby/fonty/radiusy = LEN tokeny z theme.json (--wp--preset--*), aliasy nizsie.
   =================================================================================== */
:root{
  /* paleta 20 farieb -> theme.json */
  --c-white:var(--wp--preset--color--white);--c-paper:var(--wp--preset--color--paper);--c-paper-2:var(--wp--preset--color--paper-2);
  --c-line:var(--wp--preset--color--line);--c-grey:var(--wp--preset--color--grey);--c-ink:var(--wp--preset--color--ink);
  --c-dark:var(--wp--preset--color--dark);--c-red:var(--wp--preset--color--red);--c-red-dark:var(--wp--preset--color--red-dark);
  --c-red-soft:var(--wp--preset--color--red-soft);--c-green:var(--wp--preset--color--green);--c-green-soft:var(--wp--preset--color--green-soft);
  --c-amber:var(--wp--preset--color--amber);--c-amber-soft:var(--wp--preset--color--amber-soft);--c-blue:var(--wp--preset--color--blue);
  --c-blue-soft:var(--wp--preset--color--blue-soft);--c-violet:var(--wp--preset--color--violet);--c-violet-soft:var(--wp--preset--color--violet-soft);
  --c-gold:var(--wp--preset--color--gold);--c-teal:var(--wp--preset--color--teal);
  /* semanticke role */
  --white:var(--c-white);--paper:var(--c-paper);--paper-2:var(--c-paper-2);--line:var(--c-line);--muted:var(--c-grey);--ink:var(--c-ink);
  --ink-2:var(--wp--preset--color--ink-2);--red:var(--c-red);--red-dark:var(--c-red-dark);--ok:var(--c-green);--warn:var(--c-amber);--gold:var(--c-gold);
  --on-dark:var(--wp--preset--color--on-dark);--on-dark-2:var(--wp--preset--color--on-dark-2);
  --dark:var(--c-dark);--dark-2:var(--c-ink);
  --maxw:var(--wp--style--global--content-size,1240px);
  --r-pill:var(--wp--custom--radius--pill);--r-card:var(--wp--custom--radius--card);--r-sm:var(--wp--custom--radius--sm);
  --f-display:var(--wp--preset--font-family--display);--f-body:var(--wp--preset--font-family--body);
}
/* WP block-gap je v theme.json 0 (nase sekcie si odsadenia riesia samy). Tu len poistky pre root a prekryv newslettera. */
:where(.wp-site-blocks) > * + *,:where(main.wp-block-group) > * + *{margin-block-start:0}
.wp-block-group.wrap > .nl.wp-block-group:last-child{margin-block-end:-76px}
/* WP/Woo integracia: admin bar posuva sticky hlavicku, sablona ma cely obsah v <main> */
body.admin-bar header.site{top:var(--wp-admin--admin-bar--height,32px)}
/* FSE root: sablonove casti hlavicky/paticky su alignfull, sticky musi ostat na obale */
.wp-block-template-part.alignfull{margin-left:0;margin-right:0;max-width:none}
.wp-block-template-part:has(>header.site){position:sticky;top:0;z-index:50}
body.admin-bar .wp-block-template-part:has(>header.site){top:var(--wp-admin--admin-bar--height,32px)}
.wp-site-blocks{padding-left:0;padding-right:0}

  /* ===== AMREP FITNESS - homepage prototyp v2 =====
     Podľa DESIGN_SPEC.md: BIELE/svetlé pozadie (prémiový look à la Eleiko),
     tmavá len hlavička/pätička, brandová červená #EA3442 VÝHRADNE pre CTA a akcenty
     (badge AKCIA, aktívny stav). Bold kondenzované headliny, čitateľný sans ≥16px.
     Bez gradientov a sliderov. Kategórie = strom v2. */
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--white);color:var(--ink);
    font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

  /* ===== Mini-kosik - vysuvny panel po "Pridat do kosika" =====
     Clovek dostane potvrdenie a dve jasne cesty (pokracovat / do kosika) bez toho,
     aby opustil stranku. Baymard: chybajuce potvrdenie = jeden z top dovodov zmatku. */
  .mk-ov{position:fixed;inset:0;background:color-mix(in srgb, var(--c-dark) 45%, transparent);z-index:210;
    opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
  .mk{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--c-white);z-index:211;
    display:flex;flex-direction:column;box-shadow:-18px 0 50px color-mix(in srgb, var(--c-ink) 20%, transparent);
    transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1)}
  body.mk-open .mk-ov{opacity:1;visibility:visible}
  body.mk-open .mk{transform:none}
  .mk-h{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
  .mk-h .ok{width:34px;height:34px;border-radius:50%;background:var(--c-green-soft);color:var(--c-green);display:flex;align-items:center;justify-content:center;flex:none}
  .mk-h h2{font-size:17px;margin:0;flex:1}
  .mk-h .x{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--c-white);color:var(--ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;padding:0}
  .mk-h .x:hover{background:var(--red);border-color:var(--red);color:var(--c-white)}
  .mk-body{flex:1;overflow:auto;padding:16px 20px}
  .mk-it{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0}
  .mk-it+.mk-it{border-top:1px solid var(--line)}
  .mk-it .ph{width:72px;height:72px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .mk-it .ph img{width:100%;height:100%;object-fit:contain;padding:6px}
  .mk-it b{display:block;font-size:14px;line-height:1.3;color:var(--ink)}
  .mk-it small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px}
  .mk-it .pr{font-family:var(--f-display);font-weight:800;font-size:15px;color:var(--ink);margin-top:4px}
  .mk-ship{margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--c-green-soft);font-size:13px;color:var(--ink);display:flex;gap:8px;align-items:center}
  .mk-ship svg{color:var(--c-green);flex:none}
  .mk-ship b{color:var(--c-green)}
  /* doplnky v mini-kosiku = Woo cross-sells produktov v kosiku. Patria SEM (moment po pridani),
     nie do pokladne (Baymard: v pokladni ziadny upsell). Bez cross-sellov sa blok nezobrazi. */
  .mk-xs{margin-top:18px;padding:14px 16px 8px;background:var(--paper);border-radius:var(--r-card)}
  .mk-xs:not(:has(.it)){display:none}
  .mk-xs .l{font-family:var(--f-body);font-weight:700;text-transform:uppercase;font-size:11.5px;letter-spacing:.14em;color:var(--red);margin:0 0 6px;display:flex;align-items:center;gap:8px}
  .mk-xs .l::before{content:"";width:22px;height:2px;background:var(--red)}
  .mk-xs .it{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0}
  .mk-xs .it+.it{border-top:1px solid color-mix(in srgb, var(--c-ink) 8%, transparent)}
  .mk-xs .ph{width:48px;height:48px;background:var(--c-white);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}
  .mk-xs .ph img{width:100%;height:100%;object-fit:contain;padding:4px}
  .mk-xs .nm{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;display:block;text-decoration:none}
  .mk-xs .nm:hover{color:var(--red)}
  .mk-xs .pr{font-family:var(--f-display);font-weight:800;font-size:13.5px;color:var(--ink);margin-top:2px}
  .mk-xs .btn{padding:7px 12px;font-size:11.5px}
  .mk-f{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--c-white)}
  .mk-f .tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
  .mk-f .tot span{font-size:13.5px;color:var(--ink-2)}
  .mk-f .tot b{font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--ink)}
  .mk-f .btn{width:100%;justify-content:center;margin-bottom:8px}
  .mk-f .btn.ghost{margin-bottom:0}

  /* ===== Cookie lista =====
     Pravidla, ktore NIE su dizajnove, ale zakonne (ePrivacy + GDPR, SK/CZ):
     - "Odmietnut" je rovnako velke a rovnako dostupne ako "Prijat" (ziadne tmave vzory)
     - predvolene su zapnute LEN nevyhnutne; analytika a marketing su vypnute, kym clovek neklikne
     - suhlas sa uklada per kategoria aj s datumom, plati 12 mesiacov, potom sa pyta znova
     - "Nastavenia cookies" v patke otvori listu kedykolvek - suhlas sa da vziat spat
     Na desktope karta vlavo dole, na mobile spodny panel; sticky CTA sa posunie hore. */
  .ck{position:fixed;left:16px;bottom:16px;z-index:300;width:min(420px,calc(100vw - 32px));
    background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card);
    box-shadow:0 18px 50px color-mix(in srgb, var(--c-ink) 22%, transparent);padding:22px 22px 20px}
  .ck[hidden]{display:none}
  .ck h2{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:17px;margin:0 0 8px;
    display:flex;align-items:center;gap:9px}
  .ck h2 svg{color:var(--red);flex:none}
  .ck p{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin:0 0 14px}
  .ck p a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
  .ck-btns{display:flex;gap:8px;flex-wrap:wrap}
  .ck-btn{flex:1 1 0;min-width:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:12.5px;
    letter-spacing:.05em;padding:11px 12px;border-radius:var(--r-pill);cursor:pointer;border:2px solid var(--ink);
    background:var(--c-white);color:var(--ink);transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
  .ck-btn:hover{background:var(--red);border-color:var(--red);color:var(--c-white)}
  .ck-btn.hlavne{background:var(--red);border-color:var(--red);color:var(--c-white)}
  .ck-btn.hlavne:hover{background:var(--red-dark);border-color:var(--red-dark)}
  .ck-btn.text{border-color:transparent;flex:0 0 auto;padding-left:6px;padding-right:6px}
  .ck-btn.text:hover{background:transparent;color:var(--red)}
  /* nastavenia - kategorie */
  .ck-set{display:none;border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
  .ck.open .ck-set{display:block}
  .ck-row{display:flex;align-items:flex-start;gap:12px;padding:8px 0}
  .ck-row+.ck-row{border-top:1px solid var(--line)}
  .ck-row b{display:block;font-size:13.5px;color:var(--ink)}
  .ck-row small{display:block;font-size:12px;color:var(--ink-2);line-height:1.4;margin-top:2px}
  .ck-row .txt{flex:1;min-width:0}
  /* prepinac */
  .sw{position:relative;flex:none;width:42px;height:24px;margin-top:2px}
  .sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
  .sw i{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--line);transition:background .15s}
  .sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--c-white);
    box-shadow:0 1px 3px color-mix(in srgb, var(--c-ink) 30%, transparent);transition:transform .15s}
  .sw input:checked+i{background:var(--c-green)}
  .sw input:checked+i::after{transform:translateX(18px)}
  .sw input:disabled+i{background:var(--c-grey);opacity:.55;cursor:default}
  .sw input:focus-visible+i{outline:2px solid var(--c-ink);outline-offset:2px}
  @media(max-width:640px){
    .ck{left:0;right:0;bottom:0;width:auto;border-radius:var(--r-card) var(--r-card) 0 0;
      padding:18px 18px calc(16px + env(safe-area-inset-bottom))}
    .ck-btn{font-size:12px;padding:11px 8px}
    /* sticky CTA sa posunie nad listu, kym je otvorena */
    body.ck-otvorene .pd-sticky,body.ck-otvorene .sticky-cta{transform:translateY(-100%);opacity:0;pointer-events:none}
  }
  /* Pristupnost: viditelny focus pre klavesnicu na vsetkom klikatelnom + skip link.
     :focus-visible sa ukaze len pri klavesnici, nie po kliknuti mysou. */
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--c-ink);outline-offset:2px;border-radius:4px}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .skip{position:absolute;left:-9999px;top:8px;z-index:1000;background:var(--c-ink);color:var(--c-white);
    padding:10px 16px;border-radius:var(--r-pill);font-weight:700;text-decoration:none}
  .skip:focus{left:12px}

  /* ===== Odpocet akcie - jeden vzhlad pre cely web =====
     Kampanovy pas, detail produktu aj karta v kategorii pouzivaju ten isty
     [data-odpocet] box; lisi sa len velkostou cez data-size. Cisla su
     tabularne, aby pri tikani neposkakovali. */
  .cd{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
  .cd i{font-style:normal;display:inline-flex;flex-direction:column;align-items:center;
    background:color-mix(in srgb, var(--c-ink) 8%, transparent);color:var(--c-ink);
    border-radius:var(--r-sm);padding:4px 8px;min-width:44px;line-height:1.05}
  .cd i b{font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:0}
  .cd i em{font-style:normal;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;opacity:.75;font-weight:700}
  .cd[data-size="sm"] i{min-width:34px;padding:3px 6px}
  .cd[data-size="sm"] i b{font-size:13.5px}
  .cd[data-size="sm"] i em{font-size:8.5px}
  /* na tmavom/cervenom podklade sa boxy zosvetlia */
  .cd[data-tone="light"] i{background:color-mix(in srgb, var(--c-white) 18%, transparent);color:var(--c-white)}
  .cd[data-tone="light"] i em{opacity:.85}
  .cd.koniec{display:none}

  /* detail produktu: pas pod cenou */
  .pd-akcia{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 4px;
    padding:12px 16px;border-radius:var(--r-sm);
    background:var(--c-red-soft);border:1px solid color-mix(in srgb, var(--c-red) 22%, transparent)}
  .pd-akcia .lbl{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:12.5px;
    letter-spacing:.06em;color:var(--c-red-dark);display:flex;align-items:center;gap:8px}
  .pd-akcia .lbl svg{flex:none}
  .pd-akcia[hidden]{display:none}
  /* karta v kategorii/homepage: odpocet LEZI NA FOTKE pri spodnej hrane.
     Nie v tele karty - tam by natahoval cely rad mriezky a pri kartach bez
     akcie by vznikala diera. Fotka ma pevny pomer, takze vyska karty sa nemeni. */
  .card .ph{position:relative}
  .card .cd-row{position:absolute;left:0;right:0;bottom:0;z-index:2;
    display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
    padding:7px 10px;background:color-mix(in srgb, var(--c-dark) 82%, transparent);
    backdrop-filter:blur(2px)}
  .card .cd-row .lbl{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:10.5px;
    letter-spacing:.06em;color:var(--c-white);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .card .cd-row .lbl svg{flex:none}
  .card .cd-row .cd i{background:var(--c-red);color:var(--c-white);min-width:32px;padding:3px 5px}
  .card .cd-row .cd i b{font-size:13px}
  .card .cd-row .cd i em{font-size:8px;opacity:.9}
  .card .cd-row[hidden]{display:none}

  /* ===== Farba pozadia a textu z palety - pouzitelne na HOCIJAKOM prvku =====
     V ostrej teme to nie su triedy, ale obycajny vyber farby v paneli bloku
     (theme.json > settings.color.palette). Tu su ako data-atributy, aby sa dalo
     v prototype ukazat, ze ktorykolvek blok si vie vziat ktorukolvek z 20 farieb. */
  [data-bg="white"]{background:var(--c-white)}
  [data-bg="paper"]{background:var(--c-paper)}
  [data-bg="paper-2"]{background:var(--c-paper-2)}
  [data-bg="line"]{background:var(--c-line)}
  [data-bg="grey"]{background:var(--c-grey)}
  [data-bg="ink"]{background:var(--c-ink)}
  [data-bg="dark"]{background:var(--c-dark)}
  [data-bg="red"]{background:var(--c-red)}
  [data-bg="red-dark"]{background:var(--c-red-dark)}
  [data-bg="red-soft"]{background:var(--c-red-soft)}
  [data-bg="green"]{background:var(--c-green)}
  [data-bg="green-soft"]{background:var(--c-green-soft)}
  [data-bg="amber"]{background:var(--c-amber)}
  [data-bg="amber-soft"]{background:var(--c-amber-soft)}
  [data-bg="blue"]{background:var(--c-blue)}
  [data-bg="blue-soft"]{background:var(--c-blue-soft)}
  [data-bg="violet"]{background:var(--c-violet)}
  [data-bg="violet-soft"]{background:var(--c-violet-soft)}
  [data-bg="gold"]{background:var(--c-gold)}
  [data-bg="teal"]{background:var(--c-teal)}
  /* farba textu - staci svetly/tmavy prepinac, zvysok si blok zdedi */
  [data-fg="light"]{color:var(--c-white)}
  [data-fg="ink"]{color:var(--c-ink)}


  h1,h2,h3,.display{font-family:var(--f-display);font-weight:900;text-transform:uppercase;
    letter-spacing:.005em;line-height:.98;text-wrap:balance;margin:0}
  .eyebrow{font-family:var(--f-body);font-weight:700;text-transform:uppercase;
    letter-spacing:.2em;font-size:12px;color:var(--red);display:flex;align-items:center;gap:10px}
  .eyebrow::before{content:"";width:26px;height:2px;background:var(--red);flex:none}

  /* CTA - jediné červené prvky (klikateľné) */
  .btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-display);
    font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:17px;
    padding:15px 28px;border:2px solid var(--red);border-radius:var(--r-pill);background:var(--red);color:var(--c-white);
    transition:background .15s,border-color .15s,transform .05s;cursor:pointer}
  .btn:hover{background:var(--red-dark);border-color:var(--red-dark)}
  .btn:active{transform:translateY(1px)}
  .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
  .btn.ghost:hover{background:var(--red);border-color:var(--red);color:var(--c-white)}

  /* ===== Header - 2 riadky (utility + mega-menu) ===== */
  /* ===== Geo lišta - tichá ponuka správneho trhu =====
     Zobrazí sa LEN keď jazyk prehliadača nesedí s trhom domény (Rumun na .sk).
     Nikdy nepresmerúva sama - len ponúkne a zapamätá si odpoveď.
     Text je v JAZYKU NÁVŠTEVNÍKA, nie v jazyku webu - je preňho. */
  .geobar{background:var(--c-dark);color:var(--c-white)}
  .geobar .wrap{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
  .geobar .flag{width:22px;height:15px;border-radius:2px;flex:none}
  .geobar p{margin:0;font-size:13.5px;font-weight:600;flex:1;min-width:200px}
  .geobar .gb-btn{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:12px;
    letter-spacing:.05em;padding:8px 16px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;
    border:1.5px solid transparent;transition:background .15s,border-color .15s,color .15s}
  .geobar .gb-ano{background:var(--c-red);color:var(--c-white)}
  .geobar .gb-ano:hover{background:var(--c-red-dark)}
  .geobar .gb-nie{background:transparent;color:var(--c-white);border-color:color-mix(in srgb, var(--c-white) 40%, transparent)}
  .geobar .gb-nie:hover{border-color:var(--c-white)}
  .geobar[hidden]{display:none}

  header.site{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line)}

  /* riadok 1: logo + search + akcie */
  .head-main{border-bottom:1px solid var(--line)}
  .head-main .wrap{display:flex;align-items:center;gap:32px;height:88px}
  .logo{display:flex;align-items:center;white-space:nowrap;flex:none}
  .logo img{height:50px;width:auto;display:block}
  .search{flex:1;max-width:520px;position:relative}
  .search input{width:100%;height:48px;border:1.5px solid var(--line);border-radius:var(--r-pill);
    padding:0 52px 0 22px;font-size:15px;color:var(--ink);background:var(--paper);outline:none;
    transition:border-color .15s,background .15s}
  .search input::placeholder{color:var(--muted)}
  .search input:focus{border-color:var(--ink);background:var(--c-white)}
  .search button{position:absolute;right:6px;top:6px;width:36px;height:36px;border:none;border-radius:50%;
    background:var(--red);color:var(--c-white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
  .search button:hover{background:var(--red-dark)}
  .head-actions{display:flex;gap:10px;align-items:center;color:var(--ink);font-size:13px;font-weight:600;
    flex:none;margin-left:auto}
  .head-actions .act{display:flex;flex-direction:row;align-items:center;gap:9px;cursor:pointer;
    padding:8px 12px;border-radius:var(--r-sm);transition:background .15s,color .15s}
  .head-actions .act:hover{color:var(--red);background:var(--paper)}
  /* Kosik je v e-shope najdolezitejsi prvok hlavicky - dostane ramcek,
     aby sa na prvy pohlad lisil od ostatnych odkazov. Cerveny nie je zamerne,
     cervena patri hlavnym tlacidlam a v hlavicke by prekrikovala obsah. */
  .head-actions .act.kosik{border:1.5px solid var(--line);border-radius:var(--r-pill);padding-right:16px}
  .head-actions .act.kosik:hover{border-color:var(--ink);background:var(--paper)}
  .head-actions .act .ic-wrap{position:relative;display:flex}
  /* Odznak s poctom kusov. PRAZDNY KOSIK = ziadny odznak - cervena kolieska s nulou
     je vizualny sum a vyzera ako upozornenie na nieco, co sa nestalo. */
  .head-actions .act .badge:empty,
  .head-actions .act .badge[data-pocet="0"]{display:none}
  .head-actions .act .badge{position:absolute;top:-6px;right:-8px;background:var(--red);color:var(--c-white);
    font-family:var(--f-display);font-size:10px;font-weight:800;min-width:16px;height:16px;
    border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;padding:0 3px;
    border:1.5px solid var(--c-white)}
  .head-actions .act small{color:var(--ink);font-weight:700;font-size:13.5px}
  .head-actions .act:hover small{color:var(--red)}
  /* prepínač trhu/meny s vlajočkami */
  .langsel{position:relative;flex:none}
  .cur{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-pill);
    padding:7px 12px 7px 8px;font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.02em;
    cursor:pointer;transition:border-color .15s,box-shadow .15s}
  .langsel:hover .cur{border-color:var(--ink);box-shadow:0 2px 10px color-mix(in srgb, var(--c-ink) 6%, transparent)}
  .flag{width:22px;height:16px;border-radius:3px;object-fit:cover;display:block;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--c-ink) 12%, transparent);flex:none}
  .drop a .flag{width:24px;height:17px}
  .cur .car{font-size:9px;color:var(--muted)}
  .langsel:hover .cur .car{color:var(--red)}
  .langsel .drop{position:absolute;top:calc(100% + 10px);right:0;min-width:330px;background:var(--c-white);
    border:1px solid var(--line);box-shadow:0 22px 55px color-mix(in srgb, var(--c-ink) 18%, transparent);padding:7px;border-radius:var(--r-sm);
    opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
  .langsel:hover .drop{opacity:1;visibility:visible;transform:none}
  .langsel .drop a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);
    font-size:14px;font-weight:600;color:var(--ink-2)}
  .langsel .drop a:hover{background:color-mix(in srgb, var(--c-red) 7%, transparent);color:var(--red)}
  .langsel .drop a:hover .cc{color:var(--red)}
  .langsel .drop a.on{background:var(--paper);color:var(--ink)}
  .langsel .drop a .nm{flex:1}
  .langsel .drop a .cc{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.02em;white-space:nowrap}
  .langsel .drop a.on .cc{color:var(--red)}
  .langsel .drop a .chk{width:14px;text-align:center;color:var(--red);font-weight:800;font-size:13px;opacity:0}
  .langsel .drop a.on .chk{opacity:1}
  .curicon{width:24px;height:17px;border-radius:3px;background:var(--paper);display:flex;align-items:center;
    justify-content:center;font-weight:800;font-size:12px;color:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb, var(--c-ink) 12%, transparent);flex:none}
  .langsel .drop .dsep{height:1px;background:var(--line);margin:6px 8px}
  .langsel .drop .dnote{padding:8px 11px 4px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
  /* sekundárny nezávislý prepínač meny (dole v dropdowne) */
  .curline{display:block;padding:6px 11px 4px}
  .curlbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-bottom:9px}
  .curseg{display:flex;flex-wrap:nowrap;gap:7px}
  .curseg a{padding:7px 13px;font-size:12px;font-weight:700;color:var(--ink-2);border:1px solid var(--line);
    border-radius:var(--r-pill);white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
  .curseg a.on{background:var(--ink);color:var(--c-white);border-color:var(--ink)}
  .curseg a:not(.on):hover{background:color-mix(in srgb, var(--c-red) 8%, transparent);color:var(--red);border-color:color-mix(in srgb, var(--c-red) 40%, transparent)}

  /* B2B nav položka - odlíšená (najvyššia hodnota objednávky) */
  .navitem.navb2b>a{border:1.5px solid var(--red);border-radius:var(--r-pill);padding:9px 15px;margin-left:8px;gap:7px}
  .navitem.navb2b>a::after{display:none!important}
  .navitem.navb2b>a .bi{color:var(--red)}
  .navitem.navb2b:hover>a{border-color:var(--red);color:var(--red);background:var(--c-white)}

  /* riadok 2: hlavná navigácia + mega-menu */
  nav.main{display:flex;justify-content:space-between;align-items:stretch;gap:8px}
  .navrow{position:relative}
  .navitem{position:static;display:flex;align-items:center}
  .navitem>a{display:flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:700;
    text-transform:uppercase;font-size:15px;letter-spacing:.03em;color:var(--ink);
    padding:16px 4px;position:relative;white-space:nowrap}
  .navitem>a .car{font-size:9px;color:var(--muted);transition:transform .15s}
  .navitem:hover>a,.navitem.active>a{color:var(--red)}
  .navitem:hover>a .car{transform:rotate(180deg);color:var(--red)}
  .navitem.active>a::after,.navitem:hover>a::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;height:2px;background:var(--red)}
  /* mega dropdown */
  /* bohaté mega-menu: zoznam podkategórií vľavo + obrázkové dlaždice vpravo (à la Wolverson) */
  .mega{position:absolute;top:100%;left:0;right:0;transform:translateY(8px);
    background:var(--c-white);border:1px solid var(--line);border-top:3px solid var(--red);box-shadow:0 24px 60px color-mix(in srgb, var(--c-ink) 16%, transparent);
    opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;z-index:60;overflow:hidden}
  .navitem:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
  .mgrid{display:grid;grid-template-columns:1.12fr 1fr}
  .mnav{padding:26px 30px;display:flex;flex-direction:column}
  .mtitle{position:relative;display:flex;align-items:baseline;gap:12px;font-family:var(--f-display);font-weight:800;
    text-transform:uppercase;font-size:22px;letter-spacing:.01em;color:var(--ink);margin:0 0 18px;padding-top:15px}
  .mtitle::before{content:"";position:absolute;top:0;left:0;width:52px;height:3px;background:var(--red)}
  .mtitle .mcount{font-family:var(--f-body);font-weight:700;font-size:12px;color:var(--red);letter-spacing:0;text-transform:none}
  /* podkategórie ako kartičky s náhľadom */
  .msubs{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-content:start}
  .msub{border-radius:var(--r-sm)}
  .msub-main{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;
    transition:background .12s;border:1px solid transparent}
  .msub-main:hover{background:color-mix(in srgb, var(--c-red) 6%, transparent);border-color:color-mix(in srgb, var(--c-red) 18%, transparent)}
  .msub .th{width:52px;height:52px;flex:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
    overflow:hidden;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
  .msub-main:hover .th{background:var(--c-white);border-color:color-mix(in srgb, var(--c-red) 40%, transparent)}
  .msub .th img{width:100%;height:100%;object-fit:contain;padding:6px}
  .msub .sname{font-size:15px;font-weight:800;color:var(--ink);line-height:1.15;letter-spacing:.005em}
  .msub-main:hover .sname{color:var(--red)}
  /* pod-podkategórie (napr. Poistky pod Tyčami) - viditeľné priamo v menu */
  .schildren{display:flex;flex-direction:column;gap:1px;padding:1px 12px 7px 78px;margin-top:-3px}
  .schildren a{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink-2);
    padding:5px 0;text-decoration:none;transition:color .12s}
  .schildren a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}
  .schildren a:hover{color:var(--red)}
  /* Kardio = flat kategória: filtre podľa typu stroja */
  .klbl{font-family:var(--f-body);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11px;
    color:var(--muted);margin:2px 0 12px}
  .klist{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .kf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:var(--r-sm);
    border:1px solid var(--line);font-size:14.5px;font-weight:800;color:var(--ink);text-decoration:none;transition:background .12s,border-color .12s}
  .kf:hover{background:color-mix(in srgb, var(--c-red) 6%, transparent);border-color:color-mix(in srgb, var(--c-red) 40%, transparent);color:var(--red)}
  .kf .ar{color:var(--muted)}
  .kf:hover .ar{color:var(--red)}
  .mall{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:11px 18px;align-self:flex-start;
    font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.05em;
    color:var(--c-white);background:var(--red);border:1.5px solid var(--red);border-radius:var(--r-pill);transition:background .15s,border-color .15s}
  .mall:hover{background:var(--red-dark);border-color:var(--red-dark);color:var(--c-white)}
  /* veľké foto dlaždice vpravo */
  .mfeat{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px 28px;background:var(--paper);border-left:1px solid var(--line);align-content:start}
  .mfhead{grid-column:1/-1;font-family:var(--f-body);font-weight:800;text-transform:uppercase;letter-spacing:.14em;
    font-size:12px;color:var(--red);margin-bottom:-2px;display:flex;align-items:center;gap:8px}
  .mfhead::before{content:"";width:16px;height:2px;background:var(--red)}
  .mfnote{grid-column:1/-1;font-size:12.5px;color:var(--ink-2);margin-top:4px;display:flex;align-items:center;gap:7px}
  .mfnote::before{content:"→";color:var(--red);font-weight:800}
  .ftile{display:flex;flex-direction:column;background:var(--c-white);border:1px solid var(--line);
    overflow:hidden;transition:border-color .16s,transform .16s,box-shadow .16s;text-decoration:none}
  .ftile:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 12px 26px color-mix(in srgb, var(--c-ink) 10%, transparent)}
  .ftile .im{aspect-ratio:1/1;background:var(--c-white);position:relative}
  .ftile .im img{width:100%;height:100%;object-fit:contain;padding:16px}
  .ftile .fbadge{position:absolute;top:10px;left:10px;background:var(--red);color:var(--c-white);font-family:var(--f-display);
    font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.04em;padding:4px 8px;border-radius:var(--r-pill)}
  .ftile .cap{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 14px;
    border-top:1px solid var(--line);font-family:var(--f-display);font-weight:800;text-transform:uppercase;
    font-size:14px;letter-spacing:.02em;color:var(--ink);line-height:1.05}
  .ftile .cap .ar{color:var(--red)}

  /* ===== Hero ===== */
  .hero{background:var(--white);border-bottom:1px solid var(--line)}
  .hero .wrap{padding-top:32px;padding-bottom:32px}
  .hero h1{font-size:clamp(46px,6.6vw,92px);color:var(--ink)}
  .hero h1 em{color:var(--ink);font-style:normal}
  .hero p.lead{color:var(--ink-2);font-size:18px;max-width:46ch;margin:22px 0 32px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .hero-media{position:relative;background:var(--paper);border:1px solid var(--line)}
  .hero-media img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:28px}
  /* ===== Hero banner mriežka: 1 veľký + 2 menšie (FIXNÝ rozmer) =====
     Návrhové plátna (px, desktop @1240 wrap): hlavný ≈ 820×470, bočný ≈ 410×228 */
  .herobanners{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:470px}
  .bn-main{grid-column:1;grid-row:1 / span 2;position:relative;overflow:hidden;
    background:var(--paper);border:1px solid var(--line)}
  .bn-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.4,0,.2,1)}
  .bn-slide{flex:0 0 100%;display:grid;grid-template-columns:1.05fr .95fr;min-width:0;
    position:relative}
  .bn-slide:not([data-bg]){background:var(--c-paper)}

  /* ===== NASTAVENIA SNIMKY - v teme prepinace v paneli bloku =====
     data-layout : split (text vlavo) | split-rev (text vpravo) | full (foto cez celu
                   plochu, text na nej) | plain (bez fotky)
     data-fit    : contain = produktovy vyrez so vzduchom okolo (PNG bez pozadia)
                   cover   = fotka vyplni cely panel a orezè sa (fotky prostredia)
     data-bg     : ktorakolvek z 20 farieb palety (utility [data-bg] vyssie)
     data-tone   : light = svetly text (na fotke/tmavom pozadi), inak tmavy
     data-align  : center = text na stred, inak vlavo
     data-shade  : 0-3 = sila stmavenia fotky pod textom pri layout=full */

  .bn-slide[data-layout="split-rev"]{grid-template-columns:.95fr 1.05fr}
  .bn-slide[data-layout="split-rev"] .txt{order:2}
  .bn-slide[data-layout="split-rev"] .media{order:1;border-left:none;border-right:1px solid var(--line)}
  .bn-slide[data-layout="full"]{grid-template-columns:1fr}
  .bn-slide[data-layout="full"] .media{position:absolute;inset:0;border:none;background:none}
  .bn-slide[data-layout="full"] .txt{position:relative;z-index:2;max-width:620px}
  .bn-slide[data-layout="plain"]{grid-template-columns:1fr}
  .bn-slide[data-layout="plain"] .media{display:none}

  .bn-slide[data-fit="cover"] .media img{object-fit:cover;padding:0}
  .bn-slide[data-fit="contain"] .media img{object-fit:contain;padding:22px}

  /* stmavenie fotky, aby text zostal citatelny - sila je nastavitelna */
  .bn-slide[data-layout="full"] .media::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,
      color-mix(in srgb, var(--c-dark) calc(var(--shade,.55) * 100%), transparent) 0%,
      color-mix(in srgb, var(--c-dark) calc(var(--shade,.55) * 100%), transparent) 40%,
      color-mix(in srgb, var(--c-dark) calc(var(--shade,.55) * 38%), transparent) 74%,
      color-mix(in srgb, var(--c-dark) 0%, transparent) 100%)}
  .bn-slide[data-shade="0"]{--shade:0}
  .bn-slide[data-shade="1"]{--shade:.35}
  .bn-slide[data-shade="2"]{--shade:.58}
  .bn-slide[data-shade="3"]{--shade:.78}

  .bn-slide[data-tone="light"] h1,.bn-slide[data-tone="light"] h2{color:var(--c-white)}
  .bn-slide[data-tone="light"] .lead{color:var(--on-dark)}
  /* na fotke je cervený eyebrow slabo citatelny - text biely, ciarka zostava cervena */
  .bn-slide[data-tone="light"] .eyebrow{color:var(--c-white)}

  .bn-slide[data-align="center"] .txt{align-items:center;text-align:center}
  .bn-slide[data-align="center"] .lead{max-width:48ch}
  .bn-slide[data-align="center"] .eyebrow{justify-content:center}
  /* ovladanie posuvneho hlavneho bannera */
  /* ===== Sipky posuvnikov - JEDEN vzhlad pre cely web =====
     Predtym boli tri rozne: 38px bez tienu, 42px s tienom a inym ramcekom,
     32px s tretim. Aj hover sa lisil - niekde cervena vypln, inde len cerveny
     ramcek. Teraz sa lisia UZ LEN velkostou podla kontextu:
       32 px = nahlady produktu (drobne)   38 px = hero banner
       42 px = recenzie (najvacsia plocha)
     Novy posuvnik NESMIE zaviest stvrty vzhlad - pouzije jednu z tychto troch. */
  .bn-nav,.rev-nav,.pd-tnav,.pas-nav{position:absolute;top:50%;transform:translateY(-50%);
    border-radius:50%;padding:0;border:1.5px solid var(--line);
    background:color-mix(in srgb, var(--c-white) 93%, transparent);color:var(--ink);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px color-mix(in srgb, var(--c-ink) 12%, transparent);
    transition:background .15s,border-color .15s,color .15s,opacity .15s}
  .bn-nav:hover,.rev-nav:hover,.pd-tnav:hover,.pas-nav:hover{background:var(--red);border-color:var(--red);color:var(--c-white)}
  .bn-nav[disabled],.rev-nav[disabled],.pd-tnav[disabled],.pas-nav[disabled]{opacity:.3;cursor:default;pointer-events:none}
  .bn-nav{width:38px;height:38px;z-index:3}
  .rev-nav{width:42px;height:42px;z-index:2}
  .bn-nav.prev{left:14px} .bn-nav.next{right:14px}
  .bn-dots{position:absolute;left:46px;bottom:20px;display:flex;gap:8px;z-index:3}
  .bn-dots button{width:8px;height:8px;border-radius:50%;border:none;background:color-mix(in srgb, var(--c-ink) 25%, transparent);cursor:pointer;padding:0;transition:width .2s,background .2s;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--c-white) 55%, transparent)}
  .bn-dots button.on{background:var(--red);width:24px;border-radius:var(--r-pill)}
  /* tlacidlo pauza - prida sa samo, len ked je zapnute automaticke prepinanie.
     Bez neho by automaticky pohyb bol pristupnostna chyba (WCAG 2.2.2). */
  .k-pauza{position:absolute;right:14px;bottom:16px;z-index:4;width:30px;height:30px;
    border-radius:50%;border:1.5px solid color-mix(in srgb, var(--c-white) 45%, transparent);
    background:color-mix(in srgb, var(--c-dark) 45%, transparent);color:var(--c-white);
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    font-size:10px;line-height:1;padding:0;transition:background .15s,border-color .15s}
  .k-pauza:hover{background:var(--c-red);border-color:var(--c-red)}
  .bn-main .k-pauza{background:color-mix(in srgb, var(--c-white) 88%, transparent);
    color:var(--c-ink);border-color:var(--c-line)}
  .bn-main .k-pauza:hover{background:var(--c-red);color:var(--c-white);border-color:var(--c-red)}
  .bn-main .txt{padding:46px 46px 52px;display:flex;flex-direction:column;justify-content:center}
  .bn-main .eyebrow{margin-bottom:10px}
  /* H1 ma len prva (viditelna) snimka - dalsie su H2, aby na stranke nebolo viac H1 */
  .bn-main h1,.bn-main h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;line-height:.95;
    font-size:clamp(30px,3.4vw,50px);color:var(--ink);margin:0}
  .bn-main h1 em,.bn-main h2 em{color:var(--red);font-style:normal}
  .bn-main .lead{color:var(--ink-2);font-size:16px;margin:16px 0 24px;max-width:34ch}
  /* odpocet v hero - riadok medzi popisom a tlacidlom, prazdny data-do = nevykresli sa */
  .hero-cd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-8px 0 20px}
  .hero-cd .lbl{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:12px;
    letter-spacing:.06em;color:var(--c-red-dark)}
  .hero-cd[hidden]{display:none}
  .bn-slide[data-tone="light"] .hero-cd .lbl{color:var(--c-white)}
  .bn-slide[data-tone="light"] .hero-cd .cd i{background:color-mix(in srgb, var(--c-white) 18%, transparent);color:var(--c-white)}
  .bn-main .media{background:var(--paper);display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line)}
  .bn-main .media img{width:100%;height:100%;object-fit:contain;padding:22px}
  /* Bocne dlazdice: popisok uz NIE je pas cez celu sirku, ale plavajuci stitok
     v rohu - siroky presne na text. Modifikatory .cap.red / .cap.light menia farbu
     (v teme = vyber z palety, nie color picker). */
  .bnr{position:relative;overflow:hidden;background:var(--c-white);border:1px solid var(--line);
    display:block;text-decoration:none;transition:border-color .18s,box-shadow .18s;min-height:0}
  .bnr:hover{border-color:var(--ink);box-shadow:0 12px 30px color-mix(in srgb, var(--c-ink) 9%, transparent)}
  /* BEZ ODKAZU = dlazdica je len obrazok. Ziadny hover, ziadna sipka, ziadny kurzor ruky.
     V teme staci nechat pole "Odkaz" prazdne - blok sa vykresli ako <div>, nie ako <a>. */
  .bnr:not([href]){cursor:default}
  .bnr:not([href]):hover{border-color:var(--line);box-shadow:none}
  .bnr:not([href]):hover .im img{transform:none}
  .bnr:not([href]) .cap .ar{display:none}
  .bnr:not([href]) .cap{padding-right:18px}
  .bnr .im{position:absolute;inset:0;background:var(--c-white);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .bnr .im img{width:100%;height:100%;object-fit:contain;padding:16px 16px 58px;transition:transform .3s}
  /* rovnaky prepinac ako pri hlavnom banneri: produktovy vyrez vs. fotka cez celu plochu */
  .bnr[data-fit="cover"] .im img{object-fit:cover;padding:0}
  .bnr[data-fit="contain"] .im img{object-fit:contain;padding:16px 16px 58px}
  .bnr:hover .im img{transform:scale(1.05)}
  .bnr .bbadge{position:absolute;top:12px;left:12px;z-index:2;background:var(--red);color:var(--c-white);
    font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.05em;padding:4px 9px;border-radius:var(--r-pill)}
  /* Pilulka na stred spodnej hrany - pill styl (999px) rovnako ako tlacidla a chipy. */
  .bnr .cap{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:2;
    max-width:calc(100% - 28px);padding:8px 8px 8px 18px;
    border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:10px;transition:background .18s}
  /* farba stitku = ktorakolvek z 20 farieb palety (data-bg), text svetly/tmavy (data-fg).
     Bez nastavenia zostava predvolena cierna pilulka s bielym textom. */
  .bnr .cap:not([data-bg]){background:var(--c-ink)}
  .bnr .cap:not([data-fg]){color:var(--c-white)}
  /* PRAZDNY STITOK SA NEZOBRAZI - ziadna prazdna pilulka cez fotku. */
  .bnr .cap:empty,
  .bnr .cap:not(:has(b, span, .ar)){display:none}
  /* poloha stitku */
  .bnr[data-cap="bottom-left"] .cap{left:14px;transform:none}
  .bnr[data-cap="bottom-right"] .cap{left:auto;right:14px;transform:none}
  .bnr[data-cap="top-left"] .cap{left:14px;top:14px;bottom:auto;transform:none}
  .bnr[data-cap="top-left"] .bbadge{left:auto;right:12px}
  .bnr[data-cap="center"] .cap{top:50%;bottom:auto;transform:translate(-50%,-50%)}
  .bnr .cap b{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:13.5px;
    letter-spacing:.03em;line-height:1.15;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bnr .cap span{font-size:12px;color:color-mix(in srgb, var(--c-white) 75%, transparent);display:block;margin-top:2px}
  .bnr .cap .ar{flex:none;width:26px;height:26px;border-radius:50%;background:var(--red);color:var(--c-white);
    font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;
    line-height:1;transition:transform .18s}
  .bnr:hover .cap .ar{transform:translateX(2px)}
  /* sipka sa prisposobi farbe pilulky, aby nikdy nesplynula */
  .bnr .cap[data-bg] .ar{background:var(--c-white);color:var(--c-ink)}
  .bnr .cap[data-fg="ink"] .ar{background:var(--c-red);color:var(--c-white)}
  .bnr .cap[data-fg="ink"]{box-shadow:0 6px 18px color-mix(in srgb, var(--c-ink) 16%, transparent)}

  /* ===== USP bar - červená lišta (výslovné želanie Jakuba) ===== */
  .usp{background:var(--red);color:var(--c-white)}
  .usp .wrap{display:flex;justify-content:space-between;gap:14px}
  .usp .item{display:flex;gap:12px;align-items:center;padding:20px 0;min-width:0}
  .usp .ic-badge{width:46px;height:46px;border-radius:50%;background:color-mix(in srgb, var(--c-white) 15%, transparent);
    display:flex;align-items:center;justify-content:center;flex:none;color:var(--c-white)}
  .usp .ic-badge svg{width:26px;height:26px}
  .usp .t{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.02em;line-height:1.05;white-space:nowrap}
  .usp .s{color:var(--c-white);font-size:12.5px;font-weight:600;margin-top:3px;white-space:nowrap}

  /* ===== Section shell ===== */
  section.blk{padding:40px 0}
  section.alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
  .sec-head h2{font-size:clamp(28px,3.6vw,44px);color:var(--ink)}
  .sec-head a.more{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;color:var(--ink);font-size:15px;white-space:nowrap}
  .sec-head a.more:hover{color:var(--red)}
  .ig-head a.more{display:flex;align-items:center;gap:7px}

  /* ===== Category tiles (4 skupiny stromu v2) ===== */
  /* Pas kategorii - rovnake spravanie ako nahlady na produkte: skryty posuvnik,
     sipky sa objavia len ked sa dlazdice nezmestia. Jedno pravidlo pre cely web. */
  .cats-pas{position:relative}
  .cats{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;
    scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:6px}
  .cats::-webkit-scrollbar{display:none}
  .pas-nav{width:38px;height:38px;z-index:3;display:none}
  .cats-pas.je-viac .pas-nav{display:flex}
  .pas-nav.prev{left:-16px} .pas-nav.next{right:-16px}
  @media(max-width:900px){ .pas-nav.prev{left:-4px} .pas-nav.next{right:-4px} }
  .cats::-webkit-scrollbar{height:6px}
  .cats::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .cat{position:relative;display:block;flex:0 0 240px;width:240px;aspect-ratio:3/4.3;
    overflow:hidden;background:var(--paper);scroll-snap-align:start;transition:box-shadow .18s}
  .cat:hover{box-shadow:0 14px 34px color-mix(in srgb, var(--c-ink) 18%, transparent)}
  .cat .ph{position:absolute;inset:0}
  .cat .ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
  .cat:hover .ph img{transform:scale(1.06)}
  /* Stmavenie musi drzat text citatelny aj ked Jakub nahra svetlu fotku - preto vyrazny
     tmavy pas hore (pod nadpisom) aj dole (pod tlacidlom), nie len jemny nadych. */
  .cat::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,color-mix(in srgb, var(--c-dark) 72%, transparent) 0%,color-mix(in srgb, var(--c-dark) 34%, transparent) 26%,color-mix(in srgb, var(--c-dark) 0%, transparent) 46%,color-mix(in srgb, var(--c-dark) 12%, transparent) 62%,color-mix(in srgb, var(--c-dark) 82%, transparent) 100%)}
  .cat .lab{position:absolute;top:18px;left:18px;right:18px;z-index:1}
  /* Typograficka skala dlazdice: 19 / 13 / 12,5 px. Povodne 17 / 11,5 / 11,5 bolo
     prilis male a podnadpis mal rovnaku velkost ako tlacidlo (ziadna hierarchia). */
  .cat .lab h3{font-family:var(--f-display);font-weight:900;text-transform:uppercase;
    font-size:19px;line-height:1.08;color:var(--c-white);text-shadow:0 2px 10px color-mix(in srgb, var(--c-dark) 60%, transparent)}
  .cat .lab .n{color:color-mix(in srgb, var(--c-white) 92%, transparent);font-size:13px;font-weight:600;margin-top:7px;
    line-height:1.4;text-shadow:0 1px 8px color-mix(in srgb, var(--c-dark) 65%, transparent)}
  .cat .arrow{position:absolute;left:18px;bottom:18px;z-index:1;background:var(--c-white);color:var(--ink);
    font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    font-size:12.5px;padding:10px 15px;transition:background .18s,color .18s;border-radius:var(--r-pill)}
  .cat:hover .arrow{background:var(--red);color:var(--c-white)}

  /* ===== Product cards ===== */
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;
    transition:border-color .18s,transform .18s,box-shadow .18s}
  .card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 12px 30px color-mix(in srgb, var(--c-ink) 8%, transparent)}
  /* fotka na karte = VZDY stvorec 1:1 (aspect-ratio), obrazok absolutne vnutri - vyska sa neroztiahne ani pri vysokej fotke */
  .card .ph{position:relative;aspect-ratio:1/1;background:var(--white);border-bottom:1px solid var(--line);overflow:hidden}
  .card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px;z-index:0}
  .card .ph>:not(img){z-index:1}
  .badge{position:absolute;top:12px;left:12px;font-family:var(--f-display);font-weight:800;
    text-transform:uppercase;font-size:11px;letter-spacing:.05em;padding:5px 9px;color:var(--c-white);background:var(--red);border-radius:var(--r-pill)}
  /* Farebne modifikatory stitkov - platia rovnako pre vsetky typy (badge / bbadge / fbadge).
     Vo WP to bude obycajny vyber farby z palety pri kazdom stitku, tu su triedy na ukazku. */
  .badge.green,.bbadge.green,.fbadge.green,.badge.new,.bbadge.new,.fbadge.new{background:var(--c-green)}
  .badge.amber,.bbadge.amber,.fbadge.amber{background:var(--c-amber)}
  .badge.blue,.bbadge.blue,.fbadge.blue{background:var(--c-blue)}
  .badge.violet,.bbadge.violet,.fbadge.violet{background:var(--c-violet)}
  .badge.teal,.bbadge.teal,.fbadge.teal{background:var(--c-teal)}
  .badge.grey,.bbadge.grey,.fbadge.grey{background:var(--c-grey)}
  .badge.dark,.bbadge.dark,.fbadge.dark{background:var(--c-ink)}
  .badge.gold,.bbadge.gold,.fbadge.gold{background:var(--c-gold);color:var(--c-ink)}
  /* svetle varianty - jemnejsi stitok, syty text na svetlom podklade rovnakej farby */
  .badge.soft-red,.bbadge.soft-red,.fbadge.soft-red{background:var(--c-red-soft);color:var(--c-red-dark)}
  .badge.soft-green,.bbadge.soft-green,.fbadge.soft-green{background:var(--c-green-soft);color:var(--c-green)}
  .badge.soft-amber,.bbadge.soft-amber,.fbadge.soft-amber{background:var(--c-amber-soft);color:var(--c-amber)}
  .badge.soft-blue,.bbadge.soft-blue,.fbadge.soft-blue{background:var(--c-blue-soft);color:var(--c-blue)}
  .badge.soft-violet,.bbadge.soft-violet,.fbadge.soft-violet{background:var(--c-violet-soft);color:var(--c-violet)}
  .card .body{padding:15px 15px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
  .addcart{margin-top:11px;display:flex;align-items:center;justify-content:center;gap:8px;
    background:var(--red);color:var(--c-white);border-radius:var(--r-pill);padding:11px 14px;
    font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:13px;
    letter-spacing:.04em;transition:background .15s}
  .card:hover .addcart{background:var(--red-dark)}
  .addcart.ghost{background:none;border:1.5px solid var(--line);color:var(--ink)}
  .card:hover .addcart.ghost{background:none;border-color:var(--red);color:var(--red)}
  .card .cat-lab{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
  .card h3.name{font-family:var(--f-body);text-transform:none;font-weight:700;font-size:15px;
    line-height:1.32;letter-spacing:0;color:var(--ink)}
  .avail{font-size:12.5px;color:var(--ok);display:flex;align-items:center;gap:6px;font-weight:600}
  .avail .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
  .avail.low{color:var(--warn)}
  .avail.low .dot{background:var(--warn)}
  .avail.out{color:var(--red)}
  .avail.out .dot{background:var(--red)}
  .price{display:flex;align-items:baseline;gap:6px 10px;margin-top:auto;flex-wrap:wrap}
  .price .now{font-family:var(--f-display);font-weight:800;font-size:24px;color:var(--ink)}
  .price .now.sale{color:var(--ink)}
  .price .was{color:var(--muted);text-decoration:line-through;font-size:14px}

  /* ===== Bundle ===== */
  .bundle{background:var(--white);border:1px solid var(--line);display:grid;
    grid-template-columns:1fr 1fr;overflow:hidden}
  .bundle .media{background:var(--paper);display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line)}
  .bundle .media img{max-height:400px;object-fit:contain;padding:28px}
  .bundle .info{padding:46px}
  .bundle .info h2{font-size:clamp(30px,3.4vw,42px);margin-bottom:14px;color:var(--ink)}
  .bundle .info p{color:var(--ink-2);max-width:42ch;margin:0 0 22px}
  .bundle ul{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:11px}
  .bundle li{display:flex;gap:11px;align-items:center;font-size:15px;color:var(--ink-2)}
  .bundle li svg{flex:none;color:var(--ink)}
  .bundle .pr{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
  .bundle .pr .now{font-family:var(--f-display);font-weight:800;font-size:40px;color:var(--ink)}
  .bundle .pr .was{text-decoration:line-through;color:var(--muted);font-size:20px}
  .bundle .pr .save{background:var(--red);color:var(--c-white);font-weight:800;font-size:13px;padding:5px 11px;
    font-family:var(--f-display);letter-spacing:.04em;border-radius:var(--r-pill)}

  /* ===== B2B ===== */
  .b2b{background:var(--dark);color:var(--c-white);position:relative;overflow:hidden;isolation:isolate}
  /* stmavené foto pozadie z realizácie */
  .b2b-bg{position:absolute;inset:0;z-index:-1}
  .b2b-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45)}
  .b2b-bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,color-mix(in srgb, var(--c-dark) 84%, transparent) 0%,color-mix(in srgb, var(--c-dark) 80%, transparent) 45%,color-mix(in srgb, var(--c-dark) 74%, transparent) 100%)}
  .b2b .wrap{display:block;padding:40px 24px;position:relative}
  .b2b-copy{max-width:none}
  .b2b h2{font-size:clamp(30px,4vw,52px);color:var(--c-white)}
  .b2b h2 em{color:var(--red);font-style:normal}
  .b2b p{color:var(--on-dark);max-width:60ch;margin:16px 0 0;font-size:16px;line-height:1.6}
  .b2b p strong{color:var(--c-white);font-weight:700}
  .b2b-intro{max-width:none!important;color:var(--c-white)!important;font-weight:700;font-size:17px!important;white-space:nowrap}
  .b2b-standard{font-family:var(--f-display)!important;font-weight:900!important;text-transform:uppercase;
    color:var(--c-white)!important;font-size:clamp(18px,2vw,25px)!important;line-height:1.15!important;letter-spacing:.005em;
    margin:20px 0 0!important;padding-left:18px;border-left:5px solid var(--red)}
  .b2b-eu{font-size:16px!important;color:var(--c-white)!important;font-weight:600;margin:16px 0 28px!important}
  .b2b-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .btn-ghost{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-display);font-weight:800;
    text-transform:uppercase;letter-spacing:.04em;font-size:15px;padding:14px 22px;border:1.5px solid color-mix(in srgb, var(--c-white) 40%, transparent);
    border-radius:var(--r-pill);color:var(--c-white);transition:border-color .15s}
  .btn-ghost:hover{background:var(--red);border-color:var(--red)}
  .b2b-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--on-dark)}
  .b2b-trust span{display:flex;align-items:center;gap:7px}
  .b2b-trust svg{color:var(--red)}
  .b2b .refs{display:flex;gap:30px;flex-wrap:wrap;color:var(--on-dark-2);font-family:var(--f-display);
    font-weight:800;text-transform:uppercase;font-size:17px;letter-spacing:.05em;margin-top:30px}
  .b2b .media{position:relative}
  .b2b .media img{border:1px solid var(--dark-2);background:var(--white);width:100%;display:block}
  .media-cap{position:absolute;left:0;bottom:0;background:color-mix(in srgb, var(--c-dark) 88%, transparent);color:var(--c-white);font-size:12px;
    font-weight:700;letter-spacing:.04em;padding:8px 14px;text-transform:uppercase}
  /* štatistiky s červeným prúžkom (à la cfshop) + počítadlo - cez celú šírku, 1 riadok */
  .b2b-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:52px 0 0;max-width:75%}
  .b2b-stats>div{padding:4px 0 4px 20px;border-left:4px solid var(--red);min-width:0}
  .b2b-stats b{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(30px,3.3vw,43px);
    color:var(--c-white);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.015em}
  .b2b-stats b em{font-style:normal;color:var(--red)}
  .b2b-stats span{font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:.08em;
    font-size:11px;color:var(--c-white);margin-top:9px;display:block;white-space:nowrap}

  /* ===== Dôverujú nám - logá klientov (nekonečný bežiaci pás) ===== */
  .clients{background:var(--white);overflow:hidden}
  .clients .wrap{padding:30px 24px 18px;display:flex;justify-content:center}
  .clients-marquee{overflow:hidden;padding-bottom:30px}
  .clients-track{display:flex;width:max-content;animation:clientsScroll 32s linear infinite}
  .clients-marquee:hover .clients-track{animation-play-state:paused}
  .clients-set{display:flex;align-items:center;gap:72px;padding-right:72px}
  .clients-set img{height:52px;width:auto}
  /* štvorcové/úzke logá potrebujú väčšiu výšku, aby opticky ladili so širokými */
  .clients-set img.sq{height:68px}
  @keyframes clientsScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.clients-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

  /* ===== O nás / brand story - štíhly pás, svetlé pozadie ===== */
  .about{position:relative;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .about .wrap{padding:40px 24px;max-width:720px;text-align:center;opacity:0;transform:translateY(16px)}
  .about.reveal .wrap{animation:aboutFade .8s ease-out forwards}
  @keyframes aboutFade{to{opacity:1;transform:none}}
  .about .eyebrow{justify-content:center}
  .about h2{font-size:clamp(28px,3.4vw,40px);margin:14px 0 18px;color:var(--ink);
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
  /* CSS crop: z plného loga ukáže len horný wordmark AMREP (186/286 výšky), .FITNESS odreže */
  .about h2 .h-logo-wrap{display:inline-block;height:.78em;aspect-ratio:1000/186;overflow:hidden;
    margin:0 .1em 0 .24em}
  .about h2 .h-logo-wrap img{width:100%;height:auto;display:block}
  .about .rw{color:var(--red);font-weight:800}
  .about p{color:var(--ink-2);font-size:16px;line-height:1.65;margin:0 auto;max-width:56ch}
  .about-claim{font-family:var(--f-display);font-weight:800;font-style:italic;text-transform:uppercase;
    color:var(--ink) !important;font-size:clamp(19px,2.3vw,26px) !important;letter-spacing:.01em;margin-top:16px !important}
  @media(prefers-reduced-motion:reduce){.about .wrap{opacity:1;transform:none}}

  /* ===== Reviews ===== */
  .sec-head p.sub{color:var(--ink-2);font-size:15px;margin:8px 0 0;max-width:52ch}
  .stars{color:var(--gold);letter-spacing:2px;font-size:16px;display:inline-flex;line-height:1}
  .rev-grid{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:stretch}
  /* súhrnná karta */
  .rev-agg{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:22px}
  .agg-top{display:flex;align-items:center;gap:18px}
  .agg-score{font-family:var(--f-display);font-weight:800;font-size:60px;line-height:.9;color:var(--ink)}
  .agg-top .stars{font-size:19px;letter-spacing:3px}
  .agg-count{color:var(--ink-2);font-size:13px;font-weight:600;margin-top:6px}
  .rev-agg .btn{justify-content:center;white-space:nowrap;margin-top:auto}
  /* recenzné karty - karusel: 2 na riadok, prepínanie šípkami */
  .rev-carousel{position:relative;display:flex;align-items:stretch}
  /* min-width:0 je nutne - flex item sa inak neda zmensit pod min-content obsahu
     a karusel pretecie mriezku (prejavovalo sa na uzsich obrazovkach). */
  .rev-viewport{overflow:hidden;flex:1;min-width:0}
  .rev-carousel{min-width:0}
  .rev-track{display:flex;gap:16px;height:100%;transition:transform .35s ease}
  .revcard{flex:0 0 calc(50% - 8px);background:var(--white);border:1px solid var(--line);
    border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:12px}
  .rev-nav.prev{left:-14px}
  .rev-nav.next{right:-14px}
  .revcard .rc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .revcard .verified{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ok);text-transform:uppercase;letter-spacing:.05em}
  .revcard h3{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-weight:800;font-size:16px;color:var(--ink);margin:0;line-height:1.25}
  .revcard p{margin:0;font-size:14.5px;color:var(--ink-2);flex:1;line-height:1.5}
  .revcard .who{display:flex;justify-content:space-between;align-items:center;gap:10px;
    font-size:13px;color:var(--ink-2);font-weight:600;border-top:1px solid var(--line);padding-top:13px}
  .revcard .who b{color:var(--ink);font-weight:700}

  /* ===== Taby produktov (Bestsellery / Novinky) ===== */
  .ptabs{display:flex;gap:8px}
  .ptab{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    font-size:14px;padding:10px 20px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--c-white);
    color:var(--ink-2);cursor:pointer;transition:all .15s}
  .ptab:hover{border-color:color-mix(in srgb, var(--c-red) 40%, transparent);color:var(--red)}
  .ptab.on{background:var(--ink);border-color:var(--ink);color:var(--c-white)}
  .tabpane.hid{display:none}
  .avail.pre{color:var(--warn)}
  .avail.pre .dot{background:var(--warn)}

  /* ===== Sety výhodnejšie ===== */
  /* (sety pouzivaju standardnu .card - vlastny styl zruseny, Jakub 2026-08-18) */

  /* ===== Instagram pás ===== */
  .ig{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
  .ig .cell{aspect-ratio:1/1;background:var(--paper);border:1px solid var(--line);overflow:hidden;display:block}
  .ig .cell img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
  .ig .cell:hover img{transform:scale(1.06)}

  /* ===== Newsletter ===== */
  /* newsletter karta prekrýva prechod do pätičky (polovica na bielom, polovica na tmavom) */
  .nl{background:var(--red);border-radius:var(--r-card);padding:44px 48px;display:grid;
    grid-template-columns:1fr 1fr;gap:40px;align-items:center;color:var(--c-white);position:relative;overflow:hidden;
    z-index:2;margin-bottom:-76px;box-shadow:0 24px 60px color-mix(in srgb, var(--c-dark) 25%, transparent)}
  .nl::after{content:"";position:absolute;right:-60px;bottom:-80px;width:340px;height:340px;border-radius:50%;
    background:color-mix(in srgb, var(--c-white) 7%, transparent);pointer-events:none}
  .nl h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.8vw,36px);line-height:1;color:var(--c-white)}
  .nl p{margin:12px 0 0;color:color-mix(in srgb, var(--c-white) 88%, transparent);font-size:15px}
  .nl-form{min-width:0}
  .nl-lbl{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px;color:color-mix(in srgb, var(--c-white) 85%, transparent)}
  .nl-row{display:flex;gap:10px}
  .nl-row input{flex:1;height:52px;border:none;border-radius:var(--r-sm);padding:0 18px;font-size:15px;color:var(--ink);outline:none;min-width:0}
  .nl-btn{background:var(--ink);border-color:var(--ink);border-radius:var(--r-sm);white-space:nowrap}
  .nl-btn:hover{background:var(--dark);border-color:var(--dark)}
  .nl-gdpr{font-size:12px !important;color:color-mix(in srgb, var(--c-white) 75%, transparent) !important;margin-top:10px !important}
  .nl-gdpr a{text-decoration:underline;color:var(--c-white)}

  /* ===== Footer trust (platby - biele chipy s logami) ===== */
  .trustrow{display:flex;flex-direction:column;align-items:center;gap:14px;
    border-top:1px solid var(--dark-2);padding:26px 0;margin-top:6px}
  .paylbl{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--on-dark-2);font-weight:700}
  .payrow{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
  .pay{background:var(--c-white);border-radius:var(--r-sm);padding:0 18px;height:44px;display:inline-flex;
    align-items:center;gap:7px}
  .pay b{font-family:var(--f-body);font-weight:700;font-size:15px;color:var(--ink)}
  .pay .visa{font-family:var(--f-body);font-style:italic;font-weight:900;letter-spacing:-.02em;
    color:#1A1F71 /* logo Visa - firemna farba tretej strany, nepatri do palety */;font-size:17px}

  /* ===== Footer ===== */
  footer.site{background:var(--dark);color:var(--on-dark);padding:124px 0 30px}
  footer .cols{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.35fr;gap:32px;margin-bottom:42px}
  .foot-cta{color:var(--red)!important;font-weight:800;white-space:nowrap}
  .foot-cta:hover{color:var(--c-white)!important}
  /* kontaktný stĺpec s ikonami */
  .contact-list li{display:flex;gap:11px;align-items:flex-start}
  .contact-list li>div{white-space:nowrap}
  .contact-list svg{flex:none;color:var(--red);margin-top:2px}
  .contact-list small{display:block;font-size:12px;color:var(--on-dark-2);margin-top:2px;white-space:nowrap}
  .contact-list a{font-weight:700;color:var(--c-white)}
  footer h4{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.05em;
    color:var(--c-white);font-size:16px;margin:0 0 16px;display:flex;align-items:center;gap:10px}
  footer h4::before{content:"";width:18px;height:2px;background:var(--red);flex:none}
  footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:14px}
  footer a:hover{color:var(--red)}
  footer .foot-logo{margin-bottom:14px}
  .foot-claim{font-family:var(--f-display);font-weight:800;font-style:italic;text-transform:uppercase;
    color:var(--c-white);font-size:15px;letter-spacing:.02em;margin:14px 0 16px}
  .fsoc{display:flex;gap:10px;margin-top:4px}
  .fsoc a{width:38px;height:38px;border:1px solid var(--dark-2);border-radius:50%;display:flex;
    align-items:center;justify-content:center;color:var(--c-white);transition:border-color .15s,background .15s}
  .fsoc a:hover{border-color:var(--red);background:var(--red);color:var(--c-white)}
  footer .bottom{border-top:1px solid var(--dark-2);padding-top:22px;display:flex;
    justify-content:space-between;gap:16px;font-size:13px;flex-wrap:wrap;color:var(--on-dark-2)}

  /* ===== Hamburger + mobilné off-canvas menu ===== */
  .burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-6px;
    border:none;background:transparent;color:var(--ink);cursor:pointer;flex:none}
  .mob-overlay{position:fixed;inset:0;background:color-mix(in srgb, var(--c-dark) 50%, transparent);opacity:0;visibility:hidden;transition:opacity .25s;z-index:200}
  .mobmenu{position:fixed;top:0;left:0;bottom:0;width:88%;max-width:380px;background:var(--c-white);z-index:201;
    transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto}
  body.mob-open{overflow:hidden}
  body.mob-open .mob-overlay{opacity:1;visibility:visible}
  body.mob-open .mobmenu{transform:none}
  .mobmenu-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--c-white);z-index:2}
  .mobmenu-head img{height:34px;width:auto}
  .mob-close{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--c-white);cursor:pointer;font-size:17px;color:var(--ink);display:flex;align-items:center;justify-content:center}
  .mobmenu-search{padding:14px 18px;border-bottom:1px solid var(--line)}
  .mobmenu-search input{width:100%;height:46px;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:0 18px;font-size:15px;background:var(--paper);outline:none}
  .mobnav{padding:2px 0}
  .macc>.macc-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 18px;background:transparent;border:none;border-bottom:1px solid var(--line);text-align:left;
    font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:16px;letter-spacing:.02em;color:var(--ink);cursor:pointer}
  .macc>.macc-h .pm{color:var(--red);font-size:24px;font-weight:400;transition:transform .2s;line-height:1;flex:none}
  .macc.open>.macc-h .pm{transform:rotate(45deg)}
  .macc-body{display:none;background:var(--paper);padding:2px 0 8px}
  .macc.open .macc-body{display:block}
  .macc-body a{display:flex;align-items:center;justify-content:space-between;padding:12px 26px;font-size:15px;font-weight:600;color:var(--ink-2);border-bottom:1px solid color-mix(in srgb, var(--c-line) 55%, transparent)}
  .macc-body a:last-child{border-bottom:none}
  .macc-body a.mchild{padding-left:40px;font-size:13.5px;color:var(--ink-2);font-weight:600}
  .macc-body a.mchild::before{content:"›";color:var(--red);font-weight:800;margin-right:8px}
  .macc-body a .ar{color:var(--muted)}
  .macc-solo{display:flex;align-items:center;gap:9px;padding:16px 18px;border-bottom:1px solid var(--line);
    font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:16px;color:var(--red)}
  .macc-solo .bi{color:var(--red)}
  .mobmenu-foot{margin-top:auto;padding:16px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px;background:var(--paper)}
  /* Riadky v pate mobilneho menu su odkazy, nie text. Vyska 44 px = velkost,
     ktoru sa da spolahlivo trafit prstom (odporucanie Apple aj Google). */
  .mobmenu-foot .mf-row{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);
    font-size:15px;min-height:44px;text-decoration:none}
  .mobmenu-foot .mf-row:hover{color:var(--red)}
  .mobmenu-foot .flag{width:24px;height:17px}

  @media(max-width:1080px){
    nav.main{display:none}
    .burger{display:flex}
    .head-main .wrap{height:auto;flex-wrap:wrap;gap:12px 14px;padding-top:12px;padding-bottom:12px}
    .logo{margin-right:auto}
    .logo img{height:42px}
    .search{order:3;flex-basis:100%;max-width:none}
    .head-actions{gap:16px}
    .head-actions .langsel,.head-actions .act:first-of-type{display:none}
    .cat{flex-basis:190px;width:190px}
  }
  @media(max-width:980px){
    .hero .wrap{grid-template-columns:1fr;gap:28px}
    .hero-media{order:-1;max-width:440px;margin:0 auto;width:100%}
    .herobanners{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
    .bn-main{grid-column:1;grid-row:auto}
    /* mriezka je na .bn-slide (posuvny banner), nie na .bn-main - na mobile pod seba */
    .bn-slide{grid-template-columns:1fr}
    .bn-main .media{border-left:none;border-top:1px solid var(--line);order:-1;height:240px}
    .bn-slide[data-layout="full"] .media{position:absolute;inset:0;height:auto;order:0;border-top:none}
    .bn-slide[data-layout="full"] .txt{max-width:none}
    .bn-slide[data-layout="split-rev"] .media{border-right:none;border-top:1px solid var(--line)}
    .bn-main .txt{padding:28px 28px 46px}
    .bn-nav{width:34px;height:34px}
    .bn-nav.prev{left:8px} .bn-nav.next{right:8px}
    .bn-dots{left:28px;bottom:16px}
    .bnr{height:200px}
    .usp .wrap{flex-wrap:wrap;gap:0 8px}
    .usp .item{flex:1 1 46%;padding:12px 0}
    .usp .t,.usp .s{white-space:normal}
    .grid4{grid-template-columns:repeat(2,1fr)}
    .bundle{grid-template-columns:1fr}
    .bundle .media{border-right:none;border-bottom:1px solid var(--line)}
    .b2b .wrap{grid-template-columns:1fr}
    .rev-grid{grid-template-columns:1fr}
    /* minmax(0,1fr) - inak grid stlpec nesmie byt uzsi nez najdlhsie slovo a pateka do sirky */
    footer .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    footer .cols>*{min-width:0}
    footer .cols a,footer .cols li{overflow-wrap:anywhere}
    .contact-list li>div,.contact-list small{white-space:normal}
    .about .wrap{padding:40px 24px}
    
    .nl{grid-template-columns:1fr;padding:32px 24px;gap:24px}
    .nl-row{flex-direction:column}
    .nl-btn{width:100%;justify-content:center}
    .ig{grid-template-columns:repeat(3,1fr)}
    .b2b-intro{white-space:normal;font-size:16px!important}
    .b2b-stats{grid-template-columns:1fr 1fr;gap:20px 0;margin-top:26px;padding-top:24px;max-width:none}
    .b2b-stats>div{padding-left:16px;border-left-width:3px}
    .b2b-stats span{white-space:normal;font-size:11.5px}
    .sec-head{flex-wrap:wrap}
  }
  @media(max-width:640px){ .revcard{flex-basis:100%} .rev-nav.prev{left:4px} .rev-nav.next{right:4px} }
  @media(max-width:540px){ .cats,.grid4{grid-template-columns:1fr 1fr};.head-actions .act small{display:none}
    footer .cols{grid-template-columns:minmax(0,1fr)} }
  @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== z kategoria.html ===== */
/* ===== Kategória - page CSS ===== */
  .crumbs{font-size:13px;color:var(--ink-2);padding:16px 0 0;font-weight:600}
  .crumbs a{color:var(--ink-2)}
  .crumbs a:hover{color:var(--red)}
  .crumbs .sep{margin:0 7px;color:var(--line)}
  .cat-head{padding:14px 0 6px}
  .cat-head h1{font-size:clamp(30px,3.8vw,46px);color:var(--ink)}
  .cat-head .sub{color:var(--ink-2);font-size:15.5px;margin:10px 0 0;max-width:70ch;line-height:1.6}
  /* podkategórie - posuvný riadok chipov s náhľadmi */
  .subcats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:18px 0 4px}
  /* karty podkategorii - typografia aj tony zhodne s mega-menu (.msub-main) */
  .subcats a{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--line);
    border-radius:var(--r-sm);padding:10px 12px;font-weight:800;font-size:15px;line-height:1.15;letter-spacing:.005em;
    color:var(--ink);transition:background .15s,border-color .15s,color .15s;min-height:74px}
  .subcats a::after{content:"›";margin-left:auto;color:var(--muted);font-size:18px;font-weight:800;flex:none;
    transition:color .15s}
  .subcats a:hover{background:color-mix(in srgb, var(--c-red) 6%, transparent);border-color:color-mix(in srgb, var(--c-red) 18%, transparent);color:var(--red)}
  .subcats a:hover::after{color:var(--red)}
  /* text v spane s min-width:0 - inak flex nezuzi bunku pod najdlhsie slovo a karta pretecie na mobile */
  .subcats a span{min-width:0;overflow-wrap:anywhere}
  .subcats img{width:52px;height:52px;border-radius:var(--r-sm);object-fit:contain;background:var(--paper);
    border:1px solid var(--line);padding:6px;flex:none;transition:background .15s,border-color .15s}
  .subcats a:hover img{background:var(--c-white);border-color:color-mix(in srgb, var(--c-red) 40%, transparent)}
  /* layout: sidebar + grid */
  .cat-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;padding:22px 0 64px;align-items:start}
  .fside{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:20px}
  .fgroup{padding:14px 0;border-top:1px solid var(--line)}
  .fgroup:first-child{padding-top:0;border-top:none}
  .fgroup h4{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:15px;
    letter-spacing:.05em;color:var(--ink);margin:0 0 11px;display:flex;align-items:center;gap:9px}
  .fgroup h4::before{content:"";width:16px;height:2px;background:var(--red);flex:none}
  .fgroup label{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink);font-weight:700;
    padding:7px 9px;margin:0 -9px;border-radius:var(--r-sm);cursor:pointer;line-height:1.25;
    transition:background .15s,color .15s}
  .fgroup label:hover{background:color-mix(in srgb, var(--c-red) 6%, transparent);color:var(--red)}
  .fgroup label:has(input:checked){color:var(--red)}
  .fgroup input[type="checkbox"]{width:18px;height:18px;accent-color:var(--red);flex:none;cursor:pointer}
  .fcnt{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink-2)}
  .fgroup label:hover .fcnt{color:var(--red)}
  .rs-vals{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px}
  .rs-track{position:relative;height:4px;background:var(--line);border-radius:var(--r-pill);margin:0 9px 6px}
  .rs-fill{position:absolute;top:0;bottom:0;background:var(--red);border-radius:var(--r-pill)}
  .rs-track input[type="range"]{position:absolute;left:-9px;right:-9px;top:-7px;width:calc(100% + 18px);
    height:18px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
  .rs-track input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;
    border-radius:50%;background:var(--c-white);border:3.5px solid var(--red);cursor:pointer;pointer-events:auto;
    box-shadow:0 1px 4px color-mix(in srgb, var(--c-ink) 20%, transparent)}
  .rs-track input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--c-white);
    border:3.5px solid var(--red);cursor:pointer;pointer-events:auto;box-shadow:0 1px 4px color-mix(in srgb, var(--c-ink) 20%, transparent)}
  .fclear{width:100%;margin-top:14px;background:none;border:1.5px solid var(--line);border-radius:var(--r-pill);
    padding:9px;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:12px;
    letter-spacing:.05em;color:var(--ink-2);cursor:pointer;transition:border-color .15s,color .15s}
  .fclear:hover{border-color:var(--red);color:var(--red)}
  .fcol{position:sticky;top:14px;display:grid;gap:14px;align-self:start}
  /* Poradenska karta: fotka VYSKAKUJE z hornej hrany karty (polovica von, polovica dnu).
     Karta ostava siva (paper), fotka ma biely ramcek a tien, aby sa od sivej oddelila.
     Vyrez fotky = hlava a ramena, nie cela postava - v kruhu 96 px by bola necitatelna. */
  .fhelp{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
    padding:66px 20px 22px;margin-top:52px;text-align:center}
  .fh-photo{position:absolute;top:-48px;left:50%;transform:translateX(-50%);
    width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center 30%;
    border:4px solid var(--c-white);box-shadow:0 8px 22px color-mix(in srgb, var(--c-ink) 18%, transparent);
    background:var(--c-white)}
  .fhelp b{display:block;font-family:var(--f-display);font-weight:800;text-transform:uppercase;
    font-size:14px;letter-spacing:.03em;color:var(--ink);margin-bottom:7px}
  .fhelp p{margin:0 0 12px;font-size:13px;color:var(--ink-2);line-height:1.5}
  .fh-line{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;
    font-weight:800;color:var(--ink);padding:4px 0}
  .fh-line svg{color:var(--red);flex:none}
  .fh-line:hover{color:var(--red)}
  .fhelp span{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-top:8px}
  /* toolbar nad mriežkou */
  .toolbar{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
  .sortbar{display:flex;gap:8px;flex-wrap:wrap}
  .sbtn{border:1.5px solid var(--line);background:var(--white);border-radius:var(--r-pill);padding:9px 16px;
    font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:12.5px;letter-spacing:.04em;
    color:var(--ink-2);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
  .sbtn:hover{background:color-mix(in srgb, var(--c-red) 6%, transparent);border-color:color-mix(in srgb, var(--c-red) 35%, transparent);color:var(--red)}
  .sbtn.on{background:var(--red);border-color:var(--red);color:var(--c-white)}
  .sbtn.on:hover{background:var(--red-dark);border-color:var(--red-dark)}
  .pcount{font-size:12.5px;color:var(--ink-2);font-weight:600;margin-left:auto;white-space:nowrap}
  .fchips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
  .fchips:empty{display:none}
  .fchip{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:var(--c-white);border-radius:var(--r-pill);
    padding:7px 13px;font-size:12.5px;font-weight:700;cursor:pointer}
  .fchip:hover{background:var(--red)}
  .fchip::after{content:"×";font-size:14px}
  .cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .card.hidden{display:none}
  .noresults{display:none;text-align:center;padding:56px 20px 60px;background:var(--paper);border-radius:var(--r-card)}
  .noresults.on{display:block}
  .noresults svg{color:var(--red);margin-bottom:10px}
  .noresults h3{font-size:22px;margin:0 0 6px}
  .noresults p{color:var(--ink-2);margin:0 0 20px;font-size:15px}
  .nores-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  /* kategoria bez produktov (napr. novy trh, este neimportovane): namiesto prazdnej mriezky odkazy dalej */
  .kat-empty{display:none;text-align:center;padding:56px 20px 60px;background:var(--paper);border-radius:var(--r-card)}
  body.prazdna .kat-empty{display:block}
  body.prazdna .subcats,body.prazdna .cat-layout{display:none}
  .kat-empty svg{color:var(--red);margin-bottom:10px}
  .kat-empty h2{font-size:26px;margin:0 0 6px}
  .kat-empty p{color:var(--ink-2);margin:0 auto 22px;max-width:52ch;font-size:15px}
  .kat-empty .cats{margin:0 auto;max-width:900px;text-align:left}
  /* stránkovanie */
  .pager{display:flex;gap:8px;justify-content:center;margin-top:30px}
  .pager a{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;
    justify-content:center;font-family:var(--f-display);font-weight:800;font-size:14px;color:var(--ink);
    transition:border-color .15s,color .15s}
  .pager a:hover{border-color:var(--red);color:var(--red)}
  .pager a.on{background:var(--red);border-color:var(--red);color:var(--c-white)}
  /* SEO text */
  .seotext{max-width:820px;color:var(--ink-2);font-size:14.5px;line-height:1.65}
  .seotext .eyebrow{margin-bottom:12px}
  .seotext h2{font-size:22px;color:var(--ink);margin:0 0 12px}
  .seotext p{margin:0 0 12px}
  /* mobil */
  .fopen{display:none}
  .fs-head,.fs-foot,.f-ov{display:none}
  @media(max-width:980px){
    .cat-layout{grid-template-columns:minmax(0,1fr)}
    .fcol{position:static;display:block}
    .fhelp{display:none}
    .fside{display:none;position:fixed;inset:auto 0 0 0;top:auto;max-height:88vh;overflow:auto;z-index:202;padding:0 18px 0;
      border-radius:var(--r-card) var(--r-card) 0 0;box-shadow:0 -14px 40px color-mix(in srgb, var(--c-dark) 25%, transparent)}
    body.f-open .fside{display:block}
    body.f-open{overflow:hidden}
    .f-ov{display:block;position:fixed;inset:0;background:color-mix(in srgb, var(--c-dark) 50%, transparent);z-index:201;opacity:0;visibility:hidden;transition:opacity .2s}
    body.f-open .f-ov{opacity:1;visibility:visible}
    .fs-head{display:flex;align-items:center;justify-content:space-between;padding:14px 0 12px;border-bottom:1px solid var(--line);
      position:sticky;top:0;background:var(--white);z-index:2}
    .fs-head b{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:16px;letter-spacing:.03em}
    .fs-x{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--white);font-size:20px;line-height:1;cursor:pointer;color:var(--ink)}
    .fs-x:hover{background:var(--red);border-color:var(--red);color:var(--c-white)}
    .fs-foot{display:block;position:sticky;bottom:0;background:var(--white);padding:12px 0 calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);margin-top:12px}
    .fs-foot .btn{width:100%;justify-content:center}
    .fopen .fn:not(:empty){background:var(--red);color:var(--c-white);border-radius:var(--r-pill);font-size:11px;padding:2px 7px;margin-left:2px}
    .fopen{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);border-radius:var(--r-pill);
      padding:9px 16px;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:12.5px;
      letter-spacing:.05em;color:var(--ink);background:var(--white);cursor:pointer}
    .cat-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .subcats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .subcats a{font-size:13px;gap:10px;padding:9px 10px;hyphens:manual;overflow-wrap:normal}
    .subcats a{min-width:0}
  }

/* ===== z produkt.html ===== */
/* ===== Produkt - page CSS ===== */
  .crumbs{font-size:13px;color:var(--ink-2);padding:16px 0 0;font-weight:600}
  .crumbs a{color:var(--ink-2)}
  .crumbs a:hover{color:var(--red)}
  .crumbs .sep{margin:0 7px;color:var(--line)}

  /* ===== Above the fold: galéria + info ===== */
  .pd{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:22px 0 44px;align-items:start}
  .pd-gallery{position:sticky;top:142px /* v teme 104px, v prototype +38px za PROTOTYP pas */}
  .pd-main{position:relative;background:var(--white);border:1px solid var(--line);aspect-ratio:1/1;
    display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in}
  .pd-main img{width:100%;height:100%;object-fit:contain;padding:36px;transition:transform .35s}
  .pd-main:hover img{transform:scale(1.06)}
  .pd-main .zoomhint{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:6px;
    background:color-mix(in srgb, var(--c-dark) 78%, transparent);color:var(--c-white);font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:var(--r-pill)}
  .pd-badge{position:absolute;top:16px;left:16px;z-index:1;background:var(--red);color:var(--c-white);font-family:var(--f-display);
    font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.05em;padding:6px 13px;border-radius:var(--r-pill)}
  /* Pas nahladov. Styri sa zmestia, zvysok sa posuva. Sipky sa objavia SAMY,
     len ked je fotiek viac nez sa zmesti - pri troch tam nezavadzaju. */
  .pd-gal-thumbs{position:relative;margin-top:10px}
  .pd-thumbs{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;
    scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}
  .pd-thumbs::-webkit-scrollbar{display:none}
  .pd-thumbs button{flex:0 0 calc((100% - 30px) / 4);scroll-snap-align:start;
    background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0;
    aspect-ratio:1/1;cursor:pointer;overflow:hidden;transition:border-color .15s}
  .pd-thumbs button img{width:100%;height:100%;object-fit:contain;padding:8px}
  .pd-thumbs button.on{border-color:var(--red)}
  .pd-thumbs button:hover{border-color:var(--ink)}
  /* vzhlad dedi zo spolocnej definicie sipiek vyssie, tu uz len velkost a skrytie */
  .pd-tnav{width:32px;height:32px;z-index:2;display:none}
  .pd-gal-thumbs.je-viac .pd-tnav{display:flex}
  .pd-tnav.prev{left:-4px} .pd-tnav.next{right:-4px}
  /* pocitadlo na hlavnej fotke - clovek hned vie, kolko fotiek produkt ma */
  .pd-count{position:absolute;left:14px;bottom:14px;z-index:2;
    background:color-mix(in srgb, var(--c-dark) 72%, transparent);color:var(--c-white);
    border-radius:var(--r-pill);padding:5px 12px;font-size:12px;font-weight:700;
    letter-spacing:.03em}

  /* ===== STAVY PRODUKTU =====
     Jeden buy box, data-stav na .pd-info prepina, co je vidiet. V teme to rozhoduje Woo:
     stock_status (instock / outofstock / onbackorder), product_type (variable), a vlastne
     pole "cena na dopyt". Ziadna sekcia nie je duplikovana - meni sa len to, co sa lisi. */
  .pd-info [data-len]{display:none}
  .pd-badge[hidden]{display:none}
  .pd-info[data-stav="skladom"] [data-len~="skladom"],
  .pd-info[data-stav="vypredane"] [data-len~="vypredane"],
  .pd-info[data-stav="predobjednavka"] [data-len~="predobjednavka"],
  .pd-info[data-stav="varianty"] [data-len~="varianty"],
  .pd-info[data-stav="dopyt"] [data-len~="dopyt"]{display:revert}
  .pd-info [data-len].pd-buyrow{display:none}
  .pd-info[data-stav="skladom"] .pd-buyrow[data-len],.pd-info[data-stav="varianty"] .pd-buyrow[data-len],
  .pd-info[data-stav="predobjednavka"] .pd-buyrow[data-len]{display:flex}
  .pd-info[data-stav="skladom"] .pd-avail[data-len~="skladom"],
  .pd-info[data-stav="varianty"] .pd-avail[data-len~="varianty"],
  .pd-info[data-stav="vypredane"] .pd-avail[data-len~="vypredane"],
  .pd-info[data-stav="predobjednavka"] .pd-avail[data-len~="predobjednavka"]{display:flex}

  /* dostupnost - farby podla stavu */
  .pd-avail.out{color:var(--c-grey)} .pd-avail.out .dot{background:var(--c-grey)}
  .pd-avail.pre{color:var(--c-blue)} .pd-avail.pre .dot{background:var(--c-blue)}
  .pd-avail.pre b{color:var(--c-blue)}
  .pd-price .pre-save{background:var(--c-blue)}

  /* vypredane: strazit dostupnost namiesto CTA */
  .pd-watch{margin-top:14px;padding:18px 20px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line)}
  .pd-watch b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}
  .pd-watch p{margin:0 0 12px;font-size:13.5px;color:var(--ink-2)}
  .pd-watch .row{display:flex;gap:8px}
  .pd-watch input{flex:1;min-width:0;height:46px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 14px;font-family:var(--f-body);font-size:15px}
  .pd-watch input:focus{outline:none;border-color:var(--ink)}
  .pd-watch .btn{padding:0 20px;font-size:14px;white-space:nowrap}
  .pd-watch .alt{margin:12px 0 0;font-size:13px;color:var(--ink-2)}
  .pd-watch .alt a{color:var(--ink);font-weight:700}
  .pd-watch.done .row,.pd-watch.done p{display:none}
  .pd-watch .ok{display:none;font-size:14px;color:var(--c-green);font-weight:700}
  .pd-watch.done .ok{display:block}

  /* predobjednavka: info pas */
  .pd-pre{margin-top:12px;padding:12px 16px;border-radius:var(--r-sm);background:var(--c-blue-soft);border:1px solid color-mix(in srgb, var(--c-blue) 25%, transparent);
    font-size:13.5px;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
  .pd-pre svg{color:var(--c-blue);flex:none;margin-top:2px}
  .pd-pre b{color:var(--c-blue)}

  /* varianty: pilulky s cenou a dostupnostou */
  .pd-var{margin:14px 0 4px}
  .pd-var .lbl{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;
    font-size:12.5px;color:var(--ink);margin-bottom:9px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .pd-var .lbl span{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-weight:600;font-size:13px;color:var(--ink-2)}
  /* nic nevybrate: vyzva cervenou, CTA vypnute (Woo standard) */
  .pd-var.nevybrate .lbl span{color:var(--red);font-weight:700}
  /* len v stave varianty - v ostatnych stavoch je .pd-var skryty, ale v HTML zostava */
  .pd-info[data-stav="varianty"]:has(.pd-var.nevybrate) .pd-addcart{opacity:.5;pointer-events:none}
  .pd-var .opts{display:flex;gap:8px;flex-wrap:wrap}
  .pd-var .v{border:1.5px solid var(--line);border-radius:var(--r-pill);padding:9px 16px;cursor:pointer;background:var(--c-white);
    display:flex;flex-direction:column;align-items:center;gap:1px;min-width:92px;transition:border-color .15s,background .15s}
  .pd-var .v b{font-size:14px;color:var(--ink)}
  .pd-var .v small{font-size:11.5px;color:var(--ink-2)}
  .pd-var .v:hover{border-color:var(--ink)}
  .pd-var .v.on{border-color:var(--red);background:color-mix(in srgb, var(--c-red) 4%, transparent)}
  .pd-var .v.out{opacity:.5;text-decoration:line-through;cursor:not-allowed}
  .pd-var .v.out small{text-decoration:none}

  /* na dopyt: cena nahradena textom, CTA = dopyt */
  .pd-quote{margin-top:6px}
  .pd-quote .big{font-family:var(--f-display);font-weight:800;font-size:28px;color:var(--ink);line-height:1.1}
  .pd-quote .big small{display:block;font-family:var(--f-body);font-weight:500;font-size:13.5px;color:var(--ink-2);margin-top:4px}
  .pd-quote ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink)}
  .pd-quote li{display:flex;gap:8px;align-items:center}
  .pd-quote li svg{color:var(--c-green);flex:none}
  .pd-quote .btn{margin-top:16px}

  /* ukazkova lista prepinaca stavov - LEN prototyp */
  .pd-stavy{background:var(--c-ink);color:var(--c-white);padding:10px 0}
  .pd-stavy .wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .pd-stavy strong{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.06em;margin-right:4px}
  .pd-stavy button{font-family:var(--f-body);font-weight:700;font-size:12.5px;cursor:pointer;border:1.5px solid color-mix(in srgb, var(--c-white) 35%, transparent);
    background:transparent;color:var(--c-white);border-radius:var(--r-pill);padding:6px 13px}
  .pd-stavy button.on{background:var(--c-red);border-color:var(--c-red)}
  .pd-stavy span{font-size:12px;color:var(--on-dark);margin-left:auto}

  .pd-info{padding-top:4px}
  .pd-cat{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
  .pd-cat a{color:var(--ink-2)}
  .pd-cat a:hover{color:var(--red)}
  .pd-title{font-size:clamp(26px,3vw,38px);color:var(--ink);margin:10px 0 0}
  .pd-rating{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;color:var(--ink-2);font-weight:600}
  .pd-rating .stars{font-size:15px}
  .pd-rating a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
  .pd-rating a:hover{color:var(--red)}
  .pd-benefit{color:var(--ink-2);font-size:16.5px;line-height:1.55;margin:16px 0 0;max-width:46ch}
  .pd-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:22px 0 0}
  .pd-price .now{font-family:var(--f-display);font-weight:800;font-size:42px;color:var(--ink);line-height:1}
  .pd-price .was{text-decoration:line-through;color:var(--muted);font-size:19px}
  .pd-price .save{background:var(--red);color:var(--c-white);font-weight:800;font-size:12.5px;padding:5px 11px;
    font-family:var(--f-display);letter-spacing:.04em;border-radius:var(--r-pill)}
  .pd-vat{font-size:13px;color:var(--ink-2);margin-top:8px}
  .pd-vat-net{font-size:13px;color:var(--ink-2);margin-top:4px}
  .pd-vat-net b{color:var(--ink);font-weight:800}


  .pd-avail{display:flex;align-items:center;gap:8px;margin:22px 0 0;font-size:14.5px;font-weight:700;color:var(--ok)}
  .pd-avail .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
  .pd-buyrow{display:flex;gap:12px;margin-top:18px}
  .pd-qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);overflow:hidden;flex:none}
  .pd-qty button{width:44px;height:56px;border:none;background:var(--white);font-size:18px;font-weight:800;
    color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
  .pd-qty button:hover{background:var(--paper);color:var(--red)}
  .pd-qty input{width:44px;height:56px;border:none;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);
    text-align:center;font-family:var(--f-display);font-weight:800;font-size:16px;color:var(--ink)}
  .pd-addcart{flex:1;justify-content:center;font-size:16px;padding:0 22px;height:56px}
  .pd-trust{display:grid;gap:10px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
  .pd-trust div{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink-2)}
  .pd-trust svg{color:var(--ok);flex:none}
  .pd-b2b-bridge{margin-top:22px;background:var(--c-white);border:1.5px solid var(--line);border-left:4px solid var(--red);
    border-radius:var(--r-sm);padding:16px 18px;display:flex;align-items:flex-start;gap:12px}
  .pd-b2b-bridge svg{color:var(--red);flex:none;margin-top:2px}
  .pd-b2b-bridge .q{font-size:14px;color:var(--ink);font-weight:700;line-height:1.4;margin-bottom:6px}
  .pd-b2b-bridge a{display:inline-flex;align-items:center;gap:5px;color:var(--red);font-weight:800;
    font-size:14px;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
  .pd-b2b-bridge a:hover{color:var(--red)}

  /* mobilná sticky lišta */
  .pd-sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--c-white);
    border-top:1px solid var(--line);box-shadow:0 -10px 30px color-mix(in srgb, var(--c-dark) 12%, transparent);padding:10px 16px;
    align-items:center;gap:12px}
  .pd-sticky .p{font-family:var(--f-display);font-weight:800;font-size:19px;color:var(--ink);white-space:nowrap}
  .pd-sticky .btn{flex:1;justify-content:center;height:48px}

  /* ===== Sekcie pod fold ===== */

  /* Popis: benefity -> parametre */
  .pd-benefits{display:grid;gap:14px;margin:0 0 8px}
  .pd-benefits li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-2);line-height:1.55}
  .pd-benefits svg{flex:none;color:var(--red);margin-top:3px}
  .pd-benefits b{color:var(--ink)}
  .spec-table{width:100%;border-collapse:collapse;margin-top:8px}
  .spec-table tr{border-bottom:1px solid var(--line)}
  .spec-table tr:first-child{border-top:1px solid var(--line)}
  .spec-table th,.spec-table td{padding:13px 4px;text-align:left;font-size:14.5px}
  .spec-table th{color:var(--ink-2);font-weight:600;width:46%}
  .spec-table td{color:var(--ink);font-weight:700}
  .pd-descgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

  /* Často kupované spolu (FBT) */
  .fbt{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:32px;
    display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:center}
  /* stretch (nie center) - karty su rovnako vysoke, takze obrazky sa zarovnaju hore
     a ceny dole aj ked ma niektory produkt dlhsi nazov na 2-3 riadky */
  .fbt-items{display:flex;align-items:stretch;gap:20px;flex-wrap:wrap}
  .fbt-card{width:128px;text-align:center;display:flex}
  .fbt-card label{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;flex:1}
  .fbt-card .th{width:120px;height:120px;background:var(--c-white);border:1.5px solid var(--line);border-radius:var(--r-sm);
    display:flex;align-items:center;justify-content:center;transition:border-color .15s;flex:none}
  .fbt-card input:checked ~ .th{border-color:var(--red)}
  .fbt-card .th img{width:100%;height:100%;object-fit:contain;padding:14px}
  .fbt-card .nm{font-size:13px;font-weight:700;color:var(--ink);line-height:1.3;min-height:33px}
  /* margin-top:auto pritlaci cenu na spodok karty -> ceny v riadku su na jednej linke */
  .fbt-card .pr{font-size:14.5px;font-weight:800;color:var(--ink);margin-top:auto;padding-top:2px}
  .fbt-card input{accent-color:var(--red);width:17px;height:17px;flex:none}
  .fbt-plus{font-family:var(--f-display);font-weight:800;font-size:24px;color:var(--ink-2);flex:none;
    align-self:center}
  /* "+" ktore by po zalomeni skoncilo na zaciatku riadku (dopocitane v JS) */
  .fbt-plus.hidden{visibility:hidden;width:0;margin:0}
  /* cenovy sumar ako blocek: dva stlpce (label vlavo, suma vpravo), zarovnane na baseline */
  .fbt-side{background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-sm);padding:24px 24px 22px}
  .fbt-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:4px 0}
  .fbt-row span:first-child{font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}
  .fbt-row s{color:var(--muted);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
  .fbt-row-save span:first-child{color:var(--red)}
  /* percento = rovnaky styl ako text "Zlava za set", bez ramceka */
  .fbt-row-save em{font-style:normal;font-size:14px;font-weight:600;color:var(--red);
    margin-left:4px;white-space:nowrap}
  .fbt-row-save b{color:var(--red);font-family:var(--f-display);font-weight:800;font-size:17px;
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .fbt-divider{height:1px;background:var(--line);margin:12px 0}
  .fbt-row-total span:first-child{font-size:15px;font-weight:800;color:var(--ink)}
  .fbt-total{font-family:var(--f-display);font-weight:800;font-size:30px;color:var(--ink);
    line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
  .fbt-vat{text-align:right;font-size:12px;color:var(--ink-2);margin-top:3px}
  /* nudge - jemna vyzva na vyssiu uroven zlavy, nekonkuruje CTA */
  .fbt-nudge{display:flex;align-items:center;gap:7px;margin-top:14px;padding:9px 12px;
    background:color-mix(in srgb, var(--c-red) 7%, transparent);border-radius:var(--r-sm);font-size:12.5px;font-weight:700;
    color:var(--red);line-height:1.35}
  .fbt-nudge::before{content:"+";font-family:var(--f-display);font-weight:800;font-size:15px;flex:none}
  .fbt-nudge:empty{display:none}
  .fbt-side .btn{width:100%;justify-content:center;text-align:center;margin-top:14px}

  /* FAQ akordeon (vizuál) je definovaný v zariadovanie.html/skoly.html - tu sa
     nepoužíva, keďže táto konkrétna tyč FAQ nemá (viď komentár pri sekcii nižšie). */

  /* SEO text */
  .seotext{max-width:820px;color:var(--ink-2);font-size:14.5px;line-height:1.65}
  .seotext .eyebrow{margin-bottom:12px}
  .seotext h2{font-size:22px;color:var(--ink);margin:0 0 12px}
  .seotext p{margin:0 0 12px}

  @media(max-width:980px){
    .pd{grid-template-columns:1fr;gap:26px}
    .pd-gallery{position:static}
    .pd-descgrid{grid-template-columns:1fr;gap:26px}
    .fbt{grid-template-columns:minmax(0,1fr);gap:22px;padding:22px 18px}
    .fbt>*{min-width:0}
    .pd-sticky{display:flex}
    body{padding-bottom:74px}
    .sec-head p.sub[style]{white-space:normal!important}
  }
  @media(max-width:640px){
    .pd-thumbs button{flex-basis:calc((100% - 20px) / 3)}
    .fbt-items{justify-content:center;gap:12px}
    /* na uzkom displeji sa karty zmensia, aby sa zmestili tri vedla seba aj s plusmi */
    .fbt-card{width:96px} .fbt-card .th{width:88px;height:88px}
    .fbt-row span:first-child{white-space:normal}
  }

/* ===== z produkt.html ===== */
/* Lightbox (rovnaký vzor ako realizacie.html) */
  .lb{position:fixed;inset:0;background:color-mix(in srgb, var(--c-dark) 93%, transparent);z-index:150;display:none;align-items:center;justify-content:center}
  .lb.on{display:flex}
  .lb img{max-width:88vw;max-height:82vh;border-radius:var(--r-sm);box-shadow:0 30px 80px color-mix(in srgb, var(--c-dark) 50%, transparent)}
  .lb button{position:absolute;width:46px;height:46px;border-radius:50%;border:1.5px solid color-mix(in srgb, var(--c-white) 40%, transparent);
    background:color-mix(in srgb, var(--c-dark) 50%, transparent);color:var(--c-white);font-size:20px;cursor:pointer;display:flex;align-items:center;
    justify-content:center;transition:border-color .15s,background .15s}
  .lb button:hover{border-color:var(--c-white);background:var(--red)}
  .lb .lb-close{top:18px;right:18px;font-size:24px}

/* ===== z kosik.html ===== */
/* ===== KOSIK - jednokrokovy (kosik + pokladna na jednej stranke) =====
     Postavene podla dat: Baymard 2025 - 70 % opustenych kosikov, top dovody: skryte
     naklady 39 %, pomale dodanie 21 %, nutna registracia 19 %, nedovera 19 %, dlhy formular 22 %.
     Preto: cena dopravy a celkova suma VIDIET STALE (sticky suhrn), ziadna registracia,
     10-12 poli, doprava a platba s cenou aj terminom, dovera pri tlacidle, chyby inline.
     Jednokrokovy funguje LEN pri malom pocte poli a jasnom clenení na sekcie - preto
     su sekcie ocislovane a vizualne oddelene, ale vsetky na jednej stranke bez prepínania.
     PORADIE = poradie Woo Checkout Blocku (Jakub 2026-08-18): 1 tovar, 2 kontakt + dodacia
     adresa (krajina = shipping_country), 3 doprava (pocita sa z adresy), 4 platba. Ziadny prepis. */

  .ko-head{padding:26px 0 4px}
  .ko-head .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .ko-head h1{font-size:clamp(28px,3.4vw,40px)}
  /* spat do obchodu - bez odkazu ludia klikaju "spat" v prehliadaci a stracaju stav */
  .ko-head .back{font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
  .ko-head .back:hover{color:var(--red)}
  .ko-head .back svg{transition:transform .15s}
  .ko-head .back:hover svg{transform:translateX(-3px)}

  /* dva stlpce: formular vlavo, sticky suhrn vpravo */
  .ko{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start;padding:14px 0 60px}
  .ko-main{min-width:0;display:flex;flex-direction:column;gap:14px}
  /* top = vyska hlavicky; v teme 110px, v prototype +38px za cierny PROTOTYP pas */
  .ko-side{position:sticky;top:150px}

  /* sekcia = biela karta s cislom */
  .ks{background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px 20px}
  .ks-h{display:flex;align-items:center;gap:12px;margin:0 0 14px}
  .ks-h .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--c-white);
    font-family:var(--f-display);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
  .ks-h h2{font-size:19px;margin:0}
  .ks-h .ks-note{margin-left:auto;font-size:12.5px;color:var(--ink-2);font-weight:600}
  /* --- 1 polozky --- */
  .ki{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0}
  .ki+.ki{border-top:1px solid var(--line)}
  .ki .ph{width:72px;height:72px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
    display:flex;align-items:center;justify-content:center;overflow:hidden}
  .ki .ph img{width:100%;height:100%;object-fit:contain;padding:8px}
  .ki .nm{font-weight:700;font-size:15px;line-height:1.3;color:var(--ink);text-decoration:none;display:block}
  .ki .nm:hover{color:var(--red)}
  .ki .meta{font-size:12.5px;color:var(--ink-2);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
  .ki .meta .ok{color:var(--c-green);font-weight:700}
  .ki .rm{background:none;border:none;color:var(--ink-2);font-size:12.5px;cursor:pointer;padding:0;margin-top:6px;
    text-decoration:underline;text-underline-offset:2px}
  .ki .rm:hover{color:var(--red)}
  .ki .right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
  .ki .pr{font-family:var(--f-display);font-weight:800;font-size:18px;color:var(--ink);white-space:nowrap}
  .ki .pr small{display:block;font-family:var(--f-body);font-weight:500;font-size:11.5px;color:var(--ink-2);text-align:right}
  /* qty stepper - rovnaky ako na produkte */
  .qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);overflow:hidden;height:38px}
  .qty button{width:36px;height:100%;border:none;background:var(--c-white);color:var(--ink);font-size:18px;cursor:pointer;line-height:1}
  .qty button:hover{background:var(--paper);color:var(--red)}
  .qty input{width:40px;height:100%;border:none;text-align:center;font-weight:700;font-size:14px;color:var(--ink);
    -moz-appearance:textfield;padding:0}
  .qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none}
  /* prah dopravy zdarma - najsilnejsi motivator, ktory nic nestoji */
  .ship-bar{margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);background:var(--c-green-soft);border:1px solid color-mix(in srgb, var(--c-green) 25%, transparent);
    font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:10px}
  .ship-bar svg{color:var(--c-green);flex:none}
  .ship-bar b{color:var(--c-green)}
  .ship-bar[hidden]{display:none}
  .ship-bar.chyba{background:var(--c-amber-soft);border-color:color-mix(in srgb, var(--c-amber) 30%, transparent)}
  .ship-bar.chyba svg,.ship-bar.chyba b{color:var(--c-amber)}
  .ship-bar .track{flex:1;height:6px;background:color-mix(in srgb, var(--c-green) 18%, transparent);border-radius:var(--r-pill);overflow:hidden;min-width:60px}
  .ship-bar .track i{display:block;height:100%;background:var(--c-green);border-radius:var(--r-pill);transition:width .3s}
  .ship-bar.chyba .track{background:color-mix(in srgb, var(--c-amber) 18%, transparent)}
  .ship-bar.chyba .track i{background:var(--c-amber)}
  /* kupon - zbaleny, aby "mam kupon?" neposielal ludi hladat kupony na Google (Baymard) */
  .kupon{margin-top:12px}
  .kupon summary{font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px}
  .kupon summary::-webkit-details-marker{display:none}
  .kupon summary::after{content:"+";font-weight:800;color:var(--red)}
  .kupon[open] summary::after{content:"-"}
  .kupon .row{display:flex;gap:8px;margin-top:10px;max-width:360px}
  .kupon input{flex:1;min-width:0}
  .kupon .btn{padding:0 18px;font-size:13px}
  /* stavy kuponu: chyba (neplatny kod) a uplatneny (zeleny stitok s krizikom na zrusenie) */
  .kupon .msg{display:none;font-size:12.5px;font-weight:600;color:var(--red-dark);margin-top:6px}
  .kupon.err .msg{display:block}
  .kupon.err input{border-color:var(--red)}
  .kupon .ok{display:none;align-items:center;gap:8px;margin-top:10px;padding:8px 8px 8px 12px;border-radius:var(--r-pill);
    background:var(--c-green-soft);border:1px solid color-mix(in srgb, var(--c-green) 25%, transparent);font-size:13.5px;color:var(--ink);width:max-content;max-width:100%}
  .kupon .ok b{color:var(--c-green);font-family:var(--f-display);font-weight:800;letter-spacing:.03em}
  .kupon .ok button{width:24px;height:24px;border-radius:50%;border:1px solid color-mix(in srgb, var(--c-green) 35%, transparent);background:var(--c-white);color:var(--ink);cursor:pointer;font-size:14px;line-height:1;padding:0}
  .kupon .ok button:hover{background:var(--red);border-color:var(--red);color:var(--c-white)}
  .kupon.on .row{display:none} .kupon.on .ok{display:inline-flex}
  /* --- formularove polia (spolocne) --- */
  .f-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
  .f-grid .full{grid-column:1 / -1}
  .f{display:flex;flex-direction:column;gap:5px;min-width:0}
  .f label{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:.01em}
  .f label i{font-style:normal;color:var(--red)}
  .f input,.f select,.f textarea,.kupon input{height:46px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 14px;
    font-family:var(--f-body);font-size:15px;color:var(--ink);background:var(--c-white);width:100%;transition:border-color .15s,box-shadow .15s}
  .f textarea{height:auto;min-height:84px;padding:12px 14px;resize:vertical}
  .f input:focus,.f select:focus,.f textarea:focus,.kupon input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-ink) 8%, transparent)}
  .f .hint{font-size:12px;color:var(--ink-2)}
  .f .hint b{color:var(--ink)}
  /* --- vyber krajiny: vlastny zoznam v style menu trhu (biela karta, tien, riadok pri nabehu cerveny).
     Bez vlajok - vlajky patria k jazyku v hlavicke, nie k adresnemu polu. Pod tym ostava naozajstny
     <select> (hodnota formulara, klavesnica, mobil = nativny vyber). V teme = Woo blok krajiny + CSS. --- */
  .csel{position:relative}
  .csel select{position:absolute;inset:0;width:100%;height:46px;opacity:0;pointer-events:none}
  .csel-btn{height:46px;width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 42px 0 14px;background:var(--c-white);
    font-family:var(--f-body);font-size:15px;color:var(--ink);text-align:left;cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s}
  .csel-btn::after{content:"";position:absolute;right:17px;top:calc(50% - 6px);width:8px;height:8px;border-right:2px solid var(--ink);
    border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .15s,border-color .15s}
  .csel-btn:hover::after,.csel.open .csel-btn::after{border-color:var(--red)}
  .csel-btn:hover{border-color:var(--ink)}
  .csel.open .csel-btn{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-ink) 8%, transparent)}
  .csel.open .csel-btn::after{transform:rotate(225deg);top:calc(50% - 2px)}
  .csel-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:var(--c-white);border:1px solid var(--line);
    border-radius:var(--r-sm);box-shadow:0 22px 55px color-mix(in srgb, var(--c-ink) 18%, transparent);padding:7px;margin:0;list-style:none;
    max-height:300px;overflow:auto;display:none}
  .csel.open .csel-list{display:block}
  .csel-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
    font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
  .csel-list li:hover,.csel-list li.akt{background:color-mix(in srgb, var(--c-red) 7%, transparent);color:var(--red)}
  .csel-list li.on{font-weight:800}
  .csel-list li.on::after{content:"";width:7px;height:12px;border-right:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(45deg);margin-right:4px}
  /* hladanie sa ukaze len pri viac nez 8 krajinach (cela EU) */
  .csel-list .hl{padding:4px 4px 8px;display:none}
  .csel-list.vela .hl{display:block}
  .csel-list .hl input{height:38px;font-size:14px}
  @media(max-width:980px){
    /* mobil: nativny vyber (systemove koliesko), vlastny zoznam sa nepouzije */
    .csel select{opacity:0;pointer-events:auto;z-index:2}
    .csel-list{display:none !important}
  }
  /* inline validacia - chyba sa ukaze az po opusteni pola, nie pocas pisania */
  .f.err input,.f.err select{border-color:var(--red)}
  .f .msg{display:none;font-size:12.5px;color:var(--red-dark);font-weight:600}
  .f.err .msg{display:block}
  .f.ok input{border-color:var(--c-green)}
  /* prepinac (firma / ina dodacia adresa / poznamka) */
  .ks-lead{font-size:13.5px;color:var(--ink-2);margin:-6px 0 14px}
  .ks-lead b{color:var(--ink)}
  .ks-login{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
  .ks-login:hover{color:var(--red)}
  .ks-hint{font-size:13px;color:var(--ink-2);margin:0;padding:10px 12px;background:var(--paper);border-radius:var(--r-sm)}
  .tog{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;margin-top:14px;user-select:none}
  .tog input{width:18px;height:18px;accent-color:var(--red);cursor:pointer;flex:none}
  .fold{display:none;margin-top:12px}
  .fold.on{display:block}
  /* poznamka k objednavke - vzdy otvorena, nepovinna */
  .f.pozn{margin-top:16px}
  .f.pozn textarea{min-height:64px}
  .f label .nep{font-weight:500;color:var(--ink-2);text-transform:none;letter-spacing:0;margin-left:4px}

  /* --- doprava a platba: karty s radiom, cenou a terminom --- */
  .opts{display:flex;flex-direction:column;gap:7px}
  .opt{display:grid;grid-template-columns:auto 80px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 16px;
    border:1.5px solid var(--line);border-radius:var(--r-sm);cursor:pointer;background:var(--c-white);transition:border-color .15s,background .15s}
  /* karta bez loga (platby, osobny odber): text ide hned za radio */
  .opt:not(:has(.ic)){grid-template-columns:auto minmax(0,1fr) auto}
  .opt .txt{min-width:0}
  .opt:hover{border-color:var(--ink)}
  .opt.on{border-color:var(--red);background:color-mix(in srgb, var(--c-red) 3%, transparent)}
  .opt input{width:18px;height:18px;accent-color:var(--red);margin:0;flex:none}
  /* logo dopravcu / ikona platby: 56x34 box, biele pozadie s ramcekom, aby farebne loga
     (GLS zlta, Packeta cervena, Raben cervena) nesplyvali s podkladom karty */
  .opt .ic{width:80px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink);
    background:var(--c-white);border:1px solid var(--line);border-radius:8px;overflow:hidden;padding:6px 8px}
  .opt .ic img{max-width:100%;max-height:100%;object-fit:contain;display:block}
  .opt .ic svg{width:24px;height:24px}
  .opt b{display:block;font-size:15px;color:var(--ink);line-height:1.25}
  .opt small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}
  .opt small .fast{color:var(--c-green);font-weight:700}
  .opt .pr{font-family:var(--f-display);font-weight:800;font-size:15px;color:var(--ink);white-space:nowrap}
  .opt .pr.free{color:var(--c-green)}
  /* vyber vydajneho miesta - po zvoleni Packety */
  .pickup{margin-top:10px;padding:14px 16px;border-radius:var(--r-sm);background:var(--paper);border:1px dashed var(--line);
    display:none;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .pickup.on{display:flex}
  .pickup b{font-size:14px;color:var(--ink)}
  .pickup small{display:block;font-size:12.5px;color:var(--ink-2)}
  .pickup.chosen{border-style:solid}
  .pickup.chosen small{color:var(--ok);font-weight:700}
  .pickup .btn{font-size:13px;padding:10px 18px}

  /* --- suhrn (sticky vpravo) --- */
  .sum{background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 22px 20px}
  .sum h2{font-size:19px;margin:0 0 14px}
  .sum .items{display:flex;flex-direction:column;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line);
    max-height:220px;overflow:auto}
  .sum .it{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13.5px}
  .sum .it .ph{width:44px;height:44px;background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden;position:relative}
  .sum .it .ph img{width:100%;height:100%;object-fit:contain;padding:4px}
  .sum .it .ph .q{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);
    background:var(--ink);color:var(--c-white);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
  .sum .it .nm{font-weight:600;color:var(--ink);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .sum .it .pr{font-weight:700;white-space:nowrap}
  .sum .rows{padding:12px 0;display:flex;flex-direction:column;gap:7px;font-size:14px}
  .sum .row{display:flex;justify-content:space-between;gap:12px;color:var(--ink-2)}
  .sum .row[hidden]{display:none}
  .sum .row b{color:var(--ink);font-weight:700}
  .sum .row .free{color:var(--c-green);font-weight:700}
  .sum .row.disc{color:var(--c-green)} .sum .row.disc b{color:var(--c-green)}
  .sum .row.disc span b{font-family:var(--f-display);font-weight:800;letter-spacing:.03em;font-size:12.5px}
  .sum .total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0 6px;border-top:2px solid var(--ink)}
  .sum .total span{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.04em}
  .sum .total b{font-family:var(--f-display);font-weight:800;font-size:28px;color:var(--ink)}
  .sum .vat{font-size:12px;color:var(--ink-2);text-align:right;margin-bottom:14px}
  .sum .btn{width:100%;justify-content:center;font-size:16px;padding:16px 20px}
  .sum .legal{font-size:12px;color:var(--ink-2);line-height:1.5;margin:10px 0 0;text-align:center}
  .sum .legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
  /* dovera pri tlacidle - Baymard: nedovera = 19 % opusteni */
  .trust{margin-top:14px;display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--ink)}
  .trust div{display:flex;align-items:center;gap:8px}
  .trust svg{color:var(--c-green);flex:none}
  /* platobne loga - TIE ISTE ako v patke (.payrow/.pay), len mensie a s ramcekom na bielom */
  .sum .payrow{justify-content:flex-start;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .sum .pay{height:34px;padding:0 12px;border:1px solid var(--line);box-shadow:none}
  .sum .pay svg{transform:scale(.85)}
  .sum .pay .visa{font-size:15px}
  /* pomoc - clovek so zaseknutou pokladnou musi mat kam zavolat */
  .help{margin-top:14px;padding:14px 16px;border-radius:var(--r-sm);background:var(--paper);font-size:13px;color:var(--ink-2);
    display:flex;align-items:center;gap:12px}
  .help img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--c-white)}
  .help b{color:var(--ink);display:block}
  .help a{color:var(--ink);font-weight:700;text-decoration:none}
  .help a:hover{color:var(--red)}

  /* prazdny kosik */
  .empty{text-align:center;padding:60px 20px 70px}
  .empty svg{color:var(--line);margin-bottom:14px}
  .empty h2{font-size:24px}
  .empty p{color:var(--ink-2);margin:8px 0 22px}

  /* mobil: suhrn ide pod formular, ale celkova cena + tlacidlo su sticky dole */
  .m-bar{display:none}
  @media(max-width:980px){
    /* uzavreta pokladna (Baymard): na mobile v kosiku bez vyhladavania - hlavicka je o 60 px nizsia.
       V teme: sablona pokladne bez vyhladavacieho pola. */
    .site .search{display:none}
    .ko{grid-template-columns:minmax(0,1fr);gap:16px}
    .ko-side{position:static}
    /* dlhsia poznamka v hlavicke sekcie ide pod nadpis, nie vedla neho */
    .ks-h{flex-wrap:wrap}
    .ks-h h2{font-size:17px}
    .ks-h .ks-note.wide{flex-basis:100%;margin-left:42px;margin-top:-4px}
    .ki{grid-template-columns:64px minmax(0,1fr);gap:12px}
    .ki .ph{width:64px;height:64px}
    .ki .right{grid-column:2;flex-direction:row;justify-content:space-between;align-items:center}
    .f-grid{grid-template-columns:1fr}
    .opt{grid-template-columns:auto 64px minmax(0,1fr);gap:12px;row-gap:4px;padding:12px 14px}
    .opt .ic{width:64px;height:36px;padding:4px 6px}
    .opt .pr{grid-column:3;justify-self:start}
    .m-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--c-white);border-top:1px solid var(--line);
      padding:10px 16px calc(10px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:12px;
      box-shadow:0 -8px 24px color-mix(in srgb, var(--c-ink) 10%, transparent)}
    .m-bar .t{font-size:11.5px;color:var(--ink-2)}
    .m-bar .t b{display:block;font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--ink)}
    .m-bar .btn{font-size:14px;padding:13px 20px;white-space:nowrap}
    body{padding-bottom:78px}
    body.ck-otvorene .m-bar{transform:translateY(-100%);opacity:0;pointer-events:none}
  }

/* ===== Mapovanie Woo markupu na triedy prototypu (len tema) ===== */
.pd-buyrow form.cart{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%}
.pd-buyrow .quantity{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);overflow:hidden;height:52px}
.pd-buyrow .quantity .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pd-buyrow .quantity button{width:44px;height:100%;border:none;background:var(--white);color:var(--ink);font-size:20px;cursor:pointer;line-height:1}
.pd-buyrow .quantity button:hover{background:var(--paper);color:var(--red)}
.pd-buyrow .quantity input.qty{width:48px;height:100%;border:none;text-align:center;font-weight:800;font-size:15px;color:var(--ink);-moz-appearance:textfield;padding:0;background:var(--white)}
.pd-buyrow .quantity input::-webkit-inner-spin-button,.pd-buyrow .quantity input::-webkit-outer-spin-button{-webkit-appearance:none}
.pd-buyrow .single_add_to_cart_button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:15px;padding:0 26px;height:52px;border-radius:var(--r-pill);background:var(--red);color:var(--c-white);border:1.5px solid var(--red);cursor:pointer;flex:1;transition:background .15s}
.pd-buyrow .single_add_to_cart_button:hover{background:var(--red-dark);border-color:var(--red-dark)}
.pd-buyrow .single_add_to_cart_button.disabled,.pd-buyrow .single_add_to_cart_button:disabled{opacity:.5;cursor:not-allowed}
.pd-buyrow .variations{width:100%;margin:0 0 6px}
.pd-buyrow .variations th,.pd-buyrow .variations td{padding:4px 0;text-align:left;font-size:13.5px}
.pd-buyrow .variations select{height:44px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 12px;font-family:var(--f-body);font-size:15px;color:var(--ink);background:var(--white)}
.pd-buyrow .reset_variations{font-size:12.5px;color:var(--ink-2)}
.pd-buyrow .woocommerce-variation-price{font-family:var(--f-display);font-weight:800;font-size:22px;margin:6px 0}
.pd-buyrow .woocommerce-variation-availability p{margin:0;font-size:13.5px}
.pd-desc ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.pd-desc ul li{position:relative;padding-left:30px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.pd-desc ul li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--c-green-soft)}
.pd-desc ul li::after{content:"";position:absolute;left:5px;top:8px;width:8px;height:5px;border-left:2px solid var(--c-green);border-bottom:2px solid var(--c-green);transform:rotate(-45deg)}
.pd-desc ul li b{color:var(--ink)}
.pd-benefit p{margin:0}
.woocommerce-message,.woocommerce-error,.woocommerce-info{margin:0 0 16px;padding:12px 16px;border-radius:var(--r-sm);background:var(--c-green-soft);border:1px solid color-mix(in srgb, var(--c-green) 25%, transparent);font-size:14px;list-style:none}
.woocommerce-error{background:var(--c-red-soft);border-color:color-mix(in srgb, var(--c-red) 25%, transparent)}

/* ===== Pokladna = Woo Checkout Block v style prototypu kosik.html (biele karty, cislovane sekcie, karty dopravy/platby, sticky suhrn) ===== */
.ko-page{background:var(--paper)}
.ko-page .ko-head{padding:26px 0 8px;align-items:baseline}
.ko-page .ko-head h1{font-size:clamp(28px,3.4vw,40px);margin:0}
.ko-page .ko-head .back{font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none}
.ko-page .ko-head .back:hover{color:var(--red)}
.ko-page .wp-block-woocommerce-checkout{padding:8px 0 60px}
.wc-block-checkout__form{max-width:none}
.wc-block-checkout .wc-block-components-checkout-step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px 20px;margin:0 0 14px}
.wc-block-checkout .wc-block-components-checkout-step__heading{margin:0 0 14px}
.wc-block-checkout .wc-block-components-checkout-step__title{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:.01em;color:var(--ink);margin:0}
.wc-block-checkout .wc-block-components-checkout-step__container::before{display:none}
.wc-block-checkout__form{counter-reset:amrep-step}
.wc-block-checkout .wc-block-components-checkout-step{counter-increment:amrep-step}
.wc-block-checkout .wc-block-components-checkout-step__title::before{content:counter(amrep-step);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--white);font-size:14px;margin-right:12px;vertical-align:middle;position:static}
.wc-block-checkout .wc-block-components-checkout-step__description{font-size:13.5px;color:var(--ink-2);margin:-6px 0 14px}
.wc-block-components-text-input input[type=text],.wc-block-components-text-input input[type=email],.wc-block-components-text-input input[type=tel],.wc-block-components-text-input input[type=number],.wc-block-components-combobox .wc-block-components-combobox-control input,.wc-block-components-textarea textarea{height:46px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 14px;font-family:var(--f-body);font-size:15px;color:var(--ink);background:var(--white);box-shadow:none}
.wc-block-components-textarea textarea{height:auto;min-height:64px;padding:12px 14px}
.wc-block-components-text-input input:focus,.wc-block-components-combobox input:focus,.wc-block-components-textarea textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-ink) 8%, transparent)}
.wc-block-components-text-input label,.wc-block-components-combobox label{font-size:14px;color:var(--ink-2)}
.wc-block-components-text-input.is-active label,.wc-block-components-combobox.is-active label{font-size:11px;font-weight:700;color:var(--ink)}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{border:1.5px solid var(--line);border-radius:4px;width:18px;height:18px}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked{background:var(--red);border-color:var(--red)}
.wc-block-components-checkbox .wc-block-components-checkbox__mark{color:var(--white)}
.wc-block-components-checkbox__label{font-size:14px;font-weight:600;color:var(--ink)}
/* karty dopravy / platby */
.wc-block-components-radio-control .wc-block-components-radio-control__option,.wc-block-components-radio-control-accordion-option{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 16px 12px 46px;margin:0 0 7px;background:var(--white);transition:border-color .15s,background .15s}
.wc-block-components-radio-control .wc-block-components-radio-control__option::after,.wc-block-components-radio-control .wc-block-components-radio-control__option::before{display:none}
.wc-block-components-radio-control__option:hover{border-color:var(--ink)}
.wc-block-components-radio-control__option--checked-option-highlighted,.wc-block-components-radio-control__option:has(input:checked),.wc-block-components-radio-control-accordion-option--checked-option-highlighted{border-color:var(--red)!important;background:color-mix(in srgb, var(--c-red) 3%, transparent)}
.wc-block-components-radio-control__input{left:16px;width:18px;height:18px;border:1.5px solid var(--line)}
.wc-block-components-radio-control__input:checked{border:6px solid var(--red)}
.wc-block-components-radio-control__label,.wc-block-components-radio-control__label-group{font-size:15px;font-weight:700;color:var(--ink)}
.wc-block-components-radio-control__secondary-label{font-family:var(--f-display);font-weight:800;font-size:15px;color:var(--ink)}
.wc-block-components-radio-control__description,.wc-block-components-radio-control__secondary-description{font-size:12.5px;color:var(--ink-2)}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label:has(.wc-block-components-formatted-money-amount:empty),.wc-block-components-radio-control__secondary-label .wc-block-formatted-money-amount{color:var(--ink)}
.wc-block-components-panel__button{font-weight:700;color:var(--ink)}
/* suhrn vpravo */
.wc-block-checkout__sidebar{position:sticky;top:110px}
.wc-block-checkout__sidebar .wc-block-components-order-summary,.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content{background:var(--white)}
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 22px 18px}
.wc-block-components-checkout-order-summary__title{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:19px;color:var(--ink);padding:0 0 12px}
.wc-block-components-order-summary-item__description .wc-block-components-product-name{font-weight:600;color:var(--ink);font-size:13.5px;font-family:var(--f-body);text-transform:none;letter-spacing:0;line-height:1.3}
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description{display:none}
.wc-block-components-order-summary-item__total-price{font-weight:700;color:var(--ink)}
.wc-block-components-order-summary-item__quantity{background:var(--ink);color:var(--white);border:none;font-weight:800;font-family:var(--f-display)}
.wc-block-components-totals-item{font-size:14px;color:var(--ink-2)}
.wc-block-components-totals-item__value{color:var(--ink);font-weight:700}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.04em}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-family:var(--f-display);font-weight:800;font-size:28px;color:var(--ink)}
.wc-block-components-totals-footer-item{border-top:2px solid var(--ink)}
.wc-block-components-totals-wrapper{border-color:var(--line)}
/* tlacidlo objednat = pill, cervene, s povinnostou platby */
.wc-block-components-checkout-place-order-button,.wc-block-components-button.wc-block-components-checkout-place-order-button{width:100%;justify-content:center;font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:16px;padding:16px 20px;border-radius:var(--r-pill);background:var(--red);color:var(--white);border:none;box-shadow:none}
.wc-block-components-checkout-place-order-button:hover{background:var(--red-dark)}
.wc-block-components-checkout-place-order-button:disabled,.wc-block-components-checkout-place-order-button.is-disabled{opacity:.5}
.wc-block-checkout__terms,.wc-block-components-checkout-policies-link{font-size:12px;color:var(--ink-2);text-align:center}
.wc-block-checkout__terms a{color:var(--ink)}
.wc-block-components-checkout-return-to-cart-button{display:none}
.wc-block-components-notice-banner{border-radius:var(--r-sm)}
.wc-block-components-express-payment,.wc-block-components-express-payment-continue-rule{margin-bottom:14px}
.wp-block-woocommerce-empty-cart-block,.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary__button-text{color:var(--ink)}
@media(min-width:900px){.wc-block-checkout__main{width:calc(100% - 412px)}.wc-block-checkout__sidebar{width:380px}}
@media(max-width:899px){.wc-block-checkout__sidebar{position:static}}

/* kosik: pravne checkboxy nad tlacidlom */
.sum .legal-chk{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--ink);margin:0 0 10px;cursor:pointer;text-align:left}
.sum .legal-chk input{width:18px;height:18px;flex:none;accent-color:var(--red);margin-top:1px}
.sum .legal-chk a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.sum .legal-chk i{font-style:normal;color:var(--red)}
.sum #vopMsg{display:none;font-size:12.5px;color:var(--red-dark);font-weight:600;margin:-4px 0 10px}
.sum.vop-err #vopMsg{display:block}
.sum.vop-err .legal-chk:first-of-type input{outline:2px solid var(--red);outline-offset:1px;border-radius:3px}
/* mini-kosik: riadok mnozstvo / cena / odstranit (Store API verzia) */
.mk-it .mk-row{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.mk-it .qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);overflow:hidden;height:32px}
.mk-it .qty button{width:30px;height:100%;border:none;background:var(--white);color:var(--ink);font-size:16px;cursor:pointer}
.mk-it .qty button:hover{background:var(--paper);color:var(--red)}
.mk-it .qty span{min-width:28px;text-align:center;font-weight:700;font-size:13.5px}
.mk-it .rm{background:none;border:none;font-size:12.5px;color:var(--ink-2);text-decoration:underline;cursor:pointer;padding:0;margin-left:auto}
.mk-it .rm:hover{color:var(--red)}
.mk-empty{color:var(--ink-2);padding:20px 0}
.mk-ship.chyba{background:var(--c-amber-soft)} .mk-ship.chyba svg,.mk-ship.chyba b{color:var(--c-amber)}
.single_add_to_cart_button.loading{opacity:.6}
/* kosik: loga platieb v suhrne bez nadpisu trustrow (rovnaky komponent ako paticka) */
.sum .trustrow{margin:0;padding:12px 0 0;border:0;border-top:1px solid var(--line)}
.sum .trustrow .paylbl{display:none}
.ko-loading{padding:40px 24px;color:var(--ink-2)}
.ko-err{background:var(--c-red-soft);border:1px solid color-mix(in srgb, var(--c-red) 25%, transparent);color:var(--red-dark);font-size:13px;font-weight:600;padding:10px 12px;border-radius:var(--r-sm);margin-bottom:10px}
.ko.busy{opacity:.7;pointer-events:none}

/* ===== z dakujeme.html ===== */
  .dk{max-width:760px;margin:0 auto;padding:44px 24px 70px;text-align:center}
  .dk .ok{width:72px;height:72px;border-radius:50%;background:var(--c-green-soft);color:var(--c-green);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
  .dk h1{font-size:clamp(28px,4vw,42px)}
  .dk .lead{font-size:16.5px;color:var(--ink-2);margin:12px auto 0;max-width:52ch}
  .dk .lead b{color:var(--ink)}
  .dk-num{display:inline-flex;align-items:center;gap:10px;margin:22px auto 0;padding:10px 18px;border:1.5px solid var(--line);border-radius:var(--r-pill);font-size:14px;color:var(--ink-2)}
  .dk-num b{font-family:var(--f-display);font-weight:800;font-size:16px;color:var(--ink);letter-spacing:.03em}
  .dk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 0;text-align:left}
  .dk-step{background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card);padding:20px}
  .dk-step .n{font-family:var(--f-display);font-weight:800;font-size:12px;color:var(--red);letter-spacing:.08em;text-transform:uppercase}
  .dk-step b{display:block;font-size:15px;margin:6px 0 4px;color:var(--ink)}
  .dk-step small{display:block;font-size:13px;color:var(--ink-2);line-height:1.5}
  .dk-box{margin-top:26px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px;text-align:left;
    display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .dk-box h2{font-size:15px;margin:0 0 8px}
  .dk-box p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55}
  .dk-box p b{color:var(--ink)}
  .dk-acc{margin-top:22px;padding:18px 22px;background:var(--c-red-soft);border:1px solid color-mix(in srgb, var(--c-red) 22%, transparent);border-left:4px solid var(--c-red);border-radius:var(--r-card);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;text-align:left}
  .dk-acc b{display:block;font-size:15px;color:var(--ink)}
  .dk-acc small{display:block;font-size:13px;color:var(--ink-2);margin-top:2px;max-width:48ch}
  .dk-acc .btn{font-size:13.5px;padding:11px 20px;white-space:nowrap}
  .dk-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
  .dk-help{margin-top:22px;font-size:13.5px;color:var(--ink-2)}
  .dk-help a{color:var(--ink);font-weight:700;text-decoration:none}
  .dk-help a:hover{color:var(--red)}
  @media(max-width:760px){ .dk-steps,.dk-box{grid-template-columns:1fr} }

/* ===== z kontakt.html ===== */
/* ===== SHOWROOM + KONTAKT - vlastne stranky z blokov, styl ako Zariadovanie/Realizacie =====
     Sekcie striedaju podklad (biela / cervena / paper / tmava), eyebrow + velky nadpis s cervenym em,
     karty, chipy, fotky s pomerom. Ziadne pevne otvaracie hodiny (Jakub). */
  .sk-crumbs{font-size:12.5px;color:var(--ink-2);padding:22px 0 0;display:flex;gap:8px}
  .sk-crumbs a{color:var(--ink-2)} .sk-crumbs a:hover{color:var(--red)}
  .sk-sec{padding:56px 0}
  .sk-sec.paper{background:var(--paper)}
  .sk-sec.dark{background:var(--c-dark);color:var(--on-dark)}
  .sk-sec.dark h2{color:var(--c-white)} .sk-sec.dark p{color:var(--on-dark)}
  .sk-sec h2{font-size:clamp(28px,3.6vw,44px);line-height:1;margin:6px 0 0}
  .sk-sec h2 em{font-style:normal;color:var(--red)}
  .sk-sec .lead{font-size:16.5px;line-height:1.6;color:var(--ink-2);margin:16px 0 0;max-width:62ch}
  .sk-sec .lead b{color:var(--ink)}
  .sk-sec.dark .lead b{color:var(--c-white)}
  .sk-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
  /* hero: text + fotka so stitkom */
  .sk-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:28px 0 56px}
  .sk-hero h1{font-size:clamp(34px,4.8vw,58px);line-height:.98;margin:6px 0 0}
  .sk-hero h1 em{font-style:normal;color:var(--red)}
  .sk-facts{display:grid;grid-template-columns:repeat(3,auto);gap:22px;margin-top:22px;justify-content:start}
  .sk-facts dt{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.1em;color:var(--red)}
  .sk-facts dd{margin:4px 0 0;font-size:14.5px;font-weight:600;color:var(--ink)}
  .sk-facts dd a{color:var(--ink);text-decoration:none} .sk-facts dd a:hover{color:var(--red)}
  .sk-ph{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:5/4;background:var(--paper)}
  .sk-ph img{width:100%;height:100%;object-fit:cover;display:block}
  .sk-ph .tag{position:absolute;top:16px;right:16px;background:var(--red);color:var(--c-white);font-family:var(--f-display);font-weight:800;
    text-transform:uppercase;font-size:12.5px;letter-spacing:.05em;padding:8px 14px;border-radius:var(--r-pill)}
  .sk-ph .inset{position:absolute;left:16px;bottom:16px;width:34%;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;border:3px solid var(--c-white);box-shadow:0 12px 30px color-mix(in srgb, var(--c-dark) 30%, transparent)}
  /* cerveny pas cisel */
  .sk-stats{background:var(--red);color:var(--c-white)}
  .sk-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-top:26px;padding-bottom:26px;text-align:center}
  .sk-stats b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3.4vw,40px);line-height:1}
  .sk-stats span{display:block;font-size:13px;margin-top:6px;color:color-mix(in srgb, var(--c-white) 88%, transparent)}
  /* karty (piliere, kanaly, CTA) */
  .sk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
  .sk-card{background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
  a.sk-card:hover{border-color:var(--red);transform:translateY(-2px)}
  .sk-card .n{font-family:var(--f-display);font-weight:800;color:var(--red);font-size:20px;letter-spacing:.02em}
  .sk-card b{font-size:16px;line-height:1.3;color:var(--ink)}
  .sk-card small{font-size:13.5px;color:var(--ink-2);line-height:1.5}
  .sk-card .ln{margin-top:auto;padding-top:8px;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.04em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
  .sk-card .ln svg{color:var(--red);flex:none}
  .sk-card:hover .ln,.sk-card .ln:hover{color:var(--red)}
  .sk-card .ln.big{font-size:17px;text-transform:none;letter-spacing:0}
  .sk-sec.dark .sk-card{background:color-mix(in srgb, var(--c-white) 6%, transparent);border-color:color-mix(in srgb, var(--c-white) 14%, transparent)}
  .sk-sec.dark .sk-card b{color:var(--c-white)} .sk-sec.dark .sk-card small{color:var(--on-dark)}
  /* fotky v rade */
  .sk-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
  .sk-photos.four{grid-template-columns:repeat(4,1fr)}
  .sk-photos a{display:block;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;background:var(--paper)}
  .sk-photos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
  .sk-photos a:hover img{transform:scale(1.04)}
  /* chipy expozicie */
  .sk-chips-l{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:11.5px;letter-spacing:.1em;color:var(--ink-2);margin:26px 0 10px}
  .sk-chips{display:flex;flex-wrap:wrap;gap:8px}
  .sk-chips span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1.5px solid var(--line);border-radius:var(--r-pill);font-size:13.5px;font-weight:600;color:var(--ink);background:var(--c-white)}
  .sk-chips span::before{content:"+";color:var(--red);font-weight:800}
  /* navsteva: karta + mapa */
  .sk-visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;margin-top:26px;align-items:stretch}
  .sk-kbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 26px 22px}
  .sk-kbox h3{font-size:18px;margin:0 0 14px}
  .sk-kbox dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 20px;font-size:14.5px}
  .sk-kbox dt{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.1em;color:var(--ink-2);padding-top:3px}
  .sk-kbox dd{margin:0;font-weight:600;color:var(--ink)}
  .sk-kbox dd a{color:var(--ink);text-decoration:none;font-weight:700} .sk-kbox dd a:hover{color:var(--red)}
  .sk-map{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);min-height:300px;background:var(--paper)}
  .sk-map iframe{width:100%;height:100%;min-height:300px;border:0;display:block}
  /* kontakt: hero checks + formular */
  .sk-checks{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font-size:14px;font-weight:600;color:var(--ink)}
  .sk-checks span{display:inline-flex;align-items:center;gap:8px}
  .sk-checks svg{color:var(--c-green);flex:none}
  /* fakturacne udaje */
  .sk-firma{margin-top:22px;background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card);padding:8px 26px 4px;display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
  .sk-firma .hd{grid-column:1/-1;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:20px;color:var(--ink);padding:16px 0 12px;border-bottom:2px solid var(--ink)}
  .sk-firma .col>div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px}
  .sk-firma .col>div:last-child{border-bottom:none}
  .sk-firma dt{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.1em;color:var(--ink-2);padding-top:3px}
  .sk-firma dd{margin:0;font-weight:600;color:var(--ink)}
  .sk-firma dd a{color:var(--ink);text-decoration:none} .sk-firma dd a:hover{color:var(--red)}
  /* CTA karty s fotkou - rovnaky vzhlad ako karty realizacii (fotka, tmavy prechod, cerveny eyebrow, biely nadpis) */
  .sk-ctas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .sk-cta{position:relative;display:block;aspect-ratio:16/8;border-radius:var(--r-card);overflow:hidden;background:var(--c-dark);text-decoration:none;color:var(--c-white)}
  .sk-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
  .sk-cta:hover img{transform:scale(1.04)}
  .sk-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,color-mix(in srgb, var(--c-dark) 88%, transparent) 100%)}
  .sk-cta .t{position:absolute;left:24px;right:24px;bottom:22px;z-index:1}
  .sk-cta .t .eyebrow{color:var(--red);margin-bottom:6px}
  .sk-cta .t b{display:block;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(20px,2.2vw,28px);line-height:1;color:var(--c-white)}
  .sk-cta .t small{display:block;margin-top:8px;font-size:14px;color:color-mix(in srgb, var(--c-white) 90%, transparent);line-height:1.45}
  .sk-cta .t .ln{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:12.5px;letter-spacing:.05em;color:var(--c-white)}
  .sk-cta .t .ln svg{color:var(--red)}
  .sk-cta:hover .t .ln{color:var(--red)}
  /* cerveny formular - rovnaky ako B2B "Mate projekt?" (lead-sec): duotone fotka, biela karta formulara vpravo */
  .sk-lead{background:var(--red-dark);color:var(--c-white);position:relative;overflow:hidden;isolation:isolate}
  .sk-lead .bg{position:absolute;inset:0;z-index:-1}
  .sk-lead .bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
  .sk-lead .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,color-mix(in srgb, var(--c-red) 93%, transparent) 0%,color-mix(in srgb, var(--c-red-dark) 94%, transparent) 100%)}
  .sk-lead .wrap{padding:56px 24px;display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
  .sk-lead .eyebrow{color:var(--c-white)} .sk-lead .eyebrow::before{background:var(--c-white)}
  .sk-lead h2{color:var(--c-white);font-size:clamp(30px,3.8vw,48px);line-height:1;margin:6px 0 0}
  .sk-lead h2 em{color:var(--ink);font-style:normal}
  .sk-lead .lp{color:color-mix(in srgb, var(--c-white) 94%, transparent);font-size:15.5px;line-height:1.6;margin:16px 0 24px;max-width:52ch}
  .sk-lead .lp a{color:var(--c-white);font-weight:700}
  .sk-lead .kont{display:grid;gap:18px}
  .sk-lead .kont>div{display:flex;gap:13px;align-items:flex-start}
  .sk-lead .kont svg{flex:none;color:var(--ink);margin-top:3px}
  .sk-lead .kont b{display:block;font-size:18px;color:var(--c-white)} .sk-lead .kont b a{color:var(--c-white);text-decoration:none}
  .sk-lead .kont small{font-size:14px;color:color-mix(in srgb, var(--c-white) 85%, transparent);font-weight:600;display:block;margin-top:2px}
  .sk-zform{background:var(--c-white);border-radius:var(--r-card);padding:30px;color:var(--ink);box-shadow:0 24px 60px color-mix(in srgb, var(--c-dark) 25%, transparent)}
  .sk-zform h3{font-size:19px;margin:0 0 4px}
  .sk-zform .fsub{font-size:13.5px;color:var(--ink-2);margin:0 0 18px}
  .sk-zform label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);margin:0 0 6px}
  .sk-zform label i{font-style:normal;color:var(--red);margin-left:2px}
  .sk-zform input,.sk-zform textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;font-size:15px;font-family:var(--f-body);color:var(--ink);background:var(--paper);outline:none;margin-bottom:14px;transition:border-color .15s,background .15s}
  .sk-zform input:focus,.sk-zform textarea:focus{border-color:var(--ink);background:var(--c-white)}
  .sk-zform textarea{min-height:110px;resize:vertical}
  .sk-zform .btn{width:100%;justify-content:center;font-size:16px}
  .sk-zform .gdpr{font-size:12px;color:var(--ink-2);margin:12px 0 0;text-align:center} .sk-zform .gdpr a{color:var(--ink);text-decoration:underline}
  /* kontakt hero = tmava karta s fotkou v pozadi (ako cfshop/kontakty): fotka stmavena, biely text, cerveny em, cerveny spodny lem */
  .sk-herobg{position:relative;border-radius:var(--r-card);overflow:hidden;margin:26px 0 0;padding:52px 56px 46px;color:var(--c-white);
    background:var(--c-dark);border-bottom:4px solid var(--red);isolation:isolate}
  .sk-herobg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
  .sk-herobg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb, var(--c-dark) 94%, transparent) 0%,color-mix(in srgb, var(--c-dark) 80%, transparent) 60%,color-mix(in srgb, var(--c-dark) 65%, transparent) 100%)}
  .sk-herobg .eyebrow{color:var(--c-white)} .sk-herobg .eyebrow::before{background:var(--red)}
  .sk-herobg h1{font-size:clamp(32px,4.4vw,54px);line-height:.98;margin:6px 0 0;color:var(--c-white);max-width:16ch}
  .sk-herobg h1 em{font-style:normal;color:var(--red)}
  .sk-herobg .lead{color:color-mix(in srgb, var(--c-white) 90%, transparent);max-width:56ch}
  .sk-herobg .lead b{color:var(--c-white)}
  .sk-herobg .btn.ghost{color:var(--c-white);border-color:var(--c-white)}
  .sk-herobg .btn.ghost:hover{background:var(--red);border-color:var(--red)}
  .sk-herobg .sk-checks{color:var(--c-white)}
  @media(max-width:980px){ .sk-herobg{padding:34px 22px 30px;margin-top:16px} }
  /* doprava: karty dopravcov ako v kosiku (logo v bielom boxe, nazov, pre co, termin, cena) */
  .sk-ship{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
  .sk-shipc{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 18px;background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card)}
  .sk-shipc .lg{width:88px;height:50px;display:flex;align-items:center;justify-content:center;background:var(--c-white);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.04em;text-align:center;line-height:1.1;color:var(--ink)}
  .sk-shipc .lg img{max-width:100%;max-height:100%;object-fit:contain;display:block}
  .sk-shipc b{display:block;font-size:15.5px;color:var(--ink);line-height:1.25}
  .sk-shipc small{display:block;font-size:13px;color:var(--ink-2);margin-top:4px;line-height:1.45}
  .sk-shipc small .t{color:var(--ink);font-weight:700}
  .sk-shipc .pr{font-family:var(--f-display);font-weight:800;font-size:17px;color:var(--ink);white-space:nowrap}
  .sk-shipc .pr.free{color:var(--c-green)}
  .sk-note{margin-top:14px;padding:12px 16px;border-radius:var(--r-sm);background:var(--c-green-soft);border:1px solid color-mix(in srgb, var(--c-green) 25%, transparent);font-size:14px;color:var(--ink);display:flex;gap:10px;align-items:center}
  .sk-note svg{color:var(--c-green);flex:none} .sk-note b{color:var(--c-green)}
  .sk-pay .sk-card .payrow{justify-content:flex-start;gap:6px;margin-top:6px}
  .sk-pay .sk-card .payrow .pay{height:28px;padding:0 9px;border:1px solid var(--line);box-shadow:none;border-radius:6px}
  .sk-pay .sk-card .payrow .pay svg{transform:scale(.75)} .sk-pay .sk-card .payrow .pay .visa{font-size:13px}
  .sk-pay .sk-card .pr{margin-top:auto;padding-top:8px;font-family:var(--f-display);font-weight:800;font-size:15px;color:var(--ink)} .sk-pay .sk-card .pr.free{color:var(--c-green)}
  @media(max-width:980px){ .sk-ship{grid-template-columns:1fr} .sk-shipc{grid-template-columns:72px minmax(0,1fr) auto;gap:12px;padding:12px 14px} .sk-shipc .lg{width:72px;height:42px} }
  @media(max-width:980px){
    .sk-sec{padding:40px 0}
    .sk-ctas{grid-template-columns:1fr} .sk-cta{aspect-ratio:16/9}
    .sk-lead .wrap{grid-template-columns:1fr;gap:28px}
    .sk-zform{padding:22px}
    .sk-hero{grid-template-columns:1fr;gap:26px;padding-bottom:40px}
    .sk-facts{grid-template-columns:1fr 1fr;gap:14px}
    .sk-stats .wrap{grid-template-columns:1fr 1fr;padding-top:18px;padding-bottom:18px}
    .sk-cards,.sk-photos,.sk-photos.four{grid-template-columns:1fr 1fr}
    .sk-visit,.sk-form,.sk-firma{grid-template-columns:1fr}
    .sk-firma .col:first-child>div:last-child{border-bottom:1px solid var(--line)}
    .sk-firma .col>div{grid-template-columns:90px 1fr}
  }
  @media(max-width:540px){ .sk-cards,.sk-photos,.sk-photos.four{grid-template-columns:1fr} .sk-photos.four{grid-template-columns:1fr 1fr} .sk-facts{grid-template-columns:1fr} }

/* ===== z scripts/prototype-build/zloz_obsah.py ===== */
/* ===== UNIVERZALNA OBSAHOVA STRANKA =====
     Jedna sablona pre Dopravu, Kontakt, Reklamacie, VOP, GDPR, FAQ. Vlavo obsah (bloky:
     text, tabulka, akordeon, karty), vpravo sticky bocny panel: obsah stranky (kotvy),
     karta s kontaktom. Vsetko su bloky v editore - Jakub si stranku poskladá sam. */
  .ob-head{padding:34px 0 10px}
  .ob-head .crumbs{font-size:12.5px;color:var(--ink-2);margin-bottom:12px;display:flex;gap:8px;flex-wrap:wrap}
  .ob-head .crumbs a{color:var(--ink-2)} .ob-head .crumbs a:hover{color:var(--red)}
  .ob-head h1{font-size:clamp(30px,4vw,46px)}
  .ob-head .lead{font-size:16.5px;color:var(--ink-2);margin:12px 0 0;max-width:62ch;line-height:1.55}
  .ob{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start;padding:22px 0 70px}
  .ob-main{min-width:0;display:flex;flex-direction:column;gap:34px}
  .ob-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px}
  /* obsahove bloky */
  .ob-sec h2{font-size:24px;margin:0 0 12px;scroll-margin-top:120px}
  .ob-sec h3{font-size:17px;margin:20px 0 8px}
  .ob-sec p{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin:0 0 12px;max-width:72ch}
  .ob-sec p b,.ob-sec li b{color:var(--ink)}
  .ob-sec ul{margin:0 0 12px;padding-left:20px;font-size:15.5px;line-height:1.65;color:var(--ink-2)}
  /* podciarknute odkazy LEN v texte - nie tlacidla (.btn), karty (.ln), dlazdice (.kn-tile) */
  .ob-sec p a:not(.btn),.ob-sec li a:not(.btn),.ob-sec dd a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .ob-sec p a:not(.btn):hover,.ob-sec li a:not(.btn):hover,.ob-sec dd a:hover{color:var(--red)}
  /* tabulka (dopravcovia, ceny) */
  .ob-tab{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;font-size:14.5px}
  .ob-tab th,.ob-tab td{padding:13px 16px;text-align:left;vertical-align:middle}
  .ob-tab th{background:var(--paper);font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:11.5px;letter-spacing:.06em;color:var(--ink)}
  .ob-tab td{border-top:1px solid var(--line);color:var(--ink-2)}
  .ob-tab td b{color:var(--ink)}
  .ob-tab td .logo{width:96px;height:44px;border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;padding:5px 7px;background:var(--c-white)}
  .ob-tab td .logo img{max-width:100%;max-height:100%;object-fit:contain}
  .ob-tab .free{color:var(--c-green);font-weight:700}
  .ob-tab-wrap{overflow-x:auto}
  /* karty (platby, kroky) */
  .ob-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
  .ob-card{background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;display:flex;flex-direction:column;transition:background .15s,border-color .15s}
  /* karta s odkazom: hover cez CELU kartu ako podkategorie (ruzovy podklad + cerveny ramcek + cerveny text) */
  .ob-card:has(.ln):hover{background:color-mix(in srgb, var(--c-red) 6%, transparent);border-color:color-mix(in srgb, var(--c-red) 18%, transparent)}
  .ob-card:has(.ln):hover .ln{color:var(--red)}
  .ob-card b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}
  .ob-card small{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.5}
  .ob-card .payrow{justify-content:flex-start;gap:6px;margin-top:10px}
  .ob-card .payrow .pay{height:28px;padding:0 9px;border:1px solid var(--line);box-shadow:none;border-radius:6px}
  .ob-card .payrow .pay svg{transform:scale(.75)} .ob-card .payrow .pay .visa{font-size:13px}
  /* zvyraznena poznamka */
  .ob-note{display:block;padding:14px 18px;margin:14px 0 0;border-radius:var(--r-sm);background:var(--c-green-soft);border-left:4px solid var(--c-green);font-size:14.5px;color:var(--ink);line-height:1.5}
  .ob-note.warn{background:var(--c-amber-soft);border-color:var(--c-amber)}
  .ob-note.info{background:var(--c-blue-soft);border-color:var(--c-blue)}
  /* akordeon (FAQ) - rovnaky ako na zariadovani */
  .ob-faq details{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;background:var(--c-white)}
  .ob-faq summary{padding:15px 18px;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
  .ob-faq summary::-webkit-details-marker{display:none}
  .ob-faq summary::after{content:"+";color:var(--red);font-weight:800;font-size:18px;flex:none}
  .ob-faq details[open] summary::after{content:"-"}
  .ob-faq details p{padding:0 18px 16px;margin:0}
  /* bocny panel */
  .ob-toc{background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px}
  .ob-toc b{display:block;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:11.5px;letter-spacing:.08em;color:var(--ink);margin-bottom:10px}
  .ob-toc a{display:block;padding:7px 0;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  .ob-toc a:last-child{border-bottom:none}
  .ob-toc a:hover{color:var(--red)}
  .ob-contact{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:20px}
  .ob-contact b{display:block;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:14px;margin-bottom:8px}
  .ob-contact p{font-size:14px;color:var(--ink-2);margin:0 0 12px;line-height:1.5}
  .ob-contact a.line{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;padding:5px 0}
  .ob-contact a.line:hover{color:var(--red)} .ob-contact a.line svg{color:var(--red);flex:none}
  .ob-contact small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:8px}
  /* nadpisy sekcii vo velkom style (eyebrow + h2 s cervenym slovom) - ako na homepage */
  .ob-sec .eyebrow{margin-bottom:8px}
  .ob-h2big{font-size:clamp(26px,3.2vw,36px);margin:0 0 18px}
  .ob-h2big em{color:var(--red);font-style:normal}
  /* karta Kde nas najdete: text vlavo, fotka vpravo */
  .kn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--c-white)}
  .kn-txt{padding:30px 32px 32px}
  .kn-txt h3{font-size:24px;line-height:1.05;margin:0 0 18px}
  .kn-txt h3 em{color:var(--red);font-style:normal}
  .kn-dl{margin:0 0 14px}
  .kn-dl>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:14px;padding:8px 0;align-items:baseline}
  .kn-dl dt{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--ink-2)}
  .kn-dl dd{margin:0;font-size:15px;color:var(--ink);font-weight:600}
  .kn-dl dd a{color:var(--ink);text-decoration:none;font-weight:700} .kn-dl dd a:hover{color:var(--red)}
  .kn-note{font-size:13.5px;color:var(--ink-2);margin:0 0 20px;line-height:1.5}
  .kn-ph{min-height:300px}
  .kn-ph img{width:100%;height:100%;object-fit:cover;display:block}
  .ob-sec .ob-map{margin-top:14px}
  /* dlazdice s fotkami a cislami */
  .kn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
  .kn-tile{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;display:block;text-decoration:none;border:1px solid var(--line)}
  .kn-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
  .kn-tile:hover img{transform:scale(1.04)}
  .kn-tile span{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:var(--c-white);font-size:12.5px;line-height:1.3;
    background:linear-gradient(0deg, color-mix(in srgb, var(--c-dark) 82%, transparent), transparent)}
  .kn-tile span b{display:block;font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1;margin-bottom:3px}
  @media(max-width:760px){ .kn{grid-template-columns:1fr} .kn-ph{min-height:220px;order:-1} .kn-grid{grid-template-columns:1fr 1fr} }
  /* fakturacne udaje - karta s riadkami popisok / hodnota */
  .ob-firma{margin:0;background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card);padding:6px 24px 10px;max-width:640px}
  .ob-firma .hd{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:17px;color:var(--ink);padding:16px 0 12px;border-bottom:1px solid var(--line)}
  .ob-firma>div:not(.hd){display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid var(--line);align-items:baseline}
  .ob-firma>div:last-child{border-bottom:none}
  .ob-firma dt{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--ink-2)}
  .ob-firma dd{margin:0;font-size:15px;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
  @media(max-width:540px){ .ob-firma>div:not(.hd){grid-template-columns:1fr;gap:3px} }
  /* kontakt: mapa + hodiny */
  .ob-map{display:block;position:relative;aspect-ratio:16/8;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
  .ob-map iframe{position:absolute;inset:0;width:100%;height:100%;display:block}
  .ob-map-btn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--c-white);color:var(--ink);
    font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:12.5px;letter-spacing:.05em;padding:11px 20px;
    border-radius:var(--r-pill);box-shadow:0 8px 24px color-mix(in srgb, var(--c-ink) 22%, transparent);white-space:nowrap;transition:background .15s,color .15s}
  .ob-map:hover .ob-map-btn{background:var(--red);color:var(--c-white)}
  /* odkaz pritlaceny dole (margin-top:auto) -> telefony v troch kartach v jednej linke */
  /* ako vsade na webe: odkaz cierny, cervena az pri prejdeni mysou; ikona cervena stale (akcent) */
  .ob-card .ln{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;font-weight:800;color:var(--ink);text-decoration:none;font-size:15.5px;transition:color .15s}
  .ob-card .ln svg{color:var(--red);flex:none}
  .ob-card .ln:hover{color:var(--red)}
  .ob-hours{width:100%;border-collapse:collapse;font-size:14.5px}
  .ob-hours td{padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
  .ob-hours td:last-child{text-align:right;font-weight:700;color:var(--ink)}
  .ob-hours tr.today td{color:var(--c-green)}
  @media(max-width:980px){ .ob{grid-template-columns:minmax(0,1fr);gap:26px} .ob-side{position:static} }

/* ===== z 404.html ===== */
/* ===== 404 + VYHLADAVANIE - jeden vzhlad =====
     Stredovy blok: eyebrow, H1, text, hladanie, kategorie ako pilulky. Ziadna slepa ulicka:
     vzdy hladanie + kategorie + kontakt. Texty = nastavenia temy (editovatelne, WPML). */
  .st{max-width:820px;margin:0 auto;padding:44px 24px 30px;text-align:center}
  .st .eyebrow{justify-content:center}
  .st h1{font-size:clamp(30px,4.6vw,50px);margin:6px 0 0}
  .st h1 em{font-style:normal;color:var(--red)}
  .st .lead{font-size:16.5px;color:var(--ink-2);margin:12px auto 0;max-width:56ch;line-height:1.55}
  .st .lead b{color:var(--ink)}
  .st .num{font-family:var(--f-display);font-weight:800;font-size:clamp(84px,14vw,150px);line-height:.9;color:var(--red);letter-spacing:-.02em}
  /* hladanie - rovnake pole ako v hlavicke, len vacsie */
  .st-search{display:flex;gap:8px;max-width:560px;margin:24px auto 0;position:relative}
  .st-search input{flex:1;min-width:0;height:54px;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:0 22px;font-size:16px;font-family:var(--f-body);color:var(--ink);background:var(--c-white)}
  .st-search input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-ink) 8%, transparent)}
  .st-search .btn{height:54px;padding:0 24px}
  .kpills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px auto 0}
  .kpill{display:inline-flex;align-items:center;padding:9px 16px;border:1.5px solid var(--line);border-radius:var(--r-pill);font-family:var(--f-display);
    font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.05em;color:var(--ink);text-decoration:none;background:var(--c-white);transition:border-color .15s,color .15s}
  .kpill:hover{border-color:var(--red);color:var(--red)}
  .st-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
  /* pomoc dole: clovek, ktory nenasiel, ma kam zavolat */
  .st-help{display:flex;align-items:center;gap:14px;justify-content:center;margin:34px auto 0;padding:14px 18px;border-radius:var(--r-card);background:var(--paper);max-width:560px;text-align:left;font-size:14px;color:var(--ink-2)}
  .st-help img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--c-white)}
  .st-help b{color:var(--ink);display:block}
  .st-help a{color:var(--ink);font-weight:700;text-decoration:none}
  .st-help a:hover{color:var(--red)}
  /* vysledky */
  .res{padding:10px 0 60px}
  .res-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 16px}
  .res-head h2{font-size:22px;margin:0}
  .res-head .n{font-size:13.5px;color:var(--ink-2);font-weight:600}
  .res-kats{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 22px;font-size:13.5px;color:var(--ink-2)}
  .res-kats:not(:has(.kpill)){display:none}
  .res-kats .kpill{font-size:11.5px;padding:7px 13px}
  #nic{display:none}
  body.nic #nic{display:block} body.nic #vysledky{display:none} body.nic .st .num{display:none}
  .tipy{text-align:left;max-width:520px;margin:20px auto 0;padding:16px 18px 16px 34px;background:var(--paper);border-radius:var(--r-card);font-size:14px;color:var(--ink-2)}
  .tipy li{margin:4px 0} .tipy b{color:var(--ink)}
  .cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .card.hidden{display:none}
  @media(max-width:980px){.cat-grid{grid-template-columns:1fr 1fr}}

/* ===== Mapovanie blokov editora na triedy obsahovych stranok (len tema) ===== */
/* obrazky z bloku Obrazok (figure) v hero, pozadi formulara a fotke showroomu = bez okrajov, cez celu plochu */
.sk-herobg>figure,.sk-lead .bg>figure,.sk-ph>figure,.sk-cta>figure{margin:0;position:static;height:auto}
.sk-herobg>figure img,.sk-lead .bg>figure img,.sk-cta>figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sk-herobg>figure img{z-index:-2}
.sk-ph>figure:not(.inset){position:absolute;inset:0} .sk-ph>figure:not(.inset) img{width:100%;height:100%;object-fit:cover}
.sk-ph>figure.inset{position:absolute;left:16px;bottom:16px;width:34%;height:auto;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;border:3px solid var(--c-white);box-shadow:0 12px 30px color-mix(in srgb, var(--c-dark) 30%, transparent)}
.sk-lead .bg{z-index:0} .sk-lead .bg>figure{position:absolute;inset:0} .sk-lead>.wrap{position:relative;z-index:1}
/* galeria (blok Galeria) = mriezka fotiek showroomu / skladu (specificita nad CSS jadra .has-nested-images ... :not(#individual-image)) */
.wp-block-gallery.has-nested-images.sk-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.wp-block-gallery.has-nested-images.sk-photos.four{grid-template-columns:repeat(4,1fr)}
.wp-block-gallery.has-nested-images.sk-photos figure.wp-block-image:not(#individual-image){width:100%;height:auto;flex:none;margin:0;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;background:var(--paper)}
.wp-block-gallery.has-nested-images.sk-photos figure.wp-block-image:not(#individual-image) a{display:block;width:100%;height:100%}
.wp-block-gallery.has-nested-images.sk-photos figure.wp-block-image:not(#individual-image) img{width:100%!important;height:100%!important;max-width:100%;object-fit:cover;display:block;transition:transform .3s;flex:none}
.wp-block-gallery.has-nested-images.sk-photos figure.wp-block-image:hover img{transform:scale(1.04)}
@media(max-width:980px){.wp-block-gallery.has-nested-images.sk-photos,.wp-block-gallery.has-nested-images.sk-photos.four{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.wp-block-gallery.has-nested-images.sk-photos{grid-template-columns:1fr} .wp-block-gallery.has-nested-images.sk-photos.four{grid-template-columns:1fr 1fr}}
/* nadpisy a odseky z editora v sekciach sk-sec / hero (rovnake ako v prototype) */
.sk-hero p.eyebrow,.sk-sec p.eyebrow,.sk-herobg p.eyebrow,.sk-lead p.eyebrow{margin:0 0 6px}
.sk-hero>.wp-block-group,.sk-lead .wrap>.wp-block-group{min-width:0}
.sk-hero.one{grid-template-columns:1fr;padding-bottom:10px}
.sk-sec.sk-sec-cta{padding-top:0}
.sk-lead .lp.lp-b{margin:0 0 14px;font-weight:700;color:var(--c-white)}
.sk-sec .lead.lead-sm{margin-top:18px;font-size:14.5px}
.sk-sec p.sk-chips-l{margin:26px 0 10px}
.wp-block-post-content>.wrap>.sk-herobg{margin:26px 0 0}
/* obsahova sablona: post-content = ob-main; TOC z nadpisov h2 (id doplna tema) */
.ob-main>h2{font-size:24px;margin:0 0 12px;scroll-margin-top:120px}
.ob-main>h3{font-size:17px;margin:20px 0 8px}
.ob-main>p{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin:0 0 12px;max-width:72ch}
.ob-main>p b,.ob-main>ul li b,.ob-main>ol li b{color:var(--ink)}
.ob-main>ul,.ob-main>ol{margin:0 0 12px;padding-left:20px;font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.ob-main>p a:not(.btn),.ob-main>ul li a:not(.btn),.ob-main>ol li a:not(.btn){color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.ob-main>p a:not(.btn):hover,.ob-main>ul li a:not(.btn):hover,.ob-main>ol li a:not(.btn):hover{color:var(--red)}
.ob-main>h2+p,.ob-main>h2+ul{margin-top:0}
.ob-main{gap:0} .ob-main>h2:not(:first-child){margin-top:34px}
.ob-main .wp-block-table table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;font-size:14.5px}
.ob-main .wp-block-table th,.ob-main .wp-block-table td{padding:13px 16px;text-align:left;vertical-align:middle;border:0}
.ob-main .wp-block-table th{background:var(--paper);font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:11.5px;letter-spacing:.06em;color:var(--ink)}
.ob-main .wp-block-table td{border-top:1px solid var(--line);color:var(--ink-2)}
.ob-main .wp-block-details{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;background:var(--c-white)}
.ob-main .wp-block-details summary{padding:15px 18px;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.ob-main .wp-block-details summary::-webkit-details-marker{display:none}
.ob-main .wp-block-details summary::after{content:"+";color:var(--red);font-weight:800;font-size:18px;flex:none}
.ob-main .wp-block-details[open] summary::after{content:"-"}
.ob-main .wp-block-details>*:not(summary){padding:0 18px 16px;margin:0}
/* mapa pred suhlasom s cookies: karta s adresou a tlacidlami (po suhlase ju JS nahradi iframe) */
.sk-map .sk-map-ph{height:100%;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:26px;color:var(--ink)}
.sk-map .sk-map-ph svg{color:var(--red);margin-bottom:6px}
.sk-map .sk-map-ph b{font-size:15.5px} .sk-map .sk-map-ph small{font-size:13px;color:var(--ink-2);max-width:34ch}
.sk-map .sk-map-ph .sk-btns{justify-content:center;margin-top:14px}
.ck .ck-btns-save{margin-top:12px}
/* kontaktny formular: stav po odoslani */
.sk-zform .ok-msg{background:var(--c-green-soft);border:1px solid color-mix(in srgb, var(--c-green) 25%, transparent);border-radius:var(--r-sm);padding:14px 16px;font-size:14.5px;color:var(--ink);margin:0 0 14px}
.sk-zform .err-msg{background:var(--c-red-soft);border:1px solid color-mix(in srgb, var(--c-red) 25%, transparent);border-radius:var(--r-sm);padding:12px 14px;font-size:13.5px;color:var(--red-dark);font-weight:600;margin:0 0 14px}
.sk-zform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* varianty produktu: bublinky namiesto roletky (JS z amrep.js), cena z hlavneho bloku */
.pd-var{display:flex;flex-direction:column;gap:8px;margin:2px 0 14px}
.pd-var .vl{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.pd-varpills{display:flex;flex-wrap:wrap;gap:8px}
.pd-varpills .vp{padding:10px 16px;border:1.5px solid var(--line);border-radius:var(--r-pill);font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.02em;background:var(--c-white);color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.pd-varpills .vp:hover{border-color:var(--red);color:var(--red)}
.pd-varpills .vp.on{background:var(--ink);border-color:var(--ink);color:var(--c-white)}
.pd-varpills .vp:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
form.pd-var-pills table.variations{display:none}
form.pd-var-pills .woocommerce-variation-price,form.pd-var-pills .woocommerce-variation-availability,form.pd-var-pills .reset_variations{display:none!important}
form.pd-var-pills .single_variation_wrap .woocommerce-variation{margin:0}
.pd-avail.var{color:var(--ink-2)} .pd-avail.var .dot{background:var(--c-grey)}
/* strankovanie: velke "Nacitat dalsich" + cisla (aj span.current z paginate_links) */
.pager-row{display:flex;flex-direction:column;align-items:center;gap:18px;margin:44px 0 0}
.pager-row .loadmore{padding:15px 34px;font-size:15px}
.pager-row .loadmore svg{margin-left:6px}
.pager-row .loadmore:disabled{opacity:.6;cursor:wait}
.pager{margin-top:0}
.pager .page-numbers{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:800;font-size:14px;color:var(--ink);text-decoration:none;transition:border-color .15s,color .15s}
.pager a.page-numbers:hover{border-color:var(--red);color:var(--red)}
.pager span.page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--c-white)}
.pager span.page-numbers.dots{border:none;width:auto}
/* 404: kategorie ako pilulky z menu, hladanie = Woo vyhladavanie produktov */
.st .st-search input[type=search]::-webkit-search-decoration{-webkit-appearance:none}

/* ===== z zariadovanie.html ===== */
/* ===== Zariaďovanie - page CSS ===== */
  .zh-cta .btn,.zh-cta .btn-ghost{font-size:14px;padding:13px 20px;white-space:nowrap}
  .zh{background:var(--paper);border-bottom:1px solid var(--line)}
  .zh .wrap{padding:56px 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .zh h1{font-size:clamp(36px,4.4vw,58px);color:var(--ink);max-width:16ch}
  .zh h1 em{color:var(--red);font-style:normal}
  .zh .lead{color:var(--ink-2);font-size:17px;line-height:1.6;max-width:52ch;margin:18px 0 26px}
  .zh .lead strong{color:var(--ink)}
  .zh-cta{display:flex;gap:12px;flex-wrap:nowrap;align-items:center}
  .btn-ghost{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-display);font-weight:800;
    text-transform:uppercase;letter-spacing:.04em;font-size:15px;padding:14px 22px;border:1.5px solid var(--ink-2);
    border-radius:var(--r-pill);color:var(--ink);transition:border-color .15s,color .15s}
  .btn-ghost:hover{border-color:var(--red);color:var(--red)}
  .zh-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
  .zh-trust span{display:flex;align-items:center;gap:7px}
  .zh-trust svg{color:var(--red)}
  .zh-meta{margin-top:12px}
  .zh-meta b{color:var(--ink)}
  .zh-meta a{font-weight:800;color:var(--ink)}
  .zh-meta a:hover{color:var(--red)}
  .zh-call a{font-weight:800;color:var(--ink)}
  .zh-call a:hover{color:var(--red)}
  .zh .b2b-stats{grid-column:1/-1;margin-top:10px;max-width:none}
  .zh .b2b-stats b{color:var(--ink)}
  .zh .b2b-stats span{color:var(--ink-2)}
  /* koláž vpravo: hlavná fotka + badge + malá fotka cez roh */
  .zh-collage{position:relative;padding:14px 14px 52px 0}
  .zh-collage .main{width:100%;display:block;object-fit:cover;aspect-ratio:16/10.5;border-radius:var(--r-sm)}
  .zh-badge{position:absolute;top:0;right:0;background:var(--red);color:var(--c-white);font-family:var(--f-display);
    font-weight:800;font-size:14px;letter-spacing:.02em;padding:11px 16px;border-radius:var(--r-sm);
    box-shadow:0 10px 24px color-mix(in srgb, var(--c-red) 35%, transparent);white-space:nowrap}
  .zh-badge b{font-size:16px;margin-right:4px}
  .zh-collage .mini{position:absolute;left:-10%;bottom:0;width:48%;aspect-ratio:16/10;object-fit:cover;
    border-radius:var(--r-sm);border:4px solid var(--c-white);box-shadow:0 18px 38px color-mix(in srgb, var(--c-ink) 22%, transparent);display:block}

  .zsec .sub{color:var(--ink-2);font-size:15px;margin:8px 0 0;max-width:60ch}

  /* Pre koho */
  .who{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .who .w{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:10px}
  .who .w svg{color:var(--red)}
  .who h3{font-size:17px;color:var(--ink)}
  .who p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55}

  /* Dodávka */
  .supply{display:flex;flex-wrap:wrap;gap:12px}
  .supply div{display:inline-flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);
    border-radius:var(--r-pill);padding:14px 20px;font-weight:700;font-size:14.5px;color:var(--ink);white-space:nowrap}
  .supply svg{flex:none;color:var(--red)}

  /* Proces */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;position:relative}
  .step b{font-family:var(--f-display);font-weight:900;font-size:34px;color:var(--red);display:block;line-height:1}
  .step h3{font-size:16.5px;color:var(--ink);margin:12px 0 8px}
  .step p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55}
  .steps-cta{text-align:center;margin-top:28px}

  /* Realizácie */
  .reals{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .real{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9;background:var(--paper);display:block}
  .real img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
  .real:hover img{transform:scale(1.04)}
  .real::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb, var(--c-dark) 0%, transparent) 35%,color-mix(in srgb, var(--c-dark) 85%, transparent) 100%)}
  .real .cap{position:absolute;left:22px;right:22px;bottom:18px;z-index:1;color:var(--c-white)}
  .real .cap .tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
  .real .cap h3{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:22px;color:var(--c-white);margin:4px 0 6px}
  .real .cap p.rq{margin:0;font-size:14px;color:color-mix(in srgb, var(--c-white) 92%, transparent);line-height:1.5;font-style:italic}

  /* OnGym */
  .ongym{background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-card);
    padding:40px 44px;display:grid;grid-template-columns:1.15fr .95fr .62fr;gap:36px;align-items:center}
  .ongym-visual img{width:100%;height:auto;max-height:270px;object-fit:contain;display:block;
    filter:drop-shadow(0 14px 28px color-mix(in srgb, var(--c-ink) 22%, transparent))}
  .ongym h2{color:var(--ink);font-size:clamp(24px,2.8vw,34px)}
  .ongym h2 em{color:var(--red);font-style:normal}
  .ongym p{color:var(--ink-2);font-size:15.5px;line-height:1.6;margin:14px 0 0}
  .ongym ul{list-style:none;padding:0;margin:0;display:grid;gap:13px}
  .ongym li{display:flex;gap:11px;align-items:flex-start;font-size:16px;color:var(--ink);font-weight:600}
  .ongym li svg{flex:none;color:var(--red);margin-top:2px}
  .ongym-partner{display:flex;align-items:center;gap:14px;margin-top:22px}
  .ongym-partner .plogo{background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card);padding:11px;width:108px;height:108px;flex:none;transition:border-color .15s,box-shadow .15s;
    display:flex;align-items:center;justify-content:center}
  .ongym-partner .plogo:hover{border-color:var(--red);box-shadow:0 8px 22px color-mix(in srgb, var(--c-ink) 12%, transparent)}
  .ongym-partner .plogo img{max-width:100%;max-height:100%;display:block}
  .ongym .pnote{font-size:15px;color:var(--ink-2);margin:0;line-height:1.6}
  .ongym .pnote b{color:var(--ink)}
  .ongym .plink{color:var(--red);font-weight:800;white-space:nowrap}

  /* Prečo AMREP */
  .why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .why .w{border-left:4px solid var(--red);padding:4px 0 4px 18px}
  .why h3{font-size:16px;color:var(--ink);margin:0 0 8px}
  .why p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55}

  /* FAQ */
  .faq{max-width:820px;margin:0 auto}
  .faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:0;margin-bottom:10px;overflow:hidden}
  .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:18px 20px;font-weight:800;font-size:15.5px;color:var(--ink)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--red);flex:none}
  .faq details[open] summary::after{content:"-"}
  .faq .a{padding:0 20px 18px;font-size:14.5px;color:var(--ink-2);line-height:1.6}

  /* Formulár */
  .lead-sec{background:var(--red-dark);color:var(--c-white);position:relative;overflow:hidden;isolation:isolate}
  /* fotka gymu v cervenom duotone */
  .lead-bg{position:absolute;inset:0;z-index:-1}
  .lead-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
  .lead-bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(115deg,color-mix(in srgb, var(--c-red) 93%, transparent) 0%,color-mix(in srgb, var(--c-red-dark) 94%, transparent) 100%)}
  .lead-sec .eyebrow{color:var(--c-white)}
  .lead-sec .eyebrow::before{background:var(--c-white)}
  .lead-sec .wrap{padding:56px 24px;display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
  .lead-sec h2{color:var(--c-white);font-size:clamp(30px,3.8vw,48px)}
  .lead-sec h2 em{color:var(--ink);font-style:normal}
  .lead-sec .lp{color:color-mix(in srgb, var(--c-white) 94%, transparent);font-size:15.5px;line-height:1.6;margin:16px 0 24px}
  .lead-contacts{display:grid;gap:20px}
  .lead-contacts>div{display:flex;gap:13px;align-items:flex-start}
  .lead-contacts svg{flex:none;color:var(--ink);margin-top:3px}
  .lead-contacts b{display:block;font-size:18px;color:var(--c-white)}
  .lead-contacts small{font-size:14px;color:color-mix(in srgb, var(--c-white) 85%, transparent);font-weight:600;margin-top:2px;display:block}
  .lead-contacts a{color:var(--c-white)}
  .zform{background:var(--c-white);border-radius:var(--r-card);padding:30px;color:var(--ink);box-shadow:0 24px 60px color-mix(in srgb, var(--c-dark) 25%, transparent)}
  .zform h3{font-size:19px;margin:0 0 4px}
  .zform .fsub{font-size:13.5px;color:var(--ink-2);margin:0 0 18px}
  .zform label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);margin:0 0 6px}
  .zform input,.zform select,.zform textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);
    padding:12px 14px;font-size:15px;font-family:var(--f-body);color:var(--ink);background:var(--paper);outline:none;margin-bottom:14px;
    transition:border-color .15s,background .15s}
  .zform input:focus,.zform select:focus,.zform textarea:focus{border-color:var(--ink);background:var(--c-white)}
  .zform textarea{min-height:96px;resize:vertical}
  .zform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .zform .btn{width:100%;justify-content:center;font-size:16px}
  .zform .gdpr{font-size:12px;color:var(--ink-2);margin:12px 0 0;text-align:center}
  .zform .gdpr a{text-decoration:underline}
  .zform-trust{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:14px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
  /* ===== stavy formulara =====
     - povinne pole = hviezdicka + validacia az po opusteni pola (nie pocas pisania)
     - chyba pod polom cervenou, ok = zeleny ramcek
     - GDPR checkbox s odkazom (nie len veta - pri kontakte je zaklad predzmluvne rokovanie,
       ale checkbox dava jasny dokaz, ze clovek text videl)
     - honeypot (skryte pole "web") + casovy test (odoslanie < 3 s = bot) - bez captcha,
       ktora odradza realnych ludi; v teme navyse Cloudflare Turnstile (neviditelny)
     - po odoslani: karta "dakujeme" NA MIESTE formulara s tym, co bude nasledovat */
  .zform label i{font-style:normal;color:var(--red);margin-left:2px}
  .zform .f{margin-bottom:12px}
  .zform .f .msg{display:none;font-size:12.5px;color:var(--red-dark);font-weight:600;margin-top:5px}
  .zform .f.err .msg{display:block}
  .zform .f.err input,.zform .f.err select,.zform .f.err textarea{border-color:var(--red)}
  .zform .f.ok input,.zform .f.ok select{border-color:var(--c-green)}
  .zform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .zform .gdpr-row{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.45;cursor:pointer;
    text-transform:none;letter-spacing:0;font-weight:500}
  .zform .gdpr-row input{width:18px;height:18px;flex:none;margin:1px 0 0;accent-color:var(--red)}
  .zform .gdpr-row a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
  .zform .gdpr-row.err{color:var(--red-dark)}
  .zform .gdpr-row.err a{color:var(--red-dark)}
  /* rozbalitelne detaily - formular zostava kratky, kto chce, doplni */
  .zform details{margin:4px 0 14px}
  .zform summary{font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;padding:4px 0}
  .zform summary::-webkit-details-marker{display:none}
  .zform summary::after{content:"+";color:var(--red);font-weight:800}
  .zform details[open] summary::after{content:"-"}
  .zform details .row2{margin-top:10px}
  .zform .btn[disabled]{opacity:.6;cursor:wait}
  /* stav po odoslani */
  .zform-done{display:none;text-align:center;padding:10px 0 4px}
  .zform.done>*:not(.zform-done){display:none!important}
  .zform.done .zform-done{display:block}
  .zform-done .ok{width:64px;height:64px;border-radius:50%;background:var(--c-green-soft);color:var(--c-green);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
  .zform-done h3{font-size:22px;margin:0 0 8px}
  .zform-done p{font-size:14.5px;color:var(--ink-2);margin:0 0 16px;line-height:1.55}
  .zform-done p b{color:var(--ink)}
  .zform-done .kroky{text-align:left;background:var(--paper);border-radius:var(--r-sm);padding:14px 16px;margin:0 0 16px}
  .zform-done .kroky div{display:flex;gap:10px;font-size:13.5px;color:var(--ink-2);padding:5px 0}
  .zform-done .kroky div b{color:var(--red);font-family:var(--f-display);flex:none;width:18px}
  .zform-done .kroky div span b{color:var(--ink);font-family:var(--f-body);width:auto}
  .zform-done .kontakt{font-size:13px;color:var(--ink-2)}
  .zform-done .kontakt a{color:var(--ink);font-weight:700;text-decoration:none}
  /* chybovy stav odoslania (server) */
  .zform-fail{display:none;margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--c-red-soft);border:1px solid color-mix(in srgb, var(--c-red) 25%, transparent);font-size:13.5px;color:var(--ink)}
  .zform-fail a{color:var(--ink);font-weight:700}
  .zform.fail .zform-fail{display:block}
  .zform-trust span{display:flex;align-items:center;gap:6px}
  .zform-trust svg{color:var(--ok)}
  .zf-rating{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--ink-2);font-weight:600}
  .zf-rating b{color:var(--gold)}

  /* sticky CTA lišta - len mobil, zobrazí sa po odscrollovaní hero */
  .sticky-cta{display:none}
  @media(max-width:980px){
    .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
      background:color-mix(in srgb, var(--c-white) 96%, transparent);border-top:1px solid var(--line);box-shadow:0 -8px 24px color-mix(in srgb, var(--c-ink) 10%, transparent);
      transform:translateY(110%);transition:transform .25s}
    .sticky-cta.on{transform:none}
    .sticky-cta .btn{width:100%;justify-content:center}
  }

  @media(max-width:980px){
    .zh .wrap{grid-template-columns:minmax(0,1fr);gap:36px}
    .zh .wrap>*{min-width:0}
    .zh-cta{flex-wrap:wrap}
    /* na mobile sa dlhy text tlacidla musi zalomit, inak pretecie sirku obrazovky */
    .zh-cta .btn,.zh-cta .btn-ghost{white-space:normal;text-align:center;max-width:100%}
    .zh-collage{padding-left:24px}
    .zh-collage .mini{left:-4%}
    .who,.steps,.why{grid-template-columns:1fr 1fr}
    .reals{grid-template-columns:1fr}
    .ongym{grid-template-columns:1fr;padding:30px 24px}
    .ongym-visual img{max-height:190px;margin:0 auto}
    .lead-sec .wrap{grid-template-columns:1fr}
  }
  @media(max-width:540px){
    .who,.steps,.why{grid-template-columns:1fr}
    .supply div{white-space:normal}
    .zform .row2{grid-template-columns:1fr}
  }

/* ===== z skoly.html (vyrez) ===== */
/* biela checklist karta vpravo (odlisenie od zariadovania - institucie chcu proces, nie kolaz) */
  .zh-card{background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 28px;
    box-shadow:0 18px 44px color-mix(in srgb, var(--c-ink) 10%, transparent)}
  .zh-card-head{margin-bottom:14px}
  .zh-card-badge{display:inline-block;background:var(--red);color:var(--c-white);font-family:var(--f-display);
    font-weight:800;font-size:13px;letter-spacing:.02em;padding:8px 14px;border-radius:var(--r-pill)}
  .zh-card-badge b{font-size:15px;margin-right:4px}
  .zh-card h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:18px;
    letter-spacing:.02em;color:var(--ink);margin:0 0 4px}
  .zh-card ul{list-style:none;padding:0;margin:14px 0 20px;display:grid;gap:12px}
  .zh-card li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;font-weight:600;
    color:var(--ink);line-height:1.45}
  .zh-card li svg{flex:none;color:var(--red);margin-top:2px}
  .zh-card .btn{width:100%;justify-content:center;font-size:14px;padding:13px 20px}


/* ===== z realizacie.html ===== */
/* ===== Realizácie - page CSS ===== */
  .rh{background:var(--paper);border-bottom:1px solid var(--line)}
  .rh .wrap{padding:56px 24px 46px}
  .rh h1{font-size:clamp(36px,4.6vw,60px);color:var(--ink);max-width:18ch}
  .rh h1 em{color:var(--red);font-style:normal}
  .rh .lead{color:var(--ink-2);font-size:17px;line-height:1.6;max-width:62ch;margin:18px 0 0}
  .rh .b2b-stats{margin-top:38px;max-width:none}
  .rh .b2b-stats b{color:var(--ink)}
  .rh .b2b-stats span{color:var(--ink-2)}

  .projects{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .proj{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
    transition:box-shadow .18s}
  .proj:hover{box-shadow:0 14px 34px color-mix(in srgb, var(--c-ink) 12%, transparent)}
  .proj .cover{position:relative;aspect-ratio:16/9;overflow:hidden}
  .proj .cover img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
  .proj:hover .cover img{transform:scale(1.04)}
  .proj .full{position:absolute;top:14px;right:14px;background:color-mix(in srgb, var(--c-dark) 78%, transparent);color:var(--c-white);font-size:10.5px;
    font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:7px 12px;border-radius:var(--r-pill)}
  .proj .pins{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:5px 5px 0}
  .proj .pins img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}
  .proj .pbody{padding:15px 18px 17px;display:flex;justify-content:space-between;align-items:center;gap:12px}
  .proj h3{font-size:19px;color:var(--ink);margin:0}
  .proj .ptype{flex:none;border:1.5px solid var(--red);color:var(--red);font-family:var(--f-display);
    font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.05em;padding:7px 13px;border-radius:var(--r-pill);white-space:nowrap}

  .cta-band{background:var(--red-dark);color:var(--c-white);position:relative;overflow:hidden;isolation:isolate}
  .cta-bg{position:absolute;inset:0;z-index:-1}
  .cta-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
  .cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,color-mix(in srgb, var(--c-red) 93%, transparent) 0%,color-mix(in srgb, var(--c-red-dark) 94%, transparent) 100%)}
  .cta-band .wrap{padding:56px 24px;text-align:center}
  .cta-band .eyebrow{color:var(--c-white);justify-content:center}
  .cta-band .eyebrow::before{background:var(--c-white)}
  .cta-band h2{color:var(--c-white);font-size:clamp(28px,3.6vw,44px);margin:14px 0 14px}
  .cta-band h2 em{color:var(--ink);font-style:normal}
  .cta-band p{color:color-mix(in srgb, var(--c-white) 94%, transparent);font-size:16px;max-width:56ch;margin:0 auto 26px;line-height:1.6}
  .cta-band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .btn-ink{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-display);font-weight:800;
    text-transform:uppercase;letter-spacing:.04em;font-size:15px;padding:15px 26px;border-radius:var(--r-pill);
    background:var(--ink);color:var(--c-white);transition:background .15s}
  .btn-ink:hover{background:var(--c-dark)}
  .btn-ghost-w{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-display);font-weight:800;
    text-transform:uppercase;letter-spacing:.04em;font-size:15px;padding:14px 24px;border:1.5px solid color-mix(in srgb, var(--c-white) 55%, transparent);
    border-radius:var(--r-pill);color:var(--c-white);transition:border-color .15s}
  .btn-ghost-w:hover{border-color:var(--c-white)}

  .proj .cover img,.proj .pins img{cursor:pointer}
  /* Lightbox */
  .lb{position:fixed;inset:0;background:color-mix(in srgb, var(--c-dark) 93%, transparent);z-index:100;display:none;
    align-items:center;justify-content:center}
  .lb.on{display:flex}
  .lb img{max-width:88vw;max-height:82vh;border-radius:var(--r-sm);box-shadow:0 30px 80px color-mix(in srgb, var(--c-dark) 50%, transparent)}
  .lb button{position:absolute;width:46px;height:46px;border-radius:50%;border:1.5px solid color-mix(in srgb, var(--c-white) 40%, transparent);
    background:color-mix(in srgb, var(--c-dark) 50%, transparent);color:var(--c-white);font-size:20px;cursor:pointer;display:flex;align-items:center;
    justify-content:center;transition:border-color .15s,background .15s}
  .lb button:hover{border-color:var(--c-white);background:var(--red)}
  .lb .lb-prev{left:18px;top:50%;transform:translateY(-50%)}
  .lb .lb-next{right:18px;top:50%;transform:translateY(-50%)}
  .lb .lb-close{top:18px;right:18px;font-size:24px}
  .lb .lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:var(--c-white);
    font-family:var(--f-display);font-weight:800;font-size:14px;letter-spacing:.08em}
  @media(max-width:980px){ .projects{grid-template-columns:1fr} }

/* ===== B2B stranky - mapovanie na bloky (len tema) ===== */
/* paticka tesnejsie pod B2B/Realizacie strankami (prototyp: footer.site{padding-top:58px}) */
main:has(.zh, .rh) ~ * footer.site{padding-top:58px}
/* hero zh: 3 deti v mriezke = text (skupina), kolaz/karta (skupina), statistiky (html) */
.zh .wrap>.wp-block-group{min-width:0}
.zh-collage>figure{margin:0}
.zh-collage>figure.main img,.zh-collage>img.main{width:100%;display:block;object-fit:cover;aspect-ratio:16/10.5;border-radius:var(--r-sm)}
.zh-collage>figure.mini{position:absolute;left:-10%;bottom:0;width:48%;margin:0}
.zh-collage>figure.mini img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-sm);border:4px solid var(--c-white);box-shadow:0 18px 38px color-mix(in srgb, var(--c-ink) 22%, transparent);display:block}
@media(max-width:980px){.zh-collage>figure.mini{left:-4%}}
.zh p.eyebrow,.zsec p.eyebrow,.lead-sec p.eyebrow,.rh p.eyebrow,.cta-band p.eyebrow,.ongym p.eyebrow{margin:0 0 6px}
.sec-head>.wp-block-group{min-width:0}
/* pozadie formularovej sekcie a CTA pasu z bloku Obrazok */
.lead-bg>figure,.cta-bg>figure{margin:0;position:absolute;inset:0}
.lead-bg>figure img,.cta-bg>figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.lead-sec>.wrap,.cta-band>.wrap{position:relative;z-index:1}
.ongym-visual>figure{margin:0}
/* realizacie: karty z CPT (blok amrep/realizacie), lightbox */
.proj .pins:empty{display:none} .proj .pins img[hidden]{display:none}
.faq .wp-block-details p.a{margin:0}
.zform .gdpr-row i.req{font-style:normal;color:var(--red)}
.zform button.btn:disabled{opacity:.6;cursor:wait}

/* ===== Moj ucet (Woo my-account markup) - styl podla kosika/pokladne ===== */
.acc-page{background:var(--paper)}
.acc-page .ko-head{padding:26px 0 8px}
.acc-page .ko-head h1{font-size:clamp(28px,3.4vw,40px);margin:0}
.acc{padding:10px 24px 60px}
.acc .woocommerce{display:block}
.acc .woocommerce-notices-wrapper:empty{display:none}
.acc .woocommerce-message,.acc .woocommerce-info,.acc .woocommerce-error{margin:0 0 14px}
.acc .woocommerce-error li,.acc .woocommerce-message li{list-style:none}
/* prihlasenie / registracia = dve biele karty vedla seba (alebo jedna v strede) */
.acc .u-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
.acc .woocommerce .u-columns.col2-set>.col-1,.acc .woocommerce .u-columns.col2-set>.col-2,.acc .woocommerce-page .col2-set .col-1,.acc .woocommerce-page .col2-set .col-2{width:auto;float:none;max-width:none;min-width:0}
.acc .woocommerce .col2-set.u-columns{display:grid}
.acc .woocommerce .col2-set.u-columns::before,.acc .woocommerce .col2-set.u-columns::after,.acc .woocommerce-page .col2-set::before,.acc .woocommerce-page .col2-set::after{display:none;content:none}
.acc .woocommerce-form-login__rememberme{margin:0 0 0 14px;vertical-align:middle}
.acc .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit){display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.acc form.woocommerce-form-login,.acc form.woocommerce-form-register,.acc form.woocommerce-ResetPassword,.acc .woocommerce-MyAccount-content,.acc form.woocommerce-EditAccountForm{background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 22px 20px}
.acc>.woocommerce>form.woocommerce-form-login,.acc>.woocommerce>form.woocommerce-ResetPassword,.acc>.woocommerce>.woocommerce-form-login{max-width:480px;margin:0 auto}
.acc .u-column1 h2,.acc .u-column2 h2,.acc .woocommerce-MyAccount-content h2,.acc .woocommerce-MyAccount-content h3,.acc form.woocommerce-ResetPassword h2{font-size:19px;margin:0 0 14px}
.acc .woocommerce-MyAccount-content h3{margin-top:22px}
.acc .woocommerce-MyAccount-content h2:not(:first-child){margin-top:24px}
.acc p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.acc p a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px} .acc p a:hover{color:var(--red)}
.acc .form-row{margin:0 0 12px}
.acc .form-row label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:.01em;margin:0 0 6px}
.acc .form-row label .required{color:var(--red);text-decoration:none}
.acc .form-row .optional{font-weight:500;color:var(--ink-2)}
.acc input.input-text,.acc select,.acc textarea,.acc .password-input{width:100%}
.acc input.input-text,.acc select,.acc textarea{height:46px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 14px;font-family:var(--f-body);font-size:15px;color:var(--ink);background:var(--c-white)}
.acc textarea{height:auto;min-height:90px;padding:12px 14px}
.acc input.input-text:focus,.acc select:focus,.acc textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-ink) 8%, transparent)}
.acc .password-input{position:relative;display:block}
.acc .show-password-input{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:22px;height:22px;background:none;border:0;cursor:pointer;color:var(--ink-2)}
.acc .show-password-input{width:24px;height:24px}
.acc .form-row-first,.acc .form-row-last{width:calc(50% - 6px);display:inline-block;vertical-align:top}
.acc .form-row-first{margin-right:12px}
.acc .woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 0 14px}
.acc .woocommerce-form-login__rememberme input{width:18px;height:18px;accent-color:var(--red);margin:0}
.acc .woocommerce-form-login__submit,.acc .woocommerce-form-register__submit,.acc .woocommerce-Button,.acc button.button,.acc a.button,.acc .woocommerce-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:14px;padding:0 22px;height:46px;border-radius:var(--r-pill);background:var(--red);color:var(--c-white);border:1.5px solid var(--red);cursor:pointer;text-decoration:none;transition:background .15s}
.acc .woocommerce-form-login__submit:hover,.acc .woocommerce-form-register__submit:hover,.acc .woocommerce-Button:hover,.acc button.button:hover,.acc a.button:hover,.acc .woocommerce-button:hover{background:var(--red-dark);border-color:var(--red-dark);color:var(--c-white)}
.acc a.button.view,.acc a.woocommerce-button.view,.acc .woocommerce-button.pay,.acc a.button.cancel,.acc .woocommerce-button.cancel{background:transparent;color:var(--ink);border-color:var(--ink);height:38px;padding:0 16px;font-size:12.5px;margin:0 4px 4px 0}
.acc a.button.view:hover,.acc a.woocommerce-button.view:hover,.acc a.button.cancel:hover,.acc .woocommerce-button.cancel:hover{background:var(--red);border-color:var(--red);color:var(--c-white)}
.acc .woocommerce-LostPassword,.acc .lost_reset_password p{font-size:13.5px}
.acc .woocommerce-privacy-policy-text p{font-size:12.5px}
/* prihlaseny: navigacia vlavo (pill odkazy) + obsah vpravo (biela karta) */
.acc .woocommerce:has(.woocommerce-MyAccount-navigation){display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
.acc .woocommerce:has(.woocommerce-MyAccount-navigation)>.woocommerce-notices-wrapper{grid-column:1/-1}
.acc .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:8px;background:var(--c-white);border:1px solid var(--line);border-radius:var(--r-card);display:grid;gap:4px}
.acc .woocommerce-MyAccount-navigation a{display:block;padding:11px 14px;border-radius:var(--r-pill);font-weight:700;font-size:14px;color:var(--ink);text-decoration:none;transition:background .15s,color .15s}
.acc .woocommerce-MyAccount-navigation a:hover{background:var(--paper);color:var(--red)}
.acc .woocommerce-MyAccount-navigation li.is-active a{background:var(--ink);color:var(--c-white)}
.acc .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--ink-2)}
/* tabulka objednavok / stiahnutia */
.acc table.shop_table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;font-size:14px}
.acc table.shop_table th,.acc table.shop_table td{padding:12px 14px;text-align:left;vertical-align:middle;border:0}
.acc table.shop_table thead th{background:var(--paper);font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:11.5px;letter-spacing:.06em;color:var(--ink)}
.acc table.shop_table tbody td,.acc table.shop_table tfoot th,.acc table.shop_table tfoot td{border-top:1px solid var(--line);color:var(--ink-2)}
.acc table.shop_table td a{color:var(--ink);font-weight:700;text-decoration:none} .acc table.shop_table td a:hover{color:var(--red)}
.acc table.shop_table .woocommerce-orders-table__cell-order-actions{white-space:nowrap}
.acc .woocommerce-orders-table__cell-order-status,.acc .order-status{font-weight:700;color:var(--ink)}
/* adresy */
.acc .woocommerce-Addresses{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.acc .woocommerce-Address{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px}
.acc .woocommerce-Address-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.acc .woocommerce-Address-title h2,.acc .woocommerce-Address-title h3{margin:0;font-size:16px}
.acc .woocommerce-Address-title a{font-size:13px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.acc .woocommerce-Address address{font-style:normal;font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:8px}
/* detail objednavky */
.acc .woocommerce-order-details,.acc .woocommerce-customer-details{margin-top:22px}
.acc .woocommerce-column--billing-address,.acc .woocommerce-column--shipping-address{display:inline-block;width:calc(50% - 8px);vertical-align:top}
.acc .woocommerce-column address{font-style:normal;font-size:14px;line-height:1.55;color:var(--ink-2)}
.acc mark{background:none;color:var(--ink);font-weight:700}
.acc fieldset{border:0;padding:0;margin:20px 0 0} .acc fieldset legend{font-size:15px;font-weight:800;margin:0 0 10px;padding:0}
@media(max-width:900px){.acc .woocommerce:has(.woocommerce-MyAccount-navigation){grid-template-columns:1fr} .acc .u-columns,.acc .woocommerce-Addresses{grid-template-columns:1fr} .acc .form-row-first,.acc .form-row-last{width:100%;display:block;margin-right:0} .acc .woocommerce-MyAccount-navigation ul{grid-template-columns:1fr 1fr} .acc .woocommerce-column--billing-address,.acc .woocommerce-column--shipping-address{width:100%;display:block}}