/* ==========================================================================
   rezervacia.css – štýly len pre katalóg a rezerváciu (rezervacia.html)
   Načítava sa AŽ ZA styl.css a chat.css – poradie kaskády musí zostať.
   ========================================================================== */
/* ================= REZERVÁCIA KRMIVA ================= */
/* Katalóg je jediná stránka, kde je viac šírky naozaj na čo minúť: filtre
   majú pevný stĺpec a zvyšok je mriežka `auto-fill`, takže každých ďalších
   ~230 px je jeden produkt navyše v riadku. Ostatné stránky ostávajú na
   1180 px – tam by širší text len zhoršil čítanie. */
body.katalog{--max:1520px}

/* Pás s nadpisom nad katalógom je preč. Bral skoro celú prvú obrazovku a
   nehovoril nič, čo by zákazník po kliknutí na „Rezervovať krmivo" nevedel;
   informácia o tom, ako to funguje, sa presunula pod dlaždice druhov. */
.kat-wrap{padding:18px 20px 70px}

/* Nadpis a iné texty len pre čítačky obrazovky a vyhľadávač.
   `display:none` by ich skryl aj pred nimi – preto sa element vykresľuje,
   len je zmenšený na bod a orezaný. */
.len-pre-citacky{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- ako to funguje --- */
/* Tri kroky za sebou s číslom a čiarou medzi nimi (návrh C, majiteľ 28. 9.
   2026: https://claude.ai/artifact/6zX3sTVp99FFeKRPdepAVJ – hodnoty 1:1).
   Blok žije v paneli Katalóg na telefóne a v paneli Predajňa; na počítači
   v stránke nie je. Dovtedy boli body vedľa seba s ikonami a mal aj podobu
   v hlavičke – tú zrušila pilulka Predajňa. */
.kat-ako{
  background:var(--sklo);border:1px solid var(--sklo-ram);border-radius:var(--r);
  -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  box-shadow:var(--tien-jemny);margin:0 0 22px;padding:12px 14px;
}
.ako-nadpis{margin:0 0 11px;font-family:var(--head);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-soft);font-size:.76rem}
.ako-kroky{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ako-kroky li{position:relative;display:grid;grid-template-columns:28px 1fr;gap:10px;padding-bottom:12px}
.ako-kroky li:last-child{padding-bottom:0}
.ako-kroky li::before{content:"";position:absolute;left:13px;top:28px;bottom:2px;width:2px;background:var(--red-soft)}
.ako-kroky li:last-child::before{display:none}
.ako-kroky em{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--red-soft);color:var(--red-dk);
  font-family:var(--head);font-weight:700;display:grid;place-items:center;font-size:.86rem}
.ako-kroky b{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;
  font-size:.8rem;font-weight:600;margin-top:4px;color:var(--ink)}
/* Cez `div > span`: uzávierka je vlastný <span> vnútri <b>. */
.ako-kroky li > div > span{display:block;font-size:.76rem;color:var(--ink-2);line-height:1.45}
@media(max-width:900px){ .kat-ako{margin-bottom:18px} }

/* --- taby druhov --- */
.druh-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 22px}

/* Podkategórie. To isté sklo ako pri zvieratách, len menšie a v riadku, ktorý
   sa zalamuje – kategórií býva päť aj desať a pevná mriežka by pri piatej
   nechala poloprázdny riadok. Ikona je menšia než pri zvierati zámerne:
   zviera je prvá voľba, kategória druhá a nemá ju prekričať. */
.kat-kategorie{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 22px}
.kat-kategorie[hidden]{display:none}
.kk-dlazdica{display:flex;align-items:center;gap:9px;padding:9px 14px 9px 11px;font:inherit;
  background:var(--sklo);-webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  border:1.5px solid var(--sklo-ram);border-radius:999px;box-shadow:var(--tien-jemny);
  cursor:pointer;color:var(--ink-2);
  transition:transform .18s, box-shadow .18s, border-color .18s, background .18s, color .18s}
.kk-ikona{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;color:var(--ink-soft)}
.kk-nazov{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  font-size:.76rem}
.kk-dlazdica:hover{transform:translateY(-2px);box-shadow:var(--tien-zdvih)}
.kk-dlazdica.on{background:rgba(255,255,255,.86);border-color:#fff;color:var(--ink);
  box-shadow:var(--tien-zdvih)}
.kk-dlazdica.on .kk-ikona{color:var(--red)}
@media (max-width:640px){
  /* Na telefóne v jednom rolujúcom riadku – zalomené dlaždice zabrali pol
     obrazovky ešte pred prvým produktom. */
  .kat-kategorie{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:4px;margin-inline:-16px;padding-inline:16px}
  .kat-kategorie::-webkit-scrollbar{display:none}
  .kk-dlazdica{flex:0 0 auto}
}
.druh-tabs button{background:var(--sklo);
  -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  border:1.5px solid var(--sklo-ram);border-radius:var(--r);padding:6px 8px 13px;
  box-shadow:var(--tien-jemny);position:relative;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .18s, box-shadow .18s, border-color .18s, background .18s;font:inherit}
/* Ikona 78 px (predtým 52) pri tej istej výške dlaždice (118 px): menší horný
   okraj a medzera, nápis s riadkovaním 1,1. Ikona nesmie zasahovať do nápisu –
   záporné okraje (6. 10. 2026) ho na širokej obrazovke prekrývali. */
.druh-tabs button svg{width:min(78px,100%);height:78px;color:var(--ink-soft);transition:.18s}
.druh-tabs button use{fill:currentColor}
.druh-tabs button span{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.11em;
  font-size:.86rem;line-height:1.1;color:var(--ink-2);transition:.18s}
.druh-tabs button:hover{transform:translateY(-2px);box-shadow:var(--tien-zdvih)}
/* Vybraný druh sa nevyfarbí načerveno, ale vystúpi: nadvihne sa, zosvetlí
   a dostane hlbší tieň. Plná červená plocha bola najväčší farebný blok na
   stránke a pretĺkala aj tovar, ktorý má byť to hlavné. Že je to výber,
   nesie zdvih, jasnejšie sklo a červená ikona so spodným prúžkom –
   ktorý je zároveň jediné miesto, kde tu červená ostáva. */
.druh-tabs button.on{
  background:rgba(255,255,255,.86);border-color:#fff;
  transform:translateY(-4px) scale(1.035);
  box-shadow:0 3px 8px rgba(78,58,44,.13), 0 26px 44px -18px rgba(78,58,44,.6);
  z-index:1;
}
.druh-tabs button.on:hover{transform:translateY(-5px) scale(1.035)}
.druh-tabs button.on svg{color:var(--red)}
.druh-tabs button.on span{color:var(--ink)}
.druh-tabs button.on::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:8px;
  width:30px;height:3px;border-radius:2px;background:var(--red);
}
@media (prefers-reduced-motion:reduce){
  .druh-tabs button,.druh-tabs button.on,.druh-tabs button.on:hover{transform:none}
}
@media(max-width:560px){
  /* `1fr` je `minmax(auto,1fr)` a `auto` sa nezmenší pod najdlhšie slovo
     („HLODAVEC"). Pri 320 px je na štyri dlaždice 280 px a rezerva je pár
     pixelov – rovnaká pasca, aká je pri `.kat-grid` už okomentovaná. */
  .druh-tabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .druh-tabs button span{overflow-wrap:anywhere}
  .druh-tabs button{padding:6px 4px 13px;gap:3px}
  .druh-tabs button svg{width:min(46px,100%);height:46px}
  .druh-tabs button span{font-size:.68rem;letter-spacing:.05em}
  /* Na štyroch dlaždicách vedľa seba by zväčšenie ukrojilo zo susedov. */
  .druh-tabs button.on{transform:translateY(-3px)}
  .druh-tabs button.on:hover{transform:translateY(-3px)}
  .druh-tabs button.on::after{bottom:5px;width:22px;height:2.5px}
}

/* --- hlavička katalógu pri scrollovaní --- */
/* Hlavička drží rovnaký box ako obsah pod ňou (inde na webe je širší a bez
   obmedzenia), aby značka po odscrollovaní stála presne nad stĺpcom filtrov
   a nie nad prvým stĺpcom produktov. */
body.katalog header .wrap{max-width:var(--max);padding-inline:20px}

/* Po odscrollovaní ostáva v lište len značka. Login, telefón aj blok
   „Ako to funguje?" odídu – majú pôsobiť, akoby lepivé neboli. Trieda
   `preslo` prichádza až po celej výške hlavičky, nie po ôsmich pixeloch:
   inak by zmizli hneď na prvý pohyb kolieskom, ešte kým sú vidieť hore.
   Účet zostáva dostupný z výzvy nad filtrami a z rezervačného formulára. */
body.katalog header .nav-vpravo{
  transition:opacity .22s ease, visibility .22s;
}
body.katalog header.preslo .nav-vpravo{
  opacity:0;visibility:hidden;pointer-events:none;
}

/* Značka sa stiahne presne na šírku stĺpca s filtrami. Bez toho by bublina
   siahala nad prvý stĺpec produktov a pri rolovaní by po ňom prechádzala.

   Prechod musí byť menovaný na všetkých vlastnostiach, ktoré sa hýbu – styl.css
   prechádza len plochu, rám, tieň a odsadenie, takže šírka aj veľkosť písma
   predtým preskočili naraz a stiahnutie pôsobilo ako strih. 420 ms s miernym
   dobehom je akurát: kratšie sa nestihne prečítať ako pohyb, dlhšie sa vlečie. */
body.katalog header .logo,
body.katalog header .logo img,
body.katalog header .logo-txt i,
body.katalog header .logo-txt b{
  transition:width .42s cubic-bezier(.22,.61,.36,1),
             padding .42s cubic-bezier(.22,.61,.36,1),
             gap .42s cubic-bezier(.22,.61,.36,1),
             font-size .42s cubic-bezier(.22,.61,.36,1),
             margin .42s cubic-bezier(.22,.61,.36,1),
             background .32s, border-color .32s, box-shadow .32s;
}
/* Šírku treba mať v pixeloch na oboch koncoch. Kým bola hore `auto`, bublina
   sa pri stiahnutí zúžila okamžite (z `auto` sa animovať nedá), ale písmo sa
   zmenšovalo ďalších 420 ms – podnadpis sa medzitým zalomil na dva riadky
   a na konci skočil späť. Pri roztiahnutí sa box hneď rozšíril, takže sa
   nemalo čo lámať a chyba bola vidieť len jedným smerom.

   297 px je prirodzená šírka nápisu; keby sa text značky menil, treba ju
   premerať znova. `nowrap` je poistka: aj keby sa netrafila, text sa radšej
   nezmestí než zalomí. */
/* Logo má šírku filtra a pri rolovaní sa už nezmenšuje – len ostane
   pripnuté nad filtrom (majiteľ 28. 9. 2026). */
@media(min-width:901px){
  body.katalog header .logo{width:var(--filter-sirka)}
}
body.katalog header .logo-txt i,
body.katalog header .logo-txt b{white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  body.katalog header .logo,
  body.katalog header .logo img,
  body.katalog header .logo-txt i,
  body.katalog header .logo-txt b{transition:none}
}
@media(max-width:900px){
  /* Pod 900 px nie sú filtre stĺpcom, ale zásuvkou – niet na čo sa sťahovať
     a užšia lišta by len ukrojila zo značky. */
  body.katalog header.preslo .logo{width:auto;padding:6px 18px 6px 8px;gap:9px}
  body.katalog header.preslo .logo img{width:38px}
  body.katalog header.preslo .logo-txt b{font-size:1.2rem}
  /* Login a telefón sú na telefóne jediná cesta k účtu a k číslu. */
  body.katalog header.preslo .nav-vpravo{opacity:1;visibility:visible;pointer-events:auto}
}

/* --- rozloženie --- */
/* Filter 300 px (majiteľ 23. 9. 2026): pri 250 px sa karta maznáka lámala
   na tri riadky. Medzera k výpisu je zato menšia, nech výpis nestratí veľa. */
:root{--filter-sirka:300px}
.kat-layout{display:grid;grid-template-columns:var(--filter-sirka) 1fr;gap:22px;align-items:start}
@media(max-width:900px){.kat-layout{grid-template-columns:1fr;gap:0}}

/* --- filtre --- */
/* Hlavička sa lepí pod oznamovací pás (`--oznam-h` jej podáva spolocne.js),
   takže filtre sa nesmú lepiť na pevných 88 px – s pásom zostali vyššie a
   logo hlavičky, ktorá nemá vlastnú plochu, im pretínalo horný okraj. */
.filters{position:sticky;top:calc(88px + var(--oznam-h,0px));
  background:var(--sklo);-webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  border:1.5px solid var(--sklo-ram);box-shadow:var(--sklo-tien);border-radius:var(--r);padding:20px;max-height:calc(100vh - 108px - var(--oznam-h,0px));overflow-y:auto;overscroll-behavior:contain}
.filters-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
/* Posuvník filtra nesmie ísť do zaoblených rohov – tie ho odsekávali
   (majiteľ 28. 9. 2026). Dráha začína a končí o polomer rohu ďalej.
   `scrollbar-width/color: auto` vracia v Chrome slovo `::-webkit-scrollbar`
   pravidlám – kým platí globálne `thin`, Chrome ich ignoruje. Vzhľad
   posúvača je ten istý ako všade na webe (styl.css). */
.filters{scrollbar-width:auto;scrollbar-color:auto}
.filters::-webkit-scrollbar{width:12px}
.filters::-webkit-scrollbar-track{background:transparent;margin-block:var(--r)}
.filters::-webkit-scrollbar-thumb{background:var(--ink-soft);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
.filters::-webkit-scrollbar-thumb:hover{background:var(--ink-2);background-clip:padding-box}
.filters h2{font-size:1rem;margin:0;letter-spacing:.12em}
.lnk{background:none;border:0;padding:0;font:inherit;font-size:.82rem;color:var(--red);cursor:pointer;text-decoration:underline}
.fgroup{border-top:1px solid var(--line);padding:14px 0 4px}
.fgroup:first-child{border-top:0;padding-top:0}
.fgroup h3{font-family:var(--head);font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);margin:0 0 9px}
/* Riadky filtra sú v jednom tvare nižšie (`.fstr`) – `.fopt` už netreba. */
.fmore,.fzrus{background:none;border:0;padding:4px 0;font:inherit;font-size:.82rem;color:var(--red);cursor:pointer;text-decoration:underline}
/* Hľadanie v dlhej skupine (značky) na počítači – ten istý recept ako pole
   hľadania nad mriežkou (`.searchbox input`). Do 25. 9. 2026 malo vzhľad len
   na telefóne a na počítači ostalo systémové: 19. 9. sa začalo ukazovať vždy,
   nie až po rozbalení, a štýl pre počítač nikto nedopísal. */
.fhladaj{display:block;width:100%;box-sizing:border-box;margin:0 0 8px;padding:9px 12px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--v-okne);color:var(--ink);
  font:inherit;font-size:.88rem;-webkit-appearance:none;appearance:none}
.fhladaj:focus{outline:0;border-color:var(--red)}
.fhladaj::placeholder{color:var(--ink-soft)}
.fhladaj::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* Hľadanie v skupine skryje nesediace riadky aj na počítači (12. 10. 2026: pravidlo bolo len v mobilnom
   bloku, takže „vet“ nechal všetkých 18 značiek a Vet Life sa stratil medzi nimi). */
.fstr-z[data-skryte]{display:none}
/* Riadok filtra. Jeden tvar pre celý panel: názov vľavo, počet, ovládač
   vpravo. Ovládač je buď trojpolohový posuvník (neobsahuje – nerozhoduje –
   obsahuje), alebo zaškrtávatko – vyzerajú ako jedna rodina, lebo filter je
   jedna vec, nie dva zlepené. */
/* Skupiny pod spoločným nadpisom stoja v jednom rámčeku – vo veľkom okne
   inak Hydina a Červené mäso vyzerali ako dve nesúvisiace veci vedľa
   Dostupnosti, hoci je to jedna otázka rozdelená na riadky. */
.fnad-blok{margin:14px 0 4px}
.fnadskupina{font-family:var(--head);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
.fnad-blok .fgroup{border-top:1px solid var(--line)}
.fnad-blok > .fgroup:first-of-type{border-top:0}
/* Nadpis skupiny nesie aj prepínač na celú skupinu – samostatný riadok
   „Celá skupina" bol ten istý nadpis povedaný druhýkrát. */
.fgroup-st h3{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fgroup-st h3 .fsl{margin-left:auto}
.fstr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;
  padding:4px 0;min-width:0}
.fstr[hidden]{display:none}
.fstr-z{cursor:pointer}
.fstr-n{font-size:.9rem;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;transition:color .18s}
.fstr .cnt{font-size:.76rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;
  min-width:2.2em;text-align:right}
.fstr.je-ano .fstr-n,.fstr-z:has(.fbox-in:checked) .fstr-n{color:var(--red);font-weight:600}
.fstr.je-nie .fstr-n{color:var(--ink-soft);text-decoration:line-through}

/* Celá skupina naraz – oddelené linkou, aby bolo vidieť, že to nie je ďalšia
   surovina, ale nadradená voľba. */

/* ---- sklo ----
   Spoločný podklad posuvníka aj zaškrtávatka: presvetlené sklo s vnútorným
   leskom po hornej hrane a jemným tieňom pod ním. `saturate` je to, čo robí
   sklo sklom – bez neho je to len sivý obdĺžnik s rozmazaním. */
.fsl,.fbox{
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.16));
  -webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(28,27,26,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
             inset 0 -1px 0 rgba(28,27,26,.06),
             0 1px 3px rgba(28,27,26,.10);
}

/* ---- trojpolohový posuvník ---- */
.fsl{position:relative;display:grid;grid-template-columns:repeat(3,26px);height:28px;
  flex-shrink:0;border-radius:999px}
/* Dráha pod guľôčkou musí byť tmavšia než panel, inak to vyzerá ako tri
   samostatné tlačidlá a nie ako jeden prepínač s tromi polohami. */
.fsl::before{content:'';position:absolute;inset:0;border-radius:inherit;
  background:rgba(28,27,26,.08);pointer-events:none}
.fsl-drazka{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.fsl-gulka{position:absolute;top:2px;left:2px;width:24px;height:calc(100% - 4px);
  border-radius:999px;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.86));
  border:1px solid rgba(28,27,26,.08);
  box-shadow:0 1px 3px rgba(28,27,26,.20), inset 0 1px 0 rgba(255,255,255,.95);
  transform:translateX(26px);
  /* Pružina, nie lineárny posun – guľôčka na konci mierne dobehne, čo je to,
     čo dáva pohybu „kvapalný" dojem. */
  transition:transform .34s cubic-bezier(.34,1.56,.5,1),
             background .22s, border-color .22s, box-shadow .22s}
/* Lesk, ktorý po guľôčke prebehne pri presune. Je to jedna vrstva navyše,
   nie knižnica – kvapalnosť robí načasovanie, nie počet efektov. */
.fsl-gulka::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  opacity:0;transition:opacity .3s}
.fsl:active .fsl-gulka::after{opacity:1}
.fsl[data-stav="0"] .fsl-gulka{transform:translateX(0)}
.fsl[data-stav="1"] .fsl-gulka{transform:translateX(26px)}
.fsl[data-stav="2"] .fsl-gulka{transform:translateX(52px)}
.fsl.je-ano .fsl-gulka{background:linear-gradient(180deg,#ee3d3b,var(--red));
  border-color:var(--red);box-shadow:0 1px 4px rgba(225,33,31,.35), inset 0 1px 0 rgba(255,255,255,.35)}
.fsl.je-nie .fsl-gulka{background:linear-gradient(180deg,#8a8681,var(--ink-soft));
  border-color:var(--ink-soft);box-shadow:0 1px 4px rgba(28,27,26,.22), inset 0 1px 0 rgba(255,255,255,.3)}
.fsl-b{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  padding:0;border:0;background:none;cursor:pointer;color:var(--ink-soft);
  -webkit-tap-highlight-color:transparent;transition:color .18s, transform .18s}
.fsl-b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.fsl-b:hover{color:var(--ink)}
.fsl-b:active{transform:scale(.88)}
/* Aktívna poloha je na guľôčke – tam musí byť ikona čitateľná na farbe. */
.fsl.je-ano .fsl-ano,.fsl.je-nie .fsl-nie{color:#fff}
.fsl:not(.je-ano):not(.je-nie) .fsl-nic{color:var(--ink-2)}

/* ---- zaškrtávatko ----
   Pôvodné je skryté, nie zrušené: drží klávesnicu, čítačku obrazovky
   aj obsluhu `change`. Nakreslené je `.fbox`. */
.fbox-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fbox{position:relative;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex-shrink:0;border-radius:9px;
  /* Rám musí byť vidieť aj na bielom podklade veľkého okna – presvetlené
     sklo tam splývalo a riadok vyzeral, že sa nedá zaškrtnúť. */
  border-color:rgba(28,27,26,.30);
  transition:background .22s, border-color .22s, box-shadow .22s, transform .18s}
.fbox::before{content:'';position:absolute;inset:0;border-radius:inherit;
  background:rgba(28,27,26,.028);transition:opacity .22s}
.fbox-in:checked ~ .fbox::before{opacity:0}
.fbox svg{position:relative;z-index:1}
.fbox svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  /* Fajka sa nakreslí – dĺžka čiary je 22, takže sa ňou dá „písať". */
  stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .26s ease-out .04s}
.fstr-z:hover .fbox{border-color:rgba(225,33,31,.5)}
.fbox-in:focus-visible ~ .fbox{outline:2px solid var(--red);outline-offset:2px}
.fbox-in:checked ~ .fbox{background:linear-gradient(180deg,#ee3d3b,var(--red));
  border-color:var(--red);
  box-shadow:0 1px 4px rgba(225,33,31,.35), inset 0 1px 0 rgba(255,255,255,.35)}
.fbox-in:checked ~ .fbox svg{stroke-dashoffset:0}
.fstr-z:active .fbox{transform:scale(.92)}

.fst-poznamka{margin:10px 0 0;font-size:.74rem;line-height:1.4;color:var(--ink-soft)}

/* Na dotyk sú 28 px ciele tesné – na mobile sa ovládače zväčšia. */
@media (max-width:640px){
  .fsl{grid-template-columns:repeat(3,34px);height:34px}
  .fsl-gulka{width:30px;transform:translateX(34px)}
  .fsl[data-stav="0"] .fsl-gulka{transform:translateX(0)}
  .fsl[data-stav="1"] .fsl-gulka{transform:translateX(34px)}
  .fsl[data-stav="2"] .fsl-gulka{transform:translateX(68px)}
  .fsl-b svg{width:17px;height:17px}
  .fbox{width:34px;height:34px;border-radius:11px}
  .fbox svg{width:19px;height:19px}
  .fstr{padding:6px 0}
}

/* Kto má v systéme vypnuté animácie, nemá dôvod pozerať na pružiny. */
@media (prefers-reduced-motion:reduce){
  .fsl-gulka,.fbox,.fbox svg,.fsl-b{transition-duration:.01ms}
}

/* Na väčšej obrazovke je panel súčasťou stránky – krížik tam nedáva zmysel,
   výsledky sú vidieť vedľa. */
.fx{display:none}

@media(max-width:900px){
  /* Panel na mobile je celá obrazovka: hlavička s krížikom a pod ňou
     rolovateľný zoznam filtrov. Pätka s červeným „Zobraziť 1 234 krmív" tu
     bola do 22. 9. 2026 — filter sa prepočíta pri každom kliknutí sám,
     tlačidlo panel len zatváralo a zaberalo spodok obrazovky. */
  /* `max-height` z desktopového pravidla tu treba zrušiť – inak panel končí
     108 px nad spodkom obrazovky a pod ním presvitá katalóg. */
  .filters{position:fixed;inset:0;z-index:200;border:0;border-radius:0;
    padding:0;background:var(--panel);display:none;flex-direction:column;
    max-height:none;height:100%;overflow:hidden}
  .filters.open{display:flex}
  .filters-head{position:static;flex:0 0 auto;align-items:center;gap:12px;
    padding:14px 18px;margin:0;border-bottom:1.5px solid var(--line)}
  .filters-head h2{margin-right:auto}
  .fx{display:block;background:none;border:0;font-size:1.9rem;line-height:1;
    padding:0 4px;color:var(--ink-soft);cursor:pointer}
  /* Spodný okraj ráta s výrezom obrazovky na iPhone — kým tu bola pätka,
     riešila ho ona. */
  #filterBody{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
    padding:16px 18px calc(20px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling:touch}
  /* Kým je panel otvorený, katalóg pod ním nesmie rolovať. A lišta so
     súhlasom cookies (z-index 9999) by prekryla spodok zoznamu filtrov –
     kým je panel otvorený, je preč. */
  body.filtre-otvorene{overflow:hidden}
  body.filtre-otvorene .cookiebar{display:none}
}
.fbtn{display:none}
@media(max-width:900px){.fbtn{display:inline-flex}}

/* --- horná lišta --- */
.kat-top{display:flex;gap:12px;margin-bottom:15px;flex-wrap:wrap}
.searchbox{position:relative;flex:1 1 240px;display:flex;align-items:center}
.searchbox svg{position:absolute;left:13px;color:var(--ink-soft)}
.searchbox input{width:100%;padding:12px 14px 12px 40px;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;font-size:.95rem;background:var(--v-okne)}
.searchbox input:focus{outline:0;border-color:var(--red)}
/* Tvar výberu je spoločný pre celý web (`.vyber` v styl.css) – tu len
   nech nezaberá viac, než treba. */
.kat-top .vyber{flex:0 0 auto}
.kat-count{font-size:.88rem;color:var(--ink-soft);margin:0 0 14px}

/* --- mriežka --- */
.kat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:13px}
/* Karta je presne tá istá sklenená dlaždica ako v páse na úvodnej stránke
   (`.hk-riadok` v hero.css): šikmý prechod priehľadnej bielej, svetlý pruh po
   hornej hrane a teplý tieň. Plocha je zámerne redšia než `--sklo` – cez
   kartu má byť vidieť stenu za ňou.

   Redšia výplň nie je len estetika. Fotky od dodávateľa nie sú na čisto
   bielej, ale na krémovej; kým bola karta biela na 62 %, bola svetlejšia než
   to pozadie a po násobení z neho zostal viditeľný obdĺžnik. Cez redšiu
   plochu presvitá teplé pozadie stránky, ktoré je tmavšie než pozadie fotky,
   takže sa stratí – rovnako ako na titulke.

   `backdrop-filter` tu nie je zámerne: pozadie katalógu je hladký prechod,
   takže rozostrovať nemá čo a stálo by to výkon pri každom posune. */
.pcard{position:relative;border-radius:var(--r-lg,16px);padding:13px;display:flex;
  background:linear-gradient(158deg,
    rgba(255,255,255,.60) 0%, rgba(255,255,255,.32) 54%, rgba(255,255,255,.46) 100%);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--sklo-tien);
  flex-direction:column;top:0;transition:top .18s,box-shadow .18s,border-color .18s}
/* Zdvih ide cez `top`, nie cez `transform`. Transform vytvorí novú vrstvu
   a násobenie fotky (`.pthumb`) sa v nej izoluje – prestane sa miešať
   s pozadím stránky a za obrázkom sa objaví biely štvorec, presne ten, čo
   sme odstraňovali. Karta má `position:relative`, takže posun cez `top`
   vyzerá rovnako a susedmi nehýbe. */
.pcard:hover{top:-3px;
  border-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), var(--tien-zdvih)}
/* Fotky od dodávateľa majú každá iný rozmer aj pomer strán. Miniatúra preto
   nedostáva „max-width", ale pevný štvorec, do ktorého sa fotka vždy celá
   vpíše (object-fit:contain) – malé sa zväčšia, veľké zmenšia a mriežka
   prestane poskakovať.

   POZOR na spôsob, akým je fotka umiestnená. Pôvodne to bolo
   `display:grid` + `width:100%;height:100%` na obrázku. V Chrome to fungovalo,
   ale Safari v takom prípade nepovažuje výšku bunky za určenú, `height:100%`
   mu vyjde ako `auto`, obrázok si nechá svoju skutočnú výšku a `overflow:hidden`
   mu odreže spodok – pri vreci granúl bolo vidieť hornú polovicu.

   Preto je fotka umiestnená absolútne a rozmer má `width:100%;height:100%`.
   U absolútne umiestneného prvku sa percentá počítajú z obklopujúceho bloku,
   ktorý je po rozložení určený vždy – aj v Safari. Odsadenie od okraja robí
   `padding` na samotnom obrázku (box-sizing je border-box, takže
   `object-fit:contain` sa vpisuje do vnútra). */
.pthumb{position:relative;aspect-ratio:1/1;display:grid;place-items:center;background:var(--red-soft);
  border-radius:10px;margin-bottom:9px;overflow:hidden}
.pthumb svg{width:64px;height:82px;color:var(--red);opacity:.55}
/* Fotky od dodávateľa sú na bielom, nie vystrihnuté. Násobenie bielu na
   svetlom podklade zhasne a zostane len produkt – preto pod fotkou nie je
   žiadny biely štvorec. Ten istý trik má pás na úvodnej stránke (hero.css).
   Drží to len na svetlej ploche; na tmavej by fotka zčernela. */
.pthumb.has-img{background:none;border:0;mix-blend-mode:multiply}
/* Fotka od výrobcu má pozadie už vystrihnuté, takže násobiť ju netreba –
   naopak, na svetlej karte by ju zbytočne stmavilo. */
.pthumb.vystrihnuta{mix-blend-mode:normal}
.pthumb.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:6px;display:block}
.pthumb use{fill:currentColor}
.pbrand{font-family:var(--head);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red);margin-bottom:5px}
/* Názvy krmív bývajú dlhé („Animonda CARNY cat Adult hovädzie, morka a králik
   bal. 6 x 200 g konzerva") a v úzkom stĺpci sa lámu na päť riadkov. Karta
   vedľa je potom poloprázdna a mriežka vyzerá rozhádzane. Názov preto dostane
   najviac tri riadky a zároveň si tri riadky vždy rezervuje – všetko pod ním
   (balenie, dostupnosť, cena, tlačidlo) tak sedí vo všetkých kartách rovnako.
   Celý názov zákazník vidí v detaile, na ktorý sa karta aj tak celá klikne. */
/* Meno, popis a dostupnosť mali rezervovanú pevnú výšku (tri a dva riadky),
   aby sa ceny v mriežke zarovnali. Nebolo to potrebné: karty v jednom riadku
   mriežky sú rovnako vysoké tak či tak a pätka je pritlačená nadol cez
   `margin-top:auto`. Pevné výšky teda len naťahovali karty o riadky, ktoré
   nič nenesú. */
.pname-a{color:inherit;text-decoration:none}
.pname{font-size:.92rem;line-height:1.38;color:var(--ink);margin:0 0 7px;font-weight:500;
  font-family:'Inter',system-ui,sans-serif;text-transform:none;letter-spacing:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;
  overflow:hidden;overflow-wrap:anywhere}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pprice{font-family:var(--head);font-size:1.28rem;font-weight:700;color:var(--ink)}
/* Cena a cena za kilo pod sebou. Za kilo je to jediný údaj, ktorým sa dá
   porovnať 3 kg balenie s 15 kg – patrí hneď k cene, nie medzi parametre. */
.pcena{display:flex;flex-direction:column;line-height:1.15}
.pkg{font-size:.72rem;font-weight:600;color:var(--ink-soft);margin-top:3px;white-space:nowrap}
/* Dostupnosť má dve slová aj celú vetu („Ďalší pracovný deň na predajni“),
   takže si tiež rezervuje dva riadky – inak by cena v susedných kartách
   skákala hore-dole. Bodka nesmie zmenšiť, keď sa text zalomí. */
/* Dostupnosť je pritlačená nadol, hneď nad riadok s cenou – `margin-top:auto`
   zoberie všetko voľné miesto nad ňu. Kým bola hneď pod názvom, skákala podľa
   toho, aký dlhý názov krmivo malo, a v mriežke to pôsobilo rozhádzane.
   Predtým to riešila pevná výška názvu, tá však naťahovala každú kartu
   o riadky, ktoré nič nenesú. */
.pavail{margin-top:auto;display:flex;align-items:flex-start;gap:6px;font-size:.76rem;font-weight:600;
  margin-bottom:8px;line-height:1.35}
.pavail::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;
  flex:0 0 8px;margin-top:.35em}
.av-tu{color:var(--ok)}
.av-zajtra{color:#c47f00}
.av-dotaz{color:var(--ink-soft)}
/* Vyradený tovar. Stránka produktu ostáva — adresu pozná Google aj záložky —,
   len namiesto dostupnosti nesie poznámku. Je zámerne tlmená, nie červená:
   nie je to chyba ani varovanie, len fakt o tovare. */
.pd-vyradene{color:var(--ink-soft)}
.pd-vyradene::before{background:var(--ink-soft);opacity:.5}
/* ---------- hodnotenie na karte ----------
   Dve dlaždice pod fotkou: kvalita zloženia a cena za tú kvalitu. Do rohov
   karty sa nezmestili – vpravo hore je porovnanie a pod ním obľúbené, vľavo
   hore štítok. Tu nič neprekrývajú a nezakrývajú ani produkt.

   Farba je teplá sivá v troch stupňoch, nie semafor: červená je na webe
   farba akcie a zeleno-červená škála by zo slabšieho krmiva urobila chybu.
   Pás pod číslom nesie tú istú informáciu tvarom – kto číslam neverí,
   prečíta si dĺžku. */
.pznamky{display:flex;gap:7px;margin:0 0 9px}
.pzn{flex:1 1 0;min-width:0;padding:7px 9px 8px;border-radius:9px;position:relative;
  background:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.72) 100%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(78,58,44,.06),
             0 6px 12px -10px rgba(78,58,44,.5)}
/* Zalomenie bez medznej hodnoty. Na telefóne má dlaždica vnútri 46 px, ale
   číslo so slovom „kvalita" potrebuje 70 — slovo preto vytieklo von z bielej
   plochy a na susednú dlaždicu. `flex-wrap` ho spustí pod číslo presne vtedy,
   keď sa nezmestí, takže na širokej karte ostáva riadok nedotknutý a žiadny
   @media sa nemusí trafiť do šírky mriežky. */
.pzn-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px;row-gap:2px;margin-bottom:5px}
.pzn-h b{font-family:var(--head);font-size:1rem;font-weight:700;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.pzn-h i{font-style:normal;font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600}
.pzn-pas{display:block;height:4px;border-radius:999px;background:rgba(120,105,95,.14);
  overflow:hidden;box-shadow:inset 0 1px 1px rgba(78,58,44,.18)}
.pzn-pas i{display:block;height:100%;border-radius:999px}
/* Vysvetlivka rovnako ako pri prepínači porovnania – `data-tip` a CSS, nie
   natívny `title`, ktorý sa objaví až po sekunde. Bublina ide zľava, aby
   dlaždica „kvalita" neprečnievala mimo mriežku. */
.pzn::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:-1px;z-index:6;
  width:250px;max-width:78vw;padding:9px 12px;border-radius:11px;
  background:var(--panel);border:1px solid var(--sklo-ram);
  box-shadow:0 2px 6px rgba(78,58,44,.14), 0 18px 34px -16px rgba(78,58,44,.75);
  font-family:var(--text);font-weight:500;font-size:.76rem;line-height:1.5;
  letter-spacing:0;text-transform:none;text-align:left;color:var(--ink-2);
  white-space:normal;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.pzn:last-child::after{left:auto;right:-1px}
.pzn:hover::after{opacity:1;visibility:visible;transform:none}
@media(hover:none){.pzn::after{display:none}}

/* Hlavné tlačidlo obchodu. `min-height` je tu zámerne a nie je kozmetika:
   na mobile ho odsadenie stláčalo na 32 px, čo je pod každým odporúčaním
   (Apple 44, WCAG 2.5.5 AAA 44, Material 48 dp) – a to práve tam, kde sa
   mieri palcom. Výška sa preto drží zdola, nie z odsadenia. */
.pbtn{background:var(--cta);color:#fff;border:0;border-radius:9px;padding:10px 14px;font-family:var(--head);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.76rem;cursor:pointer;transition:.16s;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--cta-lesk), var(--cta-tien)}
.pbtn:hover{background:var(--cta);filter:brightness(1.06);transform:translateY(-2px);
  box-shadow:var(--cta-lesk-h), var(--cta-tien-hover)}
.pbtn.in{background:var(--ok)}
/* Stránkovanie pod mriežkou. Čísla vľavo, počet na stranu vpravo – na úzkom
   okne pod sebou, lebo osem čísel a výber sa vedľa seba nezmestia. */
/* Riadok nad mriežkou: počet vľavo, strany na stred. */
/* Rovnaká medzera nad číslami aj pod nimi. Vlastný horný okraj by sa
   pripočítal k tomu, čo má panel hľadania (`.kat-top`) – preto je zhora nula
   a medzeru drží ten panel. Pätnásť na oboch stranách. */
.kat-hlava{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:14px;margin:0 0 15px}
.kat-hlava .kat-count{margin:0}
.kat-hlava .str-cisla{justify-content:center}

/* Trojstĺpcová mriežka aj dole, nech sú čísla presne pod tými hore. */
.kat-strany{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:14px;margin-top:26px}
/* Užšie: je to pomocná vec vedľa čísel, nie hlavná akcia stránky. */
.kat-strany .str-viac{grid-column:1;justify-self:start;padding:8px 12px;
  font-size:.82rem;white-space:nowrap}
.kat-strany .str-viac[hidden]{display:none}
.kat-strany .str-cisla{grid-column:2;justify-content:center}
.kat-strany .str-kolko{grid-column:3;justify-self:end}
.kat-strany[hidden]{display:none}
.str-cisla{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.str-c,.str-sip{min-width:44px;height:44px;padding:0 10px;border:1.5px solid var(--line);
  background:var(--bg);color:var(--ink-2);border-radius:10px;font:inherit;
  font-size:.92rem;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.str-c:hover,.str-sip:hover:not([disabled]){border-color:var(--red);color:var(--red)}
.str-c.je{background:var(--red);border-color:var(--red);color:#fff;font-weight:600;cursor:default}
.str-sip[disabled]{opacity:.35;cursor:default}
.str-vypustka{padding:0 4px;color:var(--ink-soft)}
.str-kolko{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--ink-soft)}
@media(max-width:560px){
  /* Na mobile sa tri stĺpce nezmestia – všetko pod seba a na stred. */
  .kat-hlava,.kat-strany{grid-template-columns:1fr;justify-items:center;gap:10px}
  .kat-strany .str-cisla,.kat-strany .str-kolko,
  .kat-strany .str-viac{grid-column:1;justify-self:center}
  .kat-hlava .kat-count{text-align:center}
  .str-c,.str-sip{min-width:34px;height:34px;padding:0 8px;font-size:.86rem}
}
.kat-note{font-size:.8rem;color:var(--ink-soft);margin-top:26px;line-height:1.6}
.kat-empty{padding:50px 20px;text-align:center;color:var(--ink-soft);grid-column:1/-1}
.kat-empty .maskot{margin:0 auto 14px}
.kat-empty p{margin:0}
.ci-prazdne .maskot{margin:0 auto 10px}
/* Na počítači bez maskota (majiteľ 28. 9. 2026) – košík sa tam ukáže, až
   keď v ňom niečo je, a obrázok len naťahoval okno. */
@media(min-width:901px){ #cartList li.ci-prazdne .maskot{display:none} }
/* Potvrdenie rezervácie: maskot od radosti poskočí, vedľa bublina. */
.hotovo-maskot{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 12px}
.hotovo-maskot .maskot{margin:0}

/* POZOR NA PORADIE: tento blok musí ostať POD definíciami .pcard, .pname
   a spol. Kým bol nad nimi, neplatilo z neho takmer nič – pri rovnakej
   špecifickosti vyhráva pravidlo, ktoré je v súbore neskôr, takže mobil
   dostával desktopové veľkosti písma aj odsadenia. */
@media(max-width:600px){
  /* `minmax(0, 1fr)`, nie `1fr`. Predvolené `1fr` znamená `minmax(auto, 1fr)`
     a to nepustí stĺpec užšie, než je najširšie nedeliteľné slovo v ňom –
     stačí jeden dlhý názov kdekoľvek v stĺpci a celý stĺpec sa roztiahne na
     úkor druhého. Preto boli karty vpravo užšie než vľavo. */
  .kat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pcard{padding:11px}
  .pthumb{margin-bottom:9px}
  .pthumb svg{width:46px;height:58px}
  .pname{font-size:.82rem}
  .pavail{font-size:.72rem}
  /* V dvoch stĺpcoch je miesta málo – názov tam stačí na dva riadky. */
  .pname{-webkit-line-clamp:2;line-clamp:2;min-height:calc(2 * 1.38em)}
  .pprice{font-size:1.06rem}
  .pkg{font-size:.66rem}
  .pfoot{gap:6px}
  /* Písmo sa v dvoch stĺpcoch zmenšiť môže, výška nie – tá zostáva na 44 px
     z `min-height`, inak by sa hlavné tlačidlo obchodu opäť scvrklo. */
  .pbtn{padding:8px 10px;font-size:.68rem;width:100%}
}

/* Kým je vidieť lišta porovnania, plávajúci rad ide nad ňu. Lišta má
   z-index 120 proti 75 chatového tlačidla, takže ho inak prekryje aj
   s jeho dotykovou plochou; `padding-right` v lište rezervuje miesto len
   pre jej obsah, nie pre jej plochu. */
body.porovnanie-vidno{--fab-spodok:calc(96px + env(safe-area-inset-bottom, 0px))}

/* --- modal --- */
.modal{position:fixed;inset:0;z-index:300;background:rgba(20,20,20,.55);display:grid;place-items:center;padding:18px;overflow-y:auto}
.modal[hidden]{display:none}
.modal-box{background:var(--panel);border-radius:var(--r-lg);padding:30px;max-width:560px;width:100%;position:relative;
  max-height:92vh;overflow-y:auto}
.modal-x{position:absolute;right:14px;top:10px;background:none;border:0;font-size:1.9rem;line-height:1;
  color:var(--ink-soft);cursor:pointer;z-index:3}
.modal-box h2{font-size:1.5rem;margin:0 0 16px}
.cart-list{list-style:none;padding:0;margin:0 0 12px;max-height:210px;overflow-y:auto}
.cart-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.88rem}
/* Miniatúra pri položke: zákazník na prvý pohľad vidí, čo si vlastne odkladá,
   a nemusí lúštiť dlhé názvy krmív. Ak produkt fotku nemá, ide sem tá istá
   zástupná ikona podľa druhu zvieraťa ako v katalógu a v detaile. */
.cart-list .ci-img{width:40px;height:40px;flex-shrink:0;border-radius:9px;
  border:1px solid var(--line);background:var(--red-soft);display:grid;place-items:center;overflow:hidden}
.cart-list .ci-img.has-img{background:#fff}
.cart-list .ci-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.cart-list .ci-img svg{width:22px;height:28px;color:var(--red);opacity:.55}
.cart-list .ci-img use{fill:currentColor}
.cart-list .ci-n{flex:1;min-width:0;line-height:1.35;overflow-wrap:anywhere}
/* Fotka a názov otvoria detail krmiva nad košíkom. */
.cart-list .ci-img[data-ci-det]{cursor:pointer}
.ci-det{all:unset;cursor:pointer;overflow-wrap:anywhere}
.ci-det:hover{color:var(--red-dk);text-decoration:underline;text-underline-offset:2px}
.ci-det:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
#pmodal.nad-kosikom{z-index:310}
.cart-list .ci-q{display:flex;align-items:center;gap:6px}
.cart-list .ci-q button{width:26px;height:26px;border:1.5px solid var(--line);background:#fff;border-radius:6px;
  cursor:pointer;font:inherit;line-height:1}
.cart-list .ci-x{background:none;border:0;color:var(--ink-soft);cursor:pointer;font-size:1.2rem;line-height:1}
.cart-sum{text-align:right;font-size:.95rem;margin:0 0 18px}
.pole-pozn{display:block;margin-top:5px;font-size:.76rem;color:var(--ink-soft)}
.modal-note{font-size:.78rem;color:var(--ink-soft);margin-top:14px;line-height:1.6}
/* Poznámka namiesto políčka so súhlasom – tesne nad Odoslať rezerváciu. */
.rez-pravne{font-size:.78rem;color:var(--ink-soft);line-height:1.55;margin:4px 0 12px}
.rez-pravne a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

/* --- odoslanie rezervácie: formulár → letiaca obálka → potvrdenie --- */
#mForm[hidden],#odlet[hidden],#hotovo[hidden],.hotovo-cislo[hidden]{display:none}

/* Celý prechod trvá 2 s a delí sa na tri fázy:
   0–280 ms formulár zmizne · 280–1780 ms letí obálka · od 1780 ms potvrdenie.
   Obálka dostala najviac času zámerne – je to jediný moment, keď zákazník vidí,
   že sa naozaj niečo odosiela. Klik kdekoľvek fázy preskočí (obsluha v skripte). */

/* 1. obsah sa jemne zmenší a stratí */
#mForm.mizne{animation:mizne .28s ease-in forwards;pointer-events:none}
@keyframes mizne{to{opacity:0;transform:scale(.965)}}

/* 2. obálka odletí po oblúku hore-doprava */
.odlet{position:relative;min-height:230px;cursor:pointer}
.odlet-obalka{position:absolute;left:50%;top:52%;width:64px;height:44px;
  transform:translate(-50%,-50%);transform-origin:50% 50%;
  filter:drop-shadow(0 8px 16px rgba(20,16,15,.22));
  animation:obalkaLet 1.5s cubic-bezier(.35,0,.7,.42) forwards}
@keyframes obalkaLet{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.72) rotate(-5deg)}
  12% {opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}
  /* krátke nadýchnutie na mieste, nech si oko obálku stihne všimnúť */
  32% {opacity:1;transform:translate(calc(-50% + 4px),calc(-50% - 12px)) scale(1) rotate(0deg)}
  62% {opacity:1;transform:translate(calc(-50% + 54px),calc(-50% - 96px)) scale(.76) rotate(8deg)}
  100%{opacity:0;transform:translate(calc(-50% + 190px),calc(-50% - 210px)) scale(.24) rotate(18deg)}
}
.odlet-pozn{position:absolute;left:0;right:0;bottom:8px;text-align:center;
  font-size:.78rem;color:var(--ink-soft);margin:0;animation:odletPozn .5s ease-out both}
@keyframes odletPozn{from{opacity:0}}

/* 3. potvrdenie sa zjaví zdola */
.hotovo{text-align:center;animation:hotovoIn .26s ease-out both}
@keyframes hotovoIn{from{opacity:0;transform:translateY(14px)}}
.hotovo h2{font-size:1.6rem;margin:0 0 14px}
/* popisok a číslo pod sebou, oboje na stred – pri dlhom čísle sa rámik nerozťahuje */
.hotovo-cislo{display:block;width:fit-content;max-width:100%;margin:0 auto 18px;text-align:center;
  border:1.5px solid var(--line);border-radius:var(--r);padding:12px 20px;background:var(--bg-soft)}
.hotovo-cislo span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.3;margin:0 0 6px}
.hotovo-cislo strong{display:block;font-family:var(--head);font-weight:700;font-size:1.5rem;
  line-height:1.1;letter-spacing:.05em;color:var(--red);word-break:break-word}
@media(max-width:400px){.hotovo-cislo{padding:11px 14px}.hotovo-cislo strong{font-size:1.3rem}}
.hotovo-mail{font-size:.92rem;color:var(--ink-2);line-height:1.6;margin:0 0 18px}
.hotovo-mail strong{color:var(--ink);word-break:break-word}
.hotovo-vernost{margin:-6px 0 20px;padding:12px;border-radius:12px;background:var(--red-soft);
  font-size:.82rem;line-height:1.5;color:var(--ink-2)}
.hotovo-vernost[hidden]{display:none}
.hotovo-vernost p{margin:0}
.hotovo-vernost b{color:var(--red-dk)}
.hotovo-vernost .btn{margin-top:10px}
.hotovo-dalej{list-style:none;padding:0;margin:0 0 24px;text-align:left;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hotovo-dalej li{position:relative;padding:11px 0 11px 26px;font-size:.9rem;color:var(--ink-2);
  line-height:1.55;border-bottom:1px solid var(--line)}
.hotovo-dalej li:last-child{border-bottom:0}
.hotovo-dalej li::before{content:"";position:absolute;left:6px;top:19px;width:7px;height:7px;
  border-radius:50%;background:var(--red)}
.hotovo-akcie{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hotovo-akcie .btn{flex:1 1 190px;justify-content:center;padding:14px 20px;font-size:.86rem}
.hotovo-akcie .btn[hidden]{display:none}
@media(max-width:460px){.hotovo-akcie .btn{flex:1 1 100%}}

@media (prefers-reduced-motion:reduce){
  #mForm.mizne{animation:none}
  .odlet-obalka{animation:none;opacity:0}
  .odlet-pozn{animation:none}
  .hotovo{animation:none}
}

/* --- detail produktu --- */
/* Detail je širší ako ostatné modály: fotka vľavo v pohodlnej veľkosti,
   údaje vpravo a popis so zložením cez celú šírku pod tým. V pôvodnom
   úzkom stĺpci sa dlhé zloženie muselo scrollovať. */
#pmodal{--pd-x:30px;--pd-d:30px}
#pmodal .modal-box{max-width:940px;padding:8px var(--pd-x) var(--pd-d);display:flex;flex-direction:column}
/* Krížik je riadny prvok v stĺpci, nie plávajúci nad obsahom: v úzkom okne
   sa detail skladá pod seba a fotka, ktorá ide prvá, ho predtým prekryla.
   `sticky` ho drží na dohľad aj pri dlhom popise. */
#pmodal .modal-x{position:sticky;top:0;align-self:flex-end;z-index:4;
  width:42px;height:42px;border-radius:999px;background:#fff;
  display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.10)}
@media(max-width:560px){#pmodal{--pd-x:18px;--pd-d:22px}}
.pcard{cursor:pointer}
.pd{display:grid;grid-template-columns:400px 1fr;gap:28px;align-items:stretch}
.pd-text{grid-column:1/-1}
@media(max-width:760px){.pd{grid-template-columns:290px 1fr;gap:18px}}
@media(max-width:560px){.pd{grid-template-columns:1fr;gap:16px}}
/* Ľavý stĺpec detailu: fotka a pod ňou výber balenia. Varianty musia byť
   VEDĽA `.pd-img`, nie v nej – `.pd-img` je mriežka s absolútne umiestneným
   obrázkom, takže čokoľvek vložené dovnútra sa položí naň. */
/* --- náhľady ostatných fotiek --- */
/* Sedia pod hlavnou fotkou, tam, kde predtým býval výber balenia. Kliknutie
   ich vymení s fotkou hore; samostatná stránka pre fotku sa neotvára. */
.pd-galeria{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.pd-gal{width:60px;height:60px;flex:none;padding:4px;background:var(--sklo);
  border:1.5px solid var(--sklo-ram);border-radius:10px;cursor:pointer;
  display:grid;place-items:center;transition:border-color .15s ease}
.pd-gal:hover{border-color:var(--red)}
.pd-gal.je{border-color:var(--red);box-shadow:0 0 0 2px var(--red-soft)}

/* Obrázok v okienku s pevným rozmerom. Percentuálnej výške sa tu treba
   vyhnúť úplne: rámik je `<button>` a `height: 100 %` sa v ňom nemá o čo
   oprieť, hoci sám výšku má – ani `place-items: stretch` to nezmení.
   Obrázok si potom vezme vlastný pomer strán a vysoký leták z okienka 60×60
   vytŕčal o tridsať pixelov. Šírka je percentuálna (tá funguje), výšku určí
   `aspect-ratio` a obsah vycentruje `object-fit`.

   Pravidlo je zámerne písané na triedy okienok, nie na jednu galériu – nech
   sa to isté nemusí riešiť pri každom novom mieste znova. */

   Pravidlo je zámerne písané na triedu okienka, nie na galériu: platí
   všade, kde je obrázok v pevnom rámiku, aby sa to nemuselo riešiť pri
   každom novom mieste znova. */
.pd-gal,.pthumb,.pdv-obr-k,.cmp-hlava{overflow:hidden}
.pd-gal img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block}
.pdv-obr-k img,.cmp-hlava img{max-width:100%;max-height:100%;object-fit:contain;display:block}

/* --- zväčšená fotka --- */
/* Tabuľka dávkovania je v rámiku detailu nečitateľná – text je na nej menší
   než osem pixelov. Klik na hlavnú fotku ju otvorí cez celú obrazovku.
   Nie je to nová stránka, len prekrytie: adresa sa nemení a späť zavrie
   lupu, nie detail. */
/* Zväčšená fotka musí byť nad detailom produktu (`.modal` má 300) – otvára sa
   práve z neho a s nižším z-indexom skočila za jeho okno. */
.zoom{position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  background:rgba(28,27,26,.86);backdrop-filter:blur(3px);padding:24px;cursor:zoom-out}
.zoom img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  display:block;border-radius:10px;background:#fff}
.zoom-x{position:absolute;top:14px;right:16px;width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(255,255,255,.9);color:var(--ink);font-size:1.4rem;line-height:1;
  cursor:pointer}
.zoom-x:hover{background:#fff}
/* Na fotke v detaile je vidieť, že sa dá zväčšiť. */
.pd-img img{cursor:zoom-in}

/* --- výber balenia v pravom stĺpci --- */
/* Presunul sa spod fotky nad cenu. Hore ho čiara oddeľuje od údajov
   o produkte; dole žiadnu nemá, tam už jednu má cena (`.pd-ceny` má
   `border-top`). S oboma tu boli dve rovnobežné čiary štrnásť bodov od seba. */
.pd-info .pd-varianty{margin-top:auto;padding:14px 0 0;
  border-top:1px solid var(--line)}
.pd-info .pd-var-zoznam{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:7px}
.pd-info .pd-var{height:auto;min-height:52px;justify-content:center;text-align:center}
/* Keď výber balenia existuje, ku dnu tlačí on a cena mu ide tesne pod čiaru.
   `~` je tu podstatné: bez neho by sa obe snažili tlačiť nadol a medzi nimi
   by vznikla diera. */
.pd-info .pd-varianty ~ .pd-ceny{margin-top:14px}

/* Výber balenia je pritlačený nadol a je rovnako vysoký ako obe tlačidlá
   vpravo dokopy – „Rezervovať na predajni" a „Pridať do porovnania" spolu
   merajú 94 px. Ľavý aj pravý stĺpec tak končia v jednej línii.

   Tlačidlá si delia šírku rovnakým dielom podľa počtu balení (`--n`), takže
   pri štyroch sú štyri užšie a pri dvoch dve širšie, ale vždy cez celú
   šírku fotky nad nimi. */

/* Fotka dostane pevný štvorec a vpíše sa doň celá – nič sa neoreže.
   Umiestnenie cez `inset` je zámerné, dôvod je pri .pthumb vyššie. */
/* Rám sa prispôsobí fotke, nie naopak. Kým bol štvorcový, vrece na výšku
   nechalo po stranách široké prázdno – priblížením sa to odstrániť nedá,
   orez škáluje podľa tesnejšieho rozmeru a pri vysokom produkte je to výška.
   V mriežke katalógu štvorec zmysel má (karty musia byť rovnaké), tu je
   produkt jeden a nemá sa s čím zarovnávať.

   Biele pozadie a rám tiež nie sú potrebné: fotky od výrobcu majú pozadie
   vystrihnuté a tie z feedu sa doň strácajú násobením. */
/* Rám je na výšku, nie štvorec. Kým sa riadil šírkou stĺpca, vysoké vrece
   sa doň zmestilo len na 290 px, hoci pod ním bolo voľných ďalších sto –
   fotka je štvorcová, takže výšku určovala šírka. Pomer 4:5 dá vysokým
   produktom o štvrtinu viac a širokým neuberie veľa. */
/* `aspect-ratio` drží spodnú hranicu a `flex-grow` dovolí fotke narásť, keď
   je vedľajší stĺpec vyšší. `flex-shrink: 0` je tu podstatný: bez neho sa
   fotka scvrkla na výšku pravého stĺpca a pri úzkych vreciach N&D ostávalo
   okolo nej prázdno. */
/* `overflow: hidden` je tu kvôli kliknutiu, nie kvôli vzhľadu: orez fotku
   zväčšuje transformom a tá potom pretekala aj o 144 px pod svoj rám. Ležala
   tak na náhľadoch pod ňou a preberala im kliknutia – vyzerali funkčne, ale
   nedalo sa na ne trafiť. Orezáva sa priehľadný okraj, produkt nie. */
/* `flex:0 0 auto`, nie `1 0 auto`: kým fotka rástla, `aspect-ratio` neplatilo
   a rám sa natiahol podľa pravého stĺpca – pri dlhom detaile vyšiel 775 px
   vysoký namiesto 500. Fotka v ňom potom plávala v prázdnote a orez, ktorý
   sa počíta z veľkosti rámu, ju zväčšil tak, že pretiekla cez okraj. */
/* Rám MUSÍ mať vlastné pozadie. Fotky od dodávateľov sú na bielom a zlieva
   ho `mix-blend-mode:multiply` na obrázku — lenže násobenie potrebuje, s čím
   násobiť. V okne detailu je `.modal-box` priehľadná, takže sa biela nemala
   s čím zliať a na telefóne z fotky ostal biely obdĺžnik cez celú šírku.
   Rám má preto farbu podkladu a tvar, ako to má návrh (`.det-obr`). */
.pd-img{position:relative;display:grid;place-items:center;overflow:hidden;
  flex:0 0 auto;aspect-ratio:4/5;min-height:180px;
  background:var(--bg);border:1px solid var(--line);border-radius:14px}
.pd-img svg{width:104px;height:132px;color:var(--red);opacity:.55}
.pd-img use{fill:currentColor}
/* `position:absolute; inset:0`, nie `width/height:100%`. Výška rámu je daná
   `aspect-ratio`, a to nie je pre percentá dosť určitý rozmer – `height:100%`
   sa preto správalo ako `auto` a fotka si vzala svoju vlastnú výšku. Pri úzkej
   vysokej fotke (EBI 187×440) vyšlo 941 px, `max-height` to zrezal na 540
   a v päťstopixelovom ráme fotke chýbalo spodných štyridsať pixelov.
   Rovnaký zápis má aj mriežka (`.pthumb`) a náhľad (`.ph-img`) – tam bol
   správne od začiatku a práve preto tam problém nikdy nebol. */
.pd-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;mix-blend-mode:multiply}
/* Fotka si berie celý priestor, ktorý ostane nad výberom balenia. */
.pd-lavy{display:flex;flex-direction:column;min-height:0}
/* Vystrihnutá fotka sa nenásobí – stmavla by. */
.pd-lavy.vystrihnuta .pd-img img{mix-blend-mode:normal}

.pd h2{margin:0 0 4px;font-size:1.32rem;text-transform:none;letter-spacing:0;font-family:'Inter',system-ui,sans-serif;font-weight:600;line-height:1.3}
.pd .pbrand{margin-bottom:6px}
.pd-spec{list-style:none;padding:0;margin:14px 0 0;font-size:.86rem;color:var(--ink-2)}
/* Posledný riadok je bez čiary: hneď pod ním začína cena a dva predely
   pod sebou vyzerajú ako chyba sadzby. */
.pd-spec li{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--line)}
.pd-spec li:last-child{border-bottom:0}
.pd-spec b{color:var(--ink);font-weight:600}
/* Zložiek býva aj osem, takže riadok nesmie ťahať hodnotu na jednu linku ako
   „12 kg" – zalomí sa a zarovná vpravo ako ostatné. */
.pd-spec li.pd-obsahuje b{text-align:right;max-width:62%}
.pd-note{font-size:.78rem;color:var(--ink-soft);margin-top:14px;line-height:1.6}

.pd-zl{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.pd-zl h3{font-family:var(--head);font-size:.78rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.pd-zl p{font-size:.85rem;line-height:1.6;color:var(--ink-2);margin:0}

/* --- rýchly náhľad pri nabehnutí myšou (len PC) --- */
/* Zámerne nie je klikateľný: je to len ukážka, aby zákazník nemusel otvárať
   detail pri každej karte. Preto aj poznámka „Kliknutím otvoríte detail". */
.phover{position:fixed;z-index:250;width:430px;max-width:calc(100vw - 24px);background:var(--panel);
  border:1.5px solid var(--line);border-radius:var(--r-lg);box-shadow:0 26px 60px -16px rgba(0,0,0,.32);
  padding:16px;display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start;
  animation:phIn .14s ease-out}
@keyframes phIn{from{opacity:0;transform:translateY(6px)}}
.phover[hidden]{display:none}
.ph-img{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;
  aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.ph-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:8px;display:block}
.ph-img svg{width:74px;height:94px;color:var(--red);opacity:.55}
.ph-img use{fill:currentColor}
.ph-info{min-width:0}
.ph-info h3{font-family:'Inter',system-ui,sans-serif;text-transform:none;letter-spacing:0;font-weight:600;
  font-size:1rem;line-height:1.35;margin:0 0 8px}
.ph-info .pbrand{margin-bottom:4px}
.ph-info .pd-spec{margin:10px 0 0;font-size:.8rem}
.ph-info .pd-spec li{padding:5px 0}
/* Popis krátime na štyri riadky – náhľad má lákať, nie nahradiť detail. */
.ph-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:12px;
  border-top:1px solid var(--line);padding-top:10px;flex-wrap:wrap}
.ph-foot .pprice{font-size:1.32rem}
.ph-tip{font-size:.72rem;color:var(--ink-soft)}
@media(max-width:900px){.phover{display:none}}

/* --- stránka jedného produktu (/produkt/KOD, skladá ju server) --- */
/* Používa tie isté triedy .pd ako detail v katalógu, len v šírke stránky
   a s nadpismi h1/h2 namiesto h2/h3 – kvôli osnove dokumentu pre vyhľadávač. */
.drobky{padding:18px 20px 0;font-size:.82rem;color:var(--ink-soft)}
.drobky a{color:var(--ink-2);text-decoration:none}
.drobky a:hover{color:var(--red);text-decoration:underline}
.produkt-strana{padding:20px 20px 70px;max-width:1000px}
.produkt-strana .pd-info h1{font-family:'Inter',system-ui,sans-serif;text-transform:none;
  letter-spacing:0;font-weight:600;font-size:1.5rem;line-height:1.3;margin:0 0 8px}
.produkt-strana .pd-zl h2{font-family:var(--head);font-size:.78rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin:0 0 8px}

/* `.pd-link` ostáva pre serverovú stránku produktu; v detaile katalógu je
   trvalý odkaz na samotnom názve. */

/* --- filter balenia s posuvníkom --- */
/* Dva `input[type=range]` ležia na sebe. Ich dráhy sú priehľadné a to, čo
   zákazník vidí ako dráhu a vybraný úsek, sú dva prúžky pod nimi – inak by
   sa dva natívne posuvníky prekrývali a horný by ten spodný zakryl. */
.fhod{font-size:.86rem;color:var(--ink);font-weight:600;margin:0 0 10px}
.fslider{position:relative;height:26px;margin:0 4px 6px}
.fslider-draha,.fslider-vyber{position:absolute;top:11px;height:4px;border-radius:2px}
.fslider-draha{left:0;right:0;background:var(--line)}
.fslider-vyber{background:var(--red)}
.fslider input[type=range]{position:absolute;left:0;right:0;top:0;width:100%;height:26px;
  margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.fslider input[type=range]:focus{outline:0}
.fslider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2.5px solid var(--red);
  cursor:grab;box-shadow:0 1px 4px rgba(20,16,15,.28)}
.fslider input[type=range]::-moz-range-thumb{pointer-events:auto;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2.5px solid var(--red);
  cursor:grab;box-shadow:0 1px 4px rgba(20,16,15,.28)}
.fslider input[type=range]::-moz-range-track{background:none;border:0}
.fslider input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}

/* --- cena v detaile: bez DPH vľavo malým, s DPH vpravo veľkým --- */
/* Fotka určuje výšku riadku, lebo si berie toľko miesta, koľko vrece
   potrebuje. Spodný blok pravého stĺpca sa preto tlačí k spodnej hrane –
   inak by stĺpec skončil vyššie než fotka. Ku dnu tlačí výber balenia; keď
   ho produkt nemá, prevezme to cena (pravidlo nižšie). */
.pd-info{display:flex;flex-direction:column}
.pd-info .pd-ceny{margin-top:auto}
.pd-ceny{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-top:20px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.pd-bez{display:flex;flex-direction:column;line-height:1.2}
.pd-bez b{font-family:var(--head);font-size:1.02rem;font-weight:600;color:var(--ink-2)}
.pd-bez small{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}
.pd-ceny .pprice{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;font-size:1.9rem}
.pd-ceny .pprice small{font-family:'Inter',system-ui,sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.pbtn-siroky{width:100%;margin-top:14px;padding:14px 22px;font-size:.84rem}

/* ---------- často kupované spolu (v košíku) ---------- */
/* „Často kupované spolu" v košíku – rad malých kariet pod zoznamom položiek.
   Kliknutie pridáva rovno do rezervácie, preto sú to tlačidlá, nie odkazy. */
.cart-odp{margin:18px 0 4px;border-top:1px solid var(--line);padding-top:16px}
.cart-odp[hidden]{display:none}
.cart-odp h3{font-family:var(--head);text-transform:uppercase;letter-spacing:.04em;
  font-size:.92rem;margin:0 0 12px}
.cart-odp-rad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.podp{display:flex;flex-direction:column;gap:6px;text-align:left;padding:9px;cursor:pointer;
  border:1px solid var(--karta-ram);border-radius:12px;background:var(--panel);box-shadow:var(--tien-jemny);
  font:inherit;color:inherit}
.podp:hover{border-color:var(--red)}
.podp-img{position:relative;display:block;aspect-ratio:1;overflow:hidden;
  border-radius:8px;background:var(--bg-soft)}
/* To isté ako pri `.pd-img`: rám drží `aspect-ratio`, takže percentuálna
   výška by sa správala ako `auto`. */
.podp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.podp-img svg{width:100%;height:100%;opacity:.35}
.podp-n{font-size:.78rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.podp-c{font-weight:700;font-size:.85rem}
@media (max-width:600px){
  .cart-odp-rad{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Zoznam odporúčaní na serverom vykreslenej stránke produktu (/produkt/KOD).
   Tam nie sú karty, ale jednoduchý zoznam odkazov – je to zároveň vnútorné
   prelinkovanie pre vyhľadávač. */
.pd-odp-zoznam{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pd-odp-zoznam li{display:flex;justify-content:space-between;gap:14px;
  border-bottom:1px solid var(--line);padding-bottom:8px}
.pd-odp-zoznam a{color:var(--red);text-decoration:none}
.pd-odp-zoznam a:hover{text-decoration:underline}
.pd-odp-zoznam span{font-weight:700;white-space:nowrap}

/* ---------- stráženie dostupnosti (v detaile produktu) ---------- */
/* Tichý rámik, nie výrazná výzva: je to náhradné riešenie pre tovar, ktorý
   práve nie je na predajni, nie hlavná akcia stránky. */
.pd-straz{margin-top:22px;border:1.5px solid var(--line);border-radius:var(--r);padding:16px 18px;
  background:var(--bg-soft)}
.pd-straz h3{font-family:var(--head);text-transform:uppercase;letter-spacing:.04em;
  font-size:.9rem;margin:0 0 6px}
.pd-straz p{margin:0 0 12px;font-size:.86rem;line-height:1.55;color:var(--ink-soft)}
.straz-form{display:flex;gap:8px;flex-wrap:wrap}
/* Vlastné `display:flex` by prebilo atribút `hidden`, ktorým formulár
   po úspešnom odoslaní schovávame. */
.straz-form[hidden]{display:none}
.straz-form input[type=email]{flex:1 1 200px;min-width:0;padding:11px 13px;border-radius:10px;
  border:1.5px solid var(--line);font:inherit;font-size:.92rem;background:var(--v-okne)}
.straz-form input[type=email]:focus{outline:0;border-color:var(--red)}
.straz-form button{flex:0 0 auto}
.straz-msg{margin:10px 0 0!important;font-size:.86rem;color:var(--ink)}
.straz-msg[hidden]{display:none}
@media (max-width:600px){
  .straz-form button{width:100%}
}

/* ---------- výzva na účet a kartu zvieraťa ----------
   Nie vyskakovacie okno: sedí v toku nad filtrami, takže nikoho neblokuje,
   ale je presne tam, kde zákazník rieši, ako sa dostať k správnemu krmivu.
   Sklenená ako karty v katalógu, nie červená plocha: červenú má mimoriadny
   oznam a dve rovnako hlasné veci vedľa seba si berú pozornosť navzájom.
   Tu `backdrop-filter` zmysel má – panel leží nad mriežkou produktov, takže
   je čo rozostrovať. */
.zv-vyzva{position:relative;display:flex;align-items:center;gap:16px;margin:0 0 18px;
  padding:14px 44px 14px 18px;border-radius:var(--r-lg,16px);
  background:linear-gradient(158deg,
    rgba(255,255,255,.72) 0%, rgba(255,255,255,.44) 54%, rgba(255,255,255,.58) 100%);
  border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--sklo-tien);
  /* Objaví sa až po siahnutí na filter, teda uprostred práce – bez nábehu
     by obsah pod ňou skokom klesol a vyzeralo by to ako chyba. */
  animation:zv-vyzva-in .3s ease-out both}
.zv-vyzva[hidden]{display:none}
@keyframes zv-vyzva-in{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){ .zv-vyzva{animation:none} }
.zv-zavri{position:absolute;top:6px;right:6px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;padding:0;border:0;
  border-radius:50%;background:transparent;color:var(--ink-soft);
  font:400 1.35rem/1 var(--head);cursor:pointer;opacity:.65;transition:.15s}
.zv-zavri:hover,.zv-zavri:focus-visible{opacity:1;background:rgba(225,33,31,.12);color:var(--red)}
/* Hlava maskota bez kruhu – rovnaká ako v chate. Tieň sleduje jej tvar,
   nie štvorec, takže na svetlom skle nesplýva a nepotrebuje podklad. */
.zv-ikona{width:72px;height:72px;flex:none;object-fit:contain;display:block}
.zv-txt{flex:1 1 auto;min-width:0}
.zv-txt b{display:block;font-family:var(--head);font-size:1rem;
  letter-spacing:.01em;color:var(--ink);margin-bottom:2px}
.zv-txt span{display:block;font-size:.86rem;color:var(--ink-2);line-height:1.5}
/* Tlačidlo je tmavé ako prihlásenie, nie červené. Červená je na stránke
   farba rezervácie; keby ju mala aj výzva na účet, súperili by o pozornosť
   s tlačidlom, ktoré zákazníka naozaj zaujíma. */
.zv-cta,.zv-cta:hover{flex:none;padding:12px 22px;font-size:.9rem;
  background:var(--ink);color:#fff;border-color:transparent;filter:none;
  box-shadow:0 2px 4px rgba(78,58,44,.18), 0 16px 28px -14px rgba(78,58,44,.75)}
.zv-cta:hover{background:#332f2c}
@media (max-width:640px){
  /* Na úzkej obrazovke ide tlačidlo pod text na celú šírku – vedľa neho by mu
     zostalo pár desiatok pixelov a nápis by sa zalomil na tri riadky. */
  .zv-vyzva{flex-wrap:wrap;gap:12px;padding:13px 15px}
  /* Krížik prekrýva pravý horný roh, takže nadpis musí skončiť skôr –
     inak by mu text prešiel pod ním. */
  .zv-txt b{padding-right:26px}
  .zv-ikona{width:54px;height:54px}
  /* Rezerva musí byť ikona + gap = 38 + 12. Pri 46 px vyšla hypotetická
     šírka riadka na 100 % + 4 px, takže text vždy spadol na druhý riadok –
     zalamovanie sa počíta pred zmrštením. */
  .zv-txt{flex:1 1 calc(100% - 54px)}
  .zv-cta{flex:1 1 100%}
}

/* ---------- moje zvieratá (výber podľa profilu) ---------- */
/* Tichý pás nad filtrami. Zámerne to nevyzerá ako hlavné ovládanie katalógu –
   druh zvieraťa sa vyberá vyššie a toto je len skratka pre prihláseného. */
.moje-zvierata{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.moje-zvierata[hidden]{display:none}
.mz-popis{font-size:.82rem;color:var(--ink-soft);font-family:var(--head);
  text-transform:uppercase;letter-spacing:.08em}
.mz-btn{display:flex;flex-direction:column;align-items:flex-start;gap:1px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 15px;
  font:inherit;text-align:left;line-height:1.25}
.mz-btn b{font-size:.88rem}
.mz-btn span{font-size:.72rem;color:var(--ink-soft)}
.mz-btn:hover{border-color:var(--red)}
.mz-btn.je{border-color:var(--red);background:var(--red-soft,#fdeceb)}
.mz-btn.je span{color:var(--red)}
.mz-zrus{border:0;background:none;cursor:pointer;font:inherit;font-size:.82rem;
  color:var(--ink-soft);text-decoration:underline;padding:6px}
.mz-zrus[hidden]{display:none}
@media (max-width:600px){
  .moje-zvierata{gap:6px}
  .mz-popis{flex:1 1 100%}
}

/* ---------- štítok „Novinka / Náš tip / Akcia" na karte ---------- */
/* Sedí v rohu fotky, aby nezaberal riadok s názvom. Karta je `position:
   relative` už kvôli tlačidlu, takže stačí absolútne umiestnenie. */
.pstitok{position:absolute;top:10px;left:10px;z-index:2;
  padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.16)}
.st-novinka{background:#2f6b8f}
.st-tip{background:#3f7a34}
.st-akcia{background:#E1211F}

/* ---------- zľava a darček v košíku ---------- */
.cart-zlava{margin:8px 0 0;padding:9px 12px;border-radius:10px;
  background:#f1f7ef;border:1px solid #cfe3c8;color:#3f6b34;font-size:.88rem}
.cart-zlava[hidden]{display:none}
/* S účtom by sa nákup započítal do vernostnej zľavy (návrh 2). */
.cart-vernost{margin:10px 0 0;padding:12px;border-radius:12px;background:var(--red-soft);
  font-size:.82rem;line-height:1.5;color:var(--ink-2)}
.cart-vernost[hidden]{display:none}
.cart-vernost b{color:var(--red-dk)}
.cart-vernost .uc-lnk{font-size:inherit;font-weight:600;color:var(--red-dk)}

/* Kupón – návrh https://claude.ai/artifact/8HXE4bJEANhha1qANPgdMz (Web → Košík). */
.cart-kupon{margin:10px 0 14px}
.cart-kupon[hidden]{display:none}
.cart-kupon-otvor{all:unset;cursor:pointer;color:var(--red-dk);font-weight:600;font-size:.88rem}
.cart-kupon-otvor:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
/* Zatvorená výzva je na strede (majiteľ 15. 10. 2026). */
.cart-kupon > .cart-kupon-otvor{display:table;margin:0 auto}
.field.cart-kupon-pole{margin-bottom:8px}
.cart-kupon-rad{display:flex;gap:8px}
.cart-kupon-rad input{flex:1;min-width:0;font-family:ui-monospace,Consolas,monospace;font-weight:700;letter-spacing:.04em}
.btn.cart-kupon-btn{padding:10px 16px;font-size:.85rem}
.cart-kupon-chyba{margin:6px 0 0;font-size:.83rem;color:var(--red-dk)}
.cart-kupon-moje{display:flex;flex-direction:column;gap:6px;font-size:.83rem;color:var(--ink-soft)}
.cart-kupon-ok{display:flex;gap:10px;align-items:center;background:#e6f4e8;border-radius:12px;padding:9px 12px;
  font-size:.84rem;color:#1f5c28}
.cart-kupon-ok b{color:#1f5c28}
.cart-kupon-zrus{all:unset;margin-left:auto;font-weight:600;cursor:pointer;white-space:nowrap}
.cart-kupon-zrus:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}
.cart-kupon-pozn{margin:6px 0 0;font-size:.8rem;color:var(--ink-soft)}
/* Kupónu chýba kúsok do minimálneho nákupu – veta ako pri vernostnej zľave. */
.cart-kupon-blizko{margin:8px 0 0;padding:10px 12px;border-radius:12px;background:var(--red-soft);font-size:.82rem;line-height:1.5;color:var(--ink-2)}
.cart-kupon-blizko b{color:var(--red-dk)}
.ci-kupon{display:block;color:#2f8a3c;font-weight:600;font-size:.76rem}
.ci-kupon.nic{color:var(--ink-soft);font-weight:500}

/* Darček je odmena, nie ďalšia položka – preto vlastný rám a nie riadok
   v zozname. Vyberá sa jeden z troch, takže rádiové tlačidlá. */
.cart-darcek{margin:12px 0 0;padding:13px 14px;border:1.5px dashed var(--line);
  border-radius:var(--r);background:#fffdf7}
.cart-darcek[hidden]{display:none}
.cd-nadpis{display:block;font-size:.95rem}
.cd-pod{display:block;margin:3px 0 10px;font-size:.83rem;color:var(--ink-soft)}
.cd-volby{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.cd-volba{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:11px;background:#fff;font-size:.83rem;
  transition:border-color .14s,background .14s}
.cd-volba:hover{border-color:#dcd0cd}
.cd-volba.je{border-color:var(--red);background:var(--red-soft)}
.cd-volba img{width:38px;height:38px;object-fit:contain;flex:0 0 auto}
.cd-volba input{flex:0 0 auto}

/* ---------- porovnanie krmív ----------
   Prečo vôbec: pri krmive sa nedá rozhodnúť podľa ceny na karte – 3 kg
   a 15 kg balenie sú dve rôzne veci. Zákazník potrebuje vidieť vedľa seba
   cenu za kilo, hmotnosť a analytické zložky. Doteraz mu na to zostávali
   dve karty prehliadača. */

/* Prepínač na karte. Sedí v pravom hornom rohu miniatúry, oproti štítku
   („Novinka", „Akcia") vľavo, takže sa nikdy nestretnú. */
.pcmp{position:absolute;right:8px;top:8px;z-index:2;width:34px;height:34px;padding:0;
  display:grid;place-items:center;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--ink-soft);
  transition:background .16s,color .16s,border-color .16s}
/* Koliesko musí na karte zostať malé – dve ikony v rohu fotky sú už tak
   na hranici. Dotyková plocha sa rozširuje neviditeľne cez ::before (nižšie,
   „Tlačidlo porovnania na karte"). Kedysi to robilo aj ::after a jeho
   `inset:-6px` zostal visieť na vysvetlivke – bublina mala 20 px a text z nej
   vytiekol (majiteľ 1. 10. 2026: „zlá karta pod nápisom"). */
.pcmp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pcmp:hover{color:var(--red);border-color:var(--red)}
.pcmp.on{background:var(--red);border-color:var(--red);color:#fff}
.pcard{position:relative}

/* Vysvetlivka k prepínaču. Dve ikony bez popisu na karte (porovnanie, štítok)
   sú o jednu viac, než si niekto domyslí – a natívny `title` sa objaví až po
   sekunde, kedy už kurzor býva inde.
   Text nesie `data-tip` v HTML, mení sa podľa toho, či je krmivo v porovnaní.
   `z-index` je nad kartami: bublina prečnieva na susednú kartu a bez neho by
   ju prekryla tá, ktorá je v mriežke neskôr. */
.pcmp::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:-1px;z-index:6;
  width:232px;padding:9px 12px;border-radius:11px;
  background:var(--panel);border:1px solid var(--sklo-ram);
  box-shadow:0 2px 6px rgba(78,58,44,.14), 0 18px 34px -16px rgba(78,58,44,.75);
  font-family:var(--text);font-weight:500;font-size:.76rem;line-height:1.5;
  letter-spacing:0;text-transform:none;text-align:left;color:var(--ink-2);
  white-space:normal;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.pcmp:hover::after,.pcmp:focus-visible::after{opacity:1;visibility:visible;transform:none}
@media(hover:none){
  /* Na dotyk niet čo „nabehnúť" – bublina by ostala visieť po ťuknutí. */
  .pcmp::after{display:none}
}

/* Tlačidlo v detaile – tiché, aby neprebíjalo „Rezervovať na predajni". */
.pbtn-cmp{margin-top:9px;width:100%;background:none;border:1px solid var(--line);border-radius:9px;
  padding:9px 14px;font-family:var(--head);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  font-size:.72rem;color:var(--ink-soft);cursor:pointer;transition:.16s}
.pbtn-cmp:hover{border-color:var(--red);color:var(--red)}
.pbtn-cmp.on{border-color:var(--red);color:var(--red)}

/* Lišta dole. Vpravo si necháva miesto pre plávajúci košík a chat, inak by
   ich na mobile prekryla. */
.cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--sklo);-webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(0,0,0,.35)}
.cmpbar[hidden]{display:none}
.cmpbar-in{max-width:1180px;margin-inline:auto;padding:11px 96px 11px 18px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cmpbar-nadpis{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;
  font-size:.72rem;font-weight:700;color:var(--ink-soft);flex:0 0 auto}
.cmp-chips{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 220px;min-width:0}
.cmp-chips{align-items:stretch}
/* Pilulka = sklenená pilulka webu (recept `.pred-pilulka`: --sklo, --sklo-ram,
   --sklo-blur, --sklo-tien). Dlhý názov sa zalomí najviac na tri riadky a až potom
   skráti; celý je v `title` (majiteľ 1. 10. 2026: pilulky boli šedé a text
   odseknutý – trojbodka na `inline-flex` nefunguje, text musí mať vlastný obal). */
.cmp-chip{display:inline-flex;align-items:center;gap:6px;max-width:300px;
  border:1px solid var(--sklo-ram);border-radius:16px;background:var(--sklo);
  -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);box-shadow:var(--sklo-tien);
  padding:6px 6px 6px 13px;font-size:.78rem;font-weight:600;line-height:1.3;color:var(--ink)}
.cmp-chip-t{min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.cmp-chip button{background:none;border:0;cursor:pointer;font-size:1.05rem;line-height:1;
  color:var(--ink-soft);padding:0 4px}
.cmp-chip button:hover{color:var(--red)}
.cmpbar-go{flex:0 0 auto;padding:9px 16px;font-size:.76rem}
.cmpbar-go:disabled{opacity:.45;cursor:default}
.cmpbar-zrus{background:none;border:0;color:var(--ink-soft);cursor:pointer;
  font-size:.8rem;text-decoration:underline;flex:0 0 auto}
@media(max-width:600px){
  .cmpbar-in{padding:9px 84px 9px 12px;gap:8px}
  .cmpbar-nadpis{display:none}
  .cmp-chip{max-width:170px;font-size:.72rem}
}

/* Tabuľka porovnania. Na mobile sa neláme na karty – tu je práve podstatné
   mať stĺpce vedľa seba, takže radšej roluje do strán vo vlastnom obale. */
#cmpModal .modal-box{max-width:1040px}
.cmp-note{color:var(--ink-soft);font-size:.86rem;margin:0 0 16px;line-height:1.55}
.cmp-obal{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-tab{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
.cmp-tab th,.cmp-tab td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.5}
.cmp-tab tbody th{width:26%;font-family:var(--head);text-transform:uppercase;letter-spacing:.07em;
  font-size:.72rem;font-weight:700;color:var(--ink-soft);background:var(--bg-soft)}
.cmp-tab td{width:auto}
.cmp-rohova{background:none;border-bottom:1px solid var(--line)}
.cmp-hlava{display:flex;flex-direction:column;gap:5px;min-width:150px}
.cmp-hlava img{width:100%;max-width:130px;aspect-ratio:1/1;object-fit:contain;
  border:1px solid var(--line);border-radius:9px;background:#fff;padding:4px}
.cmp-zn{font-family:var(--head);font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red)}
.cmp-nazov{font-size:.86rem;font-weight:600;line-height:1.35;overflow-wrap:anywhere;
  text-transform:none;letter-spacing:0;font-family:'Inter',system-ui,sans-serif}
/* Výhodnejšia hodnota. Nie len farbou – kto farby nerozlíši, má tučné písmo. */
.cmp-naj{color:#1a7a35;font-weight:700}
@media(max-width:600px){
  #cmpModal .modal-box{padding:8px 14px 20px}
  .cmp-tab{font-size:.82rem;min-width:460px}
  .cmp-tab th,.cmp-tab td{padding:8px 9px}
  .cmp-hlava{min-width:130px}
}

/* ---------- „to isté ako minule" ----------
   Krmivo je opakovaný nákup. Prihlásený zákazník, ktorý tu už bol, dostane
   svoju poslednú rezerváciu rovno nad katalógom – nie zahrabanú v účte,
   kam sa kvôli opakovaniu nákupu nikto neklikne. */
/* Sklo namiesto červeného pásika. Ružový podklad s červeným okrajom bol
   druhý najkrikľavejší prvok stránky hneď po dlaždiciach druhov a robil
   z pripomienky výstrahu. Že sem patrí pozrieť, nesie tieň a tlačidlo. */
.znova{background:var(--sklo);border:1px solid var(--sklo-ram);
  -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  box-shadow:var(--tien-zdvih);border-radius:var(--r);margin:0 0 18px}
.znova[hidden]{display:none}
.znova-in{display:flex;align-items:center;gap:14px;padding:14px 16px;flex-wrap:wrap}
.znova-txt{flex:0 1 230px;min-width:0;display:flex;flex-direction:column;gap:3px}
/* Fotky posledného nákupu – biely štvorček, počet kusov v rohu. */
.znova-fotky{flex:1 1 auto;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.znova-fotky::-webkit-scrollbar{display:none}
.znova-foto{position:relative;flex:0 0 auto;width:58px;height:58px;border-radius:12px;background:var(--v-okne);border:0;padding:0;
  box-shadow:0 0 0 1px var(--line),0 6px 14px -10px rgba(78,58,44,.5);display:grid;place-items:center;overflow:hidden;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease}
.znova-foto:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-2),0 10px 18px -10px rgba(78,58,44,.55)}
.znova-foto:focus-visible{outline:3px solid rgba(225,33,31,.3);outline-offset:2px}
.znova-foto img{width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box}
.znova-foto i{position:absolute;right:3px;bottom:3px;font-style:normal;font-size:.66rem;font-weight:700;line-height:1;
  padding:2px 5px;border-radius:6px;background:var(--red);color:#fff}
.znova-viac{cursor:default;background:var(--bg-soft);font-weight:700;font-size:.82rem;color:var(--ink-2)}
.znova-txt b{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;
  font-size:.8rem;font-weight:700;color:var(--ink)}
.znova-txt span{font-size:.86rem;color:var(--ink-soft);line-height:1.5;overflow-wrap:anywhere}
.znova-txt i{font-style:normal;opacity:.75}
.znova-go{flex:0 0 auto;padding:10px 16px;font-size:.76rem}
.znova-x{background:none;border:0;color:var(--ink-soft);font-size:1.5rem;line-height:1;
  cursor:pointer;padding:0 4px;flex:0 0 auto;align-self:flex-start}
.znova-x:hover{color:var(--red)}
@media(max-width:600px){
  .znova-in{padding:12px 12px;gap:10px}
  .znova-go{width:100%;order:3}
  .znova-txt{flex:1 1 auto}
  .znova-fotky{order:2;flex:1 1 100%}
  .znova-foto{width:50px;height:50px}
}

/* Vysvetlenie nad mriežkou, keď zoznam prišiel zúžený z úvodnej scény.
   Bez neho by krátky výsledok vyzeral ako chyba filtrov. */
.zoznam-oznam{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:0 0 16px;padding:11px 14px;border-radius:var(--r);
  background:var(--red-soft);border:1.5px solid #f6cfce;
  font-size:.87rem;color:var(--ink-2);
}
.zoznam-oznam[hidden]{display:none}

/* ---------- upozornenie z karty zvieraťa ---------- */
/* Zákazník napísal do karty zvieraťa „alergia na kuracie" – toto je jediné
   miesto, kde sa mu to vráti. Nie je to zákaz ani odporúčanie: zoznam surovín
   v dátach nemáme (`zl` z feedu sú analytické zložky, nie suroviny), takže
   porovnávame názov a popis. Preto tlmená farba a slovo „spomína sa“, nie
   výstražná plocha a „nevhodné“. */
.pupoz{display:flex;align-items:flex-start;gap:6px;margin:-4px 0 8px;
  font-size:.74rem;line-height:1.4;font-weight:600;color:var(--pozor-text);
  overflow-wrap:anywhere}
.pupoz::before{content:'!';flex:0 0 15px;width:15px;height:15px;border-radius:50%;
  background:rgba(196,127,0,.14);color:var(--pozor-text);font-size:.66rem;line-height:15px;
  text-align:center;margin-top:.1em}
.pd-pozor{border:1px solid var(--line);border-left:3px solid #c47f00;
  border-radius:0 10px 10px 0;padding:10px 13px;margin:0 0 14px;background:var(--bg-soft)}
.pd-pozor b{font-size:.84rem}
.pd-pozor p{margin:4px 0 0;font-size:.84rem;line-height:1.55;color:var(--ink-2)}

/* ---------- obľúbené ---------- */
/* Srdiečko sedí pod prepínačom porovnania v tom istom rohu miniatúry.
   Ukazuje sa len prihlásenému – neprihlásenému by kliknutie nemalo kam
   uložiť. Vysvetlivka je tá istá bublina ako pri porovnaní. */
.poblub{position:absolute;right:8px;top:44px;z-index:2;width:30px;height:30px;padding:0;
  display:grid;place-items:center;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--ink-soft);
  transition:background .16s,color .16s,border-color .16s,transform .16s}
.poblub svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linejoin:round}
.poblub:hover{color:var(--red);border-color:var(--red)}
.poblub.on{color:var(--red);border-color:var(--red)}
.poblub.on svg{fill:var(--red)}
.poblub:active{transform:scale(.92)}
.poblub::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:-1px;z-index:6;
  width:232px;padding:9px 12px;border-radius:11px;
  background:var(--panel);border:1px solid var(--sklo-ram);
  box-shadow:0 2px 6px rgba(78,58,44,.14), 0 18px 34px -16px rgba(78,58,44,.75);
  font-family:var(--text);font-weight:500;font-size:.76rem;line-height:1.5;
  letter-spacing:0;text-transform:none;text-align:left;color:var(--ink-2);
  white-space:normal;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s}
.poblub:hover::after,.poblub:focus-visible::after{opacity:1;visibility:visible;transform:none}
@media(hover:none){
  .poblub{width:38px;height:38px;top:52px}
  .poblub::after{display:none}
}

/* ---------- „Ako to funguje?" ako zbalený riadok na telefóne ---------- */
/* Tri body s celými vetami zaberali nad mriežkou pol obrazovky ešte skôr, než
   zákazník uvidel prvé krmivo. Nad 900 px sa nič nemení – tam je na ne miesto
   a rozbaľovanie by bolo klikanie navyše. */
.ako-prepinac{display:none}
@media(max-width:900px){
  .kat-ako{padding:0}
  .ako-nadpis{display:none}
  .ako-prepinac{
    display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    background:none;border:0;cursor:pointer;font:inherit;padding:13px 15px;
    font-family:var(--head);font-weight:600;text-transform:uppercase;
    letter-spacing:.1em;font-size:.8rem;color:var(--ink);text-align:left;
  }
  .ako-prepinac svg{
    width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--ink-soft);
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .22s ease;
  }
  .kat-ako.otvorene .ako-prepinac svg{transform:rotate(180deg)}
  /* Zoznam sa skrýva cez `display`, nie cez `hidden`: `.ako-kroky` má vlastné
     `display:grid`, ktoré by `hidden` prebilo. */
  .kat-ako:not(.otvorene) .ako-kroky{display:none}
  .kat-ako.otvorene .ako-kroky{padding:0 15px 14px}
}

/* ============================================================================
   HODNOTENIE, ZLOŽENIE A ANALYTICKÉ ZLOŽKY V DETAILE

   Jednotná grafika pre celý katalóg, nielen pre krmivá. Každý blok sa ukáže
   len vtedy, keď preň sú dáta: bez zloženia sa nekreslí zloženie, bez známky
   hodnotenie. Prázdny nadpis je horší než chýbajúci blok.

   Karty sú vypuklé, nie ploché: svetlý pruh po hornej hrane a mäkký tieň pod
   nimi. Ten istý jazyk ako zvyšok webu – teplé tiene rgba(78,58,44), nie sivé.

   Vysvetlivky (`.vys`) sú v `.vys-text` a ukazujú sa po nabehnutí myšou alebo
   po zameraní klávesnicou. Číslo bez vysvetlenia je pri hodnotení kvality
   horšie než žiadne – zákazník nemá ako vedieť, čo znamená 7,4.
   ============================================================================ */
/* Sklenená karta ako na úvodnej stránke – priesvitná plocha, svetlý pruh
   po hornej hrane a mäkký teplý tieň. Zdvihne sa pri nabehnutí, aby bolo
   vidieť, že je to samostatná vrstva, nie plocha stránky. */
.pd-metrika{
  background:linear-gradient(158deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.68) 54%,
             rgba(255,255,255,.80) 100%);
  border:1px solid var(--sklo-ram);border-radius:var(--r-lg);
  -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--tien-zdvih);
  padding:24px;margin:16px 0 0;
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s;
}
.pd-metrika:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 34px 70px -24px rgba(78,58,44,.55)}
/* Nadpisy blokov sú tiché – nesú ich čísla pod nimi, nie samotné slovo. */
.pd-metrika h2{font-family:var(--head);font-size:.76rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px}
.pd-metrika .blok{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.pd-metrika .blok:first-child{padding-top:0;margin-top:0;border-top:0}
.pd-metrika .perex{font-size:.93rem;color:var(--ink-2);margin:0 0 .85em}
.pd-metrika .perex:last-child{margin-bottom:0}
.pd-metrika .zn{display:flex;flex-wrap:wrap;gap:10px}
.pd-metrika .zn>div{flex:1 1 210px;min-width:0;padding:16px 17px 17px;border-radius:12px;
 background:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.72) 100%);
 border:1px solid rgba(255,255,255,.95);
 box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 1px 2px rgba(78,58,44,.06),
            0 10px 20px -14px rgba(78,58,44,.6);
 transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s}
.pd-metrika .zn>div:hover, .pd-metrika .zn>div:focus-within{transform:translateY(-3px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 20px 32px -18px rgba(58,44,34,.95)}
.pd-metrika .zn-popis{font-family:var(--head);font-size:.68rem;font-weight:600;letter-spacing:.15em;
 text-transform:uppercase;color:var(--ink-soft);margin:0 0 9px}
.pd-metrika .zn-h{display:flex;align-items:baseline;gap:7px;margin:0 0 9px}
.pd-metrika .zn-h b{font-size:2rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pd-metrika .zn-h i{font-style:normal;font-size:.86rem;color:var(--ink-soft)}
.pd-metrika .zn-pas{height:19px;border-radius:999px;background:rgba(120,105,95,.12);overflow:hidden;position:relative;
 border:1px solid rgba(255,255,255,.9);
 box-shadow:inset 0 2px 4px rgba(78,58,44,.22),inset 0 -1px 0 rgba(255,255,255,.5),0 6px 14px -10px rgba(78,58,44,.75)}
.pd-metrika .zn-pas i{display:block;height:100%;border-radius:999px;position:relative;
 background:linear-gradient(90deg,rgba(120,105,95,.75),rgba(120,105,95,.5))}
.pd-metrika .zn-pas i::after{content:"";position:absolute;inset:0;border-radius:999px;
 background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 46%,rgba(255,255,255,0) 47%,rgba(255,255,255,.14) 100%)}
.pd-metrika .zn-veta{margin:10px 0 0;font-size:.8rem;color:var(--ink-2);line-height:1.6}
.pd-metrika .vys{position:relative;cursor:help;outline:none}
.pd-metrika .vys.otaznik{display:inline-flex;align-items:center;vertical-align:middle;margin-left:7px}
.pd-metrika .vys.otaznik>span{width:15px;height:15px;border-radius:50%;display:inline-flex;align-items:center;
 justify-content:center;font-size:.62rem;font-weight:700;background:rgba(120,105,95,.16);
 color:var(--ink-soft);line-height:1}
.pd-metrika .vys.pas{display:block;padding:13px 15px 14px;border-radius:12px;margin:0 0 7px;
 background:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.7) 100%);
 border:1px solid rgba(255,255,255,.95);
 box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 1px 2px rgba(78,58,44,.06),
            0 10px 20px -14px rgba(78,58,44,.6);
 transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s}
.pd-metrika .vys.pas:hover, .pd-metrika .vys.pas:focus-within{transform:translateY(-2px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 20px 32px -18px rgba(58,44,34,.95)}
.pd-metrika .vys-text{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translate(-50%,-5px);
 z-index:9;width:min(400px,88vw);padding:16px 18px;border-radius:13px;text-align:left;
 font-family:Inter,system-ui,sans-serif;font-size:.76rem;line-height:1.6;font-weight:400;
 letter-spacing:0;text-transform:none;color:var(--ink-2);
 background:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.94) 100%);
 border:1px solid rgba(255,255,255,.95);
 box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 20px 38px -18px rgba(78,58,44,.8);
 opacity:0;visibility:hidden;transition:opacity .2s,transform .2s cubic-bezier(.22,1,.36,1),visibility .2s}
.pd-metrika .vys:hover>.vys-text, .pd-metrika .vys:focus>.vys-text, .pd-metrika .vys:focus-within>.vys-text{opacity:1;visibility:visible;transform:translate(-50%,0)}
.pd-metrika .vys b{color:var(--ink)}
.pd-metrika .vys::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
 background:repeating-linear-gradient(90deg,rgba(120,105,95,.3) 0 3px,transparent 3px 6px);
 opacity:0;transition:opacity .2s}
.pd-metrika .vys:hover::after, .pd-metrika .vys:focus-within::after{opacity:1}
.pd-metrika .piliere{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
/* Dva a dva, nie tri a jeden. Pri základnej šírke 118 px sa štvrtý pilier
   nezmestil do riadku a „Doloženosť" ostávala sama cez celú šírku –
   vyzeralo to ako chyba sadzby, nie ako zámer. */
.pd-metrika .piliere>div{position:relative;flex:1 1 calc(50% - 4px);min-width:0;padding:10px 13px 11px;border-radius:11px;
 background:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.72) 100%);
 border:1px solid rgba(255,255,255,.95);
 box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 1px 2px rgba(78,58,44,.06),
            0 8px 16px -12px rgba(78,58,44,.5);
 transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s}
.pd-metrika .piliere>div:hover{transform:translateY(-2px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 14px 22px -14px rgba(58,44,34,.85)}
.pd-metrika .piliere dt{font-size:.7rem;color:var(--ink-soft);margin-bottom:6px;line-height:1.35}
.pd-metrika .piliere dt b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.pd-metrika .piliere .mp{height:5px;border-radius:999px;background:rgba(120,105,95,.14);overflow:hidden;
 box-shadow:inset 0 1px 2px rgba(78,58,44,.18)}
.pd-metrika .piliere .mp i{display:block;height:100%;border-radius:999px;
 background:linear-gradient(90deg,rgba(120,105,95,.7),rgba(120,105,95,.45))}
.pd-metrika .an{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pd-metrika .an>div{flex:1 1 auto;min-width:126px;display:flex;flex-direction:column;gap:3px;
 padding:11px 14px 12px;border-radius:11px;
 background:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.72) 100%);
 border:1px solid rgba(255,255,255,.95);
 box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 1px 2px rgba(78,58,44,.06),0 8px 16px -12px rgba(78,58,44,.5);
 transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s}
.pd-metrika .an>div:hover{transform:translateY(-2px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 14px 22px -14px rgba(58,44,34,.85)}
.pd-metrika .an dt{font-size:.71rem;color:var(--ink-soft);white-space:nowrap}
.pd-metrika .an dd{margin:0;font-size:1.02rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pd-metrika .an-en{margin:8px 0 0;padding:12px 16px 13px;border-radius:11px;text-align:center;
 display:flex;flex-direction:column;gap:3px;
 background:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.72) 100%);
 border:1px solid rgba(255,255,255,.95);
 box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 1px 2px rgba(78,58,44,.06),0 8px 16px -12px rgba(78,58,44,.5)}
.pd-metrika .an-en dt{font-size:.71rem;color:var(--ink-soft)}
.pd-metrika .an-en dd{margin:0;font-size:1.02rem;font-weight:600;font-variant-numeric:tabular-nums}
.pd-metrika .zl-pas{display:flex;height:19px;border-radius:999px;overflow:hidden;position:relative;
 border:1px solid rgba(255,255,255,.9);
 box-shadow:inset 0 2px 4px rgba(78,58,44,.22),inset 0 -1px 0 rgba(255,255,255,.5),0 6px 14px -10px rgba(78,58,44,.75)}
.pd-metrika .zl-pas i{display:block;height:100%;position:relative}
.pd-metrika .zl-pas i::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 46%,rgba(255,255,255,0) 47%,rgba(255,255,255,.14) 100%)}
.pd-metrika .zl-pas i+i{border-left:1px solid rgba(255,255,255,.7)}
.pd-metrika .zl-skala{display:flex;justify-content:space-between;font-size:.68rem;color:var(--ink-soft);margin:8px 0 0}
.pd-metrika .zl{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0 0;list-style:none}
/* Percento stojí za názvom, nie pod ním. Pod názvom z neho bol druhý riadok
   a karta narástla o pätnásť pixelov pri každej surovine. */
.pd-metrika .zl li{flex:1 1 auto;min-width:126px;display:flex;flex-direction:row;
 align-items:baseline;justify-content:space-between;gap:10px;
 padding:11px 14px 12px;border-radius:11px;position:relative;overflow:hidden;
 background:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.72) 100%);
 border:1px solid rgba(255,255,255,.95);
 box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 1px 2px rgba(78,58,44,.06),0 8px 16px -12px rgba(78,58,44,.5);
 transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s}
.pd-metrika .zl li:hover{transform:translateY(-2px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 14px 22px -14px rgba(58,44,34,.85)}
.pd-metrika .zl li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--t);border-radius:11px 0 0 11px}
/* Čítať sa má surovina, nie číslo. Percento je doplnok – výrobca ho musí
   uviesť len pri tom, čo zdôrazňuje na obale, takže samo o sebe nič
   neporovnáva. Predtým to bolo naopak a z kariet trčali čísla. */
.pd-metrika .zl .n{font-size:.84rem;font-weight:600;color:var(--ink);line-height:1.3;min-width:0}
.pd-metrika .zl .h{font-size:.75rem;font-weight:500;color:var(--ink-soft);
 font-variant-numeric:tabular-nums;flex:none;white-space:nowrap}
/* Suroviny bez deklarovaného množstva stoja v zozname tam, kam podľa štítku
   patria – len sú stlmené a namiesto čísla majú pomlčku. Vyzdvihnúť tie
   s percentom nahor by prevrátilo poradie podľa hmotnosti, ktoré je na
   zložení to najdôležitejšie: surovina s 0,1 % by stála nad ryžou.
   Tvar karty je ale rovnaký pre všetky – dva rôzne vysoké prvky v jednom
   rade mriežku rozbijú. */
.pd-metrika .zl li.tichy{background:linear-gradient(160deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.6) 100%)}
.pd-metrika .zl li.tichy::before{background:rgba(120,105,95,.16)}
/* Karta bez percenta je nižšia – prázdny riadok po chýbajúcom čísle len
   zaberal miesto. `align-self` ju drží pri hornej hrane rade, nech sa
   nenaťahuje na výšku susedov. */
.pd-metrika .zl li.tichy{padding:9px 14px 10px;align-self:start}
.pd-metrika .zl .n i{font-style:normal;opacity:.5;font-variant-numeric:tabular-nums}

.pd-metrika .blok>p.pozn{margin:18px auto 0;max-width:52ch;text-align:center;font-size:.75rem;color:var(--ink-soft);line-height:1.6}
.pd-metrika ul.body{list-style:none;padding:0;margin:0}

/* Na telefóne sa vysvetlivka nesmie viazať na dlaždicu, ale na celý panel.
   Bublina je široká min(400px, 88vw) a centruje sa na to, čo vysvetľuje —
   pri dlaždici širokej 125 px jej teda polovica vyšla mimo obrazovky (merané
   na 379 px: ľavý okraj −42 px, pravý 458 px). Kotvou je preto `.pd-metrika`
   a bublina má `left`/`right`, nie šírku — širšia než panel byť nevie.

   Zvislá poloha ostáva na statickom mieste (`top:auto; bottom:auto`), takže
   bublina vyskočí tam, kde v texte stojí — pri dlaždici, ktorej sa týka.

   `position:fixed` tu nefunguje: `.pd-metrika` má `backdrop-filter`, a ten
   robí z prvku kotvu aj pre pevne umiestnené potomky. Bublina by sa prilepila
   na spodok panela, nie obrazovky.

   Zdvihnutie dlaždice pri nabehnutí a čiarkovaná linka pod textom sú
   pomôcky pre myš; na dotyk nemajú zmysel a `:hover` po ťuknutí ostáva
   visieť, takže sa vypínajú. */
@media(max-width:600px){
  .pd-metrika{position:relative}
  .pd-metrika .vys, .pd-metrika .piliere>div, .pd-metrika .zn>div{position:static}
  .pd-metrika .vys::after{display:none}
  .pd-metrika .zn>div:hover, .pd-metrika .zn>div:focus-within,
  .pd-metrika .piliere>div:hover,
  .pd-metrika .vys.pas:hover, .pd-metrika .vys.pas:focus-within{transform:none}
  .pd-metrika .vys-text{position:absolute;left:14px;right:14px;top:auto;bottom:auto;
    width:auto;max-width:none;margin-top:6px;z-index:20;transform:translateY(-6px)}
  .pd-metrika .vys:hover>.vys-text, .pd-metrika .vys:focus>.vys-text,
  .pd-metrika .vys:focus-within>.vys-text{transform:translateY(0)}
}

/* ---------- ostatné balenia tej istej receptúry ----------
   Zákazník, ktorý si otvoril dvanásťkilové vrece, často chce najprv skúsiť
   malé. Prepínač stojí hneď pod cenou, nie na konci detailu – tam by ho
   nikto nehľadal.

   Na tlačidle je hmotnosť veľká a cena pod ňou drobná: rozhoduje sa podľa
   veľkosti balenia, cena je až druhá otázka. Sklenené dlaždice ako všade
   inde, aktuálne balenie je zvýraznené rámom, nie farbou – červená je na
   webe farba akcie. */
.pd-varianty{margin-top:14px}
.pd-var-popis{display:block;font-family:var(--head);font-size:.68rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.pd-var-zoznam{display:flex;flex-wrap:wrap;gap:7px}
.pd-var{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:8px 13px 9px;border-radius:11px;cursor:pointer;font:inherit;text-align:left;
  background:linear-gradient(160deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.62) 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(78,58,44,.07),
             0 8px 14px -11px rgba(78,58,44,.5);
  transition:top .16s cubic-bezier(.22,1,.36,1), box-shadow .16s, border-color .16s}
.pd-var{position:relative;top:0}
.pd-var:hover{top:-2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 14px 20px -13px rgba(58,44,34,.8)}
.pd-var b{font-family:var(--head);font-size:.98rem;font-weight:700;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.pd-var i{font-style:normal;font-size:.74rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.pd-var u{text-decoration:none;font-size:.66rem;color:var(--ink-soft);opacity:.8}
/* Aktuálne balenie: tmavší rám a bez zdvihu – nie je na čo klikať. */
.pd-var.je{cursor:default;border-color:rgba(120,105,95,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(78,58,44,.1)}
.pd-var.je:hover{top:0}
/* Na stránke produktu sú varianty odkazy, nie tlačidlá – tam sa balenie
   prepína prechodom na vlastnú adresu, aby ju šlo poslať aj uložiť. */
a.pd-var{text-decoration:none;color:inherit;position:relative;top:0}
a.pd-var:hover{top:-2px}

/* ---------- popis od výrobcu ----------
   Stojí pod zložením a analytikou zámerne: tie sú z obalu, toto je text
   výrobcu. Preto je aj tichší – užší stĺpec, menšie písmo a bez sklenenej
   karty, aby sa nebil s údajmi nad sebou. */
/* Medzery okolo fotky. Nad ňou musí byť vzduch, aby sa nelepila na poslednú
   odrážku; pod ňou naopak stačí málo – oddeľovacia čiara nasledujúcej sekcie
   je sama o sebe dosť výrazný predel. */
/* Vzhľad popisu (.pd-vyrobca, .pdv-body, .pdv-obr-k) je v `popis.css` —
   načítava ho aj administrácia, aby karta produktu vyzerala ako web. */

/* Názov v detaile je trvalý odkaz na produkt. Vyzerá ako nadpis, nie ako
   odkaz – podčiarknutie sa ukáže až pod myšou. */
#pdTitle a{color:inherit;text-decoration:none}
#pdTitle a:hover,#pdTitle a:focus-visible{text-decoration:underline}

/* ---------- zloženie a analytika v porovnaní ----------
   V úzkom stĺpci tabuľky sa dlhý odsek nedá čítať. Suroviny aj analytické
   zložky preto idú po riadkoch: názov vľavo, hodnota vpravo. Farebný prúžok
   pri surovinách je ten istý jazyk ako v detaile – najvyšší podiel najtmavší. */
.cmp-zl,.cmp-an{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.cmp-zl li,.cmp-an li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:.78rem;line-height:1.35;padding:4px 7px;border-radius:7px;
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9)}
.cmp-zl li{position:relative;padding-left:12px;overflow:hidden}
.cmp-zl li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--t)}
.cmp-zl li span,.cmp-an li span{color:var(--ink-2);text-align:left}
.cmp-zl li b,.cmp-an li b{color:var(--ink);font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cmp-zl-viac{margin:6px 0 0;font-size:.72rem;color:var(--ink-soft);text-align:left}

/* --- akciová cena --- */
/* Pôvodná cena stojí vedľa novej prečiarknutá. Bez nej je zľava tvrdenie,
   ktoré si zákazník nemá ako overiť. */
.pcena.je-akcia .pprice{color:var(--red)}
.pstara{display:block;font-size:.78rem;color:var(--ink-soft);text-decoration:line-through;
  line-height:1.2}
.pstitok.st-zlava{background:var(--red);color:#fff;font-weight:700}
.pd-ceny.je-akcia .pprice{color:var(--red)}
.pd-stara{display:block;font-style:normal;font-size:.95rem;font-weight:500;
  color:var(--ink-soft);text-decoration:line-through;line-height:1.2}

/* ---------- posuvník rozsahu v skle ----------
   Ten istý prvok ako pri balení, len oblečený do rovnakého skla ako
   prepínače: dráha je presvetlená, vybraný úsek červený s jemnou žiarou
   a rúčky sú sklenené guľôčky, ktoré sa pri chytení zväčšia. */
.fslider-sklo{height:30px;margin:2px 10px 8px}
.fslider-sklo .fslider-draha{top:13px;height:6px;border-radius:999px;
  background:rgba(28,27,26,.07);
  box-shadow:inset 0 1px 2px rgba(28,27,26,.10)}
/* Vybraný úsek je tmavý, nie červený. Červená je na webe farba akcie
   („Rezervovať", zvolená dlaždica) a pruh cez pol panela ju znehodnocoval –
   v paneli plnom filtrov kričal viac než tlačidlo, ktoré niečo robí. */
.fslider-sklo .fslider-vyber{top:13px;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--ink-soft),var(--ink-2));
  box-shadow:0 1px 3px rgba(28,27,26,.20);transition:left .12s, right .12s}
.fslider-sklo input[type=range]{height:30px}
.fslider-sklo input[type=range]::-webkit-slider-thumb{width:22px;height:22px;border:0;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.9));
  box-shadow:0 1px 4px rgba(28,27,26,.26), inset 0 1px 0 rgba(255,255,255,.95),
             0 0 0 1.5px rgba(28,27,26,.20);
  transition:transform .16s, box-shadow .16s}
.fslider-sklo input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.9));
  box-shadow:0 1px 4px rgba(28,27,26,.26), inset 0 1px 0 rgba(255,255,255,.95),
             0 0 0 1.5px rgba(28,27,26,.20)}
.fslider-sklo input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14);
  box-shadow:0 2px 8px rgba(28,27,26,.30), 0 0 0 1.5px var(--ink-2)}
.fslider-sklo input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px rgba(225,33,31,.35)}
.fhod{font-size:.86rem;font-weight:600;color:var(--ink);margin:2px 0 8px;
  font-variant-numeric:tabular-nums}

/* ---------- rozbalenie filtra do okna ----------
   Tlačidlo je sticky, takže je po ruke aj v polovici dlhého zoznamu. */
.frozbal{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:center;
  gap:9px;width:100%;margin:0 0 12px;padding:11px 14px;font:inherit;font-size:.82rem;
  font-family:var(--head);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);cursor:pointer;border-radius:12px;
  border:1px solid rgba(255,255,255,.7);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 10px rgba(28,27,26,.10);
  transition:transform .16s, box-shadow .16s, color .16s}
.frozbal svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.frozbal:hover{color:var(--red);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
  0 4px 16px rgba(28,27,26,.14)}
.frozbal:active{transform:scale(.985)}

/* Okno s celým filtrom. Obsah doň doslova pretečie – je to ten istý prvok,
   nie kópia – preto sa aj otvára ako kvapka: pozadie sa rozostrí, okno
   priletí zdola a rozvinie sa. */
.fpop{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(28,27,26,0);
  -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  transition:background .24s ease, backdrop-filter .24s ease}
.fpop[hidden]{display:none!important}
/* Kým je okno otvorené, stránka pod ním nesmie rolovať: cez rozostrené
   pozadie presvitala hlavička katalógu a pri rolovaní preblikávala. */
body.filter-okno{overflow:hidden}
.fpop.je-otvorene{background:rgba(28,27,26,.34);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* Okno má pevnú výšku, nie podľa obsahu: pri prepínaní parametrov by inak
   poskakovalo a zoznam vľavo by sa hýbal pod rukou. */
.fpop-okno{display:flex;flex-direction:column;width:min(1080px,100%);height:min(880px,90vh);
  border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.7);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(252,250,248,.92));
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 24px 70px rgba(28,27,26,.30), inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(26px) scale(.97);opacity:0;
  transition:transform .3s cubic-bezier(.22,1.2,.36,1), opacity .24s ease}
.fpop.je-otvorene .fpop-okno{transform:none;opacity:1}
/* Hlavička je len pás s názvom a dvoma odkazmi – 18 px hore aj dole z nej
   robilo prázdny pruh cez celú šírku okna. */
.fpop-hlava{display:flex;align-items:center;gap:14px;padding:11px 20px;
  border-bottom:1px solid var(--line)}
.fpop-hlava h2{margin:0;flex:1 1 auto;font-family:var(--head);font-size:.92rem;
  letter-spacing:.1em;text-transform:uppercase}
.fpop-x{background:none;border:0;font-size:1.7rem;line-height:1;color:var(--ink-soft);
  cursor:pointer;padding:0 2px}
.fpop-x:hover{color:var(--red)}
/* Výzva na účet sa do okna presúva vždy, ale väčšinou je skrytá – prázdny
   `:empty` na to nestačí, lebo prvok v nej je (len s `hidden`), a ostával
   po nej pás pod čiarou hlavičky. */
.fpop-vyzva{padding:12px 20px 0}
.fpop-vyzva:empty,.fpop-vyzva:not(:has(> :not([hidden]))){display:none}
/* Zmysel okna: všetko naraz, bez rolovania. Preto stĺpce – filtre sa v nich
   ukladajú na výšku a zákazník ich vyklikáva bez hľadania. */
/* Telo okna: vľavo parametre, vpravo ten zvolený. Filter má štrnásť sekcií
   a v troch stĺpcoch sa aj tak rolovalo – takto je vždy vidieť, čo všetko sa
   dá nastaviť, a otvorená je len jedna vec. */
.fpop-telo{display:grid;grid-template-columns:262px minmax(0,1fr);gap:0;
  min-height:0;flex:1 1 auto}
.fpop-menu{overflow:auto;padding:12px;border-right:1px solid rgba(28,27,26,.12);
  background:rgba(28,27,26,.028)}
.fpop-p{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;margin-bottom:3px;
  border:1px solid transparent;border-radius:11px;background:none;font:inherit;font-size:.88rem;
  color:var(--ink-2);text-align:left;cursor:pointer;
  transition:background .16s, color .16s, border-color .16s}
.fpop-p:hover{background:rgba(255,255,255,.72);color:var(--ink)}
.fpop-p.on{background:#fff;color:var(--ink);font-weight:600;
  border-color:rgba(28,27,26,.16);box-shadow:0 1px 3px rgba(28,27,26,.08)}
.fpop-p-n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Koľko volieb je v parametri zapnutých – bez toho zákazník pri štrnástich
   riadkoch nevie, kde niečo nastavil. */
.fpop-p-c{flex:0 0 auto;min-width:20px;padding:1px 7px;border-radius:999px;
  background:var(--red);color:#fff;font-size:.7rem;font-weight:600;text-align:center}
.fpop-p-s{flex:0 0 auto;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.35}
.fpop-p.on .fpop-p-s{opacity:.8}

.fpop-obsah{overflow:auto;padding:16px 20px}
/* Otvorená je vždy jedna sekcia. `display` z karty prebíja `hidden`, preto
   to musí byť napísané výslovne – inak by sa skryté sekcie kreslili ďalej. */
.fpop-obsah .fgroup[hidden],.fpop-obsah .fnad-blok[hidden]{display:none!important}
.fpop-obsah .fgroup,.fpop-obsah .fnad-blok{width:100%;margin:0;padding:0;border:0;
  background:none;box-shadow:none;border-radius:0}
.fpop-obsah .fgroup h3{margin-top:0;font-size:.86rem}
.fpop-obsah .fnadskupina{display:none}
.fpop-obsah .frozbal{display:none}
/* Rozloženie vnútri parametra.
   Skupiny s posuvníkom (cena, balenie) potrebujú šírku, zoznamy si vystačia
   s tretinou – preto mriežka o šiestich dieloch a nie stĺpce: v stĺpcoch by
   sa posuvník ocitol v úzkom pruhu vedľa zoznamu dostupností. */
.fpop-obsah .fnad-blok{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px 28px;align-items:start}
.fpop-obsah .fnad-blok > .fgroup{grid-column:span 2;padding:10px 0;border-top:0}
.fpop-obsah .fnad-blok > .fgroup[data-g="c"],
.fpop-obsah .fnad-blok > .fgroup[data-g="h"],
.fpop-obsah .fnad-blok > .fgroup[data-g="bi"],
.fpop-obsah .fnad-blok > .fgroup[data-g="tu"]{grid-column:span 3}

/* Suroviny: každý zoznam je vlastná karta, aby Hydina a Ryby neboli jedna
   šedá plocha. Stĺpce, nie mriežka – zoznamy majú veľmi rôznu dĺžku a
   v mriežke ostávala pod krátkymi kartami prázdna plocha až po spodok
   najvyššej. V stĺpcoch sadnú tesne pod seba. */
.fpop-obsah .fnad-blok.fnad-suroviny{display:block;columns:3;column-gap:20px}
.fpop-obsah .fnad-blok.fnad-suroviny > .fgroup{break-inside:avoid;display:inline-block;
  width:100%;margin:0 0 14px;padding:12px 14px;
  border:1px solid rgba(28,27,26,.12);border-radius:12px;background:rgba(255,255,255,.6)}
.fpop-obsah .fnad-blok.fnad-suroviny > .fgroup h3{color:var(--ink);font-size:.78rem;
  padding-bottom:7px;margin-bottom:4px;border-bottom:1px solid rgba(28,27,26,.10)}
/* V kartách surovín sú riadky tesnejšie – je ich 34 a každý ušetrený pixel
   je o krok ďalej od rolovania, kvôli ktorému okno vzniklo. */
.fpop-obsah .fnad-suroviny .fstr{padding:2px 0}
.fpop-obsah .fnad-suroviny .fstr-n{font-size:.86rem}
.fpop-obsah .fnad-blok.fnad-suroviny > .fnadskupina{column-span:all}

/* Dlhý zoznam (značky) ide do stĺpcov mriežkou, nie cez `columns`.
   V stĺpcoch sa čítal zvisle: prvý stĺpec mal značky s najviac produktmi
   a zákazník musel rolovať dole, aby videl druhú desiatku. Mriežka ich
   ukladá zľava doprava, takže prvý riadok je prvých päť najväčších. */
.fpop-obsah > #filterBody > .fgroup{display:flex;flex-wrap:wrap;gap:0 32px;
  align-content:flex-start}
.fpop-obsah > #filterBody > .fgroup > .fstr{flex:0 0 calc((100% - 64px) / 3)}
.fpop-obsah > #filterBody > .fgroup > h3,.fpop-obsah > #filterBody > .fgroup > .fmore,.fpop-obsah > #filterBody > .fgroup > .fhod,.fpop-obsah > #filterBody > .fgroup > .fslider,.fpop-obsah > #filterBody > .fgroup > .fzrus{flex:1 1 100%}
@media (max-width:1100px){
  .fpop-obsah .fnad-blok{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fpop-obsah .fnad-blok.fnad-suroviny{columns:2}
  .fpop-obsah > #filterBody > .fgroup > .fstr{flex-basis:calc((100% - 32px) / 2)}
}
.fpop-pata{padding:12px 20px;border-top:1px solid var(--line);
  display:flex;justify-content:flex-end}
@media (max-width:1000px){ .fpop-telo{grid-template-columns:210px minmax(0,1fr)} }
@media (max-width:680px){
  .fpop{padding:0}
  .fpop-okno{width:100%;max-height:100%;height:100%;border-radius:0;border:0}
  /* Na telefóne sa dva panely vedľa seba nezmestia – zoznam parametrov je
     vodorovný pás nad obsahom. */
  .fpop-telo{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .fpop-menu{display:flex;gap:6px;overflow-x:auto;padding:10px 12px;
    border-right:0;border-bottom:1px solid rgba(28,27,26,.12);scrollbar-width:none}
  .fpop-menu::-webkit-scrollbar{display:none}
  .fpop-p{width:auto;flex:0 0 auto;margin:0;border-radius:999px;
    border-color:rgba(28,27,26,.14);background:#fff}
  .fpop-p-s{display:none}
  .fpop-obsah{padding:16px}
  .fpop-obsah > #filterBody > .fgroup > .fstr{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .fpop,.fpop-okno{transition-duration:.01ms}
}

/* Na telefóne sú „Zoradiť" a „Filter" jediné dve tlačidlá nad zoznamom –
   polovica šírky každému je väčší cieľ než dva útvary pri okraji a riadok
   sa prestane zalamovať podľa dĺžky práve zvoleného zoradenia. */
@media (max-width:640px){
  .kat-top{gap:8px}
  .searchbox{flex:1 1 100%}
  /* Polovica šírky každému. `flex-basis:50%` s `min-width:0` a orezaním je
     tu podstatné: pri základe z obsahu je „Zoradiť: odporúčané" širšie než
     „Filter", riadok sa práve zaplní a rásť ani zmenšovať sa už nemá kam –
     výsledkom bola nesúmerná dvojica 41 % ku 59 %. */
  .kat-top > .vyber,.kat-top > .fbtn{flex:1 1 50%;min-width:0;overflow:hidden}
  .kat-top .vyber select{width:100%;text-overflow:ellipsis}
  .kat-top .fbtn{justify-content:center}
}

/* Koľko dávať. Stojí nad hodnotením – je to to, čo zákazník s kartou zvieraťa
   hľadá ako prvé, a bez neho je zloženie len zoznam surovín. */
.pd-davka .perex{font-size:.95rem;color:var(--ink);font-weight:600}
.pd-davka .hint{margin-top:6px}

/* ==========================================================================
   Spodná lišta katalógu (len telefón)
   --------------------------------------------------------------------------
   Prečo vôbec je: meranie 16. 9. 2026 na 375 × 812 ukázalo, že pri palci
   nebola ani jedna položka navigácie — druhy zvierat aj filter sú v toku
   stránky a pri rolovaní odídu, takže prepnúť z psa na mačku znamenalo vyjsť
   úplne hore. Šesť z desiatich porovnávaných eshopov má spodnú lištu; zhodne
   4–5 položiek a 53–73 px.

   Lišta nič nekopíruje. Každý tab otvára ten istý prvok, ktorý katalóg už má
   (panel filtrov, košík, chat, účet) — dve kópie tej istej veci by sa raz
   rozišli, presne ako sa to stalo pri otváracích hodinách.
   ========================================================================== */

.mlista{display:none}
.mdok-chip{display:none}

@media(max-width:900px){

  body.ma-mlistu .mlista{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:140;
    background:var(--sklo-lista);
    -webkit-backdrop-filter:var(--sklo-lista-blur);backdrop-filter:var(--sklo-lista-blur);
    border-top:1px solid var(--sklo-ram);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }

  /* Kvapka „späť hore". Nie je to samostatná bublina — je to vypuklina hornej
     hrany lišty, rovnaké sklo aj rám. Sadne si do medzery medzi stĺpcami
     kariet, takže nezakrýva tovar, a ukáže sa len pri rolovaní nahor, teda
     v tom istom pohybe, ktorým človek hľadá cestu späť. */
  .mhore{
    position:absolute;left:50%;bottom:100%;margin-bottom:-1px;z-index:2;
    width:54px;height:27px;padding:7px 0 0;border:0;
    display:grid;place-items:center;cursor:pointer;color:var(--red);
    background:var(--sklo);-webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
    border-top:1px solid var(--sklo-ram);
    border-left:1px solid var(--sklo-ram);
    border-right:1px solid var(--sklo-ram);
    border-radius:27px 27px 0 0;
    transform:translateX(-50%) scale(1.4,.04);transform-origin:50% 100%;
    opacity:0;pointer-events:none;transition:opacity .18s;
  }
  .mhore[hidden]{display:none}
  .mhore.je{opacity:1;pointer-events:auto;animation:mkvapka .58s cubic-bezier(.32,.72,0,1) forwards}
  .mhore svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.3;
    stroke-linecap:round;stroke-linejoin:round}
  @keyframes mkvapka{
    0%  {transform:translateX(-50%) scale(1.4,.04)}
    32% {transform:translateX(-50%) scale(.84,1.24)}
    58% {transform:translateX(-50%) scale(1.12,.88)}
    82% {transform:translateX(-50%) scale(.97,1.05)}
    100%{transform:translateX(-50%) scale(1,1)}
  }

  /* Dok. Je nad tabmi a objaví sa, len keď má čo povedať — zvolené filtre
     alebo rozrobené porovnanie. Kým nie je čo, má nula pixelov. */
  .mdok{display:flex;align-items:center;gap:6px;padding:7px 10px;
    border-bottom:1px solid var(--line);background:var(--bg);
    overflow-x:auto;scrollbar-width:none;
    animation:mdokVstup .32s cubic-bezier(.32,.72,0,1) both}
  .mdok[hidden]{display:none}
  .mdok::-webkit-scrollbar{display:none}
  @keyframes mdokVstup{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}

  /* Telo pilulky nie je tlačidlo — rušiť vie len krížik. Predtým bola
     tlačidlom celá a mierne netrafený prst zhodil filter. */
  .mdok-chip{display:inline-flex;align-items:center;gap:5px;min-height:30px;
    padding:0 5px 0 11px;border:0;border-radius:999px;
    background:var(--red-soft);color:var(--red-dk);
    font:inherit;font-size:.74rem;font-weight:600;white-space:nowrap;flex:0 0 auto}
  .mdok-chip .mdok-x{all:unset;box-sizing:border-box;
    display:grid;place-items:center;width:20px;height:20px;cursor:pointer;
    border-radius:999px;background:rgba(225,33,31,.14);color:inherit;
    font-size:.8rem;line-height:1;position:relative}
  /* Dotyková plocha 44 px aj pri 20 px krížiku — neviditeľné rozšírenie,
     ten istý trik, aký má koliesko porovnania na karte. */
  .mdok-chip .mdok-x::after{content:'';position:absolute;inset:-12px}
  .mdok-chip.je-porovnanie{background:var(--red);color:var(--na-cervenom)}
  .mdok-chip.je-porovnanie .mdok-x{background:rgba(255,255,255,.28)}
  .mdok-chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round}
  /* Pravá strana doku: buď porovnanie, alebo počet nájdených. Zarovnanie
     drží obal, nie samotný počet — inak by malo `margin-left:auto` dvoch
     vlastníkov a pri porovnaní by sa pilulka odrolovala mimo obrazovku. */
  .mdok-vpravo{margin-left:auto;padding-left:8px;flex:0 0 auto;
    display:flex;align-items:center;position:sticky;right:0;
    background:linear-gradient(90deg, transparent, var(--bg) 12px)}
  .mdok-vpravo:empty{padding:0}
  .mdok-pocet{flex:0 0 auto;
    font-size:.7rem;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}

  /* Päť tabov po 20 %. Pri 375 px to je 75 px na tab — presne toľko má Alza
     a je to s rezervou nad 44 px, ktoré žiada Apple aj WCAG 2.5.5. */
  .mtaby{display:grid;grid-template-columns:repeat(5,1fr)}
  .mtab{display:flex;flex-direction:column;align-items:center;gap:3px;
    min-height:60px;padding:7px 1px 9px;border:0;background:none;cursor:pointer;
    font:inherit;font-size:.6rem;font-weight:600;line-height:1.15;
    color:var(--ink-soft);text-align:center;transition:color .2s}
  .mtab-ram{position:relative;display:grid;place-items:center;width:46px;height:30px;
    border-radius:999px;transition:background .25s}
  .mtab.on{color:var(--red)}
  .mtab.on .mtab-ram{background:var(--red-soft)}
  .mtab svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;
    transition:transform .34s cubic-bezier(.34,1.56,.64,1)}
  .mtab.on svg{transform:scale(1.12)}
  /* Ikona zvieraťa je silueta zo `sprite.svg`, nie čiarová kresba – tá sa
     vypĺňa, nie obkresľuje. */
  .mtab svg.mtab-zviera{fill:currentColor;stroke:none;width:34px;height:34px;margin:-2px 0}
  /* Hlava plemena namiesto siluety druhu (`ikonaPlemena` v rezervacia.js) – tá istá kresba ako v karte
     zvieraťa; maska berie farbu z currentColor, takže sa pri zvolenom tabe zafarbí na červeno. */
  .mtab-ram.ma-plemeno{--plemeno-r:36px}
  .mtab-ram.ma-plemeno::before{margin:-3px 0;transition:transform .34s cubic-bezier(.34,1.56,.64,1)}
  .mtab.on .mtab-ram.ma-plemeno::before{transform:scale(1.12)}
  .mtab-pocet{position:absolute;top:-4px;right:-1px;min-width:16px;height:16px;
    padding:0 4px;border-radius:999px;background:var(--red);color:var(--na-cervenom);
    font-size:.54rem;font-weight:700;line-height:16px;letter-spacing:0;
    text-align:center;font-family:var(--text)}
  .mtab-pocet[hidden]{display:none}
  /* Bodka bez čísla: neprečítaný oznam alebo správa. Číslo tu nedáva zmysel –
     oznam je vždy jeden a počet správ už nesie tlačidlo chatu. */
  .mtab-bodka{position:absolute;top:-1px;right:2px;width:9px;height:9px;border-radius:999px;
    background:var(--red);box-shadow:0 0 0 2px var(--sklo)}
  .mtab-bodka[hidden]{display:none}

  /* Obsah musí mať kam skončiť, inak lišta prekryje pätku aj posledný riadok
     kariet. Výška sa dopĺňa skriptom do `--mlista-h`, lebo dok ju mení.

     `env(safe-area-inset-bottom)` sa k nej NEPRIPOČÍTAVA: skript meria
     `offsetHeight`, čiže aj odsadenie pre čiarku domov, ktoré lišta nesie
     vo svojom vnútri. Pripočítať ho druhý raz znamenalo 34 px prázdna pod
     každou obrazovkou. To isté platí všade, kde sa proti lište niečo
     umiestňuje. */
  body.ma-mlistu{padding-bottom:var(--mlista-h, 62px)}

  /* Plávajúce prvky si sadnú nad lištu, nie na ňu. */
  body.ma-mlistu .chat-btn{bottom:calc(14px + var(--mlista-h, 62px))}

  /* Lišta porovnania sa do doku sťahuje celá – pôvodný pás by stál presne
     na taboch. */
  body.ma-mlistu .cmpbar{display:none}

  /* Panel filtrov a veľké okno idú nad lištu (z-index 200), takže lištu
     prekryjú samy. Košíkové okno a detail produktu tiež. Nič z toho tu
     netreba prepínať – je to tu napísané, aby to niekto nehľadal. */
}

/* Vysúvací panel katalógu na telefóne. Končí nad lištou, nie pod ňou —
   lišta zostáva vidieť aj použiteľná, tak ako to robí Košík.cz. */
.mkat{display:none}
@media(max-width:900px){
  /* Kontajner je cez celú obrazovku, ale sám nechytá ťuknutia — chytá ich
     tieň a okno. Bez toho leží priehľadná plocha NAD spodnou lištou (z-index
     150 proti 140) a zákazník sa na taby netrafí: ťuknutie na „Katalóg"
     skončí na paneli a panel sa nezavrie. Presne to sa dialo — overené
     `elementFromPoint` nad tabom: vracalo tlačidlo z panela, nie tab. */
  .mkat{display:block;position:fixed;inset:0;z-index:150;pointer-events:none}
  .mkat[hidden]{display:none}
  /* Tieň končí nad lištou, rovnako ako okno — lišta má zostať vidieť aj
     použiteľná, tak ako to má návrh. */
  .mkat-tien{position:absolute;top:0;left:0;right:0;
    bottom:var(--mlista-h, 62px);
    background:rgba(20,16,15,.5);pointer-events:auto;
    opacity:0;transition:opacity .3s}
  .mkat.je-otvorene .mkat-tien{opacity:1}
  .mkat-okno{position:absolute;left:0;right:0;pointer-events:auto;
    bottom:var(--mlista-h, 62px);
    max-height:76%;display:flex;flex-direction:column;overflow:hidden;
    background:var(--panel);border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:var(--shadow-lg);
    transform:translateY(102%);transition:transform .42s cubic-bezier(.32,.72,0,1)}
  .mkat.je-otvorene .mkat-okno{transform:none}
  /* Vzhľad úchytky je spoločný (`.panel-uchyt` v `styl.css`) — tu už
     nemá čo mať vlastné rozmery ani farbu. */
  .mkat-hl{display:flex;align-items:center;gap:10px;padding:12px 18px 10px;
    border-bottom:1px solid var(--line)}
  .mkat-hl h2{margin:0;font-size:1rem;letter-spacing:.02em}
  .mkat-x{margin-left:auto;width:44px;height:44px;border:0;background:none;
    color:var(--ink-soft);font-size:1.6rem;line-height:1;cursor:pointer}
  .mkat-telo{padding:14px 18px 20px;overflow-y:auto;overscroll-behavior:contain}
  /* V paneli stoja dlaždice druhov v jednom rade po piatich, rovnako ako na
     veľkej obrazovke – v dvoch stĺpcoch by piaty ostal sám. */
  .mkat-telo .druh-tabs{margin-bottom:16px}
  .mkat-telo .kat-kategorie{margin:0}
  body.mkat-otvoreny{overflow:hidden}
}

/* ---------- obrazovka hľadania (telefón) ----------
   Vrstva cez celú plochu: výsledky zarovnané NADOL k poľu, pole na spodku nad
   klávesnicou. Predchádzajúci pokus pole len pripínal cez `position:fixed`
   a na iPhone skončilo hore nad obsahom — hlavička má `backdrop-filter`
   a prvok s filtrom je pre svojich fixed potomkov obsahujúcim blokom, takže
   `bottom:0` bol spodok hlavičky, nie obrazovky.

   Výšku aj posun podáva skript z `visualViewport` (`--mhl-v`, `--mhl-t`):
   na iOS sa `innerHeight` pri otvorení klávesnice nezmení, takže `100vh`
   ani `100dvh` tu nepomôžu. */
.mhl{display:none}
.mhl[hidden]{display:none}

@media(max-width:900px){
  /* Lišta počas písania nie je potrebná — vrstva je nad ňou a má vlastné
     „Zrušiť". Zamknutie rolovania drží pozadie na mieste. */
  body.mhl-otvorene{overflow:hidden}

  body.mhl-otvorene .mhl{
    display:flex;flex-direction:column;
    position:fixed;left:0;right:0;top:var(--mhl-t, 0px);
    height:var(--mhl-v, 100%);z-index:170;
    background:var(--bg-soft)}

  /* Pole zostáva hore a výsledky sa rolujú pod ním, zhora nadol. */
  .mhl-vysledky{
    flex:1 1 auto;min-height:0;overflow-y:auto;
    display:flex;flex-direction:column;justify-content:flex-start;
    gap:7px;padding:12px 11px}
  .mhl-zoznam{display:flex;flex-direction:column;gap:7px}

  .mhl-nadpis{
    font-family:var(--head);text-transform:uppercase;letter-spacing:.09em;
    font-size:.62rem;color:var(--ink-soft);margin:0 0 2px;padding-left:2px}
  .mhl-prazdno,.mhl-viac{
    font-size:.78rem;color:var(--ink-soft);margin:0;padding:0 2px;line-height:1.5}

  .mhl-r{
    all:unset;box-sizing:border-box;display:flex;gap:9px;align-items:center;
    background:var(--panel);border:1px solid var(--line);border-radius:11px;
    padding:8px;cursor:pointer}
  .mhl-r:active{border-color:var(--red)}
  .mhl-obr{
    width:44px;height:44px;flex:0 0 auto;border-radius:8px;overflow:hidden;
    background:var(--bg-soft);display:grid;place-items:center;color:var(--line-2)}
  .mhl-obr img{width:100%;height:100%;object-fit:contain;display:block}
  .mhl-obr svg{width:22px;height:22px;fill:currentColor}
  .mhl-t{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:1px}
  .mhl-t b{
    font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;
    font-size:.58rem;color:var(--red-dk);font-weight:600}
  .mhl-n{
    font-size:.76rem;font-weight:600;line-height:1.3;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mhl-d{font-size:.64rem;font-weight:600}
  .mhl-c{
    font-family:var(--head);font-size:.86rem;white-space:nowrap;flex:0 0 auto;
    color:var(--ink)}

  /* Pás s poľom je hore a nepriehľadný. Sklo by cezeň púšťalo výsledky a pri
     rolovaní by sa text miešal s textom. */
  .mhl-pole{
    flex:0 0 auto;display:flex;gap:8px;align-items:center;
    padding:calc(9px + env(safe-area-inset-top, 0px)) 11px 9px;
    background:var(--panel);border-bottom:1px solid var(--line)}
  /* Pole je to isté `.searchbox` ako nad mriežkou, len tu vyzerá inak. */
  .mhl-pole .searchbox{flex:1 1 auto;min-width:0;margin:0}
  .mhl-pole .searchbox input{
    height:42px;padding-top:0;padding-bottom:0;
    border-radius:999px;border:1.5px solid var(--red);background:var(--bg)}
  .mhl-zrus{
    all:unset;box-sizing:border-box;flex:0 0 auto;
    display:inline-flex;align-items:center;min-height:44px;padding:0 4px 0 6px;
    color:var(--red-dk);font-family:var(--text);font-size:.82rem;font-weight:600;
    cursor:pointer}

  /* Panel filtrov je spodný list, nie celá obrazovka: končí nad lištou,
     takže taby ostanú vidieť a dajú sa ťukať aj s otvoreným filtrom. Ten
     istý zápis už používa okno panela Katalóg. */
  body.ma-mlistu .filters:not([hidden]){
    top:0;bottom:var(--mlista-h, 62px);
    height:auto;max-height:none}

  /* Chat je piaty tab, takže lišta pod ním ostáva. Predtým sa skrývala —
     a zákazník, ktorý si otvoril chat, sa z neho nemal ako vrátiť inam než
     šípkou späť. Okno sa preto podreže nad lištu; bez toho by lišta ležala
     na ňom, lebo `.chat-box` má z-index 120 a lišta 140. */
  /* Platí na otvorený chat vždy, nielen na celoobrazovkový. Otvorenie je
     odkrytie (`box.hidden = false` v chat.js) — trieda `open` na `.chat-box`
     neexistuje, takže pravidlo na ňu by nesadlo nikdy. */
  body.ma-mlistu #chatBox:not([hidden]),
  body.ma-mlistu.chat-cely .chat-box{
    bottom:var(--mlista-h, 62px);
    height:auto;
    /* Nábehová animácia `celyIn` (chat.css) posúva okno o 16 px nadol a ten
       posun tu ostával aj po dobehnutí — okno spodkom vyčnievalo pod lištu.
       Animácia prebíja obyčajné `transform:none`, tak sa na telefóne s lištou
       vypína celá. Chat sa aj tak otvára ťuknutím na tab, kde je pohyb, a
       o jeden posun navyše nikto nepríde. */
    animation:none;transform:none}
}

/* ---------- čítanie čiarového kódu ----------
   Obraz z kamery je len na obrazovke; nikam sa neposiela a nič sa z neho
   neukladá. Von ide jedine nájdený kód, a to do adresy produktu. */
.hladanie-kod{display:none}
.hladanie-kod[hidden]{display:none}
@media(max-width:900px){
  .hladanie-kod:not([hidden]){position:absolute;right:8px;top:50%;transform:translateY(-50%);
    display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:999px;
    background:var(--red-soft);color:var(--red);cursor:pointer;padding:0}
  /* Dotyková plocha je 48 px aj pri 36 px kolieske. */
  .hladanie-kod::after{content:'';position:absolute;inset:-6px;border-radius:999px}
  .hladanie-kod svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}
  .searchbox input{padding-right:52px}
}

/* Pozadie je najtmavšia farba webu, nie čierna – projekt čiernu nemá
   a hľadáčik ju nepotrebuje, video ho aj tak prekryje. */
.kodvrstva{position:fixed;inset:0;z-index:360;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s}
.kodvrstva[hidden]{display:none}
.kodvrstva.je-otvorena{opacity:1}
.kodvrstva video{width:100%;height:100%;object-fit:cover}
/* Rámček nie je dekorácia: hovorí, kam obal namieriť. Bez neho ľudia mieria
   na stred obrazovky, kde kamera neostrí. */
.kod-ram{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(74vw, 320px);aspect-ratio:1.6;border:2px solid var(--bg);border-radius:14px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
.kod-hlaska{position:absolute;left:16px;right:16px;bottom:calc(28px + env(safe-area-inset-bottom, 0px));
  margin:0;text-align:center;color:var(--bg);font-size:.92rem;font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,.6)}
.kod-zavri{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top, 0px));
  width:44px;height:44px;border:0;border-radius:999px;background:rgba(0,0,0,.45);
  color:var(--bg);font-size:1.7rem;line-height:1;cursor:pointer}

/* ==========================================================================
   Telefón: spodná lišta NAHRÁDZA pôvodnú navigáciu
   --------------------------------------------------------------------------
   Prvá verzia lištu len pridala a zákazník mal potom to isté dvakrát: druhy
   zvierat v toku aj v lište, chat ako plávajúcu bublinu aj ako tab, a nad
   tovarom všetko, čo tam bolo predtým — prvý produkt na 701 px. Toto je
   oprava: čo prevzala lišta, zo stránky mizne.
   ========================================================================== */
@media(max-width:900px){

  /* ----- horná lišta: logo, hľadanie, účet ----- */
  /* Menu ani telefón tu nie sú. Kontakt a navigáciu na predajňu nesie tab
     Chat, informačné stránky pätička — burger v katalógu viedol štyrmi
     z piatich položiek preč z obchodu. */
  body.katalog.ma-mlistu #hdr .burger,
  body.katalog.ma-mlistu #hdr .nav-links,
  body.katalog.ma-mlistu #hdr .nav-cta{display:none}

  body.katalog.ma-mlistu #hdr{background:var(--sklo);
    padding-top:env(safe-area-inset-top, 0px);
    -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur)}
  body.katalog.ma-mlistu #hdr .nav{display:flex;align-items:center;gap:8px;
    padding-top:9px;padding-bottom:9px}
  body.katalog.ma-mlistu #hdr .logo{flex:0 0 auto}
  body.katalog.ma-mlistu #hdr .logo-txt{display:none}
  body.katalog.ma-mlistu #hdr .logo img{width:38px;height:38px}
  body.katalog.ma-mlistu #hdr .nav-vpravo{flex:0 0 auto;margin:0}
  body.katalog.ma-mlistu #hdr .nav-ucet span{display:none}
  body.katalog.ma-mlistu #hdr .nav-ucet{width:40px;height:40px;padding:0;justify-content:center}

  body.katalog.ma-mlistu #hdr .searchbox{flex:1 1 auto;min-width:0}
  body.katalog.ma-mlistu #hdr .searchbox input{padding-top:9px;padding-bottom:9px;
    border-radius:999px;background:var(--bg)}

  /* ----- z toku stránky mizne to, čo prevzala lišta alebo panel ----- */
  /* Druhy zvierat, kategórie, „Ako to funguje" a odkaz sú v paneli pod tabom
     Katalóg; filter je vlastný tab. Skript ich presúva, CSS len poistí, že
     sa medzi presunmi nemihnú v toku. */
  body.ma-mlistu .kat-wrap > #druhTabs,
  body.ma-mlistu .kat-wrap > #katKategorie,
  body.ma-mlistu .kat-wrap > #katAko,
  body.ma-mlistu .kat-top > #odkaz,
  body.ma-mlistu .kat-top > .fbtn{display:none}

  /* Riadok nad mriežkou ostáva prázdny — všetko z neho odišlo. */
  body.ma-mlistu .kat-top{display:none}

  /* Hlavička výpisu nesie druh, počet a zoradenie, ako v návrhu. */
  body.ma-mlistu .kat-hlava{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding-top:4px}
  body.ma-mlistu .kat-hlava .kat-count{margin:0;font-size:.82rem}
  body.ma-mlistu .kat-hlava .vyber{margin-left:auto;flex:0 0 auto}
  body.ma-mlistu .kat-hlava .vyber .vyber-btn{padding:7px 30px 7px 12px;font-size:.8rem}
  /* Stránkovanie hore je na telefóne navyše — to isté je pod mriežkou. */
  body.ma-mlistu .kat-hlava .str-cisla{display:none}

  /* ----- plávajúce prvky, ktoré sa stali tabmi ----- */
  /* Košík je tab Rezervácia, chat je tab Chat. Dva chaty nad sebou boli
     najviditeľnejší dôsledok toho, že sa lišta len pridala. */
  body.ma-mlistu .chat-btn{display:none}

  /* Pás „Vyberať pre" je na telefóne jeden riadok pilulkami, nie blok
     s vlastným nadpisom — zákazník, ktorý si zviera vyplnil, už vie, načo to
     je, a nad tovarom má byť tovar. */
  body.ma-mlistu .moje-zvierata{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;margin:0 0 10px;padding-bottom:2px}
  body.ma-mlistu .moje-zvierata::-webkit-scrollbar{display:none}
  body.ma-mlistu .moje-zvierata .mz-popis{flex:0 0 auto;font-size:.66rem}
  body.ma-mlistu .moje-zvierata .mz-btn{flex:0 0 auto;padding:6px 12px}
  body.ma-mlistu .moje-zvierata .mz-btn b{font-size:.78rem}
  body.ma-mlistu .moje-zvierata .mz-btn span{font-size:.62rem}

  /* Panel katalógu teraz nesie aj „Ako to funguje" a odkaz, tak nech v ňom
     sedia ako samostatné bloky, nie nalepené na kategórie. */
  .mkat-telo > #katAko{margin:16px 0 0}
  .mkat-telo > #odkaz{display:block;width:100%;margin-top:12px}
}

/* ==========================================================================
   Mobilná horná lišta a panel Katalóg — podľa odsúhlaseného návrhu
   --------------------------------------------------------------------------
   Návrh: artifact „Hľadanie pri palci". Prvá verzia sa od neho líšila, lebo
   som na mobilné miesta presúval hotové prvky z veľkej obrazovky — každý si
   so sebou niesol svoju veľkosť aj svoj vzhľad, takže bublinky mali tri rôzne
   výšky a dlaždice sa orezávali. Tu má mobil vlastný markup, ale kreslí ho
   z tých istých dát (`kategorieZoznam`, rad `#druhTabs`) a klikanie ide do
   tých istých obslúh (delegované `[data-d]`, `[data-kat]`).
   ========================================================================== */

.mvrch{display:none}
.mvrch[hidden]{display:none}

@media(max-width:900px){

  /* Pôvodná hlavička na telefóne v katalógu nie je — nahrádza ju `.mvrch`. */
  body.ma-mlistu #hdr{display:none}

  /* `sticky`, nie `fixed`: drží sa rovnako navrchu, ale ostáva v toku, takže
     telu netreba dopočítavať odsadenie ani bezpečnú zónu pod čelom telefónu. */
  /* Odsadenie zhora je výška stavového riadka telefónu (hodiny, wifi,
     batéria). Stránka pod neho siaha až od `viewport-fit=cover` — dovtedy
     boli všetky `env(safe-area-inset-*)` v tomto súbore nulové a nerobili
     nič. Vďaka tomu je pruh pod hodinami v tej istej farbe ako lišta a
     nevyzerá odseknuto. */
  body.ma-mlistu .mvrch{
    display:block;position:sticky;top:0;z-index:60;
    background:var(--sklo);padding-top:env(safe-area-inset-top, 0px);
    -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
    border-bottom:1px solid var(--sklo-ram)}

  .mvrch-rad{display:flex;align-items:center;gap:7px;padding:9px 10px}

  /* Spoločný základ všetkých troch. Pevná výška je zámer: „pilulky v jednej
     lište majú rovnakú výšku" je pravidlo projektu a prvá verzia ho porušila. */
  .mbub{
    display:flex;align-items:center;gap:6px;flex:0 0 auto;
    height:38px;padding:0 12px;box-sizing:border-box;
    background:var(--panel);border:1px solid var(--line);border-radius:999px;
    box-shadow:var(--tien-jemny);color:var(--ink-2);text-decoration:none;
    transition:transform .18s, box-shadow .18s}
  .mbub:active{transform:translateY(1px)}

  .mbub-logo{padding:0 6px;gap:0}
  .mbub-logo img{width:26px;height:26px;object-fit:contain;display:block}

  .mbub-hladat{flex:1 1 auto;min-width:0;padding:0 6px 0 12px}
  .mbub-pole{
    all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;
    flex:1 1 auto;min-width:0;height:100%;cursor:pointer;
    color:var(--ink-soft);font-family:var(--text);font-size:.82rem}
  .mbub-pole svg{width:17px;height:17px;flex:0 0 auto}
  .mbub-pole span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .mbub-kod{
    all:unset;box-sizing:border-box;display:grid;place-items:center;flex:0 0 auto;
    width:26px;height:26px;border-radius:999px;cursor:pointer;
    background:var(--red-soft);color:var(--red-dk)}
  .mbub-kod svg{width:15px;height:15px;fill:none;stroke:currentColor;
    stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  /* `all:unset` prepíše aj `display`, takže atribút `hidden` prestane platiť —
     a tlačidlo sa ukázalo aj tam, kde prehliadač čítanie kódov nevie. Ťuknutie
     potom nerobilo nič, lebo `kodOtvor` sa hneď vráti. Je to pasca zapísaná
     v CLAUDE.md a chytila ma druhýkrát. */
  .mbub-kod[hidden]{display:none}

  .mbub-ucet{
    width:38px;padding:0;justify-content:center;
    background:var(--red-soft);border-color:var(--red-soft);color:var(--red-dk)}
  .mbub-ucet svg{width:18px;height:18px}
  /* Zvonček chatu: prečiarknutý, keď je zvuk vypnutý. */
  .mbub-zvoncek .zvoncek-ciara{display:none}
  .mbub-zvoncek.vypnuty .zvoncek-ciara{display:inline}
  /* Text musí v DOM ostať – `ucet.js` doň píše meno prihláseného a keby ho
     nenašiel, prepísal by `textContent` celého odkazu a zmazal ikonu. */
  

  .mvrch-mimo{
    display:flex;align-items:center;gap:6px;margin:0;
    padding:5px 13px 6px;font-size:.7rem;font-weight:600;
    color:var(--pozor-text);background:var(--pozor-plocha);
    border-top:1px solid var(--pozor-ram)}
  .mvrch-mimo[hidden]{display:none}
  .mvrch-mimo::before{content:'';width:7px;height:7px;border-radius:999px;
    background:currentColor;flex:0 0 auto}

  /* ----- telo panela Katalóg ----- */
  /* Päť rovnakých stĺpcov, nie zväčšené dlaždice z veľkej obrazovky: tie sa
     pri piatich druhoch orezali o pravý okraj. */
  .mkat-druhy{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
  .mkat-zv{
    all:unset;box-sizing:border-box;display:flex;flex-direction:column;
    align-items:center;gap:3px;padding:8px 2px 7px;cursor:pointer;
    border:1.5px solid var(--line);border-radius:10px;background:var(--bg-soft);
    font-family:var(--head);text-transform:uppercase;letter-spacing:.03em;
    font-size:.58rem;font-weight:600;color:var(--ink-2);text-align:center;
    line-height:1.1;transition:border-color .2s, color .2s, background .2s}
  .mkat-zv svg{width:23px;height:23px;flex:0 0 auto;fill:currentColor}
  .mkat-zv.on{border-color:var(--red);color:var(--red-dk);background:var(--red-soft)}

  .mkat-nad{
    font-family:var(--head);text-transform:uppercase;letter-spacing:.09em;
    font-size:.66rem;font-weight:500;color:var(--ink-soft);margin:16px 0 8px}

  /* Dva stĺpce, aby boli všetky kategórie vidieť naraz. Vodorovné rolovanie
     v paneli znamená, že o časti ponuky zákazník ani nevie. */
  .mkat-kat{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .mkat-kk{
    all:unset;box-sizing:border-box;display:flex;align-items:center;gap:9px;
    padding:9px 11px;cursor:pointer;border:1.5px solid var(--line);
    border-radius:999px;background:var(--bg-soft);
    font-family:var(--head);text-transform:uppercase;letter-spacing:.03em;
    font-size:.68rem;font-weight:600;color:var(--ink-2);
    transition:border-color .2s, color .2s, background .2s}
  .mkat-kk svg{width:20px;height:20px;flex:0 0 auto}
  .mkat-kk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mkat-kk.on{border-color:var(--red);color:var(--red-dk);background:var(--red-soft)}
}

/* ==========================================================================
   Hlavička výpisu a panel filtrov na telefóne — podľa návrhu
   ========================================================================== */

/* Na veľkej obrazovke tieto tri prvky nie sú: ten istý obsah tam má svoje
   miesto (rad dlaždíc druhov, pás „Vyberať pre", riadok nad mriežkou). */
.kat-druh,.kat-pre,.kat-zorad{display:none}

@media(max-width:900px){
  /* Riadok zľava doprava. Prebíja to `@media(max-width:560px)` vyššie, ktoré
     hlavičku skladá pod seba a centruje — to malo platiť pre čísla strán,
     nie pre túto hlavičku. */
  body.ma-mlistu .kat-hlava{
    display:flex;align-items:center;flex-wrap:wrap;
    justify-items:stretch;text-align:left}
  body.ma-mlistu .kat-hlava .kat-count{
    margin:0;text-align:left;color:var(--ink-soft)}
  body.ma-mlistu .kat-hlava .str-cisla{display:none}

  body.ma-mlistu .kat-druh{
    display:block;font-family:var(--head);text-transform:uppercase;
    letter-spacing:.02em;color:var(--ink)}
  body.ma-mlistu .kat-druh[hidden]{display:none}

  /* „Pre Lucy" — pilulka medzi počtom a Zoradiť, krížikom sa vypne. */
  body.ma-mlistu .kat-pre{
    display:inline-flex;align-items:center;gap:5px;min-height:28px;
    padding:0 4px 0 9px;border-radius:999px;
    background:var(--red-soft);color:var(--red-dk);
    font-size:.7rem;font-weight:600;white-space:nowrap}
  body.ma-mlistu .kat-pre[hidden]{display:none}
  .kat-pre svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
  .kat-pre-x{all:unset;box-sizing:border-box;position:relative;
    display:grid;place-items:center;width:19px;height:19px;cursor:pointer;
    border-radius:999px;background:var(--red-soft-2);font-size:.8rem;line-height:1}
  .kat-pre-x::after{content:'';position:absolute;inset:-12px}

  /* Úzke tlačidlo namiesto širokého rozbaľováka s celým textom voľby. */
  body.ma-mlistu .kat-zorad{
    display:inline-flex;align-items:center;gap:6px;margin-left:auto;
    cursor:pointer;border-radius:999px;
    font-family:var(--text);font-weight:600;color:var(--ink-2)}
  body.ma-mlistu .kat-zorad[hidden]{display:none}
  .kat-zorad svg{width:14px;height:14px;flex:0 0 auto}
  /* Pôvodný výber ostáva v DOM ako zdroj možností, len ho nevidno. */
  body.ma-mlistu .kat-top .vyber{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%)}

  /* ----- panel filtrov ako spodný list ----- */
  /* Rozbalenie do veľkého okna je na telefóne druhá celoobrazovková verzia
     toho istého filtra — obsah sa nestráca, `#filterBody` je stále ten istý
     prvok, len si ho okno nemá načo požičiavať. */
  body.ma-mlistu #frozbal{display:none}

  body.ma-mlistu .filters:not([hidden]){
    top:auto;max-height:82%;height:auto;
    border-radius:20px 20px 0 0;overflow:hidden;
    box-shadow:0 -10px 34px rgba(78,58,44,.28)}
  /* Zatmavenie katalógu za panelom. Pseudoprvok, nie ďalší `<div>`: panel je
     jediné, čo sa otvára, tak nech si tieň nesie sám. */
  body.ma-mlistu .filters.open::before{
    content:'';position:fixed;inset:0;z-index:-1;background:rgba(20,16,15,.44)}
  /* Úchytka ako na paneli Katalógu — to isté gesto, ten istý tvar. */
  body.ma-mlistu .filters.open .filters-head::before{
    content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:36px;height:4px;border-radius:999px;background:var(--line-2)}
  body.ma-mlistu .filters .filters-head{position:relative;padding-top:20px}
}

/* ==========================================================================
   V appke sedí lišta na spodnej hrane, rovnako ako na webe
   --------------------------------------------------------------------------
   Do 21. 9. 2026 bola v appke plávajúcim panelom s medzerou po stranách.
   Vyzeralo to ako natívna appka, ale plochu dole to len míňalo a od webu sa
   to bezdôvodne líšilo — jeden prvok mal dva tvary. Dnes je layout jeden
   a tento blok rieši už len jedinú vec: aby lišta nesadla na systémové
   ovládanie na spodku obrazovky.

   Na iPhone je to čiarka domov a `env(safe-area-inset-bottom)` je pri nej
   34 px. Na Androide to systém hlási len vtedy, keď appka kreslí od hrany
   po hranu; inak vráti nulu a pri gestovom ovládaní by spodné pixely lišty
   padli do pruhu, ktorým sa ťahá domov. Preto `max(..., 8px)`: kde systém
   povie svoje, platí jeho číslo, inak je tam aspoň malý odstup.

   Sklo lišty ide až po hranu — odsadenie je vnútri neho, takže pod čiarkou
   domov nie je holé pozadie, ale tá istá vrstva.
   ========================================================================== */
@media(max-width:900px) and (display-mode: standalone){
  /* Odsadenie pre čiarku domov je 34 px, čo je viac, než treba — Facebook
     ide tesnejšie a vedľa neho bola naša lišta vysoko. Uberá sa z neho
     10 px; `max` drží spodnú hranicu aj tam, kde systém nehlási nič
     (Android bez kreslenia od hrany po hranu), nech spodok lišty nepadne
     do pruhu, ktorým sa ťahá domov. */
  body.ma-mlistu .mlista{
    padding-bottom:max(calc(env(safe-area-inset-bottom, 0px) - 10px), 8px)}

  /* A ešte kúsok zvnútra tlačidla. Odsadenie sa neuberá zospodu naslepo —
     `min-height` by ho zjedla a ikony by zostali, kde boli; preto sa mení
     celé naraz. V prehliadači to neplatí, tam je pod lištou panel Safari. */
  body.ma-mlistu .mtab{padding:9px 1px 3px;min-height:54px}
}

/* ---------- kedy si to vyzdvihnem ----------
   Tri pilulky a pod „Iný deň" desať najbližších otvorených dní. Rovnaké
   pilulky ako vo filtri — je to tá istá vec, voľba z krátkeho zoznamu. */
.vyzdvih[hidden]{display:none}
/* `.vyzdvih-pilulky` a `.vyzdvih-kal` sú od 16. 10. 2026 v styl.css (spoločné pre košík a stránku objednávky – Zmena prevzatia). */

/* ---------- drobnosti z kontroly ----------
   `all:unset` zhodí aj obrysový prstenec fokusu zo `styl.css`. Bez neho sa
   po týchto tlačidlách nedá chodiť tabulátorom — človek nevidí, kde je. */
.vyzdvih-pilulky button:focus-visible,
.vyzdvih-kal button:focus-visible,
.mkat-zv:focus-visible,
.mkat-kk:focus-visible,
.mbub-pole:focus-visible,
.mbub-kod:focus-visible,
.mucet-appka:focus-visible,
.mhl-r:focus-visible,
.mhl-zrus:focus-visible,
.mdok-x:focus-visible,
.kat-pre-x:focus-visible,
.kat-zorad:focus-visible{outline:2.5px solid var(--red);outline-offset:2px}

@media(max-width:900px){
  /* Porovnanie s jediným krmivom sa nedá otvoriť — pilulka to musí aj
     vyzerať, inak je to tlačidlo, ktoré po ťuknutí mlčí. */
  .mdok-chip.je-porovnanie.nedokoncene{
    background:var(--red-soft);color:var(--red-dk);cursor:default}
  .mdok-chip.je-porovnanie.nedokoncene .mdok-x{background:var(--red-soft-2)}
}

/* ==========================================================================
   Spodné okná ako jeden celok s lištou
   --------------------------------------------------------------------------
   Panel Katalóg, panel účtu, filter aj rezervácia sú tá istá vec: obsah, ktorý
   vyjde zdola. Doteraz každý vyzeral inak — jeden mal úchytku a animáciu, druhý
   vyskočil bez pohybu, tretí bol okno z veľkej obrazovky — a všetky končili
   kúsok nad lištou, takže medzi nimi svietil pruh stránky a pôsobilo to
   odrezane.

   Tu majú spoločný tvar: sadnú si PRESNE na hornú hranu lišty, zaoblené sú len
   hore, vysúvajú sa rovnakým pohybom a zatmavenie za nimi je rovnaké.

   Medzera vznikala tým, že sa bezpečná zóna počítala dvakrát: `--mlista-h` je
   plná výška lišty a tú zónu už obsahuje.
   ========================================================================== */
@media(max-width:900px){

  /* ----- spoločné zatmavenie ----- */
  /* Teplé a svetlejšie. Čierna cez pol krytia z katalógu spravila noc a na
     béžovom webe pôsobila cudzo. */
  body.ma-mlistu .mkat-tien,
  body.ma-mlistu .filters.open::before{
    background:rgba(74,55,42,.34)}

  /* ----- spoločný tvar okna ----- */
  body.ma-mlistu .mkat-okno,
  body.ma-mlistu .filters:not([hidden]){
    position:fixed;left:0;right:0;top:auto;
    bottom:var(--mlista-h, 62px);
    width:auto;max-width:none;max-height:76%;height:auto;
    margin:0;padding:0;
    display:flex;flex-direction:column;overflow:hidden;
    background:var(--panel);
    border:0;border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:0 -14px 34px -14px rgba(74,55,42,.45)}

  /* ----- spoločný pohyb ----- */
  /* `display` sa animovať nedá, tak sa okno posúva a skrýva `visibility`.
     Filter doteraz iba vyskočil — vedľa panela Katalógu, ktorý sa vysúva, to
     vyzeralo, akoby to boli dve rôzne veci. */
  body.ma-mlistu .filters{
    transform:translateY(102%);visibility:hidden;
    transition:transform .42s cubic-bezier(.32,.72,0,1), visibility 0s .42s}
  body.ma-mlistu .filters.open{
    transform:none;visibility:visible;transition:transform .42s cubic-bezier(.32,.72,0,1)}

  /* ----- úchytka ----- */
  /* Panel Katalógu ju má vlastným prvkom; filter a rezervácia ju dostanú
     pseudoprvkom, nech netreba siahať do ich markupu. */
  body.ma-mlistu .filters:not([hidden])::after{
    content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:36px;height:4px;border-radius:999px;background:var(--line);z-index:4}
  body.ma-mlistu .filters .filters-head{padding-top:20px}
  /* Pôvodná úchytka filtra bola v hlavičke — teraz je vyššie a spoločná. */
  body.ma-mlistu .filters.open .filters-head::before{content:none}

  /* ----- v appke sú okno aj lišta plávajúce, tak nech sedia na sebe ----- */
  /* Bez toho by okno siahalo po okraje displeja a lišta pod ním by plávala —
     dva rôzne tvary nad sebou. */
}

/* ---------- pole hľadania na iPhone ----------
   Safari priblíži celú stránku, keď má pole menšie písmo než 16 px. Po
   priblížení je stránka širšia než obrazovka, takže „Zrušiť" vypadne za pravý
   okraj a ťukanie mieri vedľa — navonok to vyzerá, že hľadanie nefunguje.
   16 px nie je odporúčanie, je to hranica, pri ktorej Safari nezasiahne. */
@media(max-width:900px){
  body.ma-mlistu .searchbox input,
  .mhl-pole .searchbox input{font-size:16px}

  /* Zdieľanie v appke. Pilulka hľadania sa oň podelí sama — má `flex:1 1 auto`
     a `min-width:0`, takže sa zúži presne o jeho šírku. */
  .mbub-zdielat{width:38px;padding:0;justify-content:center;
    background:var(--panel);color:var(--ink-2)}
  .mbub-zdielat[hidden]{display:none}
  .mbub-zdielat svg{width:18px;height:18px}

  /* Na telefóne sa odkaz nekopíruje tlačidlom — v riadku nad mriežkou je aj
     tak skrytý spolu s celým `.kat-top`. */
  body.ma-mlistu #odkaz{display:none}
}

/* ==========================================================================
   Celé obrazovky: Rezervácia, Chat, Môj maznák
   --------------------------------------------------------------------------
   V návrhu to NIE SÚ vysúvacie okná. Vysúvacie okno mení to, čo je pod ním —
   preto ho majú Katalóg a Filtre, kde zákazník stále vidí, do čoho zasahuje.
   Rezervácia, chat a maznák doterajší obsah NAHRÁDZAJÚ, tak zaberajú celú
   plochu medzi lištami: hore ostáva hľadanie a účet, dole taby, medzi nimi
   je iná obrazovka. Žiadne zatmavenie, žiadna úchytka, žiadne okno v okne.

   Raz som z rezervácie spravil vysúvacie okno a na telefóne to bolo zlé
   riešenie — pop-up cez pop-up, v ktorom sa formulár nedal poriadne vyplniť.
   ========================================================================== */
@media(max-width:900px){
  body.ma-mlistu .modal:not([hidden]),
  body.ma-mlistu #chatBox:not([hidden]),
  body.ma-mlistu .uc-modal:not([hidden]){
    position:fixed;left:0;right:0;
    top:var(--mvrch-h, 57px);bottom:var(--mlista-h, 62px);
    width:auto;height:auto;max-height:none;
    display:block;padding:0;margin:0;
    background:var(--bg-soft);
    overflow-y:auto;overscroll-behavior:contain;
    border-radius:0;box-shadow:none;
    z-index:130;
    animation:mObrazovka .26s ease-out both}
  @keyframes mObrazovka{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* Vnútorné okno prestáva byť oknom — je to obsah obrazovky. */
  body.ma-mlistu .modal-box,
  body.ma-mlistu .uc-box{
    position:static;max-width:none;width:auto;max-height:none;
    margin:0;padding:16px 16px 28px;
    background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
  body.ma-mlistu .modal-box h2,
  body.ma-mlistu .uc-box h2{font-size:1.15rem;margin:0 0 14px}
  /* Krížik patrí do riadka s nadpisom, nie do rohu plávajúceho okna. */
  body.ma-mlistu .modal-x,
  body.ma-mlistu .uc-x{position:absolute;right:10px;top:8px;
    width:44px;height:44px;display:grid;place-items:center}

  /* V appke sú lišty plávajúce, tak obrazovka končí nad medzerou. */
}

/* ==========================================================================
   Spodné okná v tom istom štýle ako celé obrazovky
   --------------------------------------------------------------------------
   Rezervácia aj maznák majú tmavšiu plochu a na nej svetlé karty. Panel
   Katalóg a filter to mali naopak — svetlá plocha a na nej tmavšie prvky —
   takže vedľa seba pôsobili ako z iného webu.
   ========================================================================== */
@media(max-width:900px){

  /* Plocha panela je tá istá béžová, akú má stránka (`--bg`), nie tmavšia
     `--bg-soft`. Panel nemá byť iná plocha než web — má to byť ten istý
     podklad, len vysunutý zdola. */
  body.ma-mlistu .mkat-okno,
  body.ma-mlistu .filters:not([hidden]){background:var(--bg)}

  /* Prvky na nej sú svetlé a plávajúce, nie vykreslené linkou. */
  body.ma-mlistu .mkat-zv,
  body.ma-mlistu .mkat-kk{
    background:var(--v-okne);border-color:transparent;box-shadow:var(--tien-jemny)}
  body.ma-mlistu .mkat-zv.on,
  body.ma-mlistu .mkat-kk.on{
    background:var(--red-soft);border-color:var(--red);box-shadow:none}

  body.ma-mlistu .mkat-hl,
  body.ma-mlistu .filters .filters-head{
    background:var(--bg-soft);border-bottom:1px solid var(--line)}

  /* Zaškrtávacie riadky filtra dostanú tú istú podložku ako karty inde. */
  

  /* ----- spodná lišta pri otvorenom okne nebledne ----- */
  /* Zatmavenie končí na jej hornej hrane. Keď ju prekrývalo, vyzerala
     odseknuto a taby pôsobili nedostupne, hoci fungovali. */
  body.ma-mlistu .mkat-tien{bottom:var(--mlista-h, 62px)}
  /* Nad lištou sa bezpečná zóna nepripočítava — lišta ju už má v sebe.
     Filtre aj pole chatu mali v apke pod sebou prázdnych 34 px. */
  body.ma-mlistu #filterBody{padding-bottom:20px}
  body.ma-mlistu #chatBox .chat-form{padding-bottom:7px}
  body.ma-mlistu .filters.open::before{bottom:var(--mlista-h, 62px)}

  /* ----- v appke okno a lišta splynú ----- */
  /* Lišta je tam plávajúca so zaoblenými rohmi. Keď nad ňou stálo okno so
     zaoblením len hore, medzi nimi ostali dva protichodné oblúky. S otvoreným
     oknom sa preto horné rohy lišty narovnajú a spolu tvoria jeden tvar. */
}

/* ---------- okraje na iOS ako jeden prvok ----------
   Pruhy prehliadača nad stránkou a pod ňou berú farbu z `theme-color`, ktorá
   je pevná. Kým bolo sklo lišty priehľadné na 62 %, menilo farbu podľa toho,
   čo pod ním práve rolovalo — a proti pevnému pruhu to bolo vidieť ako šev.
   Hustejšie sklo drží farbu takmer konštantnú a sedí s `#FCFAF8`.
   Rozostrenie ostáva, takže dojem skla sa nestráca. */
@media(max-width:900px){
  body.ma-mlistu .mvrch,
  body.ma-mlistu .mlista{background:var(--lista-plocha)}

  /* Panáčik v rovnakej farbe ako ostatné bubliny — červený z neho robil
     hlavné tlačidlo lišty, hoci ním nie je. Červená patrí tovaru a rezervácii. */
  .mbub-ucet{background:var(--panel);border-color:var(--line);color:var(--ink-2)}

  /* Účet (návrh prihlasenie-mobil.html, A): neprihlásený = sklenený panáčik ako
     predajňa, prihlásený = červený krúžok s iniciálami (výnimka z „červená len
     tovaru" – schválená 7. 10. 2026, aby bolo vidieť, že je prihlásený). */
  .mbub-moj-ucet .mbub-inic{display:none;font:600 .8rem var(--head);letter-spacing:.04em}
  html body.ma-mlistu .mbub-moj-ucet.prihlaseny{background:var(--red);border-color:var(--red);color:#fff}
  .mbub-moj-ucet.prihlaseny svg{display:none}
  .mbub-moj-ucet.prihlaseny .mbub-inic{display:inline}
}

/* `hidden` nesmie prebiť vlastný `display` — poistky nájdené kontrolou. */
.mlista[hidden]{display:none}

/* ---------- súhrn nad tlačidlom a karty v rezervácii ----------
   Návrh má obsah rozdelený do samostatných kariet na tmavšej ploche, nie
   jeden dlhý stĺpec. Karta drží veci, ktoré spolu súvisia, pokope a zákazník
   vidí, kde jedna vec končí a druhá začína. */
.rez-suhrn{background:var(--v-okne);border-radius:var(--r);padding:13px 14px;
  margin:0 0 12px;box-shadow:var(--tien-jemny)}
.rez-suhrn[hidden]{display:none}
.rez-riadok{display:flex;justify-content:space-between;gap:12px;
  font-size:.82rem;color:var(--ink-2);padding:3px 0}
.rez-riadok.je-spolu{font-family:var(--head);text-transform:uppercase;
  font-size:1rem;color:var(--ink);border-top:1.5px solid var(--line);
  padding-top:9px;margin-top:7px}
/* Keď je Spolu jediný riadok (a to je bežný stav — zľava býva výnimka),
   nemá sa čím oddeľovať a čiara nad ním by visela vo vzduchu. */
.rez-riadok.je-spolu:first-child{border-top:0;padding-top:3px;margin-top:0}
.rez-bez-post{display:flex;align-items:center;gap:6px;margin:3px 0 0;font-size:12.5px;line-height:1.35;color:var(--ok);font-weight:500}
.rez-bez-post svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:900px){
  /* Samostatné karty na tmavšej ploche obrazovky. */
  body.ma-mlistu .cart-list,
  body.ma-mlistu .rezervacia-karta,
  body.ma-mlistu #rezForm .row2,
  body.ma-mlistu #rezForm > .field,
  body.ma-mlistu #rVyzdvih{
    background:var(--v-okne);border-radius:var(--r);padding:12px 13px;
    margin-bottom:10px;box-shadow:var(--tien-jemny);max-height:none}

  /* Ponuka registrácie je jeden riadok, nie odsek cez pol obrazovky. Kto ju
     chce, ťukne; kto nie, ide ďalej a nič mu nezavadzia. */
  
  
  
  

  /* Číslo nad formulárom už nesie súhrn pri tlačidle. */
  body.ma-mlistu .cart-sum{display:none}
}

/* ==========================================================================
   Kompaktná karta produktu
   --------------------------------------------------------------------------
   Známky mali každá vlastnú bielu dlaždicu s výplňou a slovo „kvalita" sa
   pri úzkej karte zalamovalo pod číslo. Z dvoch čísel tak vznikol blok cez
   tretinu karty a do mriežky sa zmestilo menej tovaru.

   Návrh ich má ako riadok: číslo, hneď za ním slovo, pod tým tenký pás.
   Tá istá informácia, tretina výšky.
   ========================================================================== */
.pznamky{gap:7px;margin:0 0 7px}
/* Biela dlaždica ostáva — je to podložka, ktorá dvíha číslo z karty a robí
   zo známky samostatný údaj. Zmenšilo sa len to, čo ju nafukovalo: výplň
   a zalomenie slova pod číslo. */
.pzn{padding:5px 8px 6px;border-radius:8px}
.pzn-h{flex-wrap:nowrap;justify-content:flex-start;gap:4px}
.pzn-h b{font-size:.84rem}
.pzn-h i{font-size:.5rem;letter-spacing:.06em}
.pzn-pas{height:3px;margin-top:3px}

@media(max-width:560px){
  /* Cena vedľa tlačidla, nie nad ním — tak ako na veľkej obrazovke. Tlačidlo
     cez celú šírku tlačilo cenu do vlastného riadka a karta tým narástla
     o ďalších 30 px na každom jednom kuse tovaru. */
  .pfoot{flex-wrap:nowrap}
  .pbtn{width:auto;flex:0 0 auto}
  .pcena{flex:1 1 auto;min-width:0}
  .pzn-h b{font-size:.8rem}
}

/* ==========================================================================
   Filter na telefóne: pilulky namiesto zoznamu zaškrtávatiek
   --------------------------------------------------------------------------
   Mení sa len podoba. Zaškrtávacie pole ostáva v dokumente ako model — drží
   hodnotu aj obsluhu — takže počty, poradie skupín z administrácie ani
   trojpolohové prepínače surovín sa nedotkli.

   Na veľkej obrazovke je filter úzky stĺpec a zvislý zoznam s počtami je tam
   správne. Pilulky sú pre široké spodné okno, kde sa ich do riadka zmestí
   niekoľko a zákazník vidí celú skupinu naraz.
   ========================================================================== */
@media(max-width:900px){
  body.ma-mlistu .fgroup > h3{
    font-family:var(--head);text-transform:uppercase;letter-spacing:.07em;
    font-size:.68rem;color:var(--ink-soft);margin:0 0 8px}

  /* Zo skupiny sa stane rad pilulák. */
  body.ma-mlistu .fgroup{display:flex;flex-wrap:wrap;gap:7px}
  body.ma-mlistu .fgroup > h3{flex:1 1 100%}

  body.ma-mlistu .fstr-z{
    display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
    width:auto;min-height:38px;padding:0 13px;margin:0;
    border:1.5px solid var(--line-2);border-radius:999px;
    background:var(--v-okne);cursor:pointer;
    transition:border-color .18s, color .18s, background .18s}
  body.ma-mlistu .fstr-z.je-ano{
    border-color:var(--red);background:var(--red-soft)}
  body.ma-mlistu .fstr-z .fstr-n{
    font-size:.82rem;font-weight:600;color:var(--ink-2);overflow:visible}
  body.ma-mlistu .fstr-z.je-ano .fstr-n{color:var(--red-dk)}
  /* Počet ostáva — je to jediné, čo zákazníkovi vopred povie, či má voľba
     zmysel. Len je tichší, aby nesúperil s názvom. */
  body.ma-mlistu .fstr-z .cnt{
    font-size:.68rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
  body.ma-mlistu .fstr-z.je-ano .cnt{color:var(--red-dk)}
  /* Zaškrtávatko je model, nie obrázok — pilulka ho ukazuje farbou. */
  body.ma-mlistu .fstr-z .fbox{display:none}
  body.ma-mlistu .fstr-z:focus-within{outline:2.5px solid var(--red);outline-offset:2px}

  /* „Zobraziť všetky" je v tom istom rade, nie pod ním. */
  body.ma-mlistu .fmore{
    flex:0 0 auto;min-height:38px;padding:0 13px;border-radius:999px;
    border:1.5px dashed var(--line-2);background:none;color:var(--ink-soft);
    font-family:var(--text);font-size:.78rem;font-weight:600;cursor:pointer}
  body.ma-mlistu .fmore:hover{border-color:var(--red);color:var(--red-dk)}

  /* Hľadanie v dlhej skupine. Pri 241 značkách je zoznam pilulák stena,
     v ktorej sa nedá nič nájsť — písmeno alebo dve ju zúžia na to, čo
     zákazník hľadá. */
  body.ma-mlistu .fhladaj{
    flex:1 1 100%;min-height:40px;margin:0 0 2px;padding:0 13px;
    border:1.5px solid var(--line);border-radius:999px;background:var(--v-okne);
    font-family:var(--text);font-size:16px;color:var(--ink)}
  body.ma-mlistu .fhladaj::placeholder{color:var(--ink-soft)}
  body.ma-mlistu .fstr-z[data-skryte]{display:none}
}

/* ---------- chat je zvislý flex, nie blok ----------
   Celoobrazovkové pravidlo vyššie dáva obrazovkám `display:block` a vlastné
   rolovanie. Pre rezerváciu a maznáka je to správne — sú to dlhé formuláre.
   Chat je ale niečo iné: je to stĺpec, v ktorom sa správy rozťahujú a písacie
   pole drží pri spodnej hrane. Blokom sa mu rozsypalo poradie, pás s kontaktom
   skončil v strede obrazovky a pod poľom ostala prázdna plocha.

   Roluje vnútro so správami, nie celý chat. */
@media(max-width:900px){
  body.ma-mlistu #chatBox:not([hidden]){
    display:flex;flex-direction:column;
    overflow:hidden;overscroll-behavior:contain}

  /* Správy zaberú všetko, čo zvýši; pás s kontaktom a pole sú pevné. */
  body.ma-mlistu #chatBox .chat-body{
    flex:1 1 auto;min-height:0;overflow-y:auto}
  body.ma-mlistu #chatBox .chat-kontakt,
  body.ma-mlistu #chatBox .chat-form{flex:0 0 auto}

  /* Plávajúce koliesko s možnosťami sedí v pravom hornom rohu nad správami —
     obsah pod ním preto začína nižšie, aby mu nešlo pod prsty. */
  body.ma-mlistu #chatBox .chat-body{padding-top:46px}
}

/* ---------- zvonček s možnosťami chatu a jednoriadkové pole ---------- */
@media(max-width:900px){
  .mbub-zvoncek{width:38px;padding:0;justify-content:center;
    background:var(--panel);color:var(--ink-2)}
  .mbub-zvoncek[hidden]{display:none}
  .mbub-zvoncek svg{width:18px;height:18px}

  /* Ponuka chatu sa otvára zo zvončeka v hornej lište, tak nech sa ukáže pod
     ním a nie v mieste, kde už tlačidlo nie je. */
  

  /* Tri bodky v konverzácii už netreba — ich úlohu prevzal zvonček. */
  body.ma-mlistu .chat-head{display:none}
  body.ma-mlistu #chatBox .chat-body{padding-top:12px}
}
  /* Pole a koliesko v jednom riadku. `flex:1 1 100%` z chat.css poslalo
     tlačidlo na ďalší riadok, takže z písacieho pásu boli dva. */
@media(max-width:900px){
  body.ma-mlistu .chat-riadok .chat-pole{flex:1 1 auto;min-width:0}
  body.ma-mlistu .chat-riadok{flex-wrap:nowrap}
}

/* ---------- pri hľadaní nič iné na obrazovke nie je ----------
   Spodná lišta ostávala pod poľom a Safari ju pri otvorenej klávesnici
   vytiahne nad ňu — medzi poľom a klávesnicou tak vznikol sendvič z našej
   lišty a iOS pruhu s automatickým vyplnením. V návrhu je hľadanie
   samostatná obrazovka; lišta ani horná lišta na nej nemajú čo robiť. */
@media(max-width:900px){
  body.ma-mlistu.mhl-otvorene .mlista,
  body.ma-mlistu.mhl-otvorene .mvrch{display:none}

  /* Vrstva potom kryje celú viditeľnú plochu, nielen priestor pod hlavičkou. */
  body.mhl-otvorene .mhl{top:var(--mhl-t, 0px);height:var(--mhl-v, 100%)}

  /* Spodok výsledkov (majiteľ 24. 9. 2026 — „dole je to useknuté"). Vrstva
     končí tam, kde končí viditeľná plocha, ale lišta nad klávesnicou na
     iPhone je priesvitná a pod ňou presvitala mriežka katalógu. Plocha
     vrstvy preto pokračuje aj pod klávesnicu a výsledky do nej na spodku
     jemne zoslabnú, namiesto aby sa odsekli v polovici karty. Posledný
     riadok má pod sebou miesto, aby sa dal vyrolovať nad zoslabnutie. */
  body.mhl-otvorene .mhl::after{content:'';position:absolute;left:0;right:0;top:100%;
    height:100vh;background:var(--bg-soft);pointer-events:none}
  .mhl-vysledky{padding-bottom:48px;
    -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
    mask-image:linear-gradient(to bottom, #000 calc(100% - 44px), transparent)}
}

/* ---------- „späť hore" je samostatná bublina, nie kvapka v hrane ----------
   Kvapka vytekala z hornej hrany lišty a ako nápad sa páčila, ale v ruke sa
   na ňu nedalo mieriť: mala 27 px výšky a spodná polovica splývala s lištou,
   takže ťuknutie skončilo na tabe pod ňou.

   Samostatné koliesko má 46 px na všetky strany, plávaAnad lištou s medzerou
   a nemá pod sebou nič, do čoho by sa dalo omylom trafiť. */
@media(max-width:900px){
  body.ma-mlistu .mhore{
    position:fixed;left:50%;bottom:calc(var(--mlista-h, 62px) + 12px);top:auto;
    width:46px;height:46px;padding:0;border-radius:999px;
    border:1px solid var(--sklo-ram);
    box-shadow:var(--tien-zdvih);
    transform:translateX(-50%) scale(.6);transform-origin:50% 50%;
    transition:opacity .18s, transform .28s cubic-bezier(.34,1.4,.64,1);
    /* To isté hustejšie sklo ako lišty — nad mriežkou plnou fotiek by redšie
       splývalo s tovarom a šípku by nebolo vidieť. */
    background:rgba(255,255,255,.82)}
  body.ma-mlistu .mhore.je{
    transform:translateX(-50%) scale(1);animation:none}
  body.ma-mlistu .mhore svg{width:21px;height:21px}

  /* V appke je lišta plávajúca, tak sa bublina odsadí o tú istú medzeru. */
}

/* ==========================================================================
   Filter a hlavička výpisu podľa návrhu
   --------------------------------------------------------------------------
   Odsúhlasený návrh: „Hľadanie pri palci". Čísla nižšie sú z neho odpísané,
   nie odhadnuté — `.hlv`, `.fsekcia`, `.fpodnad`, `.fstr`, `.pilulky`.
   ========================================================================== */
@media(max-width:900px){

  /* ----- riadok nad mriežkou: PES · 3 148 produktov · Zoradiť -----
     Veľkosti aj rozostupy sú TU, na jednom mieste. Vyššie v súbore je ten
     istý riadok ešte raz — tam sa rieši len to, ako sa skladá.

     Písmo je väčšie a medzery menšie než predtým: riadok mal drobný text
     a okolo seba 30 px prázdna nad a 9 px pod, takže zaberal miesto na
     ďalší rad produktov a pritom sa zle čítal. */
  /* Nad riadkom a pod ním rovnako — 6 px z oboch strán. Predtým boli 4 px
     hore a 10 dole (4 px odsadenia riadku + 6 px odstupu), takže tlačidlo
     Zoradiť sedelo bližšie k lište než ku kartám. */
  body.ma-mlistu .kat-wrap{padding-top:6px}
  /* Prázdny pás „moje zvieratá" je vysoký 2 px a nesie 10 px odsadenia —
     dokopy 12 px ničoho medzi lištou a riadkom. Keď v ňom nič nie je,
     nie je ani on. */
  body.ma-mlistu .moje-zvierata:not(:has(*)){display:none;margin:0}
  /* Bez bočného odsadenia: riadok potom začína aj končí presne tam, kde
     karty pod ním. */
  body.ma-mlistu .kat-hlava{
    padding:0;margin:0 0 6px;gap:9px;align-items:center}
  /* Posledný prvok riadku je prázdny `<span>` pre trojstĺpcovú mriežku na
     veľkej obrazovke. Tu z neho ostala len medzera, ktorá tlačila Zoradiť
     9 px od okraja kariet. */
  body.ma-mlistu .kat-hlava > span:empty{display:none}
  body.ma-mlistu .kat-druh{
    font-family:var(--head);text-transform:uppercase;font-size:1.14rem;
    line-height:1.1;letter-spacing:.02em}
  body.ma-mlistu .kat-count{font-size:.8rem;color:var(--ink-soft);
    font-variant-numeric:tabular-nums;white-space:nowrap}
  body.ma-mlistu .kat-zorad{
    height:34px;padding:0 14px;border:1.5px solid var(--line-2);
    border-radius:999px;font-size:.8rem;font-weight:600;color:var(--ink-2);
    background:var(--v-okne);box-shadow:var(--tien-jemny)}
  body.ma-mlistu .kat-zorad svg{width:16px;height:16px}

  /* ----- panel filtrov: to isté sklo a tie isté pilulky ako katalóg -----
     Panely sú dva, ale je to jeden tvar. Pilulka filtra mala plochý rám
     a biele pozadie, kým dlaždica v katalógu má tieň a priehľadné okraje —
     vedľa seba to vyzeralo ako dva weby. */
  body.ma-mlistu .fstr-z,
  body.ma-mlistu .fmore{
    background:var(--sklo);border-color:var(--sklo-ram);
    box-shadow:var(--tien-jemny)}
  body.ma-mlistu .fstr-z.je-ano{
    background:var(--red-soft);border-color:var(--red);box-shadow:none}

  /* Skryté položky dlhej skupiny. `body.ma-mlistu .fstr-z` má vyššiu
     špecificitu (0,2,1) než `.fstr[hidden]` (0,2,0) a stojí neskôr, takže
     `hidden` prebíjalo a vo filtri svietilo všetkých 241 značiek namiesto
     desiatich. To je tá istá pasca, čo je v CLAUDE.md — len opačným smerom:
     poistka tam bola, len slabšia než pravidlo, ktoré ju malo rešpektovať. */
  body.ma-mlistu .fstr-z[hidden],
  body.ma-mlistu .fstr-z[data-skryte]{display:none}

  /* ----- suroviny: NIE pilulky -----
     Skupiny surovín majú trojpolohový prepínač a ten sa do pilulky nezmestí.
     V návrhu je to riadok `názov · počet · prepínač` v mriežke, takže
     prepínače stoja pod sebou v jednom stĺpci. Keď sa na ne pustilo pilulkové
     rozloženie, každý skončil inde a pôsobilo to rozhádzane. */
  body.ma-mlistu .fgroup-st{display:block}
  body.ma-mlistu .fgroup-st > h3{
    display:flex;align-items:center;gap:8px;margin:0 0 4px;
    padding:6px 9px;border-radius:9px;background:var(--bg-soft)}
  body.ma-mlistu .fgroup-st > h3 .fsl{margin-left:auto}
  body.ma-mlistu .fgroup-st .fstr-z{
    display:grid;grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;gap:8px;width:auto;min-height:0;
    padding:5px 9px;margin:0;border:0;border-radius:0;
    background:none;box-shadow:none}
  body.ma-mlistu .fgroup-st .fstr-z.je-ano{background:none;border:0}
  body.ma-mlistu .fgroup-st .fstr-z .fstr-n{
    font-size:.82rem;font-weight:400;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  body.ma-mlistu .fgroup-st .fstr-z.je-ano .fstr-n{font-weight:600}

  /* ----- výzva „Nechcete filtrovať zakaždým?" -----
     V návrhu stojí hore v paneli filtrov, nie nad mriežkou. Prvok sa sem
     PRESÚVA (nekopíruje), takže obsluha aj text ostávajú tam, kde boli. */
  body.ma-mlistu #filterBody > .zv-vyzva{margin:0 0 13px}
}

/* ---------- písanie v chate: lišta preč ----------
   Safari na iPhone vytiahne `position:fixed` prvky nad klávesnicu, takže
   spodná lišta sadne medzi písacie pole a klávesy. Zaberie 57 px z toho
   mála, čo po klávesnici zostane, a pritom je vtedy nanič — kto píše,
   obrazovky neprepína. Trieda `chat-pise` nasadzuje `chat.js` na `<body>`
   pri ťuknutí do poľa; chat si tým zároveň vezme miesto po lište. */
@media(max-width:900px){
  body.ma-mlistu.chat-pise .mlista,
  body.ma-mlistu.chat-pise .mhore{display:none}
  body.ma-mlistu.chat-pise #chatBox:not([hidden]),
  body.ma-mlistu.chat-pise.chat-cely .chat-box{bottom:0}
}

/* ==========================================================================
   Rezervácia na telefóne: dva kroky a karta podľa návrhu
   --------------------------------------------------------------------------
   Jedna obrazovka mala tovar, deň vyzdvihnutia, meno, telefón, e-mail,
   poznámku, súhlas aj súhrn — a rolovalo sa cez ňu dvakrát. Rozdelená je
   na „čo si beriem a kedy prídem" a „kto som".

   Na veľkej obrazovke sa nedelí nič: tam je na formulár miesto a schválený
   vzhľad sa nemení. Preto celý oddiel platí len pod 900 px.
   ========================================================================== */
/* Tam, kde sa nedelí, nie je kam ísť „Ďalej" ani „Späť" — na počítači boli
   obe tlačidlá vidieť popri Odoslať a Späť bolo holé systémové tlačidlo
   (majiteľ 24. 9. 2026). */
@media(min-width:901px){ #rDalej,.rez-spat{display:none} }

/* Poradie rezervácie na počítači (majiteľ 24. 9. 2026): najprv kontakt, potom
   tovar a hneď pod ním súhrn s medzisúčtom a Spolu, potom deň, poznámka,
   súhlas a odoslanie. Značkovanie ostáva v poradí telefónu (dva kroky),
   takže sa preusporiadava len tu — formulár sa rozpustí (`display:contents`,
   ostáva formulárom) a jeho polia sa zoradia spolu s tovarom nad ním.
   „Spolu orientačne" pod tovarom by bolo druhé to isté číslo, súhrn ho má. */
@media(min-width:901px){
  #mForm{display:flex;flex-direction:column}
  #rezForm{display:contents}
  #mForm > *,#rezForm > *{order:8}
  #mForm > h2{order:1}
  #rKontakt{order:2;margin-bottom:6px}
  #cartList{order:3}
  #cartZlava{order:4}
  /* Kupón nad medzisúčtom (návrh kupónov). */
  #cartKupon{order:4;margin-bottom:12px}
  #rSuhrn{order:5}
  #cartDarcek{order:6}
  #cartVernost{order:6}
  #cartOdp{order:7}
  #mForm .cart-sum{display:none}
  /* Úchytka patrí spodnému panelu na telefóne; okno na strede sa neťahá. */
  #modal .modal-box > .panel-uchyt{display:none}
}
body:not(.ma-mlistu) #rDalej,body:not(.ma-mlistu) .rez-spat{display:none}
@media(max-width:900px){
  body.ma-mlistu .modal[data-krok="1"] [data-krok="2"],
  body.ma-mlistu .modal[data-krok="2"] [data-krok="1"]{display:none}

  /* Späť na tovar — text, nie druhé červené tlačidlo. Hlavná akcia na
     obrazovke má byť jedna. */
  .rez-spat{
    all:unset;box-sizing:border-box;display:block;width:100%;
    margin-top:10px;padding:10px;text-align:center;cursor:pointer;
    font-size:.82rem;font-weight:600;color:var(--ink-soft)}
  .rez-spat:hover{color:var(--red)}
  .rez-spat:focus-visible{outline:2.5px solid var(--red);outline-offset:2px}

  /* ----- karta položky podľa návrhu -----
     Názov cez celú šírku na vlastnom riadku, pod ním kusy a cena spolu.
     Predtým sa názov tlačil medzi fotku, plusko-mínusko a cenu za kus,
     takže z „Animonda GRANCARNO kačka 6 × 400 g" ostali dva riadky po
     dvoch slovách. */
  body.ma-mlistu #cartList li{
    display:grid;grid-template-columns:44px minmax(0,1fr) auto;
    grid-template-areas:'obr nazov x' 'obr ks cena';
    gap:6px 10px;align-items:center;
    padding:9px;margin-bottom:8px;
    border:1px solid var(--line);border-radius:11px;background:var(--v-okne)}
  body.ma-mlistu #cartList .ci-img{grid-area:obr;align-self:start;
    width:44px;height:44px;border-radius:8px}
  body.ma-mlistu #cartList .ci-n{grid-area:nazov;font-size:.79rem;
    font-weight:600;line-height:1.3;align-self:center}
  body.ma-mlistu #cartList .ci-q{grid-area:ks;justify-self:start}
  body.ma-mlistu #cartList .ci-spolu{grid-area:cena;justify-self:end;
    font-family:var(--head);font-size:.95rem;font-variant-numeric:tabular-nums}
  body.ma-mlistu #cartList .ci-x{grid-area:x;justify-self:end;align-self:start}
}

/* Cena spolu je vec telefónu — na veľkej obrazovke je stĺpec úzky a cena za
   kus tam stojí pri názve. Skryté globálne, odkryté vyššie pri `ma-mlistu`. */
.ci-spolu{display:none}
@media(max-width:900px){body.ma-mlistu .ci-spolu{display:block}}

/* ---------- tlačidlo na karte nesmie rásť ----------
   „V rezervácii (1)" je o polovicu širšie než „Rezervovať". Kým malo
   `flex:0 0 auto`, po pridaní do rezervácie sa roztiahlo, vytlačilo cenu
   a tá sa zalomila na dva riadky — karta sa rozsypala. Cena si preto drží
   svoju šírku a tlačidlo sa prispôsobuje jej, nie naopak. */
.pbtn-kratky{display:none}
@media(max-width:560px){
  .pfoot .pcena{flex:0 1 auto;min-width:0}
  .pprice{white-space:nowrap}
  .pfoot .pbtn{flex:0 1 auto;min-width:0;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  /* V rezervácii stačí fajka s počtom — slová sa na šírku vedľa ceny
     nezmestia a zelená farba tlačidla povie zvyšok. */
  .pbtn.in .pbtn-kratky{display:inline}
  .pbtn.in .pbtn-dlhy{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
}

/* ==========================================================================
   Ten istý recept aj vo filtri a v rezervácii
   --------------------------------------------------------------------------
   Plocha `--bg-soft`, prvok `--v-okne` + priehľadný rám + `--tien-jemny`,
   zvolený `--red-soft` + červený rám bez tieňa. Podrobnosti pri tom istom
   oddiele v `styl.css`; tu sú len prvky, ktoré má katalóg.
   ========================================================================== */
@media(max-width:900px){

  /* ----- trojpolohový prepínač surovín -----
     Bol vyrytý do plochy (priehľadné pozadie, vnútorný tieň, tmavá linka),
     kým všetko okolo neho plávalo. Teraz je to biela pilulka s jemným
     tieňom, ako dlaždica v katalógu; guľôčka zostáva. */
  body.ma-mlistu .fsl{
    background:var(--sklo);border-color:var(--sklo-ram);
    box-shadow:var(--tien-jemny)}

  /* ----- hlavičky panelov -----
     Katalóg mal hlavičku bez linky, filter s linkou. Je to ten istý tvar,
     tak nech má aj tú istú hranu. */
  body.ma-mlistu .filters .filters-head{
    background:none;border-bottom:1px solid var(--line)}

  /* ----- rezervácia ----- */
  /* Karty položiek, súhrn aj výber dňa ležia na tej istej ploche ako
     dlaždice v katalógu, tak dostanú ten istý tieň namiesto linky. */
  body.ma-mlistu #cartList li,
  body.ma-mlistu .rez-suhrn,
  body.ma-mlistu .vyzdvih{
    border-color:var(--sklo-ram);background:var(--sklo);
    box-shadow:var(--tien-jemny)}
  body.ma-mlistu .vyzdvih-pilulky button,
  body.ma-mlistu .vyzdvih-kal button{
    border-color:var(--sklo-ram);background:var(--sklo);
    box-shadow:var(--tien-jemny)}
  body.ma-mlistu .vyzdvih-pilulky button.on,
  body.ma-mlistu .vyzdvih-kal button.on{
    border-color:var(--red);background:var(--red-soft);box-shadow:none}
}

/* ---------- dlhé oddiely detailu sa na telefóne zbaľujú ----------
   Maskou, nie prekrytím prechodom: oddiely majú rôzne pozadia a gradient by
   sa na jednom trafil a na druhom nie. Maska funguje nad čímkoľvek. */
@media(max-width:900px){
  body.ma-mlistu .pd-zbalene{
    max-height:320px;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 66%,transparent 100%)}
  body.ma-mlistu .pd-viac{
    display:block;width:100%;margin:10px 0 18px;padding:11px;
    border:1.5px solid var(--line-2);border-radius:999px;
    background:var(--v-okne);box-shadow:var(--tien-jemny);
    color:var(--ink-2);font-family:var(--text);font-size:.84rem;
    font-weight:600;cursor:pointer}
  body.ma-mlistu .pd-viac:hover{border-color:var(--red);color:var(--red-dk)}
  body.ma-mlistu .pd-viac:focus-visible{outline:2.5px solid var(--red);outline-offset:2px}
}

/* ==========================================================================
   Celé obrazovky sa vysúvajú rovnako ako panely
   --------------------------------------------------------------------------
   Katalóg a filter sa vysúvali zdola, kým rezervácia, maznák a chat sa len
   zjavili a zmizli. Sú to tabuľky tej istej lišty, tak nech prichádzajú
   rovnako.

   `animation`, nie `transition`: prvok sa zobrazuje zo stavu `display:none`
   a z neho sa prechod nespustí — animácia áno, lebo beží od chvíle, keď
   prvok vznikne. Zatváranie zostáva okamžité; prvok v tej chvíli mizne
   a nie je čo animovať.
   ========================================================================== */
@media(max-width:900px){
  @keyframes mvysun{
    from{transform:translateY(100%)}
    to{transform:none}
  }
  body.ma-mlistu #modal:not([hidden]) .modal-box,
  body.ma-mlistu .uc-modal:not([hidden]) .uc-box,
  body.ma-mlistu.chat-cely #chatBox:not([hidden]) .chat-box{
    animation:mvysun .42s cubic-bezier(.32,.72,0,1) both;
    will-change:transform}
}

/* Blok výberu dňa, keď zákazník ťukol na Ďalej bez neho. */
.vyzdvih.chyba{border-color:var(--red)}
.vyzdvih.chyba .pole-pozn{color:var(--red);font-weight:600}

@media(prefers-reduced-motion:reduce){
  body.ma-mlistu #modal .modal-box,
  body.ma-mlistu .uc-modal .uc-box,
  body.ma-mlistu.chat-cely #chatBox .chat-box{animation:none}
}

/* ==========================================================================
   Filter je celá obrazovka, nie spodný list
   --------------------------------------------------------------------------
   Filtrov je desať skupín a v liste na 76 % výšky sa v nich rolovalo v okne
   vnútri okna. Rezervácia, maznák aj chat sú celé obrazovky medzi lištami —
   filter je štvrtý tab tej istej lišty a patrí k nim.

   Úchytka odchádza s ním: naznačovala gesto, ktoré na celej obrazovke nemá
   čo robiť. Panel katalógu ju má ďalej, tam to gesto naozaj funguje.
   ========================================================================== */
@media(max-width:900px){
  body.ma-mlistu .filters:not([hidden]){
    top:var(--mvrch-h, 57px);
    bottom:var(--mlista-h, 62px);
    max-height:none;height:auto;
    border-radius:0;box-shadow:none}
  body.ma-mlistu .filters:not([hidden])::after{content:none}
  body.ma-mlistu .filters.open::before{content:none}
  body.ma-mlistu .filters .filters-head{padding-top:12px}
}

/* Úchytka panela katalógu je teraz ovládací prvok, nie kresba — dotyk sa na
   nej nesmie meniť na výber textu ani na rolovanie stránky. */
@media(max-width:900px){
  body.ma-mlistu .mkat-hl{user-select:none;-webkit-user-select:none}
  /* Krížik si dotyk berie sám — inak by sa ťahalo aj cezeň. */
  body.ma-mlistu .mkat-x{touch-action:manipulation}
}

/* Hlavička panela mala vlastnú farbu (`--bg-soft`), kým telo panela dostalo
   béžovú stránky (`--bg`). Na vrchu okna z toho bol pás inej farby. Hlavička
   žiadne vlastné pozadie nepotrebuje — nesie ho okno. */
@media(max-width:900px){
  body.ma-mlistu .mkat-hl{background:none}
}

/* ==========================================================================
   Filter na telefóne: posuvníky, predely a nadpisy skupín
   ==========================================================================
   1. POSUVNÍKY. Pravidlo „skupina je rad pilulák" (`display:flex`) platilo
      aj na cenu a veľkosť balenia — a tie majú namiesto pilulák popisok,
      posuvník a odkaz „Zrušiť obmedzenie". Ako tri prvky flexu si sadli
      vedľa seba: guľôčka posuvníka skončila na texte odkazu a rozsah sa
      nedal nastaviť. Skupina s posuvníkom preto radom pilulák nie je.
      `:has` je tu spoľahlivé — v katalógu sa už používa; pre istotu
      k nemu ide aj výpočet skupín podľa mena.

   2. PREDELY. Linka mala nad sebou 4 body a pod sebou 14, takže sedela
      tesne na poslednej pilulke predošlej skupiny a od nadpisu ďalšej bola
      ďaleko. Rovnaké odsadenie z oboch strán ju dá doprostred.

   3. NADPISY SKUPÍN SUROVÍN. „Hydina" a „Červené mäso" vyzerali ako ďalší
      drobný popisok a nebolo vidieť, že riadky pod nimi patria k nim.
      Sú väčšie a nesú ich na sebe — ako lišta, nie ako poznámka.
   ========================================================================== */
@media(max-width:900px){
  body.ma-mlistu .fgroup:has(.fslider),
  body.ma-mlistu .fgroup[data-g="c"],
  body.ma-mlistu .fgroup[data-g="h"],
  body.ma-mlistu .fgroup[data-g="bi"],
  body.ma-mlistu .fgroup[data-g="tu"]{display:block}
  body.ma-mlistu .fgroup:has(.fslider) .fslider{margin:8px 12px 10px}
  body.ma-mlistu .fgroup:has(.fslider) .fzrus{display:inline-block;margin-top:2px}
  body.ma-mlistu .fgroup:has(.fslider) .fhod{margin-bottom:4px}

  body.ma-mlistu .fgroup{padding:14px 0}

  body.ma-mlistu .fgroup-st > h3{
    font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;
    font-size:.92rem;color:var(--ink);
    padding:10px 12px;margin:0 0 8px;border-radius:12px;
    background:var(--sklo);border:1px solid var(--sklo-ram);
    box-shadow:var(--tien-jemny)}
}

/* ---------- prázdna rezervácia ----------
   Veta sa rozsypala na tri riadky po jednom slove: bola to položka a dostala
   mriežku karty. Nie je to položka a prázdna karta nemá čo ukazovať — celá
   obrazovka sa prepne do prázdneho stavu a výber dňa aj „Ďalej" odídu.
   Nie je čo vyzdvihnúť ani kam pokračovať. */
.ci-prazdne{display:block;text-align:center;padding:26px 16px;
  color:var(--ink-soft);font-size:.92rem;line-height:1.6;
  border:0;background:none;box-shadow:none}
.ci-prazdne a{display:inline-block;margin-top:10px;color:var(--red);
  font-weight:600;text-decoration:underline;text-underline-offset:3px}
.modal.rez-prazdna #rVyzdvih,
.modal.rez-prazdna #rDalej,
.modal.rez-prazdna .cart-sum,
.modal.rez-prazdna .rez-spat{display:none}

/* Karty rezervácie majú ten istý tvar ako karty v Mojom maznákovi —
   je to tá istá plocha a ten istý recept. */
@media(max-width:900px){
  body.ma-mlistu #cartList li:not(.ci-prazdne),
  body.ma-mlistu .rez-suhrn,
  body.ma-mlistu .vyzdvih{border-radius:13px;padding:13px}
  /* Musí to byť takto dlhý selektor: mriežku karty nesie `#cartList li`, a to
     má kvôli `id` vyššiu váhu než samotná trieda. Kratší zápis prehral
     a prázdna veta ostala rozsypaná po bunkách mriežky. */
  /* `display:flex` so stĺpcom, nie `block`: mriežku aj rad prvkov prebije
     jedno pravidlo a odkaz sadne pod vetu nech už vyhrá ktorékoľvek. */
  body.ma-mlistu #cartList li.ci-prazdne{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    grid-template-areas:none;grid-template-columns:none;
    padding:26px 16px;text-align:center;
    border:0;background:none;box-shadow:none}
  body.ma-mlistu #cartList li.ci-prazdne a{margin-top:0}
}

/* ==========================================================================
   Rezervácia je na telefóne vysúvací panel, nie celá obrazovka
   --------------------------------------------------------------------------
   Košík je vec, do ktorej sa zákazník pozrie a ide ďalej nakupovať. Celá
   obrazovka ho od tovaru odtrhla a pri prázdnom košíku po nej ostala plocha
   na pol displeja. Panel vyrastie presne tak vysoko, koľko má obsahu, a nad
   ním zostane vidieť mriežka s krmivom.

   Výška je zhora obmedzená: aj s plným košíkom má byť vidieť, že za panelom
   niečo je — inak je to zase celá obrazovka, len s okrúhlymi rohmi.
   ========================================================================== */
@media(max-width:900px){
  /* Zhora až pod pás s hodinami — v apke z plochy tam stránka siaha
     a druhý krok na celú výšku by inak začínal pod hodinami. */
  body.ma-mlistu #modal:not([hidden]){
    top:env(safe-area-inset-top, 0px);
    bottom:var(--mlista-h, 62px);
    left:0;right:0;
    display:flex;align-items:flex-end;justify-content:center;
    overflow:hidden;padding:0;
    background:rgba(20,16,15,.5)}

  body.ma-mlistu #modal .modal-box{
    width:100%;max-width:none;margin:0;
    height:auto;max-height:82%;
    overflow-y:auto;overscroll-behavior:contain;
    padding:20px 18px 20px;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    background:var(--bg);box-shadow:var(--shadow-lg)}

  /* Úchytku vkladá `HafoPanel.uchytka()` ako skutočný prvok — vzhľad aj
     dotykovú plochu nesie `.panel-uchyt` v `styl.css`. */
  body.ma-mlistu #modal .modal-box > .modal-x{touch-action:manipulation}

  /* Prázdny košík nemá čo naťahovať — panel sa zmrští na vetu a odkaz. */
  body.ma-mlistu #modal.rez-prazdna .modal-box{max-height:none}
}

/* ---------- karty rezervácie držia spoločný recept ----------
   Prázdny stav aj druhý krok boli holý text na ploche, kým karty v Mojom
   maznákovi a na webe sú sklo s jemným tieňom. Je to tá istá vec na tej istej
   ploche — vzhľad sa nesmie líšiť podľa toho, na ktorej obrazovke stojí. */
@media(max-width:900px){
  body.ma-mlistu #cartList li.ci-prazdne{
    background:var(--sklo);border:1px solid var(--sklo-ram);
    box-shadow:var(--tien-jemny);border-radius:13px}

  /* Druhý krok je jedna karta s údajmi, rovnako ako karta v Mojom maznákovi.
     Polia v nej vlastný tieň nepotrebujú — nesie ho karta. */
  body.ma-mlistu .modal[data-krok="2"] #rezForm{
    background:var(--sklo);border:1px solid var(--sklo-ram);
    box-shadow:var(--tien-jemny);border-radius:13px;padding:13px}
  /* Polia majú vzhľad zo spoločného receptu v `styl.css` — tu sa už
     neprepisujú. Práve tie dva prepisy robili z tých istých polí dvoje. */
}

/* ==========================================================================
   Panel rezervácie: strop po vrch, druhý krok na celú obrazovku
   --------------------------------------------------------------------------
   Prvý krok je pohľad do košíka — vyrastie podľa obsahu a keď ho je veľa,
   smie siahnuť až po vrch stránky. Druhý krok je vypisovanie a vtedy vyskočí
   klávesnica, ktorá zoberie polovicu displeja: panel sa preto roztiahne na
   celú obrazovku, nech na polia ostane všetko, čo je.
   ========================================================================== */
@media(max-width:900px){
  body.ma-mlistu #modal .modal-box{max-height:100%}

  body.ma-mlistu #modal[data-krok="2"] .modal-box{
    height:100%;max-height:100%;border-radius:0}
  /* Na celej obrazovke úchytka nemá čo naznačovať — gesto tam nie je. */
  body.ma-mlistu #modal[data-krok="2"] .modal-box::before{content:none}

  /* ----- položky košíka kompaktnejšie -----
     Dva produkty zaplnili panel a muselo sa rolovať. Menšia fotka, tesnejšie
     odsadenie a názov bez zbytočného riadka navyše. */
  body.ma-mlistu #cartList{margin:0}
  body.ma-mlistu #cartList li:not(.ci-prazdne){
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:2px 9px;padding:8px 10px;margin-bottom:6px;border-radius:11px}
  body.ma-mlistu #cartList .ci-img{width:38px;height:38px}
  body.ma-mlistu #cartList .ci-n{font-size:.76rem;line-height:1.25}
  body.ma-mlistu #cartList .ci-n small{display:none}
  body.ma-mlistu #cartList .ci-spolu{font-size:.88rem}
  body.ma-mlistu #cartList .ci-q{transform:scale(.92);transform-origin:left center}

  /* Kontakt je jeden blok, nie dve skupiny. */
  .kontakt-blok,
  #ucetForm7 .uc-polia{display:flex;flex-direction:column;gap:9px}
}

/* Karta v karte. Panel rezervácie je karta a v druhom kroku je kartou aj celý
   formulár — zoznam položiek a jednotlivé polia v nich už vlastné pozadie
   nepotrebujú. Každé pritom ukrajovalo výšku vlastným odsadením, takže dva
   produkty zaplnili obrazovku. Výber dňa kartou zostáva: je to samostatná
   vec, nie pole medzi poľami. */
@media(max-width:900px){
  body.ma-mlistu .cart-list,
  body.ma-mlistu #rezForm .kontakt-blok,
  body.ma-mlistu #rezForm > .field{
    background:none;box-shadow:none;padding:0;margin-bottom:10px}
}

/* ==========================================================================
   Filter kompaktnejšie
   --------------------------------------------------------------------------
   Skupina s posuvníkom mala štyri riadky pod sebou: nadpis, hodnota,
   posuvník a „Zrušiť obmedzenie". Dve také skupiny zabrali sedemsto bodov —
   polovicu displeja na to, čo väčšina zákazníkov ani nenastavuje.

   Mriežka ich stiahne na tri: odkaz na zrušenie sedí vpravo pri nadpise, kde
   je preň miesto zadarmo. Je to akcia nad tou skupinou, takže pri jej nadpise
   je aj logickejšie než pod posuvníkom.
   ========================================================================== */
@media(max-width:900px){
  body.ma-mlistu .fgroup:has(.fslider){
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:'nadpis zrus' 'hodnota hodnota' 'posuvnik posuvnik';
    align-items:baseline;column-gap:12px}
  body.ma-mlistu .fgroup:has(.fslider) > h3{grid-area:nadpis;margin:0}
  body.ma-mlistu .fgroup:has(.fslider) .fzrus{
    grid-area:zrus;justify-self:end;padding:0;font-size:.76rem;white-space:nowrap}
  body.ma-mlistu .fgroup:has(.fslider) .fhod{grid-area:hodnota;margin:4px 0 0}
  body.ma-mlistu .fgroup:has(.fslider) .fslider{grid-area:posuvnik;margin:2px 12px 0}

  /* Menej vzduchu všade, kde bol len zo zvyku. Pilulka zostáva dosť veľká
     na palec (34 px + odsadenie je nad hranicou pohodlného terča). */
  body.ma-mlistu .fgroup{padding:11px 0}
  body.ma-mlistu .fgroup > h3{margin-bottom:7px}
  body.ma-mlistu .fgroup{gap:6px}
  body.ma-mlistu .fstr-z{min-height:34px;padding:0 12px}
  body.ma-mlistu .fmore{min-height:34px;padding:0 12px}
  body.ma-mlistu .fnadskupina{margin:12px 0 6px}
  body.ma-mlistu .fgroup-st > h3{padding:8px 11px;margin-bottom:6px}
  body.ma-mlistu .fgroup-st .fstr{padding:3px 9px}
  body.ma-mlistu .fst-poznamka{margin:8px 0 0;font-size:.72rem}
}

/* Tlačidlo na karte drží jednu šírku v oboch stavoch. Keď sa po pridaní do
   rezervácie zmrštilo na fajku, karty vedľa seba prestali vyzerať rovnako —
   a zmenšiť sa smelo len preto, aby nevytlačilo cenu. Spodná hranica šírky
   rieši oboje naraz: väčšie než „Rezervovať" nebude nikdy, menšie tiež nie. */
@media(max-width:560px){
  .pfoot .pbtn{min-width:5.5rem;justify-content:center}
}

/* ==========================================================================
   Úchytka je JEDEN prvok a panely sa vysúvajú JEDNÝM prechodom
   --------------------------------------------------------------------------
   Úchytky boli dve: panel katalógu mal svoju vo farbe `--line`, rezervácia
   inú vo `--line-2` a s iným odsadením. Je to tá istá vec na tom istom mieste
   toho istého tvaru — pravidlo je preto jedno a platí pre oba panely.
   Predlohou je tá z rezervácie.

   Rezervácia sa navyše len zjavila a zmizla: mala `animation`, ktorá beží pri
   zobrazení, ale pri zatváraní prvok rovno zmizne a nie je čo animovať.
   Teraz má triedu `je-otvorene` a prechod ako panel katalógu, takže sa vysunie
   aj zasunie.
   ========================================================================== */
@media(max-width:900px){
  body.ma-mlistu .mkat-uchyt,
  body.ma-mlistu #modal .modal-box::before{
    display:block;width:44px;height:5px;flex:0 0 auto;
    margin:0 auto 10px;border-radius:999px;background:var(--line-2)}
  body.ma-mlistu .mkat-uchyt{margin-top:10px}

  /* Prechod, nie animácia pri zobrazení. `visibility` drží panel mimo dosahu,
     kým je zasunutý, a mení sa až na konci prechodu. */
  /* `animation:none` musí mať aspoň takú váhu ako pravidlo s `mvysun` vyššie
     (`#modal:not([hidden])`). Nemalo — animácia s `both` ostala visieť a držala
     `transform` natvrdo: panel sa nedal stiahnuť prstom dole (ťah hore mení
     výšku, preto fungoval) a pri zatváraní sa nezasunul (majiteľ 24. 9. 2026). */
  body.ma-mlistu #modal:not([hidden]) .modal-box,
  body.ma-mlistu #modal .modal-box{
    animation:none;
    transform:translateY(102%);
    transition:transform .42s cubic-bezier(.32,.72,0,1)}
  body.ma-mlistu #modal.je-otvorene .modal-box{transform:none}
  /* Tieň za panelom sa rozsvieti a zhasne s ním. */
  body.ma-mlistu #modal:not([hidden]){opacity:0;transition:opacity .3s}
  body.ma-mlistu #modal.je-otvorene{opacity:1}
}

@media(prefers-reduced-motion:reduce){
  body.ma-mlistu #modal .modal-box{transition:none}
  body.ma-mlistu #modal:not([hidden]){transition:none}
}

/* Odsadenie nad úchytkou nesie úchytka sama (`styl.css`), nie panel —
   inak má každý panel nad ňou iné množstvo miesta. */
@media(max-width:900px){
  body.ma-mlistu #modal .modal-box{padding-top:0}

  /* Úchytka košíka stojí MIMO rolovanej časti, ako pri paneli Katalóg.
     Kým sa rolovalo celé okno, bola úchytka vnútri rolovacej plochy a na
     telefóne si ťah vzal prehliadač pre rolovanie — panel sa nepohol
     (majiteľ 24. 9. 2026). Roluje sa preto obsah (`#mForm`, `#hotovo`),
     okno samo stojí. */
  body.ma-mlistu #modal .modal-box{display:flex;flex-direction:column;overflow:hidden;
    padding-bottom:0}
  body.ma-mlistu #modal .modal-box > #mForm,
  body.ma-mlistu #modal .modal-box > #hotovo{flex:1 1 auto;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;padding-bottom:20px}
  /* Nadpis je tiež úchytka — prehliadač z neho nesmie začať rolovať, inak
     ťah zoberie pre seba. */
  body.ma-mlistu #mTitle{touch-action:none;user-select:none;-webkit-user-select:none}
}

/* Dlaždice druhov v paneli Katalóg: ikona je hlavná vec, podľa nej sa
   zviera vyberá očami. Dvadsaťtri bodov bolo sotva vidieť, hoci miesta
   je v dlaždici dosť. */
@media(max-width:900px){
  body.ma-mlistu .mkat-zv{padding:10px 2px 8px;gap:5px}
  body.ma-mlistu .mkat-zv svg{width:36px;height:36px}
}

/* ==========================================================================
   Môj maznák v katalógu
   --------------------------------------------------------------------------
   Návrh: https://claude.ai/artifact/9dfB9XSaTCUqkc6YTo6d7L, obrazovky 1 a 3.
   Všetko visí na `.ma-maznak` na <html> (nastavuje ju `ucet.js`, trvalo).
   Karta maznáka a pilulka v hlavičke sú len pre počítač — telefón má tab
   Môj maznák v spodnej lište (`body.ma-mlistu`).
   ========================================================================== */

/* ----- výzva cez celú šírku: príchod, potom okraj dýcha a lesk sa vracia --
   Animácia sa spustí sama vždy, keď sa pás ukáže: prvok prechádza z
   `display:none`, a to animácie reštartuje. Skript nič prepínať nemusí. */
.ma-maznak .zv-vyzva{
  gap:18px;padding:14px 48px 14px 18px;
  background:linear-gradient(115deg,
    rgba(253,236,235,.92) 0%, rgba(255,255,255,.74) 42%, rgba(255,255,255,.56) 100%);
  animation:mz-prich .7s cubic-bezier(.2,.9,.25,1.1) both,
            mz-ziara 1.9s .55s ease-out both,
            mz-dych 2.6s 2.45s ease-in-out infinite alternate}
.ma-maznak .zv-vyzva .zv-ikona{animation:mz-pes .95s .3s cubic-bezier(.3,1.3,.5,1) both}
.ma-maznak .zv-txt b{font-size:1.19rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:3px}
/* Tlačidlo je červené sklo ako ostatné výzvy na webe — majiteľ: „nie čierne". */
.ma-maznak .zv-cta,.ma-maznak .zv-cta:hover{
  position:relative;overflow:hidden;padding:14px 26px;font-size:.94rem;
  background:var(--cta);color:#fff;border-color:transparent;
  box-shadow:var(--cta-lesk), var(--cta-tien);
  animation:mz-tep 1.5s 1s ease-out 2}
.ma-maznak .zv-cta:hover{filter:brightness(1.06)}
.ma-maznak .zv-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:42%;
  pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  animation:mz-lesk 1s 1.05s ease-in-out both, mz-lesk-opak 4.5s 3.5s ease-in-out infinite}
@media(min-width:641px){
  .ma-maznak .zv-vyzva .zv-ikona{width:76px;height:76px}
  /* V úzkom paneli filtrov (286 px) sa ikona, text a tlačidlo do riadka nezmestia –
     text sa zalamoval po slove (13. 10. 2026). Text ide hore na celú šírku, pod ním pes a tlačidlo. */
  #filterBody > .zv-vyzva{flex-wrap:wrap;gap:10px;padding:14px}
  #filterBody > .zv-vyzva .zv-txt{order:-1;flex:1 1 100%}
  #filterBody > .zv-vyzva .zv-txt b{font-size:1rem;padding-right:24px}
  #filterBody > .zv-vyzva .zv-ikona{width:46px;height:46px}
  #filterBody > .zv-vyzva .zv-cta{flex:1 1 0;min-width:0;padding:12px 10px;font-size:.86rem}
}

@keyframes mz-prich{
  0%{opacity:0;transform:translateY(-26px) scale(.97)}
  60%{opacity:1;transform:translateY(5px) scale(1.006)}
  100%{opacity:1;transform:none}}
/* Tiene sú vypísané celé: `box-shadow` sa animuje len medzi zoznamami
   s rovnakým počtom položiek. Prvé tri sú základ skla (`--sklo-tien`). */
@keyframes mz-ziara{
  0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 16px 30px -16px rgba(78,58,44,.5), 0 2px 5px -3px rgba(78,58,44,.35), 0 0 0 0 rgba(225,33,31,0), 0 0 0 0 rgba(225,33,31,0)}
  30%{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 16px 30px -16px rgba(78,58,44,.5), 0 2px 5px -3px rgba(78,58,44,.35), 0 0 0 3px rgba(225,33,31,.45), 0 22px 44px -16px rgba(225,33,31,.6)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 16px 30px -16px rgba(78,58,44,.5), 0 2px 5px -3px rgba(78,58,44,.35), 0 0 0 1px rgba(225,33,31,.14), 0 14px 32px -18px rgba(225,33,31,.28)}}
@keyframes mz-dych{
  0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 16px 30px -16px rgba(78,58,44,.5), 0 2px 5px -3px rgba(78,58,44,.35), 0 0 0 1px rgba(225,33,31,.14), 0 14px 32px -18px rgba(225,33,31,.28)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 16px 30px -16px rgba(78,58,44,.5), 0 2px 5px -3px rgba(78,58,44,.35), 0 0 0 2px rgba(225,33,31,.32), 0 18px 40px -14px rgba(225,33,31,.45)}}
@keyframes mz-pes{
  0%{opacity:0;transform:translateY(26px) scale(.45) rotate(-16deg)}
  55%{opacity:1;transform:translateY(-8px) scale(1.12) rotate(8deg)}
  75%{transform:translateY(0) scale(.96) rotate(-4deg)}
  88%{transform:rotate(2deg)}
  100%{opacity:1;transform:none}}
@keyframes mz-tep{
  0%{box-shadow:var(--cta-lesk), var(--cta-tien), 0 0 0 0 rgba(225,33,31,.55)}
  70%,100%{box-shadow:var(--cta-lesk), var(--cta-tien), 0 0 0 16px rgba(225,33,31,0)}}
@keyframes mz-lesk{0%{left:-60%}100%{left:135%}}
@keyframes mz-lesk-opak{0%{left:-60%;opacity:.7}24%,100%{left:135%;opacity:.7}}
@media (prefers-reduced-motion:reduce){
  .ma-maznak .zv-vyzva,.ma-maznak .zv-vyzva .zv-ikona,
  .ma-maznak .zv-cta,.ma-maznak .zv-cta::after{animation:none}
}

/* ----- pilulka v hlavičke: „Môj maznák", po uložení meno zvieraťa ----- */
/* Rovnaké sklo ako Prihlásenie a telefón vedľa neho (majiteľ 23. 9. 2026) —
   do vtedy bola ružová s červeným textom a v hlavičke trčala. Prejdenie myšou
   dedí zo spoločného `body .nav-vpravo a:hover`. */
body .nav-vpravo .nav-maznak{
  background:var(--sklo);color:var(--ink)!important;
  border:1.5px solid var(--sklo-ram);
  -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  box-shadow:var(--sklo-tien);white-space:nowrap}
.nav-maznak svg{width:18px;height:18px;fill:currentColor}
/* `body .nav-vpravo a{display:inline-flex}` by inak prebilo `hidden`. */
.nav-maznak[hidden],body.ma-mlistu .nav-maznak{display:none!important}

/* ----- karta maznáka navrchu filtra ----- */
/* Ten istý recept ako karta maznáka v okne (`.mz-karta` v styl.css): sklo,
   sklenený rám a jemný tieň — nie vlastná biela. */
.mz-filter{display:flex;flex-direction:column;gap:12px;margin:0 0 16px;padding:13px;
  border-radius:13px;background:var(--sklo);border:1px solid var(--sklo-ram);
  box-shadow:var(--tien-jemny)}
.mz-filter[hidden],body.ma-mlistu .mz-filter{display:none}
.mzf-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* Krúžky v lište nad zvieraťom = návrh C (https://claude.ai/artifact/VWvVhqAsu5c5tQSVMhtcFd,
   majiteľ 7. 10. 2026). Šípky 28 px, koliesko a plus 32 px, sklo s pružinou;
   hodnoty 1:1 z návrhu. */
.mzf-sip,.mzf-uprav,.mzf-plus{all:unset;box-sizing:border-box;display:grid;place-items:center;flex:0 0 auto;
  border-radius:50%;cursor:pointer;color:var(--ink-2);
  background:var(--sklo);border:1px solid var(--sklo-ram);box-shadow:var(--sklo-tien);
  -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  transition:background .15s,color .15s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.mzf-sip{width:28px;height:28px}
.mzf-uprav,.mzf-plus{width:32px;height:32px}
.mzf-plus{color:var(--red)}
.mzf-sip:hover,.mzf-uprav:hover,.mzf-plus:hover{background:rgba(255,255,255,.95);color:var(--ink);transform:scale(1.06)}
.mzf-sip svg,.mzf-uprav svg,.mzf-plus svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mzf-sip svg{width:15px;height:15px}
.mzf-uprav svg,.mzf-plus svg{width:17px;height:17px}
.mzf-kruhy{display:flex;gap:6px;margin-left:auto}
@media (prefers-reduced-motion:reduce){ .mzf-sip,.mzf-uprav,.mzf-plus{transition:none} }
.mzf-bodky{display:flex;gap:6px}
.mzf-bodka{all:unset;cursor:pointer;width:7px;height:7px;border-radius:999px;
  background:var(--line-2);transition:width .2s, background .2s}
.mzf-bodka.on{width:20px;background:var(--red)}
.mzf-zv{position:relative;display:flex;align-items:center;gap:10px}
.mzf-vyber{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;
  flex:1 1 auto;min-width:0;cursor:pointer;border-radius:10px}
/* Na webe je zviera bez zlatého odznaku (6. 10. 2026) – len ikona vo farbe
   `--zlato-ink`; box 76 px, ikona 96 px sa z neho zápornými okrajmi vysunie. */
.mzf-ik{display:grid;place-items:center;flex:0 0 auto;width:76px;height:76px;
  color:var(--zlato-ink);--plemeno-r:96px;transition:color .15s}
.mzf-ik svg{width:96px;height:96px;margin:-10px;fill:currentColor}
.mzf-ik.ma-plemeno::before{margin:-10px}
/* Jedno zviera = variant A z toho istého návrhu: ikona 68 px, meno 22 px,
   koliesko a plus 32 px pod sebou vpravo od zvieraťa. */
.mz-filter.jedno .mzf-zv{gap:12px}
.mz-filter.jedno .mzf-ik{width:68px;height:68px;--plemeno-r:86px}
.mz-filter.jedno .mzf-ik svg{width:86px;height:86px;margin:-9px}
.mz-filter.jedno .mzf-ik.ma-plemeno::before{margin:-9px}
.mz-filter.jedno .mzf-kruhy{flex-direction:column;gap:8px;margin-left:0}
/* Hlava plemena namiesto ikony druhu (ikonaPlemena v rezervacia.js). Maska,
   nie <img>: farbu berie z currentColor ako sprite, teda aj zosivenie. */
.ma-plemeno > svg{display:none}
.ma-plemeno::before{content:"";flex:0 0 auto;width:var(--plemeno-r,36px);height:var(--plemeno-r,36px);
  background:currentColor;-webkit-mask:var(--plemeno) center/contain no-repeat;
  mask:var(--plemeno) center/contain no-repeat}
.nav-maznak.ma-plemeno{--plemeno-r:32px}
.nav-maznak.ma-plemeno::before{margin:-8px -5px}   /* pilulka ostane vysoká ako susedné */

/* ----- pilulky všetkých zvierat v hornej lište (len počítač; majiteľ 12. 10. 2026) -----
   Pravý stĺpec lišty je `1fr` vedľa stredného `auto` (Predajňa), preto sa rad zmestí do
   toho, čo po pilulke Predajňa ostane: `min-width:0` dovolí stĺpcu zúžiť sa a rad
   (flex:1 1 auto + overflow) sa zmenší, nie ostatné pilulky. Pri pretečení šípky
   (rovnaký sklenený krúžok `mzf-sip` ako v karte maznáka) na krajoch. */
.nav-zvierata[hidden]{display:none}
@media (max-width:900px){ .nav-zvierata{display:none!important} }
@media (min-width:901px){
  html body.katalog:not(.ma-mlistu) #hdr .nav:has(.nav-zvierata:not([hidden])){
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}   /* prebije `minmax(max-content,1fr)` nižšie: Predajňa ostane v strede */
  body.katalog:not(.ma-mlistu) .nav-vpravo{min-width:0;max-width:100%}
  body.katalog:not(.ma-mlistu) .nav-vpravo > *{flex:none}
  body.katalog:not(.ma-mlistu) .nav-vpravo > .nav-zvierata:not([hidden]){
    display:flex;align-items:center;position:relative;flex:0 1 auto;min-width:0;margin-right:4px}
  .nav-maznak.maz-skry{display:none!important}
  .nav-zv-rad{display:flex;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none;
    padding:8px 2px;margin:-8px 0}
  .nav-zv-rad::-webkit-scrollbar{display:none}
  .nav-zv-rad .nav-zv{flex:none;max-width:200px}
  .nav-zv-rad .nav-zv span{overflow:hidden;text-overflow:ellipsis}
  .nav-zv-sip{position:absolute;top:50%;margin-top:-14px;z-index:2}
  .nav-zv-sip[hidden]{display:none}
  .nav-zv-sip:first-child{left:-6px}
  .nav-zv-sip:last-child{right:-6px}
}
/* Maznák je v karte, ale výber je zrušený — ikona zosivie, ťuknutím sa zapne. */
.mzf-zv:not(.je) .mzf-ik{color:var(--ink-soft)}
.mzf-t{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.mzf-t b{font-family:var(--head);font-size:1.5rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;color:var(--ink)}
.mzf-t span{font-size:.86rem;margin-top:3px;color:var(--ink-soft)}
.mz-filter.jedno .mzf-t b{font-size:1.4rem}
.mz-filter.jedno .mzf-t span{font-size:.84rem}
.mz-filter .mzf-ulozit{display:flex;width:100%;padding:11px 16px;font-size:.84rem}
.mzf-vyber:focus-visible,.mzf-uprav:focus-visible,.mzf-plus:focus-visible,
.mzf-sip:focus-visible,.mzf-bodka:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* Pás „Vyberať pre" na počítači nahrádza karta — telefón si ho necháva. */
.ma-maznak body:not(.ma-mlistu) .moje-zvierata{display:none}

/* ----- „Pre Lucy ×" vedľa počtu produktov ----- */
.kat-hlava-l{display:contents}
.ma-maznak body:not(.ma-mlistu) .kat-hlava-l{display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;min-width:0}
.ma-maznak body:not(.ma-mlistu) .kat-pre{display:inline-flex;align-items:center;gap:7px;
  min-height:32px;padding:0 6px 0 10px;border-radius:999px;
  background:var(--red-soft);color:var(--red-dk);font-size:.82rem;font-weight:700;white-space:nowrap}
.ma-maznak body:not(.ma-mlistu) .kat-pre[hidden]{display:none}
.ma-maznak body:not(.ma-mlistu) .kat-pre svg{width:18px;height:18px;fill:currentColor}
.ma-maznak body:not(.ma-mlistu) .kat-pre-x{all:unset;box-sizing:border-box;display:grid;
  place-items:center;width:20px;height:20px;border-radius:999px;cursor:pointer;
  background:var(--red-soft-2);font-size:.9rem;line-height:1}

/* Pilulka „Môj maznák" pridala do skupiny vpravo ~130 px a pri 1280 px sa
   telefón zalomil na tri riadky. Stĺpec vpravo si preto vezme toľko, koľko
   potrebuje (stred sa posunie o pár pixelov), a pod 1200 px ostane pri
   telefóne len ikona — číslo je v pätičke aj v chate. */
.ma-maznak body:not(.ma-mlistu) #hdr .nav{grid-template-columns:1fr auto minmax(max-content,1fr)}
.ma-maznak body:not(.ma-mlistu) #hdr .nav-vpravo a{white-space:nowrap}
@media(max-width:1199px){
  .ma-maznak body:not(.ma-mlistu) #hdr .nav-cta [data-kt="telefon"]{display:none}
}

/* ---------- lišty sa pri rolovaní dole schovajú ----------
   Horná aj spodná lišta odídu z obrazovky, keď zákazník roluje tovarom dole,
   a vrátia sa pri rolovaní hore alebo po ťuknutí (`listyUkaz` v
   rezervacia.js). Len telefón — na počítači spodná lišta nie je a horná
   ostáva. Plávajúce tlačidlá (košík, chat) klesnú o výšku lišty, inak by
   viseli nad prázdnym miestom. `translate`, nie `transform` — ten si
   tlačidlá nesú vlastný a navzájom by sa prepisovali. */
/* Pohyb (majiteľ 24. 9. 2026 — „pekná animácia, ale nech neobťažuje"):
   odchod je rýchlejší a plynulý, lišta pri ňom zároveň mierne zoslabne,
   takže nezmizne naraz. Návrat je o chlp pomalší a dobehne mäkko — lišta
   priplachtí, neskočí. Žiadne odrazy ani preskoky, nech sa oko nemá na čom
   zastaviť. Prechod zapísaný pri `.lista-skryta` platí pre odchod, ten pri
   základnom stave pre návrat. */
@media(max-width:900px){
  body.ma-mlistu{
    --lista-von:.3s cubic-bezier(.4,0,.7,.2);
    --lista-spat:.42s cubic-bezier(.22,1,.36,1)}

  /* návrat */
  body.ma-mlistu .mvrch,
  body.ma-mlistu .mlista{visibility:visible;
    transition:translate var(--lista-spat),opacity .3s ease-out,visibility 0s}
  /* Pôvodné prechody tlačidiel (zjavenie, zväčšenie) sa musia zopakovať —
     `transition` sa neskladá, posledný zápis vyhráva celý. */
  body.ma-mlistu .chat-btn{transition:transform .18s,translate var(--lista-spat)}

  /* odchod */
  /* Po odchode `visibility:hidden`. Safari na iPhone farbí pás pri hodinách
     aj pás pod svojím panelom podľa lišty, ktorá pri okraji stojí — aj keď je
     posunutá mimo obrazovky. Kým tam „bola", pásy ostali vo farbe lišty
     a nesplývali so stenou (majiteľ 24. 9. 2026). */
  body.ma-mlistu.lista-skryta .mvrch,
  body.ma-mlistu.lista-skryta .mlista{opacity:0;visibility:hidden;
    transition:translate var(--lista-von),opacity .24s ease-in .06s,visibility 0s linear .3s}
  body.ma-mlistu.lista-skryta .chat-btn{transition:transform .18s,translate var(--lista-von)}

  body.ma-mlistu.lista-skryta .mvrch{translate:0 -100%}
  body.ma-mlistu.lista-skryta .mlista{translate:0 100%}
  body.ma-mlistu.lista-skryta .chat-btn{translate:0 var(--mlista-h, 62px)}

  /* Pás pri hodinách aj pás pod panelom Safari majú splynúť so stenou za
     kartami. Safari do nich dáva plnú farbu stránky, keď pri okraji nič
     nestojí — tak dostanú priemer steny (stena je vodorovný prechod, plná
     farba ho presne nenahradí). Vlastný prúžok pri hodinách tu byť nesmie:
     Safari by ho vzal za lištu.
     Od 1. 10. 2026 to platí VŽDY, nielen keď lišty odídu (majiteľ: pás pri
     hodinách má byť priehľadný aj so zobrazenou lištou) — stav „lišta
     vidno" a „lišta preč" sa tak pri okraji tvária rovnako. */
  html:has(body.ma-mlistu){background-color:var(--stena-plna)}
}
/* V apke (z plochy) je to naopak: pod hodinami nie je pás Safari, ale obsah,
   a iOS cezeň kreslí tmavé rozmazanie, keď pod ním bežia karty s červenými
   tlačidlami — v apke bol hore tmavý pás (majiteľ 24. 9. 2026). Tam preto
   pod hodiny patrí prúžok so stenou, ten istý prechod ako za kartami. Len
   v apke: v Safari by ho prehliadač vzal za lištu a pás zafarbil podľa neho. */
@media(max-width:900px){
  html.je-apka body.ma-mlistu::before{content:'';position:fixed;left:0;right:0;top:0;z-index:150;
    height:env(safe-area-inset-top, 0px);background:var(--stena);pointer-events:none;
    opacity:0;transition:opacity .3s ease-out}
  html.je-apka body.ma-mlistu.lista-skryta::before{opacity:1;transition:opacity .24s ease-in}
}
/* Kto má v telefóne vypnutý pohyb, lišty odídu a vrátia sa bez posúvania. */
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  body.ma-mlistu{--lista-von:0s linear;--lista-spat:0s linear}
}

@media(max-width:900px) and (prefers-reduced-motion:reduce){
  body.ma-mlistu #modal .modal-box{transition:none}
}

/* „Ako to funguje" v paneli Predajňa: vždy rozbalené, bez nadpisu a bez
   prepínača – tak ako v návrhu A. Na počítači ho v stránke nevidno, je len
   v paneli pod pilulkou Predajňa (majiteľ 28. 9. 2026). */
.pred-pop .kat-ako{margin:10px 0 0;padding:12px 14px}
.pred-pop .ako-nadpis,.pred-pop .ako-prepinac{display:none}
.pred-pop .kat-ako .ako-kroky{display:flex;padding:0}
@media(min-width:901px){ .kat-wrap #katAko{display:none} }

/* ==========================================================================
   Nový košík na počítači – návrh B (30. 9. 2026)
   https://claude.ai/artifact/VfDfTDpjUJGf8hZpXyD8Fp (artboard B)
   --------------------------------------------------------------------------
   Vľavo čo si beriem (položky ako karty, kupón, darček, často kupované),
   vpravo jedna karta: kontakt, deň vyzdvihnutia, poznámka, zľava, súhrn
   a odoslanie. Všetko tu visí na triede `kosik-b` na <html> a platí len nad 900 px. Mobilný košík (Mobil D) má
   vlastný oddiel na konci súboru, tento ho nesmie zmeniť.
   Prázdny košík má to isté okno, v ňom len prázdny stav (`.rez-prazdna`, pravidlá na konci oddielu).
   ========================================================================== */
html.kosik-b{
  --kb-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --kb-darcek:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M5 12v9h14v-9M12 8C10 3.500 6 4.500 7.500 7c.7 1 2.500 1 4.500 1zm0 0c2-4.500 6-3.500 4.500-1-.7 1-2.500 1-4.500 1z'/%3E%3C/svg%3E");
}
html.kosik-b .kb-hlava,
html.kosik-b .kb-vypis,
html.kosik-b .kb-hotovo{display:none}

@media(min-width:901px){
  /* --- okno --- */
  /* Bez rolovania (30. 9. 2026): okno je najviac také vysoké ako obrazovka
     (`dvh` = bez lišty prehliadača) a `#mForm` ďalej sa stiahne do zvyšku;
     rolovať sa smie len zoznam položiek vľavo a (pri rozbalenom kontakte)
     pravá karta. Cieľ: 13" MacBook, okno prehliadača 1280 × 700. */
  html.kosik-b #modal{background:rgba(28,27,26,.55);align-items:start;padding:12px 18px}
  html.kosik-b #modal .modal-box{
    max-width:1200px;margin-top:0;padding:24px 32px 26px;
    max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);
    box-shadow:var(--shadow-lg);font-size:16.5px;line-height:1.5;color:var(--ink-2);
    /* Návrh má tie isté farby ako `:root`; `body` ich pre stenu stránky prepisuje
       na tmavšie odtiene, v okne košíka majú platiť pôvodné. */
    --bg-soft:#F7F5F4;--line:#E6E1E0}
  html.kosik-b #modal .modal-x{
    right:20px;top:18px;width:36px;height:36px;padding:4px;box-sizing:border-box;
    font-size:0;line-height:0;color:var(--ink-soft)}
  html.kosik-b #modal .modal-x::before{
    content:'';display:block;width:28px;height:28px;background:currentColor;
    -webkit-mask:var(--kb-x) center/100% 100% no-repeat;mask:var(--kb-x) center/100% 100% no-repeat}
  html.kosik-b #modal #mTitle{
    font-size:28px;line-height:1.3;letter-spacing:.015em;margin:0 0 14px}

  /* --- dva stĺpce: pravú kartu tvorí formulár; prázdny posledný riadok
         pohltí výšku, o ktorú je pravá strana vyššia než ľavá. Riadok so
         zoznamom sa pri nedostatku výšky stiahne (a zoznam sa v ňom roluje). --- */
  html.kosik-b #modal #mForm{
    display:grid;grid-template-columns:minmax(0,680fr) minmax(340px,424fr);column-gap:28px;
    grid-template-rows:auto minmax(0,max-content) auto auto auto minmax(0,1fr);align-items:start;
    max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px)}
  html.kosik-b #modal #mTitle{grid-column:1/-1;grid-row:1}
  html.kosik-b #modal #cartList{grid-column:1;grid-row:2;align-self:stretch}
  html.kosik-b #modal #cartKupon{grid-column:1;grid-row:3;margin:10px 0 0}
  html.kosik-b #modal #cartDarcek{grid-column:1;grid-row:4;margin:10px 0 0}
  html.kosik-b #modal #cartOdp{grid-column:1;grid-row:5;margin:12px 0 0;border-top:0;padding-top:0}
  html.kosik-b #modal #rezForm{
    grid-column:2;grid-row:2 / 7;align-self:stretch;min-width:0;min-height:0;overflow-y:auto;
    display:flex;flex-direction:column;gap:10px;
    background:var(--v-okne);border-radius:16px;box-shadow:var(--tien-jemny);padding:16px 18px 16px}

  /* --- položky ako karty --- */
  html.kosik-b #modal #cartList{
    max-height:none;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;
    /* odsadenie pre tieň kariet, ktorý by rolovací kontajner orezal */
    padding:4px 10px 12px 4px;margin:-4px -10px -12px -4px}
  html.kosik-b #modal #cartList li{
    display:grid;grid-template-columns:96px minmax(0,1fr) auto;
    grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);column-gap:18px;row-gap:0;align-items:center;
    padding:10px 16px 10px 10px;border:0;border-radius:16px;background:var(--v-okne);
    box-shadow:var(--tien-jemny);font-size:16.5px}
  html.kosik-b #modal #cartList .ci-img{
    grid-column:1;grid-row:1 / 5;width:96px;height:96px;padding:6px;box-sizing:border-box;
    border:1px solid var(--line);border-radius:14px;background:var(--v-okne)}
  html.kosik-b #modal #cartList .ci-img img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
  html.kosik-b #modal #cartList .ci-img svg{width:44px;height:56px}
  html.kosik-b #modal #cartList .ci-n{grid-column:2;grid-row:2;line-height:1.3}
  html.kosik-b #modal #cartList .ci-det{
    display:block;width:100%;text-align:left;font-size:18px;font-weight:700;line-height:1.3;color:var(--ink)}
  html.kosik-b #modal #cartList .ci-n br{display:none}
  html.kosik-b #modal #cartList .ci-n small{
    display:block;margin-top:2px;font-size:14px;line-height:1.4}
  html.kosik-b #modal #cartList .ci-kupon{margin-top:2px}
  html.kosik-b #modal #cartList .ci-q{grid-column:2;grid-row:3;gap:10px;margin-top:8px}
  html.kosik-b #modal #cartList .ci-q button{
    width:32px;height:32px;padding:0;border:1.5px solid var(--line);border-radius:8px;
    background:var(--v-okne);font-size:18px;line-height:1;color:var(--ink)}
  html.kosik-b #modal #cartList .ci-q b{
    min-width:22px;text-align:center;font-size:17px;line-height:1.5;color:var(--ink)}
  html.kosik-b #modal #cartList .ci-x{
    grid-column:3;grid-row:1 / 3;align-self:start;justify-self:end;margin:2px 0 0;
    padding:4px;font-size:0;line-height:0;color:var(--ink-soft)}
  html.kosik-b #modal #cartList .ci-x::before{
    content:'';display:block;width:18px;height:18px;background:currentColor;
    -webkit-mask:var(--kb-x) center/100% 100% no-repeat;mask:var(--kb-x) center/100% 100% no-repeat}
  html.kosik-b #modal #cartList .ci-spolu{
    display:block;grid-column:3;grid-row:3 / 5;align-self:end;justify-self:end;margin:0 0 2px;
    font-family:var(--head);font-weight:600;font-size:22px;line-height:1.5;letter-spacing:.02em;
    color:var(--ink);white-space:nowrap}

  /* --- kupón --- */
  html.kosik-b #modal #cartKupon .cart-kupon-pole{margin:0}
  html.kosik-b #modal #cartKupon .cart-kupon-pole label{
    font-size:13.5px;line-height:1.5;margin-bottom:5px}
  html.kosik-b #modal #cartKupon .cart-kupon-moje{margin-top:8px;font-size:13.3px;line-height:1.5}
  html.kosik-b #modal #cartKupon .vyzdvih-pilulky{margin-top:0}
  html.kosik-b #modal #cartKupon .cart-kupon-blizko{
    margin:8px 0 0;font-size:13.4px;line-height:1.5}

  /* --- darček --- */
  html.kosik-b #modal #cartDarcek .cd-nadpis{
    display:flex;align-items:center;gap:8px;font-size:15.2px;line-height:1.5;color:var(--ink)}
  html.kosik-b #modal #cartDarcek .cd-ikona{
    display:block;flex:none;width:18px;height:18px;font-size:0;background:var(--red);
    -webkit-mask:var(--kb-darcek) center/100% 100% no-repeat;mask:var(--kb-darcek) center/100% 100% no-repeat}
  html.kosik-b #modal #cartDarcek .cd-pod{margin:1px 0 6px;font-size:13.3px;line-height:1.4}
  html.kosik-b #modal #cartDarcek .cd-volby{grid-template-columns:repeat(3,minmax(0,1fr))}
  html.kosik-b #modal #cartDarcek .cd-volba{font-size:13.2px;line-height:1.3;padding:6px 10px}
  html.kosik-b #modal #cartDarcek .cd-volba img{display:none}
  html.kosik-b #modal #cartDarcek .cd-volba input{
    -webkit-appearance:none;appearance:none;flex:none;width:16px;height:16px;margin:0;
    border-radius:50%;border:1.5px solid var(--line-2);background:var(--v-okne);cursor:pointer}
  html.kosik-b #modal #cartDarcek .cd-volba input:checked{border:5px solid var(--red)}
  html.kosik-b #modal #cartDarcek .cd-volba input:focus-visible{outline:2px solid var(--red);outline-offset:2px}

  /* --- často kupované spolu --- */
  html.kosik-b #modal #cartOdp h3{
    font-size:14.5px;line-height:1.4;letter-spacing:.04em;font-weight:600;color:var(--ink);margin:0 0 6px}
  html.kosik-b #modal #cartOdp .cart-odp-rad{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.kosik-b #modal #cartOdp .podp{
    display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);
    column-gap:10px;row-gap:0;align-items:center;padding:6px 8px;
    border:1px solid var(--karta-ram);border-radius:12px;background:var(--panel);
    box-shadow:var(--tien-jemny);color:var(--ink-2)}
  html.kosik-b #modal #cartOdp .podp-img{
    grid-column:1;grid-row:1 / 5;width:48px;height:48px;aspect-ratio:auto;border-radius:8px;background:var(--bg-soft)}
  html.kosik-b #modal #cartOdp .podp-n{
    grid-column:2;grid-row:2;display:block;-webkit-line-clamp:unset;overflow:visible;
    font-size:12.6px;line-height:1.3;color:var(--ink-2)}
  html.kosik-b #modal #cartOdp .podp-c{
    grid-column:2;grid-row:3;margin-top:2px;font-size:13.6px;line-height:1.5;color:var(--ink)}

  /* --- pravá karta --- */
  html.kosik-b #modal #rezForm > *{margin:0}
  html.kosik-b #modal #rKontakt{order:1;display:flex;flex-direction:column;gap:10px}
  /* Neprihlásený: meno a telefón vedľa seba, aby sa pravý stĺpec zmestil aj na 13" notebook bez rolovania */
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]) > :not(.field),
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]) > .field:has(> #rMail),
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]) > .field:has(> #rAdresa){grid-column:1/-1}
  /* Adresa doručenia: ulica na celý riadok, PSČ (úzke) a obec v jednom riadku (`.adresa-psc` je v styl.css). */
  html.kosik-b #modal #rKontakt .adresa-psc{margin:0}
  html.kosik-b #modal #rKontakt[data-kb="zbalene"] .adresa-psc{display:none}
  html.kosik-b #modal #rVyzdvih{order:2}
  html.kosik-b #modal #rezForm > .kontakt-blok:not(#rKontakt){order:3}
  html.kosik-b #modal #cartZlava,
  html.kosik-b #modal #cartVernost{order:4}
  html.kosik-b #modal #rSuhrn{order:5}
  html.kosik-b #modal #rezForm > .rez-pravne{order:6;margin-top:auto}
  html.kosik-b #modal #rezForm > button[type=submit]{order:7}
  html.kosik-b #modal #rMsg{order:8;margin-top:0}
  /* Veta pod tlačidlom opakuje právnu vetu nad ním; na 13" notebooku by pre ňu stĺpec rolovať */
  html.kosik-b #modal #rezForm > .modal-note{display:none}

  /* popisky a polia */
  html.kosik-b #modal #rezForm .field{margin:0}
  html.kosik-b #modal #rezForm .field label{
    font-size:13.5px;line-height:1.4;margin-bottom:5px}
  html.kosik-b #modal #rezForm .field label em{
    font-family:var(--text);font-style:normal;font-weight:500;letter-spacing:.04em;
    text-transform:none;color:var(--ink-soft);font-size:12px}
  html.kosik-b #modal #rezForm .field input,
  html.kosik-b #modal #rezForm .field textarea{display:block}
  html.kosik-b #modal #rezForm textarea{height:40px;min-height:0;resize:none;padding-top:9px;padding-bottom:9px;transition:height .18s ease}
  /* Poznámka: jeden riadok, pri písaní (alebo keď už niečo obsahuje) sa zväčší */
  html.kosik-b #modal #rezForm textarea:focus,
  html.kosik-b #modal #rezForm textarea:not(:placeholder-shown){height:76px}

  /* kontakt */
  html.kosik-b #modal #rKontakt .kb-hlava{
    display:flex;align-items:center;justify-content:space-between;margin-bottom:-4px}
  html.kosik-b #modal #rKontakt .kb-hlava h3{
    font-size:17.5px;line-height:1.5;letter-spacing:.03em;color:var(--ink);margin:0}
  html.kosik-b #modal .kb-uprav{padding:6px 14px;font-size:13.5px;gap:7px}
  html.kosik-b #modal .kb-hotovo .btn{padding:14px 20px;font-size:13.5px;gap:7px}
  html.kosik-b #modal .kb-ico{
    display:block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  html.kosik-b #modal .kb-ico-mala{width:16px;height:16px}
  html.kosik-b #modal .kb-vypis{
    flex-direction:column;gap:3px;padding:8px 14px;border-radius:12px;background:var(--bg-soft)}
  html.kosik-b #modal .kb-riadok{
    display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.45;color:var(--ink-2)}
  html.kosik-b #modal .kb-riadok .kb-ico{color:var(--red)}
  html.kosik-b #modal .kb-riadok b{color:var(--ink)}
  html.kosik-b #modal .kb-hotovo{justify-content:flex-end}
  /* prihlásený: vypísaný blok, alebo polia s Hotovo; neprihlásený: polia */
  html.kosik-b #modal #rKontakt .kb-hlava{display:flex}
  html.kosik-b #modal #rKontakt .kb-uprav{display:none}
  html.kosik-b #modal #rKontakt[data-kb="zbalene"] .kb-uprav{display:inline-flex}
  html.kosik-b #modal #rKontakt[data-kb="zbalene"] .kb-vypis{display:flex}
  html.kosik-b #modal #rKontakt[data-kb="zbalene"] .field{display:none}
  html.kosik-b #modal #rKontakt[data-kb="uprava"] .kb-hotovo{display:flex}

  /* deň vyzdvihnutia */
  html.kosik-b #modal #rVyzdvihNadpis{
    display:block;font-family:var(--head);font-size:13.5px;font-weight:600;line-height:1.5;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}
  html.kosik-b #modal .vyzdvih-pilulky button{line-height:1.3}
  html.kosik-b #modal #rVyzdvihPozn{margin-top:5px;font-size:12.2px;line-height:1.4}

  /* zľava, súhrn, právna veta */
  html.kosik-b #modal #cartZlava{
    padding:10px 14px;border-radius:10px;font-size:14.4px;line-height:1.5}
  html.kosik-b #modal #cartVernost{font-size:13.1px}
  html.kosik-b #modal #rSuhrn{
    background:var(--bg-soft);border-radius:16px;padding:10px 16px;box-shadow:none}
  html.kosik-b #modal #rSuhrn .rez-riadok{
    font-size:14px;line-height:1.4;padding:2px 0;color:var(--ink-2)}
  html.kosik-b #modal #rSuhrn .rez-riadok.je-spolu{
    font-size:22px;color:var(--ink);border-top:1.5px solid var(--line);padding-top:8px;margin-top:6px}
  html.kosik-b #modal #rezForm > .rez-pravne,
  html.kosik-b #modal #rezForm > .modal-note{
    font-size:12.4px;line-height:1.45;color:var(--ink-soft)}
  html.kosik-b #modal #rezForm > button[type=submit]{padding-top:13px;padding-bottom:13px}
  html.kosik-b #modal #rezForm > .modal-note{margin-top:-2px}

  /* Často kupované spolu: jeden vodorovný rad (dva návrhy); dva rady až na
     vysokej obrazovke, kde je miesto. */
  html.kosik-b #modal #cartOdp .podp:nth-child(n+3){display:none}
}
@media(min-width:901px) and (min-height:900px){
  html.kosik-b #modal .modal-box{--kb-okraj:48px}
  html.kosik-b #modal{padding-top:24px}
  html.kosik-b #modal .modal-box{max-height:calc(100dvh - 48px)}
  html.kosik-b #modal #mForm{max-height:calc(100dvh - 100px)}
  html.kosik-b #modal #cartOdp .podp:nth-child(n+3){display:grid}
  html.kosik-b #modal #cartOdp .cart-odp-rad{gap:8px}
}
/* Vysoký monitor (napr. 2560 × 1440): okno pevnej výšky v strede, nie prilepené hore. */
@media(min-width:901px) and (min-height:1100px){
  html.kosik-b #modal{align-items:center;padding-top:24px}
}
/* Nízke okná (13" MacBook má v prehliadači ~ 700 px): o niečo hustejšie, fotky
   a názvy ostávajú. */
@media(min-width:901px) and (max-height:780px){
  html.kosik-b #modal .modal-box{padding:18px 30px 20px}
  html.kosik-b #modal #mForm{max-height:calc(100dvh - 62px)}
  html.kosik-b #modal #mTitle{font-size:24px;margin-bottom:10px}
  html.kosik-b #modal .modal-x{top:14px}
  html.kosik-b #modal #cartList{gap:8px}
  html.kosik-b #modal #cartList li{grid-template-columns:84px minmax(0,1fr) auto;padding:8px 14px 8px 8px}
  html.kosik-b #modal #cartList .ci-img{width:84px;height:84px}
  html.kosik-b #modal #cartList .ci-q{margin-top:6px}
  html.kosik-b #modal #cartKupon{margin-top:8px}
  html.kosik-b #modal #cartDarcek{margin-top:8px}
  html.kosik-b #modal #cartOdp{margin-top:8px}
  html.kosik-b #modal #rezForm{gap:7px;padding:12px 16px 10px}
  html.kosik-b #modal #rVyzdvihPozn{font-size:11.8px}
  /* Prihlásenému s hotovým kontaktom veta „Potrebujeme len meno…" nič nehovorí;
     po Upraviť sa ukáže zasa. */
  html.kosik-b #modal #rKontakt[data-kb="zbalene"] ~ .modal-note{display:none}
  html.kosik-b #modal #rSuhrn{padding:8px 14px}
  html.kosik-b #modal #rSuhrn .rez-riadok.je-spolu{font-size:20px}
}

/* ==========================================================================
   Košík na telefóne (Mobil D, 30. 9. 2026)
   https://claude.ai/artifact/VfDfTDpjUJGf8hZpXyD8Fp (artboard Mobil D)
   --------------------------------------------------------------------------
   Všetko tu visí na triede `kosik-b` na <html>. Na telefóne navyše na `body.ma-mlistu` (mobilná
   navigácia) (prázdny košík ho má tiež, len
   s prázdnym stavom). Sekcie a lepkavú lištu skladá `rezervacia.js`
   (`kmPostav`): okolo hotových prvkov dáva hlavičku, nič nekreslí nanovo.
   ========================================================================== */
/* Obaly, ktoré vytvára `kmPostav`, sa na počítači nesmú prejaviť: prvky v nich
   ostávajú pre mriežku košíka B deťmi okna. */
html.kosik-b #kmTovar,
html.kosik-b #kmZlavy,
html.kosik-b .km-telo{display:contents}
html.kosik-b .km-hlava,
html.kosik-b .km-riadok,
html.kosik-b .km-bar{display:none}

@media(max-width:900px){
  /* ----- okno: spodný list, ktorý rastie s tovarom ----- */
  html.kosik-b body.ma-mlistu #modal:not([hidden]){background:rgba(20,16,15,.22)}
  html.kosik-b body.ma-mlistu #modal .modal-box{
    padding:0;background:var(--panel);border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:0 -18px 44px -18px rgba(78,58,44,.45);
    font-size:15px;line-height:1.5;color:var(--ink-2);
    /* `body` prepisuje tieto dve na tmavšie odtiene steny; návrh ráta s pôvodnými. */
    --bg-soft:#F7F5F4;--line:#E6E1E0}
  html.kosik-b body.ma-mlistu #modal.km-zmen .modal-box{max-height:68%}
  html.kosik-b body.ma-mlistu #modal.km-plny .modal-box{
    height:100%;border-radius:0;box-shadow:none}
  html.kosik-b body.ma-mlistu #modal .modal-box > .panel-uchyt{
    flex:none;margin:8px auto 0;background:#D9D0C5}
  html.kosik-b body.ma-mlistu #modal.km-plny .modal-box > .panel-uchyt{display:none}
  html.kosik-b body.ma-mlistu #modal #mTitle{display:none}

  /* krížik: ten istý #mClose, len v riadku „Košík" */
  html.kosik-b body.ma-mlistu #modal .modal-x{
    top:13px;right:6px;width:34px;height:34px;padding:0;display:grid;place-items:center;
    font-size:0;line-height:0;color:var(--ink-soft);z-index:5}
  html.kosik-b body.ma-mlistu #modal .modal-x::before{
    content:'';display:block;width:18px;height:18px;background:currentColor;
    -webkit-mask:var(--kb-x) center/100% 100% no-repeat;mask:var(--kb-x) center/100% 100% no-repeat}
  html.kosik-b body.ma-mlistu #modal.km-plny .modal-x{top:4px;right:6px;width:36px;height:36px}

  /* ----- rolovaná časť: zásobník kariet ----- */
  html.kosik-b body.ma-mlistu #modal .modal-box > #mForm{
    display:flex;flex-direction:column;gap:10px;padding:0 16px 14px}
  html.kosik-b body.ma-mlistu #modal #rezForm{display:contents}
  /* Nič v rolovanej časti sa nesmie zmršťovať – karty majú vlastnú výšku. */
  html.kosik-b body.ma-mlistu #modal #mForm > *,
  html.kosik-b body.ma-mlistu #modal #rezForm > *{flex:none}
  html.kosik-b body.ma-mlistu #modal .km-riadok{order:0}
  html.kosik-b body.ma-mlistu #modal #kmTovar{order:1}
  html.kosik-b body.ma-mlistu #modal #kmZlavy{order:2}
  html.kosik-b body.ma-mlistu #modal #rKontakt{order:3}
  html.kosik-b body.ma-mlistu #modal #rVyzdvih{order:4}
  html.kosik-b body.ma-mlistu #modal #kmPozn{order:5}
  html.kosik-b body.ma-mlistu #modal #rSuhrn{order:6}
  html.kosik-b body.ma-mlistu #modal #rezForm > .rez-pravne{order:7}
  html.kosik-b body.ma-mlistu #modal #rMsg{order:8}
  /* Čo návrh nemá: Ďalej, Späť, poznámka pod formulárom, súčet nad poľami a
     „Často kupované spolu". */
  html.kosik-b body.ma-mlistu #modal #rDalej,
  html.kosik-b body.ma-mlistu #modal .rez-spat,
  html.kosik-b body.ma-mlistu #modal .modal-note,
  html.kosik-b body.ma-mlistu #modal #mForm .cart-sum,
  html.kosik-b body.ma-mlistu #modal #cartOdp{display:none}
  html.kosik-b body.ma-mlistu .modal.rez-prazdna [data-krok="2"]{display:none}

  /* ----- riadok „Košík · N položiek" ----- */
  html.kosik-b body.ma-mlistu #modal .km-riadok{
    position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:6px;
    height:34px;margin:0 -16px 2px;padding:0 44px 0 16px;box-sizing:border-box;
    touch-action:none;user-select:none;-webkit-user-select:none}
  html.kosik-b body.ma-mlistu #modal.km-zmen .km-riadok,
  html.kosik-b body.ma-mlistu #modal.km-plny .km-riadok{
    background:var(--lista-plocha);
    -webkit-backdrop-filter:var(--sklo-lista-blur);backdrop-filter:var(--sklo-lista-blur);
    border-bottom:1px solid var(--line)}
  html.kosik-b body.ma-mlistu #modal.km-plny .km-riadok{
    height:44px;padding:0 44px 0 6px}
  html.kosik-b body.ma-mlistu #modal .km-nadpis{
    flex:1;min-width:0;font-family:var(--head);font-weight:600;font-size:14px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink)}
  html.kosik-b body.ma-mlistu #modal .km-nadpis span{
    font-family:var(--text);font-weight:500;letter-spacing:0;text-transform:none;
    color:var(--ink-soft);font-size:12.6px}
  html.kosik-b body.ma-mlistu #modal .km-zmensi{
    flex:none;width:36px;height:36px;padding:0;border:0;background:none;
    display:grid;place-items:center;color:var(--ink);cursor:pointer}
  html.kosik-b body.ma-mlistu #modal .km-zmensi[hidden]{display:none}
  html.kosik-b body.ma-mlistu #modal .km-zmensi .ico{width:24px;height:24px}

  /* ----- karta sekcie ----- */
  html.kosik-b body.ma-mlistu #modal .km-sek{
    display:block;margin:0;padding:0;border:0;border-radius:var(--r);
    background:var(--v-okne);box-shadow:var(--tien-jemny)}
  html.kosik-b body.ma-mlistu #modal .km-hlava,
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-hlava{
    display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;
    margin:0;padding:14px 14px 14px 12px;border:0;background:none;text-align:left;
    font:inherit;color:inherit;cursor:pointer}
  html.kosik-b body.ma-mlistu #modal .km-hlava-st,
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-hlava{cursor:default}
  /* číslo sekcie: červené, keď je rozbalená; šedé, keď je zbalená */
  html.kosik-b body.ma-mlistu #modal .km-cis,
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-hlava::before{
    flex:none;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;
    background:var(--red);color:var(--na-cervenom);
    font-family:var(--head);font-weight:600;font-size:14px;line-height:1}
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-hlava::before{content:'3'}
  html.kosik-b body.ma-mlistu #modal .km-zbal > .km-hlava .km-cis{
    background:var(--bg-soft);color:var(--ink-2)}
  html.kosik-b body.ma-mlistu #modal .km-t{flex:1;min-width:0;display:block}
  html.kosik-b body.ma-mlistu #modal .km-t b,
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-hlava h3{
    display:block;margin:0;font-family:var(--head);font-weight:600;font-size:15px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1.2}
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-hlava h3{flex:1;min-width:0}
  html.kosik-b body.ma-mlistu #modal .km-t small{
    display:block;margin-top:1px;font-size:13px;line-height:1.35;color:var(--ink-soft);
    font-weight:400;overflow-wrap:anywhere}
  html.kosik-b body.ma-mlistu #modal .km-t small:empty{display:none}
  html.kosik-b body.ma-mlistu #modal .km-sip{flex:none;color:var(--ink-soft);line-height:0}
  html.kosik-b body.ma-mlistu #modal .km-sip .ico{
    display:block;width:18px;height:18px;fill:none;stroke:currentColor;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg)}
  html.kosik-b body.ma-mlistu #modal .km-zbal > .km-hlava .km-sip .ico{transform:none}
  html.kosik-b body.ma-mlistu #modal .km-telo{display:block}
  html.kosik-b body.ma-mlistu #modal .km-zbal > .km-telo{display:none}

  /* ----- 1 Tovar: položky sú riadky v karte ----- */
  html.kosik-b body.ma-mlistu #modal #kmTovar > .km-telo{
    padding:0 12px 4px;border-top:1px solid var(--line)}
  html.kosik-b body.ma-mlistu #modal #cartList{
    margin:0;padding:0;max-height:none;overflow:visible;background:none;box-shadow:none}
  html.kosik-b body.ma-mlistu #modal #cartList li:not(.ci-prazdne){
    display:grid;grid-template-columns:68px minmax(0,1fr) auto;
    grid-template-rows:auto auto auto auto;column-gap:12px;row-gap:0;align-items:start;
    margin:0;padding:12px 0;border:0;border-radius:0;background:none;box-shadow:none}
  html.kosik-b body.ma-mlistu #modal #cartList li:not(.ci-prazdne) + li{
    border-top:1px solid var(--line)}
  html.kosik-b body.ma-mlistu #modal #cartList .ci-img{
    grid-column:1;grid-row:1 / 5;align-self:start;width:68px;height:68px;padding:6px;
    box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:var(--v-okne)}
  html.kosik-b body.ma-mlistu #modal #cartList .ci-img img{
    width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;display:block}
  html.kosik-b body.ma-mlistu #modal #cartList .ci-n{display:contents}
  html.kosik-b body.ma-mlistu #modal #cartList .ci-n br{display:none}
  html.kosik-b body.ma-mlistu #modal #cartList .ci-det{
    grid-column:2 / 4;grid-row:1;display:block;padding-right:28px;font-family:var(--text);font-weight:700;
    font-size:15px;line-height:1.3;color:var(--ink);text-align:left}
  html.kosik-b body.ma-mlistu #modal #cartList .ci-kupon{
    grid-column:2 / 4;grid-row:2;margin-top:2px;font-size:12.6px}
  html.kosik-b body.ma-mlistu #modal #cartList .ci-n small{
    display:block;grid-column:3;grid-row:3;justify-self:end;align-self:end;
    font-size:12.6px;line-height:1.1;color:var(--ink-soft)}
  html.kosik-b body.ma-mlistu #modal #cartList .ci-q{
    grid-column:2;grid-row:3 / 5;align-self:end;justify-self:start;
    display:flex;align-items:center;gap:8px;transform:none;margin:0}
  html.kosik-b body.ma-mlistu #modal #cartList .ci-q button{
    width:36px;height:36px;padding:0;border:1.5px solid var(--line);border-radius:8px;
    background:var(--v-okne);font-size:18px;line-height:1;color:var(--ink)}
  html.kosik-b body.ma-mlistu #modal #cartList .ci-q b{
    min-width:20px;text-align:center;font-size:16px;line-height:1.5;color:var(--ink)}
  html.kosik-b body.ma-mlistu #modal #cartList .ci-spolu{
    grid-column:3;grid-row:4;justify-self:end;align-self:end;
    font-family:var(--head);font-weight:600;font-size:18px;line-height:1.2;letter-spacing:.02em;
    color:var(--ink);white-space:nowrap}
  html.kosik-b body.ma-mlistu #modal #cartList .ci-x{
    grid-column:3;grid-row:1;align-self:start;justify-self:end;margin:-4px -4px 0 0;
    padding:4px;font-size:0;line-height:0;color:var(--ink-soft)}
  html.kosik-b body.ma-mlistu #modal #cartList .ci-x::before{
    content:'';display:block;width:18px;height:18px;background:currentColor;
    -webkit-mask:var(--kb-x) center/100% 100% no-repeat;mask:var(--kb-x) center/100% 100% no-repeat}

  /* ----- 2 Zľavy a darček ----- */
  html.kosik-b body.ma-mlistu #modal #kmZlavy > .km-telo{
    display:flex;flex-direction:column;gap:14px;padding:14px 14px 16px;border-top:1px solid var(--line)}
  html.kosik-b body.ma-mlistu #modal #kmZlavy > .km-telo > *{margin:0}
  html.kosik-b body.ma-mlistu #modal #kmZlavy.km-zbal > .km-telo{display:none}
  html.kosik-b body.ma-mlistu #modal #kmZlavy [hidden]{display:none}
  html.kosik-b body.ma-mlistu #modal #cartZlava{
    padding:10px 14px;border-radius:10px;font-size:14px;line-height:1.5}
  html.kosik-b body.ma-mlistu #modal #cartVernost{font-size:13.2px}
  /* kupón */
  html.kosik-b body.ma-mlistu #modal #cartKupon .cart-kupon-pole{margin:0}
  html.kosik-b body.ma-mlistu #modal #cartKupon .cart-kupon-pole label{
    display:block;margin:0 0 7px;font-family:var(--head);font-size:13.5px;font-weight:600;
    line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
  html.kosik-b body.ma-mlistu #modal #cartKupon .cart-kupon-rad input{
    padding:12px 14px;font-size:16px}
  html.kosik-b body.ma-mlistu #modal #cartKupon .cart-kupon-btn{
    padding:10px 16px;font-size:13.6px}
  html.kosik-b body.ma-mlistu #modal #cartKupon .cart-kupon-moje{
    margin-top:8px;gap:6px;font-size:13px;line-height:1.5}
  html.kosik-b body.ma-mlistu #modal #cartKupon .vyzdvih-pilulky button{
    font-size:14px;line-height:1.3}
  html.kosik-b body.ma-mlistu #modal #cartKupon .cart-kupon-blizko{
    margin:8px 0 0;font-size:13.2px;line-height:1.5}
  /* darček */
  html.kosik-b body.ma-mlistu #modal #cartDarcek{padding:13px 14px;border-radius:var(--r)}
  html.kosik-b body.ma-mlistu #modal #cartDarcek .cd-nadpis{
    display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.5;color:var(--ink)}
  html.kosik-b body.ma-mlistu #modal #cartDarcek .cd-ikona{
    display:block;flex:none;width:18px;height:18px;font-size:0;background:var(--red);
    -webkit-mask:var(--kb-darcek) center/100% 100% no-repeat;mask:var(--kb-darcek) center/100% 100% no-repeat}
  html.kosik-b body.ma-mlistu #modal #cartDarcek .cd-pod{margin:3px 0 10px;font-size:13px;line-height:1.5}
  html.kosik-b body.ma-mlistu #modal #cartDarcek .cd-volby{
    display:flex;flex-direction:column;gap:7px}
  html.kosik-b body.ma-mlistu #modal #cartDarcek .cd-volba{
    gap:10px;padding:10px 12px;border:1.5px solid var(--line);border-radius:11px;
    background:var(--v-okne);font-size:14px;line-height:1.5}
  html.kosik-b body.ma-mlistu #modal #cartDarcek .cd-volba.je{
    border-color:var(--red);background:var(--red-soft)}
  html.kosik-b body.ma-mlistu #modal #cartDarcek .cd-volba img{display:none}
  html.kosik-b body.ma-mlistu #modal #cartDarcek .cd-volba input{
    -webkit-appearance:none;appearance:none;flex:none;width:16px;height:16px;margin:0;
    border-radius:50%;border:1.5px solid var(--line-2);background:var(--v-okne);cursor:pointer}
  html.kosik-b body.ma-mlistu #modal #cartDarcek .cd-volba input:checked{
    border:5px solid var(--red)}
  html.kosik-b body.ma-mlistu #modal #cartDarcek .cd-volba input:focus-visible{
    outline:2px solid var(--red);outline-offset:2px}

  /* ----- 3 Kontakt ----- */
  html.kosik-b body.ma-mlistu #modal #rKontakt{gap:0}
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-uprav{
    display:none;flex:none;padding:8px 12px;font-size:13.5px;gap:7px}
  html.kosik-b body.ma-mlistu #modal #rKontakt[data-kb="zbalene"] .kb-uprav{display:inline-flex}
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-ico{
    display:block;flex:none;width:17px;height:17px;fill:none;stroke:currentColor;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-uprav .kb-ico{width:16px;height:16px}
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-vypis{
    display:none;flex-direction:column;gap:7px;margin:0 14px 16px;padding:12px 14px;
    border-radius:12px;background:var(--bg-soft)}
  html.kosik-b body.ma-mlistu #modal #rKontakt[data-kb="zbalene"] .kb-vypis{display:flex}
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-riadok{
    display:flex;align-items:center;gap:10px;font-size:14.4px;line-height:1.5;color:var(--ink-2)}
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-riadok .kb-ico{color:var(--red)}
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-riadok b{color:var(--ink)}
  html.kosik-b body.ma-mlistu #modal #rKontakt[data-kb="zbalene"] .field{display:none}
  html.kosik-b body.ma-mlistu #modal #rKontakt .field{margin:0 14px 12px}
  html.kosik-b body.ma-mlistu #modal #rKontakt .adresa-psc{margin:0 14px 12px}
  html.kosik-b body.ma-mlistu #modal #rKontakt .adresa-psc .field{margin:0}
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-hotovo{
    display:none;justify-content:flex-end;margin:0 14px 16px}
  html.kosik-b body.ma-mlistu #modal #rKontakt[data-kb="uprava"] .kb-hotovo{display:flex}
  html.kosik-b body.ma-mlistu #modal #rKontakt .kb-hotovo .btn{
    padding:14px 20px;font-size:13.5px;gap:7px}

  /* ----- 4 Vyzdvihnutie ----- */
  html.kosik-b body.ma-mlistu #modal #rVyzdvih{
    border:0;padding:0;background:var(--v-okne);box-shadow:var(--tien-jemny)}
  html.kosik-b body.ma-mlistu #modal #rVyzdvih[hidden]{display:none}
  html.kosik-b body.ma-mlistu #modal #rVyzdvihNadpis{display:none}
  html.kosik-b body.ma-mlistu #modal #rVyzdvih > .km-telo,
  html.kosik-b body.ma-mlistu #modal #kmPozn > .km-telo,
  html.kosik-b body.ma-mlistu #modal #rSuhrn > .km-telo{padding:0 14px 16px}
  html.kosik-b body.ma-mlistu #modal #rVyzdvihPilulky button{
    font-size:14px;line-height:1.3}
  html.kosik-b body.ma-mlistu #modal #rVyzdvihPozn{
    margin-top:6px;font-size:12.2px;line-height:1.5}

  /* ----- 5 Poznámka ----- */
  html.kosik-b body.ma-mlistu #modal #kmPozn .field{margin:0}
  html.kosik-b body.ma-mlistu #modal #kmPozn .field > label{
    position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0)}
  html.kosik-b body.ma-mlistu #modal #kmPozn textarea{
    display:block;height:64px;min-height:0;resize:none;padding:12px 14px;font-size:16px}

  /* ----- 6 Súhrn ----- */
  html.kosik-b body.ma-mlistu #modal #rSuhrn{padding:0}
  html.kosik-b body.ma-mlistu #modal #rSuhrn[hidden]{display:none}
  html.kosik-b body.ma-mlistu #modal #rSuhrn .rez-riadok{
    font-size:14px;line-height:1.5;padding:3px 0;color:var(--ink-2)}
  html.kosik-b body.ma-mlistu #modal #rSuhrn .rez-riadok.je-spolu{
    font-size:21px;color:var(--ink);border-top:1.5px solid var(--line);padding-top:10px;margin-top:8px}

  /* právna veta a hlásenie */
  html.kosik-b body.ma-mlistu #modal #rezForm > .rez-pravne{
    margin:0;padding:2px 4px 0;font-size:12.4px;line-height:1.55;color:var(--ink-soft)}
  html.kosik-b body.ma-mlistu #modal #rMsg{margin:0}

  /* ----- lepkavá lišta s Odoslať ----- */
  html.kosik-b body.ma-mlistu #modal .km-bar{
    position:relative;z-index:4;flex:none;display:flex;gap:12px;align-items:stretch;
    height:76px;box-sizing:border-box;padding:12px 16px;
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:var(--sklo-lista-blur);backdrop-filter:var(--sklo-lista-blur);
    border-top:1px solid var(--line);box-shadow:0 -14px 28px -22px rgba(78,58,44,.5)}
  html.kosik-b body.ma-mlistu #modal .km-bar .btn{
    flex:1;width:auto!important;height:52px;padding:0 18px;font-size:15px}
  /* „je ešte čo čítať" – jemný prechod nad lištou, kým nie je odrolované až dole */
  html.kosik-b body.ma-mlistu #modal .km-bar::before{
    content:'';position:absolute;left:16px;right:16px;bottom:100%;height:46px;pointer-events:none;
    background:linear-gradient(180deg,rgba(252,249,245,0),#F8F3EC);opacity:0;transition:opacity .18s}
  html.kosik-b body.ma-mlistu #modal .km-bar.je-viac::before{opacity:1}
  #mForm[hidden] ~ .km-bar{display:none!important}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  html.kosik-b body.ma-mlistu #modal .km-bar::before{transition:none}
}

/* ==========================================================================
   NOVÝ VZHĽAD CHATU (návrh 5, 30. 9. 2026) — telefón
   https://claude.ai/artifact/LzmcTWpj7Dj7LrSoGRRzPk (sekcie 2 a 3)

   Od 5. 10. 2026 platí bez vypínača.
   1. Horná lišta (logo, hľadanie, zvonček, predajňa) je BEZ plného pozadia a
      pilulky plávajú nad obsahom — na VŠETKÝCH kartách, nielen v chate.
      Z-index je nad kartami (130), aby pilulky ostali nad ich pozadím.
   2. Hnedý prechod `--panel` (hore biela, dole teplý béžový odtieň) na
      kartách Katalóg, Filtre, Rezervácia a Môj maznák. Karty, dlaždice a
      tlačidlá ostávajú také, aké sú. Rezervácia a maznák siahajú až k hornému
      okraju a nesú si výšku lišty v odsadení, aby prechod pokračoval aj za
      plávajúcimi pilulkami (Chat to robí v chat.css).
   3. Bodka na karte Kontakt: zelená = sme online, sivá = nie sme, červená =
      neprečítaná správa alebo oznam.
   ========================================================================== */
@media(max-width:900px){
  body.ma-mlistu .mvrch{
    background:none;border-bottom:0;
    -webkit-backdrop-filter:none;backdrop-filter:none;z-index:135}
  body.ma-mlistu .mbub{
    background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);
    -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
    box-shadow:var(--tien-jemny);color:var(--ink-2)}
  body.ma-mlistu .mbub-logo{color:var(--red)}

  body.ma-mlistu .mkat-okno,
  body.ma-mlistu .filters:not([hidden]){background:var(--panel)}
  body.ma-mlistu #modal:not([hidden]),
  body.ma-mlistu .uc-modal:not([hidden]){
    background:var(--panel);top:0;padding-top:var(--mvrch-h, 57px);box-sizing:border-box}

  .mtab-bodka{background:var(--ok);box-shadow:0 0 0 2px rgba(255,255,255,.95)}
  .mtab-bodka.of{background:var(--ink-soft)}
  .mtab-bodka.nova{background:var(--red)}
}

/* Nový vzhľad chatu: tlačidlo „Spýtať sa na tento produkt" v detaile krmiva
   (návrh 5, `.tl-b.s`): biele, s ikonou chatu v červenej. */
.pbtn-chat{margin-top:9px;width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--v-okne);border:1.5px solid var(--line);border-radius:12px;padding:10px 8px;
  font:600 13px/1.3 var(--text);color:var(--ink);cursor:pointer;transition:.16s}
.pbtn-chat svg{width:16px;height:16px;color:var(--red);flex:none}
.pbtn-chat:hover{border-color:var(--red)}

/* ==========================================================================
   Lepkavá lišta „cena · Rezervovať" v detaile (telefón)
   --------------------------------------------------------------------------
   Návrh Vylepšenia webu, téma 1 A (30. 9. 2026), hodnoty z jeho `.lepka`.
   Katalóg: lišta sedí na spodku okna detailu (to končí nad spodnou lištou).
   Stránka /produkt/…: bez spodnej lišty, lišta je prilepená na spodok
   obrazovky (`body.str-produkt`). Inde sa nezobrazuje.
   ========================================================================== */
.pd-lepka{display:none}
@media(max-width:900px){
  body.ma-mlistu .pd-lepka,
  body.str-produkt .pd-lepka{
    display:flex;align-items:center;gap:14px;z-index:3;
    min-height:66px;padding:9px 14px;
    background:rgba(255,255,255,.92);border-top:1px solid rgba(255,255,255,.85);
    -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur)}
  /* V okne detailu: na spodku zobrazenej plochy, cez celú šírku okna
     (záporné okraje rušia odsadenie `.modal-box`). */
  body.ma-mlistu .pd-lepka{
    position:sticky;bottom:0;
    margin:0 calc(-1 * var(--pd-x)) calc(-1 * var(--pd-d))}
  body.str-produkt .pd-lepka{
    position:fixed;left:0;right:0;bottom:0;
    padding-bottom:calc(9px + env(safe-area-inset-bottom, 0px))}
  body.str-produkt{padding-bottom:calc(66px + env(safe-area-inset-bottom, 0px))}
  .pd-lepka-cena{display:block;font-family:var(--head);font-weight:700;font-size:24px;
    line-height:1.05;white-space:nowrap;color:var(--ink)}
  .pd-lepka small{display:block;font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:1px;
    white-space:nowrap}
  .pd-lepka-tl{flex:1;min-height:46px;padding:0 20px;font-size:14px;gap:8px;white-space:nowrap;
    text-decoration:none}
  .pd-lepka-tl:hover{transform:none}
}

/* ==========================================================================
   Panel Filter na telefóne: lepkavé „Zobraziť N produktov"
   --------------------------------------------------------------------------
   Návrh Vylepšenia webu, téma 2 A (30. 9. 2026), hodnoty z `.fdno` a `.cta`.
   Len telefón so spodnou lištou; na počítači je skryté. Tlačidlo je posledné
   dieťa panela (`flex:0 0 auto`), takže stojí pod rolovateľným telom filtra.
   ========================================================================== */
.fdno{display:none}
@media(max-width:900px){
  body.ma-mlistu .fdno{
    display:flex;gap:10px;flex:0 0 auto;z-index:3;
    padding:10px 14px 12px;
    background:rgba(255,255,255,.92);border-top:1px solid rgba(255,255,255,.85)}
  body.ma-mlistu .fdno-tl{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:100%;min-height:50px;padding:0 20px;border:0;border-radius:9px;cursor:pointer;
    background:var(--cta);color:#fff;
    font-family:var(--head);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    font-size:15px;white-space:nowrap;
    box-shadow:var(--cta-lesk), var(--cta-tien)}
  body.ma-mlistu .fdno-tl:focus-visible{outline:2.5px solid var(--red-dk);outline-offset:2px}
}

/* Štítok s veľkosťou balenia na fotke karty (návrh Vylepšenia webu, téma 3 A,
   `.pack-tag`). Obal nesie odsadenie, ktoré inak má `.pthumb`, aby štítok
   sedel 5 px od spodnej hrany fotky. */
.pthumb-obal{position:relative;margin-bottom:9px}
.pthumb-obal .pthumb{margin-bottom:0}
.pack-tag{position:absolute;left:5px;bottom:5px;z-index:2;
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.85);border-radius:999px;
  padding:2px 10px;font:700 13px/1.45 var(--head);letter-spacing:.03em;color:var(--ink);
  box-shadow:var(--tien-jemny);white-space:nowrap;pointer-events:none}

/* Tlačidlo porovnania na karte má vzhľad 34 × 34 px, ale dotyková plocha má
   mať aspoň 44 px. ::after je obsadené vysvetlivkou (data-tip), preto
   ::before; vzhľad sa nemení. */
.pcmp::before{content:'';position:absolute;inset:-6px}

/* Stránka /produkt/… na telefóne: horná lišta nemá spodnú lištu ako katalóg,
   preto Môj maznák a prihlásenie ostanú len ako ikony (inak by sa s košíkom
   a burgerom nezmestili do 390 px). */
@media(max-width:900px){
  body.str-produkt .nav-vpravo .nav-maznak span,
  body.str-produkt .nav-vpravo .nav-ucet span{display:none}
  body.str-produkt .nav-vpravo .nav-maznak,
  body.str-produkt .nav-vpravo .nav-ucet{padding:9px 12px}
}

/* Plávajúci chat nesmie sedieť na lepkavej lište s cenou (stránka /produkt/…). */
@media(max-width:900px){
  body.str-produkt{--fab-chat:calc(66px + 12px + env(safe-area-inset-bottom, 0px))}
}

/* ==========================================================================
   Horná lišta pri celoobrazovkových paneloch (návrh A, 1. 10. 2026)
   Návrh (scratchpad lista-panely.html), varianta A „Lišta ujde
   hore, panel na celú obrazovku"
   --------------------------------------------------------------------------
   Keď je otvorený Filter, Košík na celú výšku alebo detail produktu, horná
   lišta (logo, hľadanie, zvonček, predajňa) sa vysunie nahor pružinou a panel
   siaha od stavového riadku po spodnú lištu s vlastnou hlavičkou. Je to ten
   istý mechanizmus ako `lista-skryta` (odchod = `translate` + `opacity` +
   `visibility:hidden`, aby Safari pri okraji nevidel lištu) — len sa schová
   iba horná lišta a pohyb je pružina z návrhu. Triedy na tele nastavuje
   `panelCelySkus` v rezervacia.js.
   Nad hodinami stojí len plocha panela (horný okraj panela smie mať farbu
   panela). Jemnú plochu pod hodinami pri obyčajnom rolovaní NEPRIDÁVAŤ.
   ========================================================================== */
@media(max-width:900px){
  body.ma-mlistu{--lista-panel:.55s cubic-bezier(.34,1.56,.64,1)}

  /* odchod: pružina hore; nad panelom (z-index), aby bolo pohyb vidieť */
  html body.ma-mlistu.panel-cely .mvrch{
    opacity:0;visibility:hidden;translate:0 -100%;z-index:210;
    transition:translate var(--lista-panel),opacity .25s ease-in .05s,visibility 0s linear .55s}
  /* návrat po zatvorení panela: pružina späť */
  html body.ma-mlistu.panel-spat .mvrch{
    transition:translate var(--lista-panel),opacity .3s ease-out,visibility 0s}

  /* Filter: od horného okraja, hlavička nesie výšku stavového riadka */
  body.ma-mlistu .filters:not([hidden]){top:0}
  body.ma-mlistu .filters:not([hidden]) .filters-head{
    padding-top:calc(12px + env(safe-area-inset-top, 0px))}

  /* Košík na celú výšku (km-plny): okno bez odsadenia, box nesie stavový riadok */
  html body.ma-mlistu #modal.km-plny:not([hidden]){padding-top:0}
  html.kosik-b body.ma-mlistu #modal.km-plny .modal-box{
    padding-top:env(safe-area-inset-top, 0px)}
  html.kosik-b body.ma-mlistu #modal.km-plny .modal-x{
    top:calc(4px + env(safe-area-inset-top, 0px))}

  /* Detail produktu: od horného okraja; obsah sa pod hodiny nerolúje —
     pás pri hodinách drží plocha panela (lepkavý prúžok nulovej výšky bez
     stavového riadka, takže na počítači ani bez výrezu nič nezaberá). */
  body.ma-mlistu #pmodal:not([hidden]){top:0}
  body.ma-mlistu #pmodal:not([hidden])::before{
    content:'';display:block;position:sticky;top:0;z-index:6;
    height:env(safe-area-inset-top, 0px);
    margin-bottom:calc(-1 * env(safe-area-inset-top, 0px));
    background:var(--bg-soft)}
  body.ma-mlistu #pmodal .modal-box{
    padding-top:calc(8px + env(safe-area-inset-top, 0px))}
  body.ma-mlistu #pmodal .modal-x{top:env(safe-area-inset-top, 0px)}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  html body.ma-mlistu.panel-cely .mvrch,
  html body.ma-mlistu.panel-spat .mvrch{transition:none}
}

/* ============================================================================
   HĽADANIE – porozumenie otázke a našepkávač (hladanie-zamer.js, rezervacia.js
   `hz*`, 2. 10. 2026). Nič nové: čip je pilulka `.kat-pre` („Pre Lucy ×"),
   sklenený (`--sklo`) kým je to len pochopená otázka, červený (`--red-soft`)
   keď je zapnutý ako filter; zoznam pod poľom je ten istý povrch ako výber
   plemena v účte (`.uc-plemeno-zoz`) s položkami `.vyber-polozka`.
   ============================================================================ */
.hz-zamer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.hz-zamer[hidden]{display:none}
.hz-nadpis{font-family:var(--head);text-transform:uppercase;letter-spacing:.09em;
  font-size:.68rem;color:var(--ink-soft)}
.hz-cip{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;
  min-height:32px;padding:0 12px;border-radius:999px;cursor:pointer;white-space:nowrap;
  background:var(--sklo);border:1px solid var(--sklo-ram);color:var(--ink-2);
  font-family:var(--text);font-size:.82rem;font-weight:700}
.hz-cip:hover{border-color:var(--red-soft-2)}
.hz-cip.tema,.hz-cip.tema:hover{cursor:default;border-color:var(--sklo-ram)}
.hz-cip.je{background:var(--red-soft);border-color:transparent;color:var(--red-dk)}
.hz-cip.bez.je{padding-right:6px}
.hz-cip:focus-visible,.hz-r:focus-visible,.hz-link:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.hz-x{display:grid;place-items:center;width:20px;height:20px;border-radius:999px;
  background:var(--red-soft-2);font-size:.9rem;line-height:1}
.hz-tipy{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}

.hz-zoz{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;
  display:flex;flex-direction:column;padding:6px;max-height:min(460px,64vh);overflow-y:auto;
  overscroll-behavior:contain;background:var(--panel);border:1.5px solid var(--sklo-ram);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.hz-zoz[hidden]{display:none}
.hz-r{width:100%;box-sizing:border-box;min-height:44px;padding:8px 12px;font-size:.9rem}
.hz-r.na{background:var(--bg-soft);color:var(--ink)}
.hz-r small{margin-left:auto;font-size:.72rem;font-weight:500;color:var(--ink-soft)}
.hz-vsetky{justify-content:center;color:var(--red)}
.hz-nadpis-s{margin:6px 0 2px;padding:0 12px;font-family:var(--head);text-transform:uppercase;
  letter-spacing:.09em;font-size:.62rem;font-weight:400;color:var(--ink-soft)}
.hz-hlava{display:flex;align-items:center;justify-content:space-between;padding-right:8px}
.hz-link{all:unset;cursor:pointer;padding:4px;font-size:.78rem;color:var(--red);text-decoration:underline}
.hz-prazdno{margin:0;padding:10px 12px;font-size:.82rem;line-height:1.5;color:var(--ink-soft)}
.hz-riadok{display:flex;align-items:center}
.hz-riadok .hz-r{flex:1 1 auto;min-width:0}
.hz-x-btn{all:unset;box-sizing:border-box;flex:0 0 auto;display:grid;place-items:center;
  width:32px;height:32px;border-radius:999px;cursor:pointer;color:var(--ink-soft);
  font-size:1.1rem;line-height:1}
.hz-x-btn:hover{background:var(--bg-soft);color:var(--ink)}
.hz-ik{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--ink-soft);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.hz-obr{width:40px;height:40px;flex:0 0 auto;border-radius:8px;overflow:hidden;
  background:var(--bg-soft);display:grid;place-items:center;color:var(--line-2)}
.hz-obr img{width:100%;height:100%;object-fit:contain;display:block}
.hz-obr svg{width:22px;height:22px;fill:currentColor}
.hz-t{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:1px;text-align:left}
.hz-t b{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:.6rem;
  font-weight:600;color:var(--red-dk)}
.hz-n{font-size:.82rem;font-weight:600;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hz-c{flex:0 0 auto;font-family:var(--head);font-size:.9rem;white-space:nowrap;color:var(--ink)}
/* `.searchbox svg` je pre lupu v poli (position:absolute) – v zozname nesmie platiť. */
.searchbox .hz-zoz svg{position:static;color:inherit}
/* Obrazovka hľadania na telefóne: posledné hľadania v karte. */
.hz-blok{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:4px}
.hz-blok .hz-r{font-size:.85rem}

/* Prázdny výsledok: filtre skryli, čo sedí, a najbližšie nálezy bez filtrov. */
.hz-skryte{margin:10px 0 0;font-size:.88rem}
.hz-blizke{grid-column:1/-1;margin:6px 0 0;font-family:var(--head);text-transform:uppercase;
  letter-spacing:.09em;font-size:.72rem;color:var(--ink-soft)}

@media(max-width:900px){
  .hz-zoz{max-height:min(320px,42vh)}
}
@media(pointer:coarse){
  .hz-cip{min-height:36px}
}


/* ==========================================================================
   Hafo Expres – dovoz domov v košíku (fáza 1C, 5. 10. 2026)
   Návrh: https://claude.ai/artifact/9Co2X7L73v11gckoQ4rNDv (obrazovky 1, 2, 3, 5),
   hodnoty z jeho `hafo.css`. Obrazovka 1 = telefón, 2 = Iný deň, 3 = potvrdenie,
   5 = počítač.
   --------------------------------------------------------------------------
   Všetko tu visí na `html.hafo-expres` (nastavuje ju `rezervacia.js` → `exOsviez`,
   keď `GET /api/dovoz` vráti `zap: true` alebo je v adrese `?x=1`). Nové prvky
   v rezervacia.html sú dovtedy `hidden`, takže bez triedy sa v košíku nezmení
   nič. Existujúce prvky sa využívajú: `.km-sek`, `.vyzdvih-pilulky`, `.btn`,
   `.btn-sklo`, `.vyber-panel` (spodný list). Nové je len `.volby/.volba`,
   `.plat/.plat-v`, cena, dni `.dn ok/je/nie`, kroky potvrdenia, špendlík.
   ========================================================================== */

/* ----- voľba Vyzdvihnem / Hafo Expres ----- */
html.hafo-expres .volby{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
html.hafo-expres .volby[hidden]{display:none}
html.hafo-expres .volba{
  all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:3px;
  padding:12px;border:1.5px solid var(--line-2);border-radius:14px;background:var(--v-okne);
  transition:border-color .18s,background .18s}
html.hafo-expres .volba:hover{border-color:var(--red)}
html.hafo-expres .volba b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
html.hafo-expres .volba span{font-size:12.5px;color:var(--ink-soft);line-height:1.4}
html.hafo-expres .volba .ico{color:var(--ink-soft);width:22px;height:22px;margin-bottom:4px}
html.hafo-expres .volba.on{border-color:var(--red);background:var(--red-soft)}
html.hafo-expres .volba.on .ico,html.hafo-expres .volba.on b{color:var(--red-dk)}
html.hafo-expres .volba:focus-visible{outline:2px solid var(--red);outline-offset:2px}
html.hafo-expres .volba .ico,html.hafo-expres .ex-telo .ico,html.hafo-expres .ex-ok-r .ico{
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Pri Hafo Expres sa pilulky a kalendár vyzdvihnutia schovajú; voľba stojí namiesto nadpisu. */
html.hafo-expres #rVyzdvih.ex-expres #rVyzdvihPilulky,
html.hafo-expres #rVyzdvih.ex-expres #rVyzdvihKal,
html.hafo-expres #rVyzdvih.ex-expres #rVyzdvihPozn{display:none}
html.hafo-expres.kosik-b #modal #rVyzdvihNadpis{display:none}

/* ----- karta Doručenie ----- */
html.hafo-expres .ex-telo[hidden],
html.hafo-expres .ex-adresa[hidden],
html.hafo-expres .ex-cena-obal[hidden],
html.hafo-expres .ex-chyba[hidden],
html.hafo-expres .ex-info[hidden],
html.hafo-expres .ex-kal-vlozeny[hidden]{display:none}
html.hafo-expres .ex-hl{display:none}
html.hafo-expres .ex-mriezka{display:flex;flex-direction:column;gap:12px}
html.hafo-expres .ex-l{display:contents}
html.hafo-expres .ex-kam{order:1}
html.hafo-expres .ex-mapa{order:2}
html.hafo-expres .ex-chyba{order:3}
html.hafo-expres .ex-adresa{order:4}
html.hafo-expres .ex-cena-obal{order:5}
html.hafo-expres .ex-kedy{order:6}
html.hafo-expres .ex-info{order:7}

html.hafo-expres .ex-pole{display:flex;flex-direction:column;gap:6px}
html.hafo-expres .ex-lbl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
html.hafo-expres .ex-pozn{font-size:12.2px;line-height:1.5;color:var(--ink-soft);margin:0}
html.hafo-expres .ex-veta{font-size:13px;color:var(--ink-2)}

/* mapa Google (300 px na telefóne, 340 px na počítači) */
html.hafo-expres .ex-mapa{position:relative;height:300px;border-radius:14px;overflow:hidden;
  background:#EFE9E1;border:1px solid var(--line)}
html.hafo-expres .ex-mapa-el{position:absolute;inset:0}
html.hafo-expres .ex-bezmapy{height:100%;display:grid;place-items:center;padding:16px;text-align:center;
  font-size:13px;line-height:1.5;color:var(--ink-soft)}
html.hafo-expres .ex-poloha{
  position:absolute;right:10px;bottom:10px;z-index:2;gap:6px;padding:8px 13px;border-radius:999px;
  border:1px solid var(--sklo-ram);font-family:var(--text);font-size:13px;font-weight:600;
  letter-spacing:0;text-transform:none}
html.hafo-expres .ex-poloha:hover{transform:none}
html.hafo-expres .ex-poloha .ico{width:15px;height:15px}
/* Adresa nad mapou (majiteľ 10. 10. 2026): jedna pilulka s poľom, vpísaná adresa presunie špendlík
   a prepíše sa do kontaktu (`exAdresaVstup` v rezervacia.js). Veta o špendlíku je nápis v mape. */
html.hafo-expres .ex-hladaj{display:flex;align-items:center;gap:8px;min-width:0;cursor:text;
  font-family:var(--text);font-weight:400;text-transform:none;letter-spacing:0}
html.hafo-expres .ex-hladaj .ico{width:17px;height:17px;flex:none;color:var(--red)}
html.hafo-expres .ex-hladaj input{flex:1;min-width:0;height:auto;border:0;border-radius:0;outline:0;background:none;
  box-shadow:none;font-family:var(--text);font-weight:400;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);padding:10px 0}
html.hafo-expres .ex-hladaj input::placeholder{color:var(--ink-soft)}
html.hafo-expres .ex-kam:focus-within{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
html.hafo-expres #exAdresaNenasla{order:1;display:block;margin:0 6px}
html.hafo-expres .ex-mapa-veta{position:absolute;left:10px;top:10px;z-index:2;max-width:calc(100% - 20px);margin:0;
  padding:6px 12px;border-radius:999px;background:var(--sklo);border:1px solid var(--sklo-ram);
  -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);box-shadow:0 4px 12px -6px rgba(78,58,44,.45);
  font-size:12.5px;font-weight:600;line-height:1.35;color:var(--ink);pointer-events:none}
html.hafo-expres .ex-cela .ex-mapa-veta{display:none}
/* špendlík: červený na telefóne, tmavý na počítači (návrh 1 a 5) */
html.hafo-expres .ex-pin{transform:translateY(4px);cursor:grab}
html.hafo-expres .ex-pin svg{display:block;filter:none}
html.hafo-expres .ex-pin path{fill:var(--red);stroke:#fff;stroke-width:2}

/* Telefón: náhľad mapy s pilulkou „Ťuknutím zväčšíš“ (kryje celú mapu, aby sa nedala ťahať) a prekrytie
   na celú obrazovku. Na počítači sa nič z toho neuplatní (pilulka je skrytá, prekrytie nevzniká). */
html.hafo-expres .ex-zvacsi{display:none}
html.hafo-expres .ex-cela{position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;
  background:var(--v-okne);overscroll-behavior:contain}
html.hafo-expres .ex-cela-hore{display:flex;align-items:center;gap:4px;touch-action:none;
  padding:calc(env(safe-area-inset-top,0px) + 6px) 16px 8px 4px;border-bottom:1px solid var(--line)}
html.hafo-expres .ex-cela-x{flex:none;width:44px;height:44px;border:0;background:none;color:var(--ink-soft);
  font-size:1.6rem;line-height:1;cursor:pointer;touch-action:manipulation}
html.hafo-expres .ex-cela-veta{margin:0;font-size:13px;line-height:1.45;color:var(--ink-2)}
html.hafo-expres .ex-cela-mapa{position:relative;flex:1;min-height:0}
html.hafo-expres .ex-cela .ex-mapa{position:absolute;inset:0;height:auto;border:0;border-radius:0}
html.hafo-expres .ex-cela .ex-poloha{top:12px;right:12px;bottom:auto;box-shadow:var(--tien-jemny)}
html.hafo-expres .ex-cela-dole{display:flex;flex-direction:column;gap:10px;touch-action:none;
  padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 12px);border-top:1px solid var(--line)}
html.hafo-expres .ex-cela-ok{width:100%;justify-content:center}
body.ex-cela-otvorena{overflow:hidden}

/* adresa podľa špendlíka */
html.hafo-expres .ex-adresa{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--bg-soft)}
html.hafo-expres .ex-adresa .ico{color:var(--red);width:18px;height:18px}
html.hafo-expres .ex-adresa > span{flex:1;font-size:14px;line-height:1.4;color:var(--ink)}
html.hafo-expres .ex-adresa > span > span{display:block;font-size:12px;color:var(--ink-soft)}

/* cena */
html.hafo-expres .ex-cena-obal{display:flex;flex-direction:column;gap:4px}
html.hafo-expres .ex-cena-r{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
html.hafo-expres .ex-cena-r span{font-size:14px;color:var(--ink-2)}
html.hafo-expres .ex-cena-r b{font-family:var(--head);font-size:22px;font-weight:600;color:var(--ink)}

/* hláška pri poli (mimo oblasti, chyba servera) – ten istý vzhľad ako `small.pole-chyba` */
html.hafo-expres .ex-chyba{
  display:flex;align-items:center;gap:8px;margin:0;padding:7px 12px 7px 8px;
  border-radius:10px;background:var(--red-soft);color:var(--red-dk);
  font-family:var(--text);font-size:.8rem;font-weight:600;line-height:1.35;
  text-transform:none;letter-spacing:0}
html.hafo-expres .ex-chyba::before{
  content:"!";display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;
  border-radius:999px;background:var(--red);color:var(--bg);font-size:.74rem;font-weight:800}

/* šedý rámček: tovar na objednávku posúva najskorší deň */
html.hafo-expres .ex-info{display:flex;gap:10px;padding:11px 12px;border-radius:12px;background:var(--bg-soft);
  font-size:13px;line-height:1.5;color:var(--ink-2)}
html.hafo-expres .ex-info .ico{color:var(--ink-soft);margin-top:1px;width:18px;height:18px}

/* Text pre telefón a pre počítač: v návrhu sú dve mierne odlišné znenia. */
html.hafo-expres .ex-t-p{display:none}

/* ----- kalendár „Iný deň" (spodný list na telefóne, vložený na počítači) ----- */
html.hafo-expres .ex-kal-vlozeny{margin-top:4px}
.ex-kal-panel .ex-kal-telo{padding:0 14px 22px;overflow-y:auto;overscroll-behavior:contain}
.ex-kal-panel .vyber-hl{margin-bottom:12px}
.ex-kal-panel .vyber-hl h2{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:17px}
.ex-kal-hl{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ex-kal-hl b{font-family:var(--head);text-transform:uppercase;letter-spacing:.07em;font-size:15px;font-weight:600;color:var(--ink)}
.ex-sip{width:38px;height:38px;min-height:38px;padding:0;border-radius:14px;font-family:var(--text);font-size:1.15rem;
  letter-spacing:0;line-height:1}
.ex-sip:hover{transform:none}
.ex-sip:disabled{opacity:.35;cursor:default}
.ex-tyz,.ex-dni{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.ex-tyz{margin-bottom:4px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.ex-dni .dn{
  all:unset;box-sizing:border-box;height:52px;border-radius:10px;display:grid;place-items:center;align-content:center;gap:1px;
  font-weight:600;font-size:15px;color:var(--ink-2);cursor:pointer}
.ex-dni .dn small{font-size:10px;font-weight:500;color:var(--ink-soft)}
.ex-dni .dn.ok{background:var(--v-okne);border:1.5px solid var(--line-2)}
.ex-dni .dn.ok:hover{border-color:var(--red)}
.ex-dni .dn.je{background:var(--red-soft);border:1.5px solid var(--red);color:var(--red-dk)}
.ex-dni .dn.nie{color:var(--ink-soft);opacity:.55;text-decoration:line-through;cursor:default}
.ex-dni .dn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ex-kal-veta{margin-top:12px}

/* ----- platba a súhrn ----- */
/* Popisok „Spôsob platby“ je len na počítači (telefón má hlavičku sekcie „Platba“). */
.ex-plat-lb{display:none}
html.hafo-expres button.plat-v{font-family:inherit;text-align:left;width:100%;cursor:pointer}
html.hafo-expres button.plat-v:hover{border-color:var(--red)}
html.hafo-expres button.plat-v:focus-visible{outline:2px solid var(--red);outline-offset:2px}
html.hafo-expres .plat{display:flex;flex-direction:column;gap:6px}
html.hafo-expres .plat-v{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1.5px solid var(--line-2);
  border-radius:12px;background:var(--v-okne);font-size:14px;font-weight:600;color:var(--ink)}
html.hafo-expres .plat-v.on{border-color:var(--red);background:var(--red-soft);color:var(--red-dk)}
html.hafo-expres .plat-v.nie{opacity:.45}
html.hafo-expres .volba.nie{opacity:.45;cursor:not-allowed}
html.hafo-expres .volba.nie:hover{border-color:var(--line-2)}
html.hafo-expres #exVolbyPozn{margin:-4px 0 12px}
html.hafo-expres .plat-v small{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.05em}
/* Ikony, krátke názvy a veta „… pripravujeme“ sú len na počítači (dlaždice v súhrne, návrh A nižšie). */
.plat-ico,.plat-k,.plat-pozn{display:none}
/* Bublina „Vyber, ako zaplatíš.“ (majiteľ 15. 10. 2026): vyskočí nad voľbami a nehýbe rozložením.
   Recept hlášky pri poli (`small.pole-chyba` v styl.css), len plávajúci a so šípkou. */
html.hafo-expres #exPlat{position:relative}
html.hafo-expres .plat-bublina{position:absolute;left:0;bottom:calc(100% + 8px);z-index:6;display:flex;align-items:center;gap:8px;
  margin:0;padding:7px 12px 7px 8px;border-radius:10px;background:var(--red-soft);color:var(--red-dk);
  font-family:var(--text);font-size:.8rem;font-weight:600;line-height:1.35;white-space:nowrap;
  box-shadow:0 10px 24px -12px rgba(78,58,44,.45);animation:pole-chyba .22s ease-out}
html.hafo-expres .plat-bublina::before{content:"!";display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;
  border-radius:999px;background:var(--red);color:var(--bg);font-size:.74rem;font-weight:800}
html.hafo-expres .plat-bublina::after{content:"";position:absolute;left:22px;top:100%;border:7px solid transparent;border-top-color:var(--red-soft)}
html.hafo-expres #exPlat:has(.plat-bublina) .plat-v:not(.nie){border-color:var(--red)}
@media(prefers-reduced-motion:reduce){html.hafo-expres .plat-bublina{animation:none}}
html.hafo-expres .kruh{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);flex:none}
html.hafo-expres .plat-v.on .kruh{border:5px solid var(--red)}
html.hafo-expres .ex-ok-r{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;line-height:1.4;color:var(--ok)}
html.hafo-expres .ex-ok-r .ico{width:15px;height:15px}

/* ----- potvrdenie objednávky s dovozom (obrazovka 3) ----- */
html.hafo-expres #hotovo.ex-ok > :not(.hotovo-ex){display:none}
html.hafo-expres .hotovo-ex{display:flex;flex-direction:column;gap:14px;max-width:460px;margin:0 auto;text-align:center}
html.hafo-expres .hotovo-ex[hidden]{display:none}
html.hafo-expres .ex-karta{background:var(--v-okne);border-radius:var(--r);box-shadow:var(--tien-jemny)}
html.hafo-expres .ex-hore{padding:22px 18px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
html.hafo-expres .ex-maskot{display:block;width:190px;height:auto;margin:10px 0 6px}
html.hafo-expres .ex-hore h2{margin:0;font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;font-size:24px;line-height:1.2}
html.hafo-expres .ex-hore-text{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--ink)}
html.hafo-expres .ex-hore-mala{font-size:13px;color:var(--ink-soft)}
html.hafo-expres .ex-plati{display:inline-flex;gap:8px;padding:8px 14px;border-radius:999px;background:var(--red-soft);
  color:var(--red-dk);font-weight:600;font-size:14px}
html.hafo-expres .ex-dalej{padding:16px;display:flex;flex-direction:column;gap:14px;text-align:left}
html.hafo-expres .ex-dalej-nadpis{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:15px;font-weight:600;color:var(--ink)}
html.hafo-expres .ex-krok{display:flex;gap:12px;align-items:flex-start}
html.hafo-expres .ex-krok i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-soft);color:var(--ink-2);font-style:normal;font-family:var(--head);font-weight:600}
html.hafo-expres .ex-krok b{display:block;font-size:15px;font-weight:700;line-height:1.4;color:var(--ink)}
html.hafo-expres .ex-sledovanie{width:100%;text-decoration:none}
html.hafo-expres .ex-sledovanie[hidden]{display:none}
html.hafo-expres .ex-nebudes{text-align:center}

/* ----- telefón: karta Doručenie je sekcia 4, Platba 6, Súhrn 7 ----- */
@media(max-width:900px){
  html.hafo-expres .ex-t-m{display:inline}
  html.hafo-expres .ex-t-p{display:none}
  /* náhľad mapy: 210 px, bez Mojej polohy a bez vety (tá je v prekrytí); celý je tlačidlo */
  html.hafo-expres .ex-telo .ex-mapa{height:210px}
  html.hafo-expres .ex-telo .ex-poloha{display:none}
  html.hafo-expres .ex-telo .ex-kam{display:block;padding:0 14px;border-radius:999px;background:var(--v-okne);
    border:1px solid var(--line);box-shadow:var(--tien-jemny)}
  html.hafo-expres .ex-telo .ex-kam .ex-lbl{display:none}
  /* 16 px, inak iPhone pri ťuknutí do poľa priblíži stránku */
  html.hafo-expres .ex-telo .ex-hladaj input{font-size:16px;padding:11px 0}
  html.hafo-expres .ex-telo .ex-zvacsi{display:block;position:absolute;inset:0;z-index:3;width:100%;
    border:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  html.hafo-expres .ex-zvacsi .btn{position:absolute;right:10px;bottom:10px;gap:6px;padding:8px 13px;
    border-radius:999px;border:1px solid var(--sklo-ram);font-family:var(--text);font-size:13px;
    font-weight:600;letter-spacing:0;text-transform:none;pointer-events:none}
  html.hafo-expres.kosik-b body.ma-mlistu #modal #exPlatba{order:5}
  html.hafo-expres.kosik-b body.ma-mlistu #modal #exPlatba[hidden]{display:none}
  html.hafo-expres.kosik-b body.ma-mlistu #modal #exPlatba > .km-telo{padding:0 14px 16px}
  html.hafo-expres.kosik-b body.ma-mlistu #modal #exPlatba .plat{margin-top:0}
  /* volby a mriežka sú v `.km-telo` (blok) – rozostupy dáva mriežka */
  html.hafo-expres.kosik-b body.ma-mlistu #modal #rVyzdvih .ex-telo[hidden]{display:none}
  html.hafo-expres.kosik-b body.ma-mlistu #modal #exVolby[hidden]{display:none}
  html.hafo-expres.kosik-b body.ma-mlistu #modal .ex-ok-r{margin-top:8px}
}

/* ----- počítač: Hafo Expres v pravej karte košíka pod voľbami (ako pri Vyzdvihnem dni) ----- */
@media(min-width:901px){
  html.hafo-expres .ex-t-m{display:none}
  html.hafo-expres .ex-t-p{display:inline}
  /* voľba je v pravej karte, bez ikon (návrh 5) */
  html.hafo-expres.kosik-b #modal .volba .ico{display:none}
  html.hafo-expres.kosik-b #modal .volby{margin:0 0 4px}
  /* Poradie ako na telefóne: veta, mapa, adresa, km a cena, Kedy, info. Okno ostáva bez
     rolovania, keď sa pravá karta nevojde, roluje sa len ona (ako pri rozbalenom kontakte). */
  html.hafo-expres .ex-telo{margin-top:10px}
  html.hafo-expres .ex-telo .ex-kam .ex-lbl{display:none}
  html.hafo-expres .ex-telo .ex-mapa{height:300px}
  html.hafo-expres .ex-telo .ex-pin path{fill:var(--ink);stroke:none}
  html.hafo-expres .ex-telo .ex-cena-obal{gap:6px}
  html.hafo-expres .ex-telo .ex-dni .dn{height:44px}

  /* --- návrh A (https://claude.ai/artifact/EziVgPdMoLtB37tTprUdfs, 5. 10. 2026):
         mapa vľavo nad tovarom, dni v pravej karte hore na mieste dní vyzdvihnutia --- */
  html.hafo-expres.kosik-b #modal #mForm.ex-vlavo-je{
    grid-template-rows:auto auto minmax(0,1fr)}
  html.hafo-expres.kosik-b #modal #mForm.ex-vlavo-je #rezForm{grid-row:2 / 4}
  /* veta a hláška ako obyčajný text nad mapou (nie sklo na mape), mapa 300 px, riadok sa jej prispôsobí */
  html.hafo-expres.kosik-b #modal .ex-vlavo{
    grid-column:1;grid-row:2;align-self:stretch;min-height:0;display:flex;flex-direction:column}
  html.hafo-expres.kosik-b #modal .ex-vlavo-mapa{
    position:relative;flex:none;height:300px;border-radius:16px;overflow:hidden;
    border:1px solid var(--line);background:#F1EEE8}
  html.hafo-expres.kosik-b #modal .ex-vlavo[hidden],
  html.hafo-expres.kosik-b #modal .ex-vlavo-rol[hidden]{display:none}
  html.hafo-expres.kosik-b #modal .ex-vlavo .ex-mapa{
    position:absolute;inset:0;height:auto;border:0;border-radius:0}
  /* Nad mapou veta v pilulke na celý riadok, „Moja poloha“ na mape vpravo hore, hláška pod vetou.
     Adresa sa na mape neukazuje – je v kontakte v pravej karte (majiteľ 5. 10. 2026). */
  html.hafo-expres.kosik-b #modal .ex-vlavo-hore{
    display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
  html.hafo-expres.kosik-b #modal .ex-vlavo .ex-mapa-veta{left:12px;top:12px;max-width:calc(100% - 170px)}
  html.hafo-expres.kosik-b #modal .ex-vlavo .ex-kam{
    padding:0 16px;border-radius:999px;background:var(--v-okne);
    border:1px solid var(--line);box-shadow:var(--tien-jemny)}
  html.hafo-expres.kosik-b #modal .ex-vlavo .ex-kam .ex-lbl{display:none}
  html.hafo-expres.kosik-b #modal .ex-vlavo .ex-veta{
    font-size:13px;line-height:1.45;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.hafo-expres.kosik-b #modal .ex-vlavo .ex-poloha{top:12px;right:12px;bottom:auto;box-shadow:var(--tien-jemny)}
  html.hafo-expres.kosik-b #modal #exAdresa{display:none}
  html.hafo-expres.kosik-b #modal .ex-vlavo .ex-pin path{fill:var(--ink);stroke:none}
  /* tovar, kupón, darček a odporúčané pod mapou v jednom rolovaní */
  html.hafo-expres.kosik-b #modal .ex-vlavo-rol{
    grid-column:1;grid-row:3;align-self:stretch;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    display:flex;flex-direction:column;margin:12px -10px -12px -4px;padding:4px 10px 12px 4px}
  html.hafo-expres.kosik-b #modal .ex-vlavo-rol #cartList{
    overflow:visible;margin:0;padding:0;flex:none}
  /* v pravej karte: dni hneď pod voľbou (bez nadpisu „Kedy“), cena je v súhrne */
  html.hafo-expres.kosik-b #modal .ex-telo{margin-top:0}
  html.hafo-expres.kosik-b #modal .ex-kedy{order:0}
  html.hafo-expres.kosik-b #modal .ex-kedy > .ex-lbl{display:none}
  html.hafo-expres.kosik-b #modal .ex-cena-r{display:none}
  html.hafo-expres.kosik-b #modal .ex-cena-obal:not(:has(.ex-cena-pozn:not([hidden]))){display:none}
  /* Platba (majiteľ 15. 10. 2026: aj na počítači): pod poznámkou, hotovosť na celý riadok, ostatné po dvoch. */
  html.hafo-expres.kosik-b #modal #exPlatba{order:3}
  html.hafo-expres.kosik-b #modal #exPlatba .ex-plat-lb{
    display:block;margin:0 0 6px;font-family:var(--text);font-size:.68rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft)}
  /* Návrh A (majiteľ 15. 10. 2026, https://claude.ai/artifact/MhMgtZuwQXqQhQqErR9Teh): päť dlaždíc v jednom rade,
     ikona a krátky názov, „pripravujeme“ jednou vetou pod nimi. */
  html.hafo-expres.kosik-b #modal #exPlatba .plat{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  html.hafo-expres.kosik-b #modal #exPlatba .plat-v{flex-direction:column;justify-content:center;gap:4px;min-height:54px;
    padding:6px 4px;font-size:11.5px;line-height:1.15;text-align:center;white-space:normal}
  html.hafo-expres.kosik-b #modal #exPlatba button.plat-v{text-align:center}
  html.hafo-expres.kosik-b #modal #exPlatba :is(.kruh,.plat-n,small){display:none}
  html.hafo-expres.kosik-b #modal #exPlatba .plat-k{display:block}
  html.hafo-expres.kosik-b #modal #exPlatba .plat-pozn{display:block;grid-column:1/-1;margin:0;font-size:11px;color:var(--ink-soft);text-align:center}
  /* Súhrn pod tovarom (majiteľ 15. 10. 2026): vľavo spôsob platby s ikonami, vpravo Tovar, Hafo Expres a Spolu
     (`rezSuhrn` sem presúva #exPlatba). */
  html.hafo-expres.kosik-b #modal #rSuhrn.ex-suhrn-2{
    display:grid;grid-template-columns:minmax(0,1fr) 210px;column-gap:20px;align-items:end}
  html.hafo-expres.kosik-b #modal .ex-suhrn-plat{min-width:0;align-self:stretch;padding-right:20px;border-right:1px solid var(--line)}
  html.hafo-expres.kosik-b #modal .ex-suhrn-plat #exPlatba{margin:0;padding:0;border:0;background:none;box-shadow:none}
  html.hafo-expres.kosik-b #modal .ex-suhrn-sumy{min-width:0;align-self:end}
  html.hafo-expres.kosik-b #modal #exPlatba .plat-ico{display:block;width:18px;height:18px;flex:none;
    fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  html.hafo-expres.kosik-b #modal #exPlatba .plat-ico-z{stroke:none;fill:currentColor}
}
/* Pole Adresa doručenia v kontakte: len pri Hafo Expres (rezervacia.js `exOsviez` mu dáva `hidden`). */
.field[hidden]{display:none}
/* Poznámka zbalená do odkazu – len košík na počítači (návrh A). */
.pozn-odkaz{display:none}
@media(min-width:901px){
  html.kosik-b #modal .pozn-odkaz{
    all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:6px;
    font-family:var(--text);font-size:13.5px;font-weight:600;color:var(--red-dk)}
  html.kosik-b #modal .pozn-odkaz:focus-visible{outline:2.5px solid var(--red);outline-offset:2px}
  html.kosik-b #modal .kontakt-blok:has(#rPoznOdkaz):not(.pozn-otvorena):not(:has(#rPozn:not(:placeholder-shown))) .field{display:none}
  html.kosik-b #modal .kontakt-blok.pozn-otvorena .pozn-odkaz,
  html.kosik-b #modal .kontakt-blok:has(#rPozn:not(:placeholder-shown)) .pozn-odkaz{display:none}
  /* voľba spôsobu a dni sú v pravej karte prvé – pri Vyzdvihnem aj pri Hafo Expres (návrh A) */
  html.kosik-b #modal #rVyzdvih{order:0}
}

/* ==========================================================================
   Košík bez rolovania – návrh A (majiteľ 13. 10. 2026, schválené
   https://claude.ai/artifact/CP1aVWktuPwhv6zxce7NRd, prvá plocha). Len počítač.
   Veta o vernostnej zľave v hlavičke v strede, Spolu vľavo pod tovarom (rSuhrn presúva
   `kosikBRozloz`), pravý stĺpec bez karty: dni ako dlaždice, kontakt v dvoch stĺpcoch
   (E-mail | Telefón, Meno | Ulica, PSČ | Obec), dole právna veta a Objednať na šírku polí.
   ========================================================================== */
/* Čas v dlaždici dňa je len na počítači; telefón ostáva s pilulkou s názvom. */
#rVyzdvihPilulky .dl-c,#exPilulky .dl-c{display:none}
@media(min-width:901px){
  /* okno a hlavička */
  /* Širšie okno (majiteľ 13. 10. 2026 na 13" MacBooku: telefón sa nezmestil a miesto ešte bolo). */
  html.kosik-b #modal .modal-box{max-width:1360px;padding:20px 28px 24px;background:linear-gradient(168deg,#fff,#fbf7f3)}
  html.kosik-b #modal #mTitle{font-size:26px;margin:0 0 12px;align-self:center}
  html.kosik-b #modal #mForm{column-gap:26px;grid-template-columns:minmax(0,1fr) minmax(440px,520px)}
  html.kosik-b #modal #cartVernost{
    grid-column:1/-1;grid-row:1;justify-self:center;align-self:center;max-width:600px;margin:0 0 12px;
    display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;
    font-size:13px;line-height:1.35;color:var(--ink-2);text-align:left}
  html.kosik-b #modal #cartVernost[hidden]{display:none}
  html.kosik-b #modal #cartVernost .uc-lnk{
    flex:none;padding:6px 12px;border-radius:999px;background:var(--v-okne);text-decoration:none;font-size:13px}

  /* ľavý stĺpec: položky menšie, súhrn so Spolu dole */
  html.kosik-b #modal #cartList li{grid-template-columns:64px minmax(0,1fr) auto;column-gap:14px;padding:10px 14px;border:1px solid var(--line)}
  html.kosik-b #modal #cartList .ci-img{width:64px;height:64px;padding:2px;border:0;border-radius:10px}
  html.kosik-b #modal #cartList .ci-det{font-size:14px}
  html.kosik-b #modal #cartList .ci-n small{font-size:12px}
  html.kosik-b #modal #cartList .ci-q{margin-top:6px;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;width:max-content}
  html.kosik-b #modal #cartList .ci-q button{width:28px;height:26px;border:0;border-radius:0;font-size:15px;color:var(--ink-2)}
  html.kosik-b #modal #cartList .ci-q b{min-width:30px;font-size:13px}
  html.kosik-b #modal #cartList .ci-spolu{font-size:19px}
  /* Spolu má vlastný posledný riadok: v pružnom riadku 6 by pri veľa položkách dostal 0 px a tovar
     by ho prekryl (majiteľ 13. 10. 2026). Zoznam sa zmenší a roluje sám. */
  html.kosik-b #modal #mForm{grid-template-rows:auto minmax(0,max-content) auto auto auto minmax(0,1fr) auto}
  html.kosik-b #modal #rezForm{grid-row:2 / 8}
  html.kosik-b #modal #rSuhrn{
    grid-column:1;grid-row:7;align-self:end;margin:12px 0 0;padding:14px 18px;
    background:var(--v-okne);border:1px solid var(--line);border-radius:14px}
  html.hafo-expres.kosik-b #modal #mForm.ex-vlavo-je{grid-template-rows:auto auto minmax(0,1fr) auto}
  html.hafo-expres.kosik-b #modal #mForm.ex-vlavo-je #rezForm{grid-row:2 / 5}
  html.hafo-expres.kosik-b #modal #mForm.ex-vlavo-je #rSuhrn{grid-row:4}
  html.kosik-b #modal #rSuhrn .rez-riadok{font-size:13.5px}
  html.kosik-b #modal #rSuhrn .rez-riadok.je-spolu{align-items:baseline;margin-top:4px;padding-top:8px;border-top:1px solid var(--line)}
  html.kosik-b #modal #rSuhrn .rez-riadok.je-spolu:first-child{border-top:0;margin-top:0;padding-top:0}
  html.kosik-b #modal #rSuhrn .rez-riadok.je-spolu span:first-child{font-size:16px;letter-spacing:.05em}
  html.kosik-b #modal #rSuhrn .rez-riadok.je-spolu span:last-child{font-size:28px;line-height:1}
  /* mapa pri Hafo Expres nižšia, aby sa vľavo zmestil tovar aj Spolu */
  html.hafo-expres.kosik-b #modal .ex-vlavo-mapa{height:220px}

  /* pravý stĺpec bez karty */
  html.kosik-b #modal #rezForm{background:none;box-shadow:none;border-radius:0;padding:0 4px 0 0;gap:12px}
  /* Objednať je vždy vidieť (majiteľ 13. 10. 2026): keď pravý stĺpec roluje (rozbalená firma, poznámka, nízke okno),
     tlačidlo ostáva prilepené na spodku. */
  html.kosik-b #modal #rezForm > button[type=submit]{position:sticky;bottom:0;z-index:2;
    box-shadow:0 0 0 8px #fcf9f6,var(--cta-lesk),var(--cta-tien)}

  /* Pevná veľkosť okna (majiteľ 14. 10. 2026 na 24" monitore: okno sa pri klikaní naťahovalo na výšku).
     Okno má vždy výšku obrazovky (najviac 1040 px), mení sa len obsah; čo sa nezmestí, roluje vo svojom
     stĺpci. Len okno s formulárom – obrazovka Hotovo ostáva podľa obsahu. */
  html.kosik-b #modal .modal-box:has(> #mForm:not([hidden])){height:min(1040px,calc(100dvh - var(--kb-okraj,24px)))}
  html.kosik-b #modal .modal-box > #mForm{height:100%;max-height:none}
  /* dni ako dlaždice: názov, dátum, čas */
  html.kosik-b #modal :is(#rVyzdvihPilulky,#exPilulky){
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
  html.hafo-expres.kosik-b #modal #rVyzdvih.ex-expres #rVyzdvihPilulky{display:none}
  html.kosik-b #modal :is(#rVyzdvihPilulky,#exPilulky) button{
    display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 6px;
    border:1px solid var(--line);border-radius:12px;background:var(--v-okne);color:var(--ink-2);text-align:center;line-height:1.3}
  html.kosik-b #modal :is(#rVyzdvihPilulky,#exPilulky) .dl-n{
    font-family:var(--head);font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
  html.kosik-b #modal :is(#rVyzdvihPilulky,#exPilulky) .dl-c{display:block;font-size:11.5px;color:var(--ink-soft)}
  html.kosik-b #modal :is(#rVyzdvihPilulky,#exPilulky) .dl-m{display:none}
  html.kosik-b #modal :is(#rVyzdvihPilulky,#exPilulky) button.on{background:var(--red-soft);border-color:var(--red)}
  html.kosik-b #modal :is(#rVyzdvihPilulky,#exPilulky) button.on :is(.dl-n,.dl-c){color:var(--red-dk)}
  /* veta „O 17:00 ti napíšeme presnejší čas“ – čas je v dlaždici (majiteľ: preč) */
  html.hafo-expres.kosik-b #modal #exKedyVeta{display:none}
  /* „Prídem zajtra do 18:00 · tovar ti nachystáme.“ – preč (majiteľ 13. 10. 2026); ostáva len veta o doobjednaní */
  html.kosik-b #modal #rVyzdvihPozn .vz-veta{display:none}
  html.kosik-b #modal #rVyzdvihPozn:not(:has(.vz-dovoz)){display:none}
  /* „Iný deň“ pri Hafo Expres: ten istý výber dní ako pri vyzdvihnutí (`exKalDniHtml`) */
  html.hafo-expres.kosik-b #modal .ex-kal-vlozeny .vyzdvih-kal{margin-top:6px}
  /* nadpis „Kontakt“ preč (zaberal miesto); prihlásenému ostáva len „Upraviť“ nad vypísaným kontaktom */
  html.kosik-b #modal #rKontakt .kb-hlava h3{display:none}
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]) > .kb-hlava{display:none}
  html.kosik-b #modal #rKontakt[data-kb="zbalene"] .kb-hlava{justify-content:flex-end}

  /* kontakt v dvoch stĺpcoch: E-mail | Telefón, Meno | Ulica, PSČ | Obec */
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]){column-gap:12px;row-gap:10px}
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]) > *{order:9}
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]) > .kb-hlava{order:0}
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]) > .field:has(#rMail){order:1;grid-column:auto}
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]) > .field:has(#rTel){order:2}
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]) > .field:has(#rMeno){order:3}
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]) > .field:has(#rAdresa){order:4;grid-column:auto}
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]) > .adresa-psc{order:5}
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]):has(> #rAdresaPole[hidden]) > .field:has(#rMeno){grid-column:1/-1}
  html.kosik-b #modal #rKontakt:not([data-kb="zbalene"]) > .kb-hotovo{order:10}
}
@media(min-width:901px) and (max-height:780px){
  html.kosik-b #modal #cartList li{grid-template-columns:64px minmax(0,1fr) auto;padding:8px 12px}
  html.kosik-b #modal #cartList .ci-img{width:64px;height:64px}
  html.kosik-b #modal #rezForm{padding:0 4px 0 0}
  html.hafo-expres.kosik-b #modal .ex-vlavo-mapa{height:180px}
}
@media(prefers-reduced-motion:reduce){
  html.hafo-expres .volba{transition:none}
}

.km-sek[hidden]{display:none}

/* Ponuka diéty nad výpisom = nastroje/navrhy/zdravie-a-dieta.html (katalóg 1), majiteľ 8. 10. 2026. Hodnoty 1:1 z návrhu. */
.pon{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;border:1.5px dashed var(--red);background:rgba(253,236,235,.7);margin:0 0 14px}
.pon[hidden]{display:none}
.pon div{flex:1;min-width:0}
.pon b{display:block;font-size:.88rem}
.pon small{font-size:.76rem;color:var(--ink-soft)}
.pon .btn{padding:8px 13px;font-size:.74rem}
body.ma-mlistu .pon{flex-wrap:wrap}

/* ==========================================================================
   Nákup na firmu a dodacia adresa (návrhy Košík A + C a Dodacia, 13. 10. 2026)
   --------------------------------------------------------------------------
   Hodnoty z návrhu 1:1, farby cez tokeny. Pole IČO a ostatné polia sú `.field`
   ako kontakt nad nimi (popisky podľa neho). Prepínač a zaškrtávač sú vlastné
   (`button aria-pressed`), nie prvky prehliadača. `rezervacia.js` → `firma*`, `dod*`.
   ========================================================================== */
.firma{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.firma [hidden],.firma-nova[hidden],.firma-uloz[hidden],.firma-telo[hidden],.firma-nasl[hidden],.firma-hlaska[hidden],
.firma-karta[hidden],.firma-prehlad[hidden],.firma-rucne[hidden],.firma-zdroj[hidden],.firma-chk[hidden],
.dod-uloz[hidden],.dod-nazov[hidden],html.hafo-expres .dod-vyber[hidden]{display:none}
.firma .field{margin:0}
.firma-nova,.firma-uloz{display:flex;flex-direction:column;gap:12px}
.firma-prep{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px}
.firma-prep-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.firma-prep-t b{font-size:14px;font-weight:600;color:var(--ink)}
.firma-prep-t span{font-size:12.5px;color:var(--ink-soft)}
.firma-prep:focus-visible,.firma-drah-btn:focus-visible,.firma-chk:focus-visible,.dod-riadok:focus-visible{
  outline:2.5px solid var(--red);outline-offset:2px}
/* prepínač 46 × 28 (návrh) */
.firma-drah{position:relative;flex:none;width:46px;height:28px;border-radius:999px;background:var(--line-2);
  transition:background .22s}
.firma-drah span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;
  background:var(--na-cervenom);box-shadow:0 1px 3px rgba(78,58,44,.35);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.firma-prep[aria-pressed="true"] .firma-drah,
.firma-drah-btn[aria-pressed="true"] .firma-drah{background:var(--cta)}
.firma-prep[aria-pressed="true"] .firma-drah span,
.firma-drah-btn[aria-pressed="true"] .firma-drah span{transform:translateX(18px)}
.firma-telo{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;
  background:var(--v-okne);border:1.5px solid var(--line)}
.firma-ico-r{display:flex;flex-wrap:wrap;gap:8px}
.firma-ico-r input{flex:1 1 0;min-width:0}
.firma-ico-r .pole-chyba{flex:0 0 100%}
.firma-nasl{display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:11px;
  background:var(--ok-plocha);color:var(--ok);font-size:13px;font-weight:600;white-space:nowrap}
.firma-hlaska{margin:0;padding:9px 12px;border-radius:11px;background:var(--pozor-plocha);
  border:1px solid var(--pozor-ram);color:var(--pozor-text);font-size:12.5px;line-height:1.45}
.firma-karta{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:11px;background:var(--red-soft)}
.firma-prehlad{display:flex;flex-direction:column;gap:3px}
.firma-prehlad b{font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.firma-prehlad span{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.firma-rucne{display:flex;flex-direction:column;gap:12px}
.firma-dic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.firma-zdroj{font-size:12px;color:var(--ink-soft);margin-top:2px}
.firma-zdroj a{color:var(--red-dk)}
.firma-chk{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;
  font-size:13.5px;color:var(--ink)}
.firma-box{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;
  box-sizing:border-box;border-radius:6px;border:1.5px solid var(--line-2);background:var(--v-okne);
  color:var(--na-cervenom);transition:background .18s,border-color .18s}
.firma-box svg{opacity:0;transform:scale(.6);transition:opacity .18s,transform .22s cubic-bezier(.34,1.56,.64,1)}
.firma-chk[aria-pressed="true"] .firma-box{background:var(--red);border-color:var(--red)}
.firma-chk[aria-pressed="true"] .firma-box svg{opacity:1;transform:none}
/* variant C: jeden riadok s uloženou firmou */
.firma-riadok{display:flex;align-items:center;gap:12px}
.firma-ikona{flex:none;color:var(--red-dk)}
.firma-riadok-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.firma-riadok-t b{font-size:14.5px;color:var(--ink);overflow-wrap:anywhere}
.firma-riadok-t span{font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere}
.firma-drah-btn{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:flex}
.firma-pozn{margin:0;font-size:12.5px;color:var(--ink-soft)}
/* Pole v zbalenom kontakte sa schováva všetkým `.field` – polia firmy ostávajú (špecifickosť o triedu vyššia). */
html.kosik-b #modal #rKontakt[data-kb] .firma .field.firma-pole{display:block}

/* ----- výber dodacej adresy (Hafo Expres) ----- */
html.hafo-expres .dod-vyber{order:0;gap:8px}
html.hafo-expres .dod-pod{order:3;gap:10px}
.dod-zoznam{display:flex;flex-direction:column;gap:10px}
.dod-riadok{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px;
  border:1.5px solid var(--line-2);border-radius:14px;background:var(--v-okne);
  transition:border-color .18s,background .18s}
.dod-riadok:hover{border-color:var(--red)}
.dod-radio{flex:none;width:20px;height:20px;box-sizing:border-box;border-radius:999px;border:2px solid var(--line-2);
  background:var(--v-okne);transition:border-width .18s,border-color .18s}
.dod-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.dod-t b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.dod-t span{font-size:12.5px;color:var(--ink-soft);line-height:1.4;overflow-wrap:anywhere}
.dod-riadok.on{border-color:var(--red);background:var(--red-soft)}
.dod-riadok.on .dod-radio{border:6px solid var(--red)}
.dod-riadok.on .dod-t b{color:var(--red-dk)}
.dod-uloz{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.dod-nazov{flex:1 1 140px;min-width:0;box-sizing:border-box;padding:8px 12px;border:1px solid var(--line);
  border-radius:11px;font:inherit;font-size:14px;color:var(--ink);background:var(--v-okne)}
.dod-nazov:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
@media(max-width:900px){
  /* 16 px, inak iPhone pri ťuknutí do poľa priblíži stránku */
  .dod-nazov{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .firma-drah,.firma-drah span,.firma-box,.firma-box svg,.dod-riadok,.dod-radio{transition:none}
}

/* --- Ochrana pred parazitmi: blok „Pre koho?" pod položkou košíka (schválený návrh, sekcia 3) ---
   Hodnoty z návrhu; pilulka a zelený riadok sú tie isté ako v karte zvieraťa. Blok sa vkladá do `li` ako
   posledné dieťa na celú šírku (grid aj flex rozloženia košíka). */
.cart-list li.ma-koho{flex-wrap:wrap}
.cart-list li.ma-koho > .koho,.cart-list li.ma-koho > .k2{grid-column:1 / -1;flex:0 0 100%;min-width:0;box-sizing:border-box;margin-top:8px}
.koho{background:var(--sklo);border:1.5px solid var(--sklo-ram);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;text-align:left}
.koho .kh{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--ink)}
.koho .kh svg.ik{width:16px;height:16px;color:var(--red);flex:none}
.koho .pily{display:flex;flex-wrap:wrap;gap:6px}
.koho .kus{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.koho .kus > em{font-style:normal;font-size:.74rem;color:var(--ink-soft);font-weight:700;min-width:44px}
.koho .pil,.k2 .pil{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1.5px solid var(--line);border-radius:999px;background:var(--sklo);box-shadow:var(--tien-jemny);font:inherit;font-size:.76rem;font-weight:600;white-space:nowrap;color:var(--ink-2);cursor:pointer}
.koho .pil svg.ik,.k2 .pil svg.ik{width:14px;height:14px}
.koho .pil.cv,.k2 .pil.cv{border-color:var(--red);background:var(--red-soft);color:var(--red-dk)}
.koho .pil:focus-visible,.koho .btn:focus-visible,.k2 .pil:focus-visible{outline:2.5px solid var(--red);outline-offset:2px}
.koho .zapis{display:flex;gap:8px;align-items:flex-start;font-size:.76rem;color:var(--ink-2);line-height:1.4}
.koho .zapis-ik{display:inline-flex;flex:none;color:var(--ok);margin-top:1px}
.koho .zapis-ik svg.ik{width:15px;height:15px}
.koho .zapis-ik.zapis-siva{color:var(--ink-soft)}
.koho .zapis-ik.zapis-pozor{color:var(--pozor-text)}
.koho.chyba{border-color:var(--pozor-ram);background:var(--pozor-plocha)}
.koho .kz-dva{display:flex;gap:8px;flex-wrap:wrap}
.koho .kz-dva .btn{padding:10px 14px;font-size:.85rem}
/* Košík K2 (schválený návrh Ochrana kompakt, 16. 10. 2026, https://claude.ai/artifact/D44rxz6NKDxpKZnGJnGwUJ):
   popisok a pilulky v jednom riadku, vysvetlenie pod nimi; žltý stav až po ťuknutí na Objednať bez výberu. */
.k2{display:flex;flex-direction:column;gap:6px;border:1.5px solid transparent;border-radius:12px;text-align:left}
.k2.chyba{border-color:var(--pozor-ram);background:var(--pozor-plocha);padding:8px 10px}
.k2 .rad{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap}
.k2 .lbl{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--ink);white-space:nowrap}
.k2 .lbl svg.ik{width:16px;height:16px;color:var(--red)}
.k2 .kus{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap}
.k2 .kus > em{font-style:normal;font-size:.74rem;color:var(--ink-soft);font-weight:700;min-width:44px}
.k2 .vys{margin:0;font-size:.72rem;line-height:1.4;color:var(--ink-soft);display:flex;gap:6px;align-items:flex-start}
.k2 .vys svg.ik{width:14px;height:14px;margin-top:1px;flex:none}
.k2 .vys.ok{color:var(--ink-2)}
.k2 .vys.ok svg.ik{color:var(--ok)}
.k2 .vys.pz{color:var(--pozor-text);font-weight:600}
.ap-pozn{font-size:.76rem;color:var(--ink-soft);line-height:1.5;margin:8px 0 0}

/* Prázdny košík: to isté okno ako plný košík, v ňom len prázdny stav (maskot, Vybrať krmivo).
   Kontakt, zľavy, darček, vyzdvihnutie aj lepkavá lišta sa neukazujú – nie je čo objednať. */
html #modal.rez-prazdna #rezForm,
html #modal.rez-prazdna #kmZlavy,
html #modal.rez-prazdna #cartZlava,
html #modal.rez-prazdna #cartKupon,
html #modal.rez-prazdna #cartDarcek,
html #modal.rez-prazdna #cartVernost,
html #modal.rez-prazdna #cartOdp,
html #modal.rez-prazdna #kmBar,
html #modal.rez-prazdna .cart-sum,
html #modal.rez-prazdna .modal-note{display:none!important}
@media(min-width:901px){
  html.kosik-b #modal.rez-prazdna #mForm{display:block}
}

/* ==========================================================================
   Sklenené karty na stene vo všetkých paneloch obchodu (telefón)
   --------------------------------------------------------------------------
   Návrh „Mobil – dnes a návrh“, schválený 17. 10. 2026 (bez úvodnej stránky,
   tá ostáva). Panely, ktoré sa otvárajú zospodu aj zhora (košík, Filtre,
   Katalóg, detail, porovnanie, Kontakt, Môj účet a maznák), mali biely
   prechod `--panel` a v ňom biele karty, takže obsah splýval. Teraz majú
   plochu ako katalóg (`--stena`) a karty recept `.pcard` (rovnaké hodnoty).
   Polia, tlačidlá, + / − a biele dlaždice ostávajú biele.
   Panel Predajňa (`.pred-pop`, predajna.js) je rovnaký aj na úvodnej stránke, ktorá
   rezervacia.css nenačítava, preto má to isté (plocha stena, karty `.mucet-dnes`
   a `.mucet-zoz` recept `.pcard`) v `styl.css` pri paneli, pod `html.sklo-m`.
   Všetko visí na `html.sklo-m` (vypínač `SKLO_M` v `spolocne.js`); počítač
   (> 900 px) a úvodná stránka (nemá `ma-mlistu`) sa nemenia.
   ========================================================================== */
@media(max-width:900px){
  /* 1) plocha: teplá stena namiesto bieleho prechodu */
  html.sklo-m body.ma-mlistu #pmodal:not([hidden]),
  html.sklo-m body.ma-mlistu #cmpModal:not([hidden]),
  html.sklo-m body.ma-mlistu #chatBox:not([hidden]),
  html.sklo-m body.ma-mlistu .uc-modal:not([hidden]),
  html.sklo-m body.ma-mlistu .filters:not([hidden]),
  html.sklo-m body.ma-mlistu .mkat-okno,
  html.sklo-m.kosik-b body.ma-mlistu #modal .modal-box{
    background:var(--stena)}
  html.sklo-m body.ma-mlistu #pmodal:not([hidden])::before{background:var(--stena)}

  /* 2) karta = recept .pcard (rám .78, vnútorný okraj, teplý tieň) */
  html.sklo-m.kosik-b body.ma-mlistu #modal .km-sek,
  html.sklo-m.kosik-b body.ma-mlistu #modal #rVyzdvih,
  html.sklo-m body.ma-mlistu #chatOznam.ozn-b:not(.zbaleny),
  html.sklo-m body.ma-mlistu .uc-modal.mzn .mzn-kto,
  html.sklo-m body.ma-mlistu .uc-modal.mzn .mzn-aky,
  html.sklo-m body.ma-mlistu .uc-modal.mzn .mzn-ucet{
    background:linear-gradient(158deg,
      rgba(255,255,255,.60) 0%, rgba(255,255,255,.32) 54%, rgba(255,255,255,.46) 100%);
    border:1px solid rgba(255,255,255,.78);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--sklo-tien)}

  /* karty v Môj účet / maznák, ktoré už rám mali: mení sa plocha, rám len farbou */
  html.sklo-m body.ma-mlistu .uc-modal .uc-karta,
  html.sklo-m body.ma-mlistu .uc-modal .uc-listok,
  html.sklo-m body.ma-mlistu .uc-modal .uc-prod,
  html.sklo-m body.ma-mlistu .uc-modal .uc-zoz,
  html.sklo-m body.ma-mlistu .uc-modal .mz-karta{
    background:linear-gradient(158deg,
      rgba(255,255,255,.60) 0%, rgba(255,255,255,.32) 54%, rgba(255,255,255,.46) 100%);
    border-color:rgba(255,255,255,.78);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--sklo-tien)}
  /* 3) sekundárne tlačidlo v detaile: recept .btn-sklo (zreteľný teplý rám a tieň),
     inak na stene splýva */
  html.sklo-m body.ma-mlistu #pmodal .pbtn-cmp{background:rgba(255,255,255,.72);
    border-color:rgba(78,58,44,.22);color:var(--ink-2);box-shadow:var(--tien-jemny)}
  html.sklo-m body.ma-mlistu #pmodal .pbtn-cmp.on{border-color:var(--red);color:var(--red)}
}