/* novy-2026-obsah.css: skin nad starym obsahem sablony template_general, noc 25. 8. 2026.
   Slozeno z 25/css-obsah/*.css skriptem noc-2026-08-25/slozit-a-nasadit.py, needitovat rucne, menit partialy.
   Kazdy selektor je pod body:has(.zs26-hlavicka), takze bez zverejnene nove hlavicky (modul 891) se nic nezmeni.
   Nemeni HTML ani texty, nesaha na objednavkovou vrstvu (fox1/fox2) ani na funkcni tridy enginu.
   Slozeno: 2026-09-02 01:13 z 13 partialu. */

/* ===== css-obsah/58-hlavicka-doplnky.css ===== */
/* 58-hlavicka-doplnky.css, 25. 8. 2026 rano (Marek): odkaz Muj ucet v nove hlavicce.
   Stavajici klienti si priobjednavaji na frontendu pres prihlaseni, stara hlavicka odkaz mela, nova ne.
   Scope .zs26 (hlavicka je modul ZS26 00). Bez zmeny existujicich pravidel hlavicky v novy-2026.css. */
.zs26 .zs-hlavicka__ucet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--zs-barva-text-nadpis);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.zs26 .zs-hlavicka__ucet svg { width: 18px; height: 18px; flex: 0 0 auto; }
.zs26 .zs-hlavicka__ucet:hover .zs-hlavicka__ucet-text { text-decoration: underline; }
.zs26 .zs-hlavicka__ucet-text { display: none; }
/* text az od 1200 px: na 1024 az 1199 by vytlacil telefon do tri radku */
@media (min-width: 1200px) {
  .zs26 .zs-hlavicka__ucet-text { display: inline; }
}
.zs26 .zs-hlavicka__telefon { white-space: nowrap; }
.zs26 .zs-hlavicka__telefon-text { white-space: nowrap; }

/* ===== css-obsah/59-homepage-doplnky.css ===== */
/* 59-homepage-doplnky.css. Drobnosti, které se týkají jen homepage.

   26. 8. 2026: původní pravidlo pro img.zs-m-poradna__portret v modulu 06 je pryč.
   Modul 06 se přestavěl na verzi 2 a portrét Kateřiny Šimkové v něm má třídu
   .zs-kd__portret, kterou stylUje 37-kdo-za-jidlem-v2.css v novy-2026.css.
   Původní znění zůstalo v 59-homepage-doplnky.css.pred.

   Prázdný obsah na homepage. Článek přiřazený k položce menu Domů je prázdný,
   všechno kreslí moduly, ale engine kolem něj přesto vykreslí .main_limit.obsah
   s 64 px odsazení nahoře i dole. Před přesunem pásu čísel na konec stránky
   (26. 8. 2026) to bylo 128 px bílé mezi světle zeleným FAQ a tmavou patičkou
   a nebylo to poznat. Po přesunu končí stránka krémovým pásem a mezera je vidět.
   Scope `.id1` je položka menu Domů, na podstránkách je v tom kontejneru článek
   a odsazení tam patří. Měněné je jen padding, na funkční vlastnosti enginu
   (display, position, width) se nesahá.

   Pozor na specificitu: `#obsah >` v selektoru je nutné. Základ skinu
   (60-zaklad.css) nastavuje odsazení pravidlem
   `body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah`, které má
   id, a tenhle soubor se skládá před ním. Bez `#obsah >` by pravidlo prohrálo
   i s třídou `.id1` navíc. */
body:has(.zs26-hlavicka):not(.foxplus).id1 #obsah > .main_limit.obsah {
  padding-block: 0;
}

/* ===== css-obsah/60-zaklad.css ===== */
/* 60-zaklad.css
   Co to je: zaklad skinu nad standardnim obsahem Joomly a JCE. Plati na vsech ceskych
   podstrankach testu webvyvoj2 (mimo objednavku, viz nize). Stavitel 0, noc 25. 8. 2026.

   Scope: body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26)
   Cast :not(.foxplus) drzi cely soubor mimo /objednavka. Ta ma na body tridu foxplus
   a vlastni vrstvu (modul 890, tridy zs26-obj-*) uvnitr #clanek. Kdyz skin platil i tam,
   krokovnik objednavky se sesypal (obal 1180 misto 1330) a tlacitka Overit a Vybrat jidlo
   prisla o limetku (mereno 25. 8. proti Dukazy/pred/objednavka-1440.jpg).
   Nova hlavicka i paticka jsou primi potomci #obsah jako div.zs26.zs26-hlavicka /
   .zs26-paticka (mereno 25. 8. v headless Chromu). Proto se stary obsah adresuje pres
   `#obsah > :not(.zs26)`: to jsou pasy .pas a obal clanku .main_limit.obsah, a nova
   hlavicka ani paticka se timhle souborem nikdy nezasahne.

   Co prebiji z template2024.css a content2024.css (mereno na zivem webu, ne odhad):
   - body { font-size: 14px; font-weight: 300; text-align: center }
   - .main_limit { max-width: 1330px }, .body_v3 .main_limit { width: 95% }
   - .pas .main_limit { padding: 60px 0 35px }
   - .pas.pozadi1 kremova, .pozadi2 svetle zelena, .pozadi3 zluta + pozadi3.png,
     .pozadi4 studena bila, .pozadi5 bila + pozadi-srdicka.png (presne hodnoty jsou
     v template2024.css radky 396 az 404, sem se hexy psat nesmi)
   - h1..h6 { padding: 2em 0 .3em }, h1 { font-size: 1.685em; padding: 2.5em 0 .5em }
   - h1 strong, h2 strong { color: limetka; font-size: 36px } (limetka na textu, zakazana)
   - p { padding: 6px 0 }, a { color: limetka, kontrast na bile pod 3:1 }
   - ul li { list-style: none; padding: .4em 0 .4em 2em; background: url(tecka1..3.png) }
   - input, textarea { padding: 28px 31px !important } (pole meri 74 px), select { height: 60px }
   - input[type=submit], .button, button { padding: 21px 25px !important; border: 0 !important }
   - .button_hlavni { background: limetka !important; color: bila !important;
     border: 2px solid limetka !important } (bila na limetce, zakazana)
   - hr { border-top: 2px teckovana seda }

   Zamerne nehotove a proc:
   - Cely soubor je mimo /objednavka (body.foxplus), viz vys. Objednavkova vrstva si tam
     drzi svuj vzhled beze zmeny. Cena: h1 objednavky zustava limetkovy a obal 1330 px,
     coz je vec modulu 890, ne skinu.
   - Tabulky styluje jen `table:not([class])` a `table.tabulka`, tedy redakcni tabulky z JCE.
     Tabulky enginu (.jidelnicky_tab, .cenik_tab, .tabulka_cenik, .tabulka_jidelnicku) maji
     vlastni vzhled a scrollovaci obal, na ty sahaji stranky A a B.
   - Odrazky dostane jen `ul:not([class])` a `ol:not([class])`, zase kvuli enginu.
     Zelene tecky (tecka1..3.png) se ale rusi na vsech `ul > li` v obsahu, to je jen odebrani.
   - Zaobleni tabulky na obalu neni: redakcni tabulka z JCE zadny obal nema.
   - Fokus pole: content2024.css ma na :focus vlastni stin s !important a ten se tady
     prebit neda, kontrakt stiny zakazuje. Fokus resi outline v --zs-barva-stav-fokus.
   - #newsletter-prihlaseni.pas_acy (zluty pas nad patickou) je mimo #obsah, na body.
     Neni to .pas ani obsah clanku, takze sem nepatri. Vyzaduje rozhodnuti orchestratora.
   - Hero pasy nechavaji zarovnani, jak je dnes (mereno: text-align left).
   - Breakpointy jen 700 a 1024, mobile first.
*/

/* ---------------------------------------------------------------
   1. Obaly: sirka 1180, bocni odsazeni, svisle odstupy sekci
   --------------------------------------------------------------- */
/* template2024.css dava strance svetle zelene pozadi, ktere kolem obalu 1180 px
   prosvita jako pruh. Homepage je bila, tak at je bila i podstranka. */
body:has(.zs26-hlavicka):not(.foxplus) {
  background: var(--zs-barva-pozadi-stranka);
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .main_limit,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--zs-sirka-obsah);
  margin-inline: auto;
  padding-inline: var(--zs-odstup-base);
}

/* svisly odstup pasu podle tokenu (mobil 44, desktop 64) */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah {
  padding-block: var(--zs-odstup-sekce-mobil);
}

/* pasy, ktere odsazeni nemaji mit, ho nedostanou ani ode me */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.bezlimitu > .main_limit,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.bezodsazeni > .main_limit {
  padding-block: 0;
}

@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .main_limit,
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah {
    padding-inline: var(--zs-odstup-lg);
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit,
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah {
    padding-block: var(--zs-odstup-sekce);
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.bezlimitu > .main_limit,
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.bezodsazeni > .main_limit {
    padding-block: 0;
  }
}

/* ---------------------------------------------------------------
   2. Plochy pasu. Mereno 25. 8. 2026 na /cenik, /blog a /program-pro-zdravi:
      pozadi1 = kremova, pozadi2 = svetle zelena,
      pozadi3 = zluta se vzorem (jediny vyrazny pas, v novem designu
      ho zastupuje tmavy pas jako na homepage), pozadi4 = studena bila,
      pozadi5 = bila se srdicky. Svetle zustava svetle, prehodi se jen pozadi3.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas {
  background: var(--zs-barva-pozadi-stranka);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi1 {
  background: var(--zs-barva-pozadi-sekce-2);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2 {
  background: var(--zs-barva-pozadi-sekce);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi3 {
  background: var(--zs-barva-pozadi-tmave);
  color: var(--zs-barva-text-na-tmavem);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi4,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi5 {
  background: var(--zs-barva-pozadi-jemne);
}

/* vnitrni zluty pas v clanku (.inpas.inpas_objednat na /cenik a /jidelnicek).
   Zustava svetly, jen v kremove z tokenu. Tmavy byt nemuze: text a tlacitko nad nim
   nejsou jeho potomci (mereno: .inpas_objednat nema deti), takze by se nedaly zesvetlit. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .inpas_objednat {
  background: var(--zs-barva-pozadi-sekce-2);
}

/* text na tmavem pasu */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi3 h1,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi3 h2,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi3 h3,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi3 h4,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi3 p,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi3 li,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi3 strong,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi3 span {
  color: var(--zs-barva-text-na-tmavem);
}

/* ---------------------------------------------------------------
   3. Hero pas podstranek: div.pas.bezlimitu > .pozadi-flexi (500 px).
      Pismo a barvy podle homepage hero (css-partials/31-homepage-a.css, .zs-m-hero),
      zarovnani se nemeni (dnes je vlevo).
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.bezlimitu > .pozadi-flexi {
  font-family: var(--zs-pismo);
  color: var(--zs-barva-text-zakladni);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.bezlimitu > .pozadi-flexi h1 {
  margin: 0;
  padding: 0 0 var(--zs-odstup-base);
  font-size: clamp(34px, 3.3vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--zs-barva-text-nadpis);
}
/* limetka na textu je zakazana, strong v nadpisu tedy jen dedi */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.bezlimitu > .pozadi-flexi h1 strong,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.bezlimitu > .pozadi-flexi h2 strong {
  font: inherit;
  color: inherit;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.bezlimitu > .pozadi-flexi h2 {
  margin: 0;
  padding: 0 0 var(--zs-odstup-md);
  font-size: clamp(26px, 2.7vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-nadpis);
}
/* h3 je v hero perex, ne nadpis (mereno na /o-nas a /obchodni-podminky) */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.bezlimitu > .pozadi-flexi h3 {
  margin: 0;
  padding: 0 0 var(--zs-odstup-md);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.bezlimitu > .pozadi-flexi p {
  margin: 0 0 var(--zs-odstup-base);
  padding: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}

/* ---------------------------------------------------------------
   4. Typografie obsahu clanku
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah,
body:has(.zs26-hlavicka):not(.foxplus) #clanek.item-page {
  font-family: var(--zs-pismo);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--zs-barva-text-zakladni);
  text-align: left;
}
/* .stranka_normal ma z template2024.css padding-top 17px, odstup uz resi obal */
body:has(.zs26-hlavicka):not(.foxplus) #clanek.item-page {
  padding-top: 0;
}
/* .item-page nema mit ramecky ani plochu legacy */
body:has(.zs26-hlavicka):not(.foxplus) #clanek.item-page,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .page-header {
  background: none;
  border: 0;
}

/* h1 plati i v pasu (.program_head na /cenik lezi mimo .main_limit),
   zarovnani se nemeni, jen velikost, vaha a barva */
body:has(.zs26-hlavicka):not(.foxplus) #clanek h1,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas h1 {
  margin: 0;
  padding: 0 0 var(--zs-odstup-base);
  font-size: clamp(34px, 3.3vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--zs-barva-text-nadpis);
}
/* nadpisy pasu si smi nechat stred, kdyz ho dnes maji (kontrakt bod 10),
   proto se u h2 v pasu meni jen pismo a barva, ne zarovnani */
body:has(.zs26-hlavicka):not(.foxplus) #clanek h2,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit h2 {
  margin: 0;
  padding: var(--zs-odstup-2xl) 0 var(--zs-odstup-md);
  font-size: clamp(26px, 2.7vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek h3,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit h3 {
  margin: 0;
  padding: var(--zs-odstup-xl) 0 var(--zs-odstup-sm);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek h4,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit h4 {
  margin: 0;
  padding: var(--zs-odstup-lg) 0 var(--zs-odstup-sm);
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--zs-barva-text-nadpis);
}
/* prvni nadpis v clanku nema mit odstup nahore */
body:has(.zs26-hlavicka):not(.foxplus) #clanek h1:first-child,
body:has(.zs26-hlavicka):not(.foxplus) #clanek h2:first-child,
body:has(.zs26-hlavicka):not(.foxplus) #clanek h3:first-child,
body:has(.zs26-hlavicka):not(.foxplus) #clanek h4:first-child {
  padding-top: 0;
}
/* limetka na textu je zakazana (kontrakt bod 8). content2024.css dava
   h1 strong a h2 strong limetku a 36 az 50 px, tady jen dedi nadpis. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) h1 strong,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) h2 strong,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) h1.hlavni,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) h2.hlavni {
  /* oprava 02:50 (nalez Stavitele A): font: inherit srazilo nadpis na 14 px / 300 z body */
  font-family: var(--zs-pismo);
  font-size: clamp(34px, 3.3vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--zs-barva-text-nadpis);
  color: inherit;
}

/* Vypis blogu (.blogitem) ma vlastni karty s pevnou vyskou. Nadpis karty proto
   drzi velikost .zs-h3, ne velikost nadpisu clanku, jinak text z karty vypadne. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .blogitem .nadpis h2,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .blogitem .nadpis h3,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .blogitem .nadpis h4 {
  margin: 0;
  padding: 0 0 var(--zs-odstup-sm);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-nadpis);
}

/* :not(.zs26 *) doplneno 25. 8. odpoledne. Bez nej pravidlo prebijelo vlastni
   typografii komponent ZS26, ktere Joomla vykresluje uvnitr obalu clanku:
   p.zs-m-rozcestnik__drobecky dostavaly 16 px misto 14,5 a p.zs-perex 16 px misto 19.
   Kontrakt bod 1 a hlavicka 79-rozcestniky-ram.css: uvnitr .zs26 se ze skinu nesaha na nic. */
body:has(.zs26-hlavicka):not(.foxplus) #clanek p:not(.zs26 *),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah p:not(.zs26 *) {
  margin: 0 0 var(--zs-odstup-base);
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}

/* :not(.zs26 *) doplneno 26. 8. vecer, stejny duvod jako u odstavcu vyse a stejna
   past. Rozcestniky, katalog programu a dalsi bloky ZS26 lezi uvnitr #clanek, takze
   je tohle pravidlo prebijelo: `#clanek a` ma id, vlastni pravidlo tlacitka
   `.zs26.zs26-programy .zs-m-programy__chip` jen tri tridy, a id vyhraje bez ohledu
   na poradi. Podtrzene pak byly chipy filtru, nadpisy karet cest i ceny na nich.
   Mereno 26. 8. na /programy-a-priprava: pet chipu a sest karet s `underline`. */
body:has(.zs26-hlavicka):not(.foxplus) #clanek a:not(.zs26 *),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah a:not(.zs26 *) {
  color: var(--zs-barva-text-odkaz);
  text-decoration: underline;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek a:not(.zs26 *):hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah a:not(.zs26 *):hover {
  color: var(--zs-barva-text-nadpis);
}

/* Odkaz v tabulce neni odkaz v textu. Na /cenik jsou vsechny ceny odkazy a podtrzeni
   z pravidla vyse z nich udelalo kasi. Podtrzeni patri odkazum v odstavcich, v bunce
   staci barva textu a podtrzeni az na najeti. */
body:has(.zs26-hlavicka):not(.foxplus) #clanek td a,
body:has(.zs26-hlavicka):not(.foxplus) #clanek th a,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah td a,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah th a,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit td a,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit th a {
  color: inherit;
  text-decoration: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek td a:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah td a:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit td a:hover {
  color: var(--zs-barva-text-odkaz);
  text-decoration: underline;
}

/* seznamy: pryc zelene tecky tecka1..3.png, zpet normalni odrazky.
   Tecky jsou i v seznamech uvnitr pasu (mereno na /cenik, pas m226.pozadi1). */
body:has(.zs26-hlavicka):not(.foxplus) #clanek ul > li,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah ul > li,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit ul > li {
  background-image: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek ul:not([class]),
body:has(.zs26-hlavicka):not(.foxplus) #clanek ol:not([class]),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah ul:not([class]),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah ol:not([class]),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit ul:not([class]),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit ol:not([class]) {
  margin: 0 0 var(--zs-odstup-base);
  padding: 0 0 0 var(--zs-odstup-xl);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek ul:not([class]) > li,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah ul:not([class]) > li,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit ul:not([class]) > li {
  margin: 0;
  padding: var(--zs-odstup-xs) 0;
  background: none;
  list-style: disc;
  font-size: 16px;
  line-height: 1.55;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek ol:not([class]) > li,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah ol:not([class]) > li,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit ol:not([class]) > li {
  margin: 0;
  padding: var(--zs-odstup-xs) 0;
  background: none;
  list-style: decimal;
  font-size: 16px;
  line-height: 1.55;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek ul:not([class]) > li::marker,
body:has(.zs26-hlavicka):not(.foxplus) #clanek ol:not([class]) > li::marker {
  color: var(--zs-barva-ikona-check);
}

body:has(.zs26-hlavicka):not(.foxplus) #clanek hr,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah hr {
  height: 1px;
  margin: var(--zs-odstup-xl) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--zs-barva-ramecek-karta);
  color: var(--zs-barva-ramecek-karta);
}

body:has(.zs26-hlavicka):not(.foxplus) #clanek blockquote,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah blockquote {
  margin: var(--zs-odstup-xl) 0;
  padding: 0 0 0 var(--zs-odstup-lg);
  border-left: 3px solid var(--zs-barva-akce-primarni);
  font-size: 19px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}

/* redakcni tabulky z JCE (bez tridy nebo .tabulka). Tabulky enginu se nechavaji.
   Doplneno 03:15: clanek v Aktualitach a na blogu se vykresluje v hero pasu (.pozadi-flexi .text), ne v #clanek. */
body:has(.zs26-hlavicka):not(.foxplus) #clanek table:not([class]),
body:has(.zs26-hlavicka):not(.foxplus) #clanek table.tabulka,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah table:not([class]),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pozadi-flexi .text table:not([class]) {
  width: 100%;
  margin: 0 0 var(--zs-odstup-xl);
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek table:not([class]) th,
body:has(.zs26-hlavicka):not(.foxplus) #clanek table.tabulka th,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah table:not([class]) th,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pozadi-flexi .text table:not([class]) th {
  padding: var(--zs-odstup-md) var(--zs-odstup-base);
  background: var(--zs-barva-pozadi-sekce);
  color: var(--zs-barva-text-nadpis);
  font-weight: 600;
  text-align: left;
  border: 1px solid var(--zs-barva-ramecek-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek table:not([class]) td,
body:has(.zs26-hlavicka):not(.foxplus) #clanek table.tabulka td,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah table:not([class]) td,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pozadi-flexi .text table:not([class]) td {
  padding: var(--zs-odstup-md) var(--zs-odstup-base);
  border: 1px solid var(--zs-barva-ramecek-karta);
  vertical-align: top;
}

/* `:not(.zs26 *)` doplneno 30. 8. 2026, stejny duvod jako u tlacitek
   v 65-redakce.css. Rozcestnik je div.zs26 uvnitr #clanek, takze `height: auto`
   odtud prebijelo `height: 100%` z css-partials a obrazek v karte .zs-k3
   vysel 72 x 48 misto 72 x 72 (mereno na testu). Obrazky v blocich ZS26 maji
   rozmer vzdy ve svem partialu, takze o tohle pravidlo neprijdou. */
body:has(.zs26-hlavicka):not(.foxplus) #clanek img:not(.zs26 *),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah img:not(.zs26 *) {
  max-width: 100%;
  height: auto;
}
/* zaobleni jen redakcnim obrazkum, ikony (img.ic) a obrazky enginu zustavaji ostre */
body:has(.zs26-hlavicka):not(.foxplus) #clanek img:not([class]),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah img:not([class]) {
  border-radius: var(--zs-radius-karta);
}

/* ---------------------------------------------------------------
   5. Tlacitka. Vzhled .zs-tlacitko z css-partials/20-komponenty.css.
      Limetka jen tam, kde odkaz vede do objednavky, jinak obrys,
      odesilaci tlacitko ve formulari tmave (kontrakt bod 9).
      content2024.css ma na techto selektorech !important, proto ho tady potrebuji taky.

      :not([class*="zs26-vyj"]) u button vynechava ovladaci prvky vrstvy Muj vyber
      (chipy porci, filtr, legenda, Sestavit mi den). Bez toho je tohle pravidlo
      prebarvi na obrysove tlacitko a vybrana porce vypada jako nevybrana.
      Specificita to nespravi, tenhle selektor ma (1 id, 4 tridy, 2 typy) a mezi
      !important deklaracemi porad rozhoduje specificita. Tridy zs26-vyj- existuji
      jen na strance objednat-muj-vyber, takze zbytek webu se nemeni.
      Zmereno a opraveno 26. 8. 2026.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button_hlavni,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) span.button_hlavni,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.tlacitko,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.btn,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) button:not([class*="zs26-vyj"]),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zs-odstup-sm);
  min-height: var(--zs-vyska-tlacitko);
  padding: 0 var(--zs-odstup-xl) !important;
  border-radius: var(--zs-radius-pill) !important;
  font-family: var(--zs-pismo);
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  background: var(--zs-barva-pozadi-karta) !important;
  color: var(--zs-barva-text-nadpis) !important;
  border: 2px solid var(--zs-barva-akce-sekundarni-ramecek) !important;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button_hlavni:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) span.button_hlavni:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.tlacitko:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) button:not([class*="zs26-vyj"]):hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) input[type="submit"]:hover {
  background: var(--zs-barva-akce-sekundarni-hover) !important;
  color: var(--zs-barva-text-nadpis) !important;
}

/* primarni: tlacitko, ktere vede do objednavky. Jen tlacitka, ne kazdy odkaz,
   aby se z odkazu v textu nestala limetkova plocha. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button_hlavni[href*="objednavka"],
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button_hlavni[href*="/order"],
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button_hlavni[href*="objednat"],
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button[href*="objednavka"],
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button[href*="/order"],
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button[href*="objednat"],
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.tlacitko[href*="objednavka"],
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.tlacitko[href*="/order"],
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.tlacitko[href*="objednat"],
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.btn[href*="objednavka"],
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.btn[href*="/order"],
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.btn[href*="objednat"]{
  background: var(--zs-barva-akce-primarni) !important;
  color: var(--zs-barva-akce-primarni-text) !important;
  border-color: var(--zs-barva-akce-primarni) !important;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button_hlavni[href*="objednavka"]:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button_hlavni[href*="/order"]:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button_hlavni[href*="objednat"]:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button[href*="objednavka"]:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button[href*="/order"]:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.tlacitko[href*="objednavka"]:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.tlacitko[href*="/order"]:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.btn[href*="objednavka"]:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.btn[href*="/order"]:hover{
  background: var(--zs-barva-akce-primarni-hover) !important;
  border-color: var(--zs-barva-akce-primarni-hover) !important;
  color: var(--zs-barva-akce-primarni-text) !important;
}

/* .outline z content2024.css uz obrys je, jen na nasich barvach */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button_hlavni.outline {
  background: var(--zs-barva-pozadi-karta) !important;
  color: var(--zs-barva-text-nadpis) !important;
  border-color: var(--zs-barva-akce-sekundarni-ramecek) !important;
}

/* odesilaci tlacitko ve formulari: tmave */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) form button,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) form input[type="submit"] {
  background: var(--zs-barva-akce-tmave) !important;
  color: var(--zs-barva-text-inverzni) !important;
  border-color: var(--zs-barva-akce-tmave) !important;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) form button:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) form input[type="submit"]:hover {
  background: var(--zs-barva-akce-tmave-hover) !important;
  border-color: var(--zs-barva-akce-tmave-hover) !important;
  color: var(--zs-barva-text-inverzni) !important;
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.button_hlavni:focus-visible,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) button:not([class*="zs26-vyj"]):focus-visible,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) input[type="submit"]:focus-visible {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   6. Pole. Bez /objednavka (body.foxplus) a bez .datepicker,
      tam ma vzhled na starosti objednavkova vrstva a kalendar enginu.
      content2024.css ma padding 28px 31px !important, pole meri 74 px.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not(.datepicker),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) select,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) textarea {
  box-sizing: border-box;
  min-height: var(--zs-vyska-pole);
  height: var(--zs-vyska-pole);
  padding: 0 var(--zs-odstup-base) !important;
  font-family: var(--zs-pismo);
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.4;
  color: var(--zs-barva-text-zakladni);
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-pole) !important;
  border-radius: var(--zs-radius-male);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) textarea {
  height: auto;
  min-height: 120px;
  padding: var(--zs-odstup-md) var(--zs-odstup-base) !important;
  line-height: 1.55;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not(.datepicker):focus,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) select:focus,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) textarea:focus {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 1px;
  border-color: var(--zs-barva-ramecek-doporucena) !important;
  color: var(--zs-barva-text-zakladni) !important;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) ::placeholder {
  color: var(--zs-barva-text-popisek);
  opacity: 1;
}

/* ---------------------------------------------------------------
   7. Drobecky jako .zs-popisek
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) ul.breadcrumbC,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .breadcrumb,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .drobecky {
  margin: 0;
  padding: var(--zs-odstup-base) 0;
  font-family: var(--zs-pismo);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) ul.breadcrumbC li,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .breadcrumb li,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .drobecky li {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) ul.breadcrumbC a,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) ul.breadcrumbC a > span,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) ul.breadcrumbC li > span,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .breadcrumb a {
  color: var(--zs-barva-text-popisek);
  text-decoration: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) ul.breadcrumbC a:hover > span {
  color: var(--zs-barva-text-nadpis);
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   8. Bocni panel a spodni lista. Jen barvy a pismo, zadne position ani width.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 {
  font-family: var(--zs-pismo);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--zs-barva-text-zakladni);
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 > div,
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 > div.blank .modblank {
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 div.vnor {
  padding: var(--zs-odstup-xl);
  font-size: 16px;
  line-height: 1.55;
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 h2,
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 h3 {
  padding: 0 0 var(--zs-odstup-md);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--zs-barva-text-nadpis);
}
/* zluta krabicka objednavky v bocnim panelu (/jidelnicek, /program-pro-zdravi)
   je jedina zluta plocha, ktera v novem designu nema partu. Svetle zeleny podklad
   a limetkove tlacitko uvnitr. */
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 .objednat {
  background: var(--zs-barva-pozadi-sekce);
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 a {
  color: var(--zs-barva-text-odkaz);
}

/* Tlacitko v bocnim panelu se kreslilo tenci nez vsechna ostatni primarni
   tlacitka na webu, 400 misto 600. Duvod neni v nasem CSS: template2024.css ma
   pravidlo #obsah #sidebar_float a { font-weight: inherit }, ktere ma dve id,
   kdezto nase pravidlo na a.button_hlavni jen jedno. Pri shode v poctu id
   rozhoduje az pocet trid, takze legacy pravidlo vyhraje a tlacitko zdedi 400
   z obalu .sidebar2. Resi se stejnym poctem id, ne vykricnikem.
   Zmereno 26. 8. 2026 na /programy-a-priprava/program-pro-zdravi. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah #sidebar_float a.button_hlavni {
  font-weight: 600;
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 li {
  background-image: none;
  font-size: 16px;
  line-height: 1.55;
}

/* 2026-08-29: stylovani #respofix odsud zmizelo. Lista se od te doby
   nezobrazuje, vypina ji novy-2026.css (sekce KONTRAKT DNA OBRAZOVKY).
   Duvod vypnuti: kreslila na 59 strankach sest legacy odkazu pres novy design,
   dva z nich na tentyz cil a dva na legacy URL. Kdyby se lista nekdy vracela,
   pravidla jsou v zaloze 60-zaklad.css.pred-spodek. */

/* ---------------------------------------------------------------
   9. Strankovani a hlavicka vypisu
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pagination {
  margin: var(--zs-odstup-2xl) 0 0;
  font-family: var(--zs-pismo);
  font-size: 16px;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pagination li {
  background-image: none;
}
/* strankovani je flex nowrap a na 390 px vylezlo na 608 px (mereno 25. 8.),
   proto se na mobilu zalamuje a ma mensi odsazeni */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) ul.pagination {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--zs-odstup-sm);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pagination a,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pagination span {
  padding: var(--zs-odstup-xs) var(--zs-odstup-sm);
  border-radius: var(--zs-radius-male);
  color: var(--zs-barva-text-nadpis);
  text-decoration: none;
}
@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pagination a,
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pagination span {
    padding: var(--zs-odstup-sm) var(--zs-odstup-md);
  }
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pagination a:hover {
  background: var(--zs-barva-pozadi-sekce);
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .page-header {
  padding: 0;
  margin: 0 0 var(--zs-odstup-base);
}

/* ---------------------------------------------------------------
   10. Mobil. Vse vyse plati i na 390, tady jen to, co se lisi.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) img,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) iframe {
  max-width: 100%;
}

/* ---------------------------------------------------------------
   Doplneno 02:50 (nalez Stavitele A): text v pasech .pas dedil 14 px a vahu 300 z body.
   Stranky, ktere stavitele A a B resili, to maji prebite ve svych partialech;
   tohle je zachrana pro pasy, na ktere nikdo nesahal. Nizka specificita, partialy vyhravaji.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas p,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas li,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas td,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

/* ---------------------------------------------------------------
   Doplneno 03:00 (QA vlna 1, nalez 1): div.podtisk na strankach programu
   (position: absolute, z-index 1, top -116px) prekryval pravou cast nove hlavicky
   (telefon useknuty, tlacitko Objednat jako prouzek), 23 z 24 programovych stranek.
   Hlavicka dostava vlastni vrstvu nad obsahem. Pod z-indexem sticky listy (60).
   --------------------------------------------------------------- */
.zs26 .zs-hlavicka { position: relative; z-index: 50; }

/* ===== css-obsah/61-cenik.css ===== */
/* 61-cenik.css
   Co to je: skin ceniku. Stranky /cenik, /cenik?typ=26, /cenik?typ=82 a kazdy dalsi typ
   (obsah tabulky se doplnuje AJAXem, HTML je vzdy stejne). Stavitel A, noc 25. 8. 2026.
   Navazuje na 60-zaklad.css, nic z nej neopakuje, jen doplnuje, co je na ceniku navic.

   Scope je stejny jako v zakladu: body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26).
   Bocni panel je adresovan pres #sidebar_float, protoze lezi uvnitr .main_limit.obsah.

   Co je na strance (mereno 25. 8. v headless Chromu na portu 9301, ne odhad):
   - .pas.m110.pozadi2.bezodsazeni > .main_limit > ul.breadcrumbC + .program_head (h1, h4)
     + .s_outer > .s_inner.myDraggable.cenik_nabidka_okolo > .cenik_nabidka
     > div.jidelnicek.aN.bNN (120 x 110, box-sizing border-box) > .jidelnicek_ic.jidelnicekNN > h6
     Aktivni kartu znaci trida `act` na .jidelnicek, ne `vybrany`.
     Stitek Obliby je .stitky > p > strong, absolutne nad kartou (proto ma karta margin-top 60).
   - #clanek > #cenik > h2 + .jidelnicek_den.color3.tabulka_cenik > .c_outer > .c_inner.myDraggable
     > table.jidelnicky_tab.cenik_tab: tr.linka_pod s th.zahlavi/th.mez/th.chod,
     pak 10x tr.linky s td.zahlavi (inline style border 0 a text-align left), td.mez, td.chod > a
   - #cenik > .moduletable > ul (poznamky pod tabulkou), .inpas_okolo > .inpas_obsah
     + .inpas.inpas_objednat (kremovy pas pres celou sirku, vzhled uz resi zaklad)
   - .slevyproverneklienty_celek > .slevyproverneklienty_grid(.hlavicka)
     > .rukasrdce > .bublN (PNG bublina) + .faj1 / .faj2 (plocha s PNG ikonou vlevo)
   - #sidebar_float > .m111 > h4 + .vnor > ul + .ic_div.ic_tel + .ic_div.ic_mail
   - .pas.m226.pozadi1 (Dodani jidel, dva sloupce .sloupce2), typografii uz resi zaklad

   Co prebiji z legacy (radky mereny v stazenych souborech 25. 8.):
   - template2024.css 648 a 667 az 675: .cenik_nabidka .jidelnicek ramecek limetka, radius 15
   - template2024.css 688: .cenik_nabidka .jidelnicek:hover { background: limetka }
   - template2024.css 704: .cenik_nabidka .jidelnicek.act { background: limetka }
   - content2024.css 527: .jidelnicek_ic.act / .klik { background-color: limetka }
   - content2024.css 451: .stitky p strong { background: zluta; color: bila } (bila na zlute)
   - template2024.css 622: .jidelnicek_den { border: 1px limetka; radius 15 }
   - content2024.css 85 az 100: .jidelnicky_tab pismo 15 px, radky 2px dotted, mez 10 px
   - content2024.css 156 az 158, 177: .slevyproverneklienty radky 2px dotted, .fajN radius 7

   Zamerne nehotove a proc:
   - Sipky karuselu .kolsipka jsou PNG (kolosipka_L.png / kolsipka_L.png), ne kreslene CSS.
     Prebarvit je bez filtru nejde a filtr na obrazek je hack, ktery by se pri kazde zmene
     obrazku rozbil. Zustavaji, jak jsou (limetkove kolecko, sedi do palety). Pozice ani
     opacity se nesmi menit (kontrakt bod 3), takze ani margin karet: sipka ma top 88 px
     a stred karty je na 115 px, s jinym margin-top by se rozesla.
   - Nejlevnejsi ani doporucena varianta se v tabulce nezvyraznuje: legacy ji nicim neznaci
     (bunky maji jen kod chodu, tridy kod_CD, kod_CD-Sn a dalsi). Zvyraznit ji by znamenalo
     dopsat tridu do HTML, coz kontrakt zakazuje. Vyzaduje HTML / Mojmira.
   - Vnitrni pas .inpas.inpas_objednat zustava kremovy ze zakladu. Tmavy pas by sel udelat
     (plocha je .inpas_objednat, text je v sesterskem .inpas_obsah), ale na ceniku by to byl
     treti vyrazny prvek nad sebou vedle karuselu a tabulky. Kremova plocha oddeluje stejne
     dobre a limetkove tlacitko na ni ma kontrast 7:1.
   - h2 "Cenik programu ..." je na stred inline stylem z clanku, ne ze sablony. Necham,
     stejne jako to udelal Stavitel 0 na /obchodni-podminky.
   - .program_head je i na detailu programu (.pas.m138). Je tady jen jednou, at se pravidla
     nedubluji mezi partialy 61 a 63.
   - Bubliny slev .bublN jsou PNG s textem uvnitr (95 x 95). Meni se jen pismo, ne velikost,
     jinak by text z bubliny vypadl.
*/

/* ---------------------------------------------------------------
   1. Hlavicka pasu: h1 uz ma zaklad, h4 je perex, ne nadpis.
      Plati i pro detail programu (.pas.m138 > .program_head).
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit .program_head h4,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .program_head h4 {
  margin: 0;
  padding: 0;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--zs-barva-text-tlumeny);
}

/* pas s karuselem nema odsazeni zdola (bezodsazeni), karty by se dotykaly hrany */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m110 > .main_limit,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m387 > .main_limit,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m386 > .main_limit{
  padding-bottom: var(--zs-odstup-xl);
}

/* ---------------------------------------------------------------
   2. Karusel programu. Karty jako .zs-karta na homepage: bila plocha,
      tenky neutralni ramecek, radius 16. Vybrana (trida act) svetle limetkova
      plocha a 2px ramecek --zs-barva-ramecek-doporucena, jako .zs-karta--doporucena.
      Sirka, vyska, pozice, overflow ani margin se nemeni, karusel se dal posouva.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .cenik_nabidka .jidelnicek {
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .cenik_nabidka .jidelnicek:hover {
  background: var(--zs-barva-pozadi-sekce);
  border-color: var(--zs-barva-ramecek-doporucena);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .cenik_nabidka .jidelnicek.act {
  background: var(--zs-barva-akcent-limetka-plo);
  border: 2px solid var(--zs-barva-ramecek-doporucena);
}
/* vnitrni vrstva s ikonou ma pri kliku svoji limetku, at prosvita plocha karty */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .cenik_nabidka .jidelnicek .jidelnicek_ic.act,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .cenik_nabidka .jidelnicek .jidelnicek_ic.klik {
  background-color: transparent;
}
/* nazev programu na karte. 12,6 px z legacy je popisek, ne nazev. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .cenik_nabidka .jidelnicek h6 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--zs-barva-text-nadpis);
}

/* stitek Obliby: bila na zlute z legacy ma kontrast 1,8:1, text patri tmave zeleny */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .cenik_nabidka .stitky p strong {
  background: var(--zs-barva-akcent-zluta);
  color: var(--zs-barva-text-nadpis);
  border-radius: var(--zs-radius-male);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------
   3. Tabulka cen. Obal dostane vzhled karty, hlavicka svetle zelenou plochu,
      radky zebru a tenkou linku, ceny tabularni cislice na jeden radek.
      Na .c_outer ani .c_inner.myDraggable se nesaha, posouvani je JS enginu.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #cenik .jidelnicek_den.tabulka_cenik {
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab {
  font-family: var(--zs-pismo);
  font-size: 16px;
  line-height: 1.4;
  color: var(--zs-barva-text-zakladni);
}
/* Sirka sloupce s cenou. Legacy ma 8em (template2024.css 784), coz je pri pismu 16 px
   128 px na sloupec. Osm sloupcu se pak pere o 713 px, ktere clanek s bocnim panelem ma,
   a slozka nazvu radku spadne na 96 px, kde se "bez snidane" laame na tri radky.
   4,6em je presne na cenu se ctyrmi znaky a mezerou, nazvy radku pak vyjdou na dva radky
   a tabulka je o 60 px nizsi nez pred zasahem (mereno 25. 8. na 1440 px). */
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab .chod {
  width: 4.6em;
}
/* zahlavi sloupcu */
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab th.chod {
  padding: var(--zs-odstup-md) var(--zs-odstup-sm);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--zs-barva-text-nadpis);
  background: var(--zs-barva-pozadi-sekce);
  vertical-align: bottom;
  border-bottom: 1px solid var(--zs-barva-ramecek-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab th.zahlavi {
  background: var(--zs-barva-pozadi-sekce);
  border-bottom: 1px solid var(--zs-barva-ramecek-karta);
}
/* zahlavi radku: nazev kombinace chodu */
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab td.zahlavi {
  padding: var(--zs-odstup-sm) var(--zs-odstup-md);
  background: var(--zs-barva-pozadi-sekce);
  color: var(--zs-barva-text-nadpis);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
/* Bunka s cenou ma padding 0 (template2024.css 786), odsazeni nese odkaz uvnitr,
   ktery je block a vyplnuje celou bunku. Kdyz se padding prida i bunce, secte se
   a radek naroste na 98 px misto 62. Odsazeni proto patri odkazu, ne bunce. */
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab td.chod {
  font-size: 16px;
  color: var(--zs-barva-text-zakladni);
  border-bottom: 1px solid var(--zs-barva-ramecek-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab td.chod a {
  padding: var(--zs-odstup-md) var(--zs-odstup-sm) !important;
  font-size: 16px;
  font-weight: 500 !important;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab tr.linky td.mez {
  border-bottom: 1px solid var(--zs-barva-ramecek-karta);
}
/* zebra: liche datove radky (prvni tr je zahlavi, proto sude nth-of-type) */
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab tr.linky:nth-of-type(even) td.chod,
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab tr.linky:nth-of-type(even) td.mez {
  background: var(--zs-barva-pozadi-jemne);
}
/* posledni radek uz linku dole nepotrebuje, ma ji obal */
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab tr.linky:last-child td {
  border-bottom: 0;
}

/* ---------------------------------------------------------------
   4. Poznamky pod tabulkou (.moduletable) a vnitrni pas objednat.
      Plocha pasu uz je kremova ze zakladu, tady jen pismo.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #cenik .moduletable ul > li {
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}
body:has(.zs26-hlavicka):not(.foxplus) #cenik .inpas_obsah p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}

/* ---------------------------------------------------------------
   5. Vernostni slevy. Radky misto teckovanych linek tenkou linku,
      plochy .faj1 a .faj2 zustavaji (jsou uz v barvach tokenu), meni se
      jen radius a pismo. Ikony v plose jsou background-image, proto se
      prepisuje jen background-color, ne cely background.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .slevyproverneklienty_grid {
  border-top: 1px solid var(--zs-barva-ramecek-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .slevyproverneklienty_grid.hlavicka > div {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .slevyproverneklienty_celek .faj1,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .slevyproverneklienty_celek .faj2,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .slevyproverneklienty_celek .fajplus {
  border-radius: var(--zs-radius-male);
  font-size: 16px;
  line-height: 1.5;
  color: var(--zs-barva-text-zakladni);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .slevyproverneklienty_celek .faj1 {
  background-color: var(--zs-barva-pozadi-sekce);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .slevyproverneklienty_celek .faj2,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .slevyproverneklienty_celek .fajplus {
  background-color: var(--zs-barva-pozadi-sekce-2);
}
/* text v PNG bubline: velikost zustava, jinak z bubliny vypadne */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .rukasrdce strong {
  font-family: var(--zs-pismo);
  font-weight: 700;
  color: var(--zs-barva-text-nadpis);
}

/* ---------------------------------------------------------------
   6. Bocni panel. Kartu uz kresli zaklad, tady jen hlavicka karty,
      aby jeji plocha nevyckuhovala z 16px zaobleni karty.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 .m111 > h4,
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 .m518 > h4,
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 .m515 > h4{
  margin: 0;
  padding: var(--zs-odstup-lg);
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--zs-barva-text-nadpis);
  background: var(--zs-barva-pozadi-sekce);
  border-radius: var(--zs-radius-karta) var(--zs-radius-karta) 0 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 .ic_div {
  margin: 0 0 var(--zs-odstup-base);
  font-size: 16px;
  line-height: 1.55;
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 .ic_div p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 .ic_div a {
  color: var(--zs-barva-text-odkaz);
  font-weight: 600;
  text-decoration: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float.sidebar2 .ic_div a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   7. Pas Dodani jidel (.pas.m226.pozadi1). Typografii resi zaklad,
      tady jen mezera mezi sloupci a odstup poslednim odstavcem.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m226 > .main_limit .sloupce2 > div,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m586 > .main_limit .sloupce2 > div,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m585 > .main_limit .sloupce2 > div{
  padding-right: var(--zs-odstup-2xl);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m226 > .main_limit > p,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m586 > .main_limit > p,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m585 > .main_limit > p{
  margin: var(--zs-odstup-xl) 0 0;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}

/* ---------------------------------------------------------------
   8. Mobil. Tabulka se na uzkem okne posouva tazenim (.c_inner.myDraggable),
      to je JS enginu a nechava se, jen bunky maji mensi bocni odsazeni,
      at se do posuvneho okna vejde vic sloupcu. Pismo zustava 16 px
      (kontrakt bod 8), zmensuje se odsazeni, ne text.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab td.chod a,
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab th.chod {
  padding-inline: var(--zs-odstup-xs) !important;
}
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab td.zahlavi {
  padding-inline: var(--zs-odstup-sm);
}

/* Oprava C (QA vlna 1, nalez C): sipky posuvne tabulky lezely pres ceny.
   Zmereno na /cenik pri 390 px: .c_outer.rolovat je 17 az 373, .c_inner ma z legacy
   margin-left 120 px (template2024.css 780) a bezel 137 az 373, tedy presne pod obema
   sipkami. .kolsipka je 33 x 67 px, absolutne k .c_outer (template2024.css 797),
   leva ma left 120 px (radek 808), prava right 0 (radek 805), obe top 124 px.
   Sedely tak pres radky Celodenni bez snidane (y 937 az 985) a bez obeda (y 985 az 1033),
   tedy pres ceny 428 Kc a 413 Kc a pres cely pravy sloupec.

   Sipka se hybat nesmi, .kolsipka je funkcni trida enginu (kontrakt bod 3), takze se
   nemeni ani top, ani left/right, ani transform. Misto toho se zuzi posuvne okno:
   padding-inline na obalu odsune .c_inner dovnitr, zatimco sipky zustanou, kde byly,
   protoze absolutni pozice se pocita z padding boxu, ktery se paddingem neposouva.
   Stejne tak zustanou na miste popisky radku (td.zahlavi maji position absolute, left 0).
   36 px je sirka sipky 33 px plus 3 px mezera.

   Trida `rolovat` je na .c_outer jen ve v3 (mobilni rezim, doplnuje ji JS), na 1440 px
   ji tam neni a sipky maji nulovy rozmer. Pravidlo proto plati samo jen na mobilu
   a zadny breakpoint nepotrebuje. Cena opravy: posuvne okno je 164 px misto 236,
   tedy asi o jeden sloupec cen min naraz. Tazeni i sipky funguji dal, tabulka
   ma porad scrollWidth 486. */
body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik .c_outer.rolovat {
  padding-inline: 36px;
}

@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab td.chod a,
  body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab th.chod {
    padding-inline: var(--zs-odstup-sm) !important;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #cenik .tabulka_cenik table.cenik_tab td.zahlavi {
    padding-inline: var(--zs-odstup-md);
  }
}


/* ---------------------------------------------------------------
   Rozklik ceniku na strance programu (31. 8. 2026)

   Marek nad tabulkou 10 radku krat 9 kalorickych rad: "tohle at na rozklik
   nejak dle best practice". Konfigurator nad ni uz cenu ukaze, tabulka je
   druha podoba tehoz a zabirala kolem 1 100 px.

   Nativni <details>, zadny JavaScript. Obsah zustava ve zdrojaku, takze
   vyhledavace ho vidi i zavreny; stejny vzor jako FAQ v modulu 904.
   Obal pise nasazeni/cenik-programu.py do obsahu modulu, uvnitr #cenik
   se nemeni nic.

   Plati jen na strance programu, ne na /cenik: tam je tabulka to hlavni,
   kvuli cemu clovek prisel. Rozlisuje to `#obsah > .pas:has(.zs-rozklik--cenik)`,
   protoze na /cenik zadny .zs-rozklik neni.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik--cenik {
  max-width: 1140px;
  margin: 0 auto;
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
}

/* Zahlavi je klikaci plocha, proto cela sirka a kurzor. Sipka je vlastni,
   nativni marker se lisi prohlizec od prohlizece a v Safari ho nejde
   spolehlive prebarvit. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik__zahlavi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--zs-odstup-lg) var(--zs-odstup-xl);
  padding-right: calc(var(--zs-odstup-xl) + 28px);
  position: relative;
  cursor: pointer;
  list-style: none;
  font-family: var(--zs-pismo);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik__zahlavi::-webkit-details-marker {
  display: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik__zahlavi::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--zs-odstup-xl);
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-right: 2px solid var(--zs-barva-text-nadpis);
  border-bottom: 2px solid var(--zs-barva-text-nadpis);
  transform: rotate(45deg);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik[open] > .zs-rozklik__zahlavi::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik__zahlavi:focus-visible {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: -2px;
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik__nadpis {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-nadpis);
}

/* Souhrn nese cislo, kvuli kteremu clovek rozklik otevira. Plni ho
   zs26-data.js z uz nacteneho ceniku, rukou se nepise: testovaci server
   nese starsi cenik nez produkce. Dokud nedojde, je prazdny a nic nedrzi. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik__souhrn:not(:empty) {
  font-size: 15px;
  line-height: 1.45;
  color: var(--zs-barva-text-tlumeny);
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik__telo {
  padding: 0 var(--zs-odstup-xl) var(--zs-odstup-xl);
}

/* Odkaz pod rozklikem. Do 31. 8. znel "zobrazit kompletni cenik" a stal
   tesne pod rozklikem, ktery ten cenik obsahuje, takze pusobil jako totez
   podruhe. Novy text rika, co je na cili navic. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik__pod {
  margin: var(--zs-odstup-lg) 0 0;
  text-align: center;
}

/* Nadpis uvnitr #cenik kresli engine a v rozkliku by byl podruhe.
   Skryva se jen tam, kde rozklik je, na /cenik zustava. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik--cenik #cenik > h2,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik--cenik #cenik > br {
  display: none;
}
/* Tabulka uvnitr rozkliku uz ma ramecek od rozkliku, druhy by byl videt
   jako dvojlinka. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik--cenik .jidelnicek_den.tabulka_cenik {
  border: 0;
  border-radius: 0;
}

@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-rozklik__zahlavi {
    flex-direction: row;
    align-items: baseline;
    gap: var(--zs-odstup-md);
  }
}

/* ===== css-obsah/62-jidelnicek.css ===== */
/* 62-jidelnicek.css
   Co to je: skin jidelnicku. Stranky /jidelnicek a /jidelnicek/<program>-<kJ>
   (a varianta -dalsi-tyden). Stavitel A, noc 25. 8. 2026. Navazuje na 60-zaklad.css.

   Struktura (mereno 25. 8. v headless Chromu na portu 9301, /jidelnicek):
   - .pas.m107.pozadi2.bezlimitu > .main_limit > div > .jidelnicky_outer
     > .jidelnicky_inner.myDraggable > .nastavTydenJidelnicek (span.alink(.act))
     + .clonaL/.clonaR + .kolsipka + .jidelnicky_okolo > .jidelnicky_nabidka
     > .skupina > h4 + .jidelnicky > .jidelnicek(.act)
       > a.program > .jidelnicek_ico.jidelnicek_ic.jidelnicekNN > h6
       + .programy > a.program(.act)  (dlazdice kJ, odkaz na variantu)
     a vedle .jidelnicky_doplnky
   - #clanek > h1 + .prepinactydnu (a.nastavScroll, aktivni ma .color6)
     + 5 x [ .relative > .jidelnicek_nadpis  +  .jidelnicek_den.color3.tabulka_jidelnicku
       > table.jidelnicky_tab > tr.linka_pod (th.hodnoty: Energie kJ, Bilkoviny g,
       Sacharidy g, Tuky g) + tr.linky (td.zahlavi_n, td.mez, td.nazevjidelnicku,
       4 x td.hodnoty) + tr.linka_nad.hodnoty_celkem ]
   - V tabulce **nejsou fotky jidel**, jen nazev chodu a tooltip se slozenim
     (span.jmeno.tooltiphover). Zadani mluvilo o zaoblenych fotkach, na teto sablone
     zadne nejsou, takze se nic takoveho nepridava (kontrakt bod 6).

   Co prebiji z legacy:
   - template2024.css 622: .jidelnicek_den ramecek 1px limetka, radius 15
   - content2024.css 524: .jidelnicky .jidelnicek.act plna limetka
   - content2024.css 529: .jidelnicek_ico ramecek limetka, bila plocha
   - content2024.css 642 a 643: .jidelnicek.act .programy .program bily ramecek a bily text,
     .program.act bila plocha s limetkovym textem (limetka na textu, kontrast 1,9:1)
   - content2024.css 85 az 100 a 108 az 116: .jidelnicky_tab pismo 15 px, teckovane linky
   - template2024.css 617: .jidelnicek_ic h6

   Zamerne nehotove a proc:
   - **Velikost dlazdic kJ (a.program) se nemeni.** Karta programu meri 120 px a dlazdice
     jsou dve na radek, tedy asi 50 px. Pri 16 px by se "10 000" na radek nevesle a karusel
     by se prerovnal. Legacy velikost tedy zustava a meni se jen barva: limetkovy text na
     bile ma kontrast 1,9:1 a nahrazuje ho tmave zelena. Zvetsit pismo jde az se zmenou
     rozvrzeni dlazdic, coz je **vec HTML a JS**, ne skinu.
   - Karusel .jidelnicky_inner.myDraggable a sipky .kolsipka se nechavaji, stejne jako
     na ceniku: sipky jsou PNG a pozice patri enginu.
   - Nadpis dne (.jidelnicek_nadpis) ma v obsahu male pismeno ("pondeli,"). Text se nemeni,
     jen rez a velikost.
*/

/* ---------------------------------------------------------------
   1. Prepinac tydne. Dve podoby na jedne strance:
      v pasu jako span.alink (JS prepinac), v clanku jako a.nastavScroll (odkaz).
      Obe jako obrysove tlacitko, aktivni ma svetle zelenou plochu a tmavy ramecek.
      Primarni (limetkove) byt nesmi, do objednavky nevede (kontrakt bod 9).
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .nastavTydenJidelnicek .alink,
body:has(.zs26-hlavicka):not(.foxplus) #clanek .prepinactydnu a.nastavScroll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--zs-vyska-tlacitko-male);
  margin-right: var(--zs-odstup-md);
  padding: 0 var(--zs-odstup-lg);
  border: 2px solid var(--zs-barva-akce-sekundarni-ramecek);
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-pozadi-karta);
  color: var(--zs-barva-text-nadpis);
  font-family: var(--zs-pismo);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .nastavTydenJidelnicek .alink:hover,
body:has(.zs26-hlavicka):not(.foxplus) #clanek .prepinactydnu a.nastavScroll:hover {
  background: var(--zs-barva-akce-sekundarni-hover);
  color: var(--zs-barva-text-nadpis);
  text-decoration: none;
}
/* aktivni tyden: jen plocha a barva, zadne rozvrzeni (trida act je funkcni) */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .nastavTydenJidelnicek .alink.act,
body:has(.zs26-hlavicka):not(.foxplus) #clanek .prepinactydnu a.color6 {
  background: var(--zs-barva-pozadi-sekce);
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek .prepinactydnu {
  padding: 0 0 var(--zs-odstup-2xl);
}

/* ---------------------------------------------------------------
   2. Vyber programu v pasu (.pas.m107). Karta jako na homepage.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .jidelnicky_nabidka h4,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .jidelnicky_doplnky h4 {
  margin: 0;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .jidelnicky .jidelnicek {
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .jidelnicky .jidelnicek:hover {
  border-color: var(--zs-barva-ramecek-doporucena);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .jidelnicky .jidelnicek.act {
  background: var(--zs-barva-akcent-limetka-plo);
  border: 2px solid var(--zs-barva-ramecek-doporucena);
}
/* ikona programu uvnitr karty: plochu i ramecek uz ma karta */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .jidelnicek .jidelnicek_ico {
  background-color: transparent;
  border-color: transparent;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .jidelnicek a.program:hover .jidelnicek_ico {
  background-color: transparent;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .jidelnicek .jidelnicek_ico h6 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--zs-barva-text-nadpis);
}
/* dlazdice kJ. Velikost pisma zustava z legacy, viz hlavicka souboru.
   Meni se barva: limetkovy text na bile ma kontrast 1,9:1. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .jidelnicek .programy a.program {
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-pill);
  color: var(--zs-barva-text-nadpis);
  font-weight: 600;
  text-decoration: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .jidelnicek .programy a.program:hover {
  background: var(--zs-barva-pozadi-sekce);
  border-color: var(--zs-barva-ramecek-doporucena);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .jidelnicek .programy a.program.act {
  background: var(--zs-barva-akce-primarni);
  border-color: var(--zs-barva-akce-primarni);
  color: var(--zs-barva-akce-primarni-text);
}
/* uvnitr vybrane karty ma legacy bily ramecek a bily text, na svetle limetce neviditelne */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .jidelnicek.act .programy a.program {
  background: var(--zs-barva-pozadi-karta);
  border-color: var(--zs-barva-ramecek-karta);
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .jidelnicek.act .programy a.program.act {
  background: var(--zs-barva-akce-primarni);
  border-color: var(--zs-barva-akce-primarni);
  color: var(--zs-barva-akce-primarni-text);
}

/* ---------------------------------------------------------------
   3. Nadpis dne
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #clanek .jidelnicek_nadpis {
  font-family: var(--zs-pismo);
  font-size: 17.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek .jidelnicek_nadpis strong {
  font-weight: 700;
}

/* ---------------------------------------------------------------
   4. Tabulka dne. Obal jako karta, zahlavi svetle zelene, radky s linkou,
      cisla tabularni. Sirka sloupcu se nemeni: tabulka stoji v clanku,
      ktery je pri zapnutem bocnim panelu siroky 755 px, a kazde rozsireni
      obsahu roztahne mrizku a vytlaci panel z obalu (mereno na ceniku).
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #clanek .jidelnicek_den.tabulka_jidelnicku {
  margin: 0 0 var(--zs-odstup-2xl);
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek .tabulka_jidelnicku table.jidelnicky_tab {
  font-family: var(--zs-pismo);
  font-size: 16px;
  line-height: 1.4;
  color: var(--zs-barva-text-zakladni);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek .tabulka_jidelnicku table.jidelnicky_tab th.hodnoty {
  padding: var(--zs-odstup-md) var(--zs-odstup-sm);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--zs-barva-text-popisek);
  vertical-align: bottom;
  border-bottom: 1px solid var(--zs-barva-ramecek-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek .tabulka_jidelnicku table.jidelnicky_tab td.zahlavi_n {
  padding: var(--zs-odstup-md) var(--zs-odstup-sm);
  background: var(--zs-barva-pozadi-sekce);
  color: var(--zs-barva-text-nadpis);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek .tabulka_jidelnicku table.jidelnicky_tab td.nazevjidelnicku {
  padding: var(--zs-odstup-md);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--zs-barva-text-zakladni);
  border-bottom: 1px solid var(--zs-barva-ramecek-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek .tabulka_jidelnicku table.jidelnicky_tab td.hodnoty {
  padding: var(--zs-odstup-md) var(--zs-odstup-sm);
  font-size: 16px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--zs-barva-text-tlumeny);
  border-bottom: 1px solid var(--zs-barva-ramecek-karta);
}
/* soucet za den */
body:has(.zs26-hlavicka):not(.foxplus) #clanek .tabulka_jidelnicku table.jidelnicky_tab tr.hodnoty_celkem td {
  padding-top: var(--zs-odstup-md);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--zs-barva-text-nadpis);
  border-top: 1px solid var(--zs-barva-ramecek-karta);
  border-bottom: 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek .tabulka_jidelnicku table.jidelnicky_tab tr.linky:last-of-type td {
  border-bottom: 0;
}
/* ikonka slozeni jidla, jen barva */
body:has(.zs26-hlavicka):not(.foxplus) #clanek .tabulka_jidelnicku .jmeno {
  color: var(--zs-barva-text-popisek);
}

/* ---------------------------------------------------------------
   5. Mobil. Na uzkem okne engine schova sloupce s hodnotami
      (.hodnoty display none) a misto nich ukaze .hodnoty_celkem_respo.
      To je jeho vec, tady jen pismo te mrizky.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #clanek .tabulka_jidelnicku .hodnoty_celkem_respo div {
  font-size: 16px;
  line-height: 1.4;
  color: var(--zs-barva-text-tlumeny);
  font-variant-numeric: tabular-nums;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek .tabulka_jidelnicku .hodnoty_celkem_respo strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--zs-barva-text-nadpis);
}


/* Doplneno 25. 8. 2026 rano (Marek: "divne zalomene nadpisy"): nadpis detailu jidelnicku
   "Jidelnicek programu PRO ZDRAVI 5 000 kJ" se na 755 px lamal uprostred cisla. Mensi pismo
   a vyvazene zalomeni (text-wrap: balance), cislo drzi pohromade.

   Zuzeno 25. 8. odpoledne. Puvodni selektor trefoval KAZDY #clanek h1 na webu, tedy
   i nadpisy sedmi rozcestniku ZS26, ktere Joomla vykresluje uvnitr obalu clanku.
   Mereno: /hubnu, /programy, /program-na-miru i /nutricni-poradenstvi-2026 mely 36 px
   misto 44 px z tokenu .zs-h1-podstranka. Trida .tabulka_jidelnicku je jen na
   /jidelnicek a /jidelnicek/<program>, jinde nikde (overeno na 6 strankach). */
body:has(.zs26-hlavicka):not(.foxplus) #clanek:has(.tabulka_jidelnicku) h1 {
  font-size: clamp(28px, 2.5vw, 36px);
  text-wrap: balance;
}

/* ===== css-obsah/63-programy.css ===== */
/* 63-programy.css
   Co to je: skin prehledu programu a detailu programu. Stranky /programy-a-priprava
   a /programy-a-priprava/program-* (pro-zdravi, keto, menicko a dalsi, HTML je stejne).
   Stavitel A, noc 25. 8. 2026. Navazuje na 60-zaklad.css.

   Struktura (mereno 25. 8. v headless Chromu na portu 9301):
   - Detail: .pas.m138.pozadi2.bezlimitu > .program_head > .main_limit
     > .flex-space-between-center-nowrap > [.flex-flex-start-center-nowrap > .obr + .pretext
     (h1.hlavni > span.p + strong, h4)] + [.text (p + .ukaz_v3 s tlacitkem)]
     .pas.m139.pozadi1 > .main_limit > .limit1 > h2 + p + N x .varianty_celek
     (> .varianty_nadpis + .varianty(.chody|.doplnky|.varianty_kalorie) > div(.ne))
     .pas.m141.pozadi3.objednat (tmavy pas s limetkovym tlacitkem, resi zaklad)
     .pas.m142 > .main_limit > .limit1 > h2 + .program-grid
     .pas.m136.bezlimitu > .pozadi-flexi.priprava-jidel
   - Prehled: .pas.m279.pozadi2.bezodsazeni (drobecky, .program_head, karusel .cenik_nabidka,
     ten uz resi 61-cenik.css), pak #clanek > .stranka_programy > ... > ul.uk-accordion
     > li > a.uk-accordion-title + .uk-accordion-content > .uk-margin > .program-grid
   - .pas.m134 a .pas.m135 na prehledu **nejsou primi potomci #obsah**, lezi v `#obsah > strong`
     (rozbite HTML z modulu). Proto na ne pravidla zakladu psana pres `#obsah > .pas`
     nedosahnou: m134 mela odsazeni 60/35 z legacy a h2 23,6 px misto 36. Adresuji je
     zvlast pres `#obsah > :not(.zs26) .pas.m134`. **Vyzaduje HTML / Mojmira**, spravne
     reseni je vyhodit ten `strong` z modulu, ne obchazet ho v CSS.

   Co prebiji z legacy:
   - content2024.css 22 a 23: h1.hlavni, h1.hlavni strong limetkove 36 az 50 px
   - content2024.css 431 az 445: .ikona plocha, radius 7, h3 uvnitr
   - content2024.css 561 az 573: .program-grid grid-template-rows 120px 120px
   - content2024.css 762 az 765: .varianty > div plocha, ramecek limetka, radius 5
   - content2024.css 687 az 699: .tab_srovnavaci radky 2px teckovane, zahlavi
   - uikit: a.uk-accordion-title limetkova plocha s limetkovym podtrzenym textem

   Dve chyby zakladu, ktere se ukazaly az tady (hlaseno orchestratorovi, doresit v 60-zaklad):
   1. `#obsah > :not(.zs26) h1.hlavni { font: inherit }` v zakladu (pravidlo proti limetce
      v nadpisu) srazi hlavni nadpis detailu programu na 14 px a vahu 300. Zaklad ho mysli
      jako `h1 strong`, ale `h1.hlavni` je cely nadpis, ne jen zvyrazneni v nem. Tady se
      vraci zpatky na velikost nadpisu podstranky.
   2. Zaklad styluje `p` jen v obsahu clanku (`#clanek p`, `.main_limit.obsah p`), ne
      v pasech. Odstavce v pasech proto zustaly na 14 px a vaze 300, coz je proti kontraktu
      bod 8. Tady se doplnuji pro vsechny pasy, at to plati i na strankach Stavitele B.

   Zamerne nehotove a proc:
   - Prehled programu je uikit accordion (`ul.uk-accordion`), ne mrizka karet. Prepsat ho
     na karty by znamenalo sahnout na HTML nebo na JS uikitu. Meni se jen vzhled zalozky:
     misto limetkove plochy s limetkovym podtrzenym textem svetle zelena plocha s tmave
     zelenym nadpisem, otevrena polozka ma tmavy ramecek.
   - Srovnavaci tabulka .tab_srovnavaci se posouva tazenim v .c_outer.rolovat. Sirku
     sloupcu nemenim: tabulka uz je sirsi nez obal (1275 proti 950) a posuv je zamer.
   - Ikony programu (.ikona img) jsou dve prekryte PNG s absolutni pozici. Nesahaji se,
     jen obal dostane zaobleni a ramecek.
*/

/* ---------------------------------------------------------------
   1. Doplneni zakladu pro obsah pasu (viz hlavicka souboru, bod 2)
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas p,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pas p {
  margin: 0 0 var(--zs-odstup-base);
  padding: 0;
  font-family: var(--zs-pismo);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}
/* Polozky seznamu v pasu. Zaklad jim dava velikost a odrazku, ale ne vahu, takze
   dedily 300 z `body` (template2024.css 13). Mereno na /cenik, pas m226: sest polozek
   se ctenym textem ve vaze 300, coz je proti kontraktu bod 8. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas li,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pas li {
  font-family: var(--zs-pismo);
  font-weight: 400;
}
/* odkaz v textu pasu: legacy ma limetku, ktera ma na bile kontrast pod 3:1 */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas a:not([class]),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pas a:not([class]) {
  color: var(--zs-barva-text-odkaz);
  text-decoration: underline;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi3 a:not([class]) {
  color: var(--zs-barva-text-na-tmavem);
}
/* delici linka v pasu, stejne jako v clanku */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas hr,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pas hr {
  height: 1px;
  margin: var(--zs-odstup-xl) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--zs-barva-ramecek-karta);
}
/* stitek nad kartou programu: bila na zlute ma kontrast 1,8:1 */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .stitky p strong {
  background: var(--zs-barva-akcent-zluta);
  color: var(--zs-barva-text-nadpis);
  border-radius: var(--zs-radius-male);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------
   2. Hlavicka detailu programu (.pas.m138 > .program_head)
   --------------------------------------------------------------- */
/* Svisly rytmus hlavicky, 44 px na mobilu a 64 px od 700 px. Mereno
   31. 8. 2026 na /programy-a-priprava/program-pro-zdravi: nahore drzel odstup
   padding drobeckove listy (16 px) a dole .program_head (0 px na mobilu,
   40 px na desktopu), takze se obsah na mobilu dotykal spodni hrany pasu.
   Sjednoceno se .zs-sekce v novy-2026.css a se starymi hlavickami v 70-clanky.
   Meni se jen vnejsi mez, vnitrni mezera mezi drobecky a nadpisem zustava.

   Selektor je :has(> .program_head), ne .m138: modul ma na kazde z patnacti
   stranek jine cislo (m539 na Protein +, m816 na Diabetikovi). */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas:has(> .program_head) > .main_limit ul.breadcrumbC {
  padding-top: var(--zs-odstup-sekce-mobil);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas:has(> .program_head) > .program_head {
  padding-bottom: var(--zs-odstup-sekce-mobil);
}

@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas:has(> .program_head) > .main_limit ul.breadcrumbC {
    padding-top: var(--zs-odstup-sekce);
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas:has(> .program_head) > .program_head {
    padding-bottom: var(--zs-odstup-sekce);
  }
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head h1.hlavni {
  margin: 0;
  padding: 0 0 var(--zs-odstup-sm);
  font-family: var(--zs-pismo);
  font-size: clamp(34px, 3.3vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--zs-barva-text-nadpis);
}
/* "Program krabickove diety:" je popisek nad nazvem, ne cast nazvu */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head h1.hlavni > span.p {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--zs-barva-text-tlumeny);
}
/* svisla linka u perexu vpravo, legacy limetka -> limetka z tokenu */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .text {
  border-left-color: var(--zs-barva-akce-primarni);
}

/* Meta radek a akce v hlavicce programu, doplnene 27. 8. 2026.
   Proc: hlavicka nemela na desktopu viditelne tlacitko vubec. Jedine tlacitko
   uvnitr .program_head bylo v obalu .ukaz_v3, a ten ma v template2024.css
   r. 789 display:none; zobrazi se jen pri body_v3, tedy na mobilu. Obal se
   zrusil, tlacitko je videt vsude a je prave jedno, jak chce
   Studio/Inspirace/Hlavicka podstranky je pulka sirky a jedno tlacitko.
   Cena v meta radku se plni zivě z ceniku pres [data-zs-cena], nikdy se nepise
   rukou: testovaci server nese starsi cenik nez produkce. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .meta_programu {
  margin: var(--zs-odstup-lg) 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--zs-barva-text-tlumeny);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .meta_programu [data-zs-cena] {
  font-weight: 700;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .akce_programu {
  margin: var(--zs-odstup-lg) 0 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .akce_programu_pod {
  margin: var(--zs-odstup-sm) 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--zs-barva-text-tlumeny);
}

/* Veta s dukazem pod podtitulkem (31. 8. 2026).
   Marek nad hlavickou PROTEIN +: "v jednoduchosti je krasa", s predlohou
   Popapej. Zmereno tyz den na peti konkurencnich detailech programu na 1440 px:
   pod nazvem stoji u Popapeje hodnoceni 4,9, u ntfy a Pomeloboxu cena.
   Hvezdicky dat nemuzeme (Google 3,8/5 ze 407), cenu uz nese pas stitku,
   takze tam jde jmeno nutricni specialistky.

   Neni to tlumeny text jako termin zavozu, ktery tady do 31. 8. stal.
   Je to dukaz a ma se cist, proto plna barva textu a vaha 500.
   Na tmave hlavicce ji prebarvuje sekce 2c spolu s ostatnimi odstavci. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-hero-dukaz {
  margin: var(--zs-odstup-lg) 0 0;
  max-width: 42ch;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

/* ---------------------------------------------------------------
   2c. Tmava hlavicka detailu programu (30. 8. 2026)

   Marek: "nahore to ma byt opet tmave zelenou". Totez rozhodnuti uz padlo
   na rozcestnicich, viz css-partials/40-rozcestnik.css: "hlavicku bych tmave
   zelenou, jak to mame na hlavni strance". Detail programu byl posledni typ
   stranky, kde hlavicka zustala svetle zelena.

   Scope. Tridu pozadi2 nese i katalog programu (.pas.m279.pozadi2.bezodsazeni)
   a hlavicka ceniku (.pas.m110.pozadi2), ty tmave byt nemaji. Rozlisovacim
   znakem je hero fotka, kterou do hlavicky vklada jen
   nasazeni/hlavicka-programu.py, takze vse visi na
   `.pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp))`. Programy bez fotky zustavaji svetle.

   Prebiji se pravidlo ze 60-zaklad.css r. 108. Specificita staci a
   !important tu neni potreba: zaklad ma 1 id a 2 tridy, tohle 1 id a 3 tridy.

   Tlacitko se nepresvetluje. `a.button_hlavni[href*="objednavka"]` ma
   v 60-zaklad.css r. 505 limetkovou plochu s tmavym textem a !important,
   takze na tmave plose zustava citelne. Pravidla nize proto adresuji
   jen nadpisy, odstavce a spany, nikdy `a`.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) {
  background: var(--zs-barva-pozadi-tmave);
  color: var(--zs-barva-text-na-tmavem);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) h1,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) h1 strong,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) h4,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) p,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) li,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) strong {
  color: var(--zs-barva-text-na-tmavem);
}
/* Popisek "Program krabickove diety:" nad nazvem a termin zavozu pod tlacitkem.
   Oboji je tlumeny text. Token --zs-barva-text-tlumeny dava proti
   --zs-barva-pozadi-tmave kontrast 1,61:1, tedy necitelne, je to barva
   na svetlou plochu. Bere se proto tyz token jako v paticce, ktery je na teze
   plose 8,17:1. Hlavni text je 11,15:1, limetkove tlacitko 7,0:1.
   Dopocteno 30. 8. 2026 skriptem podle WCAG 2.2. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) h1.hlavni > span.p,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) .akce_programu_pod,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) .meta_programu {
  color: var(--zs-barva-paticka-text-tlumeny);
}
/* Veta s dukazem se **netlumi**. Ostatni odstavce v hlavicce jsou doprovodne,
   tenhle je duvod, proc clovek zustane. Bere plnou barvu textu na tmavem. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) .zs26-hero-dukaz {
  color: var(--zs-barva-text-na-tmavem);
}
/* Drobecky. Zaklad je kresli v --zs-barva-text-popisek na svetlem pozadi,
   selektorem `#obsah > :not(.zs26) ul.breadcrumbC`. Ten ma stejnou specificitu
   jako pravidlo psane pres `.pas`, proto se sem pridava trida navic. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) ul.breadcrumbC,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) ul.breadcrumbC li,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) ul.breadcrumbC a,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) ul.breadcrumbC a > span,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) ul.breadcrumbC li > span {
  color: var(--zs-barva-paticka-text-tlumeny);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) ul.breadcrumbC a:hover > span {
  color: var(--zs-barva-text-na-tmavem);
}
/* Ikona domecku v drobeccich je SVG s fill z currentColor u vetsiny sablon,
   tady je to <img>. Na tmave plose se prevraci. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) ul.breadcrumbC img {
  filter: invert(1) brightness(1.6);
}
/* Fokusovy prstenec --zs-barva-stav-fokus ma na --zs-barva-pozadi-tmave
   kontrast 2,48:1, tedy pod hranici 3:1 pro netextovy prvek. Stejne reseni
   jako v heru homepage a na rozcestnicich: prstenec se prebarvuje. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-hero-foto):not(:has(.zs26-pdp)) :focus-visible {
  outline-color: var(--zs-barva-text-na-tmavem);
}

/* ---------------------------------------------------------------
   3. Mrizka variant (.varianty). Bunka je karta jako na homepage:
      bila plocha, neutralni ramecek, radius 8. Nedostupna varianta (.ne)
      svetla plocha bez ramecku a tlumeny text.
      Sirka, vyska ani grid-template se nemeni, to je rozvrzeni enginu.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .varianty > div {
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-male);
  color: var(--zs-barva-text-nadpis);
  font-weight: 600;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .varianty > div p {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .varianty > div.ne {
  background: var(--zs-barva-pozadi-jemne);
  border-color: transparent;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .varianty > div.ne p {
  color: var(--zs-barva-text-popisek);
  font-weight: 400;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .varianty > div.poznamka {
  background: none;
  border: 0;
  color: var(--zs-barva-text-tlumeny);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .varianty > div.poznamka p {
  font-size: 16px;
  font-weight: 400;
  color: var(--zs-barva-text-tlumeny);
  text-align: left;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .varianty > div img {
  border-radius: var(--zs-radius-male);
}
/* popisek skupiny variant vlevo */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .varianty_nadpis h4 {
  margin: 0;
  padding: 0 0 var(--zs-odstup-xs);
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .varianty_nadpis p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}

/* ---------------------------------------------------------------
   4. Radek programu (.program-grid). Legacy ma pevne radky 120 + 120 px
      a pri pismu 16 px se odstavec do 120 px nevejde: text pretekl pres
      tlacitka Podrobnosti a Objednat (mereno na /programy-a-priprava,
      odstavec 124 px konci 43 px pod hornim okrajem radku s tlacitky).
      Radky proto dostanou auto. Sloupce ani grid-area se nemeni.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .program-grid {
  grid-template-rows: auto auto;
  align-items: start;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .program-grid .grid-text {
  height: auto;
  padding-bottom: var(--zs-odstup-base);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .program-grid .grid-odkazy {
  height: auto;
  padding-top: var(--zs-odstup-sm);
  gap: var(--zs-odstup-base);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .program-grid .grid-text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.aktualnijidelnicek {
  color: var(--zs-barva-text-odkaz);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) a.aktualnijidelnicek:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   5. Dlazdice programu (.hp_program > a > .ikona). Karta jako na homepage.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .hp_program .ikona {
  background: var(--zs-barva-pozadi-sekce);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .hp_program a:hover .ikona {
  border-color: var(--zs-barva-ramecek-doporucena);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .hp_program .ikona h3 {
  margin: 0;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--zs-barva-text-nadpis);
}

/* ---------------------------------------------------------------
   6. Prehled programu: uikit accordion.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #clanek .stranka_programy a.uk-accordion-title {
  padding: var(--zs-odstup-base) var(--zs-odstup-lg);
  background: var(--zs-barva-pozadi-sekce);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
  color: var(--zs-barva-text-nadpis);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek .stranka_programy a.uk-accordion-title:hover {
  border-color: var(--zs-barva-ramecek-doporucena);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek .stranka_programy li.uk-open > a.uk-accordion-title {
  border-color: var(--zs-barva-ramecek-doporucena);
  border-width: 2px;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek .stranka_programy .uk-accordion-content {
  padding-top: var(--zs-odstup-sm);
}
/* vnorene skupiny (Doplnky k jidelnicku, Vyjimky k jidelnicku) meli u zalozky
   odrazku ze seznamu. Zaklad rusi jen obrazkove odrazky, ne znacku seznamu,
   a `ul:not([class])` na `ul.uk-accordion` nedosahne. */
body:has(.zs26-hlavicka):not(.foxplus) #clanek .stranka_programy ul.uk-accordion > li {
  list-style: none;
  margin-bottom: var(--zs-odstup-sm);
}

/* ---------------------------------------------------------------
   7. Srovnavaci tabulka programu (.tab_srovnavaci v .pas.m134).
      Sirku sloupcu nemenim, tabulka se posouva tazenim.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) table.tab_srovnavaci {
  font-family: var(--zs-pismo);
  font-size: 16px;
  line-height: 1.4;
  color: var(--zs-barva-text-zakladni);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) table.tab_srovnavaci td.chod h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--zs-barva-text-nadpis);
  text-transform: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) table.tab_srovnavaci td.zahlavi,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) table.tab_srovnavaci td.zahlavi span {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) table.tab_srovnavaci .linky td {
  background: var(--zs-barva-pozadi-karta);
  border-bottom: 1px solid var(--zs-barva-ramecek-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) table.tab_srovnavaci .linky td.act {
  background: var(--zs-barva-pozadi-sekce);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) table.tab_srovnavaci .linky.bezlinky td {
  border-bottom: 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) table.tab_srovnavaci td.mez {
  background: none;
  border-bottom: 0;
}
/* posledni radek s cenami a tlacitky Vice. Legacy ma sytou limetku pres celou sirku,
   coz je vedle svetle zelene hlavicky druha nejvyraznejsi plocha na strance.
   Svetla limetkova plocha z tokenu drzi duraz a nekrici. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) table.tab_srovnavaci tr.zelena td {
  background: var(--zs-barva-akcent-limetka-plo);
  color: var(--zs-barva-text-nadpis);
  font-size: 16px;
  font-weight: 600;
  border-bottom: 0;
}

/* ---------------------------------------------------------------
   8. Pasy m134 a m135, ktere lezi v `#obsah > strong` (viz hlavicka).
      Zaklad na ne pres `#obsah > .pas` nedosahne, proto tady odsazeni
      sekce a velikost nadpisu, at vypadaji jako ostatni pasy.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pas.m134 > .main_limit,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pas.m135 > .main_limit {
  padding-block: var(--zs-odstup-sekce-mobil);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pas.m134 h2,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pas.m135 h2 {
  margin: 0;
  padding: 0 0 var(--zs-odstup-md);
  font-size: clamp(26px, 2.7vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pas.m134 h3,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pas.m135 h3 {
  margin: 0;
  padding: var(--zs-odstup-xl) 0 var(--zs-odstup-sm);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--zs-barva-text-nadpis);
}
@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pas.m134 > .main_limit,
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pas.m135 > .main_limit {
    padding-block: var(--zs-odstup-sekce);
  }
}

/* ---------------------------------------------------------------
   9. Pas Davame si zalezet (.pas.m136 > .pozadi-flexi.priprava-jidel).
      Pismo uz resi zaklad, tady jen plocha textove poloviny a odkaz.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m136 > .pozadi-flexi > .text,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m444 > .pozadi-flexi > .text,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m443 > .pozadi-flexi > .text{
  background: var(--zs-barva-pozadi-jemne);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m136 a,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m444 a,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m443 a{
  color: var(--zs-barva-text-odkaz);
  font-weight: 600;
}

/* ---------------------------------------------------------------
   10. Mobil
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .program-grid .grid-odkazy {
  flex-wrap: wrap;
}
@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .program-grid .grid-odkazy {
    flex-wrap: nowrap;
  }
}


/* ---------------------------------------------------------------
   11. Fotka jidla v hlavicce programu (27. 8. 2026)

   Marek: "at je na uvodu krome jmena produktu jeho rychly popis, taky fotka
   jidla a tlacitko objednat". Predloha je Figma ZS-wireframe, obrazovka
   Program Na miru: text vlevo, fotka jidla vpravo v zaoblene karte, pomer 3:2.

   HTML doplnuje nasazeni/hlavicka-programu-foto.py do legacy modulu hlavicky
   (`div.foto.zs26-hero-foto` za blok .text). Pravidlo mrizky visi na
   `:has(> .zs26-hero-foto)`, takze 24 programu bez fotky zustava na puvodnim
   flexu a nic se jim nerozsype.

   Dva sloupce az od 1024. Mezi 700 a 1024 ma obal 1180 px vnitrek kolem 660 px
   a na text by zbylo 220, coz je uzsi nez sloupec s cenou. Do te sirky jde
   fotka pod text.
   --------------------------------------------------------------- */
/* Zelena svisla linka u .text mela smysl, dokud v bloku stal perex. Po zestihleni
   hlavicky (27. 8., viz nasazeni/hlavicka-programu.py) v nem zbylo tlacitko
   a termin zavozu, a linka u tlacitka vypada jako zbytek po necem smazanem. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head:has(.zs26-hero-foto) .text {
  padding-left: 0;
  border-left: 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-hero-foto {
  margin: var(--zs-odstup-xl) 0 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-hero-foto img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--zs-radius-karta);
}
/* Podtisk je velky obrys loga programu vpravo dole. Vedle fotky by koukal
   zpod jejiho rohu jako sediva skvrna, a je to stejny motiv jako ikona vlevo.
   Kdyz je v hlavicce fotka, podtisk se nekresli. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head:has(.zs26-hero-foto) .podtisk {
  display: none;
}
/* Logo programu se v mrizce roztahne na svych 250 px z content2024.css a rozhodi
   vysku prvniho radku. Ve flexu ho drzel na 149 px sourozenec, v mrizce ne. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head:has(.zs26-hero-foto) .obr img {
  width: 150px;
  max-width: 150px;
}
/* Tri sloupce: ikona programu, text, fotka. Obal ikony a nadpisu dostava
   `display: contents`, takze se ikona i nadpis stavi primo do te mrizky.
   Diky tomu zacina tlacitko na stejne ose jako nadpis a podtitulek, ne pod
   ikonou. Marek 27. 8.: "tlacitko lepe zarovnat s textem a nadpisem".
   Bez `contents` by to slo jen levym odsazenim .text o sirku ikony, coz je
   cislo, ktere by se rozesla pri kazde zmene ikony. */
@media (min-width: 1024px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .flex-space-between-center-nowrap:has(> .zs26-hero-foto) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 520px;
    column-gap: var(--zs-odstup-2xl);
    row-gap: var(--zs-odstup-base);
    align-items: center;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .flex-space-between-center-nowrap:has(> .zs26-hero-foto) > .flex-flex-start-center-nowrap {
    display: contents;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head:has(.zs26-hero-foto) .obr {
    grid-column: 1;
    grid-row: 1;
  }
  /* Fotka je vyssi nez text vedle ni, takze mrizka radky roztahne a mezi nadpisem
     a tlacitkem vznikne prazdno. Volne misto patri nad a pod dvojici, ne mezi ni:
     prvni radek se zarovnava dolu, druhy nahoru. */
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head:has(.zs26-hero-foto) .pretext {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    width: auto;
    padding-right: 0;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head:has(.zs26-hero-foto) .obr {
    align-self: end;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .flex-space-between-center-nowrap:has(> .zs26-hero-foto) > .text {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .flex-space-between-center-nowrap:has(> .zs26-hero-foto) > .zs26-hero-foto {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0;
  }
}

/* ---------------------------------------------------------------
   12. Dnesni menu jako pas na sirku, ne pravy sloupec (27. 8. 2026)

   Marek: "menu bych nedaval do vlastniho praveho sloupce, ale jako polozku
   na sirku a nepsal bych kolik to ma Kcal, ale spis at je tam ikonka na slozeni
   a po najeti/kliku tam bude presne slozeni."

   HTML modulu (legacy m143 a jeho sourozenci na dalsich programech) se nemeni.
   Meni se rozvrzeni: obal clanku prestane byt dvousloupcovy a bocni panel
   vyplni celou sirku pod textem. Poradi v DOM zustava, tedy pas je pod clankem
   a nad konfiguratorem. Cist se to da jako "tohle je program" a hned za tim
   "takhle vypada jeden konkretni den".

   Energie v bublinach (.bubl4, na testu 14 365 kJ za den) se skryva.
   Ikonu Slozeni a jeji panel dokresluje js/zs26-data.js z /jidelnicek/<slug>-<kJ>,
   coz je jedine misto, kde slozeni a alergeny na webu jsou. Bez JS zustane
   pas beze zmeny, jen bez ikon.

   Selektor `#obsah > .main_limit.obsah:has(#sidebar .dnesnimenu)` plati jen na
   detailu programu: mereno 27. 8., modul dnesniho menu je v bocnim panelu jen
   tam (/cenik, /blog, /jidelnicek a homepage ho nemaji; homepage ma vlastni
   kopii uvnitr .pozadi-flexi.home, na tu tenhle selektor nedosahne).
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(#sidebar .dnesnimenu) {
  grid-template-columns: minmax(0, 1fr);
}
/* Sablona maluje pod obsah stranky se sloupcem obrazek sidebared.png roztazeny
   na 100 % vysky (`.body_v0.sidebared #obsah`). Kresli svetly pruh presne tam,
   kde byl pravy sloupec. Kdyz sloupec zmizi, zustane po nem sedy obdelnik pres
   pulku stranky. Zmereno 27. 8. 2026 na 1440 px. */
body:has(.zs26-hlavicka):not(.foxplus):has(#sidebar .dnesnimenu) #obsah {
  background-image: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(#sidebar .dnesnimenu) > .dcomponent {
  padding-right: 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(#sidebar .dnesnimenu) > #sidebar {
  padding: 0 0 var(--zs-odstup-xl);
}

/* Na mobilu ma sablona bocni panel jako vysouvaci vrstvu: `.body_v3 #sidebar_float.sidebar2`
   je `position: fixed; display: none` a otevira ho tlacitko #prepinac_sidebar, ktere je
   na tehle strance samo `display: none` (mereno 27. 8. 2026 na 390 px). Dnesni menu
   tedy na telefonu nebylo videt vubec. Jako pas v toku uz videt je. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(#sidebar .dnesnimenu) > #sidebar > #sidebar_float.sidebar2 {
  display: block;
  position: static;
  width: 100%;
  left: auto;
  padding: 0;
}

/* Prazdny pas se nekresli. Na strankach programu, ktere dnes menu nemaji
   (PRO ZDRAVI +, KETO a dalsi, mereno 27. 8. 2026), vypisuje legacy modul jen
   nazev, datum a "0 kJ" a zadny chod. V uzkem bocnim sloupci to byla drobnost,
   pres celou sirku je to prazdna karta o 100 px. */
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu:not(:has(.chod)) {
  display: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(#sidebar .dnesnimenu) > #sidebar:not(:has(.chod)) {
  padding: 0;
}

/* 12a. karta pasu. Plocha, ramecek a radius uz dava 60-zaklad na #sidebar_float > div,
   tady se resi jen vnitrek. overflow: hidden z legacy musi pryc, jinak by karta
   ustrihla panel se slozenim. */
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zs-odstup-lg);
  padding: var(--zs-odstup-xl);
  overflow: visible;
  font-size: 16px;
  line-height: 1.55;
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu > p:empty {
  display: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu > div {
  padding: 0;
}

/* 12b. hlavicka pasu: ikona programu, nazev, datum. Energie za den pryc. */
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu .hlav {
  gap: var(--zs-odstup-base);
  justify-content: flex-start;
  padding: 0;
  background: none;
}
/* .jic je sprite 70x70 s background-size 80x80, tedy orezany po okrajich.
   V pasu je ikona vedle nadpisu, tam orez videt je. */
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu .hlav .jic {
  width: 56px;
  height: 56px;
  background-size: contain;
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu .hlav .nazev {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu .hlav strong {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu .hlav .bubl4 {
  display: none;
}

/* 12c. chody vedle sebe. auto-fit misto media query: kontrakt pousti jen
   breakpointy 700 a 1024 a mrizka se stejne ridi tim, kolik se vejde. */
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu > div:has(> .chod) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--zs-odstup-base);
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu .chod {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--zs-odstup-base);
  border-bottom: 0;
  border-radius: var(--zs-radius-male);
  background: var(--zs-barva-pozadi-jemne);
  line-height: 1.45;
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu .chod h5 {
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--zs-barva-text-popisek);
}
/* Nazev jidla. Marek 30. 8.: "jmeno jidla neni boldem". Nebylo, prestoze
   tady vaha 600 stala uz od 27. 8. Prebijel to zaklad
   `#obsah > .main_limit.obsah p:not(.zs26 *)` (60-zaklad.css r. 300 a dal),
   ktery ma (1 id, 5 trid, 2 typy) proti puvodnim (1 id, 4 tridy, 2 typy).
   Duvod je prestavba pasu: od 27. 8. lezi #sidebar_float uvnitr
   .main_limit.obsah, takze na nej zakladni pravidlo pro odstavce clanku dosahne.
   Reseni je druhe id, ne !important; tentyz zpusob uz je nize u .celkem a.
   Zmereno na webvyvoj2 30. 8. 2026: font-weight 400 misto 600. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah #sidebar_float .dnesnimenu .chod p {
  padding: var(--zs-odstup-xs) 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu .celkem {
  padding: 0;
  text-align: left;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah #sidebar_float .dnesnimenu .celkem a {
  font-weight: 600;
  color: var(--zs-barva-text-odkaz);
}

@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu .hlav {
    grid-column: 1;
    grid-row: 1;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu .celkem {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    text-align: right;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu > div:has(> .chod) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* 12d. Slozeni. Tlacitko i panel vklada js/zs26-data.js, v HTML modulu nejsou.
   Panel je videt pri najeti, pri fokusu z klavesnice a po kliknuti (dotyk).
   Kotva je .chod, ne obal tlacitka: panel je sirsi nez tlacitko a musi se
   vejit i u posledni dlazdice, ta ho proto zarovnava doprava. */
/* Tlacitka Slozeni maji byt na jedne ose, ne kazde jinde podle delky nazvu.
   Marek to vratil u kalkulacky uz 26. 8.: na svisle ose stoji ramecky prvku. */
body:has(.zs26-hlavicka):not(.foxplus) .zs26-slozeni-obal {
  position: relative;
  display: inline-block;
  margin-top: auto;
}
/* Odkaz, ne tlacitko. Do 30. 8. to vypadalo jako obrysove tlacitko, protoze
   zakladni pravidlo na `button` (60-zaklad.css r. 465) prebilo tohle pres
   !important. Element proto od 30. 8. nese navic tridu `zs26-vyj`, ktera je
   z toho pravidla vyjmuta, a pravidla nize uz plati. Prvek zustava <button>
   kvuli aria-expanded a ovladani z klavesnice, meni se jen vzhled. */
body:has(.zs26-hlavicka):not(.foxplus) button.zs26-slozeni {
  display: inline-flex;
  align-items: baseline;
  gap: var(--zs-odstup-xs);
  margin: var(--zs-odstup-sm) 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--zs-pismo);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--zs-barva-text-tlumeny);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
body:has(.zs26-hlavicka):not(.foxplus) button.zs26-slozeni:hover {
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) button.zs26-slozeni:focus-visible {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}
/* Ikona "i" zustava, ale jen jako drobna znacka za textem: 15 px misto 20,
   tenci obrys a bez podtrzeni, aby nesplyvala s podtrzenym slovem. */
body:has(.zs26-hlavicka):not(.foxplus) .zs26-slozeni__ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 15px;
  height: 15px;
  border: 1px solid currentColor;
  border-radius: var(--zs-radius-pill);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
body:has(.zs26-hlavicka):not(.foxplus) .zs26-slozeni__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  width: 300px;
  max-width: calc(100vw - 2 * var(--zs-odstup-lg));
  max-height: 280px;
  overflow-y: auto;
  padding: var(--zs-odstup-base);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-male);
  background: var(--zs-barva-pozadi-karta);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
  text-align: left;
}
body:has(.zs26-hlavicka):not(.foxplus) .zs26-slozeni-obal:hover .zs26-slozeni__panel,
body:has(.zs26-hlavicka):not(.foxplus) .zs26-slozeni-obal:focus-within .zs26-slozeni__panel,
body:has(.zs26-hlavicka):not(.foxplus) .zs26-slozeni-obal.je-otevreno .zs26-slozeni__panel {
  display: block;
}
body:has(.zs26-hlavicka):not(.foxplus) .zs26-slozeni__panel strong,
body:has(.zs26-hlavicka):not(.foxplus) .zs26-slozeni__panel b {
  font-weight: 700;
  color: var(--zs-barva-text-zakladni);
}
body:has(.zs26-hlavicka):not(.foxplus) .zs26-slozeni__panel p {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
}
body:has(.zs26-hlavicka):not(.foxplus) .zs26-slozeni__nadpis {
  display: block;
  margin: 0 0 var(--zs-odstup-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float .dnesnimenu .chod:last-child .zs26-slozeni__panel {
  left: auto;
  right: 0;
}

/* ---------------------------------------------------------------
   DOCASNE, 26. 8. 2026: stary hero rozcestniku pryc

   Na /programy-a-priprava bezi od 26. 8. novy katalog v tele clanku a stary
   hero modul 279 ("Programy a varianty krabickove diety" s karuselem ikon) nad
   nim zustal, takze stranka ma dva nadpisy prvni urovne. Spravne reseni je modul
   nezverejnit, jenze Joomla ho odmita zapsat: je od 22. 7. 2026 checked out
   uzivatelem 341 a cizi zamek se neobchazi.

   Tohle pravidlo je nahrada, ne oprava. Nadpis zustava v DOM pro roboty.
   AZ se modul povede vypnout (administrace, System, Globalni odhlaseni, pak
   `nasazeni/presun-katalogu.py`), tenhle blok se smaze. Modul 279 je prirazeny
   jen na polozku 167, takze skryti neni sirsi nez vypnuti.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.m279 {
  display: none;
}

/* ---------------------------------------------------------------
   13. Co budete jist: skupiny surovin s linkovou ikonou (30. 8. 2026)

   Marek: "u sekce Co budete jist by bylo fajn kdyby tam byly ikonky nebo nejak
   jednoduseji ukazat co se bude jist... ale at to nevypada cheap, jsme premiova
   sluzba". Do te doby to byl jeden odstavec prozy a cist se musel cely,
   aby clovek zjistil, jestli tam je maso.

   Proc maska v CSS a ne SVG v clanku. Telo clanku edituje redakce v JCE
   a vlozene <svg> se pri dalsim ulozeni muze rozpadnout na neplatny kod.
   Takhle je v clanku jen `<li data-zs-surovina="maso">Libove maso</li>`,
   tedy obycejny seznam: redaktor edituje slova, ikona zije v CSS a nejde
   nechtene smazat. Novou skupinu prida programator jednim pravidlem nize,
   redaktor sam nikoliv, a to je zamer: sada musi zustat jedna.

   Proc to nevypada levne. Ikony jsou kreslene tady, ne stazene po jedne
   z ruznych sad. Vsechny maji tentyz viewBox 24, tutez tloustku tahu 1,5,
   zaoblene konce a zadnou vypln. Zadne pozadi, zadne kolecko, zadny ramecek,
   jedna barva. Levne to vypada tehdy, kdyz se sejde pet ikon z peti sad,
   kazda s jinou tloustkou tahu a jinym stylem rohu.

   Barvu nese `background-color`, tvar je maska, takze ikona dedi barvu textu
   a nemusi se pro tmavy pas nic prekreslovat.

   Sada je zamerne mala. Pridavat dal ma smysl jen tehdy, kdyz skupina je
   na vic nez jednom programu; jednorazova ikona sadu rozredi.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-base) var(--zs-odstup-xl);
  margin: var(--zs-odstup-base) 0 var(--zs-odstup-lg);
  padding: 0;
  list-style: none;
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-base);
  margin: 0;
  padding: 0;
  background: none;
  list-style: none;
  font-family: var(--zs-pismo);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--zs-barva-text-zakladni);
}

/* Ikona. `flex: none`, aby ji dlouhy popisek nesmackl, a pevnych 28 px:
   pri velikosti odvozene z pisma by se sada rozjela podle delky slova. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li::before {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  background-color: var(--zs-barva-text-nadpis);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Polozka bez znameho klice zustane bez ikony, ne s prazdnym ctvercem:
   bez mask-image by maska nebyla zadna a plocha by se vykreslila cela. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li:not([data-zs-surovina])::before {
  display: none;
}

@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sada ikon. Jeden viewBox, jedna tloustka tahu, zadna vypln. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li[data-zs-surovina="maso"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 13c0-4.3 3.7-7.4 8.2-7.4 3.9 0 6.9 2.3 6.9 5.5 0 2-1.2 3.3-1.2 4.7 0 1.6 1 2.2 1 3.4 0 1-1 1.8-2.4 1.8C10.7 21 4.8 17.6 4.8 13ZM8.5 12.8c0-2 1.9-3.5 4.1-3.5 1.9 0 3.3 1 3.3 2.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 13c0-4.3 3.7-7.4 8.2-7.4 3.9 0 6.9 2.3 6.9 5.5 0 2-1.2 3.3-1.2 4.7 0 1.6 1 2.2 1 3.4 0 1-1 1.8-2.4 1.8C10.7 21 4.8 17.6 4.8 13ZM8.5 12.8c0-2 1.9-3.5 4.1-3.5 1.9 0 3.3 1 3.3 2.5'/%3E%3C/svg%3E");
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li[data-zs-surovina="ryba"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12c3-4.4 6.5-6.6 10.4-6.6 2.9 0 5 1.2 6.6 3.3-1.6 2.1-1.6 4.5 0 6.6-1.6 2.1-3.7 3.3-6.6 3.3-3.9 0-7.4-2.2-10.4-6.6ZM17 10.4h.01M8.2 8.4c1 2.5 1 4.7 0 7.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12c3-4.4 6.5-6.6 10.4-6.6 2.9 0 5 1.2 6.6 3.3-1.6 2.1-1.6 4.5 0 6.6-1.6 2.1-3.7 3.3-6.6 3.3-3.9 0-7.4-2.2-10.4-6.6ZM17 10.4h.01M8.2 8.4c1 2.5 1 4.7 0 7.2'/%3E%3C/svg%3E");
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li[data-zs-surovina="obiloviny"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9M12 9c0-2 1-3.4 3-4 .3 2.3-.6 3.7-3 4ZM12 9c0-2-1-3.4-3-4-.3 2.3.6 3.7 3 4ZM12 14c0-2 1-3.4 3-4 .3 2.3-.6 3.7-3 4ZM12 14c0-2-1-3.4-3-4-.3 2.3.6 3.7 3 4ZM12 19c0-2 1-3.4 3-4 .3 2.3-.6 3.7-3 4ZM12 19c0-2-1-3.4-3-4-.3 2.3.6 3.7 3 4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9M12 9c0-2 1-3.4 3-4 .3 2.3-.6 3.7-3 4ZM12 9c0-2-1-3.4-3-4-.3 2.3.6 3.7 3 4ZM12 14c0-2 1-3.4 3-4 .3 2.3-.6 3.7-3 4ZM12 14c0-2-1-3.4-3-4-.3 2.3.6 3.7 3 4ZM12 19c0-2 1-3.4 3-4 .3 2.3-.6 3.7-3 4ZM12 19c0-2-1-3.4-3-4-.3 2.3.6 3.7 3 4Z'/%3E%3C/svg%3E");
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li[data-zs-surovina="lusteniny"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 7.8c0-1.6 1.3-2.9 2.9-2.9 5.9 0 10.6 4.8 10.6 10.6 0 1.6-1.3 2.9-2.9 2.9C9.4 18.4 4.6 13.6 4.6 7.8ZM8.6 9.4h.01M11.6 12.4h.01M14.6 15.4h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 7.8c0-1.6 1.3-2.9 2.9-2.9 5.9 0 10.6 4.8 10.6 10.6 0 1.6-1.3 2.9-2.9 2.9C9.4 18.4 4.6 13.6 4.6 7.8ZM8.6 9.4h.01M11.6 12.4h.01M14.6 15.4h.01'/%3E%3C/svg%3E");
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li[data-zs-surovina="zelenina"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 10.6h7.6l-2.9 10.1a1 1 0 0 1-1.9 0ZM12 10.6V7.2M12 7.2c0-1.9 1.5-3.4 3.4-3.4.2 1.9-1.3 3.4-3.4 3.4ZM12 7.2c0-1.9-1.5-3.4-3.4-3.4-.2 1.9 1.3 3.4 3.4 3.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 10.6h7.6l-2.9 10.1a1 1 0 0 1-1.9 0ZM12 10.6V7.2M12 7.2c0-1.9 1.5-3.4 3.4-3.4.2 1.9-1.3 3.4-3.4 3.4ZM12 7.2c0-1.9-1.5-3.4-3.4-3.4-.2 1.9 1.3 3.4 3.4 3.4Z'/%3E%3C/svg%3E");
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li[data-zs-surovina="ovoce"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8.4c-1-1.4-2.4-2-4-1.6C6 7.4 4.8 9.4 4.8 12c0 3.6 2.4 7.4 4.4 7.4 1 0 1.8-.6 2.8-.6s1.8.6 2.8.6c2 0 4.4-3.8 4.4-7.4 0-2.6-1.2-4.6-3.2-5.2-1.6-.4-3 .2-4 1.6ZM12 8.4V5.4M12 5.4c0-1.4 1.2-2.4 2.6-2.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8.4c-1-1.4-2.4-2-4-1.6C6 7.4 4.8 9.4 4.8 12c0 3.6 2.4 7.4 4.4 7.4 1 0 1.8-.6 2.8-.6s1.8.6 2.8.6c2 0 4.4-3.8 4.4-7.4 0-2.6-1.2-4.6-3.2-5.2-1.6-.4-3 .2-4 1.6ZM12 8.4V5.4M12 5.4c0-1.4 1.2-2.4 2.6-2.4'/%3E%3C/svg%3E");
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li[data-zs-surovina="mlecne"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.6h6M9.4 2.6 8 6.2v13a2.2 2.2 0 0 0 2.2 2.2h3.6a2.2 2.2 0 0 0 2.2-2.2v-13l-1.4-3.6M8 11.6h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.6h6M9.4 2.6 8 6.2v13a2.2 2.2 0 0 0 2.2 2.2h3.6a2.2 2.2 0 0 0 2.2-2.2v-13l-1.4-3.6M8 11.6h8'/%3E%3C/svg%3E");
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li[data-zs-surovina="syr"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.4 12.4 5c.4-.3 1-.3 1.4 0L21 10.4v6.4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2ZM3 11.4h18M8 15h.01M13 14h.01M17 15.6h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.4 12.4 5c.4-.3 1-.3 1.4 0L21 10.4v6.4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2ZM3 11.4h18M8 15h.01M13 14h.01M17 15.6h.01'/%3E%3C/svg%3E");
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li[data-zs-surovina="orechy"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2a4.5 4.5 0 0 1 3.1 7.8c-.7.7-.7 1.9 0 2.6A4.5 4.5 0 1 1 8.9 13.6c.7-.7.7-1.9 0-2.6A4.5 4.5 0 0 1 12 3.2ZM10.6 6.8h.01M13.4 8.6h.01M10.6 16.2h.01M13.4 18h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2a4.5 4.5 0 0 1 3.1 7.8c-.7.7-.7 1.9 0 2.6A4.5 4.5 0 1 1 8.9 13.6c.7-.7.7-1.9 0-2.6A4.5 4.5 0 0 1 12 3.2ZM10.6 6.8h.01M13.4 8.6h.01M10.6 16.2h.01M13.4 18h.01'/%3E%3C/svg%3E");
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li[data-zs-surovina="vejce"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c3.4 0 6.4 5.2 6.4 9.6A6.4 6.4 0 0 1 12 21a6.4 6.4 0 0 1-6.4-8.4C5.6 8.2 8.6 3 12 3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c3.4 0 6.4 5.2 6.4 9.6A6.4 6.4 0 0 1 12 21a6.4 6.4 0 0 1-6.4-8.4C5.6 8.2 8.6 3 12 3Z'/%3E%3C/svg%3E");
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li[data-zs-surovina="tuky"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2c3.4 4 5.4 6.8 5.4 9.4a5.4 5.4 0 1 1-10.8 0c0-2.6 2-5.4 5.4-9.4ZM9.6 13.4a2.6 2.6 0 0 0 2.6 2.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2c3.4 4 5.4 6.8 5.4 9.4a5.4 5.4 0 1 1-10.8 0c0-2.6 2-5.4 5.4-9.4ZM9.6 13.4a2.6 2.6 0 0 0 2.6 2.6'/%3E%3C/svg%3E");
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li[data-zs-surovina="polevka"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 11.4h16.8v1.2a8.4 8.4 0 0 1-16.8 0ZM2.4 21.4h19.2M9 7.6c-1-1.2-1-2.4 0-3.6M13 7.6c-1-1.2-1-2.4 0-3.6M17 7.6c-1-1.2-1-2.4 0-3.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 11.4h16.8v1.2a8.4 8.4 0 0 1-16.8 0ZM2.4 21.4h19.2M9 7.6c-1-1.2-1-2.4 0-3.6M13 7.6c-1-1.2-1-2.4 0-3.6M17 7.6c-1-1.2-1-2.4 0-3.6'/%3E%3C/svg%3E");
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-suroviny > li[data-zs-surovina="bylinky"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.4 21c0-6.4 2.6-11.4 8.6-13.6.6 6.6-2.6 11-8.6 13.6ZM11.4 21c-.6-4.4-2.6-7.4-6.4-9 .4 4.4 2.6 7.4 6.4 9ZM11.4 21v-4.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.4 21c0-6.4 2.6-11.4 8.6-13.6.6 6.6-2.6 11-8.6 13.6ZM11.4 21c-.6-4.4-2.6-7.4-6.4-9 .4 4.4 2.6 7.4 6.4 9ZM11.4 21v-4.2'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------
   2d. PDP hlavicka detailu programu: galerie + karta (31. 8. 2026)
   Predloha: Figma ZS-wireframe, stranka 21 "Hlavicka detailu programu",
   navrh C, ktery Marek tyz den vybral. HTML sklada
   nasazeni/hlavicka-programu.py (tabulka GALERIE, 9 programu), zive hodnoty
   plni js/zs26-data.js (heroPdp: cena z /cenik?typ, odkaz na jidelnicek,
   prepinani hlavni fotky nahledy).

   Pas je u PDP svetly podle predlohy; tmava sekce 2c je vyrazena pres
   :not(:has(.zs26-pdp)) primo v jejich selektorech. Stare grid rozvrzeni
   1024+ (tri sloupce ikona/text/fotka) miri na :has(> .zs26-hero-foto),
   tedy primy potomek, a na PDP se samo nechytne: fotka je o uroven hloub
   v .zs26-pdp__galerie. Programy bez galerie (Diabetik, Setrici dieta,
   Bez mleka, Pro deti, Muj vyber, Doplnky) jedou dal postaru, tmave.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas.pozadi2:has(.zs26-pdp) {
  background: var(--zs-barva-pozadi-stranka);
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-lg);
}
@media (min-width: 1024px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 492px;
    column-gap: var(--zs-odstup-2xl);
    align-items: start;
  }
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__galerie {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-md);
  min-width: 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp .zs26-hero-foto {
  margin: 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__nahledy {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--zs-odstup-md);
}
/* Tlacitko nahledu. Sablona dava button background: none !important,
   tady je to poprve, kdy se to hodi. Aktivni nahled ma vnitrni obrys,
   ne border: border by menil rozmer boxu a rada by poskocila. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__nahled {
  /* !important zamerne: globalni pravidlo na button (pilulka 48 px, border
     2 px, padding 0 24) ma prednost a z nahledu delalo prazdne krouzky,
     zmereno 31. 8. 2026 pres cdp.mjs (btn 93x48, img 41 px). Stejna past
     jako u chipu ve vrstve nad fox aplikaci. */
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  min-height: 0 !important;
  height: auto !important;
  min-width: 0 !important;
  cursor: pointer;
  border-radius: var(--zs-radius-male) !important;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__nahled img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  border-radius: var(--zs-radius-male);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__nahled[aria-current="true"] img {
  outline: 2px solid var(--zs-barva-ramecek-doporucena);
  outline-offset: -2px;
}

/* Karta. Na mobilu plocha bez ramecku (predloha, mobil navrhu C je platy),
   ohraniceni az od 1024 vedle galerie. */
/* Karta je od 1. 9. 2026 tmava na vsech sirkach. Predloha: prekresleni
   Lucie Soukupove z 31. 8., Figma stranka 70. Puvodni navrh C mel kartu
   bilou s rameckem. Vedlejsi ucinek je zadouci: devet hlavicek s galerii
   se tim srovna se sesti starymi tmavymi u programu bez galerie. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__karta {
  min-width: 0;
  /* sablona na mobilu (body_v3) centruje text hlavicky; predloha ma kartu
     zarovnanou vlevo na vsech sirkach */
  text-align: left;
  box-sizing: border-box;
  padding: var(--zs-odstup-xl);
  border-radius: var(--zs-radius-velke);
  background: var(--zs-barva-pozadi-tmave);
  color: var(--zs-barva-text-na-tmavem);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__karta .pretext,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__karta .pretext h4,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__karta .text,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__karta h1.hlavni {
  text-align: left;
}
@media (min-width: 1024px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__karta {
    padding: var(--zs-odstup-2xl);
  }
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp .flex-flex-start-center-nowrap {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-md);
}
/* Ikona programu v karte 44 px (Figma), prebiji 150 px z pravidla pro starou
   mrizku: stejna specificita, tohle je v souboru pozdeji. Ridi se vyska,
   ne sirka: ikona Menicka je na vysku a pri vynucene sirce 44 px vysla
   pres 200 px vysoka (zmereno 31. 8. 2026 na testu). */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp .obr img {
  width: auto;
  height: 44px;
  max-width: 56px;
  object-fit: contain;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp h1.hlavni {
  font-size: clamp(28px, 2.6vw, 36px);
  padding: 0;
  color: var(--zs-barva-text-na-tmavem);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp .pretext h4 {
  margin: 4px 0 0;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--zs-barva-text-na-tmavem);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp .zs26-hero-dukaz {
  margin: var(--zs-odstup-base) 0 0;
  max-width: none;
  color: var(--zs-barva-text-na-tmavem);
}
/* Cenova kotva. Cislo plni zs26-data.js, blok je do te doby hidden,
   takze tu nikdy nestoji "od Kc za den" bez cisla. */
/* Cenova kotva. Predloha ma nad cenou limetkovou linku, ne svetlou plochu:
   svetla plocha na tmave karte by delala druhou kartu uvnitr karty. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__cena {
  margin: var(--zs-odstup-lg) 0 0;
  padding: var(--zs-odstup-lg) 0 0;
  border-top: 1px solid var(--zs-barva-akce-primarni);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__cena-castka {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--zs-barva-text-na-tmavem);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__cena-castka [data-zs-cena-jednotka-text] {
  font-size: 15px;
  font-weight: 400;
  color: var(--zs-barva-text-na-tmavem);
}
/* Poznamka pod cenou. Ma ji jen program, ktery cenu nebere z ceniku a jednotka
   v kotve proto neodpovida tomu, jak se plati: Muj vyber ukazuje "od 460 Kc
   za den", ale uctuje se po chodech (1. 9. 2026). Stejny duvod, jaky ma
   Menicko u priznaneho dopravneho. Je to <span> uvnitr odstavce s cenou,
   takze potrebuje display: block, jinak se prilepi za jednotku na tyz radek. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__cena-pozn {
  display: block;
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--zs-barva-text-na-tmavem);
  opacity: 0.85;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp .akce_programu {
  margin: var(--zs-odstup-base) 0 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp .akce_programu a.button_hlavni {
  display: flex;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__odkaz {
  margin: var(--zs-odstup-md) 0 0;
  text-align: center;
  font-size: 15px;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .program_head .zs26-pdp__odkaz a {
  color: var(--zs-barva-text-na-tmavem);
  font-weight: 600;
  text-decoration: underline;
}


/* ---------------------------------------------------------------
   14. Telo detailu programu: karty sekci, ikonove nadpisy, Vyzivove okenko
   (1. 9. 2026)

   Predloha: Figma ZS-wireframe, stranka 70 Detail programu, postavena podle
   prekresleni Lucie Soukupove (images/3. cast/grafika - programy.png, 31. 8.).
   HTML tela clanku sklada nasazeni/telo-programu.py, na web ho posila
   nasazeni/nasadit-clanek.py.

   Proc se nezaklada nova trida karty. `.zs-karty-2` v 65-redakce.css uz je
   presne ta karta z navrhu: padding 24, ramecek, radius 16, bila plocha,
   v rade stejne vysoke, na mobilu pod sebou. A je v manualu pro redaktory
   mezi sesti povolenymi styly v JCE, vcetne vety "Nic dalsiho neexistuje,
   a je to schvalne: sest stylu se da udrzet, dvacet ne"
   (noc-2026-08-25/EDITORI.md). Sedmy styl by to pravidlo porusil.
   Totez plati pro `.zs-box`, ktery je Vyzivove okenko.

   Ikona u nadpisu je tyz mechanismus jako u surovin v sekci 13: v clanku je
   jen `data-zs-ikona`, tvar zije tady a redaktor ho nesmaze. Pet novych ikon
   drzi tyz kanon, viewBox 24, tah 1,5, zaoblene konce, bez vyplne, jedna
   barva. Sacharidy, tuky a bilkoviny vlastni ikonu nedostaly, berou si klas,
   kapku a lusk ze sekce 13, aby sada zustala mala.

   Barvy cisel v okenku jsou tokeny, ne limetka a zluta z predlohy: limetka
   ma na bile 2,9:1, zluta z predlohy 2,4:1 a vizualni manual limetku na
   textu zakazuje. Barevne odliseni nese ikona a prouzek, ikona si barvu bere
   pres currentColor, takze staci obarvit polozku.
   --------------------------------------------------------------- */

/* Nadpis sekce s ikonou. Zakladni pravidlo #clanek h3 dava horni odsazeni,
   uvnitr karty ho nechceme: karta uz padding ma. */

/* Karty na strankach programu se nenatahuji na vysku sousedky. Obecne plati
   opak (stejne vysoke v rade, 65-redakce.css), ale tady je jedna karta
   o 170 px vyssi nez druha a stretch v te nizsi udela prazdnou bilou plochu
   uvnitr ramecku. Predloha je taky ma ruzne vysoke. Zmereno 1. 9. 2026
   na testu: 369 px proti 199 px. */
/* `:not(.zs26)` navic jen kvuli specificite: 65-redakce.css nastavuje
   stretch selektorem stejne vahy a nacita se pozdeji, takze by vyhral. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah:has(.program_head) .zs-karty-2:not(.zs26) {
  align-items: start;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah:has(.program_head) .zs-karty-2:not(.zs26) > * {
  height: auto;
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-karty-2 > * > h3,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-box h3 {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-md);
  padding-top: 0;
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah h3[data-zs-ikona]::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah h3[data-zs-ikona="pro-koho-je"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.7'/%3E%3Cpath d='M5.4 20.2c0-3.4 2.9-5.9 6.6-5.9s6.6 2.5 6.6 5.9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.7'/%3E%3Cpath d='M5.4 20.2c0-3.4 2.9-5.9 6.6-5.9s6.6 2.5 6.6 5.9'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah h3[data-zs-ikona="upravy-programu"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.8h5.6M14.4 6.8H20M4 12h8.6M17.4 12H20M4 17.2h3.2M12 17.2h8'/%3E%3Ccircle cx='12' cy='6.8' r='2.4'/%3E%3Ccircle cx='15' cy='12' r='2.4'/%3E%3Ccircle cx='9.6' cy='17.2' r='2.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.8h5.6M14.4 6.8H20M4 12h8.6M17.4 12H20M4 17.2h3.2M12 17.2h8'/%3E%3Ccircle cx='12' cy='6.8' r='2.4'/%3E%3Ccircle cx='15' cy='12' r='2.4'/%3E%3Ccircle cx='9.6' cy='17.2' r='2.4'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah h3[data-zs-ikona="pribor"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3v5.2a2.3 2.3 0 0 0 4.6 0V3M8.9 3v5.2M8.9 10.9V21'/%3E%3Cpath d='M17.2 21v-7.6M17.2 13.4c-1.6-.4-2.5-2-2.5-4.7 0-3 1-5.2 2.5-5.7v10.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3v5.2a2.3 2.3 0 0 0 4.6 0V3M8.9 3v5.2M8.9 10.9V21'/%3E%3Cpath d='M17.2 21v-7.6M17.2 13.4c-1.6-.4-2.5-2-2.5-4.7 0-3 1-5.2 2.5-5.7v10.4Z'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah h3[data-zs-ikona="sestaveni-jidelnicku"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.8' y='4.6' width='14.4' height='16.2' rx='2.2'/%3E%3Crect x='9' y='2.6' width='6' height='3.6' rx='1.4'/%3E%3Cpath d='M9.2 13.4l2.1 2.1 3.9-4.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.8' y='4.6' width='14.4' height='16.2' rx='2.2'/%3E%3Crect x='9' y='2.6' width='6' height='3.6' rx='1.4'/%3E%3Cpath d='M9.2 13.4l2.1 2.1 3.9-4.2'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah h3[data-zs-ikona="vyzivove-okenko"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4.2c0 8.4-4.4 12.6-9.4 12.6A5.8 5.8 0 0 1 4.8 11c0-4.2 5-6.8 15.2-6.8Z'/%3E%3Cpath d='M4.4 20.2c2.6-4.7 5.7-7.7 9.6-9.7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4.2c0 8.4-4.4 12.6-9.4 12.6A5.8 5.8 0 0 1 4.8 11c0-4.2 5-6.8 15.2-6.8Z'/%3E%3Cpath d='M4.4 20.2c2.6-4.7 5.7-7.7 9.6-9.7'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah h3[data-zs-ikona="nez-zacnete"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.6v5.2'/%3E%3Cpath d='M12 16.2h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.6v5.2'/%3E%3Cpath d='M12 16.2h.01'/%3E%3C/svg%3E");
}


/* Mrizka surovin uvnitr karty. Karta je pulka obsahu, takze tri sloupce
   z predlohy by rozbily "Obiloviny a mene tradicni prilohy". Jeden sloupec
   do 1024, dva nad. Oddelovace jsou tenke linky mezi radky, ne mezera:
   v predloze mrizka linky ma. */

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-karty-2 .zs-suroviny {
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--zs-odstup-xl);
  margin: var(--zs-odstup-md) 0 var(--zs-odstup-base);
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-karty-2 .zs-suroviny > li {
  padding: var(--zs-odstup-md) 0;
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-karty-2 .zs-suroviny > li + li {
  border-top: 1px solid var(--zs-barva-ramecek-karta);
}

@media (min-width: 1024px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-karty-2 .zs-suroviny {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* dva sloupce: prvni radek jsou dve polozky, ani jedna linku nahore nema */
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-karty-2 .zs-suroviny > li:nth-child(2) {
    border-top: 0;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-karty-2 .zs-suroviny > li:nth-child(even) {
    padding-left: var(--zs-odstup-xl);
    border-left: 1px solid var(--zs-barva-ramecek-karta);
  }
}


/* Vyzivove okenko. Text vlevo, bila karta se tremi zivinami vpravo.
   Grid bez obalu: vsechno krome seznamu jde do prvniho sloupce, seznam
   do druheho. Kdyz zivinovy seznam neni (program nema v okenku procenta),
   box zustane obycejny a nic se nedeje. */

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-box:has(.zs-ziviny) {
  display: grid;
  gap: var(--zs-odstup-lg);
}

/* Box ma prave dve deti: obal textu a seznam zivin. Obal v clanku je tam
   schvalne. Bez nej by grid stavel radek na kazdy odstavec, seznam by musel
   prekryvat rady pres `grid-row: 1 / span N` a volne misto by se rozdelilo
   mezi radky, takze by mezi nadpisem a textem vznikla mezera. Zmereno
   1. 9. 2026 na testu. */
@media (min-width: 1024px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-box:has(.zs-ziviny) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--zs-odstup-2xl);
    align-items: center;
  }
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny {
  display: grid;
  gap: var(--zs-odstup-lg);
  margin: 0;
  padding: var(--zs-odstup-xl);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
  list-style: none;
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny > li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: var(--zs-odstup-md);
  row-gap: 2px;
  align-items: center;
  margin: 0;
  padding: 0;
  background: none;
  list-style: none;
  color: var(--zs-barva-text-nadpis);
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny > li[data-zs-zivina="sacharidy"] { color: var(--zs-barva-text-odkaz); }
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny > li[data-zs-zivina="tuky"] { color: var(--zs-barva-stav-pozor); }

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny > li::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny > li[data-zs-zivina="sacharidy"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9M12 9c0-2 1-3.4 3-4 .3 2.3-.6 3.7-3 4ZM12 9c0-2-1-3.4-3-4-.3 2.3.6 3.7 3 4ZM12 14c0-2 1-3.4 3-4 .3 2.3-.6 3.7-3 4ZM12 14c0-2-1-3.4-3-4-.3 2.3.6 3.7 3 4ZM12 19c0-2 1-3.4 3-4 .3 2.3-.6 3.7-3 4ZM12 19c0-2-1-3.4-3-4-.3 2.3.6 3.7 3 4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9M12 9c0-2 1-3.4 3-4 .3 2.3-.6 3.7-3 4ZM12 9c0-2-1-3.4-3-4-.3 2.3.6 3.7 3 4ZM12 14c0-2 1-3.4 3-4 .3 2.3-.6 3.7-3 4ZM12 14c0-2-1-3.4-3-4-.3 2.3.6 3.7 3 4ZM12 19c0-2 1-3.4 3-4 .3 2.3-.6 3.7-3 4ZM12 19c0-2-1-3.4-3-4-.3 2.3.6 3.7 3 4Z'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny > li[data-zs-zivina="tuky"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2c3.4 4 5.4 6.8 5.4 9.4a5.4 5.4 0 1 1-10.8 0c0-2.6 2-5.4 5.4-9.4ZM9.6 13.4a2.6 2.6 0 0 0 2.6 2.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2c3.4 4 5.4 6.8 5.4 9.4a5.4 5.4 0 1 1-10.8 0c0-2.6 2-5.4 5.4-9.4ZM9.6 13.4a2.6 2.6 0 0 0 2.6 2.6'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny > li[data-zs-zivina="bilkoviny"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 7.8c0-1.6 1.3-2.9 2.9-2.9 5.9 0 10.6 4.8 10.6 10.6 0 1.6-1.3 2.9-2.9 2.9C9.4 18.4 4.6 13.6 4.6 7.8ZM8.6 9.4h.01M11.6 12.4h.01M14.6 15.4h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 7.8c0-1.6 1.3-2.9 2.9-2.9 5.9 0 10.6 4.8 10.6 10.6 0 1.6-1.3 2.9-2.9 2.9C9.4 18.4 4.6 13.6 4.6 7.8ZM8.6 9.4h.01M11.6 12.4h.01M14.6 15.4h.01'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny > li > strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny > li > span {
  grid-column: 2;
  grid-row: 2;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

/* Prouzek. Jeden prvek, dve barvy pres linear-gradient s tvrdym prechodem:
   dve vrstvy by chtely dalsi element a ten by musel byt v clanku.
   Podil je relativni ukazatel ve trech urovnich, ne merena hodnota. */

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny > li::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: var(--zs-odstup-md);
  height: 10px;
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-akcent-limetka-plo);
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny > li[data-zs-podil="vysoky"]::after {
  background: linear-gradient(to right, var(--zs-barva-akce-primarni) 0 100%, var(--zs-barva-akcent-limetka-plo) 100% 100%);
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny > li[data-zs-podil="stredni"]::after {
  background: linear-gradient(to right, var(--zs-barva-akce-primarni) 0 50%, var(--zs-barva-akcent-limetka-plo) 50% 100%);
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah .zs-ziviny > li[data-zs-podil="nizky"]::after {
  background: linear-gradient(to right, var(--zs-barva-akce-primarni) 0 42%, var(--zs-barva-akcent-limetka-plo) 42% 100%);
}

/* ===== css-obsah/64-rozvoz-kalkulacka.css ===== */
/* 64-rozvoz-kalkulacka.css
   Co to je: skin rozvozu a doporucovaci kalkulacky. Stranky /rozvoz
   a /doporucovaci-kalkulacka. Stavitel A, noc 25. 8. 2026. Navazuje na 60-zaklad.css
   a na 63-programy.css (odstavce a odkazy v pasech resi ten).

   Struktura /rozvoz (mereno 25. 8. v headless Chromu na portu 9301):
   - .pas.m217.bezlimitu.pozadi4 > .pozadi-flexi.programy (hero, resi zaklad)
   - .main_limit.obsah > #clanek (kratky text)
   - .pas.m218.pozadi1 > .main_limit > h2 + p + div > form#form_rozvoz.muj_ajax_form_request
     (> .fpol > label + input#n_psc, .fpol > button.button_hlavni) + div#map (mapa)
   - .pas.m231.pozadi5 > .main_limit > h2 + .rozvozova_mista_sloupce (4 sloupce ul > li)
   - .pas.m219.pozadi2 > .main_limit > h2 + h3 + .seznam_odbernych_mist
     > N x .infomenu (> h3.class_toggle + .con > N x .misto > 4 x div > p)
   - .pas.m220.pozadi5 > .main_limit > h3 + .rozvozova_mista_sloupce (slovenska mesta)

   Struktura /doporucovaci-kalkulacka:
   - .pas.m263.odsazeni.pozadi2.bezlimitu (hero)
   - #clanek > p + div > #online_kalk.online_kalkulacka > .okoloform.forms
     > form#calculator.calculator + #form_vysledek.vysledek + #ajax_vysledek.vysledek
   - pole uz maji 48 px a ramecek z tokenu ze zakladu, prepinace jsou label.ch_radio
     se skrytym inputem a kreslenym koleckem .checkmark

   Co prebiji z legacy:
   - template2024.css 1695: .online_kalkulacka ramecek 1px limetka, radius 12
   - template2024.css 1697: .online_kalkulacka tr td linka 1px svetle limetkova
   - content2024.css 1092 az 1114: .checkmark ramecek 2px seda, po zaskrtnuti limetka
   - content2024.css 1174: .rozvozova_mista_sloupce mrizka
   - content2024.css 1204: .seznam_odbernych_mist .misto mrizka

   Zamerne nehotove a proc:
   - **Tlacitko Overit zustava pod polem PSC, ne vedle nej.** Pole i tlacitko jsou kazde
     ve svem `div.fpol` a `.fpol` je funkcni trida enginu, na ktere se podle kontraktu
     bod 3 nesmi menit `display` ani `width`. Prvni `.fpol` ma navic inline `width: 15em`.
     Dostat tlacitko vedle pole tedy znamena sahnout na HTML nebo na funkcni tridu.
     **Vyzaduje HTML / Mojmira.** Pole ma 48 px a tlacitko je tmave, jak zadani chtelo.
   - **Mapa `#map` se nestyluje vubec**, jen okoli. Vykresluje ji Google Maps do vlastniho
     kontejneru a jakykoliv zasah do ni je loterie.
   - **Rozbaleni mest v seznamu odbernych mist** (`.infomenu.toggle .con` s `max-height`)
     je JS enginu. Meni se jen barvy a pismo, `max-height` ani `overflow` se nedotykam.
   - **Zaskrtavaci kolecko `.checkmark`** ma po zaskrtnuti obrazek `check.png` na bilem
     podkladu. Prepisuje se jen `border-color` a `background-color`, ne cely `background`,
     aby obrazek fajfky zustal.
*/

/* ---------------------------------------------------------------
   1. Formular PSC. Bily obal pres celou sirku pasu vypadal jako pruh,
      ktery tam nepatri. Formular je karta na stred, obal je pruhledny.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas div:has(> #form_rozvoz) {
  background: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas #form_rozvoz {
  box-sizing: border-box;
  max-width: 460px;
  margin-inline: auto;
  padding: var(--zs-odstup-xl) !important;
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas #form_rozvoz p {
  margin: 0 0 var(--zs-odstup-base);
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas #form_rozvoz label {
  display: block;
  margin: 0 0 var(--zs-odstup-sm);
  font-family: var(--zs-pismo);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas #form_rozvoz label em {
  color: var(--zs-barva-stav-chyba);
  font-style: normal;
}
/* odpoved AJAXu (rozvazime, nerozvazime) */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas #form_rozvoz .f_vystraha {
  color: var(--zs-barva-stav-chyba);
  font-size: 16px;
  font-weight: 600;
}

/* ---------------------------------------------------------------
   2. Seznamy mest ve ctyrech sloupcich
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .rozvozova_mista_sloupce li {
  padding: var(--zs-odstup-xs) 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--zs-barva-text-zakladni);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .rozvozova_mista_sloupce li a {
  color: var(--zs-barva-text-odkaz);
  text-decoration: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .rozvozova_mista_sloupce li a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   3. Seznam odbernych mist. Kazde mesto je karta jako na homepage.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .seznam_odbernych_mist .infomenu {
  margin: 0 0 var(--zs-odstup-md);
  padding: var(--zs-odstup-xl);
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .seznam_odbernych_mist .infomenu > h3 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .seznam_odbernych_mist .misto {
  padding: var(--zs-odstup-base) 0;
  border-top: 1px solid var(--zs-barva-ramecek-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .seznam_odbernych_mist .misto p {
  margin: 0 0 var(--zs-odstup-xs);
  font-size: 16px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .seznam_odbernych_mist .misto strong {
  color: var(--zs-barva-text-nadpis);
  font-weight: 600;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .seznam_odbernych_mist .misto a {
  color: var(--zs-barva-text-odkaz);
  text-decoration: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .seznam_odbernych_mist .misto a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   4. Kalkulacka. Obal je karta, uvnitr uz pole resi zaklad.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #clanek #online_kalk.online_kalkulacka {
  padding: var(--zs-odstup-xl);
  background: var(--zs-barva-pozadi-sekce);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek #online_kalk h2,
body:has(.zs26-hlavicka):not(.foxplus) #clanek #online_kalk h3 {
  padding-top: 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek #online_kalk tr td {
  border-top: 1px solid var(--zs-barva-ramecek-karta);
  padding: var(--zs-odstup-md) 0;
  font-size: 16px;
  line-height: 1.5;
  vertical-align: middle;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek #online_kalk label {
  font-family: var(--zs-pismo);
  font-size: 16px;
  line-height: 1.7;
  color: var(--zs-barva-text-zakladni);
}
/* kreslene kolecko a ctverecek prepinace: jen barvy, obrazek fajfky zustava */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) label.ch_radio .checkmark,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) label.ch_box .checkmark {
  background-color: var(--zs-barva-pozadi-karta);
  border-color: var(--zs-barva-ramecek-pole);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) label.ch_radio input:checked ~ .checkmark,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) label.ch_box input:checked ~ .checkmark {
  border-color: var(--zs-barva-akce-primarni);
  background-color: var(--zs-barva-pozadi-karta);
}
/* Tlacitko Spocitej je `span.submit.button_hlavni`, ne `button` ani `a`, takze na nej
   pravidla zakladu pro tlacitka nedosahnou a zustalo mu z legacy limetka s bilym textem
   (content2024.css 142, kontrast 1,8:1). Je to akce formulare, ne vstup do objednavky,
   takze podle kontraktu bod 9 patri tmave. */
body:has(.zs26-hlavicka):not(.foxplus) #clanek #online_kalk span.button_hlavni {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--zs-vyska-tlacitko);
  padding: 0 var(--zs-odstup-xl) !important;
  border: 2px solid var(--zs-barva-akce-tmave) !important;
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-akce-tmave) !important;
  color: var(--zs-barva-text-inverzni) !important;
  font-family: var(--zs-pismo);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek #online_kalk span.button_hlavni:hover {
  background: var(--zs-barva-akce-tmave-hover) !important;
  border-color: var(--zs-barva-akce-tmave-hover) !important;
}
/* odkaz v kalkulacce ma z legacy limetku pres id, proto se prebiji taky pres id */
body:has(.zs26-hlavicka):not(.foxplus) #clanek #online_kalk a {
  color: var(--zs-barva-text-odkaz);
}

/* vysledek kalkulacky */
body:has(.zs26-hlavicka):not(.foxplus) #clanek .vysledek {
  font-family: var(--zs-pismo);
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek .vysledek strong {
  color: var(--zs-barva-text-nadpis);
  font-weight: 700;
}

/* ---------------------------------------------------------------
   5. Mobil
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .seznam_odbernych_mist .infomenu {
  padding: var(--zs-odstup-base);
}
body:has(.zs26-hlavicka):not(.foxplus) #clanek #online_kalk.online_kalkulacka {
  padding: var(--zs-odstup-base);
}
@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .seznam_odbernych_mist .infomenu {
    padding: var(--zs-odstup-xl);
  }
  body:has(.zs26-hlavicka):not(.foxplus) #clanek #online_kalk.online_kalkulacka {
    padding: var(--zs-odstup-xl);
  }
}

/* ===== css-obsah/65-redakce.css ===== */
/* 65-redakce.css
   Co to je: sest trid, ktere si redaktor vybere v JCE v nabidce Styly a pouzije primo
   v tele clanku. Plati na vsech ceskych podstrankach testu webvyvoj2. Stavitel 0, noc 25. 8. 2026.

   Nazvy jsou zavazne, manual pro redaktory na nich stavi:
     .zs-tlacitko            tlacitko s obrysem (vychozi)
     .zs-tlacitko--primarni  limetkove tlacitko (jen vstup do objednavky)
     .zs-box                 svetle zeleny box
     .zs-box--kremovy        kremova varianta boxu
     .zs-karty-2             mrizka karet, 2 sloupce od 700 px
     .zs-karty-3             mrizka karet, 2 sloupce od 700 px a 3 od 1024 px

   Proc to tady je znovu, kdyz .zs-tlacitko uz existuje: v novy-2026.css je definovane
   pod .zs26, tedy jen uvnitr novych modulu. Telo clanku zadny .zs26 obal nema, takze
   by tam trida nic neudelala. Tady je stejny vzhled pro obsah clanku.

   Nacita se za 60-zaklad.css, takze prebiji jeho tlacitkova pravidla, kdyz redaktor
   da .zs-tlacitko na odkaz, ktery uz ma tridu enginu.
   Scope ma stejne jako 60-zaklad.css, vcetne :not(.foxplus): na /objednavka plati
   vrstva modulu 890, ne skin.

   Zamerne nehotove:
   - hover a fokus drzi stejnou logiku jako 20-komponenty.css, nic navic
   - .zs-karty-2 a .zs-karty-3 stylujou primo sve deti, at je karta div, li nebo p.
     Redaktor v JCE neumi dat tridu na kazdou kartu zvlast.
   - zadne stiny (kontrakt bod 5)
*/

/* ---------------------------------------------------------------
   1. Tlacitka pro redaktory

   `:not(.zs26 *)` doplneno 30. 8. 2026. Hlavicka nahore predpoklada, ze telo
   clanku zadny obal .zs26 nema. U rozcestniku to neplati: cely rozcestnik JE
   div.zs26 uvnitr #clanek, takze `#obsah > :not(.zs26) .zs-tlacitko` sahalo
   i na tlacitka modulu ZS26 a se svym ID prebijelo i pravidla s !important
   z novy-2026.css. Projevilo se to az 30. 8. u tmave hlavicky /sportuji:
   sekundarni tlacitko zustalo bila plocha misto obrysu. Tataz vada mela
   i tichou cast, tlacitko .zs-tlacitko--male melo padding 24 px misto 20 px.
   Je to stejna past jako u `#clanek h1` z 25. 8.: co je scopnute na obal
   clanku, sahne i dovnitr bloku ZS26.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-tlacitko:not(.zs26 *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zs-odstup-sm);
  min-height: var(--zs-vyska-tlacitko);
  padding: 0 var(--zs-odstup-xl) !important;
  border-radius: var(--zs-radius-pill) !important;
  font-family: var(--zs-pismo);
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  background: var(--zs-barva-pozadi-karta) !important;
  color: var(--zs-barva-text-nadpis) !important;
  border: 2px solid var(--zs-barva-akce-sekundarni-ramecek) !important;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-tlacitko:not(.zs26 *):hover {
  background: var(--zs-barva-akce-sekundarni-hover) !important;
  color: var(--zs-barva-text-nadpis) !important;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-tlacitko:not(.zs26 *):focus-visible {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}

body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-tlacitko--primarni:not(.zs26 *) {
  background: var(--zs-barva-akce-primarni) !important;
  color: var(--zs-barva-akce-primarni-text) !important;
  border-color: var(--zs-barva-akce-primarni) !important;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-tlacitko--primarni:not(.zs26 *):hover {
  background: var(--zs-barva-akce-primarni-hover) !important;
  border-color: var(--zs-barva-akce-primarni-hover) !important;
  color: var(--zs-barva-akce-primarni-text) !important;
}

/* ---------------------------------------------------------------
   2. Boxy
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-box,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) p.zs-box,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .pozadi-flexi .text p.zs-box {
  box-sizing: border-box;
  margin: 0 0 var(--zs-odstup-xl);
  /* !important: hero pas (.pozadi-flexi .text p) i zaklad nastavuji odstavcum padding 0, box ho potrebuje (overeno na testovacim clanku 973) */
  padding: var(--zs-odstup-xl) !important;
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-sekce);
  color: var(--zs-barva-text-zakladni);
  font-size: 16px;
  line-height: 1.55;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-box--kremovy {
  background: var(--zs-barva-pozadi-sekce-2);
}
/* posledni odstavec v boxu uz odstup dole nepotrebuje */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-box > p:last-child,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-box > ul:last-child,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-box > ol:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   3. Mrizky karet. Deti jsou karty, na mobilu pod sebou, v rade stejne vysoke.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-karty-2,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-karty-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-xl);
  align-items: stretch;
  margin: 0 0 var(--zs-odstup-xl);
  padding: 0;
  list-style: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-karty-2 > *,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-karty-3 > * {
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: var(--zs-odstup-xl);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
  list-style: none;
  font-size: 16px;
  line-height: 1.55;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-karty-2 > * > :last-child,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-karty-3 > * > :last-child {
  margin-bottom: 0;
}

@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-karty-2,
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-karty-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > :not(.zs26) .zs-karty-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== css-obsah/70-clanky.css ===== */
/* 70-clanky.css
   Co to je: spolecne veci obsahovych podstranek (hero pas, spodni lista, kontaktni bloky,
   vypisy recenzi) a skupina Kontakt a O nas. Stavitel B, noc 25. 8. 2026.
   Stranky: /kontakt, /o-nas, /kariera, /spoluprace, /ohlasy, /napsali-o-nas,
   /krabickova-dieta-praha, /krabickova-dieta-brno, /podekovani2024.
   Sekce 1 a 2 plati na vsech podstrankach, protoze hero pas i spodni lista jsou vsude.

   Navazuje na 60-zaklad.css (pismo, barvy, tlacitka, pole, drobecky) a nepredefinovava ho.

   Co je zmereno 25. 8. v headless Chromu (port 9302), ne odhadnuto:
   - hero: div.pas.mNNN.bezlimitu > div.pozadi-flexi.programy > div.text > div.vnor.main_limit50
     plus div.foto > div.stin + img. Na 1440 zacinal text hero na 55 px, obsah clanku
     (#clanek) na 150 px, tedy hero byl o 95 px vlevo mimo osu hlavicky i obsahu.
   - .vnor.main_limit50 ma z template2024.css width 95% a max-width 665px, .text je
     flexbox s justify-content flex-end (desktop) a center (mobil), proto to sedelo nakrivo.
   - vypisy (/blog, /aktuality, /ohlasy, /kariera, /napsali-o-nas) a detaily clanku maji
     hero o patro hloubeji: #obsah > .pas.m250.pozadi4.bezlimitu > div > .pas.bezlimitu.pozadi4.linka
     > .pozadi-flexi. Selektory v 60-zaklad.css chteji .pas jako primeho potomka #obsah,
     takze se tam hero typografie vubec nedostane a odstavce zustavaly na 14 px.
     Proto ma sekce 1 selektor `#obsah .pas.bezlimitu` (potomek, ne dite) a sekce 1b
     dopisuje typografii jen pro vnorene hero (`#obsah > .pas .pas.bezlimitu`).
   - p.tel a p.mail v hero maji ikonu jako background-image z content2024.css na pozici
     0px 5px (tel) a 0px 12px (mail) a odsazeni padding-left 40px. 60-zaklad.css da hero
     odstavcum padding 0, cimz ikona skoncila pod textem (videt na /kontakt pred).
   - #respofix je primy potomek body (ne #obsah), position fixed, bottom 0, vyska 80 px,
     zobrazuje se pod 1024 px (body_v3 a nizsi), nad 1024 ma display none.
     Uvnitr je .s_outer > .s_inner.myDraggable.limitL > .cenik_nabidka > ul, tedy vodorovny
     posuvny karusel enginu. Menim jen barvy, pismo a odsazeni, nic pohybliveho.

   Zamerne nehotove a proc:
   - Fotka hero zustava od kraje ke kraji a bez zaobleni. Zaobleni by chtelo overflow
     na .foto a pod nim lezi absolutne posazeny prekryv .stin, takze by pod rohy prosvital.
     Homepage ma hero fotku v ramu, tady by to znamenalo zmenu HTML (kontrakt bod 6).
   - Vyska hero se nezvetsuje ani nezmensuje pres min-height, jen se snizuje na mobilu
     tam, kde ji sablona natvrdo drzela na 500 px (viz sekce 1).
   - Kartu dostanou jen telefon a mail v hero (p.tel, p.mail). Blok Firemni udaje v clanku
     je jen posloupnost odstavcu bez obalu, kartu z nej udelat nejde bez zmeny HTML
     (kontrakt bod 6). Redaktor to umi tridou .zs-karty-2 z 65-redakce.css (viz EDITORI.md).
   - Radek Dalsi kontakty na /kontakt ma v HTML u prvnich tri adres chybejici <br>, takze
     mail a nasledujici popisek splyvaly do jednoho slova (bylo tak i pred skinem).
     Resim to zlomem na joomla-hidden-mail jen na teto strance. Spravne to patri do JCE.
   - Spodni lista #respofix dostane jen barvy, pismo a odsazeni. Position se nemeni
     (kontrakt bod 3) a misto pod ni uz drzi skript sablony (viz sekce 2).
   - Vetsi pismo v liste ji zvysilo z 80 na zhruba 104 px. Je to cena za kontrakt bod 8
     (cteny text nejmene 16 px). Skript sablony si vysku prepocita sam.
*/

/* ---------------------------------------------------------------
   1. Hero pas podstranek: text na stejne ose jako obsah clanku
      Cil: leva hrana textu hero = leva hrana #clanek = leva hrana obsahu hlavicky.
      Vzorec: obsah zacina na max(bocni odsazeni, (sirka okna - 1180) / 2 + bocni odsazeni).
      Procentni padding na .text se pocita ze sirky .pozadi-flexi, tedy z cele sirky okna,
      takze 50% = polovina okna a vzorec vyjde presne bez vw (vw pocita i posuvnik).
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi > .text {
  box-sizing: border-box;
  padding-inline: max(
      var(--zs-odstup-base),
      calc(50% - var(--zs-sirka-obsah) / 2 + var(--zs-odstup-base))
    )
    0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi > .text > .vnor {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding: 0 var(--zs-odstup-base) var(--zs-odstup-lg) 0;
  text-align: left;
}

@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi > .text {
    padding-inline: max(
        var(--zs-odstup-lg),
        calc(50% - var(--zs-sirka-obsah) / 2 + var(--zs-odstup-lg))
      )
      0;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi > .text > .vnor {
    padding-right: var(--zs-odstup-2xl);
  }
}

/* Drobecky v hero sedi tesne nad nadpisem, at nadpis nekopiruje odstup dvakrat. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi ul.breadcrumbC {
  padding: 0 0 var(--zs-odstup-lg);
}

/* ---------------------------------------------------------------
   2. Spodni lista #respofix. OD 29. 8. 2026 SE NEZOBRAZUJE.
      Vypina ji novy-2026.css, sekce KONTRAKT DNA OBRAZOVKY. Puvodni pravidla
      (barvy, pismo 16 px) jsou v zaloze 70-clanky.css.pred-spodek.

      Hranice neni 1024, je 900: template2024.css:1592 je `.body_v3 #respofix
      {display:block}` a tridu body_v3 pridava template2024.js:783 pri
      sirkawindow < 900. Overeno behounem qa-sirky.mjs: videt na 390, 768 a 899,
      neni na 900 ani 1024.

      OPRAVA VECNE CHYBY: puvodni komentar tady tvrdil, ze inline styl ze skriptu
      sablony prebije cokoliv odsud, a proto se misto pod listou v CSS neresi.
      Je to obracene. V kaskade je autorsky !important NAD inline normal, takze
      nase pravidlo vyhrava. Rezervace mista je proto v novy-2026.css jako
      `body:has(.zs26-hlavicka) { padding-bottom: var(--zs-spodek) !important }`
      a to !important tam neni hack, ale jediny spravny nastroj: az #respofix
      zmizi, zacne template2024.js psat inline `padding-bottom: 0px`.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   1b. Typografie vnoreneho hero (vypisy blogu a detaily clanku).
       60-zaklad.css sem nedosahne, protoze chce .pas jako primeho potomka #obsah.
       Hodnoty jsou stejne jako v zakladu, at hero vypada vsude stejne.
       Selektor `#obsah > .pas .pas.bezlimitu` schvalne trefi jen vnorene pasy,
       aby se pravidla zakladu nepredefinovavala tam, kde uz plati.

       31. 8. 2026: barvy odsud zmizely, zustala jen geometrie a pismo.
       Hero je od te doby tmave zelene a barvy resi jedno misto, sekce 6b.
       Kdyby barvy zustaly i tady, prebily by ji: tenhle selektor ma o jednu
       tridu vic (`> .pas`), takze na vypisech blogu a v detailu clanku
       zustaval nadpis tmavy na tmavem a mizel.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .pas.bezlimitu > .pozadi-flexi {
  font-family: var(--zs-pismo);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .pas.bezlimitu > .pozadi-flexi h2 {
  margin: 0;
  padding: 0 0 var(--zs-odstup-md);
  font-size: clamp(26px, 2.7vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .pas.bezlimitu > .pozadi-flexi h3 {
  margin: 0;
  padding: 0 0 var(--zs-odstup-md);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .pas.bezlimitu > .pozadi-flexi p {
  margin: 0 0 var(--zs-odstup-base);
  padding: 0;
  font-size: 16px;
  line-height: 1.55;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .pas.bezlimitu > .pozadi-flexi h1 strong,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas .pas.bezlimitu > .pozadi-flexi h2 strong {
  font: inherit;
  color: inherit;
}
/* prazdny odstavec z JCE nema delat diru */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi p:empty {
  margin: 0;
}

/* ---------------------------------------------------------------
   3. Telefon a mail v hero (/kontakt) jako karta.
      Ikona je background-image z content2024.css, takze se posouva
      jen pres background-position, obrazek se nesaha.
      Mereno: p.tel background 0px 5px, p.mail 0px 12px, oba padding-left 40px.
      Sablona jim pod 1024 px davala width 200px a display table (vystredene),
      to se tady rusi, at karta drzi sirku sloupce hero.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi p.tel,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi p.mail {
  display: block;
  width: auto;
  max-width: 420px;
  margin: 0 0 var(--zs-odstup-md);
  padding: var(--zs-odstup-lg) var(--zs-odstup-lg) var(--zs-odstup-lg) 60px;
  background-color: var(--zs-barva-pozadi-sekce);
  background-position: var(--zs-odstup-lg) 22px;
  border-radius: var(--zs-radius-karta);
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
  text-align: left;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi p.mail {
  background-position: var(--zs-odstup-lg) 26px;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi p.tel strong,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi p.mail strong {
  padding: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi p.tel a,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi p.mail a {
  color: var(--zs-barva-text-nadpis);
  text-decoration: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi p.tel a:hover,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi p.mail a:hover {
  text-decoration: underline;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi .tel_info {
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}

/* ---------------------------------------------------------------
   4. /kontakt (body.p114): blok Dalsi kontakty.
      V HTML chybi <br> mezi prvnimi tremi adresami, takze mail a dalsi popisek
      splyvaly (objednavky@zdravestravovani.czVedeni spolecnosti:). Zlom na adrese
      to rozdeli na dvojice popisek a adresa. Jen na teto strance a jen v tomto odstavci.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus).p114 #obsah #clanek > h2:first-child + p joomla-hidden-mail,
body:has(.zs26-hlavicka):not(.foxplus).p655 #obsah #clanek > h2:first-child + p joomla-hidden-mail,
body:has(.zs26-hlavicka):not(.foxplus).p651 #obsah #clanek > h2:first-child + p joomla-hidden-mail{
  display: block;
  padding: 0 0 var(--zs-odstup-sm);
}
body:has(.zs26-hlavicka):not(.foxplus).p114 #obsah #clanek > h2:first-child + p br,
body:has(.zs26-hlavicka):not(.foxplus).p655 #obsah #clanek > h2:first-child + p br,
body:has(.zs26-hlavicka):not(.foxplus).p651 #obsah #clanek > h2:first-child + p br{
  display: none;
}

/* ---------------------------------------------------------------
   5. Hero pas podstranek, geometrie. Doplneno 25. 8. 2026 odpoledne.

   Puvodni blok z rana (Marek: "hromada prazdneho mista, breadcrumb nalepeny
   na okraj") zapsal padding-inline s JEDNOU hodnotou misto dvou. Tim se pravy
   padding .text zmenil z 0 na 150 px a textovy sloupec spadl ze 570 na 420 px,
   z toho 388 px obsahu. Nadpis /rozvoz se pak lamal na 4 radky misto 2
   a pas vyrostl z 419 na 520 px. Tady je to vracene na dvouhodnotovy zapis.

   Druha vada: .text ma ze sablony napocitanou pevnou vysku (mereno 362 px pri
   pasu 373 px), takze je presne tak vysoky jako jeho obsah a align-items: center
   nema co centrovat. Proto height: auto.

   Treti vada: dokud je img v normalnim toku, vysku pasu diktuje pomer stran
   fotky (964x500), ne obsah. Diry pod fotkou merene 25. 8.: /rozvoz 147 px,
   detail clanku 91 px, /blog 47 px, /kontakt 33 px. Po position: absolute
   plus object-fit: cover fotka vysku jen vyplnuje a diktuje ji text.

   Zmereno po oprave na 11 strankach: dira pod fotkou 0 px, dira pod textem 0 px,
   textovy sloupec 570 px. Medián konkurence (7 nezavislych systemu, mereno
   v prohlizeci 25. 8.) je 569 px a vyska hlavicky 470 px, nase vychazi 400 az 546.

   Selektor ma navic :has(h1), aby trefil jen hlavicku stranky a ne jiny pas
   se stejnou strukturou (na kazde strance je prave jeden takovy pas, overeno
   na 8 strankach). Na mobilu se sloupce skladaji pres flex-wrap: wrap a sirku
   100 %, ne pres flex-direction, proto je vse v @media (min-width: 700px).
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi > .text {
  align-items: center;
  padding-inline: max(var(--zs-odstup-2xl), calc(50% - var(--zs-sirka-obsah) / 2 + var(--zs-odstup-lg))) 0;
}
/* Svisly rytmus hlavicky. Do 31. 8. 2026 to bylo 32 px na obou koncich a web
   mel pet rodin hlavicek s peti ruznymi hodnotami (44/44, 32/44, 20/24, 40/40
   a tahle). Sjednoceno na 44 px na mobilu a 64 px od 700 px, stejne jako
   .zs-sekce v novy-2026.css. Padding patri sem, na textovy sloupec, ne na pas:
   na .pas by odsadil i fotku, ktera ma na desktopu jit az k hrane pasu. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi > .text > .vnor {
  padding-block: var(--zs-odstup-sekce-mobil);
}
@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi > .text > .vnor {
    padding-block: var(--zs-odstup-sekce);
  }
}
/* Posledni prvek ve sloupci nese vlastni spodni margin (odstavce 16 px,
   nekde 12), takze mereno 31. 8. vychazelo dole 80 px proti 64 nahore.
   Odstup drzi padding sloupce, ne margin obsahu. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi > .text > .vnor > :last-child {
  margin-bottom: 0;
}
/* Na /blog a /ohlasy konci sloupec odstavcem <p><span class="alink roluj">
   Zjistit vice</span></p>, ktery sablona nechava v HTML a skryva ho az CSS.
   :last-child je strukturalni, ne vizualni, takze pravidlo vys mirilo na nej
   a viditelnemu odstavci margin zustal: /blog melo dole 80 px misto 64
   (mereno 31. 8. 2026). Tohle dosahne na posledni videny prvek. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi > .text > .vnor > :has(+ p:last-child > span.alink) {
  margin-bottom: 0;
}
@media (min-width: 700px) and (max-width: 1239px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah,
  body:has(.zs26-hlavicka):not(.foxplus) #obsah > .pas > .main_limit {
    padding-inline: var(--zs-odstup-2xl);
  }
}

/* Bez breakpointu, schvalne. Sablona prepina hero na dva sloupce az mezi
   800 a 900 px (mereno: 800 pod sebou, 900 vedle sebe po 450 px). Dokud je
   .pozadi-flexi zalomeny na dva radky, nesmi fotka ztratit vlastni vysku,
   jinak spadne na nulu. Proto zadne absolutni posazeni obrazku a zadny
   min-height na kontejneru, ktery by se mezi dva radky rozdelil.

   Misto toho: vysku pasu urcuje textovy sloupec (min-height na .text),
   fotka se k nemu natahne pres align-self a obrazek ji vyplni pres height 100 %
   a object-fit. Kdyz jsou sloupce pod sebou, height 100 % se vyhodnoti jako auto
   a fotka si nechá vlastni pomer stran.

   height: auto na .text i .foto je nutne: sablona jim pocita pevnou vysku
   (mereno .text 362 px pri pasu 373 px), takze by se nenatahly a align-items:
   center by nemel co centrovat.

   Zmereno na /rozvoz pres sirky 390, 700, 768, 800, 900, 1000, 1023, 1024,
   1280, 1440 a 1920: nikde dira pod fotkou ani pod textem. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .text {
  height: auto;
  align-self: stretch;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto {
  align-self: stretch;
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto > .okolofoto {
  position: static;
  height: 100%;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobil: fotka jako karta, ne na doraz. Mereno 31. 8. 2026 na 390 px: pod
   700 px je .pozadi-flexi zalomena, fotka je samostatny radek pres celou sirku
   a pas pod ni koncil na nule, takze na /o-nas, /jak-to-funguje, /kontakt
   a /chci-jist navazovala svetla sekce primo na spodni hranu fotky
   (/blog a /ohlasy mely 9 px). Sjednoceno s hero rozcestniku: 20 px od kraju,
   radius 24, pod ni 44 px. Od 700 px se fotka vraci k hrane pasu.

   box-sizing je nutne vyslovne, sablona neni globalne border-box (proto ho
   ma i .text a .vnor vys), jinak by padding rozsiril fotku pres okraj. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto {
  box-sizing: border-box;
  padding: 0 var(--zs-odstup-lg) var(--zs-odstup-sekce-mobil);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto img {
  border-radius: var(--zs-radius-velke);
}
/* Gradient .stin ustupuje doprava, coz na zalomenem mobilu neni prechod
   do pasu, ale vodorovny sev pres fotku (mereno na /o-nas: .stin 150 px
   pres 203 px vysokou fotku). Na desktopu je funkcni, tam zustava. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto .stin {
  display: none;
}

@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto {
    padding: 0;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto img {
    border-radius: 0;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto .stin {
    display: block;
  }
}

/* Spodni mez vysky hlavicky drzi textovy sloupec, ne kontejner. Median vysky
   hlavicky u sedmi merenych konkurentu je 470 px, nase vychazi 400 az 505.
   Na mobilu se nedrzi, tam je hlavicka i tak vysoka dost. */
@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .text {
    min-height: 400px;
  }
}

/* ---------------------------------------------------------------
   6. Hero pas: jedna barva pozadi a gradient, ktery do ni ustupuje.

   Merene 25. 8.: /rozvoz mel pas rgb(246,255,242), /jak-to-funguje a /kontakt
   bilou, /blog a detail clanku rgb(250,251,253). Tri barvy pro tutez vec.
   Barva je dnes trida pozadi4 na modulu, sjednotit ji v Joomle by znamenalo
   projit 163 modulu, tady staci jeden selektor.

   Prekryv .stin je gradient natvrdo do rgb(250,251,253) bez ohledu na pas,
   takze na mint pasu byl videt jako sedava smouha. Ustupuje ted do barvy pasu.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .pozadi-flexi h1) {
  background-color: var(--zs-barva-pozadi-tmave);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto > .stin {
  background-image: linear-gradient(to right, var(--zs-barva-pozadi-tmave), transparent);
}

/* ---------------------------------------------------------------
   6b. Text v tmavem hero pasu.

   Prebarveno 31. 8. 2026 na Markuv pokyn: hlavicky vsech podstranek maji byt
   tmave zelene jako na /objednavka a /jidelnicek. Do 30. 8. byl pas svetly
   (--zs-barva-pozadi-jemne) a nadpis tmavy, takze web mel dva druhy hlavicek:
   tmavou na homepage, rozcestnicich, strankach programu a objednavce, svetlou
   na zbytku.

   Barvy textu jsou v 60-zaklad.css sekci 3, ale prepisuji se tady, ne tam.
   Duvod: sekce 3 plati na kazdy pas .bezlimitu, kdezto tmave je jen ten
   s H1, tedy hlavicka stranky. Kdyby se barvy zmenily v zakladu, obarvily by
   i pasy bez H1, ktere zustavaji svetle. Proto :has(h1) u vsech pravidel.

   Selektor bez primeho potomka za #obsah trefi i vnorene hero (vypisy blogu
   a detail clanku), kde je pas o uroven niz. Tam plati totez.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1),
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) h1,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) h2,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) h3,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) h4,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) p,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) li {
  color: var(--zs-barva-text-na-tmavem);
}

/* strong a em barvu nedostavaji, dedi ji. Svetla natvrdo je rozbila uvnitr
   svetlych karet v hero: datum clanku na /blog/<clanek> je <span> se svetlym
   podkladem a v nem <strong>7.3.</strong>, ze ktereho zbylo jen "2026".
   Dedeni resi oboji: v textu pasu vyjde svetle, v karte tmave. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) strong,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) em {
  color: inherit;
}

/* Drobecky jsou vedlejsi, at nesoutezi s nadpisem. Tlumeni je pruhlednost
   svetleho textu, ne seda: kontrast na tmave zelene vychazi 6,6:1, tedy nad
   hranici 4,5:1. Aktualni polozka je holy <span> s barvou --zs-barva-text-nadpis,
   tedy presne barvou noveho pozadi, takze bez tohohle pravidla by z pasu zmizela.
   Stejna past se resila na /objednavka, viz 26/css/novy-2026-objednavka.css U5. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) ul.breadcrumbC,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) ul.breadcrumbC * {
  color: var(--zs-barva-text-na-tmavem);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) ul.breadcrumbC {
  opacity: .72;
}

/* Domecek v drobeckach je SVG s barvou z template2024.css, takze se
   currentColor neridi. Prebarvuje se filtrem: na tmavem podkladu ma byt
   svetly. Tyka se jen ikony v drobeckach hero, jinde se nic nemeni. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) ul.breadcrumbC img,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) ul.breadcrumbC svg {
  filter: brightness(0) invert(1);
}

/* Textovy odkaz v hero mel barvu --zs-barva-text-odkaz, tmave olivovou.
   Na tmavem podkladu vychazi na 1,5:1. Pravidlo schvalne neni jen na odkaz
   v odstavci, jak ho ma sekce 7: na /jak-to-funguje/faq jsou odkazy na mail
   a telefon uvnitr H3, tedy v perexu, a ty by vypadly.
   Odkaz s tridou se nemeni, to je tlacitko a to si barvy resi samo. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) a:not([class]) {
  color: var(--zs-barva-text-na-tmavem);
}

/* ---------------------------------------------------------------
   6c. Hero pas bez .pozadi-flexi (/doporucovaci-kalkulacka).

   Sablona kresli hlavicku dvema zpusoby. Bezny pas ma .pozadi-flexi
   se sloupcem textu a fotkou, to resi 6 a 6b. Kalkulacka ma H1 rovnou
   v .main_limit a barvu pozadi bere z tridy pozadi2, takze do predchozich
   selektoru nespadne a zustala by jedina svetla hlavicka na webu.

   Selektor je `:has(> .main_limit h1)`, tedy pas, ktery ma nadpis stranky
   primo ve svem obsahovem sloupci. Pas bez H1 se nemeni.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) {
  background: var(--zs-barva-pozadi-tmave);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) .main_limit,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) .main_limit h1,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) .main_limit h2,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) .main_limit h3,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) .main_limit p {
  color: var(--zs-barva-text-na-tmavem);
}
/* strong dedi ze stejneho duvodu jako v 6b */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) .main_limit strong,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) .main_limit em {
  color: inherit;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) .main_limit a:not([class]) {
  color: var(--zs-barva-text-na-tmavem);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) .main_limit ul.breadcrumbC,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) .main_limit ul.breadcrumbC * {
  color: var(--zs-barva-text-na-tmavem);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) .main_limit ul.breadcrumbC {
  opacity: .72;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) .main_limit ul.breadcrumbC img,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu:has(> .main_limit h1) .main_limit ul.breadcrumbC svg {
  filter: brightness(0) invert(1);
}

/* Karta s telefonem a mailem na /kontakt zustava svetla, je to karta na pasu,
   ne text v nem. Bez tohoto pravidla by ji pravidlo vys obarvilo na svetlo
   a text by zmizel do pozadi karty. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) p.tel,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) p.mail {
  color: var(--zs-barva-text-zakladni);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) p.tel strong,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) p.mail strong,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) p.tel a,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) p.mail a {
  color: var(--zs-barva-text-nadpis);
}

/* ---------------------------------------------------------------
   7. Prosty odkaz v hero pasu je textovy odkaz, ne tlacitko.
      Doplneno 25. 8. 2026 odpoledne k rozhodnuti Marka o jednom primarnim
      tlacitku v hlavicce.

   Konkurence (7 nezavislych systemu, mereno 25. 8.): pet z sesti ma v hlavicce
   podstranky prave jedno tlacitko, zadny nema dve vedle sebe. Na /rozvoz byly
   tri stejne silne, vsechny jen kotvy na sekce tehoz dokumentu.

   Redakce nemusi znat zadnou novou tridu: odkaz bez tridy v odstavci hero
   se vykresli jako podtrzeny textovy odkaz, odkaz s tridou button_hlavni
   zustane tlacitkem. Sest editorskych trid z 65-redakce.css se nemeni.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) .vnor > p > a:not([class]) {
  margin-right: var(--zs-odstup-lg);
  font-weight: 600;
  color: var(--zs-barva-text-odkaz);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) .vnor > p > a:not([class]):hover {
  text-decoration: none;
}

/* ===== css-obsah/71-blog.css ===== */
/* 71-blog.css
   Co to je: vypisy clanku a detail clanku. Stavitel B, noc 25. 8. 2026.
   Stranky: /blog, /blog/<rubrika>, detail clanku (/blog/<slug>), /aktuality
   a se stejnou znackou i /ohlasy, /kariera, /napsali-o-nas (ty patri do skupiny 2,
   ale vypis maji tentyz, takze se resi tady jednou pro vsechny).
   Hero techto stranek je v 70-clanky.css, sekce 1 a 1b.

   Tohle je pro redakci nejdulezitejsi soubor: novy clanek napsany v JCE musi vypadat
   dobre bez jakehokoliv zasahu do CSS.

   Zmereno 25. 8. v headless Chromu, ne odhadnuto:
   - vypis: .item-page.blog > .blog-all.inpas_okolo > .inpas_obsah > .blog_vypis_dalsi + .pagination
   - karta: .item > .blogitem(.velke_foto) > [a > .velkefotoitem > img] + .bl
     .bl > .nadpis (span.datum + a > h2) + .introtext (.orez > p... + .stinek, pak .vicezde_kat)
   - template2024.css: .blog_vypis_dalsi grid 1fr 1fr, .body_v3 1fr (mobil),
     .blogitem padding 30px, border 1px, radius 11px, bila plocha,
     .blogitem > div.fotoitem 145x145, .orez height 85px + .stinek bily prechod,
     .blog .datum 60x60, radius 7px, font 14px, strong 17px.
   - Karty v jedne rade nemely stejnou vysku (mereno na /ohlasy: .item 250 px,
     .blogitem uvnitr 240 px, sousedni karta 276 px). Marek chce stejne vysky.
   - /aktuality ma nahore .blog-lead > .modul-novinky-hp > div > .leaditems se stejnymi kartami.
   - detail clanku: #clanek.item-page.blogvelkefoto.clanek_blogu, sirka 800 px na stred,
     hero nese .nadpis-blog > span.datum-blog + span.textvedle a pak h1 a perex.

   Zamerne nehotove a proc:
   - Vypis zustava na dvou sloupcich na desktopu, ne na trech. Sloupec obsahu ma vedle
     sebe bocni panel a meri 755 px (/blog) az 875 px (/ohlasy). Tri karty vedle sebe
     by mely pod 250 px na kartu, coz je na nadpis a perex malo. Tri sloupce by chtely
     schovat bocni panel, a to je zmena HTML sablony (kontrakt bod 6).
   - Orez perexu zustava, jen uz neni na pevnou vysku, ale na tri radky pres line-clamp
     (oprava C po QA vlne 1, viz sekce 5). Drzi karty priblizne stejne vysoke uz v zaklade
     a bez nej by se z vypisu staly ruzne dlouhe sloupce. .stinek zustava v DOM,
     jen uz nema plochu, takze nic nezakryva.
   - Obrazek karty si nechava svuj pomer z .velkefotoitem (aspect-ratio 1.928 / 1).
   - .instac (odkaz na Instagram nad fotkou u ohlasu) se nemeni, je to prekryv
     s position absolute a ten podle kontraktu neni muj.
*/

/* ---------------------------------------------------------------
   1. Mrizka vypisu a stejne vysoke karty v rade
      .item je bunka gridu, ta se natahne sama. Aby se natahla i karta uvnitr,
      je z .item flexbox a karta v nem roste. Zadne pevne vysky.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blog_vypis_dalsi,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .leaditems {
  gap: var(--zs-odstup-xl);
  padding: var(--zs-odstup-lg) 0 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blog_vypis_dalsi > .item,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .leaditems > .item {
  display: flex;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blog_vypis_dalsi > .item > .blogitem,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .leaditems > .item > .blogitem {
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------
   2. Karta vypisu
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem {
  box-sizing: border-box;
  align-items: stretch;
  padding: var(--zs-odstup-lg);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
  text-align: left;
}
/* karta s velkou fotkou nahore: fotka az ke krajum, text ma vlastni odsazeni */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem.velke_foto {
  display: flex;
  flex-direction: column;
  padding: 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem.velke_foto > .bl {
  padding: var(--zs-odstup-lg);
}
/* text karty vyplni zbytek vysky, at spodni radek sedi na dne karty */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem > .bl {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem > .bl > .introtext {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}
/* Oprava C (QA vlna 1, nalez B): reset se zuzil z `.introtext div` na `.introtext .orez div`.
   Sirsi zapis mel vyssi specificitu (1 id, 4 tridy, 2 typy) nez pravidlo pro .vicezde_kat
   o kus niz (1 id, 4 tridy, 1 typ), takze pate karty bral margin-top auto i odsazeni
   a rubrika s odkazem Precist cele sedely natesno na orezanem perexu.
   Divy uvnitr .orez (obal perexu na /aktuality, .stinek) reset dal potrebuji. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem .introtext p,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem .introtext .orez div {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.55;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem .introtext p:empty {
  display: none;
}

@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem {
    padding: var(--zs-odstup-xl);
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem.velke_foto {
    padding: 0;
  }
  body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem.velke_foto > .bl {
    padding: var(--zs-odstup-xl);
  }
}

/* ---------------------------------------------------------------
   3. Hlavicka karty: datum a nadpis
      Velikost nadpisu (20 px) uz drzi 60-zaklad.css pravidlem .blogitem .nadpis h2.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem .nadpis {
  align-items: flex-start;
  padding: 0 0 var(--zs-odstup-md);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blog .datum,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .datum-blog {
  flex: 0 0 auto;
  padding: var(--zs-odstup-md) var(--zs-odstup-sm);
  background: var(--zs-barva-pozadi-sekce);
  border-radius: var(--zs-radius-male);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blog .datum strong,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .datum-blog strong {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem .nadpis > a {
  padding: 0 0 0 var(--zs-odstup-base);
  color: var(--zs-barva-text-nadpis);
  text-decoration: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem .nadpis > a:hover h2 {
  color: var(--zs-barva-text-odkaz);
}

/* ---------------------------------------------------------------
   4. Spodni radek karty: rubrika a odkaz na cely clanek
      margin-top auto ho posadi na dno karty, at radek sedi u vsech karet stejne.
      Oprava C (QA vlna 1): tenhle blok se do vlny 1 vubec neprojevil, prebijel ho
      sirsi reset ze sekce 2. Ted plati, takze pata karty ma pod perexem vlastni 16 px
      a u kratsich karet ji margin-top auto posadi az na dno.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem .vicezde_kat {
  margin-top: auto;
  align-items: center;
  gap: var(--zs-odstup-base);
  padding: var(--zs-odstup-base) 0 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem .vicezde_kat .kat {
  padding: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem .vicezde_kat a,
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem > .bl > .introtext > a {
  font-weight: 600;
  color: var(--zs-barva-text-odkaz);
  text-decoration: underline;
}
/* vypisy bez .vicezde_kat (aktuality, ohlasy) maji odkaz primo v .introtext */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem > .bl > .introtext > a {
  margin-top: auto;
  padding: var(--zs-odstup-base) 0 0;
}

/* ---------------------------------------------------------------
   5. Fotka v karte
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem .fotoitem img {
  border-radius: var(--zs-radius-karta);
  object-fit: cover;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem.velke_foto .velkefotoitem > img {
  border-radius: 0;
}
/* Oprava C (QA vlna 1, nalez B): perex se uz neoreze pevnou vyskou.
   Predtim: template2024.css dava .orez { height: 85px; overflow: hidden } a do jeho spodnich
   20 px sahal bily prechod .stinek (position absolute, bottom 0). Pevna vyska 85 px ani
   opravenych 75 px neresila to hlavni: prechod lezel presne pres posledni videny radek,
   takze pismena byla vodorovne prerizla v pulce vysky a hned pod nimi zacinala pata karty.
   Zmereno na /blog 25. 8.: .orez 75 px, .stinek y 972 az 992, treti radek textu y 967 az 992.
   Ted: tri radky drzi -webkit-line-clamp, vyska je auto, rez padne mezi radky
   a prohlizec doplni vypustku. Zadna pevna vyska, zadny prepocet pri zmene pisma.
   .stinek zustava v DOM i v layoutu, jen prijde o plochu (background: none), protoze
   vypustka rekne totez a lepe. Vyzkousena varianta s padding-bottom 20 px pod .stinek
   nefunguje: overflow hidden oreze az na hrane paddingu, takze se ve volnem pruhu
   ukazal ctvrty radek prerizly v pulce (videno na /blog, karta Co je to detox). */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem .introtext .orez {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: auto;
  margin-bottom: 0;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blogitem .introtext .orez .stinek {
  background: none;
}

/* ---------------------------------------------------------------
   6. /aktuality: pas s vybranymi clanky nad vypisem
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blog-lead {
  padding: 0 0 var(--zs-odstup-2xl);
  background: none;
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .blog-all .inpas {
  background: var(--zs-barva-pozadi-sekce-2);
}

/* ---------------------------------------------------------------
   7. Detail clanku: hlavicka s datem a rubrikou
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .nadpis-blog {
  align-items: center;
  gap: var(--zs-odstup-base);
  padding: 0 0 var(--zs-odstup-base);
}
body:has(.zs26-hlavicka):not(.foxplus) #obsah .nadpis-blog .textvedle {
  padding: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}
/* tlacitko Zpet na vypis pod clankem */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .zpet_na_vypis {
  margin: var(--zs-odstup-2xl) 0 0;
  padding: var(--zs-odstup-xl) 0 0;
  border-top: 1px solid var(--zs-barva-ramecek-karta);
}

/* ---------------------------------------------------------------
   8. Bocni panel vypisu: rubriky a hledani
      Kartu (plochu, ramecek, radius) uz da 60-zaklad.css pravidlem
      #sidebar_float.sidebar2 > div, tady je jen obsah te karty.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float div.kategorierozklik h3 {
  padding: 0 0 var(--zs-odstup-md);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float div.kategorierozklik {
  padding: var(--zs-odstup-xl);
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float div.kategorierozklik .vypis-kat a {
  padding: var(--zs-odstup-xs) 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-odkaz);
  opacity: 1;
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float div.kategorierozklik .vypis-kat a:hover {
  text-decoration: underline;
}
body:has(.zs26-hlavicka):not(.foxplus) #sidebar_float > div.findblog {
  padding: var(--zs-odstup-xl);
}

/* ---------------------------------------------------------------
   9. Detail clanku: ctenarsky sloupec zarovnany na osu stranky.
      Mereno: #clanek.clanek_blogu ma max-width 800px a margin 0 auto, takze zacinal
      na 320 px, zatimco hero nadpis a vypis blogu zacinaji na 150 px. Skok o 170 px
      vypadal jako chyba. Sirka 800 px zustava, jen se sloupec posadi vlevo.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah #clanek.clanek_blogu {
  margin-inline: 0;
}

/* ---------------------------------------------------------------
   10. Zjistit vice pryc z hlavicky. Doplneno 25. 8. 2026 odpoledne.

   span.alink.roluj je odkaz enginu, ktery odrolovava na obsah. V hlavicce
   /blog, /ohlasy, /kariera, /aktuality, /napsali-o-nas a detailu clanku sedi
   primo nad obsahem, na ktery odkazuje, takze nema co delat. Konkurence
   (7 nezavislych systemu, mereno 25. 8.) nema v hlavicce clanku ani vypisu
   zadne tlacitko, 6 ze 6. Netyka se /recenze, kde je v hlavicce skutecny
   odkaz na uvodni stranku, ten nema tridu roluj.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) .vnor > p:has(> span.alink.roluj) {
  display: none;
}

/* ---------------------------------------------------------------
   11. Detail clanku: nadpis a perex nad obrazkem, ne vedle nej.
       Doplneno 25. 8. 2026 odpoledne, rozhodnuti Marka.

   Duvod je zmereny: pri poloviclnim sloupci se obrazek orezava, aby vyplnil
   vysku pasu, a u grafiky s textem (Detox jako Restart) to ureze nadpis
   v obrazku. Ve stohovanem usporadani se neoreze nic.

   Vzor: NutritionPro (nadpis 1000 px, foto 1000x500 presne pod nim)
   a FitKitchen (nadpis 896 px, foto 896x500), dva nezavisle ceske weby.
   Nadpis VEDLE obrazku dela z sesti merenych jen Popapej.

   Sirka 800 px odpovida ctenarskemu sloupci #clanek.clanek_blogu (sekce 9),
   takze drobecky, datum, nadpis, perex, obrazek i telo clanku sedi na jedne ose.

   Scope body.specblog trefi jen detail clanku, vypis ma body.blogvypis
   (overeno v prohlizeci, tridy se neprekryvaji). Vse je v @media (min-width: 700px),
   na mobilu uz se sloupce skladaji pod sebe sami.
   --------------------------------------------------------------- */
/* Ctenarska sirka je 800 px z template2024.css (#clanek.clanek_blogu, sekce 9).
   Token se deklaruje na scopovanem body, :root by neproslo pravidlem 1 lintu. */
body:has(.zs26-hlavicka):not(.foxplus) {
  --zs-sirka-ctenarska: 800px;
}

/* Pod 700 px uz sablona hero zalamuje sama a fotka je pod textem,
   prestohovavat neni co. */
@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus).specblog #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    min-height: 0;
    padding-inline: max(var(--zs-odstup-2xl), calc(50% - var(--zs-sirka-obsah) / 2 + var(--zs-odstup-lg)));
    padding-block: var(--zs-odstup-2xl) calc(var(--zs-odstup-2xl) + var(--zs-odstup-base));
  }
  body:has(.zs26-hlavicka):not(.foxplus).specblog #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .text {
    display: block;
    width: 100%;
    padding-inline: 0;
  }
  body:has(.zs26-hlavicka):not(.foxplus).specblog #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .text > .vnor {
    width: 100%;
    max-width: var(--zs-sirka-ctenarska);
    padding: 0;
  }
  /* perex na ctenarskou delku radku, 800 px pri 16 px dava asi 105 znaku */
  body:has(.zs26-hlavicka):not(.foxplus).specblog #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .text > .vnor > p {
    max-width: 68ch;
  }
  body:has(.zs26-hlavicka):not(.foxplus).specblog #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .text {
    min-height: 0;
  }
  body:has(.zs26-hlavicka):not(.foxplus).specblog #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .okolofoto,
  body:has(.zs26-hlavicka):not(.foxplus).specblog #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto > .okolofoto {
    height: auto;
  }
  body:has(.zs26-hlavicka):not(.foxplus).specblog #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto {
    align-self: flex-start;
    width: 100%;
    max-width: var(--zs-sirka-ctenarska);
    height: auto;
    margin-top: var(--zs-odstup-2xl);
    overflow: visible;
  }
  body:has(.zs26-hlavicka):not(.foxplus).specblog #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto > .stin {
    display: none;
  }
  /* Strop vysky misto orezu. Vetsina clanku ma obrazek 964x500, ten se pri sirce
     800 px vejde na 415 px a stropu se nedotkne. Netypicky pomer (detox ma 1,5)
     by hlavicku natahl na 1021 px, se stropem se obrazek jen zmensi a nic se
     neurizne, coz byl duvod, proc se hlavicka clanku vubec prestohovala.
     Konkurence: NutritionPro foto 1000x500, FitKitchen 896x500. */
  body:has(.zs26-hlavicka):not(.foxplus).specblog #obsah .pas.bezlimitu > .pozadi-flexi:has(h1) > .foto img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
    border-radius: var(--zs-radius-karta);
  }
}

/* ===== css-obsah/72-jak-to-funguje.css ===== */
/* 72-jak-to-funguje.css
   Co to je: skupina Jak to funguje. Stavitel B, noc 25. 8. 2026.
   Stranky: /jak-to-funguje (body.p176), /jak-to-funguje/faq (p175),
   /jak-to-funguje/priprava (p177), /jak-to-funguje/recyklace (p178).
   Hero pas a spodni lista jsou v 70-clanky.css, protoze plati vsude.

   Proc trida stranky (body.p175 apod.): je to Joomla Itemid menu polozky, sablona ho dava
   na body u kazde stranky (mereno 25. 8., body="zal2 sidebared cs-CZ p175 id8 body_v0").
   FAQ je jedina stranka, kde ma odkazovy seznam pod prvnim h2 vypadat jako stitky, a jedina
   spolu s recyklaci, kde jsou h3 otazky, ne nadpisy sekci. Bez tridy stranky by se stejny
   vzhled dostal i tam, kam nepatri (napr. /jak-to-funguje, kde jsou h3 nadpisy sekci).

   1. 9. 2026: FAQ uz se sklapuje. Telo clanku 8 je prepsane na .zs-faq (nativni
   details a summary, zdroj je stranky-obsah/8-faq.html) a otazky uz nejsou h3.
   Pravidla pro h3 a h4 na p175 proto odsud odesla, p178 (recyklace) je ma dal.
   Stranka merila 10 697 px na desktopu a 16 986 px na mobilu, vsechny odpovedi
   rozbalene naraz; sklapnuti je hlavni duvod cele upravy.

   Zamerne nehotove a proc:
   - Stitky nahore nefiltruji, jsou to obycejne kotvy, ktere uz v HTML jsou. Menim jen vzhled.
   - Cely li je stitek, ne jen odkaz v nem. V HTML je "otazky k <a>zakaznickemu uctu</a>",
     takze stitek jen kolem odkazu by utrhl prvni dve slova. Cely li dava cely smysluplny text.
   - /jak-to-funguje/priprava (p177) linky nad nadpisy nedostava: tam jsou h3 nadpisy sekci,
     ne otazky, a linka nad kazdou sekci by rozsekala kratkou stranku na prouzky.
   - V selektorech je navic #obsah. Neni to ozdoba: 60-zaklad.css ma na odrazky pravidlo
     `#obsah > .main_limit.obsah ul:not([class]) > li` se specificitou (1 id, 5 trid),
     ktere bez druheho id prebilo stitky a nechalo pred nimi zelene puntiky (mereno na
     prvnim nasazeni 25. 8. v 02:10). Dve id specificitu srovnaji.
*/

/* ---------------------------------------------------------------
   1. FAQ: odkazovy rozcestnik pod prvnim h2 jako obrysove stitky
      Mereno: #clanek deti FAQ zacinaji h2, ul, h2, h3, p, ... Prvni ul je ten rozcestnik.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah #clanek > h2:first-child,
body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah #clanek > h2:first-child,
body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah #clanek > h2:first-child{
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  padding: 0 0 var(--zs-odstup-base);
}
body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah #clanek > h2:first-child + ul,
body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah #clanek > h2:first-child + ul,
body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah #clanek > h2:first-child + ul{
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-md);
  margin: 0 0 var(--zs-odstup-2xl);
  padding: 0;
  list-style: none;
}
body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah #clanek > h2:first-child + ul > li,
body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah #clanek > h2:first-child + ul > li,
body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah #clanek > h2:first-child + ul > li{
  margin: 0;
  padding: var(--zs-odstup-sm) var(--zs-odstup-lg);
  border: 2px solid var(--zs-barva-akce-sekundarni-ramecek);
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-pozadi-karta);
  background-image: none;
  list-style: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah #clanek > h2:first-child + ul > li:hover,
body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah #clanek > h2:first-child + ul > li:hover,
body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah #clanek > h2:first-child + ul > li:hover{
  background: var(--zs-barva-akce-sekundarni-hover);
}
body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah #clanek > h2:first-child + ul > li a,
body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah #clanek > h2:first-child + ul > li a,
body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah #clanek > h2:first-child + ul > li a{
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah #clanek > h2:first-child + ul > li a:hover,
body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah #clanek > h2:first-child + ul > li a:hover,
body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah #clanek > h2:first-child + ul > li a:hover{
  color: inherit;
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   2. Recyklace (p178): h3 je otazka. Linka nad ni oddeli dvojici otazka + odpoved.
      h2 zustava nadpisem sekce, po nem se linka nekresli, ta by zdvojila oddeleni.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus).p178 #obsah #clanek > h3,
body:has(.zs26-hlavicka):not(.foxplus).p1180 #obsah #clanek > h3,
body:has(.zs26-hlavicka):not(.foxplus).p880 #obsah #clanek > h3{
  margin-top: var(--zs-odstup-2xl);
  padding-top: var(--zs-odstup-xl);
  border-top: 1px solid var(--zs-barva-ramecek-karta);
}
body:has(.zs26-hlavicka):not(.foxplus).p178 #obsah #clanek > h3:first-child,
body:has(.zs26-hlavicka):not(.foxplus).p1180 #obsah #clanek > h3:first-child,
body:has(.zs26-hlavicka):not(.foxplus).p880 #obsah #clanek > h3:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------------------------------------------------------------
   3. Recyklace (p178): odpoved patri k otazce, tak at je bliz k ni nez k dalsi otazce.
      Na FAQ (p175) uz to neplati, tam je odpoved uvnitr .zs-faq__odpoved.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus).p178 #obsah #clanek > h3 + p,
body:has(.zs26-hlavicka):not(.foxplus).p1180 #obsah #clanek > h3 + p,
body:has(.zs26-hlavicka):not(.foxplus).p880 #obsah #clanek > h3 + p{
  margin-top: 0;
}

/* ---------------------------------------------------------------
   4. FAQ (p175): sloupec otazek, bez bocniho panelu
      1. 9. 2026, z grafickeho navrhu "grafika - často kladené otázky".

      Bocni modul "Muze se vam hodit" (#sidebar > #sidebar_float > .m104)
      v navrhu neni a pri rozbalovacich kartach zabira ctvrtinu sirky bez uzitku.
      Skryva se CSS, ne odebranim z polozky menu: modul je prirazeny k 88 polozkam
      a Joomla API u modulu neumi castecny PATCH, takze zapis do assigned je
      sdilene misto, na ktere sahaji i dalsi rozdelane stranky. CSS je jen tady
      a vrati se smazanim tohohle bloku.

      Obal #obsah > .main_limit.obsah je grid (60-zaklad.css), takze samotne
      display: none na #sidebar nestaci, sloupec by zustal uzky. Mereno pred
      zmenou: obal 1180 px, sloupec clanku 755 px, sidebar 325 px.

      Sirka sloupce 920 px, ne celych 1180: je to tataz sirka, jakou ma FAQ
      na zbylych deseti mistech na webu (.zs-obsah--uzky), takze sjednoceni plati
      i na sirku. Na 1180 px by odpoved mela pres 140 znaku na radek.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah #sidebar,
body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah #sidebar,
body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah #sidebar{
  display: none;
}
body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah > .main_limit.obsah,
body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah > .main_limit.obsah,
body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah > .main_limit.obsah{
  grid-template-columns: minmax(0, 1fr);
}
body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah #clanek,
body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah #clanek,
body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah #clanek{
  max-width: 920px;
  margin-inline: auto;
}

/* Nadpis skupiny otazek. Vzduch nad nim ukazuje, ze zacina novy blok.
   Nadpisy jsou uvnitr .zs26 obalu, takze je styluje #clanek h2 z 60-zaklad.css
   (ma v selektoru id, tridu .zs-h2 by prebilo). Meni se tu jen odstup. */
body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah #clanek .zs26-faq-stranka > h2,
body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah #clanek .zs26-faq-stranka > h2,
body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah #clanek .zs26-faq-stranka > h2{
  padding-top: var(--zs-odstup-sekce);
  padding-bottom: var(--zs-odstup-base);
}
body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah #clanek .zs26-faq-stranka > h2:first-child,
body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah #clanek .zs26-faq-stranka > h2:first-child,
body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah #clanek .zs26-faq-stranka > h2:first-child{
  padding-top: var(--zs-odstup-2xl);
}

/* Pas CTA na konci stranky, odstup od posledni karty. */
body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah #clanek .zs-pas-cta,
body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah #clanek .zs-pas-cta,
body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah #clanek .zs-pas-cta{
  margin-top: var(--zs-odstup-sekce);
}

@media (max-width: 699px) {
  body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah #clanek .zs26-faq-stranka > h2,
  body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah #clanek .zs26-faq-stranka > h2,
  body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah #clanek .zs26-faq-stranka > h2{
    padding-top: var(--zs-odstup-sekce-mobil);
  }
  body:has(.zs26-hlavicka):not(.foxplus).p175 #obsah #clanek .zs-pas-cta,
  body:has(.zs26-hlavicka):not(.foxplus).p1071 #obsah #clanek .zs-pas-cta,
  body:has(.zs26-hlavicka):not(.foxplus).p878 #obsah #clanek .zs-pas-cta{
    margin-top: var(--zs-odstup-sekce-mobil);
  }
}

/* ---------------------------------------------------------------
   5. Stranka /jak-to-funguje (body.p176): ikonove nadpisy, cena,
      fajfkovy seznam, rozcestnik a tlacitkovy radek
      (1. 9. 2026)

   Predloha: Figma ZS-wireframe, stranka 80 Jak to funguje, postavena
   podle prekresleni Lucie Soukupove (images/3. cast/grafika - jak to
   funguje_ .jpg, 1. 9.). HTML tela clanku je stranky-obsah/32-jak-to-funguje.html,
   na web ho posila nasazeni/nasadit-clanek.py.

   Proc jen tyhle tridy. Telo clanku edituje redakce v JCE a smi si tam
   vybrat sest stylu z 65-redakce.css. Cokoli navic musi byt bud atribut
   (data-zs-ikona), nebo trida, kterou nastavuje sablona stranky a redaktor
   ji nepridava. Tyz vzor uz jede na strankach programu: .zs-suroviny
   a .zs-ziviny v 63-programy.css sekce 13 a 14.

   Ikony drzi kanon ze sekce 14 v 63-programy.css: viewBox 24, tah 1,5,
   zaoblene konce, bez vyplne, jedna barva pres currentColor. Jedina
   odchylka je mapa-cr s tahem 1. Je vytrasovana z predlohy, ne kreslena
   rucne, a pri 1,5 se detaily hranice slijou. Prevzata z
   podklady/ikony-o-nas.md, at nevznika druha kresba teze veci.

   Ctyri karty rozvozu jsou v mrizce .zs-karty-2 jako 2x2, ne ctyri v rade.
   Sedma trida .zs-karty-4 by porusila pravidlo sesti stylu z EDITORI.md.
   Figma je srovnana na tentyz tvar, aby zustala predlohou.

   Zamerne nehotove:
   - Menicko nema v cenove karte cislo. kanon.md si u jeho dopravy odporuje
     (139 Kc za doruceni proti doprave zdarma od 300 Kc na den). Doplnit
     az po rozhodnuti, do te doby tam cena nepatri.
   --------------------------------------------------------------- */

/* Nadpis s ikonou. Mechanika je stejna jako v 63-programy.css sekce 14,
   tady jen pro p176, aby se stejny vzhled nedostal na FAQ ani na recyklaci. */
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah .zs-karty-2 > * > h3,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah .zs-karty-2 > * > h3,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah .zs-karty-2 > * > h3,
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah .zs-karty-3 > * > h3,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah .zs-karty-3 > * > h3,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah .zs-karty-3 > * > h3,
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah .zs-box h3,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah .zs-box h3,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah .zs-box h3{
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-md);
  padding-top: 0;
  border-top: 0;
}

body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah h3[data-zs-ikona]::before,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah h3[data-zs-ikona]::before,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah h3[data-zs-ikona]::before{
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah h3[data-zs-ikona="kaloricke-rady"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah h3[data-zs-ikona="kaloricke-rady"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah h3[data-zs-ikona="kaloricke-rady"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 20.4h17.2'/%3E%3Crect x='4.6' y='14.2' width='3.2' height='6.2' rx='1'/%3E%3Crect x='10.4' y='9.6' width='3.2' height='10.8' rx='1'/%3E%3Crect x='16.2' y='4.6' width='3.2' height='15.8' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 20.4h17.2'/%3E%3Crect x='4.6' y='14.2' width='3.2' height='6.2' rx='1'/%3E%3Crect x='10.4' y='9.6' width='3.2' height='10.8' rx='1'/%3E%3Crect x='16.2' y='4.6' width='3.2' height='15.8' rx='1'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah h3[data-zs-ikona="kalendar"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah h3[data-zs-ikona="kalendar"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah h3[data-zs-ikona="kalendar"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='5.4' width='17.2' height='15.2' rx='2.4'/%3E%3Cpath d='M3.4 10.2h17.2'/%3E%3Cpath d='M8 3.4v3.6M16 3.4v3.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='5.4' width='17.2' height='15.2' rx='2.4'/%3E%3Cpath d='M3.4 10.2h17.2'/%3E%3Cpath d='M8 3.4v3.6M16 3.4v3.6'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah h3[data-zs-ikona="sluchatka"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah h3[data-zs-ikona="sluchatka"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah h3[data-zs-ikona="sluchatka"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 14.6v-2.8a7.4 7.4 0 0 1 14.8 0v2.8'/%3E%3Crect x='2.8' y='13.4' width='3.6' height='5.6' rx='1.8'/%3E%3Crect x='17.6' y='13.4' width='3.6' height='5.6' rx='1.8'/%3E%3Cpath d='M19.4 19v.6a2.6 2.6 0 0 1-2.6 2.6h-2.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 14.6v-2.8a7.4 7.4 0 0 1 14.8 0v2.8'/%3E%3Crect x='2.8' y='13.4' width='3.6' height='5.6' rx='1.8'/%3E%3Crect x='17.6' y='13.4' width='3.6' height='5.6' rx='1.8'/%3E%3Cpath d='M19.4 19v.6a2.6 2.6 0 0 1-2.6 2.6h-2.2'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah h3[data-zs-ikona="doprava"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah h3[data-zs-ikona="doprava"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah h3[data-zs-ikona="doprava"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 7.2a1.4 1.4 0 0 1 1.4-1.4h9.2v10.6H2.6z'/%3E%3Cpath d='M13.2 8.8h3.2c.4 0 .8.2 1.1.6l2.2 3.1c.2.3.3.6.3.9v3h-6.8z'/%3E%3Ccircle cx='6.6' cy='17.8' r='1.7'/%3E%3Ccircle cx='16.4' cy='17.8' r='1.7'/%3E%3Cpath d='M8.3 17.8h6.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 7.2a1.4 1.4 0 0 1 1.4-1.4h9.2v10.6H2.6z'/%3E%3Cpath d='M13.2 8.8h3.2c.4 0 .8.2 1.1.6l2.2 3.1c.2.3.3.6.3.9v3h-6.8z'/%3E%3Ccircle cx='6.6' cy='17.8' r='1.7'/%3E%3Ccircle cx='16.4' cy='17.8' r='1.7'/%3E%3Cpath d='M8.3 17.8h6.4'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah h3[data-zs-ikona="nutricni-poradkyne"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah h3[data-zs-ikona="nutricni-poradkyne"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah h3[data-zs-ikona="nutricni-poradkyne"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6.6' r='3.2'/%3E%3Cpath d='M6 20.6c0-3.1 2.7-5.4 6-5.4s6 2.3 6 5.4'/%3E%3Cpath d='M9.4 9.4v3.2a2.6 2.6 0 0 0 5.2 0V9.4'/%3E%3Cpath d='M16.8 12.4v2a2.2 2.2 0 0 1-4.4 0'/%3E%3Ccircle cx='16.8' cy='11.4' r='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6.6' r='3.2'/%3E%3Cpath d='M6 20.6c0-3.1 2.7-5.4 6-5.4s6 2.3 6 5.4'/%3E%3Cpath d='M9.4 9.4v3.2a2.6 2.6 0 0 0 5.2 0V9.4'/%3E%3Cpath d='M16.8 12.4v2a2.2 2.2 0 0 1-4.4 0'/%3E%3Ccircle cx='16.8' cy='11.4' r='1'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah h3[data-zs-ikona="salat"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah h3[data-zs-ikona="salat"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah h3[data-zs-ikona="salat"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 12.4h16.8c0 4.2-3.8 7.2-8.4 7.2s-8.4-3-8.4-7.2z'/%3E%3Cpath d='M12 12.4c0-2.6 1.4-4.8 3.6-5.8'/%3E%3Cpath d='M12 12.4c-.4-2.4-2-4.2-4.4-4.8'/%3E%3Cpath d='M12 12.4c.6-2.8 2.6-4.8 5.4-5.2'/%3E%3Cpath d='M6.2 19.8h11.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 12.4h16.8c0 4.2-3.8 7.2-8.4 7.2s-8.4-3-8.4-7.2z'/%3E%3Cpath d='M12 12.4c0-2.6 1.4-4.8 3.6-5.8'/%3E%3Cpath d='M12 12.4c-.4-2.4-2-4.2-4.4-4.8'/%3E%3Cpath d='M12 12.4c.6-2.8 2.6-4.8 5.4-5.2'/%3E%3Cpath d='M6.2 19.8h11.6'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah h3[data-zs-ikona="dodavka"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah h3[data-zs-ikona="dodavka"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah h3[data-zs-ikona="dodavka"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 6.6a1.5 1.5 0 0 1 1.5-1.5h9.6v11.6H2.4z'/%3E%3Cpath d='M13.5 8.3h3.3c.5 0 .9.2 1.2.6l2.3 3.4c.2.3.3.6.3.9v3.5h-7.1z'/%3E%3Cpath d='M15 9.8h2l1.4 2.3H15z'/%3E%3Ccircle cx='6.6' cy='18.3' r='1.8'/%3E%3Ccircle cx='16.5' cy='18.3' r='1.8'/%3E%3Cpath d='M5 10.9h6M8 7.9v6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 6.6a1.5 1.5 0 0 1 1.5-1.5h9.6v11.6H2.4z'/%3E%3Cpath d='M13.5 8.3h3.3c.5 0 .9.2 1.2.6l2.3 3.4c.2.3.3.6.3.9v3.5h-7.1z'/%3E%3Cpath d='M15 9.8h2l1.4 2.3H15z'/%3E%3Ccircle cx='6.6' cy='18.3' r='1.8'/%3E%3Ccircle cx='16.5' cy='18.3' r='1.8'/%3E%3Cpath d='M5 10.9h6M8 7.9v6'/%3E%3C/svg%3E");
}

body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah h3[data-zs-ikona="mapa-cr"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah h3[data-zs-ikona="mapa-cr"]::before,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah h3[data-zs-ikona="mapa-cr"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.40 5.88 Q8.40 5.88 8.80 5.95 Q9.20 6.02 9.56 6.42 Q9.92 6.82 10.20 6.50 Q10.48 6.18 10.81 6.13 Q11.14 6.07 11.53 6.58 Q11.92 7.10 12.68 7.44 Q13.44 7.79 14.09 7.82 Q14.74 7.84 14.92 8.15 Q15.10 8.45 14.91 8.79 Q14.72 9.12 15.20 9.66 Q15.68 10.20 15.95 9.56 Q16.21 8.92 16.64 9.33 Q17.07 9.73 17.93 9.52 Q18.79 9.31 19.02 10.01 Q19.26 10.70 19.59 10.60 Q19.92 10.50 20.89 10.75 Q21.86 11.00 22.18 12.07 Q22.50 13.14 21.53 13.81 Q20.56 14.49 20.03 15.34 Q19.51 16.18 18.90 16.53 Q18.29 16.88 17.83 16.79 Q17.37 16.71 17.06 17.19 Q16.74 17.68 16.14 17.36 Q15.55 17.04 15.05 17.18 Q14.55 17.32 12.69 16.75 Q10.84 16.18 10.32 17.07 Q9.81 17.96 8.66 18.04 Q7.51 18.12 6.96 17.37 Q6.40 16.63 6.17 16.57 Q5.93 16.52 4.59 15.19 Q3.25 13.86 2.83 13.14 Q2.41 12.42 2.58 12.00 Q2.75 11.58 2.12 10.57 Q1.50 9.56 1.62 9.44 Q1.75 9.31 2.03 9.41 Q2.30 9.51 2.95 9.09 Q3.61 8.68 3.90 8.73 Q4.19 8.79 4.64 8.40 Q5.10 8.01 6.67 7.37 Q8.23 6.74 8.32 6.31 Q8.40 5.88 8.40 5.88Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.40 5.88 Q8.40 5.88 8.80 5.95 Q9.20 6.02 9.56 6.42 Q9.92 6.82 10.20 6.50 Q10.48 6.18 10.81 6.13 Q11.14 6.07 11.53 6.58 Q11.92 7.10 12.68 7.44 Q13.44 7.79 14.09 7.82 Q14.74 7.84 14.92 8.15 Q15.10 8.45 14.91 8.79 Q14.72 9.12 15.20 9.66 Q15.68 10.20 15.95 9.56 Q16.21 8.92 16.64 9.33 Q17.07 9.73 17.93 9.52 Q18.79 9.31 19.02 10.01 Q19.26 10.70 19.59 10.60 Q19.92 10.50 20.89 10.75 Q21.86 11.00 22.18 12.07 Q22.50 13.14 21.53 13.81 Q20.56 14.49 20.03 15.34 Q19.51 16.18 18.90 16.53 Q18.29 16.88 17.83 16.79 Q17.37 16.71 17.06 17.19 Q16.74 17.68 16.14 17.36 Q15.55 17.04 15.05 17.18 Q14.55 17.32 12.69 16.75 Q10.84 16.18 10.32 17.07 Q9.81 17.96 8.66 18.04 Q7.51 18.12 6.96 17.37 Q6.40 16.63 6.17 16.57 Q5.93 16.52 4.59 15.19 Q3.25 13.86 2.83 13.14 Q2.41 12.42 2.58 12.00 Q2.75 11.58 2.12 10.57 Q1.50 9.56 1.62 9.44 Q1.75 9.31 2.03 9.41 Q2.30 9.51 2.95 9.09 Q3.61 8.68 3.90 8.73 Q4.19 8.79 4.64 8.40 Q5.10 8.01 6.67 7.37 Q8.23 6.74 8.32 6.31 Q8.40 5.88 8.40 5.88Z'/%3E%3C/svg%3E");
}

/* POZOR na specificitu. `60-zaklad.css` ma na odstavce v obsahu pravidlo
   `#obsah > .main_limit.obsah p:not(.zs26 *)` se specificitou 1 id a 5 trid.
   Selektor s jednim `#obsah` a `.p176` ma jen 4 tridy a prohraje, projevilo se
   to tim, ze `.zs-cena` zustala 16 px misto 28 (mereno na testu 1. 9. 2026).
   Druhe id `#clanek` to srovna. Tataz past je popsana v hlavicce sekce 1. */

/* Cena v karte. Cislo nese vahu, jednotka je vedlejsi text na stejnem radku. */
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah #clanek .zs-cena,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah #clanek .zs-cena,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah #clanek .zs-cena{
  margin: 0 0 var(--zs-odstup-sm);
  font-size: var(--zs-pismo-cena-velka, 28px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--zs-barva-text-nadpis);
}
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah #clanek .zs-cena span,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah #clanek .zs-cena span,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah #clanek .zs-cena span{
  font-size: var(--zs-pismo-vedlejsi, 15.5px);
  font-weight: 400;
  color: var(--zs-barva-text-tlumeny);
}

/* Fajfkovy seznam v boxu Co je v cene. Zelena fajfka misto zelene odrazky,
   at je videt, ze je to vycet toho, co uz mate, ne dalsi seznam moznosti. */
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah #clanek .zs-fajfky,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah #clanek .zs-fajfky,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah #clanek .zs-fajfky{
  list-style: none;
  margin: 0;
  padding: 0;
}
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah #clanek .zs-fajfky > li,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah #clanek .zs-fajfky > li,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah #clanek .zs-fajfky > li{
  position: relative;
  padding-left: 30px;
  margin-bottom: var(--zs-odstup-sm);
}
/* `.zs26 li::before` je v novy-2026.css vypnute pres !important, tady je ale
   telo clanku, ne modul, takze staci normalni pravidlo. */
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah #clanek .zs-fajfky > li::before,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah #clanek .zs-fajfky > li::before,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah #clanek .zs-fajfky > li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  background-color: var(--zs-barva-stav-ok);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Rada odkazu pod boxy Nez objednate. Na mobilu pod sebou, od 700 px v rade. */
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah #clanek .zs-rozcestnik,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah #clanek .zs-rozcestnik,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah #clanek .zs-rozcestnik{
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-md);
  margin: var(--zs-odstup-xl) 0 0;
}
@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah #clanek .zs-rozcestnik,
  body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah #clanek .zs-rozcestnik,
  body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah #clanek .zs-rozcestnik{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--zs-odstup-lg) var(--zs-odstup-2xl);
  }
}
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah #clanek .zs-rozcestnik a,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah #clanek .zs-rozcestnik a,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah #clanek .zs-rozcestnik a{
  font-weight: 600;
  text-decoration: underline;
}

/* Tlacitko na vlastnim radku, na stred. Limetkove tady nikde neni:
   jedno primarni na obrazovku a to patri objednavce, ne odkazu na cenik
   nebo na FAQ (blok Hierarchie tlacitek, Figma 01 Design system 157:2287). */
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah #clanek .zs-akce,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah #clanek .zs-akce,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah #clanek .zs-akce{
  margin: var(--zs-odstup-xl) 0 0;
  text-align: center;
}
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah #clanek .zs-box .zs-akce,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah #clanek .zs-box .zs-akce,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah #clanek .zs-box .zs-akce{
  margin-bottom: 0;
  text-align: left;
}

/* ---------------------------------------------------------------
   6. Akce v hlavicce /jak-to-funguje (1. 9. 2026)

   Hlavicka je modul 223 na pozici obsah_nad, ne telo clanku, takze
   zakladni pravidla z 65-redakce.css na ni sice dosahnou, ale barvy
   jsou stavene na svetle pozadi. Pas je tmave zeleny, proto tady.

   Limetkove tlacitko je na cele strance jedine a vede do objednavky.
   Druha akce je podtrzeny odkaz, ne druhe tlacitko: pravidlo jedno
   primarni na obrazovku, blok Hierarchie tlacitek ve Figme 157:2287.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah .pas.bezlimitu > .pozadi-flexi p.zs-hero-akce,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah .pas.bezlimitu > .pozadi-flexi p.zs-hero-akce,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah .pas.bezlimitu > .pozadi-flexi p.zs-hero-akce{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zs-odstup-lg) var(--zs-odstup-xl);
  margin-top: var(--zs-odstup-xl);
}

body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah .pas.bezlimitu > .pozadi-flexi .zs-hero-odkaz,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah .pas.bezlimitu > .pozadi-flexi .zs-hero-odkaz,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah .pas.bezlimitu > .pozadi-flexi .zs-hero-odkaz{
  color: var(--zs-barva-text-na-tmavem);
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
}
body:has(.zs26-hlavicka):not(.foxplus).p176 #obsah .pas.bezlimitu > .pozadi-flexi .zs-hero-odkaz:hover,
body:has(.zs26-hlavicka):not(.foxplus).p1070 #obsah .pas.bezlimitu > .pozadi-flexi .zs-hero-odkaz:hover,
body:has(.zs26-hlavicka):not(.foxplus).p877 #obsah .pas.bezlimitu > .pozadi-flexi .zs-hero-odkaz:hover{
  text-decoration: none;
}

/* ---------------------------------------------------------------
   7. FAQ (p175): hlavicka zpatky na velkou fotku, jako zbytek rodiny

   1. 9. 2026 tady byl blok, ktery fotku hera prehazoval na zaoblenou kartu
   zasazenou v obsahovem sloupci, tedy na zpusob /rozvoz a rozcestniku.
   Tyz den odpoledne Marek rozhodl opacne a ukazal jako cil /jak-to-funguje:
   fotka pres polovinu sirky okna az k prave hrane, v plne vysce pasu,
   bez zaobleni. Blok proto odesel cely a FAQ spada zpatky pod rodinne
   pravidlo v 70-clanky.css.

   Zmereno na 1440 px pred zmenou, sirka fotky a prava hrana od okraje okna:
     /jak-to-funguje       720 px, 50,0 %, 0 px, radius 0    cil
     /jak-to-funguje/faq   538 px, 37,4 %, 150 px, radius 24 stav pred
   Tyz den se stejnym pravidlem prosly rozcestniky a katalog, viz
   novy-2026.css sekce 8b. Vyjimkou zustava /rozvoz (rozhodnuti Marka)
   a /nutricni-poradenstvi-2026 (skupinovy snimek, natazeni orizne krajni dve
   specialistky).

   Puvodni zneni je v zaloze 72-jak-to-funguje.css.pred-velka-fotka-hlavicky
   a postup vraceni v 25/VRACENI.md. Nevracet sem kartu bez noveho pokynu,
   uz to tam a zpet slo jednou.
   --------------------------------------------------------------- */

/* ===== css-obsah/73-pravni.css ===== */
/* 73-pravni.css
   Co to je: pravni stranky. Stavitel B, noc 25. 8. 2026.
   Stranky: /obchodni-podminky (body.p380), /reklamacni-rad (p1132), /osobni-udaje (p381),
   /informace-o-cookies (p646), /cookies (p645).

   Zmereno 25. 8. v headless Chromu:
   - #clanek meri na vsech peti strankach 755 px, protoze vedle nej stoji bocni panel.
     Pozadovanych 760 px pro citelnost je tim uz splneno, max-width je tu jako pojistka
     pro pripad, ze by bocni panel na nektere z nich zmizel.
   - /obchodni-podminky a /reklamacni-rad maji nadpisy h2 s inline stylem
     `style="text-align: center;"` primo z JCE (I. Vymezeni pojmu, II. Zbozi, ...).
     /osobni-udaje a /informace-o-cookies inline styl nemaji a nadpisy uz jsou vlevo.
   - ol a ul dostavaji ze 60-zaklad.css odsazeni 24 px. Na pravnim textu s cisly
     a pismeny je to malo, cisla se lepi na text.
   - /cookies ma v clanku doslova prazdny <div></div>. Formular nastaveni cookies
     nevykresluje clanek, ale skript cookie listy do #popup_pod (fixed prekryv pres
     celou stranku, mimo #obsah, na kazde strance webu). Viz "Zamerne nehotove".

   Zamerne nehotove a proc:
   - Formular nastaveni cookies (#popup_pod) tenhle soubor neresi. Neni to obsah stranky,
     je to globalni prekryv se svym vlastnim JS (CookAjax, CookToggleClass) a patri
     spis k hlavicce a paticce nez k obsahovym strankam. Kdo ho ma prebarvit, at rozhodne
     orchestrator; jinak zustava, jak byl. Sama stranka /cookies je prazdna a nema
     co zobrazit, to je vec obsahu v Joomle, ne skinu.
   - Inline zarovnani nadpisu prebijim jen na dvou strankach, kde je (p380, p1132).
     Cena: redaktor uz na techto dvou strankach nadpis na stred nedostane. Kontrakt bod 10
     rika, ze nadpisy v obsahu clanku jsou vlevo, a rimske cislice na stred vypadaji
     jako stara sablona. Jinde inline styly redaktoru nesaham.
*/

/* ---------------------------------------------------------------
   1. Ctenarska sirka sloupce
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus).p380 #obsah #clanek,
body:has(.zs26-hlavicka):not(.foxplus).p669 #obsah #clanek,
body:has(.zs26-hlavicka):not(.foxplus).p1132 #obsah #clanek,
body:has(.zs26-hlavicka):not(.foxplus).p1252 #obsah #clanek,
body:has(.zs26-hlavicka):not(.foxplus).p381 #obsah #clanek,
body:has(.zs26-hlavicka):not(.foxplus).p670 #obsah #clanek,
body:has(.zs26-hlavicka):not(.foxplus).p646 #obsah #clanek,
body:has(.zs26-hlavicka):not(.foxplus).p684 #obsah #clanek,
body:has(.zs26-hlavicka):not(.foxplus).p645 #obsah #clanek{
  max-width: 760px;
}

/* ---------------------------------------------------------------
   2. Nadpisy vlevo (kontrakt bod 10). Inline styl z JCE se jinak prebit neda.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus).p380 #obsah #clanek h2,
body:has(.zs26-hlavicka):not(.foxplus).p669 #obsah #clanek h2,
body:has(.zs26-hlavicka):not(.foxplus).p380 #obsah #clanek h3,
body:has(.zs26-hlavicka):not(.foxplus).p669 #obsah #clanek h3,
body:has(.zs26-hlavicka):not(.foxplus).p1132 #obsah #clanek h2,
body:has(.zs26-hlavicka):not(.foxplus).p1252 #obsah #clanek h2,
body:has(.zs26-hlavicka):not(.foxplus).p1132 #obsah #clanek h3,
body:has(.zs26-hlavicka):not(.foxplus).p1252 #obsah #clanek h3{
  text-align: left !important;
}

/* ---------------------------------------------------------------
   3. Vzduch mezi clanky pravniho textu a odsazeni cislovanych seznamu
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus).p380 #obsah #clanek > h2,
body:has(.zs26-hlavicka):not(.foxplus).p669 #obsah #clanek > h2,
body:has(.zs26-hlavicka):not(.foxplus).p1132 #obsah #clanek > h2,
body:has(.zs26-hlavicka):not(.foxplus).p1252 #obsah #clanek > h2,
body:has(.zs26-hlavicka):not(.foxplus).p381 #obsah #clanek > h2,
body:has(.zs26-hlavicka):not(.foxplus).p670 #obsah #clanek > h2,
body:has(.zs26-hlavicka):not(.foxplus).p646 #obsah #clanek > h2,
body:has(.zs26-hlavicka):not(.foxplus).p684 #obsah #clanek > h2{
  padding-top: var(--zs-odstup-2xl);
}
body:has(.zs26-hlavicka):not(.foxplus).p380 #obsah #clanek > h2:first-child,
body:has(.zs26-hlavicka):not(.foxplus).p669 #obsah #clanek > h2:first-child,
body:has(.zs26-hlavicka):not(.foxplus).p1132 #obsah #clanek > h2:first-child,
body:has(.zs26-hlavicka):not(.foxplus).p1252 #obsah #clanek > h2:first-child,
body:has(.zs26-hlavicka):not(.foxplus).p381 #obsah #clanek > h2:first-child,
body:has(.zs26-hlavicka):not(.foxplus).p670 #obsah #clanek > h2:first-child,
body:has(.zs26-hlavicka):not(.foxplus).p646 #obsah #clanek > h2:first-child,
body:has(.zs26-hlavicka):not(.foxplus).p684 #obsah #clanek > h2:first-child{
  padding-top: 0;
}

body:has(.zs26-hlavicka):not(.foxplus).p380 #obsah #clanek ol,
body:has(.zs26-hlavicka):not(.foxplus).p669 #obsah #clanek ol,
body:has(.zs26-hlavicka):not(.foxplus).p380 #obsah #clanek ul,
body:has(.zs26-hlavicka):not(.foxplus).p669 #obsah #clanek ul,
body:has(.zs26-hlavicka):not(.foxplus).p1132 #obsah #clanek ol,
body:has(.zs26-hlavicka):not(.foxplus).p1252 #obsah #clanek ol,
body:has(.zs26-hlavicka):not(.foxplus).p1132 #obsah #clanek ul,
body:has(.zs26-hlavicka):not(.foxplus).p1252 #obsah #clanek ul,
body:has(.zs26-hlavicka):not(.foxplus).p381 #obsah #clanek ol,
body:has(.zs26-hlavicka):not(.foxplus).p670 #obsah #clanek ol,
body:has(.zs26-hlavicka):not(.foxplus).p381 #obsah #clanek ul,
body:has(.zs26-hlavicka):not(.foxplus).p670 #obsah #clanek ul,
body:has(.zs26-hlavicka):not(.foxplus).p646 #obsah #clanek ol,
body:has(.zs26-hlavicka):not(.foxplus).p684 #obsah #clanek ol,
body:has(.zs26-hlavicka):not(.foxplus).p646 #obsah #clanek ul,
body:has(.zs26-hlavicka):not(.foxplus).p684 #obsah #clanek ul{
  margin: 0 0 var(--zs-odstup-base);
  padding-left: var(--zs-odstup-2xl);
}
body:has(.zs26-hlavicka):not(.foxplus).p380 #obsah #clanek li,
body:has(.zs26-hlavicka):not(.foxplus).p669 #obsah #clanek li,
body:has(.zs26-hlavicka):not(.foxplus).p1132 #obsah #clanek li,
body:has(.zs26-hlavicka):not(.foxplus).p1252 #obsah #clanek li,
body:has(.zs26-hlavicka):not(.foxplus).p381 #obsah #clanek li,
body:has(.zs26-hlavicka):not(.foxplus).p670 #obsah #clanek li,
body:has(.zs26-hlavicka):not(.foxplus).p646 #obsah #clanek li,
body:has(.zs26-hlavicka):not(.foxplus).p684 #obsah #clanek li{
  padding: var(--zs-odstup-sm) 0;
  font-size: 16px;
  line-height: 1.6;
}

@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus).p380 #obsah #clanek > h2,
  body:has(.zs26-hlavicka):not(.foxplus).p669 #obsah #clanek > h2,
  body:has(.zs26-hlavicka):not(.foxplus).p1132 #obsah #clanek > h2,
  body:has(.zs26-hlavicka):not(.foxplus).p1252 #obsah #clanek > h2,
  body:has(.zs26-hlavicka):not(.foxplus).p381 #obsah #clanek > h2,
  body:has(.zs26-hlavicka):not(.foxplus).p670 #obsah #clanek > h2,
  body:has(.zs26-hlavicka):not(.foxplus).p646 #obsah #clanek > h2,
  body:has(.zs26-hlavicka):not(.foxplus).p684 #obsah #clanek > h2{
    padding-top: var(--zs-odstup-sekce);
  }
  body:has(.zs26-hlavicka):not(.foxplus).p380 #obsah #clanek > h2:first-child,
  body:has(.zs26-hlavicka):not(.foxplus).p669 #obsah #clanek > h2:first-child,
  body:has(.zs26-hlavicka):not(.foxplus).p1132 #obsah #clanek > h2:first-child,
  body:has(.zs26-hlavicka):not(.foxplus).p1252 #obsah #clanek > h2:first-child,
  body:has(.zs26-hlavicka):not(.foxplus).p381 #obsah #clanek > h2:first-child,
  body:has(.zs26-hlavicka):not(.foxplus).p670 #obsah #clanek > h2:first-child,
  body:has(.zs26-hlavicka):not(.foxplus).p646 #obsah #clanek > h2:first-child,
  body:has(.zs26-hlavicka):not(.foxplus).p684 #obsah #clanek > h2:first-child{
    padding-top: 0;
  }
}

/* ---------------------------------------------------------------
   4. /informace-o-cookies (p646): tabulka seznamu cookies na mobilu
      Mereno na 390 px: tabulka a jeji bunky sahaly na 501 px, tedy 111 px pres okraj
      (scrollWidth stranky zustal 390, protoze to sablona orizne, ale cast textu
      nebyla videt). Redakcni tabulka nema v HTML zadny posuvny obal a pridat ho nelze
      (kontrakt bod 6), takze posuvna je sama tabulka. Nad 700 px se vraci normalni
      chovani, tam se vejde.
      Kontrola po nasazeni: prvky uvnitr tabulky hlasi prekroceni dal, protoze skript
      overflow bere jen inline style="overflow", ne overflow z CSS. Tabulka uz ale
      vodorovne roluje a scrollWidth stranky je 390.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus).p646 #obsah #clanek table,
body:has(.zs26-hlavicka):not(.foxplus).p684 #obsah #clanek table{
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
@media (min-width: 700px) {
  body:has(.zs26-hlavicka):not(.foxplus).p646 #obsah #clanek table,
  body:has(.zs26-hlavicka):not(.foxplus).p684 #obsah #clanek table{
    display: table;
    overflow-x: visible;
  }
}

/* ===== css-obsah/79-rozcestniky-ram.css ===== */
/* 79-rozcestniky-ram.css
   Co to je: ram kolem novych sekci ZS26, ktere Joomla vykresluje uvnitr obalu clanku.
   Stavitel B, noc 25. 8. 2026.
   Stranky: /hubnu, /sportuji, /chci-jist, /jim-podle-svych-potreb (div.zs26.zs26-rozcestnik),
   /o-nas (div.zs26.zs26-o-nas, pridano 1. 9. 2026),
   /programy (.zs26-programy), /program-na-miru (.zs26-namiru),
   /nutricni-poradenstvi-2026 (.zs26-poradenstvi).

   Zmereno 25. 8. na /hubnu v headless Chromu (port 9302):
   - #obsah deti: hlavicka, div.main_limit.obsah, paticka. Zadny .pas, zadne hero.
   - div.main_limit.obsah: max-width 1180px, margin 0 130px, padding 64px 20px.
   - #dcomponent i #clanek: sirka 1140, padding 0, border 0, pozadi zadne.
     Ram ani odsazeni na obalu clanku uz nejsou, to odstranil 60-zaklad.css.
     Zbyva jedina vec: obal 1180 px, ktery drzi sekce ZS26 uvnitr sloupce.
   - Kvuli tomu mela svetla sekce (.zs-sekce--svetla, pozadi F3FDEE) bily pruh vlevo
     i vpravo a nesla od kraje ke kraji jako na homepage.
   - .zs-sekce ma vlastni padding 64px 0 a uvnitr .zs-obsah s max-width 1180px
     a padding 0 20px. Kdyz se obal pusti na plnou sirku, obsah sekce skonci
     presne na 150 px stejne jako predtim, jen plocha sekce jde az ke kraji okna.
   - Drobecky (Domu / Programy / Hubnu) jsou soucast modulu ZS26 uvnitr .zs-sekce,
     ne Joomla ul.breadcrumbC. Sablonove drobecky na techto strankach nejsou
     (mereno: 0 prvku ul.breadcrumbC). Neni tedy co skryvat ani prebarvovat.

   Proc `body:has(.zs26-hlavicka)` na zacatku: lint chce, aby selektor zacinal presne
   timhle retezcem.

   Proc druhe `:has()` visi na obalu clanku, ne na body (oprava 27. 8. 2026).
   Puvodne to bylo `body:has(.zs26-programy) #obsah > .main_limit.obsah`, tedy
   "kdyz je nekde na strance sekce programu, pust obal clanku od kraje ke kraji".
   Jenze modul 12 Detail programu ma uvnitr `div.zs26.zs26-programy` a sedi
   v pozici `obsah_pod` na vsech 25 strankach programu. Podminka na body tam tedy
   plati taky a obal clanku prisel o sirku 1180 i o bocni odsazeni: text
   "O programu Pro zdravi" zacinal na x=0, zatimco hlavicka a konfigurator
   na x=150 (mereno na /programy-a-priprava/program-pro-zdravi, 1440 px).
   Marek 27. 8.: "tady je to pak strasne spatne zarovnane."
   `#obsah > .main_limit.obsah:has(.zs26-programy)` se pta na to, co se opravdu
   mysli: sekce ZS26 je uvnitr obalu clanku. Overeno, ze na /programy-a-priprava,
   /hubnu, /program-na-miru a /nutricni-poradenstvi-2026 je uvnitr (plna sirka drzi)
   a na detailu programu je vedle (obal si nechava 1180).

   Zamerne nehotove a proc:
   - Uvnitr .zs26 se nesaha na nic. Vzhled sekci, karet a tlacitek ZS26 patri
     do css-partials/, ne do skinu nad starym obsahem (kontrakt bod 1).
   - .zs-sticky-lista (spodni lista s cenou na mobilu) zustava bez zmeny, je to
     soucast modulu ZS26.
   - Stranky /sportuji, /chci-jist a /jim-podle-svych-potreb maji stejnou znacku
     jako /hubnu, takze je pokryva tentyz selektor. Overeno bylo /hubnu a /programy.
*/

/* ---------------------------------------------------------------
   1. Obal clanku pusti sekce ZS26 od kraje ke kraji
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-rozcestnik),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-programy),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-namiru),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-poradenstvi),
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-o-nas) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

/* Sloupec komponenty a obal clanku uz jen predavaji sirku dal. */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-rozcestnik) #dcomponent,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-programy) #dcomponent,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-namiru) #dcomponent,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-poradenstvi) #dcomponent,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-rozcestnik) #clanek.item-page,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-programy) #clanek.item-page,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-namiru) #clanek.item-page,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-poradenstvi) #clanek.item-page,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-o-nas) #dcomponent,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-o-nas) #clanek.item-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

/* ---------------------------------------------------------------
   2. Sablonove drobecky, kdyby se na nekterou z techto stranek pridaly.
      Dnes tam nejsou (mereno), tohle je pojistka: at vypadaji jako .zs-popisek
      a sedi na stejne ose jako obsah sekce, ne u kraje okna.
   --------------------------------------------------------------- */
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-rozcestnik) ul.breadcrumbC,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-programy) ul.breadcrumbC,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-namiru) ul.breadcrumbC,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-poradenstvi) ul.breadcrumbC,
body:has(.zs26-hlavicka):not(.foxplus) #obsah > .main_limit.obsah:has(.zs26-o-nas) ul.breadcrumbC {
  box-sizing: border-box;
  max-width: var(--zs-sirka-obsah);
  margin-inline: auto;
  padding: var(--zs-odstup-base) var(--zs-odstup-lg);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}