/* =============================================================================
   secondhandonline.sk — paleta „Účtovná kniha"
   Mobile-first, bez frameworkov. Všetky farby sú tokeny v :root; tmavý režim
   predefinuje len ich hodnoty. V pravidlách nesmie stáť farebný literál.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Fonty — lokálne, žiadny Google Fonts (P21.1)

   Predtým sa ťahali z fonts.googleapis.com, čo pred prvým vykreslením znamenalo
   DNS + TLS na cudziu doménu a až potom druhé kolo requestov na gstatic.com.
   Teraz sú súbory na vlastnom serveri.

   Každá rodina má dva súbory: základná latinka (U+0000-00FF) a Latin Extended-A
   so slovenskou diakritikou (ľ š č ť ž ĺ ŕ ň ď). Prehliadač stiahne oba len
   vtedy, keď stránka znaky z oboch rozsahov naozaj obsahuje — o to sa stará
   unicode-range.

   Sú to variabilné fonty s osou váhy orezanou na rozsah, ktorý web používa
   (Bricolage 600–800, Inter 400–600, Spline 400–500), takže jeden súbor
   obsluhuje všetky rezy danej rodiny. Spolu 100 kB namiesto pôvodných 291 kB.

   font-display:swap — text je čitateľný okamžite v náhradnom fonte a prekreslí
   sa, až keď je ten náš načítaný. Nikdy neblokuje vykreslenie.
   -------------------------------------------------------------------------- */
@font-face {
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800;
  font-display:swap; src:url('../fonts/bricolage.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800;
  font-display:swap; src:url('../fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:'Inter'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url('../fonts/inter.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'Inter'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Symboly, ktoré Google v latin/latin-ext subsetoch nemá. Bez tohto súboru by
   ich kreslil systémový font — na inom zariadení iný tvar aj hrúbka.
   Vykresľujú sa v texte dediacom Inter: omrvinky (›), CTA „Detail →“,
   „← Späť na zoznam“ a presúvanie blokov (↑ ↓) v admine, odkaz na živú
   stránku (↗), „vyplniť odznova“ (↺), spustenie importu (▶), TOP produkt
   (★ ☆) a upozornenie (⚠).

   MUSÍ zostať za oboma hlavnými @font-face pravidlami pre Inter: tie
   deklarujú U+2000-206F aj U+2191 a U+2193, hoci tie glyfy nemajú, a pri
   prekrývajúcom sa unicode-range vyhráva neskôr definované pravidlo.
   Zoznam sa musí zhodovať so SYMBOLY v db/p21_fonty.py. */
@font-face {
  font-family:'Inter'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url('../fonts/inter-symboly.woff2') format('woff2');
  unicode-range:U+203A,U+2190-2193,U+2197,U+21BA,U+25B6,U+2605,U+2606,U+26A0;
}
@font-face {
  font-family:'Spline Sans Mono'; font-style:normal; font-weight:400 500;
  font-display:swap; src:url('../fonts/spline-mono.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'Spline Sans Mono'; font-style:normal; font-weight:400 500;
  font-display:swap; src:url('../fonts/spline-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  color-scheme: light;
  /* --------------------------------------------------------------------- */
  /* Paleta „Sítotlač" (P25). Indigo nesie, ružová ukazuje.                 */
  /*                                                                        */
  /* Ružová je AKCENT, nie plocha: podčiarknutie, jedno CTA, detail         */
  /* v grafike. Ružové výplne sekcií sa nerobia — akcent, ktorý je všade,   */
  /* prestáva byť akcentom a stane sa z neho pozadie.                       */
  /*                                                                        */
  /* Tmavú sadu má blok @media nižšie. Mená tokenov sú v oboch režimoch     */
  /* rovnaké, menia sa len hodnoty — pravidlá pod týmto blokom o režime     */
  /* nevedia a vedieť nemajú.                                               */
  /* --------------------------------------------------------------------- */

  /* --- základné plochy a text --- */
  --paper:#F7F5F2;
  --ink:#14161A;
  --muted:#5A5F68;
  --line:#E3DFD9;
  --surface:#FFFFFF;

  /* --- značka --- */
  --primar:#23306B;           /* primárna (indigo) – odkazy, CTA, .brand */
  --primar-h:#18224E;         /* tmavšia: hover primárneho CTA */
  --tint:#EDEFF9;           /* jemné indigové pozadie blokov */
  --pruh:#E3E7F6;           /* druhý pruh v šrafovanom pozadí */

  /* --- akcent (ružová) --- */
  /* --akcent je DEKORAČNÁ: 3,45:1 na papieri, stačí na pruhy a podčiarknutia,
     nie na text. Na text a na plochy s textom je --akcent-text (5,91:1). */
  --akcent:#E8467C;
  --akcent-text:#B81552;
  --akcent-text-h:#8F1041;     /* hover ružového CTA */

  /* --- značka ---
     Logo je inline SVG a číta tieto dva tokeny. Vlastné tokeny (nie priamo
     --primar a --akcent) sú tu preto, že priesečník nesmie vzniknúť
     priehľadnosťou — miešaním by v tmavom režime vzniklo blato — a zároveň
     sa jeho hodnota musí v tmavom režime správať inak než --akcent. */
  --logo-tvar:var(--primar);
  --logo-prekryv:var(--akcent);

  /* --- doplnkový akcent pre „nevýhody" --- */
  --vystraha:#A32A2A;

  /* --- text na farebnej ploche ---
     V tmavom režime je primárna farba svetlá, takže text na nej musí byť
     TMAVÝ. Preto tieto tokeny existujú a v pravidlách nikdy nestojí #fff. */
  --na-farbe:#FFFFFF;
  --na-farbe-jemny:#E6EAF8;

  /* --- tmavý panel (pätička, admin sidebar) ---
     Je tmavý v OBOCH režimoch, preto má vlastný token. Predtým používal
     --primar-h, ktorá je zároveň hover stav — v tmavom režime by sa
     zosvetlila a pätička by zbelela. */
  --tmavy-panel:#18224E;
  --na-panele:#C3CBEA;
  --na-panele-muted:#8E98C0;
  --na-panele-jasny:#FFFFFF;

  /* --- prekrytie fotiek: tmavé v oboch režimoch --- */
  --scrim:rgba(20,22,26,.78);
  --na-scrim:#FFFFFF;
  --na-scrim-jemny:#D8DEF2;

  /* --- stavové farby v admine --- */
  --ok-bg:#E7F1EA;    --ok-text:#1D4630;   --ok-line:#BBD8C6;
  --err-bg:#FBEAE7;   --err-text:#7A2118;  --err-line:#F0CCC5;
  --top-bg:#FCE7EF;   --top-text:#8F1041;  --top-line:#F3BCD2;
  --off-bg:#F1EFEA;
  --riadok-hover:#FAF9F6;

  /* --- priesvitné odvodeniny --- */
  --hlavicka:rgba(247,245,242,.9);
  --sekcia-tint:rgba(237,239,249,.55);
  --line-jemna:rgba(227,223,217,.6);
  --zar-primar:rgba(35,48,107,.10);
  --zar-akcent:rgba(232,70,124,.16);

  /* --- tvary --- */
  --radius:14px;
  --radius-s:12px;
  --radius-l:16px;

  /* --- tiene ---
     Celý shorthand je token, nie len farba. Tieň vo farbe inkoustu je na
     tmavom pozadí neviditeľný a v tmavom režime treba aj vyššiu krytnosť —
     to sa nedá vyriešiť zámenou jednej hodnoty. */
  --tien:0 1px 2px rgba(20,22,26,.05), 0 6px 20px rgba(20,22,26,.07);
  --tien-h:0 2px 6px rgba(20,22,26,.09), 0 14px 34px rgba(20,22,26,.11);
  --tien-panel:0 2px 12px rgba(0,0,0,.20);

  /* --- písmo a šírka --- */
  --pismo-nadpis:"Bricolage Grotesque", system-ui, sans-serif;
  --pismo-text:"Inter", system-ui, sans-serif;
  --pismo-mono:"Spline Sans Mono", ui-monospace, monospace;

  --obal:1140px;
}

/* --------------------------------------------------------------------------
   Tmavý režim
   --------------------------------------------------------------------------
   Predefinuje sa VÝHRADNE obsah :root. Žiadne pravidlo nižšie sa neduplikuje
   a nič nemá vlastnú tmavú verziu — inak by sa dve sady rozišli a oprava by
   sa musela robiť dvakrát.

   Poradie: tento blok je v súbore za :root, takže pri rovnakej špecificite
   vyhráva. Neprepisuj ho vyššie.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper:#101218;
    --ink:#ECEDF2;
    --muted:#A0A4AF;
    --line:#2A2E3A;
    --surface:#191C25;

    /* Tmavé indigo na tmavom pozadí by nebolo vidieť, preto sa primárna
       farba v tmavom režime OBRACIA na svetlú a hover ju ešte zosvetlí. */
    --primar:#93A6E8;
    --primar-h:#B2C0F0;
    --tint:#1E2333;
    --pruh:#242A3C;

    --akcent:#FF7FA8;
    --akcent-text:#FF9CBC;
    --akcent-text-h:#FFB9D0;

    --vystraha:#F08A80;

    /* Priesečník loga NIE JE v tmavom režime --akcent. Tvary sú tu svetlé
       (#93A6E8) a --akcent (#FF7FA8) má voči nim kontrast 1,00:1 — majú
       zhodnú svetlosť, takže priesečník by v odtieňoch sivej a pre časť
       farbosleposti zmizol úplne. Tmavšia ružová dáva 3,82:1 a zostáva
       ružová. Toto je meraný dôvod, nie vec vkusu — nemeň to späť. */
    --logo-tvar:var(--primar);
    --logo-prekryv:#8F1041;

    /* Primárna je tu svetlá → text na nej je tmavý. */
    --na-farbe:#101218;
    --na-farbe-jemny:#1B2033;

    --tmavy-panel:#161A24;
    --na-panele:#C3CBEA;
    --na-panele-muted:#98A2C8;
    --na-panele-jasny:#FFFFFF;

    --scrim:rgba(6,7,10,.80);
    --na-scrim:#FFFFFF;
    --na-scrim-jemny:#D8DEF2;

    --ok-bg:#15241B;    --ok-text:#8FD0A4;   --ok-line:#2B4636;
    --err-bg:#2A1512;   --err-text:#F2A396;  --err-line:#4A241E;
    --top-bg:#2B1522;   --top-text:#FFA8C6;  --top-line:#4C2437;
    --off-bg:#1E212A;
    --riadok-hover:#1E2029;

    --hlavicka:rgba(16,18,24,.9);
    --sekcia-tint:rgba(30,35,51,.5);
    --line-jemna:rgba(42,46,58,.7);
    --zar-primar:rgba(147,166,232,.10);
    --zar-akcent:rgba(255,127,168,.14);

    /* Na tmavom pozadí nie je tieň vidieť pri nízkej krytnosti. */
    --tien:0 1px 2px rgba(0,0,0,.50), 0 6px 20px rgba(0,0,0,.45);
    --tien-h:0 2px 6px rgba(0,0,0,.55), 0 14px 34px rgba(0,0,0,.50);
    --tien-panel:0 2px 12px rgba(0,0,0,.60);
  }
}

/* ----------------------------------------------------------------- základ */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:var(--pismo-text);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:16px;
}
/* ------------------------------------------------------ formulárové polia
   FARBA TEXTU V POLI SA DEDÍ Z TOKENU, NIE Z PREHLIADAČA.

   `<input>`, `<select>` a `<textarea>` nededia `color` z `body` — majú
   vlastnú hodnotu z UA štýlu prehliadača, a tá je čierna. Kým malo pole biele
   pozadie, nikto si to nevšimol. Odkedy je `background` token, ktorý sa
   v tmavom režime stmaví, ostala v ňom čierna na tmavom: **1,21:1**, teda
   text, ktorý používateľ pri písaní nevidí.

   Bola to tá istá chyba na SIEDMICH miestach naraz — hero na úvode, pole
   poradcu, filtre katalógu, prihlásenie a tri skupiny polí v admine. Každé
   z nich si nastavovalo `background` a ani jedno `color`. Preto sa to
   opravuje raz, tu, a nie siedmimi doplnenými riadkami: ôsme pole, ktoré
   raz pribudne, by ten riadok zase nemalo.

   `font:inherit` je z rovnakého dôvodu — bez neho pole píše systémovým
   fontom vo veľkosti 13,33 px. */
input, select, textarea, optgroup, option { color:var(--ink); font-family:inherit; }

/* Placeholder je tlmený FARBOU, nie priehľadnosťou.

   Firefox dáva placeholderu `opacity: 0.54` z vlastného štýlu. Keby sa
   nechala platiť, `--muted` by sa zmiešal s pozadím na 2,5–2,8:1 podľa
   režimu — teda pod prah v OBOCH. A nebolo by to vidieť v žiadnom meraní
   tokenov, lebo tokeny by zostali rovnaké; zmenil by ich až prehliadač.
   Preto `opacity:1` a tlmenie výhradne hodnotou `--muted`. */
input::placeholder, textarea::placeholder { color:var(--muted); opacity:1; }

img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:var(--pismo-nadpis); line-height:1.15; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em; }
h1 { font-size:clamp(1.8rem,4vw,2.6rem); }
h2 { font-size:clamp(1.4rem,2.6vw,1.9rem); }
h3 { font-size:1.05rem; }
p { margin:0 0 1rem; }
.lead { color:var(--muted); font-size:1.05rem; }

.obal { max-width:var(--obal); margin:0 auto; padding:0 20px; }
.sekcia { max-width:var(--obal); margin:0 auto; padding:42px 20px; }
.sekcia.stred { text-align:center; }
.sekcia-hlava { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.sekcia-hlava h2 { margin:0; }
.odkaz-viac { color:var(--primar); font-weight:600; white-space:nowrap; }
.odkaz-viac:hover { color:var(--akcent-text); }

/* --------------------------------------------------------------- tlačidlá */
.cta {
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--pismo-text); font-weight:600; font-size:.96rem;
  padding:.7em 1.15em; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.cta:hover { transform:translateY(-1px); }
.cta-primar { background:var(--primar); color:var(--na-farbe); }
.cta-primar:hover { background:var(--primar-h); }
.cta-akcent { background:var(--akcent-text); color:var(--na-farbe); }
.cta-akcent:hover { filter:brightness(.95); }
.cta-ghost { background:transparent; border-color:var(--line); color:var(--ink); }
.cta-ghost:hover { background:var(--surface); }
.cta-velka { font-size:1.05rem; padding:.85em 1.5em; }
.cta-disabled { background:var(--line); color:var(--muted); cursor:not-allowed; }
.cta-disabled:hover { transform:none; }

/* --------------------------------------------------------------- hlavička */
.hlavicka { position:sticky; top:0; z-index:50; background:var(--hlavicka); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.hlavicka-in { max-width:var(--obal); margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:16px; }
.brand { font-family:var(--pismo-nadpis); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; color:var(--primar); }
.brand-bodka { color:var(--akcent-text); }
.navigacia { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.navigacia a { padding:.45em .75em; border-radius:999px; color:var(--muted); font-weight:500; font-size:.95rem; }
.navigacia a:hover { color:var(--ink); background:var(--tint); }
.navigacia a.je-aktivny { color:var(--primar); background:var(--tint); font-weight:600; }

.nav-prepinac, .hamburger { display:none; }
.hamburger { width:42px; height:38px; margin-left:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:4px; }
.hamburger span { width:18px; height:2px; background:var(--ink); border-radius:2px; }

/* --------------------------------------------------------------------- hero */
.hero { background:linear-gradient(180deg,var(--tint),var(--paper)); border-bottom:1px solid var(--line); }
.hero-in { max-width:840px; margin:0 auto; padding:64px 20px 56px; text-align:center; }
.hero-kicker { text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:600; color:var(--akcent-text); margin-bottom:14px; }
.hero-claim { font-size:clamp(2rem,5vw,3.2rem); margin-bottom:.4em; }
.hero-popis { color:var(--muted); font-size:1.1rem; max-width:620px; margin:0 auto 1.6em; }
.hero-hladaj { display:flex; gap:10px; max-width:600px; margin:0 auto; }
.hero-hladaj input { flex:1; padding:.9em 1.1em; border:1px solid var(--line); border-radius:999px; font-size:1rem; background:var(--surface); }
.hero-hladaj input:focus { outline:2px solid var(--primar); outline-offset:1px; }
.hero-tip { margin-top:12px; font-size:.85rem; color:var(--muted); }

/* --------------------------------------------------------- mriežka kariet */
.mriezka { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; }
.karta { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--tien); display:flex; flex-direction:column; transition:transform .1s ease, box-shadow .14s ease; }
.karta:hover { transform:translateY(-3px); box-shadow:var(--tien-h); }
.karta-media { aspect-ratio:4/3; background:var(--tint); }
.karta-media img { width:100%; height:100%; object-fit:cover; }
.karta-telo { padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.karta-typ { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--akcent-text); font-weight:600; }
.karta-nazov { font-size:1rem; font-weight:600; font-family:var(--pismo-text); line-height:1.3; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.karta-teaser { font-size:.85rem; color:var(--muted); margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.karta-pata { margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; }
.karta-cena { font-family:var(--pismo-mono); font-weight:500; font-size:1.05rem; color:var(--primar); }
.karta-cta { font-size:.85rem; color:var(--muted); font-weight:600; text-decoration:none; }
.karta:hover .karta-cta { color:var(--akcent-text); }
/* P12.6 – dvojvrstvová karta: foto/názov odkazy + partnerská poznámka pri zásobe */
.karta-foto { display:block; }
.karta-nazov a { color:inherit; text-decoration:none; }
.karta-nazov a:hover { color:var(--akcent-text); }
.karta-partner { font-size:.72rem; color:var(--muted); margin:6px 0 0; padding-top:6px; border-top:1px solid var(--line); }

/* záskok obrázka (IMGURL býva blokovaný / bez prípony) */
.is-empty { position:relative; }
.is-empty img { display:none; }
.is-empty::after {
  content:attr(data-nazov);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:14px; text-align:center; font-family:var(--pismo-nadpis); font-weight:600;
  font-size:.85rem; color:var(--primar); background:repeating-linear-gradient(135deg,var(--tint),var(--tint) 12px,var(--pruh) 12px,var(--pruh) 24px);
}

/* ----------------------------------------------------------------- dlaždice */
.dlazdice { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.dlazdica { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px; min-height:88px; display:flex; align-items:flex-end; font-family:var(--pismo-nadpis); font-weight:600; box-shadow:var(--tien); transition:transform .1s ease, box-shadow .14s; }
.dlazdica:hover { transform:translateY(-2px); box-shadow:var(--tien-h); color:var(--primar); }
.dlazdica-clanok { flex-direction:column; align-items:flex-start; gap:6px; }
.dl-titulok { font-size:1.05rem; }
.dl-popis { font-family:var(--pismo-text); font-weight:400; font-size:.85rem; color:var(--muted); }
.dl-coming { font-family:var(--pismo-text); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--akcent-text); border:1px solid var(--line); padding:.15em .5em; border-radius:999px; }

/* prehľad kategórií */
.dlazdice-kat { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.kat-karta { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--tien); }
.kat-karta-hlava { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.kat-nazov { font-family:var(--pismo-nadpis); font-weight:700; font-size:1.15rem; }
.kat-pocet { font-family:var(--pismo-mono); font-size:.82rem; color:var(--muted); }
.kat-deti { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.kat-deti a { font-size:.85rem; color:var(--muted); background:var(--tint); padding:.25em .6em; border-radius:999px; }
.kat-deti a:hover { color:var(--primar); }

/* ------------------------------------------------------------------ katalóg */
.kat-hlava { margin-bottom:22px; }
.filtre { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-bottom:26px; box-shadow:var(--tien); }
.filtre-row { display:grid; grid-template-columns:1.4fr 1fr 1fr .8fr .8fr 1fr auto; gap:10px; align-items:center; }
.filtre input, .filtre select { padding:.6em .7em; border:1px solid var(--line); border-radius:10px; font-size:.92rem; background:var(--paper); font-family:var(--pismo-text); width:100%; }
.filtre input:focus, .filtre select:focus { outline:2px solid var(--primar); outline-offset:1px; }
.pocet-vysledkov { color:var(--muted); margin:-8px 0 18px; }
.prazdne { background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius); padding:40px; text-align:center; color:var(--muted); }

/* stránkovanie */
.strankovanie { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; margin-top:34px; }
.str { min-width:40px; text-align:center; padding:.5em .7em; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font-weight:600; font-size:.9rem; }
.str:hover { border-color:var(--primar); color:var(--primar); }
.str.je-aktivna { background:var(--primar); color:var(--na-farbe); border-color:var(--primar); }
.str-dots { color:var(--muted); padding:0 2px; }

/* ----------------------------------------------------------------- omrvinky */
.omrvinky { color:var(--muted); font-size:.88rem; margin-bottom:14px; }
.omrvinky a { color:var(--primar); }
.omrvinky a:hover { color:var(--akcent-text); }
.omrvinky-spodne { margin:30px 0 0; padding-top:18px; border-top:1px solid var(--line); }

/* ------------------------------------------------------------------- detail */
.detail { max-width:860px; margin:0 auto; padding:36px 20px 56px; }
.geo-odsek { font-size:1.18rem; line-height:1.6; color:var(--ink); background:var(--tint); border-left:4px solid var(--primar); padding:18px 20px; border-radius:0 var(--radius) var(--radius) 0; margin:0 0 28px; }
.detail-hlava { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; margin-bottom:34px; }
.detail-media { aspect-ratio:1/1; background:var(--tint); border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line); }
.detail-media img { width:100%; height:100%; object-fit:cover; }
.detail-info { display:flex; flex-direction:column; gap:8px; }
.detail-typ { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--akcent-text); font-weight:600; }
.detail-nazov { font-size:clamp(1.5rem,3vw,2.1rem); margin:0; }
.detail-cena { font-family:var(--pismo-mono); font-size:1.8rem; font-weight:500; color:var(--primar); margin:6px 0 14px; }
.detail-mini { font-size:.82rem; color:var(--muted); margin:8px 0 0; }
.detail-aktual { font-size:.78rem; color:var(--muted); margin:6px 0 0; }
.kat-aktual { font-size:.82rem; color:var(--muted); margin:.35em 0 0; }

/* signature bloky */
.detail section { margin:26px 0; }
.detail section h2 { margin-bottom:.5em; }

.blok-verdikt { background:var(--primar); color:var(--na-farbe-jemny); border-radius:var(--radius-l); padding:24px 26px; }
.blok-verdikt h2 { color:var(--na-farbe); margin-top:0; }
.blok-verdikt p { margin:0; font-size:1.05rem; }

/* „Nehodí sa, ak" — jediný blok, ktorý zostal po dvoch dvojstĺpcových
   sekciách („Výhody/Nevýhody" a „Hodí sa / Radšej nie"). Je jednostĺpcový
   zámerne: sekcia sa vykreslí len pri skutočnom nesúlade, takže prázdna
   polovica mriežky by bola častý stav a čítala by sa ako chyba. */
.blok-nehodi { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--vystraha); border-radius:var(--radius); padding:18px 20px; }
.blok-nehodi h2 { margin-top:0; }
.blok-nehodi ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.blok-nehodi li { position:relative; padding-left:1.6em; font-size:.95rem; }
.blok-nehodi li::before { content:"✕"; position:absolute; left:0; color:var(--vystraha); font-weight:700; }

.blok-popis p { color:var(--ink); }
.param-tab { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.param-tab th, .param-tab td { text-align:left; padding:.7em 1em; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:top; }
.param-tab th { width:38%; color:var(--muted); font-weight:600; font-family:var(--pismo-text); }
.param-tab td { font-family:var(--pismo-mono); font-size:.88rem; }
.param-tab tr:last-child th, .param-tab tr:last-child td { border-bottom:0; }

/* --------------------------------------------------------------------- FAQ */
.faq-item { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:4px 18px; margin-bottom:10px; }
.faq-item summary { cursor:pointer; font-weight:600; padding:14px 0; font-family:var(--pismo-nadpis); list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; float:right; color:var(--akcent-text); font-weight:700; }
.faq-item[open] summary::after { content:"–"; }
.faq-item p { margin:0 0 14px; color:var(--muted); }

/* ----------------------------------------------------------------- pätička */
/* Pätička a bočný panel admina stoja na `--tmavy-panel`, ktorý je tmavý
   v OBOCH režimoch (#211E18 / #191712). Biele prekrytia s alfou, ktoré na nich
   nižšie uvidíš — `rgba(255,255,255,.06)` a spol. — preto NIE SÚ zabudnutá
   natvrdo napísaná farba: sú to priesvitné oddeľovače na ploche, ktorá sa
   s režimom nemení, a token by pre ne musel existovať v dvoch verziách
   s rovnakou hodnotou.

   Rozdiel, podľa ktorého sa to dá rozhodnúť pri ďalšom skene: farba, ktorá
   NIEČO POMENÚVA (text, plocha, značka), patrí do tokenu. Alfa, ktorá niečo
   ZOSVETLÍ alebo STMAVÍ nad už existujúcou plochou, je efekt, nie farba. */
.pata { background:var(--tmavy-panel); color:var(--na-panele); margin-top:40px; }
.pata-in { max-width:var(--obal); margin:0 auto; padding:48px 20px 28px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; }
.pata .brand { color:var(--na-panele-jasny); }
.pata-brand p { margin:.6em 0 0; font-size:.9rem; color:var(--na-panele-muted); max-width:34ch; }
.pata-nav { display:flex; flex-direction:column; gap:8px; }
.pata-nav a:hover, .pata-social a:hover { color:var(--na-panele-jasny); }
.pata-social { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:12px; }
.pata-social span { color:var(--na-panele-muted); font-size:.85rem; }
/* P13 – ikony sociálnych sietí (footer je tmavý → svetlá ikona, hover biela) */
.pata-social a { color:var(--na-panele); display:inline-flex; align-items:center; transition:color .12s ease; }
.pata-social a:hover { color:var(--na-panele-jasny); }
.pata-social svg { display:block; }
.pata-spodok p { margin:0 0 4px; }
.pata-affil { color:var(--na-panele-muted); }
.pata-firma a { color:inherit; text-decoration:underline; }
.pata-spodok { border-top:1px solid rgba(255,255,255,.08); text-align:center; padding:16px 20px; font-size:.8rem; color:var(--na-panele-muted); }

/* ------------------------------------------------------------- poradca */
/* Formulár sa musí zmestiť aj na 320 px a pri zväčšení písma na 200 %.
   Dve veci to držia pohromade:
   - min-width:0 na políčku. Bez neho ho flex nezmenší pod min-content šírku
     (input má implicitné size=20), takže tlačidlo vytlačí von z obrazovky.
   - flex-wrap na formulári. Keď sa políčko a tlačidlo do riadka nezmestia,
     tlačidlo ide pod políčko namiesto za okraj. */
/* POLE NA VETU V KATALÓGU.
   Do 3. 9. 2026 sa volalo `.poradca-form` a stálo na samostatnej stránke
   `/poradca`. Stránky splynuli, takže sa premenoval aj selektor — trieda
   pomenovaná podľa zrušenej stránky je návod, ako sa pomýliť.
   Základ 16ch je bod zlomu: užšie políčko na vetu nemá zmysel, vtedy sa
   radšej zalomí. Tlačidlo sa nesmie zmršťovať, inak sa oreže jeho popis. */
.kat-hladanie { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 12px; }
.kat-hladanie input { flex:1 1 16ch; min-width:0; padding:.85em 1.1em; border:1px solid var(--line); border-radius:999px; font-size:1rem; background:var(--surface); font-family:var(--pismo-text); }
.kat-hladanie button { flex:0 0 auto; }
.kat-hladanie input:focus { outline:2px solid var(--primar); outline-offset:1px; }
.kat-chipy { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 22px; }
.kat-chipy-label { font-size:.85rem; color:var(--muted); }
.kat-spat { margin:26px 0 0; }

/* Farba pod názvom karty. Ukazuje sa LEN pri farebnom dopyte — mimo neho
   by to bola náhodná farba z prvej položky feedu. */
.karta-farba { margin:2px 0 6px; font-size:.85rem; color:var(--muted); }
.karta-farba-ilustracna { font-style:italic; }
.pochopene-chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px; }
.ch-label { color:var(--muted); font-size:.85rem; }
.chip { background:var(--tint); border:1px solid var(--line); border-radius:999px; padding:.3em .8em; font-size:.88rem; }
.chip-k { color:var(--akcent-text); font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; }
.poradca-veta { background:var(--tint); border-left:4px solid var(--akcent); border-radius:0 var(--radius) var(--radius) 0; padding:14px 18px; font-size:1.05rem; margin:0 0 22px; }
.poradca-alt-nadpis { font-weight:600; color:var(--muted); margin:6px 0 12px; }
.poradca-tipy { color:var(--muted); }
.poradca-tipy a { color:var(--primar); font-weight:600; }
/* P12.6 – slotové výsledky + nápoveda s chipmi */
.poradca-slot { margin:0 0 34px; }
.poradca-slot-nadpis { font-size:1.15rem; margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.poradca-napoveda { background:var(--tint); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-top:8px; }
/* Bez spodnej medzery: chipy pod textom už nie sú (sú hore pri poli). */
.poradca-napoveda-text { margin:0; color:var(--muted); }
.poradca-chipy { display:flex; flex-wrap:wrap; gap:8px; }
.chip-klik { text-decoration:none; color:var(--primar); font-weight:600; transition:background .12s ease, border-color .12s ease; }
.chip-klik:hover { background:var(--surface); border-color:var(--akcent); }
#vysledky.je-nacitanie { opacity:.45; transition:opacity .12s; }
.poradca-viac { text-align:center; margin:8px 0 4px; }

/* Číslo otázky visí vľavo v okraji; pri úzkom okne sa vráti nad otázku. */
/* Vstup ostáva prístupný pre klávesnicu aj čítačky, len ho nevidno. */
/* Počítadlo dopĺňa JS, takže bez neho by ukazovalo stále nulu → skryté. */
.dlazdice-nastroje { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

/* ------------------------------------------------------------- galéria */
.galeria-filtre { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.gf { padding:.45em .95em; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:.9rem; font-weight:500; color:var(--muted); }
.gf:hover { color:var(--primar); border-color:var(--primar); }
.gf.je-aktivny { background:var(--primar); color:var(--na-farbe); border-color:var(--primar); }
.masonry { columns:4 240px; column-gap:14px; }
.m-dlazdica { display:block; width:100%; margin:0 0 14px; break-inside:avoid; position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface); box-shadow:var(--tien); }
.m-dlazdica:hover { box-shadow:var(--tien-h); }
.m-media { background:var(--tint); }
.m-media img { width:100%; height:auto; display:block; }
.m-media.is-empty { min-height:210px; }
.m-popis { position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; color:var(--na-scrim); display:flex; flex-direction:column; gap:2px; background:linear-gradient(transparent, var(--scrim)); opacity:0; transition:opacity .15s; }
.m-dlazdica:hover .m-popis, .m-dlazdica:focus .m-popis { opacity:1; }
.m-typ { font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--na-scrim-jemny); }
.m-nazov { font-size:.85rem; font-weight:600; line-height:1.25; }

/* -------------------------------------------------------------- responzíva */
@media (max-width:860px) {
  .detail-hlava { grid-template-columns:1fr; }
  .filtre-row { grid-template-columns:1fr 1fr; }
  .pata-in { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  .hamburger { display:flex; }
  /* Prepínač je na mobile jediný ovládač menu, takže nesmie zmiznúť z
     accessibility tree — `display:none` by ho urobil nefokusovateľným a menu
     by sa nedalo otvoriť klávesnicou. Skryjeme ho teda len vizuálne. */
  .nav-prepinac {
    display:block; position:absolute; width:1px; height:1px;
    margin:-1px; padding:0; border:0; overflow:hidden; white-space:nowrap;
    clip-path:inset(50%);
  }
  /* Fokus na skrytom prepínači musí byť vidieť na hamburgeri, ktorý ho zastupuje. */
  .nav-prepinac:focus-visible ~ .hlavicka-in .hamburger,
  .nav-prepinac:focus-visible + .hamburger {
    outline:2px solid var(--primar); outline-offset:2px;
  }
  .navigacia {
    position:fixed; inset:62px 0 auto 0; margin:0; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:8px 20px 16px;
    transform:translateY(-130%); transition:transform .2s ease; box-shadow:var(--tien);
  }
  .nav-prepinac:checked ~ .navigacia { transform:translateY(0); }
  .navigacia a { padding:.7em 0; border-radius:0; border-bottom:1px solid var(--line); }
  .filtre-row { grid-template-columns:1fr 1fr; }
  .hero-hladaj { flex-direction:column; }
  .hero-hladaj .cta { justify-content:center; }
  .pata-in { grid-template-columns:1fr; }
}
@media (max-width:420px) {
  .filtre-row { grid-template-columns:1fr; }
}

/* ============================================================ prihlásenie */
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,var(--tint),var(--paper)); padding:24px; }
.login-karta { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--tien-h); padding:34px 30px; width:100%; max-width:380px; text-align:center; }
.login-brand { font-family:var(--pismo-nadpis); font-weight:800; font-size:1.4rem; color:var(--primar); }
.login-nadpis { font-size:1.1rem; color:var(--muted); font-weight:600; margin:.2em 0 1.4em; }
.login-form { display:flex; flex-direction:column; gap:14px; text-align:left; }
.login-form label { display:flex; flex-direction:column; gap:5px; font-size:.85rem; color:var(--muted); font-weight:600; }
.login-form input { padding:.7em .9em; border:1px solid var(--line); border-radius:10px; font-size:1rem; font-family:var(--pismo-text); background:var(--paper); }
.login-form input:focus { outline:2px solid var(--primar); outline-offset:1px; }
.login-form .cta { justify-content:center; margin-top:6px; }
.login-chyba { background:var(--err-bg); color:var(--vystraha); border:1px solid var(--err-line); border-radius:10px; padding:.7em 1em; font-size:.9rem; margin:0 0 16px; }
.login-spat { margin:18px 0 0; font-size:.85rem; }
.login-spat a { color:var(--muted); }

/* ============================================================== admin rám */
.admin-body { margin:0; background:var(--paper); }
.admin-menu-prepinac { display:none; }
.admin-sidebar { position:fixed; top:0; left:0; bottom:0; width:230px; background:var(--tmavy-panel); color:var(--na-panele); display:flex; flex-direction:column; padding:18px 0; overflow-y:auto; }
.admin-brand { font-family:var(--pismo-nadpis); font-weight:800; font-size:1.2rem; color:var(--na-panele-jasny); padding:6px 22px 18px; }
.admin-menu { display:flex; flex-direction:column; }
.admin-menu a { color:var(--na-panele); padding:.7em 22px; font-size:.92rem; font-weight:500; border-left:3px solid transparent; }
.admin-menu a:hover { background:rgba(255,255,255,.06); color:var(--na-panele-jasny); }
.admin-menu a.je-aktivny { background:rgba(255,255,255,.10); color:var(--na-panele-jasny); border-left-color:var(--akcent); }
.admin-odhlasit { margin-top:14px; border-top:1px solid rgba(255,255,255,.08); color:var(--na-panele-muted) !important; }
.admin-hlavny { margin-left:230px; min-height:100vh; display:flex; flex-direction:column; }
.admin-top { display:flex; align-items:center; gap:14px; background:var(--surface); border-bottom:1px solid var(--line); padding:12px 24px; position:sticky; top:0; z-index:10; }
.admin-top-titulok { font-weight:600; color:var(--ink); }
.admin-top-user { margin-left:auto; display:flex; align-items:center; gap:14px; font-size:.9rem; }
.admin-meno { color:var(--muted); }
.admin-top-odhlasit { color:var(--primar); font-weight:600; }
.admin-hamburger { display:none; width:40px; height:36px; border:1px solid var(--line); border-radius:8px; background:var(--surface); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.admin-hamburger span { width:18px; height:2px; background:var(--ink); }
.admin-obsah { padding:28px 24px; max-width:1000px; }
.admin-hlava h1 { margin:0 0 .2em; }
.admin-lead { color:var(--muted); margin:0; }
.admin-staty { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin:22px 0; }
.admin-stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--tien); }
.admin-stat-cislo { display:block; font-family:var(--pismo-mono); font-size:1.9rem; font-weight:500; color:var(--primar); }
.admin-stat-popis { color:var(--muted); font-size:.85rem; }
.admin-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-top:18px; }
.admin-panel h2 { margin:0 0 .4em; font-size:1.1rem; }
.admin-panel-prazdny { border-style:dashed; color:var(--muted); }
@media (max-width:760px) {
  .admin-sidebar { transform:translateX(-100%); transition:transform .2s ease; z-index:30; box-shadow:var(--tien-h); }
  .admin-menu-prepinac:checked ~ .admin-sidebar { transform:translateX(0); }
  .admin-hlavny { margin-left:0; }
  .admin-hamburger { display:flex; }
}

/* ============================================================ logo / brand */
.brand { display:inline-flex; align-items:center; gap:10px; }
.znacka { display:block; flex:none; }
.brand-nazov { font-family:var(--pismo-nadpis); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; color:var(--primar); }
.pata-logo .brand-nazov { display:none; }

/* Značka a pod ňou doména.
   Stĺpec je vysoký ~36 px, teda NIŽŠÍ než 40 px obrazca — výšku hlavičky
   určuje naďalej značka a mobilné menu, ktoré sa otvára na pevnom
   `inset:62px`, sa nemá o čo posunúť. Pri zväčšení písma domény treba
   prepočítať aj tú hodnotu. */
.brand-blok { display:flex; flex-direction:column; line-height:1.06; min-width:0; }

/* Adresa, nie druhý nadpis: polovičné písmo, mono rez a `--muted`.
   Kontrast --muted na hlavičke je 6,71:1 (svetlá) a 6,92:1 (tmavá), teda
   AA aj pri tejto veľkosti. Tlmí sa farbou a rezom, NIE priehľadnosťou —
   `opacity` by rátaný kontrast zhodila pod prah a nebolo by to vidieť
   v žiadnom meraní, lebo tokeny by zostali rovnaké. */
.brand-domena { font-family:var(--pismo-mono); font-size:.7rem; font-weight:400; letter-spacing:.01em; color:var(--muted); margin-top:2px; }

/* Zmazané: `.brand-logo`, `.brand-text` a varianty `.bez-loga`. Boli to
   pravidlá pre rastrové <img> logo a jeho textový fallback; značka je dnes
   inline SVG, ktoré sa nemá ako nenačítať, a v šablónach tie triedy už
   nefigurujú. `.brand-text` bola navyše `display:none` — nová trieda sa
   preto volá `.brand-blok`, nie `.brand-text`. */

/* pätička: logo v jemnom svetlom chipe (pozadie pätičky je --tmavy-panel) */
.pata-logo { display:inline-flex; align-items:center; background:var(--paper); border-radius:12px; padding:10px 14px; box-shadow:var(--tien-panel); }

/* admin top-bar logo */
.admin-top-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.admin-logo { height:34px; max-height:34px; width:auto; display:block; }

/* ===================================================== jemné pozadie webu */
body {
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%232C4A3A' fill-opacity='0.045'/%3E%3C/svg%3E");
}
.sekcia + .sekcia { border-top:1px solid var(--line-jemna); }
/* decentné striedanie: každá druhá sekcia jemný tint nádych */
main > .sekcia:nth-of-type(even) { background:linear-gradient(180deg, var(--sekcia-tint), transparent 60%); }

/* ============================================================ sekčné kickery */
.sekcia-titulky { display:flex; flex-direction:column; gap:2px; }
.sekcia-kicker { text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; color:var(--akcent-text); margin:0; }
.sekcia-hlava h2 { margin:0; }

/* ================================================================= hero+ */
.hero { position:relative; overflow:hidden; background:linear-gradient(180deg, var(--tint) 0%, var(--paper) 72%); border-bottom:1px solid var(--line); }
.hero::before { content:""; position:absolute; inset:0; background:radial-gradient(70% 90% at 82% -20%, var(--zar-primar), transparent 60%); pointer-events:none; }
.hero-vizual { position:absolute; right:-6%; bottom:-34%; width:min(560px,70vw); aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--zar-akcent), var(--zar-primar) 55%, transparent 70%);
  filter:blur(2px); pointer-events:none; z-index:0; }
.hero-in { position:relative; z-index:1; }
.hero-kicker::after { content:""; display:block; width:38px; height:3px; background:var(--akcent); border-radius:3px; margin:8px auto 0; }

/* ============================================================ karty polish */
.karta { border-radius:var(--radius-l); }
.karta:hover { transform:translateY(-4px); box-shadow:var(--tien-h); }

/* Úzke displeje. Toto pravidlo musí stáť AŽ ZA blokom `logo / brand` vyššie:
   media query nepridáva špecificitu, takže rovnako silné `.brand` napísané
   neskôr v súbore by ho prebilo bez ohľadu na šírku okna. Prvá verzia to
   mala v hornej mobilnej sekcii a `gap` sa na mobile vôbec neuplatnil. */
@media (max-width:680px) {
  /* Pri 360 px stoja v riadku značka (40 px), text a hamburger (42 px).
     Vojde sa to aj v plnej veľkosti, ale bez rezervy — o stupeň menšie
     písmo dá vedľa hamburgera vzduch a doména zostane celá na jednom
     riadku. Zalomená doména by prestala vyzerať ako adresa. */
  /* `.brand-nazov` musí byť v tomto pravidle menovite: má vlastnú
     `font-size:1.35rem`, takže zmenšenie `.brand` by sa na ňu nepreniesol
     a rozdiel by bolo vidieť až v prehliadači, nie v CSS. */
  .brand { gap:8px; }
  .brand-nazov { font-size:1.18rem; }
  .brand-domena { font-size:.66rem; }
}

/* ============================================================ ADMIN CRUD (P7) */
.admin-flash { padding:12px 16px; border-radius:var(--radius-s); margin-bottom:18px; font-weight:500; border:1px solid; }
.admin-flash-ok  { background:var(--ok-bg); color:var(--ok-text); border-color:var(--ok-line); }
.admin-flash-err { background:var(--err-bg); color:var(--err-text); border-color:var(--err-line); }

.admin-hlava-akcia { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.admin-pocet { font-family:var(--pismo-mono); font-size:.95rem; color:var(--muted); font-weight:500; }
.admin-skratky { display:flex; flex-wrap:wrap; gap:10px; }
.admin-staty a.admin-stat { text-decoration:none; transition:transform .12s ease, box-shadow .12s ease; }
.admin-staty a.admin-stat:hover { transform:translateY(-2px); box-shadow:var(--tien-h); }

/* filtre */
.admin-filtre { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:18px 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.admin-filtre input[type=search], .admin-filtre select { padding:.5em .7em; border:1px solid var(--line); border-radius:10px; font:inherit; background:var(--paper); }
.admin-filtre input[type=search] { min-width:220px; flex:1; }
.admin-zrus { color:var(--muted); font-size:.9rem; }

/* bulk */
.admin-bulk { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0; }
.admin-bulk select { padding:.45em .6em; border:1px solid var(--line); border-radius:10px; font:inherit; background:var(--surface); }
.admin-mini { font-size:.82rem; color:var(--muted); }
.admin-mini-warn { color:var(--vystraha); }

/* tabuľka */
.admin-tabulka-obal { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.admin-tabulka { width:100%; border-collapse:collapse; font-size:.9rem; }
.admin-tabulka th, .admin-tabulka td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
.admin-tabulka thead th { background:var(--tint); font-family:var(--pismo-nadpis); font-size:.82rem; position:sticky; top:0; }
.admin-tabulka tbody tr:hover { background:var(--riadok-hover); }
.admin-tabulka tr.je-vypnuty { opacity:.55; }
.admin-tabulka .st-check { width:34px; }
.admin-tabulka .st-foto  { width:54px; }
.admin-tabulka .st-cena  { font-family:var(--pismo-mono); white-space:nowrap; }
.admin-tabulka .st-nazov a { color:var(--primar); font-weight:600; }
.admin-tabulka .st-nazov a:hover { color:var(--akcent-text); }
.admin-tabulka .st-akcie { white-space:nowrap; }
.admin-tabulka-uzka { max-width:520px; }
.admin-thumb { width:42px; height:42px; border-radius:8px; overflow:hidden; background:var(--tint); }
.admin-thumb img { width:100%; height:100%; object-fit:cover; }
.admin-thumb.is-empty::after { content:""; }

.inline-akcia { display:inline; margin:0; }
.odznak { border:1px solid transparent; border-radius:999px; padding:.2em .7em; font-size:.78rem; font-weight:600; cursor:pointer; font-family:inherit; }
.odznak-ok  { background:var(--ok-bg); color:var(--ok-text); border-color:var(--ok-line); }
.odznak-off { background:var(--off-bg); color:var(--muted); border-color:var(--line); }
.odznak-top { background:var(--top-bg); color:var(--top-text); border-color:var(--top-line); }
.odznak-pln { background:transparent; color:var(--muted); border-color:var(--line); }
.admin-link { background:none; border:none; color:var(--primar); font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; padding:0; margin-right:8px; }
.admin-link:hover { color:var(--akcent-text); }
.admin-link-zmaz { color:var(--vystraha); }

/* stránkovanie */
.admin-strankovanie { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0; }
.admin-strankovanie a { padding:.35em .7em; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:.85rem; }
.admin-strankovanie a.je-aktivny { background:var(--primar); color:var(--na-farbe); border-color:var(--primar); }

/* formuláre */
.admin-form { margin-top:18px; }
.admin-form-mriezka { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.admin-pole { display:flex; flex-direction:column; gap:6px; }
.admin-pole-siroke { grid-column:1 / -1; }
.admin-pole > span { font-weight:600; font-size:.9rem; }
.admin-pole input, .admin-pole select, .admin-pole textarea, .admin-panel input, .admin-panel select {
  padding:.6em .75em; border:1px solid var(--line); border-radius:10px; font:inherit; background:var(--surface); width:100%; }
.admin-pole small { color:var(--muted); font-size:.8rem; }
.admin-mono { font-family:var(--pismo-mono); font-size:.85rem; }
.admin-fieldset { border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:18px 0; }
.admin-fieldset legend { font-family:var(--pismo-nadpis); font-weight:700; padding:0 8px; }
.param-row, .crit-row, .faq-row { display:flex; gap:8px; margin-bottom:8px; align-items:flex-start; }
.param-row input, .crit-row input, .faq-row input, .faq-row textarea { flex:1; padding:.5em .65em; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--surface); }
.cta-mini { padding:.4em .9em; font-size:.85rem; }
.admin-prepinace { display:flex; flex-wrap:wrap; gap:18px; margin:18px 0; }
.admin-check { display:flex; align-items:center; gap:8px; font-weight:500; }
.admin-check input { width:auto; }
/* P5 – editor článkov (telo + picks) */
.admin-body-md { font-family:var(--pismo-mono); font-size:.9rem; line-height:1.5; width:100%; padding:12px; border:1px solid var(--line); border-radius:8px; }
.pick-hladaj { position:relative; margin-bottom:12px; }
.pick-hladaj > input { width:100%; padding:.55em .7em; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--surface); }
.pick-vysledky { position:absolute; z-index:20; left:0; right:0; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--tien-h); max-height:280px; overflow-y:auto; margin-top:4px; }
.pick-navrh { display:block; width:100%; text-align:left; padding:.55em .7em; background:none; border:0; border-bottom:1px solid var(--line); cursor:pointer; font:inherit; }
.pick-navrh:hover { background:var(--tint); }
.pick-rows { display:flex; flex-direction:column; gap:8px; }
.pick-row { display:flex; gap:8px; align-items:center; background:var(--tint); border-radius:8px; padding:8px 10px; }
.pick-info { min-width:220px; display:flex; flex-direction:column; gap:2px; }
.pick-row > input[type="text"] { flex:1; padding:.5em .65em; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--surface); }
.pick-badge { font-size:.7rem; color:var(--muted); }
.pick-akcie { display:flex; gap:4px; }
.admin-form-pata { display:flex; gap:12px; align-items:center; margin-top:18px; }
.admin-zmaz-box { margin-top:8px; padding:10px; background:var(--err-bg); border:1px solid var(--err-line); border-radius:10px; max-width:340px; }
.admin-zmaz-box select { margin:6px 0; }
.je-skryty { display:none; }

/* import progres */
.import-progres { margin:16px 0; }
.import-bar { height:14px; background:var(--tint); border-radius:999px; overflow:hidden; }
.import-bar-fill { height:100%; width:0; background:var(--primar); transition:width .25s ease; }
.import-report { margin-top:14px; padding:12px 16px; border-radius:var(--radius-s); border:1px solid; }
.import-ok  { background:var(--ok-bg); color:var(--ok-text); border-color:var(--ok-line); }
.import-err { background:var(--err-bg); color:var(--err-text); border-color:var(--err-line); }

/* CMS / sprievodca verejné */
.stranka-cms .cms-obsah { max-width:760px; }
.stranka-cms .cms-obsah h2 { margin-top:1.4em; }
.sprievodca .kriterium { margin-bottom:1.2em; }
.sprievodca-faq .faq-polozka { border-bottom:1px solid var(--line); padding:.6em 0; }
.sprievodca-faq summary { font-weight:600; cursor:pointer; }
.sprievodca-cta { margin-top:1.6em; }

@media (max-width:760px) {
  .admin-form-mriezka { grid-template-columns:1fr; }
}

/* ============================================================ ANALYTIKA (P8) */
.an-obdobie { display:flex; gap:6px; }
.an-obdobie a { padding:.4em .8em; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:.85rem; }
.an-obdobie a.je-aktivny { background:var(--primar); color:var(--na-farbe); border-color:var(--primar); }
.an-dnes { display:block; font-size:.75rem; color:var(--akcent-text); margin-top:2px; }

/* stĺpcový graf */
.an-graf { display:flex; align-items:flex-end; gap:2px; height:180px; padding-top:8px; overflow-x:auto; }
.an-stlpec { flex:1 1 0; min-width:8px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.an-bar { width:70%; min-height:0; background:linear-gradient(180deg,var(--primar),var(--primar-h)); border-radius:3px 3px 0 0; transition:height .2s ease; }
.an-stlpec:hover .an-bar { background:var(--akcent); }
.an-os { font-size:.62rem; color:var(--muted); margin-top:4px; white-space:nowrap; }
.an-os-skryta { visibility:hidden; }

/* mriežka tabuliek */
.an-mriezka { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; }
.an-mriezka-2 { grid-template-columns:repeat(2,1fr); margin-top:12px; }
.an-tab h2 { font-size:1.05rem; margin:0 0 .6em; }
.an-tab-money { border-color:var(--akcent); box-shadow:0 0 0 1px var(--akcent), var(--tien); }
.an-money-znak { color:var(--akcent-text); }
.an-zoznam { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.an-zoznam li { display:grid; grid-template-columns:1fr 70px auto; align-items:center; gap:8px; font-size:.85rem; }
.an-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.an-bar-mini { background:var(--tint); border-radius:999px; height:8px; overflow:hidden; }
.an-bar-mini span { display:block; height:100%; background:var(--primar); border-radius:999px; }
.an-tab-money .an-bar-mini span { background:var(--akcent); }
.an-cislo { font-family:var(--pismo-mono); font-weight:500; text-align:right; }
.an-geo { margin-top:18px; }

@media (max-width:900px) { .an-mriezka { grid-template-columns:1fr; } .an-mriezka-2 { grid-template-columns:1fr; } }

/* ============================================================ HOMEPAGE (P11) */
/* mobil */

/* --- HERO Variant A (centrovaný) --- */
.hp-hero { position:relative; overflow:hidden; background:var(--paper); padding:72px 20px 84px; text-align:center; border-bottom:1px solid var(--line); }
.hp-hero-vizual { position:absolute; right:-8%; top:-30%; width:min(560px,60vw); aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--zar-akcent), var(--zar-primar) 55%, transparent 72%); filter:blur(2px); pointer-events:none; z-index:0; }
.hp-hero-in { position:relative; z-index:1; max-width:860px; margin:0 auto; }
.hp-kicker { font-family:var(--pismo-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--akcent-text); margin:0 0 16px; }
.hp-h1 { font-family:var(--pismo-nadpis); font-weight:800; font-size:clamp(2.1rem,5.4vw,3.5rem); line-height:1.04; letter-spacing:-.02em; color:var(--ink); margin:0 0 18px; }
.hp-sub { font-family:var(--pismo-text); font-size:18px; line-height:1.6; color:var(--muted); max-width:680px; margin:0 auto 32px; }

/* Výzva nad poľom. Je to <p>, nie <label>: pole je popísané cez
   `aria-labelledby`, takže odčítavač prečíta presne ten istý text, ktorý
   vidí oko. Predtým tam bol `aria-label="Čo hľadáš?"` — iné znenie než
   na obrazovke, čo je pre odčítavač iná stránka než pre všetkých ostatných. */
.hp-search-vyzva { font-family:var(--pismo-text); font-size:.95rem; font-weight:600; color:var(--muted); max-width:720px; margin:0 auto 10px; text-align:left; }
.hp-search { display:flex; gap:12px; max-width:720px; margin:0 auto; }
.hp-search-pole { flex:1; display:flex; align-items:center; gap:10px; height:76px; background:var(--surface); border:2px solid var(--primar-h); border-radius:16px; box-shadow:var(--tien-h); padding:0 20px; }
.hp-search-pole input { flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:1.05rem; height:100%; color:var(--ink); }
.hp-search-btn { flex:none; background:var(--akcent-text); color:var(--na-farbe); font-family:var(--pismo-text); font-weight:600; font-size:19px; padding:0 40px; border:0; border-radius:16px; box-shadow:var(--tien-h); cursor:pointer; transition:background .12s ease; }
.hp-search-btn:hover { background:var(--akcent-text-h); }

.hp-hero-akcie { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:26px; }
.hp-chips { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin-top:18px; }
.hp-chips-label { font-size:.85rem; color:var(--muted); }
.hp-chip { border-radius:999px; border:1px solid var(--line); padding:9px 16px; font-size:.88rem; background:var(--surface); color:var(--ink); transition:border-color .12s, background .12s; }
.hp-chip:hover { border-color:var(--primar); background:var(--tint); }

/* --- rozcestník (3 karty) --- */
.hp-rozcestnik { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hp-rc { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--tien); transition:transform .1s ease, box-shadow .14s; }
a.hp-rc:hover, .hp-clanok:hover { transform:translateY(-3px); box-shadow:var(--tien-h); }
.hp-rc-kicker { font-family:var(--pismo-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--akcent-text); margin:0; }
/* Karty rozcestníka sú H2 (sú priamymi deťmi H1, nie podsekciou) — typografiu
   drží tento selektor, aby zmena značky nezmenila vzhľad. */
.hp-rc h2 { margin:0; font-size:1.2rem; font-family:var(--pismo-nadpis); }
.hp-rc-popis { color:var(--muted); font-size:.92rem; margin:0; }
.hp-rc-cta { margin-top:auto; padding-top:6px; color:var(--primar); font-weight:600; font-size:.92rem; }
.hp-rc:hover .hp-rc-cta { color:var(--akcent-text); }

/* --- TOP výber mriežka --- */
.hp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.hp-karta { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--tien); transition:transform .1s ease, box-shadow .14s; }
.hp-karta:hover { transform:translateY(-4px); box-shadow:var(--tien-h); }
.hp-foto { aspect-ratio:4/3; background:var(--tint); }
.hp-foto img { width:100%; height:100%; object-fit:cover; }
.hp-karta-telo { padding:14px 15px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.hp-karta-kicker { font-family:var(--pismo-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--akcent-text); }
.hp-karta-nazov { margin:0; font-family:var(--pismo-text); font-weight:600; font-size:1rem; line-height:1.3; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hp-karta-popis { margin:0; color:var(--muted); font-size:.85rem; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hp-karta-cena { margin-top:auto; padding-top:6px; font-family:var(--pismo-mono); font-weight:500; font-size:1.05rem; color:var(--primar); }

/* --- dlaždice kategórií --- */
.hp-dlazdice { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.hp-tile { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:20px 18px; border-radius:var(--radius); background:linear-gradient(135deg,var(--primar),var(--primar-h)); color:var(--na-farbe); font-family:var(--pismo-nadpis); font-weight:700; font-size:1.05rem; box-shadow:var(--tien); transition:transform .1s ease, box-shadow .14s; }
.hp-tile:hover { transform:translateY(-3px); box-shadow:var(--tien-h); }
.hp-tile-sip { color:var(--akcent-text); font-size:1.2rem; }

/* --- články --- */
.hp-clanky { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hp-clanok { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--tien); transition:transform .1s ease, box-shadow .14s; }
.hp-clanok h3 { margin:0; font-size:1.1rem; }
.hp-prazdny-blok { border:1px dashed var(--line); border-radius:var(--radius); padding:28px; text-align:center; color:var(--muted); background:var(--surface); }

/* --- FAQ --- */
.hp-faq-sub { color:var(--muted); margin:.3em 0 0; font-size:1rem; }
.faq-item { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s); padding:4px 18px; margin-bottom:10px; }
.faq-item summary { cursor:pointer; font-weight:600; padding:14px 0; list-style:none; position:relative; padding-right:28px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:2px; top:12px; color:var(--akcent-text); font-size:1.3rem; line-height:1; }
.faq-item[open] summary::after { content:"–"; }
.faq-item p { margin:0 0 14px; color:var(--muted); line-height:1.6; }

/* --- footer stĺpce --- */
.pata-in { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:28px; align-items:start; }
.pata-stlpce { display:contents; }
/* Stĺpce pätičky sú H2 (pätička je samostatná oblasť, nie podsekcia obsahu) —
   veľkosť drží tento selektor, aby zmena značky nezmenila vzhľad. */
.pata-stlpec h2 { font-family:var(--pismo-nadpis); font-size:.95rem; margin:0 0 12px; color:var(--na-panele-jasny); font-weight:700; }
.pata-stlpec a { display:block; color:var(--na-panele); font-size:.9rem; padding:4px 0; }
.pata-stlpec a:hover { color:var(--na-panele-jasny); }

/* --- responsive --- */
@media (max-width:1000px) {
  .hp-grid { grid-template-columns:repeat(2,1fr); }
  .hp-rozcestnik, .hp-clanky { grid-template-columns:1fr; }
  .pata-in { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .hp-hero { padding:48px 18px 60px; }
  .hp-search { flex-direction:column; }
  .hp-search-btn { padding:16px; }
  .hp-grid { grid-template-columns:1fr; }
  .pata-in { grid-template-columns:1fr; }
}

/* ===== P5 – Sprievodcovia / články ===================================== */
.clanok { max-width:820px; margin-inline:auto; }
.clanok-lead { font-size:1.2rem; line-height:1.6; }
.clanok-meta { font-size:.85rem; color:var(--muted); margin:0 0 24px; }
.clanok-kriteria { background:var(--tint); border-left:4px solid var(--primar); border-radius:0 var(--radius) var(--radius) 0; padding:16px 20px; margin:0 0 28px; }
.clanok-kriteria h2 { margin:0 0 8px; font-size:1.05rem; }
.clanok-kriteria ul { margin:0; padding-left:20px; }
.clanok-kriteria li { margin:4px 0; }
.clanok-telo { line-height:1.7; }
.clanok-telo h2 { margin:32px 0 12px; font-size:1.4rem; }
.clanok-telo h3 { margin:24px 0 8px; font-size:1.12rem; }
.clanok-telo p { margin:0 0 16px; }
.clanok-telo ul, .clanok-telo ol { margin:0 0 16px; padding-left:22px; }
.clanok-telo li { margin:6px 0; }
.clanok-telo blockquote { margin:20px 0; padding:12px 18px; border-left:4px solid var(--akcent); background:var(--tint); border-radius:0 var(--radius) var(--radius) 0; color:var(--muted); }
.clanok-telo a { color:var(--primar); font-weight:600; }
.clanok-telo code { background:var(--tint); padding:.1em .35em; border-radius:4px; font-family:var(--pismo-mono); font-size:.9em; }
.clanok-tab-obal { overflow-x:auto; margin:0 0 20px; }
.clanok-tab { border-collapse:collapse; width:100%; font-size:.95rem; }
.clanok-tab th, .clanok-tab td { border:1px solid var(--line); padding:8px 12px; text-align:left; }
.clanok-tab th { background:var(--tint); font-weight:600; }
.clanok-vyber { margin:36px 0; }
.clanok-picks { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; }
.clanok-pick { display:flex; flex-direction:column; }
.clanok-pick-note { font-size:.85rem; color:var(--muted); margin:8px 2px 0; font-style:italic; }
.clanok-faq { margin:36px 0; }
.clanok-faq .faq-polozka { border-top:1px solid var(--line); padding:16px 0; }
.clanok-faq h3 { margin:0 0 6px; font-size:1.02rem; }
.clanok-faq p { margin:0; color:var(--ink); }
.clanok-suvisiace { margin:40px 0 0; border-top:2px solid var(--line); padding-top:24px; }
.clanok-suvisiace-zoznam { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.clanok-suvisiace-zoznam a { display:block; padding:12px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; color:var(--ink); font-weight:600; transition:border-color .12s ease; }
.clanok-suvisiace-zoznam a:hover { border-color:var(--akcent); }
.suv-kicker { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--akcent-text); font-weight:600; }
/* rozcestník sprievodcov */
.hub-mriezka { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; }
.hub-karta { display:flex; flex-direction:column; gap:6px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--tien); text-decoration:none; color:var(--ink); transition:transform .1s ease, box-shadow .14s ease; }
.hub-karta:hover { transform:translateY(-3px); box-shadow:var(--tien-h); }
.hub-kicker { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--akcent-text); font-weight:600; }
.hub-nazov { font-size:1.1rem; margin:0; }
.hub-lead { font-size:.9rem; color:var(--muted); margin:0; flex:1; }
.hub-cta { font-size:.85rem; color:var(--primar); font-weight:600; margin-top:4px; }

/* =============================================================================
   P18 — vizuálne oživenie
   Pravidlo pre celý blok: bez triedy .js na <html> je všetko v koncovom
   (viditeľnom) stave. Animácia je vždy len nadstavba pre prehliadač s JS,
   takže crawler ani návštevník s vypnutým JS nepríde o žiadny obsah.
   Hýbe sa výhradne transform a opacity — nikdy rozmer či pozícia.
   ============================================================================= */

/* --- Papierová textúra hero ----------------------------------------------
   Zrno namiesto farebného mesh gradientu: značka stojí na line-art logu a
   tokene „paper", takže tlačená textúra sedí k identite viac než aurora
   plochy. feTurbulence je inline data URI — žiadny ďalší request. */
.hp-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Pôvodný kruh mal pri 2px rozostrení viditeľnú hranu a čítal sa ako tvar.
   Silné rozmazanie z neho spraví ambientnú plochu a pomalý drift ju rozhýbe
   tak, aby si pohyb všimol len ten, kto sa na hero pozerá dlhšie. */
.hp-hero-vizual {
  filter:blur(80px); opacity:.7;
  animation:hp-drift 28s ease-in-out infinite alternate; will-change:transform;
}
/* Druhá plocha z opačnej strany, aby pozadie nebolo len „jeden roh". */
.hp-hero::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:-10%; bottom:-40%; width:min(480px,55vw); aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--zar-primar), transparent 70%);
  filter:blur(80px);
  animation:hp-drift2 34s ease-in-out infinite alternate;
}
@keyframes hp-drift {
  from { transform:translate3d(0,0,0) scale(1); }
  to   { transform:translate3d(-3%,2%,0) scale(1.06); }
}
@keyframes hp-drift2 {
  from { transform:translate3d(0,0,0) scale(1); }
  to   { transform:translate3d(4%,-3%,0) scale(1.1); }
}

/* --- Vstupné odhalenie sekcií -------------------------------------------- */
.odhal { }
.js .odhal { opacity:.6; transform:translateY(12px); }
.js .odhal.je-vidno {
  opacity:1; transform:none;
  transition:opacity .3s ease-out, transform .3s ease-out;
}

/* --- Karty: pokojnejší hover -------------------------------------------- */
.karta { transition:transform .18s ease-out, box-shadow .18s ease-out; }
.karta:hover { transform:translateY(-2px); box-shadow:var(--tien-h); }

/* --- FAQ: plynulé rozbalenie bez JS -------------------------------------- */
.faq-item summary::after {
  content:""; width:14px; height:14px; margin-top:5px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5762F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition:transform .2s ease-out;
}
.faq-item[open] summary::after { content:""; transform:rotate(180deg); }
.faq-telo { display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease-out; }
.faq-item[open] .faq-telo { grid-template-rows:1fr; }
.faq-telo > div { overflow:hidden; }

/* --- Statické stránky: čitateľná sadzba ---------------------------------- */
.cms-obsah { max-width:68ch; line-height:1.7; }
.cms-obsah > p:first-of-type { font-size:1.12rem; line-height:1.65; color:var(--ink); }
.cms-obsah h2 {
  position:relative; padding-left:14px; margin-top:1.8em;
  border-left:3px solid var(--akcent); line-height:1.25;
}
.cms-obsah ul, .cms-obsah ol { padding-left:1.2em; }
.cms-obsah li { margin-bottom:.4em; }
/* Blok s údajmi prevádzkovateľa (posledný odsek právnych stránok). */
.cms-obsah .udaje, .cms-obsah blockquote {
  background:var(--tint); border-left:3px solid var(--primar);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:14px 18px; margin:1.6em 0; color:var(--ink);
}

/* --- Sprievodca: lead, verdikt, ukazovateľ prečítania -------------------- */
.sprievodca .clanok-lead, .clanok .clanok-lead {
  font-size:1.16rem; line-height:1.6; color:var(--ink);
  border-left:3px solid var(--akcent); padding-left:16px; margin-bottom:1.6em;
}
.clanok-verdikt { box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -18px 40px rgba(0,0,0,.16); }

/* Ukazovateľ prečítania. Stojí na scroll-driven animácii — prehliadač bez
   podpory ho jednoducho nevykreslí, nič sa tým nestráca. */
@supports (animation-timeline:scroll()) {
  .citanie {
    position:fixed; top:0; left:0; right:0; height:3px; z-index:50;
    background:var(--akcent); transform-origin:0 50%; transform:scaleX(0);
    animation:citanie-rast linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes citanie-rast { to { transform:scaleX(1); } }
}

/* =============================================================================
   P19 — podstránky a kategórie
   ============================================================================= */

/* --- Text podstránok: rytmus a číslovanie sekcií ------------------------- */
.cms-obsah { counter-reset:sekcia; }
.cms-obsah h2 {
  counter-increment:sekcia;
  display:flex; align-items:baseline; gap:12px;
  margin-top:3.5rem; padding-left:0; border-left:0;
}
.cms-obsah h2::before {
  content:counter(sekcia,decimal-leading-zero);
  font-family:var(--pismo-mono); font-size:.8rem; font-weight:500;
  color:var(--akcent-text); flex:none; letter-spacing:.06em;
  position:relative; top:-.15em;
}
.cms-obsah h2:first-of-type { margin-top:1.6rem; }
.cms-obsah > p:first-of-type { font-size:1.15rem; line-height:1.65; color:var(--ink); }

/* --- Odhaľovanie blokov textu (triedu pridáva JS, viď app.js) ------------ */
.js .odhal-blok { opacity:.55; transform:translateY(14px); }
.js .odhal-blok.je-vidno {
  opacity:1; transform:none;
  transition:opacity .35s ease-out, transform .35s ease-out;
}

/* --- Kategórie: ikony a karty -------------------------------------------- */
.kat-karta { transition:transform .18s ease-out, box-shadow .18s ease-out; }
.kat-karta:hover { transform:translateY(-2px); box-shadow:var(--tien-h); }
.kat-karta-hlava { display:flex; align-items:center; gap:14px; }
.kat-ikona { flex:none; color:var(--ink); transition:color .2s ease-out; }
.kat-ikona svg { display:block; width:48px; height:48px; }
.kat-karta:hover .kat-ikona { color:var(--akcent-text); }
.kat-karta-hlava .kat-nazov { flex:1; }
.kat-pocet {
  font-family:var(--pismo-mono); font-size:.82rem; color:var(--akcent-text);
  white-space:nowrap; flex:none;
}

/* --- Admin: dopyty ------------------------------------------------------- */
.dp-diera { border-left:3px solid var(--vystraha); }
.dp-diera .an-cislo { color:var(--vystraha); font-weight:600; }
.dp-text { font-family:var(--pismo-mono); font-size:.86rem; }
.dp-prazdne { color:var(--muted); font-style:italic; }

/* --- Prístupnosť: kto nechce pohyb, nedostane žiadny --------------------- */
@media (prefers-reduced-motion:reduce) {
  .js .odhal-blok, .js .odhal-blok.je-vidno { opacity:1; transform:none; transition:none; }
  .kat-karta, .kat-karta:hover { transform:none; transition:none; }
  .hp-hero-vizual, .hp-hero::before { animation:none; }
  .js .odhal, .js .odhal.je-vidno,
  .js .odhal, .js .odhal.je-vidno {
    opacity:1; transform:none; transition:none;
  }
  .karta, .karta:hover { transform:none; transition:none; }
  .faq-telo { transition:none; }
  .faq-item summary::after { transition:none; }
  .citanie { display:none; }
}

/* -------------------------------------------------- verzia jadra v admine */
/* Má byť po ruke, keď sa porovnáva upstream s kópiou, ale nemá súťažiť
   s obsahom – preto tlmená farba a strojopis, ktorý sa dobre odčítava. */
/* Vodorovný padding a max-width kopírujú .admin-obsah — footer je jeho
   súrodenec, nie potomok, takže by inak sedel natvrdo na okraji. */
.admin-pata {
  margin-top:32px; padding:14px 24px 22px; max-width:1000px;
  border-top:1px solid var(--line);
  text-align:right;
}
.admin-verzia {
  font-family:var(--pismo-mono); font-size:.75rem;
  color:var(--muted); letter-spacing:.02em;
}
/* Označené nad neuloženými zmenami – kód na FTP nemusí zodpovedať gitu. */
.admin-verzia[title] { color:var(--vystraha); cursor:help; }
/* ------------------------------------------------ oprava preklepu v poradcovi */
/* Musí byť vidieť, ale nemá kričať – používateľ má hlavne vidieť výsledky.
   Okrová ľavá linka nadväzuje na ostatné informačné bloky na webe. */
.poradca-oprava {
  margin:0 0 18px;
  padding:10px 14px;
  border-left:3px solid var(--akcent);
  background:var(--tint);
  border-radius:0 8px 8px 0;
  color:var(--ink);
  font-size:.95rem;
}
/* --------------------------------------------------------------------------
   ZRUŠENÉ 3. 9. 2026: `.nav-cta` a blok `.pd-*`

   `.nav-cta` bolo ružové tlačidlo „Čo vydrží pranie" vedľa menu. Viedlo na
   `/sprievodca`, kam odteraz vedie riadna položka menu — dve tlačidlá vedľa
   seba na to isté miesto nie sú dôraz, ale šum. S ním odíde aj celý blok,
   ktorý riešil jeho aktívny stav (biely text na svetlom pozadí, 1,15:1).

   `.pd-*` bol rozklad vety na sloty na stránke `/poradca`. Tá stránka už
   neexistuje — splynula s katalógom — a ilustrácia sa s ňou neprenášala:
   nad polom, do ktorého sa má písať, je už príklad, a príklady sú
   konkrétnejšie než schéma.

   Mŕtve pravidlá sa nenechávajú „pre istotu": pri čítaní vyzerajú ako
   pravidlo, ktoré niečo drží, a pri ďalšom zásahu ich niekto začne
   udržiavať.
   -------------------------------------------------------------------------- */

/* ============================================================== P24: /o-nas */
/* Os s piatimi zastávkami. Premieňa päť odsekov na cestu, kde je vidieť,
   kde čitateľ je a koľko zostáva. Kreslí sa výhradne z pseudo-elementov –
   šablóna sa nemenila. */
/* Ľavý odsadenie robí miesto pre os. Bez neho by čiara viedla cez text. */
.cms-obsah { position:relative; padding-left:30px; }

/* Samotná os. Začína pri prvom nadpise, nie na vrchu bloku, aby neprečnievala
   nad úvodný odsek. */
.cms-obsah::before {
  content:""; position:absolute; left:8px; top:4.8rem; bottom:1.5rem;
  width:1px; background:var(--line);
}
.cms-obsah h2 { position:relative; }

/* Zastávka pri každom nadpise. Kruh leží na osi a prekrýva ju, takže os
   vyzerá prerušene tam, kde sekcia začína. Ľavý okraj je vypočítaný tak,
   aby stred kruhu sedel na osi: 8,5px absolútne − 30px odsadenia − 7,5px
   polomeru = −29px. */
.cms-obsah h2::after {
  content:""; position:absolute; left:-29px; top:.5em;
  width:11px; height:11px; border-radius:50%;
  background:var(--surface); border:2px solid var(--akcent);
}

/* Prerušovaný obrys pri AI postave. Plný bod by znamenal „tu si" alebo
   „hotovo"; čiarkovaný hovorí, že tá vec nie je celkom pevná, čo pri
   AI-generovanej postave sedí.

   Viaže sa na TRIEDU, nie na poradie nadpisu. Zdedená verzia mala
   `h2:nth-of-type(4)` a po pridaní jednej sekcie ukazovala na úplne iný
   odsek — konkrétne na „Odkiaľ budú naše čísla pochádzať", teda na
   najpodloženejšiu časť stránky. Prerušovaný kruh je tvrdenie o obsahu
   a tvrdenie viazané na poradie sa rozíde pri prvej úprave textu.

   Triedu nesie CMS obsah stránky; `bezpecne_html()` atribút `class`
   prepúšťa, takže stačí `<h2 class="je-ai">` v seede. */
.cms-obsah h2.je-ai::after {
  border-style:dashed; border-color:var(--muted);
}

/* Na úzkej obrazovke os zaberá miesto, ktoré je potrebnejšie na text. */
@media (max-width:560px) {
  .cms-obsah::before { display:none; }
  .cms-obsah h2::after { display:none; }
}
/* ====================================================== P26: veľkosti produktu */
/* Tabuľka veľkostí na detaile. Vypredané veľkosti sa NESKRÝVAJÚ — sú
   prečiarknuté a stlmené, ale zostávajú v tabuľke. Informácia „v tvojej
   veľkosti to nemajú" je pre čitateľa rovnako cenná ako opak. */
.velkosti-tab td:first-child { white-space:nowrap; font-variant-numeric:tabular-nums; }
.velkost-vypredana td { color:var(--muted); }
.velkost-vypredana s { text-decoration-thickness:2px; }

.velkost-stav { font-size:.9rem; }
.velkost-stav-ano  { color:var(--ok-text); }
.velkost-stav-malo { color:var(--vystraha); font-weight:600; }
.velkost-stav-nie  { color:var(--muted); }

/* Rozpätie cien a upozornenie na nedostupnú najnižšiu cenu. Používa
   --vystraha, lebo je to to isté „pozor, číslo neznamená, čo si myslíš",
   aké nesie cenové upozornenie inde na webe. */
.velkosti-rozpatie { margin:0 0 12px; }
.velkosti-upozornenie,
.detail-cena-poznamka {
  margin:8px 0 12px; padding:10px 14px;
  border-left:3px solid var(--vystraha);
  background:var(--tint); border-radius:var(--radius-s);
  font-size:.95rem;
}
.detail-cena-poznamka { margin-top:4px; }

/* Výhrada o nočnom snímku. Je tlmená, ale nesmie zmiznúť — patrí k číslam. */
.velkosti-vyhrada { margin:10px 0 0; font-size:.85rem; color:var(--muted); }


/* ============================================================ wishlist */
/* Výzva „nenašiel si, čo hľadáš". Stojí len pod poradcom pri málo výsledkoch
   a raz dole na katalógu — nie je to prvok, ktorý má byť vidieť všade, takže
   je tlmený: pieskové pozadie, žiadny tieň, žiadna farebná výzva. Súťažiť
   s produktmi nemá. */
.wishlist { max-width:var(--obal); margin:40px auto 56px; padding:26px 24px; background:var(--tint); border:1px solid var(--line); border-radius:var(--radius); }
.wishlist-nadpis { font-family:var(--pismo-nadpis); font-size:1.25rem; margin:0 0 .5em; }
.wishlist-text { color:var(--muted); font-size:.95rem; line-height:1.6; margin:0 0 18px; max-width:60ch; }
.wishlist-label { display:block; font-size:.9rem; font-weight:600; color:var(--muted); margin-bottom:8px; }
.wishlist-riadok { display:flex; gap:10px; max-width:640px; }
.wishlist-pole { flex:1; min-width:0; padding:.8em 1em; border:1px solid var(--line); border-radius:12px; font:inherit; font-size:1rem; background:var(--surface); color:var(--ink); }
.wishlist-pole:focus { outline:2px solid var(--primar); outline-offset:1px; }
.wishlist-btn { flex:none; }

/* Odozva. Farba je doplnok, nie nosič — vetu treba prečítať aj bez nej,
   preto je text vždy plnohodnotná veta a nie len „OK". */
.wishlist-odozva { font-size:.92rem; font-weight:600; margin:0 0 14px; padding:.6em .9em; border-radius:10px; border:1px solid; }
.wishlist-odozva.je-ok { color:var(--ok-text); background:var(--ok-bg); border-color:var(--ok-line); }
.wishlist-odozva.je-chyba { color:var(--err-text); background:var(--err-bg); border-color:var(--err-line); }

@media (max-width:680px) {
  .wishlist-riadok { flex-direction:column; }
  .wishlist-btn { justify-content:center; }
}

/* admin: tabuľka wishlistu */
.wl-tab .wl-c { text-align:right; font-family:var(--pismo-mono); white-space:nowrap; }
.wl-tab .wl-d { white-space:nowrap; color:var(--muted); font-size:.88rem; }
.wl-text { display:block; }
.wl-bar { display:block; margin-top:5px; max-width:260px; }

/* Úvodný odsek kategórie. Je to text na čítanie, nie perex — menší než
   `.lead` a v `--muted`, aby neprebíjal nadpis ani mriežku produktov. */
.kat-uvod { max-width:72ch; margin:.6em 0 0; color:var(--muted); font-size:.95rem; line-height:1.65; }

/* Výhrada pri cenách. Tlmená, ale nie skrytá — má sa dať prečítať, keď sa na
   ňu človek pozrie, a nemá súťažiť s cenami nad ňou. `--muted` na `--paper`
   je 6,71:1, teda AA aj pri tejto veľkosti. */
.vyhrada-ceny { max-width:80ch; margin:16px 0 0; font-size:.82rem; line-height:1.55; color:var(--muted); }