/* ============================================================================
   novy-2026-online.css, 31. 8. 2026
   Vrstva vzhledu nad denni nabidkou Menicka (/objednat-online).
   Vse visi na body.zs26-onl, kterou dava js/zs26-online.js; bez JS se
   neuplatni nic a stranka je jako dnes. Parovy JS soubor je zdroj pravdy
   pro chovani, tady je jen vzhled.
   Predloha: soucasny vypis nabidky (Markuv screenshot 31. 8.) prekresleny
   do tokenu ZS26 (podklady/zs26-tokeny.css pres novy-2026.css).
   Zakazy lint: zadny em/en dash, zadny box-shadow, hex jen bila.
   ============================================================================ */

/* ---------- rozvrzeni ---------- */

body.zs26-onl .objednavka_komplet {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--zs-odstup-base) var(--zs-odstup-sekce-mobil);
}

@media (min-width: 1024px) {
  body.zs26-onl .objednavka_komplet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--zs-odstup-2xl);
    align-items: start;
    max-width: 1180px;
  }

  body.zs26-onl .objednavka_komplet > .cast_menu {
    min-width: 0;
  }

  /* 3. 9. 2026: sticky visel na #objednavka, tedy na VNITRKU grid polozky.
     Polozka .cast_objednavka ma pri align-items: start vysku obsahu, takze
     sticky uvnitr nemel kam klouzat a kosik s menu nejel. Patri na polozku. */
  body.zs26-onl .objednavka_komplet > .cast_objednavka {
    position: sticky;
    top: var(--zs-odstup-base);
  }
}

/* ---------- info pas nahore ---------- */

body.zs26-onl .zs26-onl-info {
  max-width: 760px;
  margin: var(--zs-odstup-base) auto;
  padding: var(--zs-odstup-md) var(--zs-odstup-base);
  background: var(--zs-barva-pozadi-sekce-2);
  border-radius: var(--zs-radius-male);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-zakladni);
}

@media (min-width: 1024px) {
  body.zs26-onl .zs26-onl-info { max-width: 1180px; }
}

body.zs26-onl .zs26-onl-info__radek {
  margin: 0;
}

body.zs26-onl .zs26-onl-info__radek--tlumeny {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--zs-barva-text-tlumeny);
}

/* ---------- nadpisy kategorii ---------- */

body.zs26-onl .dnesnimenu .nazevchodu {
  margin: var(--zs-odstup-xl) 0 var(--zs-odstup-sm);
  color: var(--zs-barva-text-nadpis);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

/* ---------- radek jidla ---------- */

body.zs26-onl .dnesnimenu .jidelnicek_polozka {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--zs-odstup-md);
  align-items: center;
  padding: var(--zs-odstup-md) 0;
  border-bottom: 1px solid var(--zs-barva-ramecek-karta);
  cursor: pointer;
}

body.zs26-onl .dnesnimenu .jidelnicek_polozka:hover {
  background: var(--zs-barva-pozadi-jemne);
}

body.zs26-onl .dnesnimenu .jidelnicek_polozka .nazev {
  grid-column: 1;
  grid-row: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--zs-barva-text-zakladni);
}

body.zs26-onl .dnesnimenu .jidelnicek_polozka .cena {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-md);
  font-size: 16px;
  font-weight: 700;
  color: var(--zs-barva-text-nadpis);
  white-space: nowrap;
}

/* plus jako kulate tlacitko ZS26 */
body.zs26-onl .dnesnimenu .but_plus {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  background: var(--zs-barva-akce-primarni);
  border-radius: var(--zs-radius-pill, 999px);
  vertical-align: middle;
}

body.zs26-onl .dnesnimenu .jidelnicek_polozka:hover .but_plus {
  background: var(--zs-barva-akce-primarni-hover);
}

body.zs26-onl .dnesnimenu .but_plus span {
  display: none !important;
}

body.zs26-onl .dnesnimenu .but_plus::before,
body.zs26-onl .dnesnimenu .but_plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--zs-barva-akce-primarni-text);
  border-radius: 2px;
}

body.zs26-onl .dnesnimenu .but_plus::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}

body.zs26-onl .dnesnimenu .but_plus::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
}

/* pocet kusu v kosiku */
body.zs26-onl .zs26-onl-pocet {
  min-width: 28px;
  padding: 2px 8px;
  background: var(--zs-barva-akce-tmave);
  border-radius: var(--zs-radius-pill, 999px);
  color: var(--zs-barva-text-inverzni);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
}

body.zs26-onl .dnesnimenu .jidelnicek_polozka[data-zs26-v-kosiku] {
  background: var(--zs-barva-pozadi-jemne);
}

/* ---------- slozeni a alergeny ---------- */

/* PAST: obsah skin (novy-2026-obsah.css) maluje kazdy button v #obsah pres
   !important a vyjimku ma jen [class*="zs26-vyj"]. Mezi !important pravidly
   rozhoduje specificita, proto id + zdvojena trida a !important na vsem,
   co skin prepisuje. Jinak je z odkazu limetkova pilulka. */
body.zs26-onl #obsah .zs26-onl-slozeni-prepinac.zs26-onl-slozeni-prepinac.zs26-onl-slozeni-prepinac.zs26-onl-slozeni-prepinac {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--zs-barva-text-odkaz) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  cursor: pointer;
}

body.zs26-onl .zs26-onl-slozeni-prepinac::after {
  content: " \25BE";
}

body.zs26-onl .zs26-onl-slozeni-prepinac[aria-expanded="true"]::after {
  content: " \25B4";
}

body.zs26-onl .zs26-onl-slozeni {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: var(--zs-odstup-xs);
  padding: var(--zs-odstup-sm) var(--zs-odstup-md);
  background: var(--zs-barva-pozadi-jemne);
  border-radius: var(--zs-radius-male);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
  cursor: default;
}

body.zs26-onl .zs26-onl-slozeni strong {
  color: var(--zs-barva-text-nadpis);
}

body.zs26-onl .zs26-onl-slozeni[hidden] {
  display: none;
}

/* ---------- kosik ---------- */

body.zs26-onl #objednavka {
  margin-top: var(--zs-odstup-xl);
  padding: var(--zs-odstup-base);
  background: var(--zs-barva-pozadi-sekce-2);
  border-radius: var(--zs-radius-karta, 12px);
}

body.zs26-onl #objednavka h2 {
  margin: 0 0 var(--zs-odstup-sm);
  font-size: 20px;
  color: var(--zs-barva-text-nadpis);
}

/* ---------- pevny radek Celkem (engine #celkem_fix) ---------- */

body.zs26-onl #celkem_fix {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  padding: var(--zs-odstup-md) var(--zs-odstup-base);
  padding-bottom: calc(var(--zs-odstup-md) + env(safe-area-inset-bottom, 0px));
  background: var(--zs-barva-pozadi-stranka);
  border-top: 1px solid var(--zs-barva-ramecek-karta);
  font-size: 16px;
  font-weight: 700;
  color: var(--zs-barva-text-nadpis);
}

body.zs26-onl #celkem_fix .nodesktop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

body.zs26-onl #celkem_fix .nodesktop::after {
  content: "Zobrazit objednávku";
  color: var(--zs-barva-text-odkaz);
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 700px) {
  body.zs26-onl .objednavka_komplet {
    padding-bottom: calc(var(--zs-odstup-sekce-mobil) + 64px);
  }
}

@media (min-width: 1024px) {
  /* na desktopu je kosik videt v pravem sloupci, pevny radek neni potreba */
  body.zs26-onl #celkem_fix {
    display: none;
  }
}

/* ---------- radky kosiku ---------- */

body.zs26-onl #objednavka .podrobnosti_den h4 {
  margin: var(--zs-odstup-sm) 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--zs-barva-text-tlumeny);
}

/* Radek kosiku, prekresleno 3. 9. 2026. Do te doby stalo pole s poctem
   samostatne vlevo pred nazvem a plus s minusem visely az za cenou vpravo,
   takze ovladani jednoho jidla bylo na dvou mistech radku a nesouviselo spolu.
   Ted je nazev na svem radku a pod nim stepper vlevo, cena vpravo.
   Pole s poctem mezi minus a plus stehuje srovnejKosik() v JS. */
body.zs26-onl #objednavka .chod {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--zs-odstup-sm) var(--zs-odstup-md);
  padding: var(--zs-odstup-md) 0;
  border-bottom: 1px solid var(--zs-barva-ramecek-karta);
  font-size: 14.5px;
  line-height: 1.4;
}

body.zs26-onl #objednavka .chod .nazev {
  flex: 1 1 100%;
  min-width: 0;
  font-weight: 600;
  color: var(--zs-barva-text-nadpis);
}

/* engine tiskne mezi pole a nazev samostatne " x ", ktere po presunu pole
   nema co nasobit */
body.zs26-onl #objednavka .chod .nazev > span[style] {
  display: none !important;
}

/* radek pod nazvem: stepper vlevo, cena vpravo. .buttonky je v DOMu az za
   cenou, proto order. */
body.zs26-onl #objednavka .chod .cena {
  flex: 1 1 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--zs-odstup-sm);
  font-weight: 700;
  color: var(--zs-barva-text-nadpis);
  white-space: nowrap;
}

body.zs26-onl #objednavka .chod .cena .buttonky {
  order: -1;
  flex: 0 0 auto;
}

/* radek dopravy zadny stepper nema, cena patri vpravo k ostatnim cislum */
body.zs26-onl #objednavka .jidlochod .nazev {
  flex: 1 1 auto;
  font-weight: 400;
  color: var(--zs-barva-text-zakladni);
}

body.zs26-onl #objednavka .jidlochod .cena {
  flex: 0 0 auto;
  justify-content: flex-end;
}

/* pocet kusu je editovatelny input enginu, ne text */
body.zs26-onl #objednavka input[name="pocet"] {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 44px;
  height: 40px;
  margin: 0;
  padding: 0 2px !important;
  border: 1px solid var(--zs-barva-akce-sekundarni-ramecek);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: var(--zs-barva-pozadi-karta);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 38px !important;
}

/* Stepper v kosiku: [minus] [pocet] [plus] jako jeden celek.
   3. 9. 2026, Marek k puvodni verzi: "tohle ale UX nemyslis vazne, ne?
   vsak to popira vsechno co mame v tom systemu!" Plus bylo limetkove,
   minus bily obrys, takze dve poloviny teze akce mely ruznou vahu a v panelu
   svitilo pet limetkovych ploch. Limetka je podle pravidla konverze STRANKY
   a nejvys jedna na obrazovku, tady ji ma "Prihlasit se a dokoncit".
   Uprava poctu je provozni akce, patri jí sekundarni obrys.
   Viz Atlas/Knowledge/Barva tlacitka nese hodnotu akce, zluta tlacitko neni. */
body.zs26-onl #objednavka .buttonky {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
}

/* POZOR na flex-shrink. Do 3. 9. 2026 tu stalo width: 30px, pravidlo v kaskade
   vyhravalo, a tlacitko presto merilo 17,6 px: .buttonky je flex a polozka bez
   flex: 0 0 auto se v uzkem sloupci smrskne. Z kruhu byl uzky oval a computed
   display se zmenil na block, coz je znak zblokovane flex polozky. Sirka v CSS
   proto neni dukaz sirky na obrazovce, meri se rect. */
body.zs26-onl #objednavka .buttonky .but_plus {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 1px solid var(--zs-barva-akce-sekundarni-ramecek);
  background: var(--zs-barva-pozadi-karta);
  cursor: pointer;
}

/* minus vlevo, pole uprostred, plus vpravo: v DOMu jsou plus a minus opacne
   a pole se mezi ne stehuje az v JS, poradi proto drzi order */
body.zs26-onl #objednavka .buttonky .but_odebrat { order: 1; border-radius: var(--zs-radius-pill, 999px) 0 0 var(--zs-radius-pill, 999px); }
body.zs26-onl #objednavka .buttonky input[name="pocet"] { order: 2; }
body.zs26-onl #objednavka .buttonky .but_pridat { order: 3; border-radius: 0 var(--zs-radius-pill, 999px) var(--zs-radius-pill, 999px) 0; }

body.zs26-onl #objednavka .buttonky .but_plus span {
  display: none !important;
}

body.zs26-onl #objednavka .buttonky .but_plus::before,
body.zs26-onl #objednavka .buttonky .but_plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--zs-barva-text-nadpis);
  border-radius: 2px;
}

body.zs26-onl #objednavka .buttonky .but_plus::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}

body.zs26-onl #objednavka .buttonky .but_plus::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}

body.zs26-onl #objednavka .buttonky .but_odebrat::after {
  display: none;   /* minus je jen vodorovna carka */
}

body.zs26-onl #objednavka .celkem_cena {
  display: flex;
  justify-content: space-between;
  padding: var(--zs-odstup-sm) 0;
  font-weight: 700;
  color: var(--zs-barva-text-nadpis);
}

body.zs26-onl #objednavka .celkem_uplny {
  border-top: 2px solid var(--zs-barva-ramecek-doporucena);
  font-size: 17px;
}


/* ---------- opravy proti stylum enginu (floaty, pevne sirky) ---------- */

/* engine louskaci sloupce: menu i kosik si nesou vlastni sirky a floaty,
   v gridu musi bezet na plnou sirku */
body.zs26-onl .objednavka_komplet > .cast_menu,
body.zs26-onl .objednavka_komplet > .cast_objednavka,
body.zs26-onl .objednavka_komplet .dnesnimenu,
body.zs26-onl .objednavka_komplet #cast_menu {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}

/* 3. 9. 2026, Marek: "vase objednavka je nejaka uzka". Merene na webvyvoj,
   1440 px: pravy sloupec gridu ma 360 px, ale kosik v nem sedel na 176 px
   a nazvy jidel se lamaly po jednom slove. Duvod je objednavka2024.css
   s pravidlem .objednavka_komplet > div { width: 49% }: engine dela dva
   louskaci sloupce vedle sebe, a 49 % se v gridu pocita z sirky TRACKU,
   tedy 360 x 0,49 = 176,4 px. Vrstva prebijela jen #objednavka, coz je az
   vnitrek polozky, ne polozka .cast_objednavka sama. Radek vys ji dorovnava
   na plnou sirku sloupce spolu s levym menu. */

body.zs26-onl #objednavka {
  float: none !important;
  width: auto !important;
  max-width: none !important;
}

/* radek kosiku: nazev je flex s inputem poctu, nic se nesmi prekryvat */
body.zs26-onl #objednavka .chod {
  flex-wrap: wrap;
}

body.zs26-onl #objednavka .chod .nazev {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 60%;
}

body.zs26-onl #objednavka .chod .nazev,
body.zs26-onl #objednavka .chod .nazev * {
  position: static !important;
  float: none !important;
}

body.zs26-onl #objednavka .chod .cena {
  position: static !important;
  float: none !important;
  margin-left: auto;
}

body.zs26-onl #objednavka .celkem_cena span {
  position: static !important;
  float: none !important;
}

body.zs26-onl #objednavka .celkem_cena .cena {
  margin-left: auto;
}

/* ---------- nadpis stranky (Objednavka Menicka) ---------- */

body.zs26-onl .zs26-onl-hlava {
  max-width: 760px;
  margin: var(--zs-odstup-xl) auto 0;
}

@media (min-width: 1024px) {
  body.zs26-onl .zs26-onl-hlava { max-width: 1180px; }
}

body.zs26-onl #obsah .zs26-onl-hlava__nadpis {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  color: var(--zs-barva-text-nadpis);
}

body.zs26-onl #obsah .zs26-onl-hlava__perex {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--zs-barva-text-tlumeny);
}

/* ---------- opravy specificity proti obsah skinu ---------- */

/* skin dava #obsah h2 vetsi velikost, kosikove "Vase objednavka" musi byt
   mensi; dve id prebiji jeho selektor */
body.zs26-onl #obsah #objednavka h2 {
  margin: 0 0 var(--zs-odstup-sm);
  font-size: 20px;
  line-height: 1.3;
  color: var(--zs-barva-text-nadpis);
}

/* prazdny kosik: engine blok .objednavka.plocha byl uzky sedy ctverec,
   ma byt tichy radek pres celou sirku karty */
body.zs26-onl #obsah #objednavka .objednavka.plocha {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--zs-odstup-sm) 0 !important;
  background: none !important;
  border: 0 !important;
  color: var(--zs-barva-text-popisek);
  font-size: 14.5px;
  line-height: 1.5;
}

/* prazdny den: vysvetleni misto holeho "nevarime" */
body.zs26-onl .zs26-onl-nevarime {
  margin: var(--zs-odstup-sm) 0 0;
  padding: var(--zs-odstup-md) var(--zs-odstup-base);
  background: var(--zs-barva-pozadi-jemne);
  border-radius: var(--zs-radius-male);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}

/* ============================================================================
   Podle figmove predlohy, 31. 8. 2026 (yPtWQdvR3z3CaLCwsUuP6N, stranka 600:2,
   artboardy Desktop 1440 / Mobil 390 / Prazdny den). Figma je predloha,
   nic navic. Pozdejsi pravidla prepisuji drivejsi bloky tohoto souboru.
   ============================================================================ */

/* enginove texty, ktere predloha nema: uzaverkova veta (jeji text nese hint
   v hlave) a nadpis "Menu <den>" (den nesou pilulky) */
body.zs26-onl #obsah h3.text-center,
body.zs26-onl #cast_menu h2.u0 {
  display: none;
}

/* hlava: H1 vlevo, hint vpravo (na mobilu pod sebou) */
body.zs26-onl .zs26-onl-hlava {
  display: flex;
  /* center, ne baseline. Ucari flex kontejneru se bere z jeho prvni polozky,
     a tou je od 31. 8. vnoreny .zs26-onl-hlava__radek s ikonou. Ucari toho
     radku lezi na spodni hrane ikony, tedy 27 px pod ucarim H1, takze veta
     o uzaverce spadla pod nadpis. Center srovnava obe polozky proti stejnemu
     pasu a drzi to i po zalomeni na mobilu, kde se align-items uplatnuje
     na kazdy radek zvlast. */
  align-items: center;
  justify-content: space-between;
  gap: var(--zs-odstup-base);
  flex-wrap: wrap;
  margin-top: var(--zs-odstup-2xl);
}

body.zs26-onl #obsah .zs26-onl-hlava__hint {
  margin: 0;
  font-size: 13px;
  color: var(--zs-barva-text-popisek);
}

/* prepinac dnu jako pilulky (Figma: vybrany den tmavy) */
body.zs26-onl #prepinacDnu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--zs-odstup-sm);
  max-width: 1180px;
  margin: var(--zs-odstup-base) auto var(--zs-odstup-sm);
  overflow-x: auto;
  scrollbar-width: none;
  background: none;
  border: 0;
}

body.zs26-onl #prepinacDnu::-webkit-scrollbar {
  display: none;
}

body.zs26-onl #prepinacDnu > span.alink,
body.zs26-onl #prepinacDnu .dny > span.alink {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-pill, 999px);
  color: var(--zs-barva-text-zakladni);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
}

body.zs26-onl #prepinacDnu > span.alink.vybrany {
  background: var(--zs-barva-akce-tmave);
  border-color: var(--zs-barva-akce-tmave);
  color: var(--zs-barva-text-inverzni);
}

body.zs26-onl #prepinacDnu .dny {
  flex: 0 0 auto;
  display: inline-flex;
}

/* kategorie o rad vyraznejsi (Figma H4) */
body.zs26-onl .dnesnimenu .nazevchodu {
  font-size: 20px;
}

/* kosik: tlacitko prihlaseni jako primarni pilulka pres celou sirku */
body.zs26-onl #obsah #objednavka .zs26-onl-prihlasit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  min-height: 48px !important;
  margin: var(--zs-odstup-sm) 0 0 !important;
  padding: 0 24px !important;
  background: var(--zs-barva-akce-primarni) !important;
  border: 0 !important;
  border-radius: var(--zs-radius-pill, 999px) !important;
  color: var(--zs-barva-akce-primarni-text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer;
}

/* pevna lista Celkem podle predlohy: cislo + podradek vlevo, Dokoncit vpravo */
body.zs26-onl #celkem_fix {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--zs-odstup-base);
}

body.zs26-onl[data-zs26-kosik-prazdny="1"] #celkem_fix {
  display: none !important;
}

body.zs26-onl #celkem_fix .nodesktop {
  grid-column: 1;
  grid-row: 1;
  font-size: 17px;
}

body.zs26-onl #celkem_fix .nodesktop::after {
  content: none;
}

body.zs26-onl #celkem_fix .zs26-onl-lista-pod {
  grid-column: 1;
  grid-row: 2;
  font-size: 13px;
  font-weight: 400;
  color: var(--zs-barva-text-tlumeny);
}

body.zs26-onl #obsah #celkem_fix .zs26-onl-dokoncit {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  background: var(--zs-barva-akce-primarni) !important;
  border: 0 !important;
  border-radius: var(--zs-radius-pill, 999px) !important;
  color: var(--zs-barva-akce-primarni-text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer;
}

@media (min-width: 1024px) {
  /* desktop ma kosik ve sloupci, lista zustava schovana (drive v souboru) */
  body.zs26-onl #celkem_fix { display: none !important; }
}

/* prazdny den podle predlohy: karta na stred s akci */
body.zs26-onl .zs26-onl-nevarime {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zs-odstup-md);
  margin: var(--zs-odstup-sm) 0 0;
  padding: var(--zs-odstup-2xl) var(--zs-odstup-base);
  background: var(--zs-barva-pozadi-jemne);
  border-radius: var(--zs-radius-karta, 16px);
  text-align: center;
}

body.zs26-onl #obsah .zs26-onl-nevarime__text {
  margin: 0;
  font-size: 15px;
  color: var(--zs-barva-text-zakladni);
  max-width: 46ch;
}

body.zs26-onl #obsah .zs26-onl-nevarime__akce {
  display: inline-flex;
  align-items: center;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  background: var(--zs-barva-pozadi-karta) !important;
  border: 2px solid var(--zs-barva-akce-sekundarni-ramecek) !important;
  border-radius: var(--zs-radius-pill, 999px) !important;
  color: var(--zs-barva-text-nadpis) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer;
}

body.zs26-onl #obsah .zs26-onl-nevarime__pozn {
  margin: 0;
  font-size: 13px;
  color: var(--zs-barva-text-popisek);
}

/* tydenni prepinace: pryc sede krabice a sipkove klony enginu */
body.zs26-onl #prepinacDnu .dny,
body.zs26-onl #prepinacDnu .predchozi,
body.zs26-onl #prepinacDnu .dalsi {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.zs26-onl #prepinacDnu .kolsipka,
body.zs26-onl #prepinacDnu .clonaL,
body.zs26-onl #prepinacDnu .clonaR,
body.zs26-onl .kolsipka.jidelnicek_sipky,
body.zs26-onl .clonaL.jidelnicek_sipky,
body.zs26-onl .clonaR.jidelnicek_sipky {
  display: none !important;
}

body.zs26-onl #prepinacDnu .dny > span.alink {
  text-decoration: none !important;
  font-size: 13.5px;
  padding: 10px 16px;
  color: var(--zs-barva-text-tlumeny);
}

body.zs26-onl #prepinacDnu .predchozi > span.alink {
  opacity: .55;
}

/* prazdny den: enginova veta "Na tento den nevarime." je holy textovy uzel,
   schovava se pres font-size 0 na obalu, karta vrstvy si velikosti nastavuje
   sama */
body.zs26-onl .dnesnimenu:has(.zs26-onl-nevarime) {
  font-size: 0;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
}

/* dolaceni prepinace dnu podle skutecneho HTML enginu */
body.zs26-onl #prepinacDnu .dden,
body.zs26-onl #prepinacDnu .fa {
  display: none !important;
}

body.zs26-onl #prepinacDnu .dalsityden {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-pill, 999px);
  color: var(--zs-barva-text-tlumeny);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

body.zs26-onl #prepinacDnu > span.alink,
body.zs26-onl #prepinacDnu > span.alink span {
  color: var(--zs-barva-text-zakladni) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

body.zs26-onl #prepinacDnu > span.alink.vybrany,
body.zs26-onl #prepinacDnu > span.alink.vybrany span {
  color: var(--zs-barva-text-inverzni) !important;
}

/* veta enginu "Na tento den nevarime." je <p> pred kartou vrstvy */
body.zs26-onl .dnesnimenu:has(.zs26-onl-nevarime) > p:first-child {
  display: none !important;
}

/* tydenni prepinace nesmi byt absolutne polohovane pres pilulky dnu */
body.zs26-onl #prepinacDnu .dny {
  position: static !important;
  float: none !important;
  transform: none !important;
}

/* prepinac dnu MUSI byt v toku: engine ho mezi 700 a 1024 px polohuje
   absolutne a prejizdel pres nadpis (Markuv screenshot 31. 8. vecer) */
body.zs26-onl #prepinacDnu {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

body.zs26-onl #prepinacDnu > span.alink {
  position: static !important;
  float: none !important;
}

/* ---------- vlna 13: ctyri vady pasu dnu, 31. 8. 2026 ----------
   Vsechny ctyri jsou stejneho druhu: skin pilulky prekreslil, ale nezrusil
   rozmerove hodnoty, ktere na tytez uzly pise objednavka2024.css a engine.
   Merit se musi na zive strance, v HTML to videt neni. */

/* a) Ruzne vysky pilulek. objednavka2024.css dava .tyden > * height: 2.5em
      a .tyden > .vybrany height: 3em, takze vybrany den stal o 8 px vys nez
      ostatni. Jedna min-height pro vsechny a nulovy svisly padding, aby
      vysku urcovala jen ona. */
body.zs26-onl #prepinacDnu > span.alink,
body.zs26-onl #prepinacDnu .dny > span.alink,
body.zs26-onl #prepinacDnu .dalsityden {
  height: auto;
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}

/* b) .dny je jen obal tydenni pilulky a taky dostal height: 2.5em, takze
      pilulka z nej vytekala. */
body.zs26-onl #prepinacDnu .dny {
  height: auto !important;
  align-items: center;
}

/* c) Pretekajici text tydenni pilulky. objednavka2024.css drzi .dalsityden
      na width: 5em, tedy 68 px, zatimco "predchozi tyden" potrebuje pres 90.
      Text vytekal ven z pilulky a naboural se do pondelka. */
body.zs26-onl #prepinacDnu .dalsityden {
  width: auto;
  white-space: nowrap;
}

/* d) Pilulka v pilulce na konci pasu. "Dalsi tyden" je
      div.dny > span.alink > span.dalsityden a skin obleka OBA, takze na konci
      byly dva ramecky pres sebe. Vnitrni je jen text. Predchozi tyden tuhle
      vadu nema, engine ho kresli bez .alink obalu. */
body.zs26-onl #prepinacDnu .alink .dalsityden {
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* e) Pas dnu se po scrollu polozil pres nadpis Menicko. Engine pouziva
      PREDCHOZIHO SOUROZENCE #prepinacDnu jako vypln pod svuj sticky pas
      (.tyden.fixed, position: fixed) a pise mu inline height: 44px, pri
      navratu nahoru height: 0px. Timto sourozencem je od vlny 7 nase
      hlavicka, takze spadla na nulovou vysku, H1 z ni vytekl a pas si na nej
      sedl. Vrstva pas nikdy nefixuje (position: static !important nize),
      takze zadna vypln potreba neni a inline vyska se prebiji. */
body.zs26-onl .zs26-onl-hlava {
  height: auto !important;
}

/* klidny stav behem hledani dne: zadne blikani, ztlumene menu a jedna veta */
body.zs26-onl.zs26-onl--hledam .dnesnimenu {
  opacity: .35;
  pointer-events: none;
}

/* 31. 8., vlna 12: ztlumit i pas dnu. Do ted se ztlumilo jen menu, takze
   prepinani dnu bylo pri hledani videt naplno a hlasilo se jako blikani.
   ZADNE pointer-events: none, klik cloveka do pasu musi hledani zastavit. */
body.zs26-onl.zs26-onl--hledam #prepinacDnu {
  opacity: .45;
}

body.zs26-onl #prepinacDnu,
body.zs26-onl .dnesnimenu {
  transition: opacity .12s linear;
}

/* pojistka: karta prazdneho dne se nesmi ukazat uprostred hledani */
body.zs26-onl.zs26-onl--hledam .zs26-onl-nevarime {
  display: none !important;
}

body.zs26-onl #obsah .zs26-onl-hledam {
  max-width: 1180px;
  margin: var(--zs-odstup-sm) auto 0;
  font-size: 14px;
  color: var(--zs-barva-text-tlumeny);
}

/* behem hledani neukazovat ani syrovou vetu enginu, stav nese hledaci radek */
body.zs26-onl.zs26-onl--hledam .dnesnimenu > p:first-child {
  visibility: hidden;
}

/* ---------- ikona programu u nadpisu, 31. 8. 2026 ----------
   Marek chtel velkou ikonu u nadpisu na /objednat-muj-vyber a totez u Menicka.
   Obrazek je tentyz, jaky ma program v mrizce na /objednavka.

   Hodnoty jsou vynucene proti skinu: hlava sedi v #obsah a 60-zaklad.css maluje
   #clanek img (max-width, vyska, ramecek). Selektor skinu ma ID, takze ho
   pravidlo ze samych trid neprebije ani s !important. */
/* Na .zs26-onl-hlava se ZAMERNE nesaha. Uz je to flex se space-between a nese
   height: auto !important z vlny 13, bez ktereho jí engine zapise inline
   height: 0 a nadpis z ní vyteče. Ikona proto nejde dovnitr jako treti polozka
   (space-between by ji rozstrcil doprostred), ale do vnorene dvojice s H1,
   takze navenek zustavaji polozky dve. */
body.zs26-onl .zs26-onl-hlava__radek {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-base);
  min-width: 0;
}
body.zs26-onl #obsah .zs26-onl-hlava__ikona {
  flex: 0 0 auto;
  display: block;
  width: auto !important;
  max-width: none !important;
  height: 76px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
@media (max-width: 699px) {
  body.zs26-onl #obsah .zs26-onl-hlava__ikona { height: 52px !important; }
}

/* ============================================================================
   Vlna 3. 9. 2026, pripominky Marka k Menicku na webvyvoj
   ============================================================================ */

/* a) Den, na ktery se nevari, kreslil engine JINAK nez ostatni dny. Zmereno
      na webvyvoj, tyden 21. az 25. 9.: dostupny den je
      <span class="alink"><span>patek</span></span>, nedostupny je holy <div>
      BEZ jakekoliv tridy. Cely skin pasu visi na .alink, takze na nej nesedelo
      nic: zustal v 17,6 px z .customfont, roztahl se pres 337 px a mel sedy
      obdelnik misto pilulky. Marek: "patek je divnym fontem a ramecku, neni
      tam na nej aplikovany styl."
      Selektor bere primeho potomka div, ktery NENI navigace tydne (.dny nese
      predchozi a dalsi tyden). Vypada jako pilulka ostatnich dnu, jen tlumene
      a bez kurzoru, protoze kliknout na nej opravdu nejde. */
body.zs26-onl #prepinacDnu > div:not(.dny) {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  min-height: 2.5em;
  background: var(--zs-barva-pozadi-sekce);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-pill, 999px);
  color: var(--zs-barva-text-tlumeny);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  cursor: default;
  opacity: .65;
}

/* b) Legenda ikon diety pod pasem dnu. Kolecko si nese enginova trida .wheat
      (30 px, kruh, zeleny ramecek z objednavka2024.css), vrstva resi jen
      rozestupy a text, aby se legenda nikdy nerozesla s ikonami u jidel.
      Marek 3. 9.: "tady ikonky nikde nemame vysvetlivku." */
body.zs26-onl .zs26-onl-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zs-odstup-base) var(--zs-odstup-lg);
  max-width: 1180px;
  margin: 0 auto var(--zs-odstup-md);
}

body.zs26-onl .zs26-onl-legenda__polozka {
  display: inline-flex;
  align-items: center;
  gap: var(--zs-odstup-sm);
}

body.zs26-onl .zs26-onl-legenda__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--zs-barva-text-popisek);
}

/* Skin maluje #obsah img (max-width, vyska, ramecek), stejna past jako
   u ikony v hlavicce. Selektor skinu ma ID, takze se prebiji s !important. */
body.zs26-onl #obsah .zs26-onl-legenda .wheat img {
  display: block;
  width: auto !important;
  max-width: 17px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

@media (max-width: 699px) {
  body.zs26-onl .zs26-onl-legenda {
    gap: var(--zs-odstup-sm) var(--zs-odstup-base);
    padding: 0 var(--zs-odstup-base);
  }

  body.zs26-onl .zs26-onl-legenda__text {
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------------------
   c) Pata kosiku: jedna limetka na obrazovku, 3. 9. 2026
   Marek: "tohle ale UX nemyslis vazne, ne? vsak to popira vsechno co mame
   v tom systemu!" V panelu svitilo pet limetkovych ploch (tri plus u jidel,
   Prihlasit se a dokoncit, REGISTRACE) a nejvyraznejsim prvkem paty byl
   podtrzeny sedy odkaz Vycistit objednavku ve 22,4 px, tedy destruktivni
   akce nad konverzni. Podle pravidla je limetka konverze STRANKY a nejvys
   jedna na obrazovku; tady ji ma Prihlasit se a dokoncit. Registrace je
   navigace, tedy sekundarni obrys. Vycistit je provozni odkaz dolu a drobne.
   Poradi drzi order, v DOMu enginu je Vycistit prvni.
   --------------------------------------------------------------------------- */

body.zs26-onl #objednavka .final {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--zs-odstup-sm);
  padding-top: var(--zs-odstup-base);
}

body.zs26-onl #objednavka .final > div {
  padding: 0 !important;
  text-align: center;
}

/* blok s vetou a obema tlacitky */
body.zs26-onl #objednavka .final > div:has(.zs26-onl-prihlasit) {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--zs-odstup-sm);
}

body.zs26-onl #objednavka .final p {
  margin: 0 0 var(--zs-odstup-sm);
  font-size: 14px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}

/* Registrace: navigace, ne konverze. Inline style z enginu nese padding,
   proto !important i tady. */
body.zs26-onl #obsah #objednavka .final .button_hlavni:not(.zs26-onl-prihlasit) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  background: var(--zs-barva-pozadi-karta) !important;
  border: 1px solid var(--zs-barva-akce-sekundarni-ramecek) !important;
  border-radius: var(--zs-radius-pill, 999px) !important;
  color: var(--zs-barva-text-nadpis) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer;
}

/* Vycistit objednavku: provozni odkaz, dolu a drobne */
body.zs26-onl #objednavka .final > div:not(:has(.zs26-onl-prihlasit)) {
  order: 2;
}

body.zs26-onl #objednavka .final .alink {
  display: inline-block;
  padding: var(--zs-odstup-sm) 0 0;
  background: none;
  border: 0;
  color: var(--zs-barva-text-popisek);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

body.zs26-onl #objednavka .final .alink:hover {
  color: var(--zs-barva-text-nadpis);
}

/* ---------------------------------------------------------------------------
   d) Geometrie stepperu, dolaceno 3. 9. 2026 podle mereni na webvyvoj
   Marek: "ale i ty velikosti tlacitek plus a minus... jak je to zarovnane...
   podivej se na to prosim poradne."
   Zmerene tri priciny, ktere v CSS videt nejsou a najdou se az na rectech:
     1. engine dava .but_plus margin-left: 29px, takze mezi minusem a polem
        zela 33 px a plus se s polem prekryvalo o 4 px;
     2. .buttonky nese padding-top: 5px, cimz cely stepper sedel o 5 px niz
        nez cena vedle nej a mel vysku 53 misto 40;
     3. pole s poctem prohralo rozmery se sablonou: padding vysel 16 px misto
        2 a vyska 48 misto 40, protoze content2024.css maluje kazdy input
        pres !important a nase pravidlo melo nizsi specificitu.
   Proto tenhle blok pouziva #obsah #objednavka, tedy dve ID, a !important.
   Vsechny tri prvky stepperu maji 40 px na vysku, spolecny ramecek a nulovou
   mezeru, takze tvori jeden celek: 40 + 44 + 40 = 124 px.
   --------------------------------------------------------------------------- */

body.zs26-onl #obsah #objednavka .chod .buttonky {
  /* engine drzi obal na pevnych 100 px, obsah stepperu ma 124, takze pretekal */
  width: auto !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

/* Tohle je ta vlastnost, kvuli ktere stepper nesedel ani po srovnani marginu:
   engine dava .but_plus position: relative a k tomu left: -33px a top: -11px,
   protoze v jeho puvodnim rozvrzeni tlacitka visela mimo tok vedle ceny.
   V CSS to neni videt jako mezera, na obrazovce ano: 33 px diry mezi minusem
   a polem, plus prekryty pres pole a cely stepper o 7 px vejs nez cena.
   position: relative musi zustat, znamenka jsou ::before a ::after
   pozicovana absolutne vuci nemu. Nuluji se jen posuny. */
body.zs26-onl #obsah #objednavka .chod .buttonky .but_plus {
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
  vertical-align: top;
}

/* Pole je flex polozka a sablona mu dava vysku pole formulare (48 px).
   Samotna height nestaci, proto i align-self a oba limity. */
body.zs26-onl #obsah #objednavka .chod .buttonky input[name="pocet"] {
  align-self: center;
  /* sablona maluje kazdy input vlastnim rameckem pres !important, takze
     bez !important tu zustaval ramecek ze vsech ctyr stran v jine barve
     a stepper se rozpadl na tri samostatne prvky */
  border: 1px solid var(--zs-barva-akce-sekundarni-ramecek) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  /* pole formulare ma v skinu vlastni radius, uprostred stepperu z nej delal
     bublinu couhajici pres obrys */
  border-radius: 0 !important;
  background: var(--zs-barva-pozadi-karta) !important;
  width: 44px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 38px !important;
  vertical-align: top;
}

/* Rameček stepperu ma byt jeden, ne tri vedle sebe: prostredni pole si bere
   vodorovne hrany od sousedu a svisle svoje. */
body.zs26-onl #obsah #objednavka .chod .buttonky .but_odebrat {
  border-right: 0 !important;
}

body.zs26-onl #obsah #objednavka .chod .buttonky .but_pridat {
  border-left: 0 !important;
}