/* nasetipy — štýl. Svetlá aj tmavá téma cez premenné; nič sa nedefinuje dvakrát. */

:root {
  --pozadie: #fafbfb;      --panel: #ffffff;      --panel-2: #f0f4f3;
  --podklad-fotky: #ffffff;
  --text: #16181d;         --text-2: #5c6270;     --ciara: #e3e3e0;
  /* ⚠️ Tyrkysová je voľba z 2026-08-20: modrá je Heurekina, oranžová Pricemanie
     aj Najnakupu, červená Favi. Zelený porovnávač na Slovensku nemá nikto. */
  --znacka: #0f766e;       --znacka-text: #ffffff;
  /* ⚠️ „Lacné" je posunuté do TRÁVOVEJ zelenej (~140°), nie do tyrkysovej (~175°).
     Keby ostalo pri pôvodnej #127d4d, cena by splývala so značkou a prestala by
     fungovať ako signál — zelená má hovoriť „výhodné", nie „naše logo". */
  /* ⚠️ Hodnoty od Róberta 2026-08-23. `--drahe` je karmínová, nie tehlová:
     tehlová bola príliš blízko oranžovej, takže „drahé" a „pozor" splývali.
     `--zvyraz` je jantár, ktorý pôvodne mala len námornícka paleta. */
  --lacne: #15803d;        --drahe: #b9293f;      --zvyraz: #f59e0b;
  /* ⚠️ Jantár je krásny na PLOCHE (menovka, rám, prechod), ale ako TEXT má na
     bielej kontrast 2,07:1 — teda hlboko pod čitateľnosťou. Nie je to chyba
     voľby, jantár to má tak vždy. Preto má text vlastný, tmavší odtieň tej
     istej farby: 5,01:1.

     ⚠️ Nemeniť `--zvyraz` na tento tmavší — na menovke „TOP" by zošedivel
     a stratil by zmysel. Sú to dve použitia, nie dva názory. */
  --zvyraz-text: #a15c00;
  --tien: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.14);
  --r: 12px;  --r-s: 8px;
  --pismo: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
}
:root[data-tema="tmava"], :root:not([data-tema="svetla"]) {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svetla"]) {
    --pozadie: #0b1211;    --panel: #141b1a;      --panel-2: #1b2423;
    --podklad-fotky: #eceeee;
    --text: #e9eaee;       --text-2: #9aa1af;     --ciara: #2a2f38;
    --znacka: #2dd4bf;     --znacka-text: #06201d;
    --lacne: #4ade80;      --drahe: #ff7b8f;      --zvyraz: #ffc233;
    --zvyraz-text: #ffc233;   /* v tme je jantár čitateľný sám */
    --tien: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-tema="tmava"] {
  --pozadie: #0b1211;      --panel: #141b1a;      --panel-2: #1b2423;
  --podklad-fotky: #eceeee;
  --text: #e9eaee;         --text-2: #9aa1af;     --ciara: #2a2f38;
  --znacka: #2dd4bf;       --znacka-text: #06201d;
  /* ⚠️ V tme sa NEDÁVA tá istá karmínová — na tmavom pozadí je príliš
     tmavá a cena prestane byť čitateľná. Je to jej svetlejší odtieň,
     nie iná farba. */
  --lacne: #4ade80;        --drahe: #ff7b8f;      --zvyraz: #ffc233;
  --zvyraz-text: #ffc233;
  --tien: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--pozadie); color: var(--text);
  font: 16px/1.55 var(--pismo);
  font-synthesis-weight: none;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
/* ⚠️ Šírka je plynulá, nie pevná. Róbert nameral, že Heureka má pri QHD 1631 px —
   pevných 1180 (a ani 1400) by nás vedľa nej nechalo vyzerať stiesnene. `min()` drží
   na malých obrazovkách okraj a na veľkých pustí rozvrh von; strop 1600 je preto, aby
   sa mriežka na ultrawide nerozťahovala do nekonečna. */
.obal { width: min(100% - 2rem, 1600px); margin: 0 auto; padding: 0; }

/* ── hlavička ─────────────────────────────────────────────────────── */
.hlavicka {
  position: sticky; top: 0; z-index: 40; background: var(--panel);
  border-bottom: 1px solid var(--ciara);
}
.hlavicka-vnutro { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; }
/* ⚠️ Na mobile má vyhľadávanie VLASTNÝ RIADOK pod logom, nie miesto vtlačené
   medzi logo a ikonky. Pri 360 px zostávalo na pole asi 8 znakov a nedalo sa
   doň nič poriadne napísať. Tak to má aj Heureka
   (`screens/heureka-mobil-zoznam.jpg`): logo a ikonky hore, pole cez celú
   šírku pod nimi. */
@media (max-width: 700px) {
  .hlavicka-vnutro { flex-wrap: wrap; gap: .5rem .6rem; padding: .55rem 0; }
  .hlavicka-vnutro .logo { flex: 1 1 auto; }
  /* `order` posunie pole na druhý riadok bez toho, aby sa menilo HTML —
     poradie v kóde má zostať logické pre čítačku obrazovky. */
  .hlavicka-vnutro .hladanie { order: 9; flex: 1 0 100%; }
  .hlavicka-vnutro .hladanie input { padding: .55rem .7rem; }
}
/* ⚠️ Na počítači väčšie, na mobile nie. Róbert 2026-08-21 chcel 1.9rem — to je
   na širokej hlavičke správne, ale pri 360 px by značka vytlačila vyhľadávanie
   aj ikonky do druhého riadku. */
.logo { font-weight: 700; font-size: 1.9rem; letter-spacing: -.02em; white-space: nowrap; }
@media (max-width: 900px) { .logo { font-size: 1.25rem; } }
.logo span { color: var(--znacka); }
.hladanie { flex: 1; display: flex; min-width: 0; }
.hladanie input {
  flex: 1; min-width: 0; padding: .6rem .85rem; font: inherit;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--ciara); border-radius: var(--r-s) 0 0 var(--r-s);
}
.hladanie button {
  padding: .6rem 1rem; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--znacka); color: var(--znacka-text);
  border: 1px solid var(--znacka); border-radius: 0 var(--r-s) var(--r-s) 0;
}
.tema-prep {
  background: none; border: 1px solid var(--ciara); border-radius: var(--r-s);
  color: var(--text-2); cursor: pointer; padding: .45rem .6rem; line-height: 1;
}
.tema-prep:hover { color: var(--text); }

/* ── typografia sekcií ────────────────────────────────────────────── */
h1 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .4rem; }
h2 { font-size: 1.22rem; letter-spacing: -.01em; margin: 2.4rem 0 .2rem; }
.podnadpis { color: var(--text-2); margin: 0 0 1rem; font-size: .95rem; }
.sekcia-hlavicka { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

/* ── mriežka a karty ──────────────────────────────────────────────── */
.mriezka { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* ⚠️ Na mobile DVE karty v rade, nie jedna. Pri jednej karte na šírku sa
   z výpisu stane nekonečný stĺpec, v ktorom sa nedá porovnávať — a porovnávať
   je jediné, kvôli čomu sem človek prišiel. `minmax(230px…)` to pri 360 px
   obrazovke zlomilo na jednu. */
@media (max-width: 700px) {
  .mriezka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .karta { padding: .5rem; }
  .karta .nazov { font-size: .82rem; }
}
/* ⚠️ `hidden` musí zvíťaziť nad triedou, ktorá nastavuje `display`. `.karta` je
   `display:flex`, takže `<div class="karta" hidden>` zostal viditeľný ako
   prázdny rámček — presne to sa stalo na registrácii. Jedno pravidlo pre celú
   stránku je lepšie než výnimka pri každej triede, ktorá `display` nastaví. */
[hidden] { display: none !important; }

.karta {
  background: var(--panel); border: 1px solid var(--ciara); border-radius: var(--r);
  padding: .9rem; display: flex; flex-direction: column; gap: .5rem;
  transition: box-shadow .15s, transform .15s;
}
.karta:hover { box-shadow: var(--tien); transform: translateY(-1px); text-decoration: none; }
/* Obrázok produktu. `contain`, nie `cover` — fotky z e-shopov sú rôznych pomerov
   a orezaním by z topánky ostala podrážka. Plocha okolo je preto pozadie, nie obrázok. */
.karta-obr {
  position: relative; aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden;
  /* ⚠️ Podklad fotky je BIELY, nie farba panelu. Drvivá väčšina fotiek
     z e-shopov je vyfotená na bielom pozadí a uložená bez priehľadnosti —
     na sivom podklade preto vznikne viditeľný biely štvorec vnútri sivého
     rámčeka a vyzerá to ako chyba, nie ako fotka.
     V tmavej téme je to zámerne tiež svetlé, len o niečo tlmenejšie: biela
     plocha okolo tovaru je to, na čo je oko z e-shopov zvyknuté, a tmavý
     podklad by z bielych fotiek spravil svietiace obdĺžniky. */
  background: var(--podklad-fotky); display: grid; place-items: center;
}
.karta-obr img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
/* Prázdny stav nie je chyba — pri cudzích feedoch je fotka bežne inde alebo mŕtva.
   Preto tichá značka, nie rozbitá ikona prehliadača. */
.karta-obr.prazdna::after {
  content: ""; width: 34%; aspect-ratio: 1; border-radius: 6px;
  border: 2px solid var(--ciara);
  background: linear-gradient(135deg, transparent 46%, var(--ciara) 46% 54%, transparent 54%);
}
/* ⚠️ Keď fotka chýba, ukáže sa názov produktu. Prázdny rámček nepovie nič a pri
   desiatich vedľa seba vyzerá web pokazene. Značka `.prazdna` sa vtedy
   nepridáva, aby sa nekreslili obe veci naraz. */
.bez-foto {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; padding: .7rem; text-align: center;
  font-size: .82rem; line-height: 1.35; color: var(--text-2);
  hyphens: auto; overflow-wrap: anywhere;
}
.odznak-porovnat {
  position: absolute; left: .4rem; bottom: .4rem;
  background: color-mix(in srgb, var(--znacka) 92%, transparent); color: var(--znacka-text);
  font-size: .72rem; font-weight: 700; padding: .16rem .5rem; border-radius: 99px;
  letter-spacing: .01em;
}
.karta .nazov { font-weight: 600; font-size: .93rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.karta .meta { color: var(--text-2); font-size: .8rem; min-height: 1.15rem; }

/* ── cenové rozpätie: podpis celého webu ──────────────────────────── */
.rozpatie { display: flex; flex-direction: column; gap: .3rem; margin-top: auto; }
.rozpatie-ciara { position: relative; height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--lacne), var(--zvyraz) 55%, var(--drahe)); opacity: .85; }
.rozpatie-body { display: flex; justify-content: space-between; font-size: .82rem; }
.cena-od { color: var(--lacne); font-weight: 700; font-size: 1.02rem; }
.cena-do { color: var(--text-2); }
.usetris {
  display: inline-block; font-size: .76rem; font-weight: 700; padding: .12rem .45rem;
  border-radius: 99px; background: color-mix(in srgb, var(--lacne) 16%, transparent);
  color: var(--lacne);
}

/* ── hrdina ───────────────────────────────────────────────────────── */
/* ══ HRDINA ════════════════════════════════════════════════════════════════ */
.hrdina {
  /* ⚠️ Cez celú šírku okna, hoci sedí vnútri `.obal`. `margin-inline:
     calc(50% - 50vw)` je jediný spôsob, ktorý nepridá vodorovný posuvník —
     `width: 100vw` počíta aj šírku posuvníka a stránka by pretiekla. */
  margin-inline: calc(50% - 50vw);
  padding: 3rem 0;
  display: flex; align-items: center;
  /* ⚠️ Bez nahratého pozadia farebný prechod, nie prázdny pás. Hrdina bez
     obrázka musí vyzerať ako zámer, nie ako chýbajúci súbor. */
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--znacka) 14%, var(--pozadie)) 0%,
      var(--pozadie) 70%);
}
.hrdina-vnutro { width: min(100% - 2rem, 1600px); margin-inline: auto; }
.hrdina h1 { font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.1; margin: 0; }
.hrdina p { color: var(--text-2); max-width: 46rem; margin: .5rem 0 0;
  font-size: clamp(.95rem, 1.4vw, 1.08rem); }

/* S fotkou: prekrytie, aby text zostal čitateľný na akomkoľvek obrázku. */
.hrdina-foto {
  background-size: cover; background-position: center; position: relative;
  color: #fff;
}
.hrdina-foto::before {
  content: ""; position: absolute; inset: 0;
  /* ⚠️ Prechod, nie plošné stmavenie. Text sedí vľavo dole, takže tam treba
     najviac krytia; horný okraj môže zostať svetlý a fotka je vidieť. */
  background: linear-gradient(100deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 45%,
                              rgba(0,0,0,.15) 100%);
}
.hrdina-foto .hrdina-vnutro { position: relative; z-index: 1; }
.hrdina-foto p, .hrdina-foto .cislo span { color: rgba(255,255,255,.86); }
.hrdina-foto .stitok { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3);
  color: #fff; backdrop-filter: blur(2px); }
.hrdina-foto .stitok:hover { background: rgba(255,255,255,.26); color: #fff; }

/* Veľké vyhľadávanie — hlavná akcia úvodky. */
/* ⚠️ `position: relative` — zoznam napovedí je `position: absolute` a bez toho
   by sa polohoval voči stránke, teda by vyskočil úplne inam než pod pole. */
/* ⚠️ Sľub pod číslami, drobným písmom. Je to záväzok, nie reklamný nadpis —
   a keby kričal, znel by ako reklamný nadpis. */
.hrdina-slub { margin: .9rem 0 0; font-size: .88rem; opacity: .85; }

.hrdina-hladanie { display: flex; gap: .5rem; margin: 1.4rem 0 0;
  max-width: 40rem; position: relative; }
/* ⚠️ Napovede v hrdinovi sú NAD textom hrdinu aj nad reklamou pod ním. */
.hrdina-hladanie .napovede { text-align: left; z-index: 70; }
.hrdina-hladanie input {
  flex: 1; min-width: 0; padding: .85rem 1.1rem; font: inherit; font-size: 1.05rem;
  border: 1px solid var(--ciara); border-radius: 99px;
  background: var(--panel); color: var(--text);
}
.hrdina-hladanie .tlacidlo { border-radius: 99px; padding: .85rem 1.5rem; flex: none; }
.hrdina-kategorie { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
@media (max-width: 700px) {
  .hrdina { padding: 2rem 0; min-height: 0 !important; }
  .hrdina-hladanie { flex-direction: column; }
  .hrdina-hladanie .tlacidlo { width: 100%; }
  /* ⚠️ Na mobile sa kategórie v hrdinovi posúvajú, nezalamujú. Osem štítkov
     v troch riadkoch odtlačí všetko ostatné pod okraj obrazovky. */
  .hrdina-kategorie { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hrdina-kategorie::-webkit-scrollbar { display: none; }
  .hrdina-kategorie .stitok { flex: 0 0 auto; }
}
.cisla { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.1rem 0 .3rem; }
/* ⚠️ Na počítači väčšie (Róbert 2026-08-23). Čísla v hrdinovi sú jediné miesto,
   kde web hovorí o svojej veľkosti — pri 1,35 rem splývali s popiskom pod nimi
   a pôsobili ako drobný text, nie ako údaj. Na telefóne zostávajú malé, tam ide
   o to, aby sa hrdina zmestil na obrazovku (viď breakpoint 620 px). */
.cislo b { display: block; font-size: 1.85rem; letter-spacing: -.02em; }
.cislo span { color: var(--text-2); font-size: .82rem; }

/* ── kategórie a filtre ───────────────────────────────────────────── */
.stitky { display: flex; flex-wrap: wrap; gap: .45rem; }
.stitok {
  border: 1px solid var(--ciara); background: var(--panel); border-radius: 99px;
  padding: .35rem .75rem; font-size: .87rem; color: var(--text-2);
}
.stitok:hover { border-color: var(--znacka); color: var(--znacka); text-decoration: none; }
.stitok.zapnuty { background: var(--znacka); border-color: var(--znacka); color: var(--znacka-text); }

/* ⚠️ 320 px, nie 260: bočný pruh musí uniesť baner 300×600 aj s odsadením.
   Pri 260 by baner buď pretekal, alebo by sa musel zmenšovať a stratil by rozmer. */
.rozvrh { display: grid; grid-template-columns: 320px 1fr; gap: 1.6rem; align-items: start; }
@media (max-width: 860px) { .rozvrh { grid-template-columns: 1fr; } }
.bocnik { position: sticky; top: 4.6rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
.filter { border-bottom: 1px solid var(--ciara); padding: .55rem 0; }
.filter > summary { cursor: pointer; font-weight: 600; font-size: .9rem; list-style: none; padding: .2rem 0; }
.filter > summary::-webkit-details-marker { display: none; }
.filter > summary::after { content: "＋"; float: right; color: var(--text-2); }
.filter[open] > summary::after { content: "－"; }
.filter ul { list-style: none; margin: .35rem 0 .2rem; padding: 0; max-height: 15rem; overflow-y: auto; }
.filter li a { display: flex; justify-content: space-between; gap: .5rem; padding: .18rem 0;
  font-size: .87rem; color: var(--text-2); }
.filter li a:hover { color: var(--znacka); text-decoration: none; }
.filter li a b { color: var(--text); font-weight: 600; }
.filter li .pocet { font-variant-numeric: tabular-nums; opacity: .7; }

/* ══ DETAIL PRODUKTU ════════════════════════════════════════════════════════
   Hore je hlava: veľká fotka a vedľa nej názov, cena a varianty.
   ⚠️ Ponuky hore VEDĽA fotky nie sú — pri dvadsiatich obchodoch by to bol
   nekonečný stĺpec vedľa obrázka. Idú do prvej záložky pod hlavou.
   ═════════════════════════════════════════════════════════════════════════ */
.produkt-vrch { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 2rem; align-items: start; margin-top: .5rem; }
@media (max-width: 860px) { .produkt-vrch { grid-template-columns: 1fr; } }

.foto-hlavna {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--ciara); overflow: hidden;
  display: grid; place-items: center; cursor: zoom-in;
}
.foto-hlavna img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.foto-lupa {
  position: absolute; right: .6rem; bottom: .6rem; background: var(--panel);
  border: 1px solid var(--ciara); border-radius: 99px; padding: .3rem .7rem;
  font-size: .8rem; color: var(--text-2);
}

/* Zväčšenie fotky. ⚠️ `dialog` a nie vlastný div: prehliadač sám rieši Esc,
   ohnisko klávesnice aj to, že zvyšok stránky prestane byť dostupný. */
dialog.galeria { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
dialog.galeria::backdrop { background: rgba(0,0,0,.82); }
dialog.galeria img { max-width: 96vw; max-height: 88vh; object-fit: contain; border-radius: var(--r); background: #fff; }
dialog.galeria .zavri {
  position: absolute; top: .5rem; right: .5rem; background: var(--panel); color: var(--text);
  border: 1px solid var(--ciara); border-radius: 99px; width: 2.2rem; height: 2.2rem; cursor: pointer;
}

/* ── záložky ──────────────────────────────────────────────────────────────
   ⚠️ Bez JS ostanú viditeľné VŠETKY panely — obsah sa nikdy nestratí ani
   návštevníkovi, ani vyhľadávaču. JS len skryje neaktívne. */
.zalozky { display: flex; gap: .2rem; border-bottom: 1px solid var(--ciara);
  margin: 2rem 0 0; overflow-x: auto;
  /* ⚠️ Posuvník preč aj tu — pri záložkách vyzerá ako chyba. Že sa dá
     posunúť, povie orezaná záložka na okraji, rovnako ako v Heureke. */
  scrollbar-width: none; }
.zalozky::-webkit-scrollbar { display: none; }
.zalozky button {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: .7rem 1rem; font: inherit; font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.zalozky button[aria-selected="true"] { color: var(--znacka); border-bottom-color: var(--znacka); }
.zalozky button:hover { color: var(--text); }

/* ⚠️ Od záložiek nadol je obsah UŽŠÍ než zvyšok stránky. Rozvrh má 1600 px kvôli
   mriežkam produktov, ale riadok textu ani zoznam obchodov sa cez celú šírku
   nečíta — oko stráca začiatok ďalšieho riadku. */
/* ⚠️ Vzduch aj ZDOLA. Posledná záložka končila tesne nad pätkou a obsah
   pôsobil odseknuto — na mobile to navyše splývalo s odkazmi v pätke. */
.zalozka { max-width: 64rem; padding: 1.2rem 0 2.5rem; }
/* ⚠️ Záložka s ponukami je ŠIRŠIA než ostatné. Text sa cez celú šírku nečíta,
   preto má `.zalozka` 64 rem — ale zoznam ponúk nie je text a vedľa neho stojí
   banner 300×600. Bez tohto by sa zmestil len tak, že by sa zoznam stlačil. */
#z-ponuky { max-width: 84rem; }
/* ⚠️ Bočný pruh dostane presne 300 px, nie zlomok. Banner má pevnú šírku a pri
   `1fr` by mu okolo nej zostalo prázdne miesto, ktoré chýba ponukám. */
.ponuky-rozvrh { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem;
  align-items: start; }
/* ⚠️ Lepivý, lebo zoznam ponúk býva dlhší než banner. Bez toho zostane banner
   hore a človek pri piatej ponuke pozerá na prázdny stĺpec. */
.ponuky-bok { position: sticky; top: 1rem; }
/* ⚠️ Pod 1100 px sa bočník ruší, nie zužuje. 300 px je pevná šírka banneru;
   keby sa mriežka držala, ponuky by sa stláčali, až kým sa do nich nezmestí
   cena. Na mobile sa `produkt-bok` aj tak nezobrazuje (300×600 by zabral celú
   obrazovku), takže tam ostane len zoznam. */
@media (max-width: 1100px) {
  .ponuky-rozvrh { grid-template-columns: minmax(0, 1fr); }
  .ponuky-bok { position: static; }
}
.zalozka[hidden] { display: none; }
/* ⚠️ PEVNÉ šírky pre cenu a tlačidlo, nie `auto`. Róbert 2026-08-22: *„kde kúpiť
   stĺpce zarovnať, rôzne šírky, doprava a cena sa posúvajú, ako sa im
   zachce."* Mal pravdu a príčina bola `1fr auto auto`: `auto` sa meria
   OBSAHOM KAŽDÉHO RIADKU zvlášť — riadky sú samostatné mriežky, takže
   „9,90 €" a „1 249,00 €" vyrobia dva rôzne stĺpce a ceny sa rozídu. Doprava
   pod cenou to ešte zväčší.

   ⚠️ Ceny sú preto zarovnané VPRAVO a s `tabular-nums`: v stĺpci čísel sa
   porovnávajú desiatky a stovky, nie začiatky slov. */
.obchod {
  display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem 9.5rem;
  gap: .8rem; align-items: center;
  padding: .8rem; border: 1px solid var(--ciara); border-radius: var(--r);
  background: var(--panel); margin-bottom: .5rem;
}
.obchod .cena { text-align: right; }
.obchod > .tlacidlo { width: 100%; text-align: center; }
.obchod .cena { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums;
  grid-column: 2; }
.obchod.najlacnejsi { border-color: var(--lacne); }
/* ⚠️ Na mobile sa riadok ponuky rozpadne na kartu: obchod hore, cena vpravo,
   tlačidlo cez celú šírku. Tri stĺpce vedľa seba tam nechajú na tlačidlo
   „Do obchodu" dva centimetre — a to je jediné tlačidlo, kvôli ktorému celá
   stránka existuje. Prevzaté z `screens/heureka-mobil-detail.jpg`. */
@media (max-width: 700px) {
  .obchod {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "kto cena" "tlacidlo tlacidlo";
    gap: .6rem .8rem; align-items: start;
  }
  .obchod > div:first-child { grid-area: kto; }
  .obchod .cena { grid-area: cena; text-align: right; font-size: 1.25rem; }
  .obchod > .tlacidlo { grid-area: tlacidlo; width: 100%; text-align: center; }
  .obchod-kto { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .ponuka-logo { width: 110px; height: 34px; }
}
.tlacidlo {
  background: var(--znacka); color: var(--znacka-text); border: 0; border-radius: var(--r-s);
  padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tlacidlo:hover { text-decoration: none; filter: brightness(1.08); }
.parametre { width: 100%; border-collapse: collapse; font-size: .9rem; }
.parametre td { padding: .4rem .5rem; border-bottom: 1px solid var(--ciara); }
.parametre td:first-child { color: var(--text-2); width: 45%; }

/* ── graf ceny ────────────────────────────────────────────────────── */
.graf { width: 100%; height: 150px; display: block; }
.graf-info { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .85rem; color: var(--text-2); }

/* ── články ───────────────────────────────────────────────────────── */
.clanok { display: flex; flex-direction: column; gap: .4rem; }
.clanok .zdroj { font-size: .75rem; color: var(--znacka); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; }
.clanok img { border-radius: var(--r-s); aspect-ratio: 16/9; object-fit: cover; width: 100%; }

/* ── reklamné pozície ─────────────────────────────────────────────── */
.reklama { margin: 1.4rem 0; min-height: 90px; display: flex; align-items: center;
  justify-content: center; border: 1px dashed var(--ciara); border-radius: var(--r);
  color: var(--text-2); font-size: .8rem; background: var(--panel-2); }
.reklama[data-nacitane] { border: 0; background: none; min-height: 0; }

/* ── video bez cookies ────────────────────────────────────────────── */
.video-fasada { position: relative; aspect-ratio: 16/9; border-radius: var(--r); overflow: hidden;
  cursor: pointer; background: var(--panel-2); display: grid; place-items: center; }
.video-fasada img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.video-fasada .prehrat { position: relative; z-index: 1; background: rgba(0,0,0,.72); color: #fff;
  border-radius: 99px; padding: .7rem 1.2rem; font-weight: 600; }
.video-fasada small { position: absolute; bottom: .5rem; left: .6rem; z-index: 1; color: #fff;
  background: rgba(0,0,0,.6); padding: .15rem .5rem; border-radius: 99px; font-size: .72rem; }

/* ── súhlas s cookies ─────────────────────────────────────────────── */
.suhlas {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 90; max-width: 40rem; margin: 0 auto;
  background: var(--panel); border: 1px solid var(--ciara); border-radius: var(--r);
  box-shadow: var(--tien); padding: 1.1rem 1.2rem;
}
.suhlas h3 { margin: 0 0 .4rem; font-size: 1rem; }
.suhlas p { margin: 0 0 .8rem; font-size: .88rem; color: var(--text-2); }
.suhlas-tlacidla { display: flex; gap: .5rem; flex-wrap: wrap; }
.suhlas .druhotne { background: var(--panel-2); color: var(--text); border: 1px solid var(--ciara); }
.suhlas label { display: flex; gap: .5rem; align-items: flex-start; font-size: .87rem; margin: .4rem 0; }
.peciatka { font-size: .76rem; color: var(--text-2); margin-top: .6rem; }

/* ── pätička ──────────────────────────────────────────────────────── */
.pata { margin-top: 3rem; border-top: 1px solid var(--ciara); background: var(--panel);
  padding: 1.6rem 0; color: var(--text-2); font-size: .88rem; }
/* ⚠️ Drobným, ale čitateľne. Je to povinný údaj, nie poznámka pod čiarou —
   a e-shop si ho pred podpisom naozaj číta. */
.pata-firma { display: block; margin-top: .8rem; font-size: .78rem;
  line-height: 1.6; opacity: .8; }

.pata-mriezka { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* ⚠️ Vzduch pod pätkou. Bez neho je posledný riadok odkazov nalepený na spodok
   okna — na mobile navyše pod gestovou lištou telefónu, takže sa naň nedá ani
   poriadne trafiť prstom. `safe-area-inset` rieši práve tú lištu. */
.pata { padding-bottom: calc(2.2rem + env(safe-area-inset-bottom)); }
.pata b { color: var(--text); display: block; margin-bottom: .4rem; font-size: .9rem; }
.pata a { display: block; padding: .12rem 0; }

/* ⚠️ Vzduch pod drobčekmi, nie nad. Róbert 2026-08-21: *„na detaile je to
   nalepené."* Nasledujúci prvok (na detaile fotka s plávajúcimi krúžkami, ktoré
   trčia von z jej rámu) začínal hneď pod cestou a čítalo sa to ako jeden blok. */
.drobky { font-size: .82rem; color: var(--text-2); padding: .9rem 0 .7rem; }
.drobky a:hover { color: var(--znacka); }
.drobek + .drobek::before { content: " › "; color: var(--ciara); }
/* ⚠️ Na mobile sa drobčeky NEZALAMUJÚ ani neskrývajú — posúvajú sa prstom
   v jednom riadku. Prevzaté z Róbertovej joomlovskej šablóny `tpl_magazin`
   (`.wp-breadcrumb`), kde to má odskúšané.
   Prvá verzia skrývala všetko okrem rodiča; lenže vtedy človek stratí prehľad,
   kde v strome je, a pri hlbokom strome je to práve to, čo potrebuje vedieť.
   Takto je celá cesta dostupná a nezaberie viac než riadok.
   Na pravom kraji jemné zosvetlenie so šípkou, keď je čo posúvať. */
@media (max-width: 700px) {
  .drobky {
    padding: .6rem 0 .5rem;
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
    position: relative;
  }
  .drobky::-webkit-scrollbar { display: none; }
  /* ⚠️ `flex: 0 0 auto` — bez toho by sa položky zmenšili, aby sa zmestili,
     a k reálnemu posúvaniu by nikdy nedošlo. */
  .drobek { flex: 0 0 auto; max-width: none; white-space: nowrap; }
  /* ⚠️ Zosvetlenie je na OBALE, nie na posúvanej lište — inak by odchádzalo
     spolu s obsahom a náznak by zmizol práve vtedy, keď je najviac potrebný. */
  .drobky-obal { position: relative; }
  .drobky-obal::after {
    content: "›"; position: absolute; top: 0; right: 0; bottom: 0; width: 36px;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: .4rem; color: var(--text-2); font-size: 1.1rem;
    font-weight: 700; line-height: 1; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--pozadie) 55%);
  }
}
/* ── CENNÍK ─────────────────────────────────────────────────────────────────
   ⚠️ `auto-fit`, nie pevný počet stĺpcov. Pásiem je sedem a pribúdajú/ubúdajú
   v `baliky.VELKOSTI`; mriežka na pevný počet by sa pri zmene cenníka rozpadla
   a nikto by si to nevšimol, kým to neuvidí zákazník. */
.cennik-mriezka { display: grid; gap: .8rem; margin: 1.2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cennik-karta { text-align: center; gap: .3rem; }
.cennik-meno { color: var(--text-2); font-size: .85rem; min-height: 2.4rem;
  display: flex; align-items: center; justify-content: center; }
.cennik-cena { font-variant-numeric: tabular-nums; line-height: 1.1; }
.cennik-cena b { font-size: 2rem; font-weight: 700; }
.cennik-cena span { color: var(--text-2); font-size: .85rem; }
/* ⚠️ Odporúčané pásmo je zvýraznené rámom, nie väčšou kartou. Vyššia karta
   rozhádže mriežku na každej šírke okna a na mobile z nej spraví schod. */
.cennik-vybrana { border-color: var(--znacka); }
.cennik-siroka { grid-column: 1 / -1; }
.cennik-siroka .cennik-cena b { font-size: 1.5rem; }
.cennik-body { display: grid; gap: 1rem; margin-top: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cennik-body p { margin: .2rem 0 0; }
/* ⚠️ Zoznam záväzkov bez odrážok a s väčším riadkovaním — číta sa ako vety,
   nie ako výpočet vlastností. */
/* Tie isté odrážky ako pri „Čo nerobíme“, len s opačnou značkou: sú to
   dve strany jedného tvrdenia a majú tak aj vyzerať. */
.da-sa { list-style: none; padding: 0; max-width: 46rem; }
.da-sa li { padding: .5rem 0 .5rem 1.6rem; position: relative; line-height: 1.5;
  border-bottom: 1px solid var(--ciara); }
.da-sa li::before { content: "✓"; position: absolute; left: 0; top: .55rem;
  color: var(--lacne); font-weight: 700; }

.nerobime { list-style: none; padding: 0; max-width: 46rem; }
.nerobime li { padding: .5rem 0 .5rem 1.6rem; position: relative; line-height: 1.5;
  border-bottom: 1px solid var(--ciara); }
.nerobime li::before { content: "✕"; position: absolute; left: 0; top: .55rem;
  color: var(--drahe); font-weight: 700; }
.cennik-vyzva { margin-top: 2rem; }

/* ── INFORMAČNÉ STRÁNKY ─────────────────────────────────────────────────────
   ⚠️ Odstup od hlavičky patrí SEM, nie na `main`. Na úvodke by `main` s odstupom
   odtlačil hrdinu od menu a vznikol by pruh pozadia, ktorý tam nemá čo robiť.
   Drobčeky, ktoré ten odstup robia inde, tieto stránky nemajú a mať nebudú —
   sú jednoúrovňové a „Domov › Cenník" nie je navigácia, je to ozdoba. */
.stranka-hlavicka { padding: 1.8rem 0 .2rem; }
.stranka-hlavicka h1 { margin: 0 0 .3rem; }
.stranka-hlavicka .podnadpis { margin: 0; max-width: 44rem; }
/* ⚠️ Riadok textu má hranicu čitateľnosti; kontajner nie. Text je preto úzky,
   ale stránka zostáva široká — inak vyzerá ako dokument stratený v okne. */
.stranka { padding-bottom: 3rem; }
.stranka-telo { max-width: 44rem; }
.stranka-telo h2 { margin: 2rem 0 .5rem; }
.stranka-telo h3 { margin: 1.4rem 0 .3rem; font-size: 1.02rem; }
.stranka-telo p { line-height: 1.65; }
.stranka-telo ul { line-height: 1.65; }

/* ── REGISTRÁCIA ────────────────────────────────────────────────────────────
   ⚠️ `auto-fit`, nie `1fr 1fr`. Predtým tu boli natvrdo dva stĺpce a na telefóne
   z toho vznikli dve políčka po 160 px — do jedného sa nezmestí ani adresa
   e-shopu. Toto je celá príčina toho, že formulár nebol použiteľný na mobile. */
.reg-rozvrh { display: grid; gap: 1.2rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.reg-skusobna { gap: .6rem; }
.reg-skusobna input {
  padding: .7rem .75rem; font: inherit; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--ciara);
  border-radius: var(--r-s); width: 100%;
}
.reg-vyhody h2 { margin-top: 0; }
.reg-vyhody ul { color: var(--text-2); line-height: 1.7; padding-left: 1.1rem; }
.reg-nadpis-formulara { margin-top: 2.4rem; }
.reg-formular { max-width: 44rem; }
.reg-chyba { color: var(--drahe); }
.reg-viac { margin: .4rem 0 1rem; border: 1px solid var(--ciara);
  border-radius: var(--r); background: var(--panel); }
.reg-viac summary { cursor: pointer; padding: .8rem 1rem; font-weight: 600; }
.reg-viac > .formular { padding: 0 1rem 1rem; margin: 0; }
/* ⚠️ Pasca sa neskrýva cez `display:none` — časť robotov taký prvok preskočí.
   Odsunie sa mimo obrazovky a odoberie sa z poradia klávesnice. */
/* ⚠️ Zaškrtávacie políčko a text vedľa seba, text sa zalamuje pod seba —
   nie pod políčko. Súhlas na dva riadky s druhým riadkom pod štvorčekom vyzerá
   ako chyba a ľudia ho preskočia. */
.reg-suhlas { display: flex; gap: .6rem; align-items: flex-start;
  margin: .8rem 0; line-height: 1.5; }
.reg-suhlas input { margin-top: .25rem; flex: none; }
altcha-widget { display: block; margin: .8rem 0 1rem; max-width: 22rem; }

.pasca { position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; }

/* ── AKORDEÓN OTÁZOK ────────────────────────────────────────────────────────
   ⚠️ Celá hlavička je klikateľná, nie len šípka. Pri otázke dlhej na dva riadky
   je terč veľký ako riadok textu a na dotyku sa do malej šípky netrafí nikto. */
.otazky { max-width: 46rem; }
.otazky h2 { margin: 2rem 0 .6rem; font-size: 1.15rem; color: var(--text-2); }
.otazka { border: 1px solid var(--ciara); border-radius: var(--r);
  background: var(--panel); margin-bottom: .5rem; overflow: hidden; }
.otazka summary {
  cursor: pointer; padding: .85rem 2.6rem .85rem 1rem; font-weight: 600;
  position: relative; list-style: none;
}
/* Vlastná šípka namiesto trojuholníka prehliadača — ten vyzerá v každom inak. */
.otazka summary::-webkit-details-marker { display: none; }
.otazka summary::after {
  content: "+"; position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%); font-size: 1.3rem; font-weight: 400;
  color: var(--znacka); line-height: 1;
}
.otazka[open] summary::after { content: "−"; }
.otazka[open] summary { border-bottom: 1px solid var(--ciara); }
.otazka summary:hover { color: var(--znacka); }
.otazka summary:focus-visible { outline: 2px solid var(--znacka); outline-offset: -2px; }
.odpoved { padding: .85rem 1rem; color: var(--text-2); line-height: 1.6; }
.odpoved b { color: var(--text); }

.strankovanie { display: flex; gap: .4rem; justify-content: center; margin: 1.6rem 0; }
.prazdne { text-align: center; padding: 3rem 1rem; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── ohnisko klávesnice ───────────────────────────────────────────── */
:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--znacka); outline-offset: 2px; border-radius: var(--r-s);
}

/* ══ FAREBNÉ VARIANTY — trvalá voľba návštevníka ════════════════════════════
   ⚠️ Vzniklo to ako skúška „ktorá farba vyhrá", ale skončilo inak: Róbert
   2026-08-23 nechal VŠETKY ŠTYRI. Štyri palety krát svetlá a tmavá je osem
   podôb a je to vec, ktorú konkurencia neponúka vôbec.

   ⚠️ Takže sa to neupratuje na jednu. Kto sem príde s tým, že „je to len na
   skúšku", nech si prečíta tento odsek.

   Prepínajú sa cez `data-farba` na <html>. Zámerne sa NEMENIA `--lacne`,
   `--drahe` a `--zvyraz`: tie nie sú značka, ale význam (lacné / drahé / pozor).
   Keby sa hýbali s odtieňom značky, cenové rozpätie by prestalo byť čitateľné.

   Terén 2026-08-20: Heureka #0084e0 modrá, Pricemania #f18800 a Najnakup #ff6b03
   oranžové, Favi #a61932 červená. Modrá aj oranžová sú teda obsadené.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── na porovnanie: fialová ─────────────────────────────────────────────── */
:root[data-farba="fialova"] {
  --znacka: #6d28d9;  --znacka-text: #ffffff;
  --pozadie: #fbfafd; --panel-2: #f3f1f7; --ciara: #e5e1ec;
}
@media (prefers-color-scheme: dark) {
  :root[data-farba="fialova"]:not([data-tema="svetla"]) {
    --znacka: #a78bfa;  --znacka-text: #17102a;
    --pozadie: #0e0b14; --panel: #171326; --panel-2: #1f1a33; --ciara: #2e2745;
  }
}
:root[data-farba="fialova"][data-tema="tmava"] {
  --znacka: #a78bfa;  --znacka-text: #17102a;
  --pozadie: #0e0b14; --panel: #171326; --panel-2: #1f1a33; --ciara: #2e2745;
}

/* ── 3. námornícka + jantár — farby dnešného nasetipy.sk ──────────────────
   ⚠️ ZLATÁ ZNAČKA LEN V TMAVEJ TÉME. Róbert 2026-08-23: *„aspoň na tmavej."*
   Na tmavomodrom pozadí má zlatá 7,37:1 a tmavý nápis na nej 7,52:1 — svieti
   a je čitateľná. Na svetlom pozadí by tá istá zlatá mala 2,32:1, takže svetlá
   téma zostáva modrá; modrá tam funguje a nie je dôvod ju kaziť.

   ⚠️ Vedľajší účinok, ktorý stojí za vedomie: v tmavej sú teraz značka
   (`#dc9a00`) a akcent (`#fbbf24`) takmer tá istá žltá — pomer 1,45:1. Nevadí
   to, lebo sa stretávajú zriedka a menovka „TOP" je plocha s tmavým nápisom,
   nie farebný text. Keby raz stáli vedľa seba, treba rozlíšiť akcent, NIE
   značku — akcent je zároveň stredom cenového prechodu (lacné → pozor →
   drahé) a modrá by z tej škály spravila nezmysel. */
:root[data-farba="namornicka"] {
  --znacka: #1e3a8a;  --znacka-text: #ffffff;
  --zvyraz: #f59e0b;
  --pozadie: #f8fafc; --panel-2: #eef2f7; --ciara: #dde3ea;
}
@media (prefers-color-scheme: dark) {
  :root[data-farba="namornicka"]:not([data-tema="svetla"]) {
    --znacka: #dc9a00;  --znacka-text: #08152b;  --zvyraz: #fbbf24;
    --pozadie: #0f172a; --panel: #16213a; --panel-2: #1e293b; --ciara: #2b3a55;
  }
}
:root[data-farba="namornicka"][data-tema="tmava"] {
  --znacka: #dc9a00;  --znacka-text: #08152b;  --zvyraz: #fbbf24;
  --pozadie: #0f172a; --panel: #16213a; --panel-2: #1e293b; --ciara: #2b3a55;
}

/* ── 4. grafitová — tichá značka, hlas majú ceny ─────────────────────────
   Róbert 2026-08-23. Myšlienka: modrá je Heurekina, oranžová Pricemanie
   aj Najnakupu, červená Favi — všetci kričia farbou. Porovnávač, ktorý vyzerá
   vecne, môže pôsobiť dôveryhodnejšie.

   🔴 A `--lacne`, `--drahe`, `--zvyraz` tu ZOSTÁVAJÚ FAREBNÉ — to je celá
   pointa, nie opomenutie. Keď je značka sivá, sú ceny JEDINÁ farba na stránke
   a oko ide rovno na ne. Pri tyrkysovej či fialovej s nimi súťaží aj tlačidlo,
   logo a odkazy.

   ⚠️ Preto sa grafitová nesmie „doladiť" tým, že sa zošedí aj cena. Tým by
   stratila jediný dôvod, prečo existuje. */
/* ⚠️ ZLATO MÁ V KAŽDEJ TÉME INÝ ODTIEŇ, a nie je to nedôslednosť.
   Róbert 2026-08-23 navrhol `#dc9a00`. V tme je presne ňou (7,91:1 ako text,
   7,62:1 pre tmavý text na nej — obe s rezervou). Na svetlom pozadí má ale
   2,32:1, teda hlboko pod AA, a `--znacka` sa v tomto štýle používa
   dvadsaťdvakrát ako TEXT, RÁM a OHNISKO klávesnice, nielen ako plocha
   tlačidla. Svetlá téma preto dostáva tmavší odtieň tej istej zlatej: 5,19:1
   ako text a 5,42:1 pre biely text na nej.

   ⚠️ Nemeniť svetlú na `#dc9a00` „aby to bolo rovnaké". Rovnaké by bolo len
   číslo v súbore; na obrazovke by to znamenalo nečitateľné odkazy a neviditeľné
   ohnisko pri ovládaní klávesnicou. */
:root[data-farba="grafitova"] {
  --znacka: #8f6100;  --znacka-text: #ffffff;
  --pozadie: #fafafa; --panel: #ffffff; --panel-2: #f2f3f5; --ciara: #e2e4e8;
}
@media (prefers-color-scheme: dark) {
  :root[data-farba="grafitova"]:not([data-tema="svetla"]) {
    /* ⚠️ V tme musí byť značka SVETLÁ, inak tlačidlo splynie s pozadím.
       Grafitová sa teda v tme obracia — sivá zostáva, len z druhej strany. */
    --znacka: #dc9a00;  --znacka-text: #111418;
    --pozadie: #0e0f12; --panel: #17191d; --panel-2: #1f2227; --ciara: #2d3138;
  }
}
:root[data-farba="grafitova"][data-tema="tmava"] {
  --znacka: #dc9a00;  --znacka-text: #111418;
  --pozadie: #0e0f12; --panel: #17191d; --panel-2: #1f2227; --ciara: #2d3138;
}

/* ── 5. kávová — paleta kávapremna.sk ────────────────────────────────────
   Róbert 2026-08-25: *„na káva budú iné farby a texty, a menej farieb, niečo
   kávové."*

   „Menej farieb" tu znamená JEDNU TEPLÚ RODINU pre všetko značkové: hnedá,
   krémové pozadie, papierové panely. Neznamená to menej farby na cenách.

   🔴 `--lacne`, `--drahe` a `--zvyraz` ZOSTÁVAJÚ FAREBNÉ — rovnaký dôvod ako
   pri grafitovej. Keď je značka tichá, sú ceny jediná farba na stránke a oko
   ide rovno na ne. Kto to raz bude „dolaďovať" do hneda, vezme palete jediný
   dôvod, prečo je takto stavaná.

   ⚠️ Odtiene sú posunuté do tepla, nie prevzaté zo základnej palety: olivová
   namiesto sviežej zelenej, tmavá ružová namiesto červenej. Vedľa hnedej
   pôsobia ako súčasť tej istej scény, a pomery zostávajú nad AA.

   Namerané (WCAG, na vlastnom pozadí palety):
     svetlá  značka ako text 6,98:1 · biely nápis na značke 7,44:1
             lacné 6,63:1 · drahé 7,51:1 · zvýraz-text 5,55:1
     tmavá   značka ako text 8,37:1 · tmavý nápis na značke 7,83:1
             lacné 10,03:1 · drahé 9,41:1 · zvýraz 8,67:1 */
:root[data-farba="kavova"] {
  --znacka: #6f4e37;  --znacka-text: #ffffff;
  --pozadie: #faf7f4; --panel: #ffffff; --panel-2: #f3ece6; --ciara: #e7ddd3;
  --lacne: #3f6212;   --drahe: #9f1239;
  --zvyraz: #c2830c;  --zvyraz-text: #8a5a00;
}
@media (prefers-color-scheme: dark) {
  :root[data-farba="kavova"]:not([data-tema="svetla"]) {
    /* ⚠️ V tme sa hnedá obracia na svetlú karamelovú — tmavá hnedá by na
       tmavom pozadí splynula rovnako, ako splýva grafitová. */
    --znacka: #d4a373;  --znacka-text: #21160e;
    --pozadie: #14100d; --panel: #1e1813; --panel-2: #271f19; --ciara: #3a2f26;
    --lacne: #a7c957;   --drahe: #ff9aa8;
    --zvyraz: #e0a458;  --zvyraz-text: #e0a458;
  }
}
:root[data-farba="kavova"][data-tema="tmava"] {
  --znacka: #d4a373;  --znacka-text: #21160e;
  --pozadie: #14100d; --panel: #1e1813; --panel-2: #271f19; --ciara: #3a2f26;
  --lacne: #a7c957;   --drahe: #ff9aa8;
  --zvyraz: #e0a458;  --zvyraz-text: #e0a458;
}

/* ══ VÝPIS: zoznam alebo mriežka ════════════════════════════════════════════
   ⚠️ Predvolený je ZOZNAM a je to zámer — v zozname sa dá cena čítať pod sebou
   v jednom stĺpci, čo je pri porovnávaní podstatné. Mriežka je pekná, ale ceny
   v nej skáču a oko ich musí hľadať. Návštevník si to vie prepnúť a voľba mu
   zostane; `data-vypis` sa nastavuje ešte v <head>, aby stránka nepreblikla.
   ═════════════════════════════════════════════════════════════════════════ */
/* ⚠️ Tieto pravidlá platia LEN pre `.vypis`, teda pre výpis v kategórii.
   Prepínač Zoznam/Mriežka je len tam. Keď som ich raz napísal na `.mriezka`,
   sadli na úvodku a na „podobné produkty" — teda presne tam, kde žiadny
   prepínač nie je — a karty sa začali správať ako zoznam. */
/* ⚠️ Dve rôzne medzery, ktoré som si raz pomýlil: `.1rem` patrí OKOLO FOTKY
   (aby bola čo najväčšia), ale medzi riadkami musí zostať vzduch — inak sa
   z výpisu stane hustá tabuľka, v ktorej sa nedá zachytiť okom, kde jedna
   položka končí a druhá začína. */
.vypis { display: flex; flex-direction: column; gap: .9rem; }
/* ⚠️ Riadok výpisu je MRIEŽKA, nie flex so zalamovaním. Pri flexe si prvky
   pýtali miesto navzájom: dlhá cena vytlačila názov, úryvok sa zalomil vedľa
   neho a rozpätie pretieklo cez susedný stĺpec. V mriežke má každý prvok
   pevné miesto a nemá ako preliezť inam. */
.vypis > .karta {
  display: grid; align-items: center; gap: .2rem 1.4rem;
  padding: 1rem 1.2rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "foto nazov  cena"
    "foto uryvok cena"
    "foto meta   cena";
}
.vypis > .karta .karta-obr { grid-area: foto; }
.vypis > .karta .nazov     { grid-area: nazov; }
.vypis > .karta .uryvok    { grid-area: uryvok; }
.vypis > .karta .meta      { grid-area: meta; }
.vypis > .karta .rozpatie  { grid-area: cena; }
/* Fotka je v zozname to, čo človek číta ako prvé — text až potom, keď podľa
   nej vylúčil, čo nechce. Preto 150, nie 88 — a takmer bez odsadenia. */
.vypis > .karta .karta-obr { width: 150px; padding: .1rem; }
.vypis > .karta .karta-obr img { padding: .1rem; }
.vypis > .karta .nazov { -webkit-line-clamp: 2; font-size: 1rem; }
.vypis > .karta .meta { min-height: 0; text-align: left; }
/* ⚠️ Cena určuje šírku, nie naopak. Pri pevných 11rem sa rozpätie nad 99 €
   („1 234,00 € až 4 567,00 €") zalomilo do dvoch riadkov a rozhodilo celý
   riadok. `auto` s minimom si vypýta presne toľko, koľko treba, a `nowrap`
   zaručí, že sa čísla nerozdelia. */
.vypis > .karta .rozpatie { min-width: 8.5rem; margin-top: 0; }
.vypis > .karta .rozpatie-body { gap: .5rem; white-space: nowrap; }
/* ⚠️ Názov sa musí dať zmenšiť — bez `min-width: 0` ho flex nezmenší pod jeho
   obsah a vytlačí cenu z riadku. */
.vypis > .karta .nazov { min-width: 0; }
/* Úryvok popisu — len vo výpise, kde je naň miesto. */
.uryvok { display: none; }
.vypis > .karta .uryvok {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .84rem; line-height: 1.4; color: var(--text-2);
  min-width: 0;
}
/* ⚠️ Vo výpise je karta riadok (`flex-direction: row`), takže názov a úryvok
   musia byť v jednom stĺpci — inak by úryvok sadol vedľa názvu a rozbil rad. */


/* ⚠️ Media queries musia byť AŽ ZA základnými pravidlami. Nepridávajú
   špecifickosť, takže o výsledku rozhoduje poradie v súbore — keď som ich raz
   dal vyššie, základné `min-width: 8.5rem` ich potichu prebilo a na úzkej
   obrazovke sa nezmenilo nič. */
/* ⚠️ Na užších obrazovkách sa fotka aj písmo zmenšia. Dlhé ceny inak vytlačia
   buď názov, alebo samy seba do druhého riadku — a to prvé je horšie, lebo
   bez názvu človek nevie, o čo ide. */
@media (max-width: 1100px) {
  .vypis > .karta .karta-obr { width: 110px; }
  .vypis > .karta .cena-od { font-size: .95rem; }
  .vypis > .karta .rozpatie-body { font-size: .78rem; }
  .vypis > .karta { gap: .15rem 1rem; padding: .75rem .9rem; }
}
@media (max-width: 820px) {
  .vypis > .karta .karta-obr { width: 84px; }
  .vypis > .karta .nazov { font-size: .9rem; }
  .vypis > .karta .rozpatie { min-width: 7.2rem; }
}
.vypis > .karta .odznak-porovnat { font-size: .66rem; left: .25rem; bottom: .25rem; }
/* ══ ZOZNAM NA TELEFÓNE: pod seba, nie do troch stĺpcov ═════════════════════
   Róbert 2026-08-23: *„vo výpise pri mobiloch je to na Heureke vyriešené —
   fotka, potom nadpis vyjde celý, pod nadpisom je popis, po tom pod tým
   ostatné. Momentálne to máme, že nevidno nadpis celý ani popis."*

   🔴 Príčina bola v rozvrhu, nie v orezaní. Tri stĺpce (foto | text | cena)
   fungujú na širokej obrazovke, ale na telefóne zostane strednému stĺpcu
   asi polovica šírky — a do nej sa dva riadky názvu nezmestia, nech sú
   orezané akokoľvek. Cena sa preto sťahuje POD celú kartu a text dostane
   celú šírku.

   ⚠️ Názov sa tu NEOREZÁVA vôbec. V zozname je jediné, podľa čoho človek
   rozozná dva podobné produkty od seba — „Bosch PSB 750 RCE" a „Bosch PSB 750
   RE" sa líšia až na konci a orezaný názov by z nich spravil jeden. */
@media (max-width: 620px) {
  /* ⚠️ DVA STĹPCE, nie tri (Róbert 2026-08-23). Tretí stĺpec s cenou ukrajoval
     šírku textu práve tam, kde je jej najmenej — názov aj popis sa tak tlačili
     do polovice obrazovky. Cena a počet obchodov idú POD text a zarovnané
     doprava, kde ich oko nájde na konci karty.

     ⚠️ Názov sa NEOREZÁVA. Keď je dlhý, karta narastie a to je v poriadku;
     orezaný názov je horší, lebo dva podobné produkty splynú na jeden. */
  .vypis > .karta {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "foto nazov"
      "foto uryvok"
      ".    cena"
      ".    meta";
    gap: .3rem .7rem;
  }
  /* celý názov, žiadne orezanie */
  .vypis > .karta .nazov {
    display: block; overflow: visible; -webkit-line-clamp: unset;
    font-size: .95rem;
  }
  /* popis má teraz miesto, tak nech ho aj využije */
  .vypis > .karta .uryvok { -webkit-line-clamp: 3; }
  .vypis > .karta .rozpatie { min-width: 0; margin-top: .2rem; text-align: right; }
  .vypis > .karta .rozpatie-body { justify-content: flex-end; }
  /* ⚠️ Farebný prúžok zostáva aj na telefóne (Róbert 2026-08-23). Skrýval som ho
     ako „ozdobu", ale nie je — je to jediné miesto, kde je rozpätie cien vidieť
     ako OBRÁZOK, teda bez čítania čísel. Na telefóne, kde človek listuje palcom
     a čísla preletí, je to užitočnejšie než na počítači.

     ⚠️ Pevná šírka, nie na celý riadok: v dvojstĺpcovom rozvrhu by sa roztiahol
     cez celú kartu a vyzeral by ako oddeľovač sekcie, nie ako škála k cene. */
  .vypis > .karta .rozpatie-ciara { display: block; width: 5.5rem; margin-left: auto; }
  /* 🔴 „Ušetríte" sa na telefóne SKRÝVALO (`display: none`) a bola to strata:
     je to jediné miesto vo výpise, kde je vidieť, že sme porovnávač a nie
     katalóg. Teraz stojí pod cenou, vpravo, kde ho oko nájde spolu s ňou. */
  .vypis > .karta .meta {
    display: block; text-align: right; align-self: start;
    font-size: .78rem; white-space: nowrap;
  }
}

:root[data-vypis="mriezka"] .vypis {
  display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
/* ⚠️ V režime MRIEŽKA sa karta musí vrátiť na stĺpec — základ ju odteraz
   nastavuje ako mriežku s oblasťami (kvôli riadku vo výpise) a samotné
   `flex-direction` na nej nespraví nič, kým sa nezmení `display`. Bez tohto
   riadku sa mriežka na mobile rozsypala. */
:root[data-vypis="mriezka"] .vypis > .karta {
  display: flex; flex-direction: column; align-items: stretch;
  gap: .5rem; padding: .9rem;
  grid-template-areas: none; grid-template-columns: none;
}
:root[data-vypis="mriezka"] .vypis > .karta > * { grid-area: auto; }
:root[data-vypis="mriezka"] .vypis > .karta .karta-obr { flex: none; width: auto; }
/* V mriežke je karta úzka — úryvok aj počet obchodov pri cene tam nepatria. */
:root[data-vypis="mriezka"] .vypis > .karta .uryvok,
:root[data-vypis="mriezka"] .vypis > .karta .obchodov-pri-cene { display: none; }
:root[data-vypis="mriezka"] .vypis > .karta .nazov { font-size: .93rem; -webkit-line-clamp: 3; }
:root[data-vypis="mriezka"] .vypis > .karta .meta { text-align: left; min-height: 1.15rem; }
:root[data-vypis="mriezka"] .vypis > .karta .rozpatie { flex: none; margin-top: auto; }

/* ⚠️ Na mobile DVE karty v rade aj v kategórii. `minmax(230px…)` sa pri 360 px
   obrazovke zlomí na jednu a z výpisu je nekonečný stĺpec, v ktorom sa nedá
   porovnávať — a porovnávať je jediné, kvôli čomu sem človek prišiel. */
@media (max-width: 700px) {
  :root[data-vypis="mriezka"] .vypis {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
  }
  :root[data-vypis="mriezka"] .vypis > .karta { padding: .5rem; }
}
/* ⚠️ Toto musí byť ZA ostatnými pravidlami mriežky. Media query nepridáva
   špecifickosť, takže hlavné `padding: .9rem` by ho inak prebilo a na mobile
   by sa nezmenilo nič. */

.prepinac { display: flex; gap: .3rem; }
.prepinac button {
  background: var(--panel); border: 1px solid var(--ciara); color: var(--text-2);
  border-radius: var(--r-s); padding: .3rem .7rem; font: inherit; font-size: .85rem; cursor: pointer;
}
.prepinac button[aria-pressed="true"] {
  background: var(--znacka); border-color: var(--znacka); color: var(--znacka-text); font-weight: 600;
}

/* ══ REKLAMNÉ RÁMY — miesto sa rezervuje vopred ═════════════════════════════
   ⚠️ Výška sa nastavuje z rozmeru ešte pred doletom banneru. Bez toho baner po
   načítaní odsunie obsah nadol a človek klikne na niečo iné, než mieril.
   ═════════════════════════════════════════════════════════════════════════ */
.reklama[data-rozmer="728x90"]  { min-height: 90px; }
.reklama[data-rozmer="468x60"]  { min-height: 60px; }
.reklama[data-rozmer="300x600"] { min-height: 600px; width: 300px; margin: 0 auto 1.2rem; }
@media (max-width: 860px) {
  /* Na mobile ide všetko na 320×100 — 728×90 sa nezmestí a 300×600 by zabral obrazovku. */
  .reklama[data-rozmer-mobil="320x100"] { min-height: 100px; }
  .reklama[data-bez-mobilu] { display: none; }
  .reklama[data-rozmer="300x600"] { width: auto; }
}
.reklama.ukazka { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ══ PÁS S POSÚVANÍM (články) ═══════════════════════════════════════════════
   Vodorovné posúvanie robí prehliadač sám — `overflow-x` plus `scroll-snap`.
   ⚠️ Žiadna knižnica ani vlastné ťahanie prstom: natívne posúvanie má správnu
   zotrvačnosť na každom telefóne, funguje kolieskom, klávesnicou aj čítačkou
   obrazovky, a keď JS nedobehne, pás sa posúva ďalej.
   ═════════════════════════════════════════════════════════════════════════ */
/* ⚠️ `min-width: 0` aj na OBALE, nielen na samotnom páse. Mriežka
   s `grid-auto-flow: column` roztiahne každého rodiča, ktorý sa nebráni —
   stačí jeden článok reťaze bez tejto poistky a pás sa neposúva, ale vytlačí
   celú stránku do strany. Chytilo sa to až tým, že obľúbené hore vyšli mimo
   šírku, hoci samotný pás poistku mal. */
.pas-obal { position: relative; min-width: 0; max-width: 100%; }
.pas {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 23vw, 280px);
  gap: .9rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding: 0 .2rem;
  padding: .2rem .2rem .4rem;     /* miesto pre tieň karty */
  /* ⚠️ Posuvník preč — pri kartách vyzerá ako nedokončený prvok stránky.
     Jeho úlohu preberajú bodky pod pásom; tie sa čítajú ako súčasť obsahu
     a dá sa nimi aj preskakovať. */
  scrollbar-width: none;
}
.pas::-webkit-scrollbar { display: none; }
.pas > * { scroll-snap-align: start; }
/* ⚠️ Náznak, že pás pokračuje. Bez neho vyzerá orezaná karta na okraji ako
   chyba rozloženia, nie ako pozvánka potiahnuť prstom — a na dotyku, kde
   nie sú šípky, je to jediné, čo o pokračovaní hovorí. */
.pas-obal .pas {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.2rem,
                      #000 calc(100% - 2.2rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 2.2rem,
              #000 calc(100% - 2.2rem), transparent 100%);
}
.pas-obal.na-zaciatku .pas {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent 100%);
}
.pas-obal.na-konci .pas {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.2rem);
  mask-image: linear-gradient(to right, transparent 0, #000 2.2rem);
}
/* Keď sa všetko zmestí, maska by len zbytočne odhryzla okraje. */
.pas-obal.na-zaciatku.na-konci .pas {
  -webkit-mask-image: none; mask-image: none;
}
.pas-sip {
  position: absolute; top: calc(50% - 2rem); z-index: 2;
  width: 2.4rem; height: 2.4rem; border-radius: 99px; cursor: pointer;
  background: var(--panel); color: var(--text); border: 1px solid var(--ciara);
  box-shadow: var(--tien); font-size: 1.2rem; line-height: 1;
}
.pas-sip[hidden] { display: none; }
.pas-vlavo  { left: -.8rem; }
.pas-vpravo { right: -.8rem; }
/* ⚠️ Šípky trčia z obalu o .8rem na každú stranu. Na širokej stránke to je
   zámer (nesedia na kartách), ale na úzkej to znamená, že stránka je o kúsok
   širšia než okno — a prehliadač na ňu nasadí vodorovný posuvník. Stačí, aby
   sa raz posunula doprava, a celý ľavý okraj je odrezaný. */
@media (max-width: 900px) {
  .pas-vlavo  { left: 0; }
  .pas-vpravo { right: 0; }
}
/* Na dotykových zariadeniach sa listuje prstom — šípky by len zavadzali. */
@media (hover: none) { .pas-sip { display: none; } }

/* ⚠️ Na telefóne sa hrdina zmenšuje, aby sa pás s článkami zmestil na prvú
   obrazovku. Pôvodné rozmery ho odsúvali pod okraj a bez skrolovania nadol
   ho nikto nenašiel — pritom má úvodku zaplniť obsahom. */
@media (max-width: 620px) {
  .hrdina { padding: 1.1rem 0 .2rem; }
  .hrdina p { font-size: .93rem; }
  .cisla { gap: .9rem; margin: .7rem 0 .2rem; }
  .cislo b { font-size: 1.1rem; }
  .cislo span { font-size: .76rem; }
  h2 { margin-top: 1.6rem; }
  /* Užšie karty = vedľajšia vykukuje a je vidieť, že sa dá listovať prstom. */
  .pas { grid-auto-columns: 62vw; }
}

/* ══ PLAKETKA DOSTUPNOSTI ═══════════════════════════════════════════════════
   ⚠️ Farba nesie význam, preto sa NEVIAŽE na značku — ostáva rovnaká vo všetkých
   farebných variantoch. Zelená „skladom" musí znamenať to isté na fialovej aj na
   námorníckej.
   ⚠️ Farba nie je jediný nosič informácie — text plaketky hovorí to isté, takže
   pri farbosleposti sa nič nestratí.
   ═════════════════════════════════════════════════════════════════════════ */
.plaketka {
  display: inline-block; margin-top: .15rem;
  font-size: .76rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px;
  border: 1px solid transparent; white-space: nowrap;
}
.p-skladom {
  color: var(--lacne);
  background: color-mix(in srgb, var(--lacne) 14%, transparent);
  border-color: color-mix(in srgb, var(--lacne) 30%, transparent);
}
.p-dni {
  color: var(--zvyraz-text);
  background: color-mix(in srgb, var(--zvyraz) 16%, transparent);
  border-color: color-mix(in srgb, var(--zvyraz) 32%, transparent);
}
.p-na-objednavka, .p-na-objednavku, .p-neznamy {
  color: var(--text-2); background: var(--panel-2); border-color: var(--ciara);
}
.p-nedostupne {
  color: var(--drahe);
  background: color-mix(in srgb, var(--drahe) 12%, transparent);
  border-color: color-mix(in srgb, var(--drahe) 28%, transparent);
}

/* ── varianty ─────────────────────────────────────────────────────── */
/* ── KRÁTKY POPIS A ÚDAJE O TOVARE ──────────────────────────────────────────
   Róbert 2026-08-21: *„krátky popis do detailu a dôležité info ako EAN, ako mám
   na nasetipy.sk."* Kaon to má ako blok „Informácie o tovare" (Výrobca / Kód
   výrobcu / EAN-UPC kód) hneď pri cene.

   ⚠️ Popis je ÚRYVOK, nie celý text. Celý patrí do záložky — cudzie popisy
   z feedov majú aj tisíc znakov a odtlačili by ponuky pod ohyb. */
.popis-uryvok { color: var(--text-2); font-size: .92rem; line-height: 1.5;
  margin: .2rem 0 .8rem; }
.popis-uryvok a { white-space: nowrap; }
/* ⚠️ Definičný zoznam, nie tabuľka. Sú to dvojice názov–hodnota, nie mriežka,
   a čítačka to takto aj prečíta. */
.udaje-tovar { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem;
  margin: 0 0 1rem; font-size: .88rem; }
.udaje-tovar dt { color: var(--text-2); }
.udaje-tovar dd { margin: 0; font-variant-numeric: tabular-nums; }
/* ⚠️ EAN sa dá označiť dvojklikom a je monospace: je to číslo, ktoré si ľudia
   kopírujú do iného vyhľadávania, nie text na čítanie. */
.udaje-tovar .ean { font-family: ui-monospace, SFMono-Regular, monospace;
  user-select: all; }

.varianty { margin: .2rem 0 1rem; }
.varianty-nadpis { font-size: .85rem; color: var(--text-2); margin-bottom: .4rem; }
/* Cena vo vnútri čipu drží tabuľkové číslice, aby sa dala porovnať očami zhora nadol. */
.varianty .stitok b { font-variant-numeric: tabular-nums; margin-left: .3rem; }
.varianty .stitok { display: inline-flex; align-items: baseline; gap: .1rem; }

/* ── popis produktu ───────────────────────────────────────────────── */
/* ⚠️ Šírka je obmedzená aj tu, hoci rozvrh je široký — riadok nad ~75 znakov
   sa zle sleduje a popis je jediné súvislé čítanie na celej stránke. */
.popis-produktu { max-width: 46rem; }
.popis-produktu p { margin: .4rem 0 .8rem; }
.popis-produktu ul, .popis-produktu ol { margin: .4rem 0 .8rem 1.2rem; padding: 0; }
.popis-produktu li { margin: .15rem 0; }

/* ══ POROVNANIE ═════════════════════════════════════════════════════════════ */
/* Prepínač na karte. Sedí v rohu obrázka, aby nebral miesto názvu ani cene. */
/* ⚠️ Zacielené na KARTU, nie na triedu samotnú. Tie isté triedy nesú aj
   textové tlačidlá na detaile produktu („+ Porovnať", „♡ Obľúbené") — tam
   `position: absolute` vyskočilo z toku, vyliezlo mimo šírku stránky a
   nasadilo na ňu vodorovný posuvník. Našiel Róbert v DevTools. */
.karta-obr > .porovnat-prep {
  position: absolute; right: .4rem; top: .4rem; z-index: 2;
  width: 1.9rem; height: 1.9rem; border-radius: 99px; cursor: pointer;
  background: var(--panel); color: var(--text-2); border: 1px solid var(--ciara);
  font: inherit; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
/* ⚠️ `currentColor` v SVG — ikona sa tak farbí spolu s tlačidlom a netreba
   pre zapnutý stav druhú kresbu. */
.ikona { width: 1.05rem; height: 1.05rem; display: block; }
.karta-obr > .porovnat-prep:hover { color: var(--znacka); border-color: var(--znacka); }
/* ⚠️ Zapnutý stav musí byť vidieť aj bez farby — samotné prefarbenie
   nerozozná človek, ktorý farby nerozlišuje. Preto k nemu plná výplň
   a fajka v rohu. */
.karta-obr > .porovnat-prep.zapnuty { color: #fff; border-color: var(--znacka);
  background: var(--znacka); }
.karta-obr > .porovnat-prep.zapnuty::after {
  content: "✓"; position: absolute; right: -.15rem; bottom: -.15rem;
  width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--znacka); color: #fff; font-size: .6rem; line-height: .85rem;
  border: 1.5px solid var(--panel);
}

.porovnat-prep.zapnuty {
  background: var(--znacka); border-color: var(--znacka); color: var(--znacka-text);
}
.karta-obr { position: relative; }

/* Lišta dole. ⚠️ `position: fixed` a nie `sticky` — musí byť vidieť aj vtedy,
   keď je človek uprostred dlhého výpisu, inak o výbere nevie. */
.porovnanie-lista {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--panel); border-top: 1px solid var(--ciara); box-shadow: var(--tien);
  padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom));
}
/* ⚠️ `nowrap`, nie `wrap`. Pri zalamovaní lišta na úzkej obrazovke narástla na
   tri riadky, prekryla spodok stránky a vyzeralo to, akoby sa rozsypal layout.
   Náhľady sa radšej posunú do strany než aby tlačili zvyšok do ďalšieho riadku. */
.porovnanie-lista-vnutro { display: flex; align-items: center; gap: .8rem;
  flex-wrap: nowrap; min-width: 0; }
.porovnanie-nahlady { display: flex; gap: .3rem; overflow-x: auto; min-width: 0;
  flex: 1 1 auto; scrollbar-width: none; }
.porovnanie-nahlady::-webkit-scrollbar { display: none; }
.porovnanie-lista .tlacidlo { flex: 0 0 auto; margin-left: auto; }
.porovnanie-lista .stitok { flex: 0 0 auto; }
#porovnanie-pocet { flex: 0 0 auto; }

/* ⚠️ Lišta je `fixed`, takže prekrýva spodok obsahu — a to je presne ten
   pocit „rozhádzaného layoutu". Keď je vidieť, stránka si dole nechá miesto.
   Triedu pridáva JS spolu s odkrytím lišty. */
body.ma-porovnanie { padding-bottom: 5.5rem; }

/* ⚠️ Dve pevné lišty na spodku by sa prekryli. Keď je otvorený panel filtrov,
   porovnávacia lišta sa schová — filter je práve to, čo človek rieši, a lišta
   by mu prekrývala jeho vlastné tlačidlo „Hotovo". */
body.filtre-otvorene .porovnanie-lista { display: none; }
#porovnanie-pocet { font-weight: 600; font-variant-numeric: tabular-nums; }

.porovnanie-obal { overflow-x: auto; }
.porovnanie { border-collapse: collapse; width: 100%; min-width: 40rem; }
.porovnanie th, .porovnanie td {
  border: 1px solid var(--ciara); padding: .55rem .7rem; vertical-align: top;
  text-align: left; font-size: .9rem;
}
/* Prvý stĺpec drží pri vodorovnom posúvaní — bez neho človek po pár stĺpcoch
   nevie, ktorý riadok číta. */
.porovnanie th:first-child, .porovnanie .rohovy {
  position: sticky; left: 0; background: var(--panel); z-index: 1;
  color: var(--text-2); font-weight: 600; min-width: 9rem;
}
.porovnanie thead th { background: var(--panel); vertical-align: bottom; }
.porovnanie thead .karta-obr { aspect-ratio: 1; width: 100%; max-width: 9rem; margin-bottom: .4rem; }
.porovnanie thead .nazov { display: block; font-weight: 600; font-size: .88rem; }
.porovnanie tr.dolezity td { background: var(--panel-2); }
.porovnanie tr.zhodne th, .porovnanie tr.zhodne td { color: var(--text-2); }
.porovnanie .odobrat { margin-top: .4rem; display: inline-block; }

/* ══ NAPOSLEDY PREZERANÉ A OBĽÚBENÉ ═════════════════════════════════════════
   Vedome INÝ tvar než produktová karta: menšie, bez ceny, v jednom rade.
   Nie je to ponuka na kúpu, ale pripomienka „tu si bol" — a keby to vyzeralo
   ako karta, súperilo by to o pozornosť s tovarom, ktorý naozaj ponúkame.
   ═════════════════════════════════════════════════════════════════════════ */
.ulozene { margin: 2rem 0 0; }
/* Hore je to skratka k rozrobenému výberu, nie sekcia — preto tesnejšie
   a s čiarou, ktorá ju oddelí od obsahu stránky. */
.ulozene-hore { margin: .8rem 0 1.4rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--ciara); }
.ulozene-hore h2 { font-size: 1.05rem; }
/* ⚠️ Uložené aj prezerané sú teraz obyčajný `.pas` — dedia posúvanie prstom,
   šípky, bodky aj masku na okrajoch. Predtým to bola vlastná mriežka s vlastným
   posuvníkom, teda druhá implementácia toho istého, ktorá sa správala inak. */
.pas-ulozene {
  grid-auto-columns: clamp(110px, 12vw, 140px);
  gap: .7rem; padding-bottom: .2rem;
  /* ⚠️ `min-width: 0` je tu nutné. Bez neho mriežka s `grid-auto-flow: column`
     roztiahne rodiča na súčet všetkých kariet — pás sa neposúva, ale roztiahne
     CELÝ layout stránky do strany. Prejaví sa to až vtedy, keď má človek
     v histórii dosť produktov, takže to na prázdnom webe nikto nevidí. */
  min-width: 0; max-width: 100%;
}
.ulozene { min-width: 0; }
.ulozena { position: relative; scroll-snap-align: start; }
.ulozena .karta-obr { aspect-ratio: 1; }
.ulozena .nazov {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .78rem; line-height: 1.3; margin-top: .3rem;
  color: var(--text-2);
}
.ulozena a:hover .nazov { color: var(--text); text-decoration: none; }
.ulozena .odstranit {
  position: absolute; right: .25rem; top: .25rem; z-index: 2;
  width: 1.5rem; height: 1.5rem; border-radius: 99px; cursor: pointer; padding: 0;
  background: var(--panel); color: var(--text-2); border: 1px solid var(--ciara);
  font-size: .72rem; line-height: 1; opacity: 0; transition: opacity .12s;
}
.ulozena:hover .odstranit, .ulozena:focus-within .odstranit { opacity: 1; }
/* ⚠️ Na dotyku nie je „hover" — krížik musí byť vidieť stále, inak sa nedá zmazať. */
@media (hover: none) { .ulozena .odstranit { opacity: 1; } }

.produkt-akcie { display: flex; gap: .5rem; flex-wrap: wrap; }
.oblubene-prep.zapnuty {
  background: var(--znacka); border-color: var(--znacka); color: var(--znacka-text);
}

/* ── formulár ─────────────────────────────────────────────────────── */
.formular { display: flex; flex-direction: column; gap: .5rem; max-width: 24rem; margin: 1rem 0; }
.formular label { font-size: .88rem; color: var(--text-2); }
.formular input {
  padding: .6rem .8rem; font: inherit; border-radius: var(--r-s);
  background: var(--panel-2); color: var(--text); border: 1px solid var(--ciara);
}
.formular button { align-self: flex-start; margin-top: .3rem; }

/* ══ SPRÁVA E-SHOPU ═════════════════════════════════════════════════════════ */
.panel-kvalita { display: grid; grid-template-columns: minmax(0,12rem) 1fr; gap: 1.4rem;
  align-items: start; margin: 1.2rem 0; }
@media (max-width: 640px) { .panel-kvalita { grid-template-columns: 1fr; } }
.kvalita-cislo .skore { display: block; font-size: 2.6rem; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kvalita-cislo .skore span { font-size: 1rem; color: var(--text-2); font-weight: 400; }
/* Farba hovorí to isté čo slovo — nikdy sama. */
.s-dobre   { color: var(--lacne); }
.s-stredne { color: var(--zvyraz-text); }
.s-zle     { color: var(--drahe); }
.nalezy { margin: 0; padding-left: 1.1rem; }
.nalezy li { margin: .3rem 0; font-size: .92rem; }
.nalezy .n-chyba    { color: var(--drahe); }
.nalezy .n-dolezite { color: var(--text); }
.nalezy .n-poznamka { color: var(--text-2); }

.cisla-mriezka { display: grid; gap: .9rem; margin: 1.4rem 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Číselné okienko sa nedvíha pri prejdení myšou — nie je to odkaz. */
.cislo-box:hover { box-shadow: none; transform: none; }
.cislo-box b { display: block; font-size: 1.7rem; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.cislo-box > span { color: var(--text-2); font-size: .85rem; }
.formular textarea, .formular select {
  padding: .6rem .8rem; font: inherit; border-radius: var(--r-s);
  background: var(--panel-2); color: var(--text); border: 1px solid var(--ciara);
}

/* ══ SPRÁVA POROVNÁVAČA ═════════════════════════════════════════════════════ */
.admin-dvojica { display: grid; gap: 1.6rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .admin-dvojica { grid-template-columns: 1fr; } }
/* Široké tabuľky sa posúvajú VO VLASTNOM ráme — stránka nesmie ísť do strany. */
.siroka { display: block; overflow-x: auto; white-space: nowrap; }
.siroka th { text-align: left; font-size: .78rem; color: var(--text-2);
  font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.admin-riadok { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.admin-riadok select, .admin-riadok input {
  font-size: .82rem; padding: .25rem .4rem; border-radius: var(--r-s);
  background: var(--panel-2); color: var(--text); border: 1px solid var(--ciara);
}
.admin-riadok button { padding: .25rem .7rem; font-size: .82rem; }
.skore-maly { font-variant-numeric: tabular-nums; }

/* ══ PLATENÉ UMIESTNENIE ════════════════════════════════════════════════════
   ⚠️ Označenie musí byť ČITATEĽNÉ, nie technicky prítomné. Preto plná farba
   a nie šedá na šedej — nenápadný štítok je to isté ako žiadny. */
.karta-top { position: relative; border-color: var(--zvyraz); }
.znacka-top {
  position: absolute; top: .4rem; left: .4rem; z-index: 2;
  background: var(--zvyraz); color: #1a1205;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .16rem .42rem; border-radius: var(--r-s);
}
.stitok-ticho { background: none; border: 1px solid var(--ciara); color: var(--text-2);
  font-size: .74rem; }

/* ══ STRÁNKOVANIE A PONUKA SPRÁVY ═══════════════════════════════════════════ */
.admin-menu { display: flex; gap: .3rem; flex-wrap: wrap; margin: 1rem 0 1.4rem;
  border-bottom: 1px solid var(--ciara); padding-bottom: .6rem; }
.admin-menu a { padding: .35rem .8rem; border-radius: var(--r-s); font-size: .92rem;
  color: var(--text-2); }
.admin-menu a:hover { background: var(--panel-2); text-decoration: none; }
.admin-menu a.zapnuty { background: var(--znacka); color: #fff; }
/* Počet pri položke — pri „Registrácie 3" je to to jediné, čo treba vidieť. */
.admin-menu a b { font-variant-numeric: tabular-nums; opacity: .75; }
.strankovanie { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: .7rem 0; flex-wrap: wrap; }
.strany { display: flex; gap: .2rem; align-items: center; }
.strany a, .strany b, .strany span { padding: .2rem .5rem; border-radius: var(--r-s);
  font-size: .88rem; font-variant-numeric: tabular-nums; }
.strany a { color: var(--text-2); }
.strany a:hover { background: var(--panel-2); text-decoration: none; }
.strany b { background: var(--znacka); color: #fff; }

/* ══ NAPOVEDANIE ════════════════════════════════════════════════════════════ */
.hladanie { position: relative; }
.napovede {
  position: absolute; top: calc(100% + .3rem); left: 0; right: 0; z-index: 60;
  margin: 0; padding: .25rem; list-style: none;
  background: var(--panel); border: 1px solid var(--ciara);
  border-radius: var(--r-s); box-shadow: var(--tien); max-height: 60vh;
  overflow-y: auto;
}
.napovede li {
  padding: .45rem .6rem; border-radius: var(--r-s); cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
}
.napovede li:hover, .napovede li.zapnuta { background: var(--panel-2); }
.napoveda-typ { color: var(--text-2); font-size: .74rem; flex: none; }

/* ══ VEREJNÝ PROFIL E-SHOPU ═════════════════════════════════════════════════ */
.eshop-hlavicka { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap;
  margin: 1rem 0 1.6rem; }
.eshop-hlavicka:hover { box-shadow: none; transform: none; }
.eshop-hlavicka h1 { margin: 0 0 .2rem; }
/* Pevný rám a `contain` — logá majú rôzny pomer strán a bez toho by hlavička
   poskakovala podľa toho, čí profil sa práve pozerá. */
.eshop-logo { width: 160px; height: 60px; object-fit: contain; flex: none; }
.stitky { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ══ ZOZNAM E-SHOPOV ════════════════════════════════════════════════════════ */
.mriezka-obchodov { display: grid; gap: .9rem; margin: 1rem 0;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.obchod-karta { text-align: center; }
/* Pevná výška a `contain` — logá majú rôzny pomer strán a bez toho by sa
   mriežka rozsypala podľa toho, čie logo je vyššie. */
.obchod-logo { height: 60px; display: flex; align-items: center;
  justify-content: center; margin-bottom: .5rem; }
.obchod-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.obchod-logo span { color: var(--text-2); font-size: .9rem; font-weight: 600; }
/* ⚠️ Zvýraznenie je FARBA, nie poradie. Ten istý princíp ako pri ponukách. */
.v-bronz    { border-color: #a1662f; }
.v-striebro { border-color: #9aa4ad; }
.v-zlato    { border-color: #c9a227; box-shadow: 0 0 0 1px #c9a22733; }

/* ══ POPIS KATEGÓRIE ════════════════════════════════════════════════════════
   Úvodník je vždy vidieť, zvyšok sa rozklikne. Na počítači je miesta dosť,
   tak sa dá otvoriť jedným kliknutím; na mobile je to práve to, čo šetrí
   obrazovku pred tovarom. */
.kat-popis { margin: .2rem 0 1.2rem; max-width: 62rem; color: var(--text-2);
  font-size: .93rem; line-height: 1.6; }
.kat-popis .uvodnik { margin: 0; }
.kat-popis details { margin-top: .3rem; }
.kat-popis summary { cursor: pointer; color: var(--znacka-svetla, var(--znacka));
  font-size: .88rem; list-style: none; display: inline-flex; align-items: center;
  gap: .3rem; padding: .15rem 0; }
.kat-popis summary::-webkit-details-marker { display: none; }
.kat-popis summary::after { content: "▾"; font-size: .8em; transition: transform .15s; }
.kat-popis details[open] summary::after { transform: rotate(180deg); }
.kat-popis details p { margin: .4rem 0 0; }

/* ══ PODKATEGÓRIE ═══════════════════════════════════════════════════════════
   Vodorovný pás štítkov nad výpisom. Na mobile sa zalomí; nezaberá viac než
   dva riadky, kým sa nerozklikne. */
.podkategorie { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem; }
.podkategorie .stitok b { color: var(--text-2); font-weight: 400; }
.surodenci { margin-top: 2.4rem; }
.surodenci h2 { font-size: 1.05rem; }

/* ══ SKONČENÝ PRODUKT ═══════════════════════════════════════════════════════
   ⚠️ Stránka zostáva živá a indexovateľná — zo sitemapy a z výpisov vypadne,
   ale adresa platí ďalej. Preto musí byť na prvý pohľad jasné, že tu sa nedá
   kúpiť, a rovno ponúknuť, čím to nahradiť. Tenký riadok pod nadpisom to
   nespraví — človek ho preskočí a hľadá tlačidlo, ktoré tam nie je. */
.skoncil { border-left: 3px solid var(--drahe); padding: .6rem 0 .6rem .9rem;
  margin: .6rem 0 1rem; background: var(--panel-2); border-radius: 0 var(--r-s) var(--r-s) 0; }
.skoncil-hlavne { margin: 0; font-weight: 600; color: var(--drahe); }
.skoncil-info { margin: .25rem 0 0; color: var(--text-2); font-size: .92rem; }

.bez-fotky-detail { display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; background: var(--panel-2); border-radius: var(--r);
  border: 1px solid var(--ciara); cursor: default; }
.bez-fotky-detail .bez-foto { -webkit-line-clamp: 6; font-size: 1rem; }

/* ══ RIADOK PONUKY ══════════════════════════════════════════════════════════
   ⚠️ Farba, nie poradie. Vyšší balík je vidieť rámom a menovkou, ale stojí tam,
   kam ho posunula cena — inak porovnávač prestane porovnávať. */
.obchod-kto { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Pevný rám a `contain`: logá majú rôzny pomer strán a bez toho by sa stĺpec
   s cenou prestal držať v jednej línii. */
.ponuka-logo { width: 96px; height: 32px; object-fit: contain; flex: none; }
.obchod.v-bronz    { border-left: 3px solid #a1662f; }
.obchod.v-striebro { border-left: 3px solid #9aa4ad; }
.obchod.v-zlato    { border-left: 3px solid #c9a227; }
.menovka { font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .1rem .38rem; border-radius: var(--r-s);
  color: #1a1205; }
.m-bronz    { background: #d08b4e; }
.m-striebro { background: #c3ccd4; }
.m-zlato    { background: #e5bf3f; }
/* Vek ceny je priznanie, nie ozdoba — drobné a sivé, ale čitateľné. */
.vek-ceny { font-size: .72rem; color: var(--text-2); font-weight: 400;
  margin-top: .1rem; }

/* ── DOPRAVA V RIADKU PONUKY ────────────────────────────────────────────────
   ⚠️ Rovnaká veľkosť a farba ako vek ceny, teda pod cenou, nie vedľa nej.
   Heureka to má rovnako (`Doprava od 3,9 €`) a je to správne: doprava cenu
   spresňuje, nesúťaží s ňou.

   ⚠️ Doprava zadarmo je ZELENÁ, nie sivá. Je to jediný údaj v tom riadku, ktorý
   môže prevážiť pár centov rozdielu v cene — a keď splynie s ostatným drobným
   textom, človek ho prehliadne presne vtedy, keď mu má pomôcť. */
.doprava { font-size: .72rem; color: var(--text-2); font-weight: 400;
  margin-top: .1rem; }
.doprava-zadarmo { color: var(--lacne); font-weight: 600; }

/* Srdce na karte — vedľa „+", rovnaký tvar aj správanie. */
.karta-obr > .oblubene-prep {
  position: absolute; right: .4rem; top: 2.3rem; z-index: 3;
  width: 1.7rem; height: 1.7rem; line-height: 1; padding: 0;
  border-radius: 50%; border: 1px solid var(--ciara);
  background: var(--panel); color: var(--text-2); cursor: pointer;
  font-size: .95rem;
}
.karta-obr > .oblubene-prep:hover { border-color: var(--znacka); color: var(--znacka); }
/* Srdce na karte je zapnuté červené; textové tlačidlo na detaile si drží
   značkovú farbu z pravidla vyššie. */
.karta-obr > .oblubene-prep.zapnuty { color: var(--drahe); border-color: var(--drahe);
  background: var(--panel); }

/* Cenový filter — dve políčka vedľa seba, aby nezaberal pol bočníka. */
.cena-filter { display: flex; flex-wrap: wrap; gap: .4rem; align-items: end;
  padding: .3rem 0 .1rem; }
.cena-filter label { display: flex; flex-direction: column; gap: .15rem;
  font-size: .78rem; color: var(--text-2); flex: 1 1 5rem; min-width: 0; }
.cena-filter input { width: 100%; padding: .35rem .45rem; font: inherit;
  font-size: .85rem; border: 1px solid var(--ciara); border-radius: var(--r-s);
  background: var(--panel-2); color: var(--text); }
.cena-filter button { padding: .35rem .7rem; font-size: .85rem; }
.cena-cisla { display: flex; gap: .4rem; flex: 1 1 100%; }
.cena-cisla label { display: flex; flex-direction: column; gap: .15rem;
  font-size: .78rem; color: var(--text-2); flex: 1 1 5rem; min-width: 0; }

/* ── CENOVÝ POSUVNÍK ────────────────────────────────────────────────────────
   ⚠️ Dva `input[type=range]` NAD SEBOU. Prehliadač dvojitý rozsah nemá
   a knižnica kvôli jednému ovládaču by sem ťahala cudzí kód. Trik je v tom, že
   dráhy sú priehľadné a viditeľná je jedna spoločná pod nimi. */
.cena-posuvnik { flex: 1 1 100%; }
.cena-vypis { display: block; font-size: .85rem; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-bottom: .35rem; }
.posuvnik-drahy { position: relative; height: 1.6rem; }
/* spoločná dráha */
.posuvnik-drahy::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 4px; border-radius: 99px;
  background: var(--ciara);
}
.posuvnik-vybrane {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 4px; border-radius: 99px; background: var(--znacka);
}
.posuvnik-drahy input[type=range] {
  position: absolute; left: 0; width: 100%; margin: 0; top: 0; height: 1.6rem;
  -webkit-appearance: none; appearance: none; background: none;
  /* ⚠️ Bez tohto by horný posuvník zachytil všetky kliknutia a spodný by sa
     nedal chytiť vôbec. Klikať sa dá len na samotné pukátko. */
  pointer-events: none;
}
.posuvnik-drahy input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: grab;
  width: 1.15rem; height: 1.15rem; border-radius: 99px;
  background: var(--znacka); border: 2px solid var(--panel);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.posuvnik-drahy input[type=range]::-moz-range-thumb {
  pointer-events: auto; cursor: grab;
  width: 1.15rem; height: 1.15rem; border-radius: 99px;
  background: var(--znacka); border: 2px solid var(--panel);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.posuvnik-drahy input[type=range]::-moz-range-track { background: none; }
.posuvnik-drahy input[type=range]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--znacka); outline-offset: 2px; }


/* ══ POČET OBCHODOV PRI CENE ════════════════════════════════════════════════
   V mriežke zostáva odznak na fotke (je tam miesto a karta je úzka);
   vo výpise ide počet k cene, kde dáva rozpätiu zmysel, a odznak z fotky
   zmizne, aby neprekrýval tovar. */
.obchodov-pri-cene { display: none; font-size: .78rem; color: var(--text-2); }
/* Vo výpise má vlastný riadok pod cenou; `.rozpatie` je stĺpec, takže stačí
   byť jeho ďalším dieťaťom. */
.vypis > .karta .obchodov-pri-cene { display: block; margin-top: .15rem;
  text-align: right; white-space: nowrap; }
.vypis > .karta .odznak-porovnat { display: none; }

/* ══ POPISOK REKLAMY ════════════════════════════════════════════════════════
   ⚠️ Mimo rámu, ktorý prepisuje JS — inak by ho prvý vložený banner zmazal.
   Drobné a sivé: má sa dať prečítať, ale nemá súperiť s obsahom. */
/* ⚠️ Vycentrované na stred. Banner má pevnú šírku (728, 300…), takže
   v širokom stĺpci sedel vľavo a vyzeral ako nedokončený kus stránky.
   Popisok ide s ním — nad ľavým rohom vycentrovaného banneru by pôsobil
   ako odtrhnutý. */
.reklama-obal { display: flex; flex-direction: column; align-items: center;
  gap: .15rem; margin: 1.4rem 0; }
.reklama-obal .reklama { margin: 0; }
.reklama-popisok { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); opacity: .7; line-height: 1; text-align: center; }

/* ══ BODKY POD PÁSOM ════════════════════════════════════════════════════════ */
.pas-bodky { display: flex; justify-content: center; gap: .35rem;
  margin: .5rem 0 .2rem; }
.pas-bodky[hidden] { display: none; }
.pas-bodka {
  width: .45rem; height: .45rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--ciara); cursor: pointer; transition: background .15s, width .15s;
}
.pas-bodka:hover { background: var(--text-2); }
/* ⚠️ Zapnutá bodka je aj ŠIRŠIA, nielen tmavšia — samotná farba nestačí
   človeku, ktorý farby nerozlišuje. */
.pas-bodka.zapnuta { background: var(--znacka); width: 1.15rem; border-radius: 99px; }

/* ══ TLAČIDLÁ FILTROV NAD ZOZNAMOM (mobil) ═════════════════════════════════
   ⚠️ Na počítači sú filtre v bočníku hneď vedľa tovaru a tlačidlá by boli
   navyše. Na mobile je bočník až pod tovarom — teda tam, kam sa nikto
   nedoscrolluje — a bez tohto pásu sa k filtrom prakticky nedá dostať. */
.filtre-tlacidla { display: none; }
@media (max-width: 900px) {
  .filtre-tlacidla {
    display: flex; gap: .5rem; overflow-x: auto; padding: .2rem 0 .6rem;
    scrollbar-width: none;
  }
  .filtre-tlacidla::-webkit-scrollbar { display: none; }
  .filtre-tlacidla .tlacidlo { flex: 0 0 auto; display: inline-flex;
    align-items: center; gap: .4rem; white-space: nowrap; }

  /* ⚠️ Bočník sa na mobile otvára ako panel cez obrazovku, nie ako rozbalenie
     na mieste. Rozbalenie by odtlačilo tovar o niekoľko obrazoviek nižšie
     a človek by po zvolení filtra netušil, kam sa pozerať. */
  .bocnik {
    position: fixed; inset: 0; z-index: 60; margin: 0;
    background: var(--pozadie); overflow-y: auto;
    padding: 1rem 1rem 5rem; display: none;
  }
  .bocnik.otvoreny { display: block; }
  .bocnik-zavri {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
    padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
    background: var(--panel); border-top: 1px solid var(--ciara);
  }
  .bocnik-zavri .tlacidlo { width: 100%; }
}

/* ══ AKCIE PRI FOTKE PRODUKTU ══════════════════════════════════════════════
   ⚠️ Polohujú sa voči OBALU, nie voči tlačidlu s fotkou — tlačidlo nemôže
   obsahovať ďalšie tlačidlá, takže akcie sú vedľa neho. Bez obalu sa
   polohovali voči stránke a vyskočili až k drobčekom. */
.foto-obal { position: relative; }
.foto-akcie {
  position: absolute; top: .6rem; right: .6rem; z-index: 3;
  display: flex; flex-direction: column; gap: .5rem;
}
.foto-akcia {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--text-2);
  border: 1px solid var(--ciara); box-shadow: var(--tien);
  font-size: 1.1rem; line-height: 1; padding: 0;
}
.foto-akcia:hover { color: var(--znacka); border-color: var(--znacka); }
.foto-akcia.zapnuty { color: #fff; background: var(--znacka); border-color: var(--znacka); }
.foto-akcia .ikona { width: 1.25rem; height: 1.25rem; }

/* ══ POISTKA PROTI VODOROVNÉMU PRETEČENIU ══════════════════════════════════
   ⚠️ Stačí jeden prvok o pár pixelov širší než okno a prehliadač nasadí na
   stránku vodorovný posuvník. Keď sa potom stránka raz posunie doprava, celý
   ľavý okraj je odrezaný — text, logo aj tlačidlá. Vyzerá to ako rozbitý web,
   pritom je to jeden zabudnutý okraj.

   ⚠️ `clip`, nie `hidden`: `overflow: hidden` na `body` zabíja `position:
   sticky` a prilepená hlavička by prestala fungovať. `clip` reže rovnako, ale
   nerobí zo `body` posúvateľný rám.

   ⚠️ Je to POISTKA, nie riešenie. Keď niečo preteká, patrí to opraviť na
   mieste; toto len zabráni tomu, aby jedna drobnosť rozbila celú stránku. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ══ NÁSTROJE V HLAVIČKE ═══════════════════════════════════════════════════ */
.nastroje { display: flex; align-items: center; gap: .35rem; }
.tema-prep { display: inline-flex; align-items: center; justify-content: center; }
.tema-prep .ikona { width: 1.15rem; height: 1.15rem; }
/* Na počítači sa tlačidlo „viac" nezobrazuje — ikonky sú vedľa seba. */
.nastroje-prep { display: none; }
@media (max-width: 700px) {
  .nastroje-prep { display: inline-flex; }
  /* ⚠️ Panel sa otvára POD hlavičkou, nie ako rozbalenie v riadku. V riadku by
     tlačil logo a vyhľadávanie a hlavička by pri každom otvorení poskočila. */
  .nastroje {
    display: none; position: absolute; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--panel); border: 1px solid var(--ciara);
    border-radius: var(--r); box-shadow: var(--tien); padding: .3rem;
    min-width: 12rem; z-index: 50;
  }
  .nastroje.otvorene { display: flex; }
  .nastroje > * {
    justify-content: flex-start; gap: .6rem; padding: .55rem .6rem;
    border: 0; background: none; width: 100%; border-radius: var(--r-s);
  }
  .nastroje > *:hover { background: var(--panel-2); }
  /* ⚠️ V paneli musí byť pri ikone aj POPIS. Sama ikona v zozname pod sebou
     nepovie nič — v riadku hlavičky ju človek odhadne z polohy, tu nie. */
  .nastroje > *::after { content: attr(aria-label); font-size: .92rem; color: var(--text); }
  .hlavicka-vnutro { position: relative; }
}

/* ══ BRZDA NA PODKATEGÓRIE ═════════════════════════════════════════════════ */
.podkat-viac { display: inline; }
.podkat-viac > summary { cursor: pointer; list-style: none; display: inline-block; }
.podkat-viac > summary::-webkit-details-marker { display: none; }
.podkat-viac[open] > summary { background: var(--panel-2); }
/* ⚠️ Zvyšok sa vysype pod pás, nie doň. Vloženie do toho istého riadku by
   pri päťdesiatich štítkoch preusporiadalo aj tých prvých dvanásť a človek by
   po rozbalení nenašiel ten, na ktorý sa práve pozeral. */
.podkat-zvysok { margin-top: .5rem; width: 100%; }

/* ══ KARTIČKA ČLÁNKU S PREKRYTÝM NADPISOM ══════════════════════════════════
   Prevzaté z `mod_webportaly_rss` (layout „magazine"). Obrázok vyplní celú
   kartičku a nadpis leží na ňom cez tmavý prechod.

   ⚠️ Text pod obrázkom by pri rôzne dlhých nadpisoch rozhádzal výšky kartičiek
   v páse — takto majú všetky rovnaký tvar bez ohľadu na dĺžku nadpisu. */
.pas-clanky { grid-auto-columns: clamp(230px, 24vw, 300px); }

/* ── ÚVODKA: DROBNEJŠIE KARTY ────────────────────────────────────────────────
   Róbert 2026-08-21: *„a ak by sa dalo zmenšiť produkty na úvodke, Heureka ich
   má viac na PC v QHD."*

   ⚠️ Len na úvodke, nie vo výpise kategórie. Úvodka je rozhľad — čím viac
   tovaru sa zmestí do radu, tým skôr človek nájde niečo svoje. Výpis je už
   výber a tam sa rozhoduje podľa fotky a ceny, takže tam by drobnejšia karta
   uberala presne to, kvôli čomu tam človek je.

   ⚠️ Menší strop, nie menšie `vw`: pri 23vw a QHD sa aj tak narazí na strop,
   lebo obal má 1600 px. Rozhoduje teda tretie číslo. 200 px dá pri 1600 px
   sedem kariet v rade namiesto piatich. */
.pas-produkty  { grid-auto-columns: clamp(155px, 14vw, 200px); }
.mriezka-uvodka { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
.pas-produkty .karta, .mriezka-uvodka .karta { padding: .6rem; gap: .35rem; }
.pas-produkty .karta .nazov, .mriezka-uvodka .karta .nazov { font-size: .84rem; }
.pas-produkty .karta .meta,  .mriezka-uvodka .karta .meta  { font-size: .74rem; }
.pas-produkty .rozpatie-body, .mriezka-uvodka .rozpatie-body { font-size: .76rem; }

/* ⚠️ Na mobile zostávajú DVE v rade tak ako doteraz. Sedem drobných kariet
   v rade je zmysel pre QHD; na 360 px by z toho boli poštové známky. */
@media (max-width: 700px) {
  .mriezka-uvodka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pas-produkty   { grid-auto-columns: clamp(150px, 44vw, 200px); }
}
@media (max-width: 700px) { .pas-clanky { grid-auto-columns: 78%; } }

.clanok-karta {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r); aspect-ratio: 4/3; background: #0b0f0f;
  color: #fff;
}
.clanok-karta img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .4s ease;
}
.clanok-karta:hover img { transform: scale(1.05); }
.clanok-karta:hover { text-decoration: none; }
/* Keď obrázok nedobehne, zostane tmavá plocha s nadpisom — čitateľná,
   nie rozbitá. */
.clanok-karta.bez-obrazka {
  background: linear-gradient(140deg, var(--znacka), #0b0f0f);
}
.clanok-prekrytie {
  position: absolute; inset: auto 0 0 0; padding: .9rem;
  display: flex; flex-direction: column; gap: .3rem;
  /* ⚠️ Prechod, nie plošné stmavenie: na svetlej fotke by biele písmo zmizlo,
     ale zatmiť celú fotku by z nej spravilo šeď. */
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 55%,
                              transparent 100%);
}
.clanok-zdroj { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255,255,255,.75); }
.clanok-nazov {
  font-weight: 600; font-size: .98rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── panel balíka v správe e-shopu ─────────────────────────────────────────
   ⚠️ Tlačidlo „tiché" je zámerne nenápadné. Zrušenie služby a downgrade nemajú
   vyzerať ako výzva; majú byť dostupné a nie lákavé. Rovnaká veľkosť ako
   ostatné (dá sa trafiť), ale bez farby, ktorá pýta kliknutie. */
.tlacidlo-tiche {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--ciara);
}
.tlacidlo-tiche:hover { color: var(--text); border-color: var(--text-2); filter: none; }

.panel-balik h3 { font-size: .95rem; margin: 1.4rem 0 .3rem; }
.panel-balik .riadok-akcie {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .8rem 0;
}
.panel-balik .oznam {
  background: var(--panel-2); border-left: 3px solid var(--znacka);
  padding: .6rem .8rem; border-radius: var(--r-s); margin: 0 0 1rem;
  font-size: .9rem;
}
.panel-balik .oznam.varovanie { border-left-color: var(--drahe); }
.panel-balik .meta.varovanie { color: var(--drahe); }

/* ── členská časť ──────────────────────────────────────────────────────────
   ⚠️ Rovnaký odstup ako na informačných stránkach. Členská časť nemá drobčeky,
   ktoré inde robia odstup od menu, takže sa nadpis lepil na navigáciu a posledná
   sekcia končila na hrane okna. Odstup preto patrí stránke, nie navigácii —
   `main` sa nechať nedá, na úvodke by odtlačil hrdinu od hlavičky. */
.clenska { padding-bottom: 3rem; }
.clenska > section { margin-bottom: 1.6rem; }
.clenska > section:last-of-type { margin-bottom: 0; }