/* =============================================================================
   galimar.sk — paleta „Účtovná kniha"
   (súbor prišiel z enginu secondhandonline.sk; paleta je od neho odvodená,
   pozri tokeny nižšie — hlavička hovorila cudzou značkou a to sa posiela
   do prehliadača každému návštevníkovi)
   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 {
  /* --------------------------------------------------------------------- */
  /* Paleta „Účtovná kniha" (P26). Grafit nesie, jantár ukazuje.            */
  /*                                                                        */
  /* Primárna farba je ZÁMERNE takmer bezfarebná — sýtosť 13 %. Na webe,    */
  /* ktorého obsahom je cena a nie tovar, si značka farbu brať nemá:        */
  /* keď je jediná sýta vec na stránke jantárová linka pri čísle, oko ide   */
  /* tam, kam má. Bezfarebná značka tu nie je striedmosť, je to rozpočet.   */
  /*                                                                        */
  /* JANTÁR NIKDY DO ODZNAKOV. Len linky, podčiarknutia a detail v grafike. */
  /* Od --vystraha ho delí 39° odtieňa, čo je na veľkej ploche dosť a na    */
  /* malej málo — v odznaku vedľa seba splynú „pozor" a „všimni si".        */
  /* Na webe, kde je červené upozornenie hlavný prvok rozhrania, je to       */
  /* zámena, ktorú si nemôžeme dovoliť.                                     */
  /*                                                                        */
  /* Predošlé vertikály: indigo/ružová (potlacnatricko), zelená             */
  /* (shop-nabytok). Táto paleta je od oboch vzdialená 167° a 107°          */
  /* v odtieni — tri weby jednej firmy sa nesmú tváriť ako jeden.           */
  /*                                                                        */
  /* 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ú.                                               */
  /* --------------------------------------------------------------------- */

  /* Prehliadaču treba POVEDAŤ, v akom režime kreslí svoje vlastné prvky:
     rozbaľovací zoznam pri <select>, vnútro <input type=date>, scrollbary,
     pozadie po automatickom vyplnení hesla. Bez tejto deklarácie ich kreslí
     vždy podľa svetlej sady, aj keď zvyšok stránky je tmavý — a to sú miesta,
     kam naše tokeny nedosiahnu, takže ich nemá čo opraviť. */
  color-scheme: light;

  /* --- základné plochy a text --- */
  --paper:#FAF7EF;            /* krémová, nie šedobiela – papier účtovnej knihy */
  --ink:#17150F;
  --muted:#5C574C;
  --line:#E4DED0;
  --surface:#FFFFFF;

  /* --- značka --- */
  --primar:#2B2721;           /* primárna (grafit) – odkazy, CTA, .brand */
  --primar-h:#141210;         /* tmavšia: hover primárneho CTA */
  --tint:#F2ECDD;           /* jemné pieskové pozadie blokov */
  --pruh:#EDE5D2;           /* druhý pruh v šrafovanom pozadí */

  /* --- akcent (jantár) --- */
  /* --akcent je DEKORAČNÁ: 3,31:1 na papieri, stačí na pruhy a podčiarknutia,
     nie na text. Na text a na plochy s textom je --akcent-text (5,53:1). */
  --akcent:#B87C0A;
  --akcent-text:#8A5A05;
  --akcent-text-h:#6B4504;     /* hover jantárového CTA */

  /* --- zlatá plocha upozornenia (obj-box) ---
     Zlatá je svetlá, takže text na nej je tmavý. MERANÉ, nie odhadnuté:
       plocha #F7E7BE + text --ink #17150F = 14,89:1
       rám --akcent #B87C0A na papieri --paper #FAF7EF = 3,31:1
     Prah pre text je 4,5:1 a pre rám (nie je to text) 3:1 — obidva sedia
     s veľkou rezervou. Plocha sama voči papieru je len 1,15:1, preto je box
     ohraničený rámom; bez neho by na krémovom papieri takmer nebolo vidieť,
     že je to samostatný blok.

     Sýtu --akcent ako PLOCHU použiť nemožno: tmavý text na nej dáva 5,15:1,
     čo prah spĺňa, ale zlatý blok cez celú šírku v značkovej sýtosti kričí
     viac než veta, ktorú nesie. */
  --zlata-plocha:#F7E7BE;
  --zlata-text:#17150F;
  --zlata-ram:#B87C0A;

  /* --- červená z loga ---------------------------------------------------
     #C9292B je farba, ktorou je obtiahnuté „Galimar" a špendlík v logu.
     Zmerané zo súboru, nie odhadnuté.

     POUŽÍVA SA NA JEDINÚ VEC: tlačidlo „Zavolať". Web nemá eshop, takže
     jediná akcia, ktorú od návštevníka chceme, je telefonát — a keď je na
     stránke jedna sýta červená plocha, oko ide tam. Druhá červená vec by
     tú prvú zrušila.

     Nesmie sa objaviť v odznakoch, linkách, hoveroch ani na chybových
     hláškach: tie majú --vystraha a splynúť s tlačidlom nesmú.

     Biely text na nej má 5,48:1, teda nad prahom 4,5:1 aj pre bežný text.
     V tmavom režime sa nemení — je to farba značky a tá musí zostať
     rovnaká, inak ju človek neprepojí s logom. Mení sa len hover. */
  /* --- modrá pre odoslanie SMS -------------------------------------------
     Tri akcie objednávky majú tri farby, lebo majú tri významy:

       Poslať SMS         modrá     — v telefónoch je modrá farba správ
       Skopírovať         jantár    — neutrálna, sekundárna akcia
       Zavolať            červená   — jediná farba zo značky, jediná akcia,
                                      ktorú od človeka naozaj chceme

     Modrá je funkčná, nie značková: neprevzala sa z loga a nesmie sa objaviť
     nikde inde. Odtieň je bližšie k Android Messages než k iMessage, lebo
     iMessage modrá (#007AFF) má s bielym textom len 4,02:1 a AA neprejde.

     Namerané: biely text 6,39:1 (svetlý) a 4,72:1 (tmavý režim). */
  --sms:#0B57D0;
  --sms-h:#0A4AB0;
  --na-sms:#FFFFFF;

  --zavolat:#C9292B;
  --zavolat-h:#A81E20;        /* tmavší hover, 7,31:1 na bielom textu */
  --na-zavolat:#FFFFFF;

  /* --- 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. */

  /* --- doplnkový akcent pre „nevýhody" a cenové upozornenia ---
     Zostáva červená a zostáva vyhradená. Na tomto webe je to farba vety
     „dnes je to drahšie, než to za 30 dní bolo" — najdôležitejšieho prvku
     rozhrania. Nesmie sa použiť dekoratívne nikde inde. */
  --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:#E8E2D5;

  /* --- 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:#211E18;
  --na-panele:#CFC7B6;
  --na-panele-muted:#9C947F;
  --na-panele-jasny:#FFFFFF;

  /* --- prekrytie fotiek: tmavé v oboch režimoch --- */
  --scrim:rgba(23,21,15,.78);
  --na-scrim:#FFFFFF;
  --na-scrim-jemny:#E3DCCC;

  /* --- stavové farby v admine ---
     Zelená pre OK a červená pre chybu zostávajú: sú to univerzálne stavové
     významy, nie značka. --top-* bolo ružové podľa starého akcentu, teraz je
     jantárové — je to jediné miesto, kde jantár smie byť plocha, lebo admin
     nie je verejná časť a --vystraha sa v tej istej tabuľke nevyskytuje. */
  --ok-bg:#E9F0E6;    --ok-text:#2A4620;   --ok-line:#C6D8BE;
  --err-bg:#FBEAE7;   --err-text:#7A2118;  --err-line:#F0CCC5;
  --top-bg:#FBF0D8;   --top-text:#7A5205;  --top-line:#EBD6A4;
  --off-bg:#F1EEE5;
  --riadok-hover:#FCFAF4;

  /* --- priesvitné odvodeniny --- */
  --hlavicka:rgba(250,247,239,.9);
  --sekcia-tint:rgba(242,236,221,.55);
  --line-jemna:rgba(228,222,208,.6);
  --zar-primar:rgba(43,39,33,.10);
  --zar-akcent:rgba(184,124,10,.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(23,21,15,.05), 0 6px 20px rgba(23,21,15,.07);
  --tien-h:0 2px 6px rgba(23,21,15,.09), 0 14px 34px rgba(23,21,15,.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:#12110E;
    --ink:#EFEBE2;
    --muted:#A39C8D;
    --line:#2E2B25;
    --surface:#1C1A16;

    /* Tmavý grafit na tmavom pozadí by nebolo vidieť, preto sa primárna
       farba v tmavom režime OBRACIA na svetlú a hover ju ešte zosvetlí.
       Zostáva takmer bezfarebná — teplá slonovina, nie biela: čistá biela
       by na krémovom svetlom režime a teplom tmavom pôsobila ako iná značka. */
    --primar:#E8DCC2;
    --primar-h:#F5EDDC;
    --tint:#241F17;
    --pruh:#2A241A;

    --akcent:#E8A93B;
    --akcent-text:#F0C06B;
    --akcent-text-h:#F6D293;

    /* Zlatá sa v tmavom režime OBRACIA: plocha je tmavozlatá a text svetlý.
       Svetlá zlatá plocha by v tme svietila ako lampa vedľa tmavej stránky.
         plocha #3A2C0E + text #F5E3B8 = 10,71:1 */
    --zlata-plocha:#3A2C0E;
    --zlata-text:#F5E3B8;
    --zlata-ram:#E8A93B;

    --vystraha:#F08A80;

    /* Priesečník loga NIE JE v tmavom režime --akcent. Tvary sú tu svetlé
       (#E8DCC2) a jasný jantár --akcent (#E8A93B) má voči nim len 1,52:1 —
       priesečník by v odtieňoch sivej a pre časť farbosleposti takmer zmizol.
       Tmavý jantár dáva 4,36:1 a zostáva jantárový. Toto je meraný dôvod,
       nie vec vkusu — nemeň to späť. */

    /* Primárna je tu svetlá → text na nej je tmavý. */
    --na-farbe:#12110E;
    /* Červená značky zostáva; na tmavom pozadí je tmavší hover nečitateľný,
       preto sa v tmavom režime rozjasňuje namiesto stmavovania. */
    --zavolat-h:#E04446;

    /* Modrá sa v tmavom režime rozjasňuje (inak splynie s pozadím), ale hover
       ide NAOPAK do tmava: každé ďalšie zosvetlenie by znížilo kontrast
       bieleho textu, ktorý je pri 4,72:1 už len tesne nad prahom. */
    --sms:#2A6FE0;
    --sms-h:#1F5FCF;
    --na-farbe-jemny:#241F17;

    --tmavy-panel:#191712;
    --na-panele:#CFC7B6;
    --na-panele-muted:#A69D88;
    --na-panele-jasny:#FFFFFF;

    --scrim:rgba(8,7,5,.80);
    --na-scrim:#FFFFFF;
    --na-scrim-jemny:#E3DCCC;

    --ok-bg:#17241A;    --ok-text:#96D0A0;   --ok-line:#2E4636;
    --err-bg:#2A1512;   --err-text:#F2A396;  --err-line:#4A241E;
    --top-bg:#2B2312;   --top-text:#F0C06B;  --top-line:#4C3D1E;
    --off-bg:#1F1D18;
    --riadok-hover:#1E1C17;

    --hlavicka:rgba(18,17,14,.9);
    --sekcia-tint:rgba(36,31,23,.5);
    --line-jemna:rgba(46,43,37,.7);
    --zar-primar:rgba(232,220,194,.10);
    --zar-akcent:rgba(232,169,59,.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); }
/* ZÁLOHA ZA OBAL. Vlastný riadok pod cenou a stlmená — je to vratná čiastka,
   nie cena, a nesmie s ňou splynúť do jedného čísla. `display:block` je tu
   podstatnejšie než vzhľad: „2,80 € + 0,15 € záloha" na jednom riadku sa na
   390 px zlomí kdekoľvek a vznikne z toho „2,80 € + 0,15" a pod tým „€ záloha". */
.karta-zaloha { display:block; font-family:var(--pismo-text); font-weight:400; font-size:.78rem; color:var(--muted); white-space:nowrap; }
.detail-zaloha { display:block; font-family:var(--pismo-text); font-size:.85rem; font-weight:400; color:var(--muted); margin-top:2px; }
.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.
   Základ 12ch je bod zlomu: užšie políčko už nemá zmysel, vtedy sa radšej
   zalomí. Tlačidlo sa nesmie zmršťovať, inak sa oreže jeho popis. */
.poradca-form { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.poradca-form input { flex:1 1 12ch; 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); }
.poradca-form button { flex:0 0 auto; }
.poradca-form input:focus { outline:2px solid var(--primar); outline-offset:1px; }
.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); }
/* Odporúčanie pri neurčitom dopyte a pri nule výsledkov.
   Odlíšené od nápovedy pod ním: nápoveda je stlmená (--tint), toto je
   odpoveď, takže stojí na podklade stránky s výraznejším orámovaním.
   Mriežka je tá istá `.mriezka` ako všade — pri troch kartách sa na 390 px
   zloží do jedného stĺpca sama (auto-fill, minmax 230px), takže nič
   nepreteká a nepotrebuje vlastný breakpoint. */
.odporucame { margin:0 0 30px; padding:20px 22px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--akcent); border-radius:var(--radius); }
.odporucame-tip { margin:0 0 4px; font-size:1.02rem; line-height:1.6; color:var(--ink); max-width:62ch; }
.odporucame-tip a { font-weight:600; white-space:nowrap; }
.odporucame-nadpis { font-family:var(--pismo-nadpis); font-size:1rem; font-weight:600; color:var(--muted); margin:0 0 14px; }
.odporucame-mriezka { gap:16px; }
@media (max-width:430px) {
  /* Na úzkom telefóne berie orámovanie zbytočnú šírku karte. */
  .odporucame { padding:16px 14px; }
}

.poradca-napoveda { background:var(--tint); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-top:8px; }
.poradca-napoveda-text { margin:0 0 12px; 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; }
/* Logo v hlavičke. Pevný rozmer je aj v HTML (`width`/`height`) — tu je
   preto, aby ho neroztiahlo flexbox rozloženie hlavičky. */
.brand-logo { display:block; flex:none; width:69px; height:44px; }
.pata-logo img { display:block; width:48px; height:48px; }
.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; }

/* Zmazané 31. 8. 2026: `.brand-blok` a `.brand-domena` — stĺpec pod logom
   s doménou drobným mono rezom. Bral 77 px z 362 dostupných na 390 px a to
   bolo presne to, čo hlavičke chýbalo.

   Výšku hlavičky to NEMENÍ: ten stĺpec bol vysoký ~36 px, teda nižší než
   44 px loga, takže výšku určovalo logo aj predtým. Mobilné menu sa otvára
   na pevnom `inset:62px` a nemá sa o čo posunúť. */

/* 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; }
}

/* ============================================================ 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; }
/* Číselný stĺpec v tabuľke. `.an-cislo` má zarovnanie vpravo už vyššie, ale
   `.admin-tabulka th, .admin-tabulka td` je špecifickejšie a prebilo by ho —
   hlavička by stála vľavo a čísla pod ňou vpravo. */
.admin-tabulka th.an-cislo, .admin-tabulka td.an-cislo { 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) */
/* nav CTA + 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-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");
}
/* 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::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;
}
/* Zvýraznené CTA tlačidlo v navigácii (`.nav-cta`) je odstránené aj tu.
   Bolo to druhé „Jedálny lístok" v tej istej hlavičke — raz odkaz, raz
   tlačidlo. S ním odišla aj oprava kontrastu jeho aktívneho stavu: biely
   text na svetlom pozadí mal 1,15:1 a riešil to selektor o triedu
   špecifickejší. Bez tlačidla nie je čo opravovať. */
/* ============================================================ P24: /poradca */
/* Rozklad vety na sloty. Čiara je pseudo-elementom toho istého bloku ako
   slovo, takže sa s ním nemôže rozísť — ani pri zalomení, ani pri zväčšení
   písma. SVG s textom by tu bolo horšie: text v ňom neškáluje s nastavením
   prehliadača. */
.pd-rozklad { margin:34px 0 8px; }
.pd-nadpis {
  font-family:var(--pismo-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--akcent-text); margin:0 0 18px;
}

/* Celá veta je odkaz na skutočný dopyt – z ilustrácie sa tým stáva ukážka,
   ktorá sa dá overiť. Funguje bez JS, je to obyčajný <a href>. */
.pd-veta {
  display:flex; flex-wrap:wrap; gap:8px 26px;
  text-decoration:none; color:inherit;
  padding:16px 18px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface);
}
.pd-veta:hover { border-color:var(--akcent); }
.pd-veta:focus-visible { outline:2px solid var(--primar); outline-offset:2px; }

.pd-tok { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.pd-slovo {
  display:block; font-size:1.18rem; font-weight:600; color:var(--ink);
  line-height:1.3;
}

/* Čiara pod slovom, dokresľuje sa zľava doprava. Je ::after samotného slova,
   nie súrodenec: tým je jej šírka šírkou slova z definície a nedá sa rozísť
   ani pri zalomení, ani pri zväčšení písma. Ako súrodenec so width:100 %
   dostávala šírku tokenu, ktorý sa na úzkej obrazovke roztiahne. */
.pd-slovo::after {
  content:''; display:block; height:2px; margin-top:4px;
  background:var(--akcent); border-radius:1px; transform-origin:left center;
  animation:pd-kresli .45s ease-out both;
}
.pd-tok:nth-child(2) .pd-slovo::after { animation-delay:.12s; }
.pd-tok:nth-child(3) .pd-slovo::after { animation-delay:.24s; }
@keyframes pd-kresli { from { transform:scaleX(0); } to { transform:scaleX(1); } }

.pd-slot {
  font-family:var(--pismo-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--akcent-text);
}

/* Nepoužité sloty – stlmené, s prerušovaným podčiarknutím. */
.pd-zvysok { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin:14px 2px 0; }
.pd-slot-prazdny {
  color:var(--muted); border-bottom:2px dashed var(--line); padding-bottom:1px;
}
.pd-zvysok-text { color:var(--muted); font-size:.92rem; }


/* Úzka obrazovka: tokeny pod seba, každý s vlastnou čiarou. Čiara ostáva
   pod svojím slovom, takže sa nemá ako rozísť. */
@media (max-width:520px) {
  .pd-veta { flex-direction:column; gap:12px; }
  .pd-tok { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  .pd-slovo::after { animation:none; transform:none; }
}
/* ============================================================== 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; }
}
/* Sekcia „Veľkosti" na detaile bola pri prechode na jedlá odstránená
   (jedlo veľkosti nemá) a s ňou aj `product_variants`. Pravidlá, ktoré ju
   štýlovali — .velkosti-tab, .velkost-stav-*, .velkosti-upozornenie,
   .detail-cena-poznamka, .velkosti-vyhrada — sú preto tiež preč. Mŕtve CSS
   nikto neodstráni neskôr: pri ďalšom čítaní vyzerá ako niečo, čo sa používa,
   len to práve nevidno.
   Overené: ani jedna z tých tried nie je v žiadnej šablóne. */


/* ============================================================ 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); }

/* =============================================================================
   JEDLÁ — gramáž, alergény, značky
   =============================================================================
   Alergény sú zdravotný údaj, takže dostávajú vlastnú plochu a rám, nie len
   iný odtieň textu. Farby idú výhradne cez tokeny; natvrdo napísaná farba by
   sa v tmavom režime nezmenila.

   `je-zavisle` má bodkovaný rám ZÁMERNE: zoznam pri kombinovanom jedle nie je
   deklarácia, je to zjednotenie možností. Plný rám by tvrdil viac, než vieme.
   ========================================================================== */

.karta-gramaz {
  display: block;
  font-family: var(--pismo-mono);
  font-size: .8125rem;
  color: var(--muted);
  margin-top: 2px;
}

.detail-gramaz {
  font-family: var(--pismo-mono);
  font-size: .875rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: 8px;
}

.karta-alergeny {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-family: var(--pismo-mono);
  font-size: .75rem;
  color: var(--muted);
  text-decoration: none;
}
.karta-alergeny:hover { border-color: var(--akcent); color: var(--ink); }
.karta-alergeny.je-zavisle { border-style: dotted; }
.karta-alergeny.je-neoverene { border-style: dashed; color: var(--muted); }

.detail-znacky {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
}
.detail-znacky li {
  padding: 2px 10px;
  border-radius: var(--radius-s);
  background: var(--tint);
  font-size: .8125rem;
  color: var(--ink);
}

.alergeny {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--surface);
}
.alergeny-nadpis { margin: 0 0 10px; font-size: 1.125rem; }

.alergeny-vyhrada {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--akcent);
  background: var(--sekcia-tint);
  font-size: .9375rem;
}

.alergeny-zoznam {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.alergeny-zoznam a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  text-decoration: none;
  color: var(--ink);
}
.alergeny-zoznam a:hover { border-color: var(--akcent); }
.alergen-cislo {
  font-family: var(--pismo-mono);
  font-weight: 700;
  color: var(--akcent-text);
}
.alergen-nazov { font-size: .9375rem; }

.alergeny-ziadne, .alergeny-chyba, .alergeny-moze {
  margin: 0; font-size: .9375rem; color: var(--muted);
}
.alergeny-chyba { color: var(--ink); }
.alergeny-moze { margin-top: 10px; font-style: italic; }

/* NEOVERENÉ ZLOŽENIE
   Nesmie kričať a nesmie sa dať prehliadnuť. Preto rám a jemné pozadie, nie
   výstražná farba: je to chýbajúci údaj, nie nebezpečenstvo. Farby z tokenov,
   nie natvrdo — inak by v tmavom režime zostalo svetlé pozadie. */
.alergeny-neoverene {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.5;
}

/* Drobný znak na karte a v zozname objednávky. `title` nesie celú vetu. */
.karta-neoverene {
  display: inline-block;
  margin-left: 6px;
  width: 1.15em;
  height: 1.15em;
  line-height: 1.15em;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: .78rem;
  cursor: help;
}
.karta-neoverene:hover { color: var(--ink); border-color: var(--muted); }

/* PREPÍNAČ JAZYKA
   V hlavičke vedľa hamburgera. Zámerne text a nie vlajka: vlajka je štát,
   nie jazyk, a angličtinou hovorí aj ten, kto s Britániou nemá nič spoločné.
   Farby z tokenov. */
.jazyk-prepinac {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}
.jazyk-prepinac:hover { color: var(--ink); border-color: var(--muted); }
.jazyk-kratky { display: none; }

/* ROZBAĽOVACÍ ZOZNAM JAZYKOV — pri troch a viac.
   Dnes sa nevykresľuje (jazyky sú dva), ale existuje, aby pridanie tretieho
   nevyžadovalo zásah do CSS. Tri tlačidlá vedľa seba by sa do hlavičky na
   390 px nezmestili — viď výpočet v `test_hlavicka.php`.

   `<details>`, nie `<select>`: select potrebuje JavaScript na to, aby voľba
   niekam viedla, a bez neho by bol mŕtvy. Toto je zoznam odkazov. */
.jazyk-vyber { position: relative; margin-left: 10px; }
.jazyk-vyber > summary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--muted); font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; cursor: pointer; list-style: none;
}
.jazyk-vyber > summary::-webkit-details-marker { display: none; }
.jazyk-vyber > summary::after { content: '⌄'; font-size: .9em; line-height: 1; }
.jazyk-vyber > summary:hover { color: var(--ink); border-color: var(--muted); }
.jazyk-vyber[open] > summary { color: var(--ink); border-color: var(--muted); }
.jazyk-zoznam {
  position: absolute; right: 0; z-index: 40; margin: 4px 0 0; padding: 4px;
  min-width: 100%; list-style: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-s); box-shadow: var(--tien);
}
.jazyk-zoznam a {
  display: block; padding: 6px 12px; border-radius: var(--radius-s);
  color: var(--ink); font-size: .85rem; text-decoration: none; white-space: nowrap;
}
.jazyk-zoznam a:hover { background: var(--tint); }

/* Štítok pri jedle, ktoré anglický text nemá a ukazuje sa slovenský.
   Je to priznanie, nie chyba — tón poznámky, nie výstrahy. */
.stitok-sk { display: inline-block; margin-left: 6px; padding: 1px 5px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); color: var(--muted);
  font-size: .62em; font-weight: 600; letter-spacing: .04em;
  vertical-align: middle; text-transform: uppercase; }

/* ============================================================== výživa */
.vyziva-tabulka { width: 100%; max-width: 420px; border-collapse: collapse; margin: 8px 0 14px; }
.vyziva-tabulka th, .vyziva-tabulka td { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .93rem; text-align: left; }
.vyziva-tabulka th { font-weight: 500; color: var(--muted); }
.vyziva-tabulka td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Veta o odhade a veta o oleji. Nie sú varovanie, sú to hranice tvrdenia —
   preto tón poznámky, nie výstrahy. */
.vyziva-vyhrada { margin: 6px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.vyziva-chyba { margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--line);
  border-left: 3px solid var(--muted); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink); font-size: .92rem; line-height: 1.5; }
/* ====================================================== zlatý box objednávky
   Tri veci, ktoré treba vedieť pred objednaním. Farby a merania kontrastu
   sú pri tokenoch `--zlata-*` hore.

   `list-style` zostáva — sú to tri nezávislé body a odrážka to hovorí aj
   oku, nielen odčítavaču. Odsadenie je preto na `padding-left`, nie na
   `list-style:none` s ručnými pomlčkami. */
.obj-box { margin: 0 0 20px; padding: 14px 16px 14px 34px;
  border: 1px solid var(--zlata-ram); border-radius: var(--radius-s);
  background: var(--zlata-plocha); color: var(--zlata-text);
  font-size: .93rem; line-height: 1.55; }
.obj-box li + li { margin-top: 8px; }
/* „LEN OSOBNÝ ODBER" je jediná vec na stránke, ktorú si človek musí odniesť,
   aj keby nečítal nič ďalšie — preto tučné. Nie veľké písmená cez CSS:
   text UŽ JE veľkými v slovníku, takže ho tak prečíta aj odčítavač
   a nezostane závislý na štýle. */
.obj-box strong { font-weight: 700; }

/* ------------------------------------------------- otáznik s alergénmi
   JEDEN prvok pre karty jedál aj pre lístok objednávky. `<details>`, takže
   sa otvára klikom, dotykom aj klávesnicou — bez JS.

   `min-width/min-height:24px` na `<summary>`: dotykový cieľ. Samotný znak
   „?" má pri .8rem asi 8 px a trafiť ho prstom sa nedá. 24 px je minimum
   podľa WCAG 2.2 (2.5.8).

   `list-style:none` + `::-webkit-details-marker`: preč s trojuholníkom.
   Otáznik JE ten ovládač; trojuholník vedľa neho by boli dva. */
.alergeny-otaznik { display: inline; }
.alergeny-otaznik > summary {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px; margin-left: 6px; padding: 0 4px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--muted);
  font-size: .78rem; font-weight: 700; line-height: 1;
  cursor: pointer; list-style: none; vertical-align: middle;
}
.alergeny-otaznik > summary::-webkit-details-marker { display: none; }
.alergeny-otaznik > summary:hover,
.alergeny-otaznik > summary:focus-visible { border-color: var(--muted); color: var(--ink); }
.alergeny-otaznik[open] > summary { border-color: var(--muted); color: var(--ink); }

/* Rozbalený text ODSÚVA obsah, neprekrýva ho.
   Do 1. 9. 2026 to bol `position:absolute` panel viazaný na šírku riadku
   objednávky. Keď ten istý prvok pribudol na karty jedál, prestalo to
   fungovať: `.karta` má `overflow:hidden`, takže by sa panel orezal.

   Odsúvanie je aj štandardné správanie `<details>` a nepotrebuje žiadny
   polohovací kontext — takže sa nedá pokaziť tým, že sa prvok použije na
   treťom mieste, kde na to nikto nemyslel.

   `flex-basis:100%` je kvôli tomu, že v oboch rodičoch (`.obj-polozka-text`
   aj `.karta-telo`) ide o flexbox: bez toho by odsek dostal šírku obsahu
   `<summary>`, teda 24 px, a lámal by sa po písmenách. */
.alergeny-otaznik[open] { display: block; flex-basis: 100%; }
.alergeny-otaznik > p {
  margin: 6px 0 0; padding: 8px 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--zlata-ram);
  border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink);
  font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere;
}

/* Príspevok jednej položky objednávky a kalorický súčet pod cenou. */
.obj-kcal { margin: 2px 0 0; color: var(--muted); font-size: .8rem;
  font-variant-numeric: tabular-nums; }
/* ================================ výživové údaje objednávky (blok pod SMS)
   Šírka: panel má na 390 px okne 350 px, vnútri 308 px (2× 20 px padding,
   2× 1 px rám). Tabuľka ide na `width:100%`, takže sa doň zmestí sama.

   `table-layout:fixed` + percentá: bez toho by prehliadač šírku stĺpcov
   odvodil od obsahu a jeden dlhý názov („AKCIA Burger menu double") by
   tabuľku roztiahol nad šírku panela. Takto je hodnota vždy 92 px a názov
   dostane zvyšok, nech je akokoľvek dlhý.

   `overflow-wrap:anywhere` na názve: „Miniburger s vegetariánskou plackou"
   sa zalomí medzi slovami sám, ale jedno dlhé slovo bez medzery by pretieklo
   aj v 216 px stĺpci. Toto je poistka proti názvu, ktorý ešte neexistuje. */
.obj-vyziva-blok { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.obj-vyziva-blok h3 { margin: 0 0 8px; font-size: 1rem; }
.obj-vyziva-tab { width: 100%; table-layout: fixed; border-collapse: collapse; }
.obj-vyziva-tab td { padding: 6px 0; border-bottom: 1px solid var(--line-jemna);
  font-size: .86rem; line-height: 1.45; vertical-align: top;
  overflow-wrap: anywhere; }
.obj-vyziva-tab tr:last-child td { border-bottom: 0; }
.obj-vyziva-hodnota { width: 92px; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; overflow-wrap: normal; }
/* „dopĺňame" je priznanie, nie číslo — tón poznámky, nie výstrahy. */
.obj-vyziva-hodnota.je-chyba { color: var(--muted); font-style: italic; }
.obj-vyziva-vyhrada:empty { display: none; }
.obj-vyziva-vyhrada { margin: 8px 0 0; }
@media (max-width: 420px) {
  /* Skratka („EN" / „SK") tu stála do 31. 8. 2026 a bola ústupok tesnému
     priestoru, nie zámer: celé slovo sa na 390 px nezmestilo o pár pixelov.
     Odkedy značka nenesie text „galimar.sk" (77 px), sa celé slovo zmestí
     s rezervou 41 px, takže sa vrátilo. Výpočet je v `test_hlavicka.php`
     a počíta sa na DLHŠIE z oboch slov, teda na „Slovenčina". */
  .jazyk-prepinac { margin-left: 0; padding: 3px 7px; font-size: .78rem; }
  /* Rozbaľovací zoznam sa musí zúžiť ROVNAKO. Do UK-2 sa nevykresľoval, tak
     sa naň zabudlo — a ostal by na 390 px o 12 px širší než jeden odkaz,
     ktorý nahradil. Rozpočet hlavičky počíta s týmito hodnotami. */
  .jazyk-vyber { margin-left: 0; }
  .jazyk-vyber > summary { padding: 3px 7px; font-size: .78rem; gap: 4px; }
  .hlavicka-in { gap: 10px; padding-left: 14px; padding-right: 14px; }
}
.alergeny-legenda { margin: 12px 0 0; font-size: .875rem; }

.alergeny-tab .alergen-cislo-bunka {
  font-family: var(--pismo-mono);
  width: 4rem;
}

/* ------------------------------------------------- otváracie hodiny */
/* Tabuľka na /kontakt. HTML skladá `Hodiny::html()`, nie ruka — trieda je
   preto jediná dohoda medzi PHP a týmto súborom a nesmie sa premenovať bez
   zmeny v `jadro/Hodiny.php`. */
.stranka-cms .hodiny {
  border-collapse: collapse;
  margin: 12px 0 8px;
  font-size: .9375rem;
}
.stranka-cms .hodiny th {
  text-align: left;
  font-weight: 600;
  padding: 5px 20px 5px 0;
  white-space: nowrap;
}
.stranka-cms .hodiny td {
  padding: 5px 0;
  font-family: var(--pismo-mono);
  white-space: nowrap;
}

/* Druhý riadok pätičky: hodiny a kontakt. Tlmenejší než firemný riadok —
   je to prevádzková informácia, nie právny údaj. */
.pata-hodiny { color: var(--na-panele-muted); }

/* ============================================================ VOLAŤ A PRÍSŤ */
/* Web nemá eshop a mať nebude. Cieľ je telefonát alebo návšteva, takže obe
   akcie stoja v hlavičke — na každej stránke, aj na mobile, mimo hamburgera.
   Skrytý telefón je na mobile o dve klepnutia ďalej než jedálny lístok, a to
   je presne opačné poradie, než aké chceme. */

/* Vizuálne skryté, ale čitateľné pre odčítavač. `display:none` by text
   odobralo aj z accessibility tree a tlačidlo by na úzkej obrazovke zostalo
   bez mena — preto orezanie, nie skrytie. */
.vo-skryte {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  border:0; overflow:hidden; white-space:nowrap; clip-path:inset(50%);
}

.hl-akcie { display:flex; align-items:center; gap:8px; margin-left:auto; }
.hl-akcia {
  display:inline-flex; align-items:center; gap:7px;
  /* 44 px je minimum pre dotyk. Nie estetická voľba — pod ním sa na telefóne
     trafí vedľa a človek namiesto hovoru otvorí navigáciu. */
  min-height:44px; padding:.45em .9em;
  border-radius:999px; font-weight:600; font-size:.95rem; white-space:nowrap;
  border:1px solid transparent; transition:background .12s ease, border-color .12s ease;
}
.hl-zavolat { background:var(--zavolat); color:var(--na-zavolat); }
.hl-zavolat:hover { background:var(--zavolat-h); color:var(--na-zavolat); }
.hl-navigovat { background:var(--surface); color:var(--ink); border-color:var(--line); }
.hl-navigovat:hover { border-color:var(--primar); }
.hl-akcia svg { flex:none; }

/* Poradie v hlavičke: značka | navigácia | akcie | hamburger.
   Cez `order`, nie cez poradie v HTML: v HTML musí prepínač menu stáť pred
   navigáciou, inak ho `.nav-prepinac:checked ~ .navigacia` nedosiahne. */
.brand { order:1; }
.navigacia { order:2; }
.hl-akcie { order:3; }
/* Bez tohto by prepínač skončil PRED logom: ostatné prvky majú `order` a
   predvolená hodnota 0 je menšia než ich všetky. */
.jazyk-prepinac { order:3; }
.jazyk-vyber { order:3; }
.hamburger { order:4; }

@media (max-width:900px) {
  /* Zmizne slovo, nie tlačidlo. Text ide do skrytej vrstvy, takže odčítavač
     stále číta „Zavolať +421 944 423 033" — ikona sama by mu nepovedala nič. */
  .hl-akcia-text {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    border:0; overflow:hidden; white-space:nowrap; clip-path:inset(50%);
  }
  .hl-akcia { padding:.45em; min-width:44px; justify-content:center; }
}
@media (max-width:680px) {
  /* Hamburger má svoje `margin-left:auto` z pôvodného pravidla; s akciami
     pred ním by odtlačil ich, nie seba. Medzeru drží gap. */
  .hamburger { margin-left:0; }
  .hlavicka-in { gap:10px; }
}

/* CTA v texte stránky (nie v hlavičke) s tou istou červenou. */
.cta-sms { background:var(--sms); color:var(--na-sms); }
.cta-sms:hover { background:var(--sms-h); color:var(--na-sms); }
/* WHATSAPP — GRAFITOVÁ, NIE ZELENÁ.
   Zelená WhatsAppu je farba cudzej značky a v paneli objednávky by bola
   štvrtá akčná farba vedľa modrej (správy), červenej (telefón) a zlatej
   (kopírovanie). Grafit je primárna farba Galimaru, takže tlačidlo
   vyzerá ako súčasť webu a nie ako reklama.
   Kontrast overuje test_objednavka.php v svetlom aj tmavom režime. */
.cta-whatsapp { background:var(--primar); color:var(--na-farbe); }
.cta-whatsapp:hover { background:var(--primar-h); color:var(--na-farbe); }
.cta-zavolat { background:var(--zavolat); color:var(--na-zavolat); }
.cta-zavolat:hover { background:var(--zavolat-h); color:var(--na-zavolat); }

/* ============================================================ FOTKY NA ÚVODE */
/* Pás cez celú šírku okna, bez ohľadu na obal stránky. Obrázok má v HTML
   pevné width/height v pomere 2:1, takže prehliadač si miesto rezervuje ešte
   pred stiahnutím a text pod fotkou nepodskočí. */
.hp-foto-pas { width:100%; background:var(--tint); border-bottom:1px solid var(--line); }
.hp-hero-foto {
  display:block; width:100%; height:auto;
  /* Na širokom monitore by 2:1 fotka zabrala pol obrazovky. Strop výšky ju
     na veľkých šírkach oreže; `object-fit:cover` drží stred záberu. */
  max-height:min(46vh, 460px); object-fit:cover; object-position:center;
}

/* Druhá, menšia fotka + text vedľa nej. */
.hp-foto-druha { display:grid; grid-template-columns:420px 1fr; gap:32px; align-items:center; }
.hp-foto2 { margin:0; }
.hp-foto2 img {
  display:block; width:100%; height:auto; border-radius:var(--radius);
  border:1px solid var(--line); box-shadow:var(--tien);
}
.hp-foto2 figcaption { margin-top:10px; font-size:.875rem; color:var(--muted); }
.hp-foto2-text h2 { margin-top:0; }
.hp-foto2-text p { color:var(--muted); }
.hp-foto2-cta { margin-bottom:0; }
@media (max-width:760px) {
  .hp-foto-druha { grid-template-columns:1fr; gap:20px; }
}

/* ============================================================ ROZVOZ */
.hp-rozvoz-odkazy { display:flex; flex-wrap:wrap; gap:12px; }
.hp-rozvoz-btn {
  display:inline-flex; align-items:center; gap:8px; min-height:48px;
  padding:.6em 1.3em; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink); font-weight:600;
  box-shadow:var(--tien); transition:border-color .12s ease, box-shadow .12s ease;
}
.hp-rozvoz-btn:hover { border-color:var(--primar); box-shadow:var(--tien-h); }
.hp-rozvoz-sip { color:var(--muted); font-size:.9em; }
.hp-rozvoz-alt { margin-top:18px; color:var(--muted); }
/* Telefónne číslo v texte je odkaz, nie tlačidlo — a červená z loga patrí
   VÝHRADNE tlačidlu „Zavolať". Druhá červená vec na stránke by tú prvú
   zrušila: keď je sýtych plôch viac, oko si nevyberie ani jednu. */
.hp-rozvoz-tel { font-weight:600; }

/* Poznámka v pätičke pod odkazmi na rozvoz. */
.pata-poznamka { margin:6px 0 0; font-size:.8rem; color:var(--na-panele-muted); }

/* Detail jedla: veta o úprave a dve akcie pod cenou. */
.detail-uprava { margin:14px 0 0; color:var(--muted); font-size:.9375rem; }
.detail-akcie { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; }

/* ========================================================== OBJEDNÁVKA SMS */
/* Dva stĺpce: vľavo lístok, vpravo objednávka. Panel je `sticky`, aby pri
   dlhom lístku neušiel z dohľadu — na mobile sa oba stĺpce zrovnajú pod seba
   a panel sa prilepí na spodok obrazovky by bol horší: prekryl by práve tie
   tlačidlá „+", na ktoré človek mieri. */
.obj-mriezka { display:grid; grid-template-columns:1fr 400px; gap:32px; align-items:start; margin-top:28px; }
@media (max-width:900px) { .obj-mriezka { grid-template-columns:1fr; } }

/* --- upozornenia nad obsahom --- */
.obj-zatvorene {
  margin:0 0 18px; padding:14px 18px; border-radius:var(--radius);
  border-left:4px solid var(--vystraha); background:var(--tint); color:var(--ink);
}
.obj-potvrdenie {
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  margin:0 0 8px; padding:16px 20px; border-radius:var(--radius);
  border:2px solid var(--zavolat); background:var(--surface);
}
.obj-potvrdenie-text { margin:0; flex:1 1 320px; }
.obj-potvrdenie-btn { flex:0 0 auto; }
.obj-noscript {
  margin:16px 0 0; padding:14px 18px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--tint);
}

/* --- lístok --- */
.obj-hladaj { display:block; margin:0 0 18px; }
.obj-hladaj input {
  width:100%; padding:.7em 1em; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); font:inherit; color:var(--ink);
}
.obj-listok-tip { color:var(--muted); margin:0 0 14px; }
.obj-kat { margin:0 0 26px; }
.obj-kat h3 { margin:0 0 10px; font-size:1.05rem; }
.obj-zoznam { list-style:none; margin:0; padding:0; }
.obj-polozka {
  display:flex; align-items:center; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.obj-polozka-text { flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.obj-polozka-nazov { color:var(--ink); font-weight:500; }
.obj-polozka-gramaz, .obj-polozka-vyber { font-size:.8rem; color:var(--muted); }
.obj-polozka-vyber {
  border:1px solid var(--line); border-radius:999px; padding:.1em .6em; white-space:nowrap;
}
.obj-polozka-cena { font-family:var(--pismo-mono); white-space:nowrap; }
/* 44 px je minimum pre dotyk — pod ním sa na telefóne trafí vedľa. */
.obj-pridaj {
  flex:none; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:1.3rem; line-height:1; cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.obj-pridaj:hover { background:var(--tint); border-color:var(--primar); }
.obj-nenaslo { color:var(--muted); }

/* --- panel objednávky --- */
/* PANEL SA MUSÍ DAŤ DOSCROLLOVAŤ CELÝ.
   -----------------------------------------------------------------------
   Predtým tu stálo len `position:sticky; top:88px` bez stropu výšky. Pri
   troch jedlách s výberom (každé má dva rozbaľovacie zoznamy a alergénovú
   vetu) narástol panel nad výšku okna — a keďže je prilepený, jeho spodok
   sa spolu so stránkou neposúval. Text SMS aj tlačidlá vrátane „Zavolať"
   zostali pod hranou obrazovky a nedalo sa k nim dostať vôbec.

   Riešenie je strop výšky a vlastný posun vnútri panelu. `100dvh` a nie
   `100vh`: na mobile sa `vh` počíta k výške okna BEZ lišty prehliadača,
   takže by panel presahoval presne o tú lištu. Poradie dvoch deklarácií
   je zámerné — staršie prehliadače `dvh` nepoznajú a zostanú pri `vh`.
   104 px je hlavička (68) plus odsadenie hore aj dole.

   `overscroll-behavior:contain` — keď človek doroluje panel na koniec,
   nezačne sa posúvať stránka pod ním. */
.obj-panel {
  position:sticky; top:88px;
  max-height:calc(100vh - 104px);
  max-height:calc(100dvh - 104px);
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding:20px; box-shadow:var(--tien);
}
@media (max-width:900px) {
  /* Na mobile ide panel NAD lístok. Pod ním by bol až za 87 položkami, teda
     prakticky nedosiahnuteľný — človek by pridal jedlo a nemal by ako zistiť,
     či sa pridalo. Prázdny panel zaberie dva riadky a rovno povie, čo robiť. */
  .obj-panel { order:-1; }
  .obj-listok { order:0; }

  /* Panel nie je prilepený (stránka sa posúva celá), ale strop výšky
     dostáva aj tu — a je to dôležitejšie než na počítači.

     Panel je totiž NAD lístkom. Bez stropu vyrástla objednávka s tromi
     jedlami s výberom na 1 538 px a lístok začínal 2 339 px od vrchu
     stránky, teda takmer štyri obrazovky nižšie. Človek pridal jedlo
     a k pridaniu ďalšieho sa už prakticky nedostal — zmerané, nie
     odhadnuté.

     Áno, znamená to dve oblasti, ktoré sa rolujú nezávisle, a na dotyk to
     nie je zadarmo. Ale zo zlých možností je horšia tá druhá: vnorené
     rolovanie je nepohodlie, nedosiahnuteľný lístok je rozbitá stránka.
     `overscroll-behavior:contain` aspoň zaistí, že sa po dorolovaní panelu
     nezačne hýbať stránka pod ním.

     Strop dostáva PANEL, nie zoznam položiek v ňom: dva vnorené posuny nad
     sebou (panel + zoznam) by boli presne ten typ rozhrania, pri ktorom
     prst nikdy netrafí to, čo chce. */
  .obj-panel {
    position:static;
    max-height:70vh; max-height:70dvh;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .obj-kosik { max-height:none; overflow:visible; }
}
.obj-panel h2 { margin-top:0; font-size:1.15rem; }
.obj-prazdna { color:var(--muted); }
.obj-kosik { list-style:none; margin:0 0 18px; padding:0; }
.obj-riadok { padding:12px 0; border-bottom:1px solid var(--line); }
.obj-riadok-hlava { display:flex; align-items:center; gap:8px; }
.obj-pocet { font-family:var(--pismo-mono); min-width:2.2em; }
.obj-nazov { flex:1; min-width:0; font-weight:500; }
.obj-cena { font-family:var(--pismo-mono); white-space:nowrap; }
.obj-zaloha { display:block; font-family:var(--pismo-text); font-size:.74rem; font-weight:400; color:var(--muted); }
.obj-mnoz, .obj-zmaz {
  flex:none; width:32px; height:32px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  cursor:pointer; line-height:1;
}
.obj-mnoz:hover, .obj-zmaz:hover { background:var(--tint); }
.obj-vyber { margin:10px 0 0; }
.obj-vyber label { display:block; font-size:.85rem; color:var(--muted); margin-bottom:3px; }
.obj-select {
  width:100%; padding:.5em .6em; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink); font:inherit;
}
/* Alergénový dôsledok voľby. Nesmie byť tlmenejší než okolie: je to zdravotný
   údaj a nie poznámka pod čiarou. */
/* Zmazané 31. 8. 2026: `.obj-vyber-info` a `.obj-alergeny`. Boli to dva
   odstavce s alergénmi priamo v paneli — jeden pod položkou, druhý pod
   KAŽDÝM rozbaľovacím zoznamom. Pri troch jedlách s výberom z toho bola
   stena textu cez celý panel. Text sa presunul do otáznika pri riadku
   položky (`.alergeny-otaznik`), teda do toho istého prvku, aký je v lístku. */

.obj-pole { margin:0 0 14px; }
.obj-pole label { display:block; font-weight:600; font-size:.9rem; margin-bottom:4px; }
.obj-pole input {
  width:100%; padding:.6em .8em; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--ink); font:inherit;
}
.obj-mini { margin:4px 0 0; font-size:.8125rem; color:var(--muted); }
.obj-suma { margin:16px 0 0; font-size:1.05rem; font-weight:600; }
.obj-suma-vyhrada { margin-bottom:16px; }
/* Rozpis zálohy hneď pod súčtom — súčet ju obsahuje, tak musí byť pri ňom. */
.obj-zaloha-spolu { margin:2px 0 0; }

.obj-nadpis-sms { font-size:.95rem; margin:18px 0 6px; }
/* Text SMS presne tak, ako pôjde — vrátane zalomení. `white-space:pre-wrap`,
   aby dlhý riadok na mobile nepretiekol von zo stránky. */
.obj-sms {
  margin:0; padding:12px 14px; border-radius:10px;
  border:1px dashed var(--line); background:var(--tint);
  font-family:var(--pismo-mono); font-size:.8125rem; line-height:1.5;
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
}
.obj-dlzka { margin:8px 0 0; font-size:.8125rem; color:var(--muted); }
.obj-dlzka.je-dlha { color:var(--ink); border-left:3px solid var(--vystraha); padding-left:10px; }
.obj-akcie { display:flex; flex-direction:column; gap:10px; margin:16px 0 0; }
.obj-akcie .cta { text-align:center; }
.obj-desktop { margin:0; font-size:.875rem; color:var(--muted); }
.obj-potvrdenie-mini { margin:14px 0 0; font-size:.875rem; }
.obj-sukromie { margin-top:12px; }

/* Odznak s počtom položiek v hlavičke. Vytvára ho JS, až keď je čo počítať. */
.obj-odznak { background:var(--tint); color:var(--ink); border-color:var(--line); gap:5px; }
.obj-odznak-n { font-family:var(--pismo-mono); font-weight:700; }

/* Tlačidlo „+ Do objednávky" na karte jedla. */
.karta-pridaj {
  display:block; width:100%; margin:10px 0 0;
  padding:.55em 1em; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink); font:inherit; font-weight:600;
  font-size:.875rem; cursor:pointer; transition:background .12s ease, border-color .12s ease;
}
.karta-pridaj:hover { background:var(--tint); border-color:var(--primar); }

/* Potvrdenie pridania. Nie `alert()`: ten preruší prácu a na mobile prekryje
   celú obrazovku práve vtedy, keď človek pridáva tretie jedlo. */
.obj-oznam {
  position:fixed; left:50%; bottom:20px; transform:translate(-50%, 20px);
  z-index:80; max-width:calc(100vw - 32px);
  padding:12px 18px; border-radius:999px;
  background:var(--primar); color:var(--na-farbe); font-size:.9rem;
  box-shadow:var(--tien-h); opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.obj-oznam.je-vidno { opacity:1; transform:translate(-50%, 0); }
@media (prefers-reduced-motion:reduce) {
  .obj-oznam { transition:none; }
}

/* Výhrada pri jedle s bezlepkovou žemľou. Výraznejšia než bežný alergénový
   blok: toto jedlo si otvorí človek, ktorému na tom naozaj záleží. Používa
   --vystraha ako linku, nie ako výplň — červená plocha by z informácie
   spravila poplach a to nie je to, čo tu hovoríme. */
.bezlepkova-vyhrada {
  border:2px solid var(--vystraha); border-radius:var(--radius);
  background:var(--tint); padding:18px 20px;
}
.bezlepkova-vyhrada h2 { margin:0 0 10px; font-size:1.05rem; }
.bezlepkova-vyhrada p { margin:0 0 10px; }
.bezlepkova-vyhrada p:last-child { margin-bottom:0; }
.bezlepkova-vyhrada-mini { font-size:.875rem; color:var(--muted); }

/* Karta jedla bez alergénov zo zoznamu. Tlmenejšia než zoznam čísel — je to
   dobrá správa, nie upozornenie — ale je to ODKAZ, nie holý text: legenda
   vysvetľuje, čo ten zoznam vlastne je. */
.karta-alergeny.je-ziadne { color:var(--muted); font-weight:500; }

/* Náhľad fotky v zozname na /objednavka. Pevný štvorec, aby mali riadky
   rovnakú výšku aj tam, kde fotka nie je. */
.obj-foto {
  flex:none; display:block; width:56px; height:56px;
  border-radius:10px; overflow:hidden; background:var(--tint);
  border:1px solid var(--line);
}
.obj-foto img { display:block; width:100%; height:100%; object-fit:cover; }
/* Záskok je ten istý šrafovaný vzor ako pri kartách (.is-empty), len bez
   názvu: na 56 px by sa doň nezmestil a vyzeral by ako chyba renderovania.
   Prázdny `data-nazov` by vykreslil prázdny ::after, preto sa vypína celý. */
.obj-foto-prazdna::after { content:none; }
.obj-foto-prazdna {
  background:repeating-linear-gradient(135deg,var(--tint),var(--tint) 6px,var(--pruh) 6px,var(--pruh) 12px);
}

/* ---------------------------------------------------- objednávka: kroky */
/* Číslo kroku je oddelený krúžok, nie „1." v texte: v odseku by splynulo
   s číslovaním jedál a s cenami, ktorých je na stránke plno. */
.obj-krok {
  display:flex; align-items:center; gap:10px;
  margin:0 0 10px; font-family:var(--pismo-nadpis); font-weight:700;
  font-size:.95rem; color:var(--ink);
}
.obj-krok-c {
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--primar); color:var(--na-farbe);
  font-family:var(--pismo-mono); font-size:.8rem; font-weight:700;
}
/* Krok 3 je vizuálne uzavretý blok, nie poznámka pod tlačidlami — je to
   súčasť postupu, nie dodatok. */
.obj-krok3 {
  margin:18px 0 0; padding:16px 18px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--tint);
  /* Aby prehliadač pri `scrollIntoView` (klávesnica, kotva) nezarovnal blok
     presne na spodnú hranu okna. Tlačidlo lícujúce s hranou je technicky
     viditeľné a prakticky sa naň zle mieri — na telefóne tam býva lišta
     prehliadača alebo domovský indikátor. */
  scroll-margin-bottom:16px;
}
.obj-krok3 p { margin:0 0 10px; font-size:.9375rem; }
/* `scroll-margin-bottom` musí byť na TLAČIDLE, nie len na bloku okolo neho:
   `scrollIntoView` sa volá na ňom a berie jeho vlastný odstup. Bez toho
   lícuje tlačidlo presne so spodnou hranou okna — technicky viditeľné,
   prakticky sa naň zle mieri. Zmerané: bottom 641 px pri okne 640 px. */
.obj-krok3-btn { display:block; text-align:center; scroll-margin-bottom:20px; }
.obj-akcie .cta, .obj-navrat-btn { scroll-margin-bottom:20px; }
.obj-cakanie { color:var(--muted); }

/* ------------------------------------- po návrate zo správ: ponuka hovoru */
.obj-navrat {
  position:relative; margin:0 0 16px; padding:16px 40px 16px 18px;
  border:2px solid var(--zavolat); border-radius:var(--radius);
  background:var(--surface);
}
.obj-navrat-text { margin:0 0 12px; }
.obj-navrat-btn { display:block; text-align:center; }
.obj-navrat-zavri {
  position:absolute; top:6px; right:6px; width:32px; height:32px;
  border:0; background:transparent; color:var(--muted);
  font-size:1.2rem; line-height:1; cursor:pointer; border-radius:8px;
}
.obj-navrat-zavri:hover { background:var(--tint); color:var(--ink); }

/* ================================================================== MAPA */
/* Zástupný blok má PRESNE tie rozmery, aké bude mať mapa. Bez toho by po
   kliknutí obsah pod mapou poskočil o niekoľko sto pixelov. */
.mapa { margin:18px 0; }
.mapa-zastup, .mapa-ram {
  display:block; width:100%; height:280px;
  border:1px solid var(--line); border-radius:var(--radius);
}
.mapa-zastup {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; color:var(--ink);
  /* Šrafovanie je ten istý vzor ako pri jedlách bez fotky — hovorí „tu bude
     obrázok", nie „tu je chyba". */
  background:repeating-linear-gradient(135deg,var(--tint),var(--tint) 14px,var(--pruh) 14px,var(--pruh) 28px);
  transition:border-color .12s ease;
}
.mapa-zastup:hover { border-color:var(--primar); }
.mapa-zastup-ikona { color:var(--akcent-text); }
.mapa-zastup-text { line-height:1.5; }
.mapa-zastup-cta { font-weight:600; color:var(--akcent-text); }
.mapa-ram { border:0; }
.mapa-pata { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.mapa-btn { align-self:flex-start; }
.mapa-poznamka { margin:0; font-size:.8125rem; color:var(--muted); }
@media (max-width:600px) {
  .mapa-zastup, .mapa-ram { height:220px; }
  .mapa-btn { align-self:stretch; text-align:center; }
}

/* ---------------------------------------------------------- QR kód objednávky */
/* Len na počítači — na mobile je tlačidlo „Poslať SMS" a QR by bol zmätok.
   Skrytie rieši JavaScript (blok sa vôbec nevytvorí), toto je len vzhľad. */
.obj-qr {
  margin:6px 0 0; padding:14px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--tint); text-align:center;
}
.obj-qr-vyzva { margin:0 0 10px; font-size:.9375rem; font-weight:600; }
/* Biely rám okolo kódu je súčasť tichej zóny — na tmavom pozadí by čítačka
   bez neho nenašla hranicu kódu. Plátno si biele pozadie kreslí samo, toto
   je len zaoblenie a tieň. */
.obj-qr canvas {
  display:block; margin:0 auto; max-width:100%; height:auto;
  border-radius:8px; box-shadow:var(--tien);
}
.obj-qr-pozn { margin:10px 0 0; font-size:.8125rem; color:var(--muted); }
.obj-qr-pozn.je-dlha {
  color:var(--ink); text-align:left;
  border-left:3px solid var(--vystraha); padding-left:10px;
}

/* ------------------------------------------------- logá rozvozových služieb */
/* ŽIADNE `border-radius` a žiadny filter: sú to cudzie ochranné známky a tvar
   ani farba sa im meniť nesmie. Wolt má zaoblenie priamo v súbore, Bolt Food
   ostrý štvorec — a tak to aj zostáva. */
.rozvoz-logo { display:block; flex:none; width:40px; height:40px; }
.hp-rozvoz-btn { padding-left:.7em; }
.pata-rozvoz { display:inline-flex; align-items:center; gap:8px; }
.pata-rozvoz img { display:block; flex:none; width:20px; height:20px; }