/* =========================================================================
   SPOJAK.sk — base.css
   Zdieľaný základ pre všetky stránky: dizajnové tokeny, tlačidlá, hlavička,
   navigácia, pätička, toast. Stránkovo-špecifické CSS (homepage.css,
   product.css) sa naň naväzuje a nikdy ho neduplikuje.
   ========================================================================= */

*{box-sizing:border-box;margin:0;padding:0}
:root{--red:#C8232C;--red-h:#A81C24;--ink:#1A1A1A;--d0:#0F0F0F;--d2:#2A2A2A;--green:#1F6F2D;--lgreen:#7DD49A;--greenbg:#E8F4EA;--blue:#2B5797;--pink:#FBEAEB;--b2b:#E85560;--bg:#F5F5F5;--ph:#F0F0F0;--muted:#6B6B6B;--line:#E5E5E5;--div:#EDEDED;--amber:#D97706;--amber-t:#B45309;--red-on-dark:#E85560;--rad:6px;--rad-lg:10px;--mono:'JetBrains Mono',ui-monospace,Consolas,monospace}
/* --amber-t: oranžová pre TEXT (#D97706 má na bielej len 3,19:1, #B45309 = 5,02:1; --amber ostáva
   na ikony a plochy). --red-on-dark: značková červená pre malý text na tmavom (#C8232C na #1A1A1A
   = 3,09:1, #E85560 = 4,89:1) — rovnaký odtieň ako eyebrow v hero titulky. */
html,body{background:#fff;font-family:'Inter',-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:400;color:var(--ink)}
.tnum{font-variant-numeric:tabular-nums}
[data-ic]{display:inline-flex;align-items:center;justify-content:center;line-height:0}
[data-ic]>svg{flex:none}

/* ---------------------------------------------------------------------------
   VIDITEĽNÝ FOKUS (WCAG 2.4.7). Predtým base.css neobsahoval ANI JEDNO pravidlo
   :focus — v Chrome/Safari tak `outline:none` z resetov a tmavé pozadia spôsobili,
   že používateľ klávesnice nevidel, kde sa nachádza. :focus-visible (nie :focus)
   nekreslí obrys pri kliknutí myšou, len pri Tab/klávesnici.
   --------------------------------------------------------------------------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--red);outline-offset:2px;border-radius:4px}
/* Na tmavom podklade (hero, utility bar, pätička, B2B pruh) je červený obrys
   nečitateľný — tam kreslíme biely. */
:where(.utility-bar,.footer,.slide[data-theme="dark"],.slide[data-theme="red"],.b2b-promo,.m-nav)
  :where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline-color:#fff}
/* Políčko hľadania: obrys kreslíme na CELÝ rám (.search-bar), nie na vnútorný <input>,
   ktorý má `outline:none` a nemá vlastné okraje — inak nebolo pri Tabe vidieť nič. */
.search-bar:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(26,26,26,.25)}
.search-bar input:focus-visible{outline:none}
.m-nav-search:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.m-nav-search input:focus-visible{outline:none}
/* Políčka s `outline:none` v stránkových CSS (kontakt.css, faq.css, homepage.css,
   error404.css) — :where() má nulovú špecifickosť, takže by ich pravidlo vyššie
   neprebilo. Tu dávame obrys adresne a s rovnakou silou selektora. */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible,
.nl .nl-row input:focus-visible,.nlstrip input:focus-visible{
  outline:3px solid var(--red);outline-offset:1px}
.nlstrip input:focus-visible{outline-color:#fff}
.fsearch:focus-within,.act .search-input:focus-within{
  outline:3px solid var(--red);outline-offset:2px}
.fsearch input:focus-visible,.act .search-input input:focus-visible{outline:none}

/* Vizuálne skryté, ale čitateľné pre čítačku obrazovky (labely políčok, doplnkový text).
   NIE display:none ani visibility:hidden — tie čítačka preskočí. */
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Preskočiť na obsah — prvý prvok v Tab poradí, viditeľný len pri fokuse. */
/* position:FIXED, nie absolute: odkaz je mimo .site-shell, takže by sa absolútne
   umiestnil voči dokumentu a pri zoscrollovanej stránke by „vyskočil" mimo obrazovky
   (merané: top:-60 aj po fokuse). Fixed ho ukotví k oknu. */
.skip-link{position:fixed;left:8px;top:-60px;z-index:9999;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 8px;font-size:14px;font-weight:600;text-decoration:none;
  transition:top .15s}
.skip-link:focus{top:0}

/* ---------------------------------------------------------------------------
   prefers-reduced-motion (WCAG 2.3.3): používateľ, ktorý si v systéme vypol
   animácie (vestibulárne poruchy, migrény), nesmie dostať plynulé scrollovanie
   ani automatický hero slider. JS to číta cez matchMedia; CSS tu vypína prechody.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* tlačidlá */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;border:1px solid transparent;text-decoration:none;white-space:nowrap;transition:transform .15s,background .15s,border-color .15s}
.btn [data-ic]{font-size:17px}
.btn:hover{transform:translateY(-1px)}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#b01f27}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:#000}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line)}.btn-outline:hover{border-color:var(--ink)}
.btn-outline-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}.btn-outline-w:hover{background:rgba(255,255,255,.08)}
.btn-out{background:#fff;color:var(--ink);border-color:var(--line)}.btn-out:hover{border-color:var(--ink)}
.btn.sm{padding:8px 13px;font-size:13px;border-radius:8px}

/* sekcie (zdieľaný rytmus nadpisov) */
.sec{padding:60px 48px}
.sec-head{text-align:center;margin-bottom:34px}
.sec-head .eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--red);font-weight:500;margin-bottom:12px}
.sec-head h2{font-size:32px;font-weight:500;letter-spacing:-0.8px;line-height:1.05}
.sec-head p{font-size:15px;color:var(--muted);margin-top:9px}
.sec-foot{text-align:center;margin-top:32px}

/* HEADER */
.utility-bar{background:#0F0F0F;color:rgba(255,255,255,.85);padding:7px 48px;display:flex;justify-content:space-between;font-size:12px}
.utility-bar .left,.utility-bar .right{display:flex;gap:24px;align-items:center}
.utility-bar span,.utility-bar a{display:inline-flex;align-items:center}.utility-bar [data-ic]{font-size:14px;margin-right:5px}
.utility-bar a{color:inherit;text-decoration:none}.utility-bar a:hover{color:#fff}
.utility-bar .b2b{color:#E85560}.utility-bar .b2b [data-ic]{color:#E85560}.utility-bar a.b2b:hover{color:#E85560}
.header{padding:16px 48px;background:#fff;border-bottom:.5px solid var(--line);display:flex;align-items:center;gap:28px}
/* color: logo je <a> — bez farby dedil modrú/fialovú farbu odkazu prehliadača */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.mark{width:42px;height:42px;background:var(--red);border-radius:9px;display:flex;align-items:center;justify-content:center;position:relative}
.mark [data-ic]{color:#fff;font-size:25px}
.mark .dot{position:absolute;bottom:-3px;right:-3px;width:12px;height:12px;background:var(--ink);border-radius:50%;border:2.5px solid #fff}
.brand-text{font-size:21px;font-weight:500;letter-spacing:-0.5px;line-height:1}.brand-text .red{color:var(--red)}
.brand-text small{display:block;font-size:9px;letter-spacing:3px;color:var(--muted);margin-top:4px;text-transform:uppercase}
.search-bar{flex:1;display:flex;align-items:center;background:#fff;border:1.5px solid #1A1A1A;border-radius:6px;padding:10px 14px;gap:10px;max-width:600px}
.search-bar [data-ic]{color:#6B6B6B;font-size:18px}.search-bar input{flex:1;background:transparent;border:none;outline:none;font-size:14px;font-family:inherit}
.header-icons{display:flex;gap:8px;align-items:center}
.header-icon{width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none}.header-icon [data-ic]{font-size:21px}
.header-icon.cart{background:var(--ink);color:#fff;padding:0 14px;width:auto;gap:8px;font-size:13px;font-weight:600;border-radius:6px}
.header-icon.cart .cart-count{background:var(--red);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;font-variant-numeric:tabular-nums}
.header-icon.cart .cart-count[hidden]{display:none}
.main-nav{padding:0 48px;background:#fff;border-bottom:1px solid var(--line);display:flex;gap:30px;align-items:center}
.main-nav a{padding:14px 0;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.main-nav a.akcia{color:var(--red)}.main-nav a.kontakt{color:var(--red)}.main-nav .spacer{flex:1;min-width:0}.main-nav [data-ic]{font-size:14px}
.main-nav a{white-space:nowrap}
/* Prechodové pásmo malých notebookov (769–1149 px): .main-nav má 14 položiek a pri
   gap:30px + padding:48px je súhrnná šírka ~1125 px, takže pod 1150 px pretekala
   vpravo (posledná položka „Kontakt") a vznikal vodorovný posun na CELOM webe.
   Pod 769 px sa .main-nav skrýva (hamburger), takže stačí zúžiť medzery v tomto pásme. */
@media(min-width:769px) and (max-width:1149px){
  .main-nav{padding:0 20px;gap:16px}
  .main-nav a,.svc-dd-t{font-size:13px}
}
@media(min-width:769px) and (max-width:979px){
  .main-nav{padding:0 12px;gap:9px}
  .main-nav a,.svc-dd-t{font-size:12px}
  .main-nav a [data-ic],.svc-dd-t [data-ic]{font-size:12px}
  .main-nav a{gap:4px}
}
.m-hamb{display:none;width:42px;height:42px;border-radius:9px;align-items:center;justify-content:center;color:var(--ink);background:none;border:none;cursor:pointer;padding:0}.m-hamb [data-ic]{font-size:24px}
.svc-dd{position:relative;display:inline-flex;align-items:center}
.svc-dd-t{cursor:pointer;display:inline-flex;align-items:center;gap:5px;color:inherit;font:inherit;white-space:nowrap;background:none;border:none;padding:14px 0;font-size:14px;font-weight:500;color:var(--ink)}
.svc-dd:hover .svc-dd-t{color:var(--red)}
.svc-dd-t [data-ic]{font-size:14px}
.svc-dd-m{position:absolute;top:100%;right:0;min-width:220px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--red);box-shadow:0 14px 34px rgba(0,0,0,.16);border-radius:0 0 8px 8px;padding:7px;display:none;flex-direction:column;z-index:90}
.svc-dd:hover .svc-dd-m{display:flex}
.svc-dd.open .svc-dd-m{display:flex}

/* ---------- mobilné menu (slide-in panel, ovláda public/js/base.js) ---------- */
.m-nav-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299}
.m-nav-ov[hidden]{display:none}
.m-nav{position:fixed;top:0;right:0;bottom:0;width:86%;max-width:340px;background:#fff;z-index:300;display:flex;flex-direction:column;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.2);transform:translateX(0);transition:transform .25s ease}
.m-nav[hidden]{display:none}
.m-nav-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.m-nav-title{font-weight:600;font-size:16px;color:var(--ink)}
.m-nav-close{width:36px;height:36px;border-radius:8px;background:var(--bg);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
/* Vyhľadávanie v mobilnom menu — v hlavičke je .search-bar pod 768px skrytá. */
.m-nav-search{display:flex;align-items:center;gap:10px;margin:14px 18px 6px;padding:10px 12px;background:#fff;border:1.5px solid #1A1A1A;border-radius:6px}
.m-nav-search [data-ic]{font-size:18px;color:#6B6B6B;flex:none}
.m-nav-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;font:inherit;font-size:14px;color:var(--ink)}
.m-nav-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.m-nav a{display:flex;align-items:center;gap:11px;padding:13px 18px;font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--bg)}
.m-nav a [data-ic]{font-size:18px;color:var(--muted)}
.m-nav a.akcia{color:var(--red)}.m-nav a.akcia [data-ic]{color:var(--red)}
.m-nav a.kontakt{color:var(--red)}.m-nav a.kontakt [data-ic]{color:var(--red)}
.m-nav-sep{height:8px;background:var(--bg)}
.svc-dd-m a{display:flex!important;align-items:center;gap:10px;padding:9px 11px!important;font-size:13px!important;font-weight:500!important;color:var(--ink)!important;border-radius:6px;text-decoration:none;white-space:nowrap}
.svc-dd-m a:hover{background:var(--bg);color:var(--red)!important}
.svc-dd-m a [data-ic]{font-size:18px;color:var(--red)}

/* FOOTER */
.footer{background:#0F0F0F;color:rgba(255,255,255,.6)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding:46px 48px 36px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer .fbrand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer .fbrand .mark{width:32px;height:32px;border-radius:7px}.footer .fbrand .mark [data-ic]{font-size:19px}.footer .fbrand .mark .dot{width:9px;height:9px;border-width:2px}
.footer .fbrand .ftext{font-size:18px;font-weight:500;color:#fff}.footer .fbrand .ftext .red{color:var(--red)}
.footer .fabout{font-size:13px;line-height:1.6;color:rgba(255,255,255,.5);max-width:280px}
.footer .fabout-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:500;color:var(--lgreen);text-decoration:none}.footer .fabout-link:hover{color:#fff}.footer .fabout-link [data-ic]{font-size:15px}
.footer .fcol h4{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:500}
.footer .fcol a{display:block;font-size:13px;color:rgba(255,255,255,.55);text-decoration:none;margin-bottom:10px}.footer .fcol a:hover{color:#fff}
/* Kontrast (WCAG 1.4.3): biela .4 na #0F0F0F mala 3,81:1 — pri 12 px treba 4,5:1. .55 = 6,24:1,
   rovnaký odtieň ako odkazy v stĺpcoch pätičky (.fcol a). */
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 48px;font-size:12px;color:rgba(255,255,255,.55);gap:16px;flex-wrap:wrap}
.footer-bottom .flinks{display:flex;gap:20px}.footer-bottom .flinks a{color:rgba(255,255,255,.55);text-decoration:none}.footer-bottom .flinks a:hover{color:#fff}

/* TOAST */
.toast{position:fixed;top:24px;right:24px;background:#1A1A1A;color:#fff;padding:14px 20px;border-radius:10px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(-10px);transition:.25s;z-index:200;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}.toast [data-ic]{font-size:18px;color:var(--lgreen)}
/* Chybová varianta (SpojakToast(..., 'error')). Chyba sa NEodlišuje len farbou —
   toast.js vymení ikonu na výstražný trojuholník a text dostane predponu
   „Chyba:" pre čítačku obrazovky (WCAG 1.4.1 Use of Color). */
.toast.is-error{background:#7F1D1D}
.toast.is-error [data-ic]{color:#FCA5A5}

/* BREADCRUMBS (zdieľané — sivý pruh pod hlavičkou) */
.crumbs{background:var(--bg);padding:11px 48px;font-size:12px;color:var(--muted);border-bottom:.5px solid var(--line)}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--red)}
.crumbs .sep{margin:0 8px;color:#C9C9C9}.crumbs strong{color:var(--ink);font-weight:500}

/* =========================================================================
   SITE SHELL — celý web v centrovanom 1400px boxe na sivom „frame" pozadí.
   Farebné pruhy (hero, b2b, newsletter, footer) sú vnútri boxu, takže
   nesiahajú po kraj okna; po stranách presvitá sivé pozadie.
   POZOR: .site-shell NESMIE mať overflow / transform / filter / contain /
   will-change — vytvorilo by to nový containing block a zlomilo by sticky
   .ptabs (top:0, aj na desktope) a .mcta (bottom:0) aj fixed .toast.
   ========================================================================= */
html{background:#DBDBDB}
body{background:#DBDBDB}
.site-shell{max-width:1400px;margin:0 auto;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.04),0 18px 60px rgba(0,0,0,.10);min-height:100vh}

/* MOBILE — zdieľaná chróm (header/nav/footer) */
@media(max-width:768px){
  /* Na mobile vypneme rám: shell cez celú šírku, bez tieňa a bez sivého
     pozadia. html:root má vyššiu špecificitu než typové html/body vyššie,
     takže biele pozadie vyhrá nezávisle od poradia pravidiel v súbore. */
  html:root{background:#fff}html:root body{background:#fff}
  .site-shell{max-width:100%;box-shadow:none;min-height:0}
  .utility-bar{padding:7px 16px;font-size:11px}.utility-bar .left{gap:12px}.hide-m{display:none!important}
  .header{padding:12px 16px;gap:12px}.brand-text{font-size:18px}.brand-text small{display:none}
  .search-bar,.main-nav{display:none}.m-hamb{display:flex}
  .sec{padding:40px 16px}
  .sec-head h2{font-size:25px}
  .footer-top{grid-template-columns:1fr 1fr;gap:26px;padding:34px 18px 28px}.footer-bottom{flex-direction:column;align-items:flex-start;padding:18px 18px}
  /* Drobčeky: desktopových 48 px po stranách zaberalo na telefóne štvrtinu šírky. Jedno miesto
     pre všetky stránky (predtým len katalog.css, b2b.css a product.css si to riešili samy). */
  .crumbs{padding:10px 16px}
}

/* ===================================================================
   ZDIEĽANÉ KOMPONENTY (vyextrahované z page CSS — DRY refaktor)
   - .nohit   : prázdny výsledok hľadania (faq, magazin, …)
   - .gtable  : generická dátová tabuľka (legal, magazin-clanok, service…)
   - .nlstrip : newsletter pruh (akcie, magazin) — komponent x-site.newsletter
   =================================================================== */

/* prázdny výsledok */
.nohit{display:none;text-align:center;padding:40px;color:var(--muted)}
.nohit.show{display:block}
.nohit [data-ic]{font-size:38px;color:var(--line);margin-bottom:10px}

/* generická tabuľka */
.gtable{width:100%;border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden;margin:6px 0 16px;border-collapse:collapse}
.gtable th{background:var(--ink);color:#fff;font-size:12px;font-weight:600;text-align:left;padding:11px 14px}
.gtable td{padding:11px 14px;font-size:13.5px;border-top:1px solid var(--div)}.gtable tr:nth-child(even) td{background:var(--bg)}.gtable td:first-child{font-weight:600}
.gtable .tnum{font-variant-numeric:tabular-nums}.gtable .free{color:var(--green);font-weight:600}

/* newsletter pruh (komponent x-site.newsletter) */
.nlstrip{margin:24px 28px 40px;background:var(--ink);color:#fff;border-radius:var(--rad-lg);padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.nlstrip .nt{font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px}.nlstrip .nt [data-ic]{font-size:21px;color:var(--red)}
.nlstrip .ns{font-size:13px;color:rgba(255,255,255,.7);margin-top:3px}
/* formulár v pruhu: riadok e-mail + tlačidlo (.nl-row), pod ním súhlas a chyba */
.nlstrip form{display:flex;flex-direction:column;align-items:stretch;gap:8px;max-width:420px}.nlstrip input{border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);border-radius:var(--rad);padding:11px 14px;font:inherit;font-size:14px;color:#fff;width:230px;outline:none}.nlstrip input::placeholder{color:rgba(255,255,255,.5)}

/* newsletter — riadok e-mail+tlačidlo, súhlas, chyba, potvrdenie. ZDIEĽANÉ pre veľký blok na
   titulke (.nl, homepage.css) aj pruh .nlstrip (magazín, články, akcie). Predtým boli tieto
   pravidlá skopírované v homepage.css, magazin.css, magazin-clanok.css a akcie.css. */
.nl-row{display:flex;gap:8px;width:100%}
.nl-consent{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:rgba(255,255,255,.7);line-height:1.5;cursor:pointer;text-align:left}
/* [type] zvyšuje špecificitu nad `.nlstrip input` (pole e-mailu), ktoré by checkbox roztiahlo */
.nl-consent input[type="checkbox"]{flex:0 0 16px;width:16px;height:16px;min-width:0;padding:0;margin-top:2px;accent-color:var(--red);border:none;background:none}
.nl-consent a{color:#fff}
.nl-err{display:none;font-size:12.5px;color:#FF8A8A}
.nl-done{color:#fff;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:9px}.nl-done [data-ic]{color:var(--lgreen);font-size:20px}

/* 320–380 px: s položkami v košíku ukazuje tlačidlo košíka sumu („7,80 €") a hlavička pretekala
   o 13 px (merané pri 320 px). Užšie medzery a odsadenie to vrátia do šírky. */
@media(max-width:380px){
  .header{gap:8px}.header-icons{gap:4px}
  .header-icon.cart{padding:0 10px;gap:6px}
}

@media(max-width:860px){
  .gtable{display:block;overflow-x:auto;white-space:nowrap}
  .nlstrip{margin:18px 16px 32px}.nlstrip form{width:100%;min-width:0;max-width:none}.nlstrip input{flex:1;width:auto;min-width:0}
}

/* ===== LIŠTA SÚHLASU S COOKIES =====
   Web dnes nepoužíva žiadne sledovacie skripty (iba nevyhnutné cookies: relácia, ochrana
   formulárov). Lišta je tu preto najmä ako príprava — keď pribudne Analytics, zavesí sa
   naň cez SpojakConsent.onAccept(). Viď public/js/cookies-consent.js. */
.ckbar{position:fixed;left:0;right:0;bottom:0;z-index:400;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(0,0,0,.09);transform:translateY(110%);transition:transform .25s ease}
.ckbar.show{transform:translateY(0)}
.ckbar .ckin{max-width:1180px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ckbar .cktxt{flex:1;min-width:0;font-size:13px;line-height:1.5}
.ckbar .cktxt b{display:block;font-size:14px;margin-bottom:2px}
.ckbar .cktxt span{color:var(--muted)}
.ckbar .cktxt a{color:var(--red);text-decoration:underline}
.ckbar .ckbtns{display:flex;gap:8px;flex-shrink:0}
@media(max-width:560px){
  .ckbar .ckin{gap:12px}
  .ckbar .ckbtns{width:100%}
  .ckbar .ckbtns .btn{flex:1;justify-content:center}
}

/* ---------------------------------------------------------------------------
   SPÄTNÁ VÄZBA (x-site.feedback, public/js/feedback.js) — malé plávajúce tlačidlo pri pravom
   okraji a panel s formulárom. z-index nad obsahom, ale pod mobilným menu (299/300) a modálmi
   (300). Na mobile len ikona a panel ako spodný list cez celú šírku (nad lištou cookies).
   --------------------------------------------------------------------------- */
.fb [hidden]{display:none !important}
.fb-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:150;display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 7px;background:var(--ink);color:#fff;border:0;border-radius:8px 0 0 8px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;line-height:1;box-shadow:-2px 2px 10px rgba(0,0,0,.18)}
.fb-tab:hover,.fb-tab[aria-expanded="true"]{background:#000}
.fb-tab [data-ic]{font-size:16px}
.fb-tab-t{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.02em}
.fb-panel{position:fixed;right:46px;top:50%;transform:translateY(-50%);z-index:151;width:min(340px,calc(100vw - 62px));max-height:calc(100vh - 32px);overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:var(--rad-lg);box-shadow:0 14px 40px rgba(0,0,0,.18);padding:16px 16px 14px}
.fb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.fb-title{font-size:16px;font-weight:700;line-height:1.3}
.fb-close{flex:none;width:30px;height:30px;margin:-4px -6px 0 0;border:0;border-radius:var(--rad);background:none;color:var(--muted);cursor:pointer;font-size:18px;display:inline-flex;align-items:center;justify-content:center}
.fb-close:hover{background:var(--bg);color:var(--ink)}
.fb-lead{font-size:13px;line-height:1.45;color:var(--muted);margin-bottom:12px}
.fb-lab{display:block;font-size:12.5px;font-weight:600;margin:0 0 5px}
.fb-opt{font-weight:400;color:var(--muted)}
.fb textarea,.fb input{display:block;width:100%;border:1px solid #CFCFCF;border-radius:var(--rad);padding:9px 11px;font-family:inherit;font-size:14px;line-height:1.4;color:var(--ink);background:#fff;margin-bottom:12px}
.fb textarea{resize:vertical;min-height:96px}
.fb textarea[aria-invalid="true"],.fb input[aria-invalid="true"]{border-color:var(--red)}
.fb-err{font-size:13px;color:var(--red);background:var(--pink);border-radius:var(--rad);padding:8px 10px;margin:-4px 0 12px}
.fb-send{width:100%;padding:11px 18px;font-size:14px}
.fb-send:disabled{opacity:.6;cursor:wait}
.fb-done{text-align:center;padding:8px 0 4px;outline:none}
.fb-done>[data-ic]{font-size:34px;color:var(--green);margin-bottom:8px}
.fb-done p{font-size:14px;line-height:1.45;margin-bottom:10px}
.fb-again{border:0;background:none;color:var(--red);font-family:inherit;font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer;padding:4px}
.fb-old{display:flex;gap:8px;align-items:flex-start;margin-top:14px;padding:10px 11px;background:var(--bg);border-radius:var(--rad);font-size:12.5px;line-height:1.45;color:var(--d2)}
.fb-old>[data-ic]{flex:none;font-size:16px;color:var(--muted);margin-top:1px}
.fb-old a{color:var(--red);font-weight:600}
@media (max-width:640px){
  .fb-tab{padding:9px 7px}
  .fb-tab-t{display:none}
  /* --fb-bottom nastaví feedback.js: 10 px, alebo nad lištu cookies, kým je zobrazená. */
  .fb-panel{right:8px;left:8px;width:auto;top:auto;bottom:var(--fb-bottom,10px);transform:none;max-height:calc(100dvh - var(--fb-bottom,10px) - 10px)}
}
@media (prefers-reduced-motion:no-preference){.fb-tab{transition:background .15s}}
@media print{.fb{display:none}}