/* novy-2026.css
   Facelift webu zdravestravovani.cz, první verze homepage a čtyř rozcestníků.
   Složil agent integrace-qa 21. 8. 2026 ze souborů v css-partials/ a z podklady/zs26-tokeny.css.
   Partialy zůstávají v balíku vedle tohohle souboru, aby bylo vidět, co odkud je.
   Zdrojem pravdy je tenhle složený soubor, partialy se do šablony nenačítají.

   Jak se to načítá:
   - jeden <link rel="stylesheet" href="/templates/template_general/css/novy-2026.css">
     v index.php šablony template_general, ZA řádkem s template2024.css
   - do template2024.css se nesahá, nic se z něj nemaže a nic nepřepisuje
   - každý selektor v tomhle souboru začíná třídou .zs26, takže mimo bloky
     obalené <div class="zs26 zs26-<nazev>"> se nic nezmění
   - výjimka je blok :root s tokeny --zs-*, ten nic nevykresluje, jen definuje proměnné

   Pořadí: tokeny, 10-zaklad, 20-komponenty, 31-homepage-a, 32-homepage-b, 40-rozcestnik.
   Pozdější soubor smí přebít dřívější, obráceně to neplatí.

   Pravidla, která soubor drží: barvy a rozměry jen přes var(--zs-...), žádné hex barvy
   kromě #fff, žádné stíny, žádný JavaScript, žádné externí fonty. Ověřeno lintem
   a v prohlížeči na 1440 px a 390 px, zápis je v QA.md.
*/


/* ===== podklady/zs26-tokeny.css ===== */

/* zs26-tokeny.css
   Tokeny pro facelift webu zdravestravovani.cz, září 2026.
   Start pro novy-2026.css ze zadání 18/01 (prefix .zs26, do template2024.css se nesahá).
   Zdroj: Figma ZS-wireframe, kolekce ZS Sémantika, stránka 01 Design systém: základy.
   Názvy proměnných odpovídají code syntaxu ve Figmě (Dev Mode ukáže totéž).
   Kontrasty: tmavě zelená na limetce 7,0:1, odkaz #4E6600 na bílé 6,5:1, okraj pole #7E8A6B 3,7:1 (dopočet WCAG 2.2, 20. 8. 2026). */

:root {
  /* barvy: pozadí */
  --zs-barva-pozadi-stranka: #FFFFFF;
  --zs-barva-pozadi-sekce: #F3FDEE;
  --zs-barva-pozadi-sekce-2: #FEF7E5;
  --zs-barva-pozadi-karta: #FFFFFF;
  --zs-barva-pozadi-jemne: #F6FFF2;
  --zs-barva-pozadi-tmave: #1F3F2A;
  /* barvy: text */
  --zs-barva-text-zakladni: #1D1D1D;
  --zs-barva-text-tlumeny: #4E5A50;
  --zs-barva-text-popisek: #5F6C63;
  --zs-barva-text-nadpis: #1F3F2A;
  --zs-barva-text-odkaz: #4E6600;
  --zs-barva-text-na-limetce: #1F3F2A;
  --zs-barva-text-na-tmavem: #F3FDEE;
  --zs-barva-text-inverzni: #FFFFFF;
  /* barvy: akce (tlačítka) */
  --zs-barva-akce-primarni: #AED800;
  --zs-barva-akce-primarni-hover: #9CC200;
  --zs-barva-akce-primarni-text: #1F3F2A;
  --zs-barva-akce-sekundarni-ramecek: #1F3F2A;
  --zs-barva-akce-sekundarni-hover: #F3FDEE;
  --zs-barva-akce-tmave: #1F3F2A;
  --zs-barva-akce-tmave-hover: #16301F;
  /* barvy: akcent a rámečky */
  --zs-barva-akcent-zluta: #F1D511;
  --zs-barva-akcent-zluta-plo: #FCF5C4;
  --zs-barva-akcent-limetka-plo: #EDF6C6;
  --zs-barva-ramecek-karta: #D5DACC;
  --zs-barva-ramecek-pole: #7E8A6B;
  --zs-barva-ramecek-doporucena: #1F3F2A;
  --zs-barva-ramecek-na-tmavem: #4E5A50;
  /* barvy: ikony a stavy */
  --zs-barva-ikona-vychozi: #1F3F2A;
  --zs-barva-ikona-check: #4E6600;
  --zs-barva-ikona-na-tmavem: #F3FDEE;
  --zs-barva-stav-chyba: #8B2A39;
  --zs-barva-stav-chyba-plo: #F7E6E9;
  --zs-barva-stav-ok: #146B3A;
  --zs-barva-stav-ok-plo: #E2F0E6;
  --zs-barva-stav-pozor: #8A5300;
  --zs-barva-stav-pozor-plo: #FBEBCF;
  --zs-barva-stav-fokus: #2F6FE0;
  /* barvy: patička */
  --zs-barva-paticka-pozadi: #1F3F2A;
  --zs-barva-paticka-text: #F3FDEE;
  --zs-barva-paticka-text-tlumeny: #D5DACC;
  /* odstupy, základ 4 px */
  --zs-odstup-xs: 4px;
  --zs-odstup-sm: 8px;
  --zs-odstup-md: 12px;
  --zs-odstup-base: 16px;
  --zs-odstup-lg: 20px;
  --zs-odstup-xl: 24px;
  --zs-odstup-2xl: 32px;
  --zs-odstup-sekce-mobil: 44px;
  --zs-odstup-sekce: 64px;
  /* zaoblení */
  --zs-radius-male: 8px;
  --zs-radius-karta: 16px;
  --zs-radius-velke: 24px;
  --zs-radius-pill: 999px;
  /* výšky a šířky */
  --zs-vyska-tlacitko: 48px;
  --zs-vyska-tlacitko-male: 44px;
  --zs-vyska-pole: 48px;
  --zs-sirka-obsah: 1180px;
  /* stín */
  --zs-stin-karta: 0 1px 0 rgba(22, 33, 26, .04), 0 10px 30px -22px rgba(22, 33, 26, .55);
  /* písmo (Poppins self-hosted, preload, font-display: swap) */
  --zs-pismo: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Typografická škála (Figma textové styly ZS/…). Čtený text nikdy pod 16 px, váha 300 se nepoužívá. */
.zs26 { font-family: var(--zs-pismo); color: var(--zs-barva-text-zakladni); font-size: 16px; line-height: 1.55; }
.zs26 .zs-h1 { font-size: clamp(38px, 4.2vw, 56px); font-weight: 700; line-height: 1.15; letter-spacing: -0.035em; color: var(--zs-barva-text-nadpis); }
.zs26 .zs-h1-podstranka { font-size: clamp(34px, 3.3vw, 44px); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; color: var(--zs-barva-text-nadpis); }
.zs26 .zs-h2 { font-size: clamp(26px, 2.7vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--zs-barva-text-nadpis); }
.zs26 .zs-h3 { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: var(--zs-barva-text-nadpis); }
.zs26 .zs-h4 { font-size: 17.5px; font-weight: 700; line-height: 1.35; color: var(--zs-barva-text-nadpis); }
.zs26 .zs-perex { font-size: 19px; line-height: 1.5; color: var(--zs-barva-text-tlumeny); }
.zs26 .zs-text-vedlejsi { font-size: 15.5px; line-height: 1.55; }
.zs26 .zs-popisek { font-size: 14.5px; line-height: 1.5; color: var(--zs-barva-text-popisek); }
.zs26 .zs-stitek { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.zs26 .zs-cena { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--zs-barva-text-nadpis); }
.zs26 .zs-cena-velka { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--zs-barva-text-nadpis); }

/* Tlačítko (komponenta Tlačítko ve Figmě). Na jedné obrazovce jen jedno primární. */
.zs26 .zs-tlacitko { 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); border-radius: var(--zs-radius-pill); font-weight: 600; font-size: 16px; line-height: 1; text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.zs26 .zs-tlacitko--primarni { background: var(--zs-barva-akce-primarni); color: var(--zs-barva-akce-primarni-text); }
.zs26 .zs-tlacitko--primarni:hover { background: var(--zs-barva-akce-primarni-hover); }
.zs26 .zs-tlacitko--sekundarni { background: var(--zs-barva-pozadi-karta); color: var(--zs-barva-text-nadpis); border-color: var(--zs-barva-akce-sekundarni-ramecek); }
.zs26 .zs-tlacitko--sekundarni:hover { background: var(--zs-barva-akce-sekundarni-hover); }
.zs26 .zs-tlacitko--tmave { background: var(--zs-barva-akce-tmave); color: var(--zs-barva-text-inverzni); }
.zs26 .zs-tlacitko--tmave:hover { background: var(--zs-barva-akce-tmave-hover); }
.zs26 .zs-tlacitko--textove { background: transparent; color: var(--zs-barva-text-odkaz); padding: 0 var(--zs-odstup-xs); }
.zs26 .zs-tlacitko--male { min-height: var(--zs-vyska-tlacitko-male); padding: 0 var(--zs-odstup-lg); }
.zs26 .zs-tlacitko:focus-visible { outline: 2px solid var(--zs-barva-stav-fokus); outline-offset: 2px; }
.zs26 .zs-tlacitko[disabled], .zs26 .zs-tlacitko[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ===== css-partials/10-zaklad.css ===== */

/* 10-zaklad.css
   Co to je: reset omezený na .zs26, sekce, container, mřížky a obrázkový placeholder
   pro facelift zdravestravovani.cz. Staví na podklady/zs26-tokeny.css, ten se nemění.

   Zdroje:
   - KONTRAKT.md, sdílené třídy (obal a sekce, mřížky, placeholder)
   - Figma ZS-wireframe yPtWQdvR3z3CaLCwsUuP6N, stránka 67:4 (02 Design systém: komponenty):
     odstup mřížky 24 px (4 karty po 277 px v 1180, 3 kroky po 377 px v 1180),
     svislý odstup sekce desktop 64 px a mobil 44 px (Pás fotek 114:2135 a 114:2148)
   - PNG podklady/01-homepage-desktop.png (859 x 4096, měřítko 0,5965 vůči 1440)
     a podklady/M1-homepage-mobil.png: střídání ploch bílá, světlá, krémová, tmavá

   Záměrně nehotové:
   - CHYBÍ: token pro zaoblení 4 px (zaškrtávátko v 20-komponenty.css je proto na 4px natvrdo)
   - .zs-obsah--uzky (920 px) není v kontraktu, přidáno podle PNG (FAQ blok je 920 px na střed)
   - .zs-obrazek--ctverec / --sirka / --pas jsou pomocné poměry stran navíc ke kontraktu
   - tisková a high contrast varianta se neřeší, není v zadání první verze
   - žádný box-shadow (Marek 20. 8. 2026: ať je to čisté), stínový token se nepoužívá
*/

/* ---------------------------------------------------------------
   1. Reset, jen uvnitř .zs26. Nic mimo obal se nedotýká šablony.
   --------------------------------------------------------------- */
.zs26,
.zs26 *,
.zs26 *::before,
.zs26 *::after { box-sizing: border-box; }

.zs26 img,
.zs26 picture,
.zs26 svg,
.zs26 video { max-width: 100%; }

.zs26 img,
.zs26 svg,
.zs26 video { display: block; height: auto; }

.zs26 a { color: var(--zs-barva-text-odkaz); }
.zs26 a:hover { text-decoration: underline; }

.zs26 h1,
.zs26 h2,
.zs26 h3,
.zs26 h4,
.zs26 h5,
.zs26 h6,
.zs26 p,
.zs26 figure,
.zs26 blockquote,
.zs26 dl,
.zs26 dd { margin: 0; }

.zs26 ul,
.zs26 ol { margin: 0; padding: 0; }
.zs26 ul > li,
.zs26 ol > li { list-style: none; }

.zs26 button,
.zs26 input,
.zs26 select,
.zs26 textarea { font: inherit; color: inherit; }

.zs26 :focus-visible {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}

/* Skryté pro oko, čitelné pro odečítač. Pomocná třída pro popisky ikon. */
.zs26 .zs-skryte {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------
   2. Sekce. Varianty ploch podle tokenů, svislý odstup podle šířky.
   --------------------------------------------------------------- */
.zs26 .zs-sekce {
  padding-block: var(--zs-odstup-sekce-mobil);
  background: var(--zs-barva-pozadi-stranka);
}

.zs26 .zs-sekce--bila { background: var(--zs-barva-pozadi-stranka); }
.zs26 .zs-sekce--svetla { background: var(--zs-barva-pozadi-sekce); }
.zs26 .zs-sekce--kremova { background: var(--zs-barva-pozadi-sekce-2); }

.zs26 .zs-sekce--tmava {
  background: var(--zs-barva-pozadi-tmave);
  color: var(--zs-barva-text-na-tmavem);
}
.zs26 .zs-sekce--tmava .zs-h1,
.zs26 .zs-sekce--tmava .zs-h1-podstranka,
.zs26 .zs-sekce--tmava .zs-h2,
.zs26 .zs-sekce--tmava .zs-h3,
.zs26 .zs-sekce--tmava .zs-h4,
.zs26 .zs-sekce--tmava .zs-cena,
.zs26 .zs-sekce--tmava .zs-cena-velka { color: var(--zs-barva-text-na-tmavem); }

.zs26 .zs-sekce--tmava .zs-perex,
.zs26 .zs-sekce--tmava .zs-popisek,
.zs26 .zs-sekce--tmava .zs-text-vedlejsi { color: var(--zs-barva-paticka-text-tlumeny); }

.zs26 .zs-sekce--tmava a { color: var(--zs-barva-text-na-tmavem); }

/* Sekce nalepená na předchozí (dva pásy stejné barvy pod sebou). */
.zs26 .zs-sekce--bez-horniho { padding-top: 0; }
.zs26 .zs-sekce--bez-dolniho { padding-bottom: 0; }

@media (min-width: 700px) {
  .zs26 .zs-sekce { padding-block: var(--zs-odstup-sekce); }
  .zs26 .zs-sekce--bez-horniho { padding-top: 0; }
  .zs26 .zs-sekce--bez-dolniho { padding-bottom: 0; }
}

/* ---------------------------------------------------------------
   3. Container. 1180 px na střed, boční odstup 20 px.
   --------------------------------------------------------------- */
.zs26 .zs-obsah {
  width: 100%;
  max-width: var(--zs-sirka-obsah);
  margin-inline: auto;
  padding: 0 20px;
}

/* Užší sloupec pro FAQ a dlouhý text (PNG 01, blok Časté dotazy je 920 px na střed). */
.zs26 .zs-obsah--uzky { max-width: 920px; }

/* ---------------------------------------------------------------
   4. Mřížky. Mobil 1 sloupec, 700 px 2 sloupce, 1024 px plný počet.
      Bloky v řadě jsou stejně vysoké.
   --------------------------------------------------------------- */
.zs26 .zs-mrizka {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-xl);
  align-items: stretch;
}
.zs26 .zs-mrizka > * { min-width: 0; }

@media (min-width: 700px) {
  .zs26 .zs-mrizka--2,
  .zs26 .zs-mrizka--3,
  .zs26 .zs-mrizka--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .zs26 .zs-mrizka--3 { grid-template-columns: repeat(3, 1fr); }
  .zs26 .zs-mrizka--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------
   5. Obrázky a placeholder. Fotky typů lidí a poradkyně dnes neexistují,
      místo nich jde do kódu popsaný placeholder.
   --------------------------------------------------------------- */
.zs26 .zs-obrazek {
  display: block;
  width: 100%;
  border-radius: var(--zs-radius-karta);
  overflow: hidden;
}

.zs26 .zs-obrazek--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 4 / 3;
  padding: var(--zs-odstup-base);
  background: var(--zs-barva-pozadi-jemne);
  border: 1px dashed var(--zs-barva-ramecek-karta);
  color: var(--zs-barva-text-popisek);
  font-size: 14.5px;
  line-height: 1.5;
}

.zs26 .zs-obrazek--ctverec { aspect-ratio: 1 / 1; }
.zs26 .zs-obrazek--sirka { aspect-ratio: 16 / 9; }
.zs26 .zs-obrazek--pas { aspect-ratio: auto; min-height: 72px; }

/* ===== css-partials/20-komponenty.css ===== */

/* 20-komponenty.css
   Co to je: sdílené komponenty z KONTRAKT.md. Karty, krok, fakt, reference, FAQ,
   pás fotek, pás CTA, formulářová pole, zaškrtávátko, hlavička, patička, sticky lišta,
   štítek. Načítá se za 10-zaklad.css, staví na tokenech.

   Zdroje (Figma ZS-wireframe yPtWQdvR3z3CaLCwsUuP6N, stránka 67:4):
   - Štítek            73:14   výška 24, radius 8, vždy rámeček
   - Pole              74:29   výška 48, radius 8, okraj ramecek-pole, fokus modrý 2 px, chyba 2 px vínová
   - Karta kategorie   75:4    desktop 277 x 480, foto na celou kartu + ztmavení, bílý text
                       75:20   mobil 358 řádková, foto 72, šipka vpravo
   - Karta programu    77:7    desktop 1180 x 160, foto 180 x 120, padding 20/24, gap 24
                       77:49   mobil 358 řádková, foto 56
   - Krok              78:20   377 x 188, padding 24, radius 16, kruh 40 limetka
   - Položka FAQ       78:45   šířka 920, padding svisle 20, gap 12, linka dole, značka 24 px
   - Reference         79:39   377, padding 24, radius 16, krémová plocha, iniciála 40 limetka-plo
   - Fakt              79:64   číslo 36 Bold, popisek 15,5, padding svisle 16
   - Hlavička          80:22   promo pás, lišta 80 (mobil 64, 80:45), logo 200 (mobil 140)
   - Patička           81:24   4 sloupce, logo na bílém chipu, právní řádek nad linkou
   - Sticky lišta      81:89   výška 72, horní linka, cena vlevo, široké primární tlačítko
   - Pás CTA           81:131  padding 24/32, radius 16, text vlevo, akce vpravo
   - Pás fotek         114:2148 mobil fotky 300 x 200, gap 8, vodorovný posuv, bílý pill štítek
   - Zaškrtávátko      144:59  20 x 20, radius 4, zaškrtnuté limetka + check
   Dopočet z PNG podklady/01-homepage-desktop.png a M1-homepage-mobil.png:
   fakta jsou na tmavém pásu zarovnaná na střed, kroky na světlé sekci jsou bílé,
   karty kategorie jsou na mobilu opravdu řádkové (M1), FAQ značka je v PNG plus a minus.

   Záměrně nehotové a vědomé odchylky:
   - ODCHYLKA od KONTRAKT.md: .zs-karta--kategorie není bílá karta s fotkou nahoře.
     Figma 75:4 i PNG 01 ji mají jako fotku přes celou kartu se ztmavením a bílým textem,
     tlačítko je textové bílé, ne sekundární. Struktura HTML z kontraktu zůstává platná
     (foto, h3, popisek, programy, cena, pata), mění se jen vzhled. Sekundární tlačítko
     uvnitř karty se vykreslí, ale na fotce vypadá cize, doporučené je --textove.
   - Značka FAQ je plus a minus podle Figmy 78:45 a PNG. Do 1. 9. 2026 to bylo + a x
     podle kontraktu, což byla evidovaná odchylka; grafický návrh FAQ stránky ji uzavřel
     ve prospěch předlohy. Znaménko je kreslené kolečko, přepnutí je hodnota
     background-size u .zs-faq[open].
   - ODCHYLKA: .zs-fakt__cislo je 36 px podle Figmy 79:64, i když kontrakt zmiňuje
     .zs-cena-velka (28 px). Třída .zs-cena-velka v HTML zůstává, přebíjí se tady.
   - .zs-karta--doporucena a .zs-stitek--novinka / --neutralni / --upozorneni / --nedostupne
     nejsou v kontraktu, jsou ve Figmě. Doporučená karta funguje i bez třídy, přes :has().
   - CHYBÍ: token pro zaoblení 4 px, zaškrtávátko má 4px natvrdo.
   - CHYBÍ: hover a fokus stavy karet ve Figmě nejsou, tady jsou dopočtené (změna barvy okraje).
   - Ikony (Bootstrap Icons 1.11.3) dodá šablona, tady jsou jen místa a rozměry.
     Hamburger a šipka u FAQ jsou kreslené CSS, aby modul nepotřeboval JS ani font ikon.
   - Žádný box-shadow nikde, ani na sticky liště (Figma ji má jen s horní linkou).
   - 21. 8. 2026 (agent integrace-qa): sem přibyly .zs-hlavicka__telefon-text
     a .zs-hlavicka__objednat, přesunuté z 32-homepage-b.css. Jsou to části
     komponenty Hlavička, ne modulu homepage. Viz QA.md.
*/

/* ---------------------------------------------------------------
   1. Štítek. Tokeny řeší písmo, tady je krabička.
   --------------------------------------------------------------- */
.zs26 .zs-stitek {
  display: inline-flex;
  align-items: center;
  /* Štítek je pilulka podle obsahu. Uvnitř .zs-karta__telo (flex column) nebo
     v mřížce by se bez tohohle roztáhl na celou šířku sloupce a udělal pruh,
     viz karta programu na rozcestníku. Mimo flex a grid je vlastnost neúčinná.
     Oprava 21. 8. 2026, agent integrace-qa, viz QA.md. */
  align-self: flex-start;
  min-height: 24px;
  padding: 0 var(--zs-odstup-sm);
  border: 1px solid var(--zs-barva-ramecek-pole);
  border-radius: var(--zs-radius-male);
  background: var(--zs-barva-pozadi-sekce);
  color: var(--zs-barva-text-tlumeny);
  white-space: nowrap;
}

.zs26 .zs-stitek--doporuceno {
  background: var(--zs-barva-akcent-zluta);
  border-color: var(--zs-barva-text-nadpis);
  color: var(--zs-barva-text-nadpis);
}
.zs26 .zs-stitek--novinka {
  background: var(--zs-barva-akcent-limetka-plo);
  border-color: var(--zs-barva-text-odkaz);
  color: var(--zs-barva-text-odkaz);
}
.zs26 .zs-stitek--neutralni {
  background: var(--zs-barva-pozadi-sekce);
  border-color: var(--zs-barva-ramecek-pole);
  color: var(--zs-barva-text-tlumeny);
}
.zs26 .zs-stitek--upozorneni {
  background: var(--zs-barva-stav-pozor-plo);
  border-color: var(--zs-barva-stav-pozor);
  color: var(--zs-barva-stav-pozor);
}
.zs26 .zs-stitek--nedostupne {
  background: var(--zs-barva-pozadi-karta);
  border-color: var(--zs-barva-ramecek-karta);
  color: var(--zs-barva-text-popisek);
}

/* ---------------------------------------------------------------
   2. Karta, základ. Bílá plocha, rámeček, plná výška v mřížce.
   --------------------------------------------------------------- */
.zs26 .zs-karta {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-md);
  height: 100%;
  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);
}

.zs26 a.zs-karta {
  text-decoration: none;
  color: inherit;
}
.zs26 a.zs-karta:hover { border-color: var(--zs-barva-ramecek-pole); }
.zs26 a.zs-karta:hover .zs-h3,
.zs26 a.zs-karta:hover .zs-h4 { text-decoration: underline; }

.zs26 .zs-karta__foto {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--zs-radius-male);
}

.zs26 .zs-karta__ikona {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.zs26 .zs-karta__telo {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
  min-width: 0;
}

.zs26 .zs-karta__programy {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}

.zs26 .zs-karta__pata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zs-odstup-md);
  margin-top: auto;
  padding-top: var(--zs-odstup-md);
}

/* Doporučená karta: 2 px zelený rámeček. Funguje přes třídu i přes přítomnost štítku. */
.zs26 .zs-karta--doporucena {
  border-width: 2px;
  border-color: var(--zs-barva-ramecek-doporucena);
}
.zs26 .zs-karta:has(.zs-stitek--doporuceno) {
  border-width: 2px;
  border-color: var(--zs-barva-ramecek-doporucena);
}

/* ---------------------------------------------------------------
   3. Karta kategorie. Mobil řádková (Figma 75:20), od 700 px fotka
      přes celou kartu se ztmavením a bílým textem (Figma 75:4, PNG 01).
   --------------------------------------------------------------- */
.zs26 .zs-karta--kategorie {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zs-odstup-md);
  padding: var(--zs-odstup-md) var(--zs-odstup-base) var(--zs-odstup-md) var(--zs-odstup-md);
}
.zs26 .zs-karta--kategorie .zs-karta__foto {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  aspect-ratio: 1 / 1;
}
.zs26 .zs-karta--kategorie .zs-karta__telo {
  flex: 1 1 auto;
  gap: var(--zs-odstup-xs);
}
/* Popis placeholderu se do miniatury 72 x 72 nevejde na 14,5 px a vyteče ven.
   Na mobilu se proto zmenší. Od 700 px je fotka přes celou kartu a platí zase
   výchozí velikost z 10-zaklad.css. Oprava 21. 8. 2026, agent integrace-qa. */
.zs26 .zs-karta--kategorie .zs-karta__foto.zs-obrazek--placeholder {
  padding: var(--zs-odstup-xs);
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
}
.zs26 .zs-karta--kategorie .zs-h3 {
  font-size: 17.5px;
  line-height: 1.35;
  letter-spacing: 0;
}
.zs26 .zs-karta--kategorie .zs-cena {
  font-size: 15.5px;
  font-weight: 400;
  color: var(--zs-barva-text-zakladni);
}
.zs26 .zs-karta--kategorie .zs-karta__pata {
  flex: 1 0 100%;
  margin-top: 0;
  padding-top: var(--zs-odstup-sm);
}

@media (min-width: 700px) {
  .zs26 .zs-karta--kategorie {
    position: relative;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: var(--zs-odstup-sm);
    min-height: 480px;
    padding: var(--zs-odstup-lg);
    overflow: hidden;
    background: var(--zs-barva-pozadi-sekce);
  }
  .zs26 .zs-karta--kategorie .zs-karta__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    z-index: 0;
  }
  /* Ztmavení pod textem (Figma 148:53). Bez color-mix spadne na prostý přechod.
     Oprava 21. 8. 2026 (agent integrace-qa): ztmavení jde přes celou výšku karty,
     ne jen přes spodních 360 px. Karta z kontraktu nese o dva řádky víc než
     wireframe (výpis programů a řádek „celodenní stravování“), takže text
     na 360 px nevyšel a bílý nadpis stál na světlé fotce. Viz QA.md. */
  .zs26 .zs-karta--kategorie::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(to bottom, transparent, var(--zs-barva-pozadi-tmave));
    background-image: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--zs-barva-pozadi-tmave) 0%, transparent) 0%,
      color-mix(in srgb, var(--zs-barva-pozadi-tmave) 12%, transparent) 22%,
      color-mix(in srgb, var(--zs-barva-pozadi-tmave) 62%, transparent) 52%,
      color-mix(in srgb, var(--zs-barva-pozadi-tmave) 96%, transparent) 100%
    );
  }
  .zs26 .zs-karta--kategorie .zs-karta__telo,
  .zs26 .zs-karta--kategorie .zs-karta__pata {
    position: relative;
    z-index: 2;
  }
  /* Tělo karty se na mobilu roztahuje (flex: 1 1 auto v řádkové variantě).
     Na desktopu se roztahovat nesmí, jinak justify-content: flex-end nemá co posunout
     a text vyleze na horní kraj karty. Oprava 21. 8. 2026, agent integrace-qa. */
  .zs26 .zs-karta--kategorie .zs-karta__telo { flex: 0 0 auto; }
  /* Popis placeholderu ať nestojí uprostřed pod textem karty a je zase čitelný. */
  .zs26 .zs-karta--kategorie .zs-karta__foto.zs-obrazek--placeholder {
    align-items: flex-start;
    padding: var(--zs-odstup-base);
    font-size: 14.5px;
    line-height: 1.5;
  }
  .zs26 .zs-karta--kategorie .zs-karta__pata {
    flex: 0 0 auto;
    padding-top: var(--zs-odstup-sm);
  }
  .zs26 .zs-karta--kategorie .zs-h3 {
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.015em;
  }
  .zs26 .zs-karta--kategorie .zs-h3,
  .zs26 .zs-karta--kategorie .zs-popisek,
  .zs26 .zs-karta--kategorie .zs-text-vedlejsi,
  .zs26 .zs-karta--kategorie .zs-karta__programy,
  .zs26 .zs-karta--kategorie .zs-cena { color: var(--zs-barva-text-na-tmavem); }
  .zs26 .zs-karta--kategorie .zs-cena {
    font-size: 16px;
    font-weight: 600;
  }
  .zs26 .zs-karta--kategorie .zs-tlacitko--textove { color: var(--zs-barva-text-na-tmavem); }
}

/* ---------------------------------------------------------------
   4. Karta programu. Řádková karta rozcestníků (Figma 77:7 a 77:49).
   --------------------------------------------------------------- */
.zs26 .zs-karta--program {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zs-odstup-md);
  padding: var(--zs-odstup-md) var(--zs-odstup-base);
}
.zs26 .zs-karta--program .zs-karta__foto {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
}
.zs26 .zs-karta--program .zs-karta__telo {
  flex: 1 1 12rem;
  gap: var(--zs-odstup-xs);
}
.zs26 .zs-karta--program .zs-karta__pata {
  flex: 1 0 100%;
  margin-top: 0;
  padding-top: var(--zs-odstup-sm);
}

@media (min-width: 700px) {
  .zs26 .zs-karta--program {
    flex-wrap: nowrap;
    gap: var(--zs-odstup-xl);
    padding: var(--zs-odstup-lg) var(--zs-odstup-xl) var(--zs-odstup-lg) var(--zs-odstup-lg);
  }
  .zs26 .zs-karta--program .zs-karta__foto {
    width: 180px;
    height: 120px;
    aspect-ratio: auto;
  }
  .zs26 .zs-karta--program .zs-karta__pata {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-top: 0;
    padding-top: 0;
  }
}

/* ---------------------------------------------------------------
   5. Krok. Číslo v limetkovém kruhu, titulek, text.
      Na světlé a krémové sekci je krok bílý (Figma pozn. u 78:30, PNG 01).
   --------------------------------------------------------------- */
.zs26 .zs-krok {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-md);
  height: 100%;
  padding: var(--zs-odstup-xl);
  background: var(--zs-barva-pozadi-sekce);
  border-radius: var(--zs-radius-karta);
}
.zs26 .zs-sekce--svetla .zs-krok,
.zs26 .zs-sekce--kremova .zs-krok { background: var(--zs-barva-pozadi-karta); }
.zs26 .zs-sekce--tmava .zs-krok {
  background: transparent;
  border: 1px solid var(--zs-barva-ramecek-na-tmavem);
}

.zs26 .zs-krok__cislo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-akce-primarni);
  color: var(--zs-barva-text-na-limetce);
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1;
}

/* ---------------------------------------------------------------
   6. Fakt. Pás faktů, na tmavém pásu světlý text (Figma 79:64, PNG 01).
   --------------------------------------------------------------- */
.zs26 .zs-fakt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zs-odstup-xs);
  padding: var(--zs-odstup-base) 0;
  text-align: center;
}
.zs26 .zs-fakt__cislo {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--zs-barva-text-nadpis);
}
.zs26 .zs-fakt__popis {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}
.zs26 .zs-sekce--tmava .zs-fakt__cislo { color: var(--zs-barva-text-na-tmavem); }
.zs26 .zs-sekce--tmava .zs-fakt__popis { color: var(--zs-barva-paticka-text-tlumeny); }

/* ---------------------------------------------------------------
   7. Reference. Krémová karta, citace, iniciála v kruhu.
   --------------------------------------------------------------- */
.zs26 .zs-reference {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-base);
  height: 100%;
  padding: var(--zs-odstup-xl);
  background: var(--zs-barva-pozadi-sekce-2);
  border-radius: var(--zs-radius-karta);
}
.zs26 .zs-sekce--kremova .zs-reference { background: var(--zs-barva-pozadi-karta); }

.zs26 .zs-reference__text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}

.zs26 .zs-reference__autor {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-md);
  margin-top: auto;
}
.zs26 .zs-reference__iniciala {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-akcent-limetka-plo);
  color: var(--zs-barva-text-odkaz);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.zs26 .zs-reference__jmeno {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--zs-barva-text-nadpis);
}
.zs26 .zs-reference__role {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}

/* Varianta s portretem (26. 8. 2026). Fotka jde na spad zapornymi bocnimi okraji,
   horni rohy zaobli overflow karty. Zdroje v /images/reference/ jsou ctvercove
   500 px, proto 1:1 a zadny orez. flex: 0 0 auto, aby ji nesrazil stretch mrizky. */
.zs26 .zs-reference--foto {
  padding-top: 0;
  overflow: hidden;
}
.zs26 .zs-reference__foto {
  display: block;
  flex: 0 0 auto;
  width: calc(100% + var(--zs-odstup-xl) * 2);
  margin-inline: calc(var(--zs-odstup-xl) * -1);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------------------------------------------------------------
   7b. Pas tvari. Kolecko s portretem, jmeno a role, odkaz na detail ohlasu.
       Nese jen tvar a jmeno, zadny citat, takze nevznika novy text pod
       cizim jmenem a nevznika claim expozice.
       Vyrez resi --zs-tvar-zoom a --zs-tvar-x/y primo na obrazku: cast zdroju
       jsou celopostavove zabery a stredovy vyrez by z obliceje udelal skvrnu.
       Zdroj i kontejner jsou ctverce, takze object-fit nema co delat a orez
       obstara transform uvnitr overflow: hidden. Poradi transformaci je
       zprava doleva, tedy nejdriv posun obliceje do stredu, pak zvetseni.
   --------------------------------------------------------------- */
.zs26 .zs-tvare__popis {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}
.zs26 .zs-tvare__seznam {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-xl) var(--zs-odstup-base);
  margin: var(--zs-odstup-base) 0 0;
  padding: 0;
  list-style: none;
}
.zs26 .zs-tvare__seznam > li { margin: 0; padding: 0; }
.zs26 .zs-tvare__seznam > li::before { content: none; }

.zs26 .zs-tvar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zs-odstup-xs);
  width: 96px;
  color: var(--zs-barva-text-nadpis);
  text-align: center;
  text-decoration: none;
}
.zs26 .zs-tvar__kolecko {
  display: block;
  overflow: hidden;
  width: 72px;
  height: 72px;
  margin-bottom: var(--zs-odstup-sm);
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-pozadi-sekce);
}
.zs26 .zs-tvar__kolecko img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--zs-tvar-zoom, 1)) translate(var(--zs-tvar-x, 0%), var(--zs-tvar-y, 0%));
}
.zs26 .zs-tvar__jmeno {
  /* Dva radky natvrdo, aby role pod jednoradkovymi i dvouradkovymi jmeny
     sedely ve stejne vysce. Bez toho je rada roztresena. */
  min-height: calc(14.5px * 1.35 * 2);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.zs26 .zs-tvar__role {
  font-size: 13px;
  line-height: 1.35;
  color: var(--zs-barva-text-tlumeny);
}
.zs26 .zs-tvar:hover .zs-tvar__kolecko,
.zs26 .zs-tvar:focus-visible .zs-tvar__kolecko {
  outline: 2px solid var(--zs-barva-text-odkaz);
  outline-offset: 2px;
}
.zs26 .zs-tvar:hover .zs-tvar__jmeno { text-decoration: underline; }

/* ---------------------------------------------------------------
   8. FAQ. Nativní details a summary, značka přes ::after, bez JS.

   1. 9. 2026: z řádkového seznamu s linkou pod položkou na kartu.
   Každé details je samostatná bílá karta, rámeček 1 px, radius 16,
   mezi kartami 8 px. Značka je kreslené kolečko 32 px s limetkou,
   plus a minus jsou dva pruhy z linear-gradient, ne glyf: glyf
   v Poppins má vlastní metriky a na optický střed kolečka nesedí.

   Vnitřní odsazení jde přes --zs-faq-odsazeni-*, ne přes hodnoty
   natvrdo. Důvod: blok proti šabloně (hledej "zs-faq__otazka" níž
   v souboru) opakuje padding a rozměry s !important, a shorthand
   `padding !important` by jakoukoli pozdější variantu bez !important
   smazal. Proměnná se přebíjí normální kaskádou a hodnota doteče
   i do !important deklarace. Mobil a výjimka pro /cenik proto mění
   jen proměnné, ne deklarace.

   Mezera mezi kartami je `.zs-faq + .zs-faq`, ne `gap` na obalu.
   FAQ nemá napříč webem jednotný obal: .zs-m-faq__seznam existuje
   jen na homepage, detailu programu a katalogu, u rozcestníků,
   na míru a poradenství jsou details přímé děti vedle h2.
   --------------------------------------------------------------- */
.zs26 .zs-faq {
  --zs-faq-odsazeni-x: var(--zs-odstup-xl);
  --zs-faq-odsazeni-y: var(--zs-odstup-lg);
  --zs-faq-mezera: var(--zs-odstup-sm);
  --zs-faq-znak: 32px;
  --zs-faq-znak-pozadi: var(--zs-barva-akce-primarni);
  --zs-faq-znak-barva: var(--zs-barva-text-na-limetce);
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
}
.zs26 .zs-faq + .zs-faq { margin-top: var(--zs-faq-mezera); }
.zs26 .zs-faq:hover { border-color: var(--zs-barva-ramecek-pole); }

/* Fokus patří kartě, ne summary uvnitř ní. Globální .zs26 :focus-visible
   má outline-offset 2 px a nakreslil by hranatý obdélník přes zaoblený
   rámeček. Stejný vzor s :has() je výš u .zs-karta. */
.zs26 .zs-faq:has(> .zs-faq__otazka:focus-visible) {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}
.zs26 .zs-faq > .zs-faq__otazka:focus-visible { outline: none; }

.zs26 .zs-faq__otazka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zs-odstup-base);
  padding: var(--zs-faq-odsazeni-y) var(--zs-faq-odsazeni-x);
  cursor: pointer;
  list-style: none;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--zs-barva-text-nadpis);
}
.zs26 .zs-faq__otazka::-webkit-details-marker { display: none; }
.zs26 .zs-faq__otazka::marker { content: ""; }

/* Kolečko: plocha je background-color, znaménko dva pruhy z gradientu.
   Otevřená karta zhasne svislý pruh a zbude minus. */
.zs26 .zs-faq__otazka::after {
  content: "";
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--zs-faq-znak);
  height: var(--zs-faq-znak);
  border-radius: var(--zs-radius-pill);
  background-color: var(--zs-faq-znak-pozadi);
  background-image:
    linear-gradient(var(--zs-faq-znak-barva), var(--zs-faq-znak-barva)),
    linear-gradient(var(--zs-faq-znak-barva), var(--zs-faq-znak-barva));
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 14px 2px, 2px 14px;
}
.zs26 .zs-faq[open] > .zs-faq__otazka::after { background-size: 14px 2px, 0 0; }
.zs26 .zs-faq[open] > .zs-faq__otazka { padding-bottom: var(--zs-odstup-md); }

.zs26 .zs-faq__odpoved {
  padding: 0 var(--zs-faq-odsazeni-x) var(--zs-faq-odsazeni-y);
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}
.zs26 .zs-faq__odpoved p + p { margin-top: var(--zs-odstup-md); }

/* Mobil. Užší odsazení, ať otázce zbude šířka: 390 minus 40 (sekce)
   minus 2 (rámeček) minus 32 (karta) minus 32 (kolečko) minus 12 (gap)
   dá 272 px na text otázky. Dlouhá otázka se láme na víc řádků, proto
   kolečko drží nahoře, ne na svislém středu odstavce. */
@media (max-width: 699px) {
  .zs26 .zs-faq {
    --zs-faq-odsazeni-x: var(--zs-odstup-base);
    --zs-faq-odsazeni-y: var(--zs-odstup-base);
  }
  .zs26 .zs-faq__otazka { gap: var(--zs-odstup-md); align-items: flex-start; }
  .zs26 .zs-faq__otazka::after { margin-top: -4px; }
}

/* Řádková varianta bez karty. Pro details, které sdílí atom .zs-faq,
   ale nejsou položkou FAQ seznamu: rozbalovací tabulky na /cenik. */
.zs26 .zs-faq--radek {
  --zs-faq-odsazeni-x: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: 0;
}
.zs26 .zs-faq--radek:hover { border-color: var(--zs-barva-ramecek-karta); }
.zs26 .zs-faq--radek + .zs-faq--radek { margin-top: 0; }

/* ---------------------------------------------------------------
   9. Pás fotek. Vodorovná řada fotek jídel, na mobilu posuv se scroll-snap.
   --------------------------------------------------------------- */
.zs26 .zs-pas-fotek {
  display: flex;
  gap: var(--zs-odstup-sm);
  overflow-x: auto;
  padding-bottom: var(--zs-odstup-sm);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.zs26 .zs-pas-fotek__polozka {
  position: relative;
  flex: 0 0 300px;
  height: 200px;
  border-radius: var(--zs-radius-karta);
  overflow: hidden;
  scroll-snap-align: start;
}
.zs26 .zs-pas-fotek__polozka > img,
.zs26 .zs-pas-fotek__polozka > .zs-obrazek {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}

.zs26 .zs-pas-fotek__stitek {
  position: absolute;
  left: var(--zs-odstup-md);
  bottom: var(--zs-odstup-md);
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--zs-odstup-xs) var(--zs-odstup-md);
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-pozadi-karta);
  background: color-mix(in srgb, var(--zs-barva-pozadi-karta) 92%, transparent);
  color: var(--zs-barva-text-zakladni);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .zs26 .zs-pas-fotek {
    gap: var(--zs-odstup-xl);
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
  .zs26 .zs-pas-fotek__polozka {
    flex: 1 1 0;
    height: 260px;
  }
}

/* ---------------------------------------------------------------
   10. Pás CTA. Text vlevo, akce vpravo, na mobilu pod sebou.
   --------------------------------------------------------------- */
.zs26 .zs-pas-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-base);
  padding: var(--zs-odstup-xl);
  background: var(--zs-barva-pozadi-sekce);
  border-radius: var(--zs-radius-karta);
}
.zs26 .zs-sekce--svetla .zs-pas-cta { background: var(--zs-barva-pozadi-karta); }

.zs26 .zs-pas-cta__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--zs-odstup-xs);
  min-width: 0;
}
.zs26 .zs-pas-cta__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zs-odstup-md);
}

@media (min-width: 700px) {
  .zs26 .zs-pas-cta {
    flex-direction: row;
    align-items: center;
    gap: var(--zs-odstup-xl);
    padding: var(--zs-odstup-xl) var(--zs-odstup-2xl);
  }
  .zs26 .zs-pas-cta__akce {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
}

/* Tmavá varianta, 1. 9. 2026. Z návrhu FAQ stránky: tmavě zelený pás
   s ikonou, nadpisem, podtitulkem a limetkovým tlačítkem vpravo.
   Ikona je inline SVG se stroke: currentColor, stejný způsob jako
   .zs-menu__otaznik v hlavičce, aby pás nepotřeboval font ikon. */
.zs26 .zs-pas-cta--tmavy {
  background: var(--zs-barva-pozadi-tmave);
  color: var(--zs-barva-text-na-tmavem);
}
.zs26 .zs-pas-cta--tmavy .zs-pas-cta__nadpis {
  display: block;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--zs-barva-text-na-tmavem);
}
.zs26 .zs-pas-cta--tmavy .zs-pas-cta__popisek {
  display: block;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--zs-barva-paticka-text-tlumeny);
}
.zs26 .zs-pas-cta__ikona {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--zs-barva-akce-primarni);
}
.zs26 .zs-pas-cta--tmavy .zs-pas-cta__telo {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-base);
  min-width: 0;
}

/* ---------------------------------------------------------------
   11. Pole, skupina pole, zaškrtávátko.
   --------------------------------------------------------------- */
.zs26 .zs-pole-skupina {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
}
.zs26 .zs-pole-skupina__popisek {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}
.zs26 .zs-pole-skupina__napoveda {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}
.zs26 .zs-pole-skupina__chyba {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-stav-chyba);
}

.zs26 .zs-pole {
  width: 100%;
  min-height: var(--zs-vyska-pole);
  padding: 0 var(--zs-odstup-base);
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-pole);
  border-radius: var(--zs-radius-male);
  color: var(--zs-barva-text-zakladni);
  font-size: 16px;
  line-height: 1.55;
}
.zs26 .zs-pole::placeholder {
  color: var(--zs-barva-text-popisek);
  opacity: 1;
}
.zs26 .zs-pole:focus-visible {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: -2px;
  border-color: var(--zs-barva-stav-fokus);
}
.zs26 .zs-pole--chyba,
.zs26 .zs-pole[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--zs-barva-stav-chyba);
}
.zs26 .zs-pole[disabled] {
  background: var(--zs-barva-pozadi-sekce);
  border-color: var(--zs-barva-ramecek-karta);
  color: var(--zs-barva-text-popisek);
  opacity: .7;
}
.zs26 textarea.zs-pole {
  min-height: 120px;
  padding: var(--zs-odstup-md) var(--zs-odstup-base);
  resize: vertical;
}

/* Řádek pole + tlačítko vedle sebe (hero PSČ, newsletter). */
.zs26 .zs-pole-radek {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-md);
}
.zs26 .zs-pole-radek .zs-pole { flex: 1 1 12rem; }
.zs26 .zs-pole-radek .zs-tlacitko { flex: 0 0 auto; }

.zs26 .zs-zaskrtavatko {
  display: flex;
  align-items: flex-start;
  gap: var(--zs-odstup-md);
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}
.zs26 .zs-zaskrtavatko input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--zs-barva-pozadi-karta);
  border: 1.5px solid var(--zs-barva-ramecek-pole);
  border-radius: 4px; /* CHYBÍ token pro zaoblení 4 px */
  cursor: pointer;
}
.zs26 .zs-zaskrtavatko input[type="checkbox"]:checked {
  background: var(--zs-barva-akce-primarni);
  border-color: var(--zs-barva-akce-primarni);
}
.zs26 .zs-zaskrtavatko input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 6px;
  height: 11px;
  margin: 0 auto;
  border: solid var(--zs-barva-text-na-limetce);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* ---------------------------------------------------------------
   12. Hlavička. JEN PRO NÁHLED, na živém webu ji dodává šablona.
   --------------------------------------------------------------- */
.zs26 .zs-hlavicka { background: var(--zs-barva-pozadi-stranka); }

.zs26 .zs-hlavicka__promo {
  padding: var(--zs-odstup-sm) var(--zs-odstup-base);
  background: var(--zs-barva-akcent-zluta);
  color: var(--zs-barva-text-nadpis);
  text-align: center;
  font-size: 14.5px;
  line-height: 1.5;
}
.zs26 .zs-hlavicka__promo a { color: var(--zs-barva-text-nadpis); }

.zs26 .zs-hlavicka__lista { border-bottom: 1px solid var(--zs-barva-ramecek-karta); }

.zs26 .zs-hlavicka__obsah {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-base);
  min-height: 64px;
}

.zs26 .zs-hlavicka__logo {
  flex: 0 0 auto;
  width: 140px;
}
.zs26 .zs-hlavicka__logo .zs-obrazek--placeholder {
  aspect-ratio: auto;
  min-height: 42px;
  padding: var(--zs-odstup-sm);
  font-size: 12px;
}

.zs26 .zs-hlavicka__menu { display: none; }

.zs26 .zs-hlavicka__akce {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-base);
  margin-left: auto;
}

.zs26 .zs-hlavicka__telefon {
  display: inline-flex;
  align-items: center;
  gap: var(--zs-odstup-sm);
  color: var(--zs-barva-text-nadpis);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

/* Hamburger kreslený CSS, bez JS a bez fontu ikon. Menu se na mobilu neotvírá,
   je to jen značka pro první verzi. */
.zs26 .zs-hlavicka__hamburger {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: transparent;
  background-image: linear-gradient(var(--zs-barva-ikona-vychozi), var(--zs-barva-ikona-vychozi));
  background-size: 24px 2px;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  cursor: pointer;
}
.zs26 .zs-hlavicka__hamburger::before,
.zs26 .zs-hlavicka__hamburger::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--zs-barva-ikona-vychozi);
}
.zs26 .zs-hlavicka__hamburger::before { top: 14px; }
.zs26 .zs-hlavicka__hamburger::after { bottom: 14px; }

/* Na mobilu je v M1 v hlavičce jen ikona telefonu, bez čísla a bez tlačítka Objednat.
   Přesunuto z 32-homepage-b.css 21. 8. 2026 (agent integrace-qa): jsou to části
   komponenty Hlavička, ne modulu, patří sem. */
.zs26 .zs-hlavicka__telefon-text,
.zs26 .zs-hlavicka__objednat { display: none; }

@media (min-width: 700px) {
  .zs26 .zs-hlavicka__objednat { display: inline-flex; }
}

/* 25. 8. 2026: telefonni cislo a slovo "Muj ucet" az od 1366 px, pod tim samotne ikony.
   Zmereno: se sesti polozkami a s rozbalenim pretekala hlavicka na 1280 px o 80 px.
   Volba byla mezi tim nechat na 1280 px zmizet celou listu do hamburgeru, nebo zmensit
   pravy blok na ikony. Ikona telefonu je porad na jedno ukliknuti a cislo je v paticce
   i na /kontakt, kdezto schovana lista bere vstupy, ktere maji byt videt.
   Vedlejsi ucinek: mizi i pretekani na 1024 px, ktere tu bylo uz pred touhle zmenou. */
@media (min-width: 1366px) {
  .zs26 .zs-hlavicka__telefon-text { display: inline; }
  .zs26 .zs-hlavicka__ucet-text { display: inline; }
}
.zs26 .zs-hlavicka__ucet-text { display: none; }

/* 25. 8. 2026: hranice desktopove listy z 1024 na 1280 px.
   Duvod je mereni, ne vkus: uz pred touhle zmenou hlavicka pretekala svuj obsahovy sloupec,
   na 1024 px o 163 px (usekly telefon, tlacitko Objednat mimo obrazovku) a na 1280 px o 80 px
   (useknute Objednat). Sest polozek se sipkami a s Nutricnim poradenstvim se vejde az od 1280.
   Pod 1280 nese vsechno hamburger panel, ktery unese vic nez lista. */
@media (min-width: 1280px) {
  /* Hlavicka smi byt sirsi nez obsahovy sloupec stranky. Bez toho se sest polozek
     s pravym blokem (Muj ucet, telefon, Objednat) do 1180 px nevejde. */
  .zs26 .zs-hlavicka .zs-obsah { max-width: 1400px; }

  .zs26 .zs-hlavicka__obsah {
    gap: var(--zs-odstup-lg);
    min-height: 80px;
  }
  .zs26 .zs-hlavicka__logo { width: 150px; }
  .zs26 .zs-hlavicka__menu {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 14px;
    padding-left: var(--zs-odstup-sm);
  }
  .zs26 .zs-hlavicka__menu a {
    color: var(--zs-barva-text-zakladni);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }
  .zs26 .zs-hlavicka__menu a:hover { text-decoration: underline; }
  .zs26 .zs-hlavicka__akce { gap: var(--zs-odstup-base); }
  .zs26 .zs-hlavicka__hamburger { display: none; }
}

/* ---------------------------------------------------------------
   13. Patička. JEN PRO NÁHLED, na živém webu ji dodává šablona.
   --------------------------------------------------------------- */
.zs26 .zs-paticka {
  padding-block: var(--zs-odstup-2xl);
  background: var(--zs-barva-paticka-pozadi);
  color: var(--zs-barva-paticka-text);
}
@media (min-width: 700px) {
  .zs26 .zs-paticka {
    padding-top: var(--zs-odstup-sekce);
    padding-bottom: var(--zs-odstup-2xl);
  }
}

.zs26 .zs-paticka__sloupce {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-xl);
}
@media (min-width: 700px) {
  .zs26 .zs-paticka__sloupce { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .zs26 .zs-paticka__sloupce { grid-template-columns: repeat(4, 1fr); }
}

.zs26 .zs-paticka__nadpis {
  margin-bottom: var(--zs-odstup-md);
  color: var(--zs-barva-paticka-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
}
.zs26 .zs-paticka__sloupec ul {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
}
.zs26 .zs-paticka a {
  color: var(--zs-barva-paticka-text-tlumeny);
  font-size: 15.5px;
  line-height: 1.55;
  text-decoration: none;
}
.zs26 .zs-paticka a:hover {
  color: var(--zs-barva-paticka-text);
  text-decoration: underline;
}

.zs26 .zs-paticka__kontakt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-md);
}
.zs26 .zs-paticka__logo {
  display: inline-flex;
  padding: var(--zs-odstup-sm) var(--zs-odstup-md);
  background: var(--zs-barva-pozadi-stranka);
  border-radius: var(--zs-radius-male);
}
.zs26 .zs-paticka__logo img { width: 140px; }
.zs26 .zs-paticka__logo .zs-obrazek--placeholder {
  aspect-ratio: auto;
  min-height: 42px;
  padding: var(--zs-odstup-sm);
  font-size: 12px;
}
.zs26 .zs-paticka__telefon {
  color: var(--zs-barva-paticka-text);
  font-size: 16px;
  font-weight: 600;
}
.zs26 .zs-paticka__radek {
  color: var(--zs-barva-paticka-text-tlumeny);
  font-size: 15.5px;
  line-height: 1.55;
}

/* 26. 8. 2026: sber e-mailu presunut z homepage (modul 888) sem, tedy na kazdou stranku.
   Pas nad sloupci: vlevo nadpis a perex, vpravo formular, pod 1024 px pod sebou.
   Pole i zaskrtavatko jsou sdilene komponenty .zs-pole a .zs-zaskrtavatko, ty pocitaji
   se svetlym pozadim, takze se tady prepisuji jen barvy textu na patickove.
   Tlacitko je --primarni (limetka), ne --tmave: tmave zelena na tmave zelene nejde videt. */
.zs26 .zs-paticka__newsletter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-lg);
  margin-bottom: var(--zs-odstup-2xl);
  padding-bottom: var(--zs-odstup-2xl);
  border-bottom: 1px solid var(--zs-barva-ramecek-na-tmavem);
}
@media (min-width: 1024px) {
  .zs26 .zs-paticka__newsletter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--zs-odstup-2xl);
  }
}

.zs26 .zs-paticka__newsletter-nadpis {
  display: flex;
  /* start, ne center: na mobilu se nadpis lame na dva radky a ikona by plavala mezi nimi.
     margin-top ikony dorovnava rozdil mezi radkem (font x 1,4) a vyskou ikony 24 px. */
  align-items: start;
  gap: var(--zs-odstup-md);
  color: var(--zs-barva-paticka-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
@media (min-width: 700px) {
  .zs26 .zs-paticka__newsletter-nadpis { font-size: 22px; }
  .zs26 .zs-paticka__newsletter-ikona { margin-top: 3px; }
}
.zs26 .zs-paticka__newsletter-ikona { flex: 0 0 auto; margin-top: 2px; color: var(--zs-barva-ikona-na-tmavem); }

.zs26 .zs-paticka__newsletter-perex {
  max-width: 44ch;
  margin-top: var(--zs-odstup-sm);
  color: var(--zs-barva-paticka-text-tlumeny);
  font-size: 15.5px;
  line-height: 1.55;
}

/* Poradi prvku: mobil pole, souhlas, tlacitko. Od 700 px pole a tlacitko vedle sebe,
   souhlas pod nimi. Stejna logika, jakou mel modul 09, jen prepsana do patickovych trid. */
.zs26 .zs-paticka__newsletter-formular { max-width: 520px; }
.zs26 .zs-paticka__newsletter-pole { order: 1; }
.zs26 .zs-paticka__newsletter-souhlas {
  order: 2;
  flex: 1 1 100%;
  color: var(--zs-barva-paticka-text-tlumeny);
}
/* Trojnasobna trida schvalne: .zs26 .zs-paticka a nize v souboru vypina podtrzeni
   pri stejne specificite a odkaz na zasady by se v patickovem textu ztratil. */
.zs26 .zs-paticka .zs-paticka__newsletter-souhlas a {
  color: var(--zs-barva-paticka-text);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Trojnasobna trida schvalne: .zs26 .zs-pole-radek .zs-tlacitko ma flex: 0 0 auto
   a specificitu (0,3,0). Dvema tridami se prebit neda, poradi v souboru na to nestaci.
   Modul 09 tenhle problem nemel, obal .zs26.zs26-newsletter mu tretí tridu dal zadarmo. */
.zs26 .zs-paticka .zs-paticka__newsletter-odeslat { order: 3; flex: 1 1 100%; }
@media (min-width: 700px) {
  .zs26 .zs-paticka__newsletter-souhlas { order: 3; }
  .zs26 .zs-paticka .zs-paticka__newsletter-odeslat { order: 2; flex: 0 0 auto; }
}

/* 1. 9. 2026: tlačítko Odebírat je nově --sekundarni, tedy ne žluté
   (viz blok Hierarchie tlačítek níž v souboru). Vypadá ale jinak na mobilu
   a jinak na desktopu, a ten rozdíl je záměrný, ne nedodělek.

   Na mobilu OBRYS. Pod 700 px visí na obrazovce sticky lišta s limetkovým
   Vybrat program (skrývá se přesně na min-width: 700px, řádek u 1630).
   Bílá výplň přes celou šířku sloupce je proti tmavě zelené patičce opticky
   silnější než ta limetková pilulka nad ní, takže by sběr e-mailu přebíjel
   hlavní CTA. Marek 1. 9. 2026: "at to neprebiji hlavni cta".
   Je to tentýž tvar, jaký už má --sekundarni v .zs-sekce--tmava, tedy nic
   nového v systému, jen se to pravidlo dotahuje i do patičky.

   Na desktopu VÝPLŇ. Nad 700 px žádná sticky lišta není, tlačítko nesoutěží
   s ničím a stojí vedle bílého pole formuláře, kde by obrys působil jako
   neaktivní. Rámeček se dorovnává na barvu výplně, protože tmavě zelený
   rámeček varianty by na pozadí #1F3F2A splynul a pilulka by vypadala
   o 4 px menší než stejná tlačítka jinde.

   Tři třídy a !important schválně: sdílená varianta na řádku u 2860 má
   !important i (0,2,0), dvěma třídami se nepřebije.
   Vrácení: záloha novy-2026.css.pred-odebirat-mobil-2026-09-01. */
.zs26 .zs-paticka .zs-paticka__newsletter-odeslat {
  background: transparent !important;
  color: var(--zs-barva-text-na-tmavem) !important;
  border-color: var(--zs-barva-text-na-tmavem) !important;
}
.zs26 .zs-paticka .zs-paticka__newsletter-odeslat:hover {
  background: var(--zs-barva-text-na-tmavem) !important;
  color: var(--zs-barva-text-nadpis) !important;
}
@media (min-width: 700px) {
  .zs26 .zs-paticka .zs-paticka__newsletter-odeslat {
    background: var(--zs-barva-pozadi-karta) !important;
    color: var(--zs-barva-text-nadpis) !important;
    border-color: var(--zs-barva-pozadi-karta) !important;
  }
  .zs26 .zs-paticka .zs-paticka__newsletter-odeslat:hover {
    background: var(--zs-barva-akce-sekundarni-hover) !important;
    border-color: var(--zs-barva-akce-sekundarni-hover) !important;
  }
}

/* 25. 8. 2026: prepinac jazyku v paticce. Vracen misto lupy a vlajecek ze stare horni listy.
   Linku nad spodni casti nese ted tenhle blok; pravni radek za nim uz vlastni linku nema,
   jinak by byly dve pod sebou. Sourozenecky selektor to resi bez :has(). */
.zs26 .zs-paticka__jazyky {
  margin-top: var(--zs-odstup-2xl);
  padding-top: var(--zs-odstup-xl);
  border-top: 1px solid var(--zs-barva-ramecek-na-tmavem);
  color: var(--zs-barva-paticka-text-tlumeny);
  font-size: 14.5px;
  line-height: 1.5;
}

.zs26 .zs-paticka__jazyk-aktivni { color: var(--zs-barva-paticka-text); font-weight: 600; }

.zs26 .zs-paticka__pravni {
  margin-top: var(--zs-odstup-2xl);
  padding-top: var(--zs-odstup-xl);
  border-top: 1px solid var(--zs-barva-ramecek-na-tmavem);
  color: var(--zs-barva-paticka-text-tlumeny);
  font-size: 14.5px;
  line-height: 1.5;
}

.zs26 .zs-paticka__jazyky + .zs-paticka__pravni {
  margin-top: var(--zs-odstup-md);
  padding-top: 0;
  border-top: 0;
}

/* Vyhledavani v paticce. Zatim zakomentovane v modulu 11, protoze /vyhledavani vraci 500
   i na ostrem webu. Styly tu jsou pripravene, aby odkomentovani stacilo. */
.zs26 .zs-paticka__hledani { margin-top: var(--zs-odstup-lg); }
.zs26 .zs-paticka__hledani-popisek {
  display: block;
  margin-bottom: var(--zs-odstup-sm);
  color: var(--zs-barva-paticka-text-tlumeny);
  font-size: 14.5px;
}
.zs26 .zs-paticka__hledani-form { display: flex; gap: var(--zs-odstup-sm); max-width: 420px; }
.zs26 .zs-paticka__hledani-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  background: var(--zs-barva-paticka-pozadi);
  color: var(--zs-barva-paticka-text);
  border: 1px solid var(--zs-barva-ramecek-na-tmavem);
  border-radius: var(--zs-radius-male);
  font: inherit;
  font-size: 15.5px;
}
.zs26 .zs-paticka__hledani-form button {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: transparent;
  color: var(--zs-barva-paticka-text);
  border: 1px solid var(--zs-barva-ramecek-na-tmavem);
  border-radius: var(--zs-radius-male);
  font: inherit;
  font-size: 15.5px;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   14. Sticky lišta. Jen mobil, jen tam, kde je v M-exportu.
   --------------------------------------------------------------- */
.zs26 .zs-sticky-lista {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-md);
  min-height: 72px;
  padding: var(--zs-odstup-md) var(--zs-odstup-base);
  background: var(--zs-barva-pozadi-stranka);
  border-top: 1px solid var(--zs-barva-ramecek-karta);
}
.zs26 .zs-sticky-lista__cena {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
/* Cena je v M1 a M2 o stupeň menší než sdílená .zs-cena (20 px), jinak se
   „Celý den od 493 Kč“ a tlačítko na 390 px nevejdou vedle sebe a nápis
   na tlačítku se láme na dva řádky. Oprava 21. 8. 2026, agent integrace-qa. */
.zs26 .zs-sticky-lista__cena .zs-cena {
  font-size: 17.5px;
  line-height: 1.2;
}
.zs26 .zs-sticky-lista .zs-tlacitko {
  flex: 0 1 auto;
  padding: 0 var(--zs-odstup-base);
  white-space: nowrap;
}

/* Když je lišta samostatný modul (moduly/10-sticky-lista-mobil.html), lepí se obal
   modulu, ne .zs-sticky-lista. Uvnitř obalu, který je stejně vysoký jako lišta,
   nemá sticky kam ujet. Doplnil agent integrace-qa 21. 8. 2026, viz QA.md. */
.zs26.zs26-sticky-lista {
  position: sticky;
  bottom: 0;
  z-index: 20;
}

@media (min-width: 700px) {
  .zs26 .zs-sticky-lista { display: none; }
  .zs26.zs26-sticky-lista { display: none; }
}

/* ===== css-partials/31-homepage-a.css ===== */

/* 31-homepage-a.css
   Co to je: modulové styly navíc pro moduly homepage 01 až 05 (agent homepage-A).
   Sdílené třídy (.zs-sekce, .zs-obsah, .zs-mrizka, .zs-karta, .zs-krok, .zs-fakt,
   .zs-pas-fotek, .zs-pole, .zs-obrazek, tlačítka a typografie) tady NEJSOU,
   ty definuje agent css-zaklad v 10-zaklad.css a 20-komponenty.css.
   Zdroj: podklady/01-homepage-desktop.png a podklady/M1-homepage-mobil.png.
   Pravidla: každý selektor začíná .zs26, barvy a odstupy jen přes var(--zs-...),
   žádné stíny, breakpointy 700 px a 1024 px.
   Záměrně nehotové:
   - pár míst přepisuje sdílenou třídu uvnitř svého modulu. Vždycky je to
     scopnuté obalem (.zs26.zs26-kategorie .zs-h2 a podobně), aby to nemohlo
     přetéct do jiných modulů. Je to vypsané u každého takového pravidla.
   - mozaika v modulu 03 od 1024 px přepisuje flex a výšku sdílené
     .zs-pas-fotek__polozka. Je to jediné místo, kde tenhle partial sahá
     na sdílenou třídu neboxovaně, a je to schválně (mřížka 4 x 2 z PNG).
   - hover a focus stavy tlačítek a polí jsou v tokenech a v komponentách,
     tady se nedoplňují */

/* =========================================================
   01 hero
   ========================================================= */
.zs26 .zs-m-hero__mrizka { display: grid; gap: var(--zs-odstup-xl); align-items: start; }

.zs26 .zs-m-hero__nadtitulek { margin: 0 0 var(--zs-odstup-md); color: var(--zs-barva-text-odkaz); font-weight: 600; }
/* scopnuto obalem: rozestupy nadpisu a perexu jen uvnitř hera */
.zs26.zs26-hero .zs-m-hero__uvod .zs-h1 { margin: 0 0 var(--zs-odstup-base); }
.zs26.zs26-hero .zs-m-hero__uvod .zs-perex { margin: 0; }

.zs26 .zs-m-hero__foto { overflow: hidden; border-radius: var(--zs-radius-karta); background: var(--zs-barva-pozadi-jemne); aspect-ratio: 4 / 3; }
.zs26 .zs-m-hero__obrazek { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.zs26 .zs-m-hero__kotva { margin: 0 0 var(--zs-odstup-xs); }
.zs26 .zs-m-hero__kotva-popis { margin: 0 0 var(--zs-odstup-xl); }

.zs26 .zs-m-hero__akce { display: flex; flex-wrap: wrap; gap: var(--zs-odstup-md); margin: 0 0 var(--zs-odstup-lg); }

.zs26 .zs-m-hero__benefity { display: grid; gap: var(--zs-odstup-sm) var(--zs-odstup-lg); margin: 0 0 var(--zs-odstup-xl); padding: 0; list-style: none; }
.zs26 .zs-m-hero__benefit { display: flex; align-items: flex-start; gap: var(--zs-odstup-sm); }
.zs26 .zs-m-hero__check { flex: 0 0 auto; margin-top: var(--zs-odstup-xs); color: var(--zs-barva-ikona-check); }

.zs26 .zs-m-hero__psc { padding: var(--zs-odstup-lg); border-radius: var(--zs-radius-karta); background: var(--zs-barva-pozadi-sekce); }
.zs26 .zs-m-hero__psc-popis { display: block; margin: 0 0 var(--zs-odstup-md); color: var(--zs-barva-text-nadpis); font-weight: 600; }
.zs26 .zs-m-hero__psc-radek { display: flex; flex-wrap: wrap; gap: var(--zs-odstup-md); }
.zs26 .zs-m-hero__psc-pole { flex: 1 1 180px; min-width: 0; }
.zs26 .zs-m-hero__psc-tlacitko { flex: 0 0 auto; }

@media (min-width: 700px) {
  .zs26 .zs-m-hero__benefity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zs26 .zs-m-hero__foto { aspect-ratio: 16 / 10; }
}

@media (min-width: 1024px) {
  .zs26 .zs-m-hero__mrizka {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "uvod foto" "nabidka foto";
    column-gap: var(--zs-odstup-2xl);
    row-gap: var(--zs-odstup-xl);
  }
  .zs26 .zs-m-hero__uvod { grid-area: uvod; }
  .zs26 .zs-m-hero__nabidka { grid-area: nabidka; }
  /* fotka drží stejnou výšku jako textový sloupec, proto stretch a ne pevný poměr */
  .zs26 .zs-m-hero__foto { grid-area: foto; align-self: stretch; aspect-ratio: auto; min-height: 0; }
}

/* =========================================================
   02 kategorie
   ========================================================= */
/* scopnuto obalem: nadpis sekce nese odstup modulová třída perexu */
.zs26.zs26-kategorie .zs-h2 { margin: 0; }
.zs26 .zs-m-kategorie__perex { margin: var(--zs-odstup-sm) 0 var(--zs-odstup-2xl); }
.zs26 .zs-m-kategorie__mrizka { margin: 0 0 var(--zs-odstup-xl); }

.zs26 .zs-m-kategorie__doplnky { display: grid; gap: var(--zs-odstup-xl); align-items: stretch; }

/* karta Na míru: fotka a text vedle sebe, proto se ruší padding sdílené .zs-karta */
.zs26 .zs-m-kategorie__namiru { display: grid; padding: 0; overflow: hidden; }
.zs26 .zs-m-kategorie__namiru-foto { overflow: hidden; background: var(--zs-barva-pozadi-jemne); aspect-ratio: 16 / 9; }
.zs26 .zs-m-kategorie__namiru-obrazek { display: block; width: 100%; height: 100%; object-fit: cover; }
.zs26 .zs-m-kategorie__namiru-telo { display: flex; flex-direction: column; align-items: flex-start; padding: var(--zs-odstup-xl); }
/* štítek novinky: sdílená .zs-stitek--novinka je bledě limetková, v PNG 01 je žlutá pilulka.
   Tohle je jediný rozdíl, zbytek (velikost, verzálky) drží sdílená .zs-stitek. */
.zs26 .zs-m-kategorie__novinka { margin: 0 0 var(--zs-odstup-md); padding: var(--zs-odstup-xs) var(--zs-odstup-md); border-radius: var(--zs-radius-pill); border-color: var(--zs-barva-akcent-zluta); background: var(--zs-barva-akcent-zluta); color: var(--zs-barva-text-na-limetce); }
.zs26.zs26-kategorie .zs-m-kategorie__namiru-telo .zs-h3 { margin: 0 0 var(--zs-odstup-md); }
.zs26.zs26-kategorie .zs-m-kategorie__namiru-telo .zs-popisek { margin: 0; }
.zs26 .zs-m-kategorie__namiru-akce { margin: var(--zs-odstup-lg) 0 0; }

.zs26 .zs-m-kategorie__pomoc { display: flex; flex-direction: column; }
.zs26.zs26-kategorie .zs-m-kategorie__pomoc .zs-h3 { margin: 0 0 var(--zs-odstup-md); }
.zs26.zs26-kategorie .zs-m-kategorie__pomoc .zs-popisek { margin: 0; }
.zs26 .zs-m-kategorie__pomoc-akce { display: flex; flex-direction: column; align-items: flex-start; gap: var(--zs-odstup-md); }

.zs26 .zs-m-kategorie__zkouska { margin: var(--zs-odstup-xl) 0 0; }
.zs26 .zs-m-kategorie__sipka { flex: 0 0 auto; }

@media (min-width: 1024px) {
  .zs26 .zs-m-kategorie__doplnky { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .zs26 .zs-m-kategorie__namiru { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
  .zs26 .zs-m-kategorie__namiru-foto { aspect-ratio: auto; height: 100%; }
}

/* =========================================================
   03 z naší kuchyně
   ========================================================= */
/* scopnuto obalem: odstupy nadpisu a perexu řeší hlavička modulu */
.zs26.zs26-z-nasi-kuchyne .zs-h2 { margin: 0 0 var(--zs-odstup-sm); }
.zs26.zs26-z-nasi-kuchyne .zs-m-kuchyne__hlavicka-text .zs-perex { margin: 0; }
.zs26 .zs-m-kuchyne__hlavicka { display: grid; gap: var(--zs-odstup-md); margin: 0 0 var(--zs-odstup-xl); }
.zs26 .zs-m-kuchyne__hlavicka-odkaz { margin: 0; }
.zs26 .zs-m-kuchyne__sipka { flex: 0 0 auto; }

/* mobil: posuv i rozměr dlaždice dělá sdílená .zs-pas-fotek__polozka (300 x 200),
   tady jen podklad, ať placeholder nebo pomalu načtená fotka nesvítí bíle */
.zs26 .zs-m-kuchyne__dlazdice { background: var(--zs-barva-pozadi-jemne); }

.zs26 .zs-m-kuchyne__nadpis-jidelnicek { margin: var(--zs-odstup-2xl) 0 var(--zs-odstup-lg); }
.zs26 .zs-m-kuchyne__den-hlavicka { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--zs-odstup-sm); margin: 0 0 var(--zs-odstup-sm); }
.zs26 .zs-m-kuchyne__chody { margin: 0; padding: 0; list-style: none; }
.zs26 .zs-m-kuchyne__chod { display: grid; gap: var(--zs-odstup-xs); padding: var(--zs-odstup-md) 0; border-top: 1px solid var(--zs-barva-ramecek-karta); }
/* Popisek chodu je v PNG 01 prostý zelený nadpis pod linkou, ne štítek v krabičce.
   Sdílená .zs-stitek dává rámeček, plochu a min-height, a protože je .zs-m-kuchyne__chod
   mřížka, roztáhne se štítek na celou šířku sloupce. Krabička se tady sundává,
   typografie (12 px, 600, verzálky, prostrkání) zůstává ze .zs-stitek.
   Oprava 21. 8. 2026, agent integrace-qa, viz QA.md. */
.zs26 .zs-m-kuchyne__chod-typ {
  justify-self: start;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--zs-barva-text-odkaz);
}

@media (min-width: 1024px) {
  /* od 1024 px se z pásu stává mozaika: 4 sloupce, velká fotka vlevo přes 2 x 2.
     Přepisuje flex a pevnou výšku ze sdílené .zs-pas-fotek__polozka, proto height auto. */
  .zs26 .zs-m-kuchyne__mozaika { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--zs-odstup-base); overflow: visible; }
  .zs26 .zs-m-kuchyne__dlazdice { flex: none; height: auto; aspect-ratio: 3 / 2; }
  .zs26 .zs-m-kuchyne__dlazdice--velka { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .zs26 .zs-m-kuchyne__hlavicka { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--zs-odstup-xl); }
  .zs26 .zs-m-kuchyne__hlavicka-odkaz { justify-self: end; }
}

/* =========================================================
   04 jak to funguje
   ========================================================= */
.zs26.zs26-jak-to-funguje .zs-h2 { margin: 0; }
/* 30. 8. 2026: odsazení nadpisu musí být scopnuté stejně jako pravidlo nad ním.
   .zs26.zs26-jak-to-funguje .zs-h2 (0,3,1) přebíjí .zs26 .zs-m-postup__nadpis (0,2,0)
   bez ohledu na pořadí, takže marginBottom vycházel 0 a descender "j" ve slově
   "funguje" seděl na horní hraně fotky. Nahlásil Marek 30. 8. 2026.
   Nescopnuté pravidlo pod tím zůstává, drží stejný odstup na /program-na-miru. */
.zs26.zs26-jak-to-funguje .zs-m-postup__nadpis { margin: 0 0 var(--zs-odstup-2xl); }
.zs26 .zs-m-postup__nadpis { margin: 0 0 var(--zs-odstup-2xl); }
.zs26 .zs-m-postup__kroky { margin: 0; padding: 0; list-style: none; }
/* .zs-krok si rozestupy dělá sám přes gap ve 20-komponenty.css, tady se nic nepřidává */

/* =========================================================
   05 důkazy
   ========================================================= */
.zs26 .zs-m-dukazy__fakta { margin: 0; padding: 0; list-style: none; }
/* zarovnání na střed i světlé barvy na tmavém pruhu řeší .zs-fakt a .zs-sekce--tmava
   ve 20-komponenty.css, tady se nic nepřidává */

.zs26 .zs-m-dukazy__nadpis { margin: 0 0 var(--zs-odstup-lg); }
.zs26 .zs-m-dukazy__loga { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zs-odstup-base); margin: 0 0 var(--zs-odstup-xl); padding: 0; list-style: none; }
.zs26 .zs-m-dukazy__logo { display: flex; align-items: center; justify-content: center; min-height: var(--zs-vyska-tlacitko); padding: var(--zs-odstup-base); border-radius: var(--zs-radius-male); background: var(--zs-barva-pozadi-sekce); color: var(--zs-barva-text-tlumeny); text-align: center; }
.zs26 .zs-m-dukazy__pata { display: grid; gap: var(--zs-odstup-md); align-items: center; }
.zs26 .zs-m-dukazy__doveta { margin: 0; }
.zs26 .zs-m-dukazy__sipka { flex: 0 0 auto; }

@media (max-width: 699px) {
  /* v M1 jsou fakta ve mřížce 2 x 2, sdílená .zs-mrizka--4 dělá na mobilu 1 sloupec */
  .zs26.zs26-dukazy .zs-m-dukazy__fakta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
  .zs26 .zs-m-dukazy__loga { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .zs26 .zs-m-dukazy__pata { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--zs-odstup-xl); }
}

/* ===== css-partials/32-homepage-b.css ===== */

/* 32-homepage-b.css
   Co to je: modulové styly pro spodní polovinu homepage (moduly 06 až 09)
   a drobnosti pro náhledovou hlavičku a patičku. Agent homepage-B.

   Zdroj: podklady/01-homepage-desktop.png (desktop 1440, export 859 x 4096),
   podklady/M1-homepage-mobil.png (mobil 390), kontrakt podklady/KONTRAKT.md.

   Sdílené komponenty (.zs-sekce, .zs-obsah, .zs-obsah--uzky, .zs-mrizka, .zs-karta,
   .zs-karta__foto, .zs-karta__telo, .zs-reference a její vnitřek, .zs-faq, .zs-pole,
   .zs-pole-radek, .zs-zaskrtavatko, .zs-obrazek--placeholder, .zs-skryte, .zs-hlavicka,
   .zs-paticka, .zs-tlacitko, typografie) definuje agent css-zaklad
   v 10-zaklad.css a 20-komponenty.css. Tady je jen to, co tam není.
   Modulové věci navíc jsou .zs-m-<nazev>__<cast>.

   Co je záměrně nehotové:
   - Hlavička a patička jsou JEN PRO NÁHLED. Na ostrém webu je dodává šablona
     template_general, tyhle bloky se do produkce nepřenášejí. Proto jsou tady
     jen dvě drobnosti navíc k 20-komponenty.css: logo jako obrázek místo
     placeholderu, a schování čísla a tlačítka Objednat na mobilu podle M1.
   - Dvě jména v cizí jmenné oblasti (.zs-hlavicka__telefon-text
     a .zs-hlavicka__objednat) byla 21. 8. 2026 přesunuta do 20-komponenty.css,
     jsou to části komponenty Hlavička, ne modulu. Přesun udělal agent integrace-qa.
   - Selektory přepsané z .zs26-<modul> na .zs26.zs26-<modul>, aby každý selektor
     začínal třídou .zs26 podle kontraktu (agent integrace-qa, 21. 8. 2026).
   - Přepis .zs-mrizka--4 u šéfkuchařů: M1 je má na mobilu ve dvou sloupcích,
     sdílená mřížka dává na mobilu jeden. Kdyby se to mělo sjednotit, patří to
     do 10-zaklad.css, ne sem.

   Bez stínů, jen var(--zs-...), žádné hex barvy, každý selektor začíná .zs26. */


/* ============================================================
   06 Kdo za vaším jídlem stojí
   ============================================================ */

/* Vlevo karta poradkyně, vpravo karta „Nutriční poradenství máte v ceně“.
   V PNG je levý sloupec zhruba třetina, pravý zbytek. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__mrizka {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-xl);
  align-items: stretch;
  margin-top: var(--zs-odstup-2xl);
}

/* Foto je v PNG na kraj karty, proto padding pryč a vlastní odsazení v těle. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__karta,
.zs26.zs26-kdo-za-jidlem-stoji .zs-m-kuchari__karta {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__portret {
  border-radius: 0;
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__telo {
  padding: var(--zs-odstup-lg);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__role {
  margin-top: calc(-1 * var(--zs-odstup-xs));
}

/* Pravá karta */
.zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__nabidka {
  gap: var(--zs-odstup-base);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__seznam {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__polozka {
  display: flex;
  align-items: flex-start;
  gap: var(--zs-odstup-md);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__ikona {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--zs-barva-ikona-check);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zs-odstup-base) var(--zs-odstup-xl);
  margin-top: var(--zs-odstup-sm);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__kontakt {
  display: inline-flex;
  align-items: center;
  gap: var(--zs-odstup-sm);
  color: var(--zs-barva-text-odkaz);
  font-weight: 600;
  text-decoration: none;
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__kontakt:hover {
  text-decoration: underline;
}

/* Pás šéfkuchařů */
.zs26.zs26-kdo-za-jidlem-stoji .zs-m-kuchari {
  margin-top: var(--zs-odstup-2xl);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-m-kuchari__perex {
  margin: var(--zs-odstup-xs) 0 var(--zs-odstup-lg);
}

/* M1 má šéfkuchaře na mobilu ve dvou sloupcích, ne v jednom. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-m-kuchari .zs-mrizka--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-m-kuchari__karta .zs-karta__foto {
  border-radius: 0;
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-m-kuchari__telo {
  padding: var(--zs-odstup-base);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-m-kuchari__citace {
  margin-top: var(--zs-odstup-xs);
  font-style: italic;
}


/* ============================================================
   07 Reference
   ============================================================ */

.zs26.zs26-reference .zs-m-reference__mrizka {
  margin-top: var(--zs-odstup-2xl);
}

/* Pas tvari pod kartami. Vlasova linka misto stinu, oddeluje tri velke karty
   od desiti tvari, aniz by pridala plochu navic (Marek: zadne stinovani). */
.zs26.zs26-reference .zs-tvare {
  margin-top: var(--zs-odstup-2xl);
  padding-top: var(--zs-odstup-2xl);
  border-top: 1px solid var(--zs-barva-ramecek-karta);
}

.zs26.zs26-reference .zs-m-reference__odkaz {
  display: inline-flex;
  align-items: center;
  gap: var(--zs-odstup-sm);
  margin-top: var(--zs-odstup-xl);
  color: var(--zs-barva-text-odkaz);
  font-weight: 600;
  text-decoration: none;
}

.zs26.zs26-reference .zs-m-reference__odkaz:hover {
  text-decoration: underline;
}


/* ============================================================
   08 Časté dotazy
   ============================================================ */

/* Užší sloupec řeší sdílená .zs-obsah--uzky (920 px), tady jen odstup. */
.zs26.zs26-faq .zs-m-faq__seznam {
  margin-top: var(--zs-odstup-xl);
}


/* ============================================================
   09 Newsletter
   ============================================================ */

.zs26.zs26-newsletter .zs-m-newsletter__box {
  padding: var(--zs-odstup-2xl) var(--zs-odstup-lg);
  background: var(--zs-barva-pozadi-sekce);
  border-radius: var(--zs-radius-velke);
  text-align: center;
}

/* Ikona obálky je v PNG 01 na střed nad nadpisem. Reset v 10-zaklad.css dává
   každému svg display: block, takže samotný text-align: center na boxu nestačí
   a ikona stála u levého kraje. Oprava 21. 8. 2026, agent integrace-qa, viz QA.md. */
.zs26.zs26-newsletter .zs-m-newsletter__ikona {
  margin-inline: auto;
  color: var(--zs-barva-text-nadpis);
}

.zs26.zs26-newsletter .zs-m-newsletter__perex {
  max-width: 560px;
  margin: var(--zs-odstup-sm) auto 0;
}

/* Formulář je sdílený .zs-pole-radek, tady jen šířka, střed a pořadí prvků.
   M1: pole, zaškrtávátko, tlačítko na celou šířku.
   Desktop: pole a tlačítko vedle sebe, zaškrtávátko pod nimi. */
.zs26.zs26-newsletter .zs-m-newsletter__formular {
  max-width: 560px;
  margin: var(--zs-odstup-lg) auto 0;
  align-items: center;
  justify-content: center;
  text-align: left;
}

.zs26.zs26-newsletter .zs-m-newsletter__pole {
  order: 1;
}

.zs26.zs26-newsletter .zs-m-newsletter__souhlas {
  order: 2;
  flex: 1 1 100%;
}

.zs26.zs26-newsletter .zs-m-newsletter__odeslat {
  order: 3;
  flex: 1 1 100%;
}


/* ============================================================
   Hlavička, JEN PRO NÁHLED
   ============================================================ */

/* V komponentách je v logu placeholder, tady je skutečné logo z dnešního webu. */
.zs26.zs26-hlavicka a.zs-hlavicka__logo {
  display: block;
}

.zs26.zs26-hlavicka .zs-hlavicka__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Schování čísla a tlačítka Objednat na mobilu (M1) je od 21. 8. 2026
   v 20-komponenty.css, jsou to části komponenty Hlavička, ne modulu.
   Přesunul agent integrace-qa, viz QA.md. */


/* ============================================================
   Patička, JEN PRO NÁHLED
   ============================================================ */

/* V komponentách je v logu placeholder, tady je skutečné logo z dnešního webu. */
.zs26.zs26-paticka .zs-paticka__logo img {
  display: block;
  height: auto;
}


/* ============================================================
   Breakpoint 700 px
   ============================================================ */

@media (min-width: 700px) {

  .zs26.zs26-newsletter .zs-m-newsletter__box {
    padding: var(--zs-odstup-2xl);
  }

  .zs26.zs26-newsletter .zs-m-newsletter__souhlas {
    order: 3;
  }

  .zs26.zs26-newsletter .zs-m-newsletter__odeslat {
    order: 2;
    flex: 0 0 auto;
  }
}


/* ============================================================
   Breakpoint 1024 px
   ============================================================ */

@media (min-width: 1024px) {

  .zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__mrizka {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  }

  .zs26.zs26-kdo-za-jidlem-stoji .zs-m-poradna__telo {
    padding: var(--zs-odstup-xl);
  }

  .zs26.zs26-kdo-za-jidlem-stoji .zs-m-kuchari {
    margin-top: var(--zs-odstup-sekce);
  }

  .zs26.zs26-kdo-za-jidlem-stoji .zs-m-kuchari .zs-mrizka--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===== css-partials/40-rozcestnik.css ===== */

/* 40-rozcestnik.css
   Co to je: styly navíc pro čtyři stránky rozcestníků (Hubnu, Sportuji, Nestíhám vařit,
   Jím podle svých potřeb). Jen to, co je specifické pro tuhle šablonu stránky.
   Sdílené komponenty se tady NEDEFINUJÍ, dodává je agent CSS v 10-zaklad.css
   a 20-komponenty.css. Tenhle partial je jen staví na sebe a upravuje rozměry
   tam, kde se rozcestník liší od výchozí komponenty:
   .zs-karta--program (ikona místo fotky, cena nad tlačítky), .zs-pas-fotek
   (na desktopu mozaika, ne stejně široký pás), .zs-pas-cta (větší mezera mezi odkazy).
   Zdroj: podklady/02-hubnu-desktop.png, 03-sportuji-desktop.png,
   04-nestiham-varit-desktop.png, 05-upravena-vyziva-desktop.png (desktop 1440),
   podklady/M2 až M5 (mobil 390). Rozměry odměřené z PNG 02:
   obsah 1180 px, hero pruh 118 až 511 px, karty programů výška 160 px a mezera 16 px,
   sloupec s ikonou 176 px, ikona 72 px, text karty začíná na x 350 px,
   mozaika fotek 4 sloupce s mezerou 24 px, velká fotka přes 2 sloupce a 2 řádky,
   pás CTA výška 127 px, FAQ sloupec 920 px na střed (řeší .zs-obsah--uzky).
   Co je záměrně nehotové:
   - ikony programů: v balíku nejsou SVG, uvnitř .zs-karta__ikona je popsaný placeholder
     .zs-m-rozcestnik__ikona (stejný princip, jaký má v PNG 05 program Bez mléka:
     "dokreslit ikonku")
   - agent CSS má v .zs-karta--program připravenou .zs-karta__foto 180 x 120 px,
     rozcestník ji nepoužívá, v PNG je na tom místě ikona
   - mobilní karta programu je v M-exportech zjednodušená na jeden odkaz se šipkou,
     tady zůstává skladba se dvěma tlačítky, jen pod sebou
   - odstupy sekcí řeší .zs-sekce, tenhle partial do nich nesahá */

/* ---------------------------------------------------------------
   1. Hero podstránky. Vlevo text, vpravo fotka, na mobilu bez fotky.
   --------------------------------------------------------------- */
.zs26 .zs-m-rozcestnik__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zs-odstup-xl);
  align-items: stretch;
}

/* justify-content: center bez media query. Merene 31. 8. 2026 na 1440 px:
   mrizka ma align-items: stretch, takze se textovy sloupec natahne na vysku
   fotky (300 px), ale obsah v nem zustaval nahore. Stred textu byl na
   /programy-a-priprava o 57 px nad stredem fotky, na /sportuji o 36 a na
   /hubnu a /jim-podle-svych-potreb o 26. Pod 1024 px je mrizka jednosloupcova
   a vyska sloupce se rovna vysce obsahu, tam je pravidlo no-op. Proto se
   nezaklada novy breakpoint, kontrakt pousti jen 700 a 1024. */
.zs26 .zs-m-rozcestnik__hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--zs-odstup-lg);
}

.zs26 .zs-m-rozcestnik__hero-text > * { margin: 0; }

.zs26 .zs-m-rozcestnik__drobecky {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}

.zs26 .zs-m-rozcestnik__drobecky a {
  color: inherit;
  text-decoration: none;
}

.zs26 .zs-m-rozcestnik__drobecky a:hover { text-decoration: underline; }

.zs26 .zs-m-rozcestnik__hero-text .zs-perex { max-width: 46ch; }

.zs26 .zs-m-rozcestnik__akce {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  gap: var(--zs-odstup-base);
}

.zs26 .zs-m-rozcestnik__vyhody {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zs26 .zs-m-rozcestnik__vyhoda {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-sm);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}

.zs26 .zs-m-rozcestnik__vyhoda-ikona {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  color: var(--zs-barva-ikona-check);
}

.zs26 .zs-m-rozcestnik__vyhoda-ikona--hvezda { color: var(--zs-barva-akcent-zluta); }

/* fotka hera: v PNG vyplní celou výšku pruhu, proto ne aspect-ratio, ale stretch */
.zs26 .zs-m-rozcestnik__hero-foto {
  display: none;
  aspect-ratio: auto;
  align-self: stretch;
  height: 100%;
  min-height: 240px;
  border-radius: var(--zs-radius-velke);
}

/* ---------------------------------------------------------------
   2. Seznam programů. Řádkové karty pod sebou, mezera 16 px.
   --------------------------------------------------------------- */
.zs26 .zs-m-rozcestnik__programy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--zs-odstup-base);
  margin: var(--zs-odstup-2xl) 0 0;
  padding: 0;
  list-style: none;
}

.zs26 .zs-m-rozcestnik__programy > li { display: flex; }

.zs26 .zs-m-rozcestnik__programy .zs-karta--program { width: 100%; }

/* ikona programu: na rozcestníku větší než výchozích 48 px */
.zs26 .zs-m-rozcestnik__programy .zs-karta__ikona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

.zs26 .zs-m-rozcestnik__ikona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--zs-odstup-xs);
  border-radius: var(--zs-radius-male);
  background: var(--zs-barva-pozadi-jemne);
  border: 1px dashed var(--zs-barva-ramecek-karta);
  color: var(--zs-barva-text-popisek);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}

.zs26 .zs-m-rozcestnik__meta {
  font-size: 13.5px;
  color: var(--zs-barva-text-popisek);
}

/* pata karty: cena nad tlačítky, ne vedle nich */
.zs26 .zs-m-rozcestnik__programy .zs-karta__pata {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-md);
}

.zs26 .zs-m-rozcestnik__programy .zs-karta__pata .zs-cena { white-space: nowrap; }

.zs26 .zs-m-rozcestnik__program-akce {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--zs-odstup-md);
  width: 100%;
}

/* ---------------------------------------------------------------
   3. Hlavička sekce s odkazem vpravo (Z naší kuchyně) a šipkové odkazy.
   --------------------------------------------------------------- */
.zs26 .zs-m-rozcestnik__hlava {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--zs-odstup-base) var(--zs-odstup-2xl);
  margin-bottom: var(--zs-odstup-xl);
}

.zs26 .zs-m-rozcestnik__hlava-text {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
  max-width: 64ch;
}

.zs26 .zs-m-rozcestnik__hlava-text > * { margin: 0; }

.zs26 .zs-m-rozcestnik__odkaz {
  display: inline-flex;
  align-items: center;
  gap: var(--zs-odstup-md);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--zs-barva-text-nadpis);
  text-decoration: none;
  white-space: nowrap;
}

.zs26 .zs-m-rozcestnik__odkaz:hover { text-decoration: underline; }

.zs26 .zs-m-rozcestnik__odkaz:focus-visible {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}

/* šipka za odkazem a v chipu, čistě dekorace */
.zs26 .zs-m-rozcestnik__sipka {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}

/* odkaz pod pásem fotek: na mobilu se ukazuje, na desktopu je v hlavičce sekce */
.zs26 .zs-m-rozcestnik__mozaika-pata { margin: var(--zs-odstup-lg) 0 0; }

/* ---------------------------------------------------------------
   4. Pás CTA "Nevíte, který z nich?". Odkazy mají v PNG větší mezeru.
   --------------------------------------------------------------- */
.zs26 .zs-m-rozcestnik__pas .zs-pas-cta__akce { gap: var(--zs-odstup-2xl); }

/* ---------------------------------------------------------------
   5. FAQ. Šířku sloupce řeší .zs-obsah--uzky, tady jen odstup pod nadpisem.
   --------------------------------------------------------------- */
.zs26 .zs-m-rozcestnik__faq .zs-h2 { margin: 0 0 var(--zs-odstup-base); }

/* ---------------------------------------------------------------
   6. Další cesty. Pilulky se světle zeleným pozadím.
   --------------------------------------------------------------- */
.zs26 .zs-m-rozcestnik__cesty-nadpis { margin: 0 0 var(--zs-odstup-base); }

.zs26 .zs-m-rozcestnik__cesty {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-base);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zs26 .zs-m-rozcestnik__cesta {
  display: inline-flex;
  align-items: center;
  gap: var(--zs-odstup-md);
  min-height: 40px;
  padding: 0 var(--zs-odstup-lg);
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-pozadi-sekce);
  color: var(--zs-barva-text-nadpis);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.zs26 .zs-m-rozcestnik__cesta:hover { background: var(--zs-barva-akcent-limetka-plo); }

.zs26 .zs-m-rozcestnik__cesta:focus-visible {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   7. Od 700 px. Hero dostane fotku, tlačítka vedle sebe,
      výhody na jeden řádek, karta programu má cenu vpravo.
   --------------------------------------------------------------- */
@media (min-width: 700px) {
  .zs26 .zs-m-rozcestnik__akce {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-self: flex-start;
  }

  .zs26 .zs-m-rozcestnik__vyhody {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--zs-odstup-xl);
  }

  .zs26 .zs-m-rozcestnik__hero-foto { display: flex; }

  .zs26 .zs-m-rozcestnik__programy .zs-karta__ikona {
    width: 176px;
    height: 72px;
  }

  .zs26 .zs-m-rozcestnik__ikona {
    width: 72px;
    height: 72px;
  }

  .zs26 .zs-m-rozcestnik__programy .zs-karta__pata { align-items: flex-end; }

  .zs26 .zs-m-rozcestnik__program-akce {
    flex-direction: row;
    justify-content: flex-end;
    width: auto;
  }
}

/* ---------------------------------------------------------------
   8. Od 1024 px. Hero do dvou sloupců, pás fotek se mění na mozaiku
      (jedna velká fotka vlevo, čtyři menší vpravo, viz PNG 02 až 05).
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .zs26 .zs-m-rozcestnik__hero {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--zs-odstup-2xl);
  }

  .zs26 .zs-m-rozcestnik__mozaika {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--zs-odstup-xl);
    overflow: visible;
  }

  .zs26 .zs-m-rozcestnik__mozaika .zs-pas-fotek__polozka {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .zs26 .zs-m-rozcestnik__mozaika .zs-m-rozcestnik__foto--velka {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }

  /* na desktopu je odkaz v hlavičce sekce, pod pásem se neopakuje */
  .zs26 .zs-m-rozcestnik__mozaika-pata { display: none; }
}

/* ---------------------------------------------------------------
   9. Pod 1024 px je odkaz jen pod pásem fotek, ne v hlavičce sekce (M2 až M5).
   --------------------------------------------------------------- */
@media (max-width: 1023px) {
  .zs26 .zs-m-rozcestnik__hlava > .zs-m-rozcestnik__odkaz { display: none; }
}

/* ---------------------------------------------------------------
   KONTRAKT DNA OBRAZOVKY, 2026-08-29.
   Na dne smi byt nejvys jedna lista. Kdo slot zabira, hlasi svou vysku
   do --zs-spodek-lista a body si o ni rezervuje misto.

   Proc fixed a ne sticky: sablona ma na .obsah_okolo overflow: hidden,
   coz position: sticky uvnitr rozbiji (lista zustala na konci stranky).
   Zmereno 24. 8. 2026. Moduly ZS26 maji style System-none, tedy bez obalu .pas.

   Proc !important na padding-bottom: template2024.js:920 pise na body inline
   padding o vysce #respofix. Autorsky !important je v kaskade NAD inline normal,
   takze vyhrava nas. Az #respofix zmizi, zacne ten skript psat 0px a bez
   !important by rezervaci sezral. Komentar v css-obsah/70-clanky.css tvrdil
   opak, byl vecne obraceny a je opraveny.

   env(safe-area-inset-bottom) je dnes vzdy 0, protoze meta viewport nema
   viewport-fit=cover a layout viewport uz home indicator vyloucil. Ve vzorci
   je jako pojistka, kdyby ho nekdo casem pridal. Stoji nula.
   --------------------------------------------------------------- */
:root {
  --zs-spodek-lista: 0px;
  --zs-spodek-safe: env(safe-area-inset-bottom, 0px);
  --zs-spodek: calc(var(--zs-spodek-lista) + var(--zs-spodek-safe));
  /* Jedna stupnice vrstev misto tri. Sablona ma .nahoru na 100, na to nesahame. */
  --zs-z-nastroj: 40;   /* nastrojove listy behu aplikace: filtr ceniku, prepinac jidelnicku */
  --zs-z-lista: 60;     /* konverzni lista ZS26 */
  --zs-z-panel: 70;     /* rozbaleny panel hamburgeru */
  --zs-z-clona: 80;
  --zs-z-dialog: 81;
  --zs-z-cookie: 90;    /* nad vsim nasim, pod .nahoru sablony */
}

/* Vysky jsou fallback pro pripad, ze js/zs26-spodek.js nebezi. Kdyz bezi,
   premeri je za behu a --zs-spodek-lista prepise skutecnou hodnotou.

   Hranice se lisi podle lisy a jsou ZMERENE, ne odhadnute (29. 8. 2026):
     .zs26-sticky-lista, .zs26-obj-akce, .zs-jv-lista   videt do 700 px
     .zs26-pv-lista (filtr ceniku)                      videt az do 1023 px
   Prvni verze mela vsechny na 700 a v pasmu 768 az 1023 px zustal spodek
   paticky ceniku zakryty o 73 px. Nasla to sirkova matice, ne oko.

   Hranice 700, ne 699: balik 26 ma .zs26-obj-akce na `max-width: 700px`,
   takze na presne 700 px by pri 699 vznikla dira bez rezervace. */
@media (max-width: 700px) {
  html:has(.zs26.zs26-sticky-lista) { --zs-spodek-lista: 72px; }
  html:has(.zs-jv-lista)            { --zs-spodek-lista: 93px; }
  html:has(.zs26-obj-akce)          { --zs-spodek-lista: 89px; }

  .zs26.zs26-sticky-lista {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--zs-z-lista);
    padding-bottom: var(--zs-spodek-safe);
  }
}
@media (max-width: 1023px) {
  html:has(.zs26-pv-lista) { --zs-spodek-lista: 95px; }
}
/* Uzsi pravidlo az za sirsim, aby na mobilu vyhrala hodnota pro mobil:
   na 390 px meri lista ceniku 95 px, na 768 az 1023 px jen 73 px. */
@media (max-width: 700px) {
  html:has(.zs26-pv-lista) { --zs-spodek-lista: 95px; }
}

/* Rezervace mista. POZOR na guard :has(...): bez nej by pravidlo platilo
   i tam, kde zadna nase lista neni, vynutilo by padding-bottom: 0 !important
   a prebilo rezervaci, kterou si dela nekdo jiny. Presne to se 29. 8. stalo
   na /objednavka, kde balik 26 rezervuje misto pro .zs26-obj-akce (89 px):
   spodek paticky zustal zakryty. Chytila to sonda qa/spodek.js.
   Stare pravidlo tuhle vadu nemelo, protoze bylo scopovane na jednu listu.

   Bez media query zamerne: kdyz zadna lista neni videt, --zs-spodek-lista
   je 0 a pravidlo je neutralni. Na desktopu i v pasmu 700 az 899 px tak
   nevznika dalsi hranice, kterou by bylo potreba hlidat. */
body:has(.zs26-hlavicka):has(.zs26-sticky-lista, .zs26-pv-lista, .zs-jv-lista, .zs26-obj-akce) {
  padding-bottom: var(--zs-spodek) !important;
}

/* 2026-08-29: #respofix je legacy fixni lista sablony (template2024.css:1591),
   ktera se zobrazuje pod 900 px (trida body_v3 z template2024.js:783).
   Skin ji do 29. 8. nevypinal, takze na 59 strankach kreslila sest odkazu
   pres novy design a jinde 17 px prazdneho mista. Zmereno na 390 px 29. 8.

   Vsech sest cilu je dosazitelnych z hlavicky ZS26 nebo z paticky, overeno
   sondou qa/respofix-cile.js (poradenstvi jen pod novejsi adresou
   /nutricni-poradenstvi-2026, ne pod legacy /component/content/article/...).

   POZOR, dve pojistky, obe nutne: na teze pozici respofix renderuje modul 762
   KosikObjednavky s tlacitkem #button_odeslatMobil OBJEDNAT PROGRAM.
   Plosne display:none by vyplo odeslani objednavky na mobilu.
   :not(.foxplus) chrani objednavku dnes, :not(:has(.prehledObjednavky))
   i tehdy, kdyby nekdo foxplus z body sundal. */
body:has(.zs26-hlavicka):not(.foxplus) #respofix:not(:has(.prehledObjednavky)) {
  display: none !important;
}

/* 2026-08-24, nasazeni na webvyvoj2: hlavicka a paticka z Figmy jako moduly 00 a 11.
   Kde jsou v DOM, schova se hlavicka a paticka sablony (a jeji pas newsletteru).
   Nezverejneni modulu vrati sablonu. */
body:has(.zs26-hlavicka) #template_header,
body:has(.zs26-hlavicka) #megamenu,
body:has(.zs26-hlavicka) #mobilemenu,
body:has(.zs26-hlavicka) #mobilesubmenu { display: none !important; }
body:has(.zs26-paticka) #pata,
body:has(.zs26-paticka) .pas_acy { display: none !important; }
body:has(.zs26-hlavicka) .obsah_okolo { padding-top: 0 !important; margin-top: 0 !important; }

/* =====================================================================
   Menu hlavicky ZS26, druha verze, 25. 8. 2026.
   Ctyri polozky maji rozbaleni, jedna z nich dva sloupce. Na desktopu otevira
   najeti mysi i fokus z klavesnice, sipka je druha cesta pro dotek. Pod 1280 px
   je z listy panel pod hlavickou a rozbaleni se chova jako akordeon.
   Zadny stin, zadna animace, zadna knihovna, viz pravidla souboru nahore.
   ===================================================================== */

.zs26 .zs-menu__polozka { position: relative; display: flex; align-items: center; }

.zs26 .zs-menu__prepinac {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--zs-barva-text-tlumeny);
}
.zs26 .zs-menu__prepinac::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.zs26 .zs-menu__polozka--otevrena > .zs-menu__prepinac::before { transform: translateY(1px) rotate(-135deg); }

.zs26 .zs-menu__panel { display: none; }
.zs26 .zs-menu__sloupec { display: flex; flex-direction: column; }
.zs26 .zs-menu__nadpis {
  margin: 0 0 var(--zs-odstup-sm);
  color: var(--zs-barva-text-popisek);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.zs26 .zs-menu__zvyrazneny { font-weight: 600; }

/* Patka panelu Programy. Nastroje, ne produkty, a tak se od nich musi lisit na prvni
   pohled: vlastni pozadi pres celou sirku panelu a linka nad. Zaporne okraje odpovidaji
   odsazeni panelu, aby pas doahl az k jeho hrane. Zadny stin, viz pravidla souboru. */
.zs26 .zs-menu__patka { display: flex; }
/* Sipka za textem tipu, ne krouzek pred nim. Prvni verze mela prazdny krouzek a na snimku
   vypadal jako nezaskrtnuty prepinac, tedy jako ovladaci prvek, ktery se da prepnout.
   Od 30. 8. vecer je pred textem otaznik, protoze Marek: "at je jasnejsi, ze je to pomoc". */
.zs26 .zs-menu__tip::after { content: "\00a0\2192"; }
.zs26 .zs-menu__tip { display: flex; align-items: center; font-weight: 600; }
.zs26 .zs-menu__otaznik { flex: 0 0 auto; margin-right: 8px; }

/* Ikony programu. Sada /images/prvky/j_*.webp, tytez, ktere kresli katalog a objednavka,
   300x300 s pruhlednym pozadim. V menu se kresli na 26 px. Alt je prazdny zamerne:
   nazev programu je hned vedle jako text, ikona by ho jen zopakovala do cteceky. */
.zs26 .zs-menu__ikona { flex: 0 0 auto; width: 26px; height: 26px; object-fit: contain; }
.zs26 .zs-menu__sloupec--ikony > a { display: flex; align-items: center; gap: 10px; }

/* Katalog a vsechny jidelnicky jsou tlacitka, ne odkazy. Marek: "vsechny programy
   to tlacitko je takove nevyrazne". Pravidla panelu nize nastavuji vsem <a> vlastni
   padding a vysku, tady se musi vratit tvar tlacitka. */
.zs26 .zs-menu__panel a.zs-tlacitko {
  align-self: flex-start;
  padding: 0 var(--zs-odstup-lg);
  font-size: 15px;
}

/* ---------- desktop, od 1280 px ---------- */
@media (min-width: 1280px) {
  .zs26 .zs-hlavicka__menu > .zs-menu__polozka { gap: 2px; }

  .zs26 .zs-menu__panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    padding: var(--zs-odstup-lg) var(--zs-odstup-xl);
    background: var(--zs-barva-pozadi-stranka);
    border: 1px solid var(--zs-barva-ramecek-karta);
    border-radius: var(--zs-radius-male);
    z-index: 80;
  }
  /* Panel navazuje primo na spodni hranu listy, mezi nadpisem a panelem neni mezera,
     jinak by rozbaleni zmizelo pri prejezdu mysi dolu. */
  .zs26 .zs-menu__polozka:hover > .zs-menu__panel,
  .zs26 .zs-menu__polozka:focus-within > .zs-menu__panel,
  .zs26 .zs-menu__polozka--otevrena > .zs-menu__panel { display: flex; }

  .zs26 .zs-menu__panel--dva { gap: var(--zs-odstup-2xl); }
  .zs26 .zs-menu__panel--dva .zs-menu__sloupec { min-width: 190px; }

  /* Ctyri sloupce podle kategorie. Panel je sloupec (mrizka + patka pod ni), radu sloupcu
     drzi vnitrni .zs-menu__sloupce. Sirka sloupce je pevna, aby ctyri nadpisy typu
     "Jim podle svych potreb" nezlomily mrizku na ruzne siroke dilky. */
  /* Panel Programy: dva sloupce, pod nimi odkaz na katalog a patka s kalkulackou.
     Kotva vlevo, ne vpravo. Verze se ctyrmi sloupci mela right: 0 a 858 px siroky panel
     se ukotvil pravou hranou k polozce Programy, takze vyjel mimo levy okraj okna
     a videt byly dva sloupce ze ctyr. Zelene QA to nechytlo, pretekala hlavicka nula
     a panel se otevrel, jen byl mimo obrazovku. Naslo se to az na snimku. */
  .zs26 .zs-menu__panel--programy {
    flex-direction: column;
    gap: 0;
    left: 0;
    right: auto;
    padding-bottom: 0;
  }
  .zs26 .zs-menu__panel--programy .zs-menu__sloupce {
    display: flex;
    gap: var(--zs-odstup-2xl);
  }
  .zs26 .zs-menu__panel--programy .zs-menu__sloupec { flex: 0 0 auto; width: 200px; }

  /* Katalog stoji pod obema sloupci, ne v nich: je to cil pro oba, ne pata polozka jednoho. */
  .zs26 .zs-menu__panel--programy .zs-menu__vse { margin: var(--zs-odstup-base) 0 var(--zs-odstup-lg); }

  .zs26 .zs-menu__panel--programy .zs-menu__patka {
    margin: 0 calc(-1 * var(--zs-odstup-xl));
    padding: var(--zs-odstup-base) var(--zs-odstup-xl);
    background: var(--zs-barva-pozadi-jemne);
    border-top: 1px solid var(--zs-barva-ramecek-karta);
    border-radius: 0 0 var(--zs-radius-male) var(--zs-radius-male);
  }

  .zs26 .zs-hlavicka__menu .zs-menu__panel a:not(.zs-tlacitko) {
    padding: 7px 0;
    font-size: 15px;
    line-height: 1.35;
  }

  /* Vedlejsi odkazy a ikona Jidelnicku patri jen do mobilniho panelu. */
  .zs26 .zs-menu__vedlejsi,
  .zs26 .zs-hlavicka__jidelnicek { display: none; }
}

/* ---------- mobil a tablet, do 1279 px ---------- */
/* 25. 8. 2026: hranice posunuta z 699 na 1279 px. Do 25. 8. koncilo pravidlo pro otevreny
   panel na 699 px, ale hamburger byl videt do 1023, takze v pasmu 700 az 1023 px slo
   hamburger zmacknout a nestalo se nic. QA merilo jen 390 a 1440 px, proto to neprislo.
   Druhou zmenou je posun desktopove listy na 1280, viz komentar u ni. */
@media (max-width: 1279px) {
  .zs26 .zs-hlavicka__lista { position: relative; }

  .zs26 .zs-hlavicka--otevrene .zs-hlavicka__menu {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    /* 2026-08-29: dvh misto vh. Na iOS Safari je 100vh velky viewport (bez adresni
       listy), takze s viditelnou adresni listou panel utekl pod dolni okraj. */
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    background: var(--zs-barva-pozadi-stranka);
    border-top: 1px solid var(--zs-barva-ramecek-karta);
    padding: 8px 20px 16px; z-index: 70;
  }

  .zs26 .zs-hlavicka--otevrene .zs-hlavicka__menu > a,
  .zs26 .zs-hlavicka--otevrene .zs-menu__polozka > .zs-menu__hlavni {
    padding: 12px 0;
    border-bottom: 1px solid var(--zs-barva-ramecek-karta);
    /* 2026-08-29: zmereno na 390 px, Kontakt a Slovensky mely 350x43 px,
       tedy o 1 px pod doporucenym minimem dotykoveho cile 44x44.
       Reseno min-height, ne vetsim paddingem: padding by posunul i polozky,
       ktere uz 44 px maji, a rozhodil rytmus linek. */
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Radek s rozbalenim: odkaz vlevo, sipka vpravo, obe dost velke na prst. */
  .zs26 .zs-hlavicka--otevrene .zs-menu__polozka {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  .zs26 .zs-hlavicka--otevrene .zs-menu__polozka > .zs-menu__hlavni { flex: 1 1 auto; }
  .zs26 .zs-hlavicka--otevrene .zs-menu__prepinac {
    width: 44px;
    height: auto;
    align-self: stretch;
    /* linka pokracuje i pod sipkou, jinak konci pred ni a radek vypada rozpuleny */
    border-bottom: 1px solid var(--zs-barva-ramecek-karta);
  }
  .zs26 .zs-hlavicka--otevrene .zs-menu__polozka--otevrena > .zs-menu__prepinac { border-bottom-color: transparent; }
  .zs26 .zs-hlavicka--otevrene .zs-menu__polozka--otevrena > .zs-menu__panel {
    display: flex;
    flex-direction: column;
    flex: 1 0 100%;
    gap: var(--zs-odstup-base);
    padding: var(--zs-odstup-sm) 0 var(--zs-odstup-base) var(--zs-odstup-base);
  }
  .zs26 .zs-hlavicka--otevrene .zs-menu__panel a:not(.zs-tlacitko) {
    padding: 10px 0;
    border-bottom: 0;
    font-size: 15px;
    font-weight: 500;
    /* 30. 8. 2026: zmereno 43 px u vsech 24 odkazu panelu, tedy o pixel pod doporucenym
       minimem dotykoveho cile 44 px. Polozky listy tuhle opravu dostaly uz 29. 8.,
       do panelu se nepropsala a s ctyrmi sloupci programu jde nove o 24 cilu, ne o 5. */
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Hlavni polozky drzi vetsi vahu, at je v panelu videt hierarchie. */
  .zs26 .zs-hlavicka--otevrene .zs-hlavicka__menu > a,
  .zs26 .zs-hlavicka--otevrene .zs-menu__polozka > .zs-menu__hlavni { font-weight: 600; }
  .zs26 .zs-hlavicka--otevrene .zs-hlavicka__menu > a.zs-menu__vedlejsi { font-weight: 500; }
  .zs26 .zs-hlavicka--otevrene .zs-menu__nadpis { margin-bottom: 2px; }

  /* Sloupce se na mobilu skladaji pod sebe, nadpisy skupin zustavaji.
     Bez nich by z panelu byl seznam osmi odkazu bez vodítka, kdo je pro koho. */
  .zs26 .zs-hlavicka--otevrene .zs-menu__sloupce {
    display: flex;
    flex-direction: column;
    gap: var(--zs-odstup-base);
  }
  .zs26 .zs-hlavicka--otevrene .zs-menu__sloupce .zs-menu__nadpis { margin-top: var(--zs-odstup-sm); }
  /* Patka na mobilu nema pas pres celou sirku, panel uz je odsazeny. Staci linka. */
  .zs26 .zs-hlavicka--otevrene .zs-menu__patka {
    flex-direction: column;
    margin-top: var(--zs-odstup-sm);
    padding-top: var(--zs-odstup-sm);
    border-top: 1px solid var(--zs-barva-ramecek-karta);
  }
  .zs26 .zs-hlavicka--otevrene .zs-menu__panel a.zs-tlacitko { margin: var(--zs-odstup-sm) 0; }

  /* Druhy blok pod hlavnimi polozkami: drobnejsi pismo, bez linek. */
  .zs26 .zs-hlavicka--otevrene .zs-hlavicka__menu > a.zs-menu__vedlejsi--prvni { margin-top: var(--zs-odstup-sm); }
  .zs26 .zs-hlavicka--otevrene .zs-hlavicka__menu > a.zs-menu__vedlejsi {
    padding: 10px 0;
    border-bottom: 0;
    color: var(--zs-barva-text-tlumeny);
    font-size: 15px;
  }
}

/* Ikona Jidelnicku v hlavicce. Vidi ji jen mobil a tablet, od 1024 px je Jidelnicek v liste
   a ikona by byla druhy odkaz na tutez stranku. */
.zs26 .zs-hlavicka__jidelnicek {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--zs-barva-text-nadpis);
  text-decoration: none;
}

/* Od 1280 px je Jidelnicek v liste, ikona by byla druhy odkaz na tutez stranku.
   Pravidlo musi stat az za zakladnim, jinak pri stejne specificite prohraje:
   totez skryti je i v bloku desktopu vyse, ale ten je v souboru driv. */
@media (min-width: 1280px) {
  .zs26 .zs-hlavicka__jidelnicek { display: none; }
}


/* 2026-08-24: sablona kresli pred kazde li v obsahu zelenou odrazku (li::before), Figma paticka ani seznamy
   v modulech ji nemaji. Uvnitr .zs26 se odrazky sablony vypinaji, vlastni odrazky si moduly kresli samy. */
.zs26 ul, .zs26 ol { list-style: none; margin: 0; padding: 0; }
.zs26 li { background: none; }
.zs26 li::before { content: none !important; display: none !important; }

/* mobilni menu bez podtrzeni ze sablony */
.zs26 .zs-hlavicka__menu a, .zs26 .zs-paticka a { text-decoration: none; }

/* 2026-08-24: reset proti sablone template_general. Sablona ma body { text-align: center;
   font-size: 14px; line-height: 1.6em } a content2024.css dava h1 az h6 padding-top 2em az 2.5em
   a line-height 1.8em, odstavcum padding 6px. Nahled bez sablony to nevidel, na webu to
   centrovalo a natahovalo kazdy modul. Tridy .zs-* (specificita 0,2,0) tenhle reset prebiji. */
.zs26 { text-align: left; }
.zs26 h1, .zs26 h2, .zs26 h3, .zs26 h4, .zs26 h5, .zs26 h6 { padding: 0; line-height: 1.15; color: inherit; font-weight: 700; }
.zs26 p, .zs26 li, .zs26 figcaption, .zs26 blockquote { padding: 0; }
.zs26 a { text-decoration: none; }
.zs26 img { vertical-align: middle; max-width: 100%; height: auto; }
.zs26 table { border-collapse: collapse; }

/* 2026-08-24: sablona vynucuje !important na input, textarea a button (content2024.css r. 1004 a 1015:
   padding 28px 31px, padding 21px 25px, border 0). Tady jsou nase pravidla pro pole a tlacitka
   zopakovana s !important jen u vlastnosti, ktere sablona vynucuje. Vygenerovano z pravidel vyse. */
.zs26 button { padding: 0 !important; border: 0 !important; background: none; }
.zs26 input, .zs26 textarea, .zs26 select { padding: 0 var(--zs-odstup-base) !important; box-shadow: none !important; }
/* 26. 8. 2026: radek vyse plati i na zaskrtavatko a prepinac. Pri box-sizing: border-box
   a width 20px vodorovny padding 2x16 px roztahne policko na 32 x 20 px, tedy obdelnik
   misto ctverce. Videt to bylo na souhlasu u newsletteru. Vyjimka to vraci na ctverec. */
.zs26 input[type="checkbox"], .zs26 input[type="radio"] { padding: 0 !important; }
.zs26 ul li, .zs26 ul li:nth-child(n) { background: none !important; padding-left: 0; }
.zs26 ul li:nth-child(3n+1), .zs26 ul li:nth-child(3n+2), .zs26 ul li:nth-child(3n) { background: none !important; }
.zs26 .zs-tlacitko { min-height: var(--zs-vyska-tlacitko) !important; padding: 0 var(--zs-odstup-xl) !important; border-radius: var(--zs-radius-pill) !important; font-size: 16px !important; line-height: 1 !important; border: 2px solid transparent !important; }
.zs26 .zs-tlacitko--primarni { background: var(--zs-barva-akce-primarni) !important; color: var(--zs-barva-akce-primarni-text) !important; }
.zs26 .zs-tlacitko--primarni:hover { background: var(--zs-barva-akce-primarni-hover) !important; }
.zs26 .zs-tlacitko--sekundarni { background: var(--zs-barva-pozadi-karta) !important; color: var(--zs-barva-text-nadpis) !important; border-color: var(--zs-barva-akce-sekundarni-ramecek) !important; }
.zs26 .zs-tlacitko--sekundarni:hover { background: var(--zs-barva-akce-sekundarni-hover) !important; }
.zs26 .zs-tlacitko--tmave { background: var(--zs-barva-akce-tmave) !important; color: var(--zs-barva-text-inverzni) !important; }
.zs26 .zs-tlacitko--tmave:hover { background: var(--zs-barva-akce-tmave-hover) !important; }
.zs26 .zs-tlacitko--textove { background: transparent !important; color: var(--zs-barva-text-odkaz) !important; padding: 0 var(--zs-odstup-xs) !important; }
.zs26 .zs-tlacitko--male { min-height: var(--zs-vyska-tlacitko-male) !important; padding: 0 var(--zs-odstup-lg) !important; }
.zs26 button,
.zs26 input,
.zs26 select,
.zs26 textarea { color: inherit !important; }
@media (min-width: 700px) { .zs26 .zs-karta--kategorie .zs-tlacitko--textove { color: var(--zs-barva-text-na-tmavem) !important; } }
/* 1. 9. 2026, karta: hodnoty odsazeni a rozmeru jdou z --zs-faq-*, ktere nastavuje
   sekce 8. Shorthand `padding` tady musi zustat shorthand, jinak by z nej zbyl
   stary padding-left: 0. `width` u ::after tady drive nebylo, takze kolecko
   vychazelo jako elipsa 32 x 24. background-image (pruhy plus a minus) do tohohle
   bloku nepatri, gradienty zustavaji v sekci 8, aby se to dalo cist. */
.zs26 .zs-faq__otazka { padding: var(--zs-faq-odsazeni-y) var(--zs-faq-odsazeni-x) !important; font-size: 17.5px !important; line-height: 1.35 !important; color: var(--zs-barva-text-nadpis) !important; }
.zs26 .zs-faq__otazka::after { width: var(--zs-faq-znak) !important; height: var(--zs-faq-znak) !important; border-radius: var(--zs-radius-pill) !important; background-color: var(--zs-faq-znak-pozadi) !important; }
.zs26 .zs-faq[open] > .zs-faq__otazka { padding-bottom: var(--zs-odstup-md) !important; }
.zs26 .zs-faq__odpoved { padding: 0 var(--zs-faq-odsazeni-x) var(--zs-faq-odsazeni-y) !important; font-size: 16px !important; line-height: 1.55 !important; color: var(--zs-barva-text-tlumeny) !important; }
.zs26 .zs-pole-skupina__popisek { font-size: 15.5px !important; line-height: 1.55 !important; color: var(--zs-barva-text-zakladni) !important; }
.zs26 .zs-pole-skupina__napoveda { font-size: 14.5px !important; line-height: 1.5 !important; color: var(--zs-barva-text-tlumeny) !important; }
.zs26 .zs-pole-skupina__chyba { font-size: 14.5px !important; line-height: 1.5 !important; color: var(--zs-barva-stav-chyba) !important; }
.zs26 .zs-pole { min-height: var(--zs-vyska-pole) !important; padding: 0 var(--zs-odstup-base) !important; background: var(--zs-barva-pozadi-karta) !important; border: 1px solid var(--zs-barva-ramecek-pole) !important; border-radius: var(--zs-radius-male) !important; color: var(--zs-barva-text-zakladni) !important; font-size: 16px !important; line-height: 1.55 !important; }
.zs26 .zs-pole::placeholder { color: var(--zs-barva-text-popisek) !important; }
.zs26 .zs-pole:focus-visible { border-color: var(--zs-barva-stav-fokus) !important; }
.zs26 .zs-pole--chyba,
.zs26 .zs-pole[aria-invalid="true"] { border-width: 2px !important; border-color: var(--zs-barva-stav-chyba) !important; }
.zs26 .zs-pole[disabled] { background: var(--zs-barva-pozadi-sekce) !important; border-color: var(--zs-barva-ramecek-karta) !important; color: var(--zs-barva-text-popisek) !important; }
.zs26 textarea.zs-pole { min-height: 120px !important; padding: var(--zs-odstup-md) var(--zs-odstup-base) !important; }
.zs26 .zs-zaskrtavatko input[type="checkbox"] { height: 20px !important; background: var(--zs-barva-pozadi-karta) !important; border: 1.5px solid var(--zs-barva-ramecek-pole) !important; border-radius: 4px !important; }
.zs26 .zs-zaskrtavatko input[type="checkbox"]:checked { background: var(--zs-barva-akce-primarni) !important; border-color: var(--zs-barva-akce-primarni) !important; }
.zs26 .zs-zaskrtavatko input[type="checkbox"]:checked::after { height: 11px !important; border: solid var(--zs-barva-text-na-limetce) !important; border-width: 0 2px 2px 0 !important; }
.zs26 .zs-hlavicka__hamburger { height: 44px !important; padding: 0 !important; background-color: transparent !important; border: 0 !important; }
.zs26 .zs-hlavicka__hamburger::before,
.zs26 .zs-hlavicka__hamburger::after { height: 2px !important; background: var(--zs-barva-ikona-vychozi) !important; }
.zs26 .zs-sticky-lista .zs-tlacitko { padding: 0 var(--zs-odstup-base) !important; }


/* ---------------------------------------------------------------
   10. Tmavá hlavička rozcestníku, ikony programů, stejné výšky karet.
       30. 8. 2026, Markova revize /sportuji.

   Marek: „hlavičku bych tmavě zelenou, jak to máme na hlavní stránce, a taky
   fotku dal stejnou, jaká je na hlavní stránce." Hero proto dostalo
   .zs-sekce--tmava a na místo textového placeholderu přišla táž fotka, jakou
   má karta cesty na homepage (modul 881, /images/zs26/foto/<cesta>-v2.webp).

   Barvy textu na tmavém pásu řeší .zs-sekce--tmava v 10-zaklad.css
   (nadpisy 11,2:1, perex a drobečky 8,0:1). Tady je jen to, co obecné pravidlo
   neumí: fotka místo placeholderu, řádek pod perexem a barva fokusu.
   --------------------------------------------------------------- */

/* Fotka v heru. Sdílená .zs-m-rozcestnik__hero-foto byla napsaná pro textový
   placeholder, tedy bez ořezu. Zdroj je 900 x 600 na šířku, slot hera je na
   výšku, takže se musí ořezávat, ne deformovat. */
/* Do 30. 8. 2026 se fotka pod 700 px vůbec nekreslila, tak ji má mobilní
   export M3. Marek 30. 8.: „na mobilu nejde vidět fotka." Kreslí se tedy všude:
   na mobilu v poměru 3:2 pod textem, od 700 px vyplňuje výšku pásu vedle textu. */
.zs26.zs26-rozcestnik .zs-m-rozcestnik__hero-foto {
  display: flex;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
}

/* 700 az 1023 px je hero jednosloupcove a fotka jde pres celou sirku. S
   aspect-ratio: auto si drzela vlastni pomer 914 x 600, takze pri 1023 px
   vyrostla na 983 x 645 a na tabletu byla z hlavicky cela obrazovka
   (mereno 31. 8. 2026). Strop je pomer 21:9, pri 1023 px tedy 983 x 421.
   Od 1024 px se hero deli na dva sloupce a fotka zase vyplnuje vysku textu. */
@media (min-width: 700px) {
  .zs26.zs26-rozcestnik .zs-m-rozcestnik__hero-foto {
    aspect-ratio: 21 / 9;
    height: auto;
    /* min-height musi byt 0. S aspect-ratio a min-height 300 px se box
       nezvysi, ale rozsiri: 300 x 21/9 = 700 px, takze pri 700 px sirky
       fotka pretekla kontejner o 40 px (mereno 31. 8. 2026). */
    min-height: 0;
  }
}

@media (min-width: 1024px) {
  .zs26.zs26-rozcestnik .zs-m-rozcestnik__hero-foto {
    aspect-ratio: auto;
    height: 100%;
    /* Spodni mez vysky hlavicky, drzela ji driv media query od 700 px.
       Sem patri az od 1024, kde uz aspect-ratio neplati a min-height
       tedy nemuze box rozsirit do strany. */
    min-height: 300px;
  }
}

.zs26.zs26-rozcestnik .zs-m-rozcestnik__hero-foto > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Ořez po jednotlivých fotkách, tytéž hodnoty jako u karet cest
   v 33-kategorie-v3.css. Střed by u těchhle fotek uřízl obličej. */
.zs26.zs26-rozcestnik--sportuji .zs-m-rozcestnik__hero-foto > img { object-position: 65% 30%; }
.zs26.zs26-rozcestnik--nestiham-varit .zs-m-rozcestnik__hero-foto > img { object-position: 100% 30%; }
.zs26.zs26-rozcestnik--hubnu .zs-m-rozcestnik__hero-foto > img { object-position: 56% 25%; }
.zs26.zs26-rozcestnik--jim-podle-svych-potreb .zs-m-rozcestnik__hero-foto > img { object-position: 56% 30%; }

/* Řádek pod perexem, který nahradil dvě tlačítka (30. 8. 2026). Říká, co je
   na stránce hned dál. Barvu na tmavém pásu drží .zs-sekce--tmava .zs-popisek.
   Pravidla pro sekundární tlačítko v tmavém pásu tady byla do 30. 8. a padla
   spolu s tlačítky. Kdyby se do hera někdy vrátilo, vzor je v 35-hero-v2.css. */
.zs26.zs26-rozcestnik .zs-m-rozcestnik__doporuceni { max-width: 46ch; }

/* Perex pod nadpisem sekce programů. Používá ho zatím jen /jim-podle-svych-potreb,
   kde je potřeba říct, čím je ta cesta jiná. Sirotek v ostatních cestách nevzniká,
   pravidlo se chytne jen tehdy, když prvek v HTML je. */
.zs26.zs26-rozcestnik .zs-m-rozcestnik__sekce-perex {
  max-width: 68ch;
  margin: var(--zs-odstup-sm) 0 0;
}

/* Fokusový prstenec --zs-barva-stav-fokus (#2F6FE0) má na tmavě zelené 2,48:1,
   na tmavém pásu se proto přebarvuje. Stejné řešení jako v heru homepage. */
.zs26.zs26-rozcestnik .zs-sekce--tmava :focus-visible {
  outline-color: var(--zs-barva-text-na-tmavem);
}

/* Ikona programu je od 30. 8. skutečný obrázek z ostrého webu
   (images/prvky/j_*.webp), ne čárkovaný placeholder .zs-m-rozcestnik__ikona.
   Rozměr sloupce ikony drží sekce 2 a 7 tohohle souboru, tady jen obrázek.
   Bez mléka ikonu nemá (j_bezmleka.webp vrací 404), ta karta zůstává
   s prázdným sloupcem, aby text začínal na stejné ose jako u ostatních. */
.zs26.zs26-rozcestnik .zs-m-programy__ikona {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

@media (min-width: 700px) {
  .zs26.zs26-rozcestnik .zs-m-programy__ikona {
    width: 72px;
    height: 72px;
  }
}

/* Stejně vysoké karty. Seznam je mřížka o jednom sloupci, takže si každý řádek
   dosud počítal výšku sám: Protein+ má navíc řádek se štítkem Doporučujeme
   a byl o ten řádek vyšší než Fit+. grid-auto-rows: 1fr srovná řádky podle
   nejvyššího, bez media query a bez pevné výšky. Pravidlo z 20. 8.:
   bloky v řadě vždy stejně vysoké podle nejvyššího. */
.zs26.zs26-rozcestnik .zs-m-rozcestnik__programy { grid-auto-rows: 1fr; }

/* Doporučená karta bez rámečku. Marek 30. 8.: „nerozumím, proč je Protein+
   ohraničený." Na rozcestníku jsou karty dvě až pět, takže dvoupixelový rám
   na jedné z nich čte spíš jako chyba než jako důraz. Pořadí volby nese štítek,
   ten zůstává. V katalogu /programy (.zs26-programy) rám dál platí, tam je
   čtrnáct karet a rám mezi nimi jednu vybranou opravdu odliší. */
.zs26.zs26-rozcestnik .zs-m-rozcestnik__programy .zs-karta--doporucena,
.zs26.zs26-rozcestnik .zs-m-rozcestnik__programy .zs-karta:has(.zs-stitek--doporuceno) {
  border-width: 1px;
  border-color: var(--zs-barva-ramecek-karta);
}


/* Nadpis a drobečky na tmavém pásu.

   H1: skin nad starým obsahem má v css-obsah/60-zaklad.css pravidlo
   `body:has(.zs26-hlavicka):not(.foxplus) #clanek h1`, které nese i barvu.
   Má v sobě ID, takže ho žádný selektor ze samých tříd nepřebije a nadpis
   rozcestníku vyšel #1F3F2A na #1F3F2A, tedy neviditelný (změřeno 30. 8. 2026
   na testu). Je to táž past, na kterou 25. 8. najely velikosti nadpisů:
   `#clanek` sahá i dovnitř bloků ZS26. Řeší se tady, a ne zúžením toho pravidla
   o `:not(.zs26 *)`, protože zúžení by zároveň pustilo /program-na-miru
   z 44 px na 56 px, a to je stránka, o kterou tady nejde. Typografie se nemění,
   tokens mají pro .zs-h1-podstranka tytéž hodnoty, mění se jen barva.

   Drobečky: .zs-m-rozcestnik__drobecky si barvu drží sám (--zs-barva-text-popisek),
   takže na tmavém pásu vyšly na 2,5:1. Odkaz v nich dědí od odstavce, proto
   jsou v selektoru oba. */
.zs26.zs26-rozcestnik .zs-sekce--tmava .zs-h1-podstranka {
  color: var(--zs-barva-text-na-tmavem) !important;
}

.zs26.zs26-rozcestnik .zs-sekce--tmava .zs-m-rozcestnik__drobecky,
.zs26.zs26-rozcestnik .zs-sekce--tmava .zs-m-rozcestnik__drobecky a {
  color: var(--zs-barva-paticka-text-tlumeny);
}

/* ===== css-partials/50-programy.css ===== */
/* 50-programy.css
   Co to je: styly navíc pro stránku 14 Programy a příprava (/programy). Jen to, co
   v novy-2026.css neexistuje: filtr programů (chipy), ikony programů jako <img>,
   fotka v heru místo placeholderu, tři karty „Jak si program přizpůsobíte“,
   odkaz pod mozaikou na mobilu a okraje, které mají existující moduly scopnuté
   na svůj obal (.zs26.zs26-kategorie, .zs26.zs26-z-nasi-kuchyne, .zs26.zs26-faq)
   a tady je obal .zs26.zs26-programy, takže se musí zopakovat.
   Sdílené komponenty se tady NEDEFINUJÍ, přebírají se z novy-2026.css
   (.zs-karta--program, .zs-m-rozcestnik__*, .zs-m-kategorie__*, .zs-m-kuchyne__*, .zs-faq).
   Zdroj: podklady/14-programy-a-priprava-desktop.png (1440 x 6175),
   podklady/M8-programy-a-priprava-mobil.png (390 x 5474).
   Rozměry odměřené z PNG 14: chipy výška 44 px, mezera 12 px, řádek chipů y 653 až 697,
   první karta y 720 (mezera 23 px pod chipy), karty programů výška 152 px,
   mezera 25 px, ikona 72 px na x 200 až 280, cena vpravo zarovnaná na 1285 px,
   odkaz „Porovnat všechny programy v ceníku“ 40 px pod poslední kartou (y 4316),
   tři karty úprav 355 x 181 px s mezerou 24 px.
   Co je záměrně nehotové:
   - ikona Bez mléka je placeholder (na dnešním webu není)
   - filtr přepíná jen atribut hidden na <li>, nic víc (žádná animace, žádný počet) */

/* ---------------------------------------------------------------
   1. Okraje nadpisů a perexů převzatých bloků (v modulech scopnuté obalem).
   --------------------------------------------------------------- */
.zs26.zs26-programy .zs-sekce > .zs-obsah > .zs-h2 { margin: 0; }
.zs26.zs26-programy .zs-m-kategorie__perex,
.zs26.zs26-programy .zs-m-programy__perex { margin: var(--zs-odstup-sm) 0 0; }
.zs26.zs26-programy .zs-m-kategorie__namiru-telo .zs-h3 { margin: 0 0 var(--zs-odstup-md); }
.zs26.zs26-programy .zs-m-kategorie__namiru-telo .zs-popisek { margin: 0; }
.zs26.zs26-programy .zs-m-kategorie__pomoc .zs-h3 { margin: 0 0 var(--zs-odstup-md); }
.zs26.zs26-programy .zs-m-kategorie__pomoc .zs-popisek { margin: 0; }
.zs26.zs26-programy .zs-m-kuchyne__hlavicka-text .zs-h2 { margin: 0 0 var(--zs-odstup-sm); }
.zs26.zs26-programy .zs-m-kuchyne__hlavicka-text .zs-perex { margin: 0; }
.zs26.zs26-programy .zs-m-faq__seznam { margin-top: var(--zs-odstup-xl); }

/* ---------------------------------------------------------------
   2. Hero: fotka místo placeholderu. Obal dědí display, výšku a zaoblení
      ze sdílené .zs-m-rozcestnik__hero-foto, tady jen ořez a cover.
   --------------------------------------------------------------- */
.zs26.zs26-programy .zs-m-programy__hero-foto {
  overflow: hidden;
  background: var(--zs-barva-pozadi-jemne);
}

.zs26.zs26-programy .zs-m-programy__hero-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------
   3. Filtr programů. Řada chipů, aktivní je tmavě zelený.
   --------------------------------------------------------------- */
.zs26.zs26-programy .zs-m-programy__filtr {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-md);
  margin: var(--zs-odstup-xl) 0 0;
}

.zs26.zs26-programy .zs-m-programy__chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--zs-vyska-tlacitko-male);
  padding: 0 var(--zs-odstup-lg);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-pozadi-karta);
  color: var(--zs-barva-text-nadpis);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.zs26.zs26-programy .zs-m-programy__chip:hover {
  border-color: var(--zs-barva-ramecek-pole);
  background: var(--zs-barva-akce-sekundarni-hover);
}

.zs26.zs26-programy .zs-m-programy__chip:focus-visible {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}

.zs26.zs26-programy .zs-m-programy__chip--aktivni,
.zs26.zs26-programy .zs-m-programy__chip--aktivni:hover {
  border-color: var(--zs-barva-akce-tmave);
  background: var(--zs-barva-akce-tmave);
  color: var(--zs-barva-text-inverzni);
}

/* seznam karet: v PNG 14 je 23 px pod chipy, sdílený seznam má 32 px */
.zs26.zs26-programy .zs-m-programy__seznam { margin-top: var(--zs-odstup-xl); }

/* skrytá karta: sdílené pravidlo dává li display flex, a to by hidden přebilo */
.zs26.zs26-programy .zs-m-programy__seznam > li[hidden] { display: none; }

/* ---------------------------------------------------------------
   4. Ikony programů jako <img> z dnešního webu. Rozměr sloupce s ikonou
      dává .zs-m-rozcestnik__programy .zs-karta__ikona (56 px, od 700 px 176 x 72).
   --------------------------------------------------------------- */
.zs26.zs26-programy .zs-m-programy__ikona {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.zs26.zs26-programy .zs-m-programy__ikona-placeholder {
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  padding: var(--zs-odstup-xs);
  border-radius: var(--zs-radius-male);
  font-size: 10px;
  line-height: 1.2;
}

/* odkaz pod seznamem */
.zs26.zs26-programy .zs-m-programy__porovnat { margin: var(--zs-odstup-2xl) 0 0; }

/* ---------------------------------------------------------------
   5. Jak si program přizpůsobíte. Tři karty, nadpis a text bez vnějších okrajů.
   --------------------------------------------------------------- */
.zs26.zs26-programy .zs-m-programy__nadpis { margin: 0 0 var(--zs-odstup-xl); }

.zs26.zs26-programy .zs-m-programy__uprava { gap: var(--zs-odstup-sm); }

.zs26.zs26-programy .zs-m-programy__uprava .zs-h3,
.zs26.zs26-programy .zs-m-programy__uprava .zs-popisek { margin: 0; }

.zs26.zs26-programy .zs-m-programy__uprava .zs-popisek { font-size: 16px; }

/* ---------------------------------------------------------------
   6. Z naší kuchyně: odkaz pod mozaikou jen do 1023 px (M8), od 1024 px je v hlavičce.
   --------------------------------------------------------------- */
.zs26.zs26-programy .zs-m-programy__mozaika-pata { margin: var(--zs-odstup-lg) 0 0; }

@media (max-width: 1023px) {
  .zs26.zs26-programy .zs-m-kuchyne__hlavicka-odkaz { display: none; }
}

/* ---------------------------------------------------------------
   7. Od 700 px: ikona 72 px, jako v rozcestnících.
   --------------------------------------------------------------- */
@media (min-width: 700px) {
  .zs26.zs26-programy .zs-m-programy__ikona,
  .zs26.zs26-programy .zs-m-programy__ikona-placeholder {
    width: 72px;
    height: 72px;
  }
}

/* ---------------------------------------------------------------
   8. Od 1024 px: odkaz pod mozaikou pryč, je v hlavičce sekce.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .zs26.zs26-programy .zs-m-programy__mozaika-pata { display: none; }
}

/* ---------------------------------------------------------------
   Zápis agenta 14 (24. 8. 2026)
   Převzato beze změny CSS: hero (.zs-m-rozcestnik__hero z 40-rozcestnik.css),
   dlaždice kategorií, karta Na míru, karta Nevíte a odkaz 2 dny na zkoušku
   (.zs-m-kategorie__* z 31-homepage-a.css, HTML 1:1 z moduly/02-kategorie.html),
   seznam programů (.zs-m-rozcestnik__programy a .zs-karta--program),
   mozaika Z naší kuchyně (.zs-m-kuchyne__* z 31-homepage-a.css, HTML z
   moduly/03-z-nasi-kuchyne.html bez jídelníčku), FAQ (.zs-faq, .zs-m-faq__seznam
   z moduly/08-faq.html), sticky lišta (.zs-sticky-lista).
   Nové v tomhle partialu: .zs-m-programy__filtr, __chip, __chip--aktivni, __seznam,
   __ikona, __ikona-placeholder, __hero-foto, __perex, __porovnat, __nadpis, __uprava,
   __mozaika-pata, plus zopakované okraje scopnutých modulů.
   Odchylky: sekce „Jak právě žijete?“ je podle PNG 14 bílá (na homepage světlá);
   ikony programů jsou <img> z dnešního webu (/images/prvky/j_*.webp, 13 kusů,
   všechny HTTP 200 dne 24. 8. 2026), ne SVG placeholder jako v rozcestnících;
   filtr má jediný inline <script> na konci fragmentu (zadání orchestrátora).
   Značky v nahled/programy-a-priprava.html (jen blok div.zs26-programy):
   OVĚŘIT TEXT 10, CENA 20, ODKAZ 6, CHYBÍ 9. Karet programů 14 (v PNG 14 jich je 14,
   spočítáno podle horních rámečků karet na x 135: y 1824 až 4113).
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   9. Tmavý hero katalogu. 30. 8. 2026, Markova revize.
      „Tenhle blok udělej podobně jako /hubnu, minimalisticky, bez nějakých
      tlačítek zatím."

   V HTML dostalo hero .zs-sekce--tmava a přišlo o dvě tlačítka i o řádek
   s odrážkami (Přizpůsobíte si každý den, 3,8/5 Google). Barvy textu na tmavém
   pásu řeší .zs-sekce--tmava v 10-zaklad.css. Tady je jen to, co obecné pravidlo
   neumí, a je to tentýž seznam jako u rozcestníků (40-rozcestnik.css bod 10),
   jen scopnutý na .zs26-programy.

   H1: skin nad starým obsahem má v css-obsah/60-zaklad.css pravidlo
   `body:has(.zs26-hlavicka):not(.foxplus) #clanek h1`, které nese i barvu.
   Má v sobě ID, takže ho žádný selektor ze samých tříd nepřebije a nadpis
   by na tmavém pásu vyšel #1F3F2A na #1F3F2A, tedy neviditelný. Táž past
   sundala 30. 8. nadpisy rozcestníků. Řeší se tady, a ne zúžením toho pravidla
   o `:not(.zs26 *)`, protože zúžení sahá i na stránky, o které tady nejde.
   Typografie se nemění, tokens mají tytéž hodnoty, mění se jen barva.

   Drobečky si barvu drží samy (--zs-barva-text-popisek), na tmavém pásu by
   vyšly na 2,5:1. Odkaz v nich dědí od odstavce, proto jsou v selektoru oba.

   Fotka: sdílená .zs-m-rozcestnik__hero-foto se pod 700 px vůbec nekreslí,
   tak ji má mobilní export M8. Na rozcestnících to Marek 30. 8. zamítl
   („na mobilu nejde vidět fotka"), takže se tady kreslí stejně jako tam:
   na mobilu v poměru 3:2 pod textem, od 700 px vyplňuje výšku pásu vedle textu.
   Ořez a cover řeší bod 2 výš.
   --------------------------------------------------------------- */
.zs26.zs26-programy .zs-sekce--tmava .zs-h1-podstranka {
  color: var(--zs-barva-text-na-tmavem) !important;
}

.zs26.zs26-programy .zs-sekce--tmava .zs-m-rozcestnik__drobecky,
.zs26.zs26-programy .zs-sekce--tmava .zs-m-rozcestnik__drobecky a {
  color: var(--zs-barva-paticka-text-tlumeny);
}

.zs26.zs26-programy .zs-m-programy__hero-foto {
  display: flex;
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
}

/* 700 az 1023 px je hero jednosloupcove a fotka jde pres celou sirku. S
   aspect-ratio: auto si drzela vlastni pomer 914 x 600, takze pri 1023 px
   vyrostla na 983 x 645 a na tabletu byla z hlavicky cela obrazovka
   (mereno 31. 8. 2026). Strop je pomer 21:9, pri 1023 px tedy 983 x 421.
   Od 1024 px se hero deli na dva sloupce a fotka zase vyplnuje vysku textu. */
@media (min-width: 700px) {
  .zs26.zs26-programy .zs-m-programy__hero-foto {
    aspect-ratio: 21 / 9;
    height: auto;
    /* min-height musi byt 0. S aspect-ratio a min-height 300 px se box
       nezvysi, ale rozsiri: 300 x 21/9 = 700 px, takze pri 700 px sirky
       fotka pretekla kontejner o 40 px (mereno 31. 8. 2026). */
    min-height: 0;
  }
}

@media (min-width: 1024px) {
  .zs26.zs26-programy .zs-m-programy__hero-foto {
    aspect-ratio: auto;
    height: 100%;
    /* Spodni mez vysky hlavicky, drzela ji driv media query od 700 px.
       Sem patri az od 1024, kde uz aspect-ratio neplati a min-height
       tedy nemuze box rozsirit do strany. */
    min-height: 300px;
  }
}

.zs26.zs26-programy .zs-m-programy__hero-foto > img { border-radius: inherit; }

/* ===== css-partials/51-na-miru.css ===== */
/* 51-na-miru.css
   Co to je: styly navíc pro stránku 09 Program Na míru (nahled/program-na-miru.html,
   obal .zs26.zs26-namiru). Jen to, co v novy-2026.css neexistuje. Sdílené komponenty
   (.zs-sekce, .zs-obsah, .zs-mrizka, .zs-karta, .zs-krok, .zs-faq, .zs-stitek,
   .zs-pas-cta, .zs-sticky-lista, tlačítka, typografie) a bloky rozcestníku
   (.zs-m-rozcestnik__hero, __akce, __vyhody, __cesty) se tady NEDEFINUJÍ,
   partial je jen staví na sebe a dolaďuje rozměry.
   Zdroj: podklady/09-program-na-miru-desktop.png (1440 x 3836),
   podklady/M6-program-na-miru-mobil.png (390, pořadí sekcí a stohování tabulky).
   Rozměry odměřené z PNG 09: obsah 1180 px, hero pruh 118 až 548 px, fotka hera
   478 x 300 px vpravo, kroky 3 sloupce s mezerou 24 px, karty jídel 4 sloupce
   s mezerou 24 px a fotkou 3:2, zelený pruh výška 56 px, tabulka: hlavička 56 px
   na světle zeleném, řádky 56 až 82 px, první sloupec 29 procent šířky,
   tři karty 3 sloupce s mezerou 24 px, cenový pás výška 128 px krémový,
   FAQ 920 px na střed (řeší .zs-obsah--uzky).
   Co je záměrně nehotové:
   - fajfky jsou textové znaky (✓ ve span nebo ::before), ve Figmě je komponenta Ikona,
     SVG v balíku nejsou
   - tabulka je opravdové <table>, pod 700 px se stohuje do karet podle M6; šablona
     Joomly může tabulkám přidávat vlastní okraje, proto jsou tady paddingy a rámečky
     buněk vypsané explicitně
   - odstupy sekcí řeší .zs-sekce, partial do nich nesahá */

/* ---------------------------------------------------------------
   1. Hero. Skladba z rozcestníku, navíc štítek jako pilulka a fotka v obalu.
   --------------------------------------------------------------- */
.zs26 .zs-m-namiru__novinka {
  padding: var(--zs-odstup-xs) var(--zs-odstup-md);
  border-radius: var(--zs-radius-pill);
}

/* sdílená .zs-m-rozcestnik__hero-foto je připravená pro placeholder,
   tady je v ní opravdová fotka, proto overflow a object-fit */
.zs26 .zs-m-namiru__hero-foto {
  overflow: hidden;
  background: var(--zs-barva-pozadi-jemne);
}

.zs26 .zs-m-namiru__hero-obrazek {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Tentyz strop jako u rozcestniku a katalogu. Fotka tady nese obe tridy
   (zs-m-rozcestnik__hero-foto i zs-m-namiru__hero-foto), takze bere
   aspect-ratio: auto ze sdilene tridy a pri 1023 px vyrostla na 983 x 645.
   Mereno 31. 8. 2026. */
@media (min-width: 700px) {
  .zs26 .zs-m-namiru__hero-foto {
    aspect-ratio: 21 / 9;
    height: auto;
    /* min-height musi byt 0. S aspect-ratio a min-height 300 px se box
       nezvysi, ale rozsiri: 300 x 21/9 = 700 px, takze pri 700 px sirky
       fotka pretekla kontejner o 40 px (mereno 31. 8. 2026). */
    min-height: 0;
  }
}

@media (min-width: 1024px) {
  .zs26 .zs-m-namiru__hero-foto {
    aspect-ratio: auto;
    height: 100%;
    /* Spodni mez vysky hlavicky, drzela ji driv media query od 700 px.
       Sem patri az od 1024, kde uz aspect-ratio neplati a min-height
       tedy nemuze box rozsirit do strany. */
    min-height: 300px;
  }
}

/* ---------------------------------------------------------------
   2. Jak to funguje. Kroky řeší .zs-krok, tady jen řada tlačítek pod nimi.
   --------------------------------------------------------------- */
.zs26 .zs-m-namiru__postup-akce {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--zs-odstup-base);
  margin: var(--zs-odstup-xl) 0 0;
}

/* ---------------------------------------------------------------
   3. Takhle může vypadat váš den. Hlavička sekce, karty jídel, zelený pruh.
   --------------------------------------------------------------- */
.zs26 .zs-m-namiru__hlava {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
  max-width: 72ch;
  margin: 0 0 var(--zs-odstup-xl);
}

.zs26 .zs-m-namiru__nadpis { margin: 0 0 var(--zs-odstup-xl); }

.zs26 .zs-m-namiru__den {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zs26 .zs-m-namiru__den > li { display: flex; }

.zs26 .zs-m-namiru__jidlo {
  width: 100%;
  padding: var(--zs-odstup-lg);
}

/* sdílená .zs-karta__foto je čtverec, v PNG 09 je fotka jídla 3:2 */
.zs26 .zs-m-namiru__jidlo-foto { aspect-ratio: 3 / 2; }

/* štítek chodu: verzálky jako .zs-stitek, ale bez rámečku a plochy, zelený text */
.zs26 .zs-m-namiru__chod {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--zs-barva-text-odkaz);
}

.zs26 .zs-m-namiru__pruh {
  display: flex;
  align-items: flex-start;
  gap: var(--zs-odstup-md);
  margin: var(--zs-odstup-xl) 0 0;
  padding: var(--zs-odstup-base) var(--zs-odstup-xl);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-akcent-limetka-plo);
  color: var(--zs-barva-text-nadpis);
  font-size: 16px;
  line-height: 1.55;
}

.zs26 .zs-m-namiru__pruh-ikona {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--zs-barva-ikona-check);
}

/* ---------------------------------------------------------------
   4. Tabulka srovnání. Obal s rámečkem a zaoblením, tabulka bez vlastních rámečků.
      Pod 700 px se každý řádek stohuje do karty (M6).
   --------------------------------------------------------------- */
.zs26 .zs-m-namiru__srovnani {
  overflow: hidden;
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
}

.zs26 .zs-m-namiru__tabulka {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
}

.zs26 .zs-m-namiru__bunka {
  padding: var(--zs-odstup-base) var(--zs-odstup-xl);
  border: 0;
  border-top: 1px solid var(--zs-barva-ramecek-karta);
  background: transparent;
  color: var(--zs-barva-text-tlumeny);
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}

.zs26 .zs-m-namiru__tabulka thead .zs-m-namiru__bunka {
  border-top: 0;
  background: var(--zs-barva-pozadi-sekce);
  color: var(--zs-barva-text-nadpis);
  font-weight: 600;
}

.zs26 .zs-m-namiru__bunka--namiru { color: var(--zs-barva-text-odkaz); }

.zs26 .zs-m-namiru__bunka--popisek {
  width: 29%;
  color: var(--zs-barva-text-nadpis);
  font-weight: 600;
}

/* ---------------------------------------------------------------
   5. Tři karty. Bílé karty se seznamem s fajfkou, třetí na žlutém.
   --------------------------------------------------------------- */
.zs26 .zs-m-namiru__karta { gap: var(--zs-odstup-base); }

.zs26 .zs-m-namiru__karta--zluta {
  border-color: var(--zs-barva-akcent-zluta-plo);
  background: var(--zs-barva-akcent-zluta-plo);
}

.zs26 .zs-m-namiru__karta-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}

.zs26 .zs-m-namiru__seznam {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* odrážka přes ::before, ne přes list-style (šablona Joomly kreslí vlastní obrázky odrážek) */
.zs26 .zs-m-namiru__polozka {
  position: relative;
  padding-left: var(--zs-odstup-xl);
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}

.zs26 .zs-m-namiru__polozka::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-ikona-check);
}

/* ---------------------------------------------------------------
   6. Kolik Na míru stojí. Sdílený .zs-pas-cta, jen krémová plocha a odstup shora.
   --------------------------------------------------------------- */
.zs26 .zs-m-namiru__cena {
  margin: var(--zs-odstup-md) 0 0;
  background: var(--zs-barva-pozadi-sekce-2);
  border-radius: var(--zs-radius-velke);
}

.zs26 .zs-m-namiru__cena-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}

/* ---------------------------------------------------------------
   7. FAQ. Šířku sloupce řeší .zs-obsah--uzky, tady jen odstup pod nadpisem.
   --------------------------------------------------------------- */
.zs26 .zs-m-namiru__faq .zs-h2 { margin: 0 0 var(--zs-odstup-base); }

/* ---------------------------------------------------------------
   8. Pod 700 px: tabulka se stohuje do karet, každá buňka na řádek,
      před hodnotou je název sloupce z data-zs-sloupec (M6).
   --------------------------------------------------------------- */
@media (max-width: 699px) {
  .zs26 .zs-m-namiru__srovnani {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  .zs26 .zs-m-namiru__tabulka,
  .zs26 .zs-m-namiru__tabulka tbody,
  .zs26 .zs-m-namiru__radek,
  .zs26 .zs-m-namiru__bunka { display: block; width: 100%; }

  .zs26 .zs-m-namiru__tabulka thead { display: none; }

  .zs26 .zs-m-namiru__radek {
    margin: 0 0 var(--zs-odstup-md);
    padding: var(--zs-odstup-base) var(--zs-odstup-lg);
    border-radius: var(--zs-radius-karta);
    background: var(--zs-barva-pozadi-sekce);
  }

  .zs26 .zs-m-namiru__bunka {
    padding: 0;
    border-top: 0;
  }

  .zs26 .zs-m-namiru__bunka--popisek {
    width: auto;
    margin: 0 0 var(--zs-odstup-xs);
  }

  .zs26 .zs-m-namiru__bunka[data-zs-sloupec]::before {
    content: attr(data-zs-sloupec) ": ";
    color: var(--zs-barva-text-popisek);
  }
}

/* ---------------------------------------------------------------
   9. Od 700 px. Tlačítka pod kroky vedle sebe.
   --------------------------------------------------------------- */
@media (min-width: 700px) {
  .zs26 .zs-m-namiru__postup-akce {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--zs-odstup-2xl);
  }
}

/* ---------------------------------------------------------------
   10. Od 1024 px. Hero má v PNG 09 fotku užší než rozcestník (478 px z 1180),
       proto jiný poměr sloupců než sdílený 1.7 : 1.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .zs26 .zs-m-namiru__hero {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

/* ===============================================================
   Zápis agenta 09 (24. 8. 2026)
   Převzato beze změny z novy-2026.css: .zs-sekce (+ --svetla, --bez-horniho,
   --bez-dolniho), .zs-obsah (+ --uzky), .zs-mrizka--3/--4, .zs-karta, .zs-karta__foto,
   .zs-karta__telo, .zs-krok + .zs-krok__cislo, .zs-m-postup__nadpis a __kroky,
   .zs-faq + __otazka + __odpoved, .zs-stitek--novinka, .zs-pas-cta + __text + __akce,
   .zs-sticky-lista + __cena, tlačítka, typografie, .zs-skryte; z rozcestníku
   .zs-m-rozcestnik__hero, __hero-text, __akce, __vyhody, __vyhoda, __vyhoda-ikona,
   __hero-foto, __cesty-nadpis, __cesty, __cesta, __sipka.
   Nové (jen tady): .zs-m-namiru__novinka, __hero, __hero-foto, __hero-obrazek,
   __postup-akce, __hlava, __nadpis, __den, __jidlo, __jidlo-foto, __chod, __pruh,
   __pruh-ikona, __srovnani, __tabulka, __radek, __bunka (+ --hlava, --namiru,
   --popisek, --prazdna), __karty, __karta (+ --zluta), __karta-text, __seznam,
   __polozka, __cena, __cena-text, __faq.
   Značky ve fragmentu div.zs26.zs26-namiru (to, co jde do webu):
   OVĚŘIT TEXT: 13 (rozdíly M6 proti desktopu: bod s fajfkou, tlačítko v heru, texty
   kroků, pruh, nadpis a texty tabulky, chybějící karta, sekce navíc, nadpis FAQ,
   řádky sticky lišty; krok 1 a tlačítko mluví o poznámce místo aplikace;
   rodově příznakové "Dosud jste řešili" a "Rádi").
   CENA: 3 (tabulka, cenový pás, sticky lišta, nikde není číslo).
   ODKAZ: 3 (2x /objednat-online-vyjimky potvrzeno Mojmírem, 1x tel: u Zeptat se na cenu, ověřit).
   CHYBÍ: 4 (odpovědi FAQ 2 až 5).
   Mimo fragment, jen v náhledové hlavičce převzaté z _hlavicka.html: 1x OVĚŘIT TEXT
   (promo lišta) a 1x ODKAZ (Podmínky akce).
   =============================================================== */

/* ===== css-partials/52-poradenstvi.css ===== */
/* 52-poradenstvi.css
   Co to je: styly navíc pro stránku 13 Nutriční poradenství (/nutricni-poradenstvi-2026).
   Jen to, co v novy-2026.css chybí. Sdílené komponenty (.zs-sekce, .zs-obsah, .zs-mrizka,
   .zs-krok, .zs-karta, .zs-pas-cta, .zs-faq, .zs-sticky-lista, .zs-obrazek--placeholder)
   a hero rozcestníku (.zs-m-rozcestnik__hero, __hero-text, __drobecky, __akce, __hero-foto)
   se tady NEDEFINUJÍ, jen se na ně staví.
   Zdroj: podklady/13-nutricni-poradenstvi-desktop.png (1440 x 2650),
   podklady/M7-nutricni-poradenstvi-mobil.png (390). Rozměry odměřené z PNG 13:
   obsah 1180 px, hero pruh y 118 až 548 s fotkou 480 x 300 vpravo, dlaždice témat
   3 x 378 px se světle zeleným pozadím bez rámečku, kroky 3 bílé karty s rámečkem,
   karty osob 4 x 276 px s portrétem 276 x 208 nahoře, krémový pás CTA výška 136 px,
   FAQ 920 px na střed (řeší .zs-obsah--uzky).
   Selektory .zs-m-poradna__* jsou tady záměrně znovu: v 32-homepage-b.css jsou
   scopované pod .zs26.zs26-kdo-za-jidlem-stoji, takže na téhle stránce neplatí.
   Přebírám stejný HTML i stejné hodnoty, jen pod .zs26.zs26-poradenstvi.
   Co je záměrně nehotové:
   - portréty osob a fotka hera jsou placeholdery (.zs-obrazek--placeholder)
   - odpovědi FAQ chybí, v PNG jsou položky zavřené
   - text v dlaždicích a krocích je v PNG 16 px, tady drží .zs-popisek (14,5 px) podle kontraktu */

/* ---------------------------------------------------------------
   1. Hero: řádek s telefonem a hodinami pod tlačítky.
   --------------------------------------------------------------- */
.zs26.zs26-poradenstvi .zs-m-poradenstvi__meta {
  display: flex;
  align-items: flex-start;
  gap: var(--zs-odstup-sm);
  color: var(--zs-barva-text-tlumeny);
}

.zs26.zs26-poradenstvi .zs-m-poradenstvi__meta-ikona {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--zs-barva-ikona-vychozi);
}

/* Radek s telefonem a ikona sluchatka v tmave hlavicce (31. 8. 2026).
   Obe barvy jsou tmave zelene, tedy presne barva noveho pozadi. Selektor
   musi nest .zs26-poradenstvi, jinak ho pravidla vys prebiji. */
.zs26.zs26-poradenstvi .zs-sekce--tmava .zs-m-poradenstvi__meta {
  color: var(--zs-barva-paticka-text-tlumeny);
}
.zs26.zs26-poradenstvi .zs-sekce--tmava .zs-m-poradenstvi__meta-ikona {
  color: var(--zs-barva-paticka-text-tlumeny);
}

.zs26.zs26-poradenstvi .zs-m-poradenstvi__meta a {
  color: inherit;
  text-decoration: none;
}

.zs26.zs26-poradenstvi .zs-m-poradenstvi__meta a:hover { text-decoration: underline; }

/* Fotka hera. Do 1. 9. 2026 to byla bílá karta s rámečkem místo fotky, teď je
   ve slotu skupinový snímek tří specialistek (4:3, 1600 x 1200).
   Proč se nekopírují hodnoty z .zs26-rozcestnik: tam se fotka od 1024 px roztahuje
   na výšku textu a ořezává se na zhruba čtverec. Na jednotlivé osobě to funguje,
   tady by to uřízlo krajní dvě ženy. Snímek proto drží vlastní poměr 4:3
   na všech šířkách a od 1024 px se svisle vystředí vedle textu. */
.zs26.zs26-poradenstvi .zs-m-rozcestnik__hero-foto {
  display: flex;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  align-self: center;
  height: auto;
  min-height: 0;
  background: none;
  border: 0;
}

.zs26.zs26-poradenstvi .zs-m-rozcestnik__hero-foto > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}


/* ---------------------------------------------------------------
   2. S čím vám poradíme hned: dlaždice bez rámečku, světle zelené pozadí.
   --------------------------------------------------------------- */
.zs26.zs26-poradenstvi .zs-m-poradenstvi__temata { margin-top: var(--zs-odstup-2xl); }

.zs26.zs26-poradenstvi .zs-m-poradenstvi__tema {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
  height: 100%;
  padding: var(--zs-odstup-xl);
  background: var(--zs-barva-pozadi-sekce);
  border-radius: var(--zs-radius-karta);
}

.zs26.zs26-poradenstvi .zs-m-poradenstvi__tema > * { margin: 0; }

/* ---------------------------------------------------------------
   3. Jak to probíhá: kroky jsou v PNG bílé karty s rámečkem na bílé sekci,
      výchozí .zs-krok má na bílé sekci zelené pozadí.
   --------------------------------------------------------------- */
.zs26.zs26-poradenstvi .zs-m-poradenstvi__kroky { margin-top: var(--zs-odstup-2xl); }

.zs26.zs26-poradenstvi .zs-m-poradenstvi__kroky .zs-krok {
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
}

.zs26.zs26-poradenstvi .zs-m-poradenstvi__kroky .zs-krok > * { margin: 0; }

/* ---------------------------------------------------------------
   4. Kdo vám radí: 4 karty osob, na mobilu 2 sloupce (M7), od 1024 px 4.
      Karta osoby = .zs-m-poradna__karta z modulu 06, hodnoty stejné.
   --------------------------------------------------------------- */
.zs26.zs26-poradenstvi .zs-m-poradenstvi__lide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zs-odstup-base);
  align-items: stretch;
  margin-top: var(--zs-odstup-2xl);
}

.zs26.zs26-poradenstvi .zs-m-poradna__karta {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

/* Portrét v kartě. Do 1. 9. 2026 tu byl placeholder s čárkovaným rámečkem,
   proto border-width. Teď je uvnitř fotka a rámeček je pryč: fotka jde
   od kraje ke kraji karty, oblé rohy řeže .zs-m-poradna__karta (overflow: hidden).
   Poměr 4:5 je tentýž jako u .zs-kd2__osoba-foto v modulu 06.
   Hlavy jsou v řádce a obličeje stejně velké díky ořezu, ne díky object-position:
   vyrezy.py počítá výřez tak, aby hlava byla 24 % výšky rámečku a temeno ve 12 %.
   Kdyby přišly nové fotky, přepočítat tam, ne dolaďovat tady. */
.zs26.zs26-poradenstvi .zs-m-poradna__portret {
  border-radius: 0;
  border: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.zs26.zs26-poradenstvi .zs-m-poradna__portret > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.zs26.zs26-poradenstvi .zs-m-poradna__telo {
  padding: var(--zs-odstup-base);
}

.zs26.zs26-poradenstvi .zs-m-poradna__telo > * { margin: 0; }

.zs26.zs26-poradenstvi .zs-m-poradna__role {
  margin-top: calc(-1 * var(--zs-odstup-xs));
}

.zs26.zs26-poradenstvi .zs-m-poradenstvi__pozn {
  margin: var(--zs-odstup-xl) 0 0;
  color: var(--zs-barva-text-tlumeny);
}

/* ---------------------------------------------------------------
   5. Chcete jít hlouběji: krémový pás, větší nadpis, šipka v tlačítku.
   --------------------------------------------------------------- */
.zs26.zs26-poradenstvi .zs-m-poradenstvi__pas {
  background: var(--zs-barva-pozadi-sekce-2);
}

/* Logo poradny vlevo pred textem. Pas je flex (sekce 10 komponent), na mobilu
   sloupec, od 700 px radek s align-items: center, takze logo samo sedne nad
   text na mobilu a vedle nej na desktopu. Soubor ma alfa kanal, na kremove
   plose nesmi byt bily obdelnik. */
.zs26.zs26-poradenstvi .zs-m-poradenstvi__pas-logo { flex: 0 0 auto; }

.zs26.zs26-poradenstvi .zs-m-poradenstvi__pas-logo img {
  display: block;
  width: auto;
  height: 44px;
}

.zs26.zs26-poradenstvi .zs-m-poradenstvi__pas .zs-pas-cta__text { gap: var(--zs-odstup-sm); }

.zs26.zs26-poradenstvi .zs-m-poradenstvi__pas .zs-pas-cta__text > * { margin: 0; }

.zs26.zs26-poradenstvi .zs-m-poradenstvi__pas-nadpis {
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.015em;
}

.zs26.zs26-poradenstvi .zs-m-poradenstvi__pas .zs-text-vedlejsi {
  max-width: 72ch;
  color: var(--zs-barva-text-tlumeny);
}

.zs26.zs26-poradenstvi .zs-m-poradenstvi__sipka {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}

/* ---------------------------------------------------------------
   6. FAQ. Šířku sloupce řeší .zs-obsah--uzky, tady jen odstup pod nadpisem.
   --------------------------------------------------------------- */
.zs26.zs26-poradenstvi .zs-m-poradenstvi__faq .zs-h2 { margin: 0 0 var(--zs-odstup-base); }

/* ---------------------------------------------------------------
   7. Sticky lišta mobil: místo ceny je telefon jako odkaz.
   --------------------------------------------------------------- */
.zs26.zs26-poradenstvi .zs-sticky-lista__cena .zs-cena {
  text-decoration: none;
  color: var(--zs-barva-text-nadpis);
}

.zs26.zs26-poradenstvi .zs-sticky-lista__cena .zs-popisek { margin: 0; }

/* ---------------------------------------------------------------
   8. Od 700 px: pás CTA má v PNG větší vnitřní odstup.
   --------------------------------------------------------------- */
@media (min-width: 700px) {
  .zs26.zs26-poradenstvi .zs-m-poradenstvi__pas {
    padding: var(--zs-odstup-2xl);
  }

  .zs26.zs26-poradenstvi .zs-m-poradenstvi__pas-logo img { height: 56px; }
}

/* Od 700 px prepina sdileny .zs-pas-cta na radek. Tady to s logem nevychazi:
   na 768 px zbyde na text 430 px, nadpis se zalomi a odstavec ma pet radku.
   Merenim 1. 9. 2026 (sirka pasu 728, logo 148) vyslo, ze radek dava smysl
   az od 1024 px. Do te doby zustava sloupec, logo tedy sedi nad nadpisem. */
@media (min-width: 700px) and (max-width: 1023px) {
  .zs26.zs26-poradenstvi .zs-m-poradenstvi__pas {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--zs-odstup-base);
  }
}


/* ---------------------------------------------------------------
   9. Od 1024 px: čtyři karty osob vedle sebe, tělo karty s větším odstupem.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .zs26.zs26-poradenstvi .zs-m-poradenstvi__lide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--zs-odstup-xl);
  }

  .zs26.zs26-poradenstvi .zs-m-poradna__telo {
    padding: var(--zs-odstup-base) var(--zs-odstup-base) var(--zs-odstup-lg);
  }
}

/* ---------------------------------------------------------------
   Zápis agenta 13 (24. 8. 2026)
   Převzato beze změny z novy-2026.css: .zs-sekce (--svetla), .zs-obsah (--uzky),
   .zs-mrizka--3, .zs-h1-podstranka, .zs-h2, .zs-h4, .zs-perex, .zs-popisek,
   .zs-text-vedlejsi, .zs-tlacitko (--primarni, --sekundarni, --male), .zs-krok,
   .zs-krok__cislo, .zs-karta, .zs-karta__telo, .zs-obrazek--placeholder, .zs-pas-cta
   (__text, __akce), .zs-faq (__otazka, __odpoved), .zs-sticky-lista (__cena),
   hero rozcestníku .zs-m-rozcestnik__hero, __hero-text, __drobecky, __akce, __hero-foto.
   Převzato z modulu 06 (HTML i hodnoty, znovu scopované): .zs-m-poradna__karta,
   __portret, __telo, __role.
   Nové: .zs-m-poradenstvi__meta, __meta-ikona, __temata, __tema, __kroky, __lide,
   __pozn, __pas, __pas-nadpis, __pas-logo, __sipka, __faq.
   Nepoužito z modulu 06: blok „Nutriční poradenství máte v ceně“ (.zs-m-poradna__nabidka),
   v PNG 13 není, jeho obsah nese hero perex a řádek s telefonem.
   Značky v nahled/nutricni-poradenstvi.html (fragment div.zs26-poradenstvi):
   OVĚŘIT TEXT 7, ODKAZ 2, CHYBÍ 6 (foto hera, portrét Šimkové, tři portréty
   v jedné značce, tři odpovědi FAQ), CENA 0 (stránka nemá ceny). */

/* 2026-08-25 loga medii z Figmy (komponenty 67:4) v modulu 05: obrazek v boxu, vyska omezena, ctvercova loga mensi */
.zs26 .zs-m-dukazy__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 36px; object-fit: contain; }
.zs26 .zs-m-dukazy__logo img[src*="blesk-pro-zeny"], .zs26 .zs-m-dukazy__logo img[src*="zena-in"] { max-height: 48px; } /* Joomla prepisuje priponu na .webp, proto src*= */

/* ===== css-partials/33-kategorie-v2.css ===== */
/* 33-kategorie-v3.css
   Co to je: styly pro modul 02 "Čím právě žijete?" ve verzi 3 (26. 8. 2026).
   Jedna mřížka šesti stejně velkých karet, žádný druhý ani třetí tvar v bloku.
   Nahrazuje 33-kategorie-v2.css, který kreslil čtyři karty, bílý pás a proužek.
   Všechno scopnuté obalem .zs26.zs26-kategorie (specificita 0,3,0), takže to
   přebíjí sdílené .zs-karta z 20-komponenty.css, aniž by se na něj sahalo.
   Stránka /programy nese starou kopii bloku (.zs-m-kategorie__doplnky
   z 31-homepage-a.css) a tenhle partial se jí netýká.

   Karta: fotka nahoře (232 px), pod ní PLNÁ deska barva/pozadi/tmave.
   Text tedy neleží v přechodu přes fotku a kontrast je daný tokenem:
   #F3FDEE na #1F3F2A = 11,2:1, tlumený text #D5DACC na #1F3F2A = 8,0:1
   (dopočet WCAG 2.2, skript kontrast.py, 26. 8. 2026). Ve verzi 2 byl
   nejhorší případ 6,1:1 a závisel na tom, co je zrovna na fotce.

   Zdroj rozměrů: Figma ZS-wireframe, stránka 60, komponenta Karta cesty (v3).
   Desktop 377x480 (3 sloupce v 1180 px), mobil řádková karta 358x96.

   Breakpointy drží zvyklost balíku: 1024 px (tři sloupce) a 700 px (řádková
   karta). Mezi 700 a 1023 px jsou dva sloupce svislých karet.

   Pravidla: každý selektor začíná .zs26.zs26-kategorie, barvy a odstupy jen
   přes var(--zs-...), žádné stíny, žádný em dash. */

/* ---------------------------------------------------------------
   1. Hlavička sekce
   --------------------------------------------------------------- */
.zs26.zs26-kategorie .zs-h2 { margin: 0; }
.zs26.zs26-kategorie .zs-m-kategorie__perex {
  max-width: 68ch;
  margin: var(--zs-odstup-sm) 0 var(--zs-odstup-xl);
}

/* ---------------------------------------------------------------
   2. Mřížka. Mobil jeden sloupec (řádkové karty), od 700 dva, od 1024 tři.
   --------------------------------------------------------------- */
.zs26.zs26-kategorie .zs-m-kategorie__mrizka {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zs-odstup-md);
  margin: 0;
}

/* ---------------------------------------------------------------
   3. Karta. Celá je odkaz, proto explicitní color a text-decoration.
      Mobilní tvar je výchozí: řádek fotka + text + šipka.
   --------------------------------------------------------------- */
.zs26.zs26-kategorie .zs-k3 {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-md);
  min-height: 96px;
  padding: var(--zs-odstup-md);
  overflow: hidden;
  background: var(--zs-barva-pozadi-tmave);
  border-radius: var(--zs-radius-karta);
  color: var(--zs-barva-text-na-tmavem);
  text-decoration: none;
}

.zs26.zs26-kategorie .zs-k3__foto {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: var(--zs-radius-male);
  background: var(--zs-barva-pozadi-jemne);
}

.zs26.zs26-kategorie .zs-k3__obrazek {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
}

/* Ořez po jednotlivých fotkách, přepsáno 30. 8. 2026 na novou sadu od Marka.
   Sada je 1536 x 1024, tedy 3/2. Desktopové okno je 364 x 232 (1,57), takže se
   svisle ořízne jen 4 %, druhá souřadnice skoro nic nedělá. Mobilní okno je ale
   čtverec 72 x 72, tam se ořízne třetina šířky a rozhoduje první souřadnice.
   Přepočet: aby byl obličej ve výřezu na fraction f šířky, je X = (f - 1/3) * 300.
   Hodnoty odečtené ze zdrojových souborů 30. 8. 2026, cíl je mít obličej v okně. */
.zs26.zs26-kategorie .zs-k3__obrazek--sportuji { object-position: 65% 30%; }
.zs26.zs26-kategorie .zs-k3__obrazek--nestiham { object-position: 100% 30%; }
.zs26.zs26-kategorie .zs-k3__obrazek--hubnu { object-position: 56% 25%; }
.zs26.zs26-kategorie .zs-k3__obrazek--jim-jinak { object-position: 56% 30%; }
.zs26.zs26-kategorie .zs-k3__obrazek--nevim { object-position: 26% 30%; }
/* Můj výběr je pohled shora na krabičky, nemá obličej, střed sedí. */
.zs26.zs26-kategorie .zs-k3__obrazek--muj-vyber { object-position: 50% 50%; }

.zs26.zs26-kategorie .zs-k3__deska {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.zs26.zs26-kategorie .zs-k3__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.zs26.zs26-kategorie .zs-k3__nazev {
  display: block;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-na-tmavem);
}

.zs26.zs26-kategorie .zs-k3__detail {
  display: block;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  color: var(--zs-barva-paticka-text-tlumeny);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zs26.zs26-kategorie .zs-k3__pata {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-sm);
  min-width: 0;
}

.zs26.zs26-kategorie .zs-k3__cena {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--zs-barva-text-na-tmavem);
}

.zs26.zs26-kategorie .zs-k3__doplnit {
  padding: 0 4px;
  background: var(--zs-barva-akcent-zluta-plo);
  border-radius: var(--zs-radius-male);
  color: var(--zs-barva-text-nadpis);
}

/* Štítek sedí na fotce jen ve svislé kartě; v řádkové by se na 72 px nevešel. */
.zs26.zs26-kategorie .zs-k3__stitek { display: none; }

/* Na mobilu je akcí celá karta, proto šipka a žádné tlačítko. */
.zs26.zs26-kategorie .zs-k3__tlacitko { display: none; }
.zs26.zs26-kategorie .zs-k3__sipka {
  flex: 0 0 auto;
  color: var(--zs-barva-text-na-tmavem);
}

/* ---------------------------------------------------------------
   4. Od 700 px svislá karta: fotka nahoře, plná deska dole.
   --------------------------------------------------------------- */
@media (min-width: 700px) {
  .zs26.zs26-kategorie .zs-m-kategorie__mrizka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--zs-odstup-xl);
  }

  .zs26.zs26-kategorie .zs-k3 {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 480px;
    padding: 0;
  }

  .zs26.zs26-kategorie .zs-k3__foto {
    width: auto;
    height: 232px;
    border-radius: 0;
  }

  .zs26.zs26-kategorie .zs-k3__deska {
    justify-content: space-between;
    gap: var(--zs-odstup-md);
    padding: var(--zs-odstup-xl);
  }

  .zs26.zs26-kategorie .zs-k3__text { gap: 6px; }

  .zs26.zs26-kategorie .zs-k3__nazev {
    font-size: 26px;
    line-height: 1.23;
  }

  .zs26.zs26-kategorie .zs-k3__detail {
    font-size: 14.5px;
    line-height: 1.52;
  }

  .zs26.zs26-kategorie .zs-k3__pata {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--zs-odstup-md);
  }

  .zs26.zs26-kategorie .zs-k3__cena {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1.5;
  }

  /* Štítek se vrací na fotku, u její dolní hrany. */
  .zs26.zs26-kategorie .zs-k3__stitek {
    position: absolute;
    bottom: var(--zs-odstup-md);
    left: var(--zs-odstup-md);
    display: inline-flex;
    margin: 0;
  }

  /* Akce je tlačítko, ne šipka. */
  .zs26.zs26-kategorie .zs-k3__tlacitko { display: inline-flex; }
  .zs26.zs26-kategorie .zs-k3__sipka { display: none; }
}

/* ---------------------------------------------------------------
   5. Od 1024 px tři sloupce, tedy dvě řady po třech.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .zs26.zs26-kategorie .zs-m-kategorie__mrizka {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------
   6. Stavy. Ve verzi 2 karta žádný neměla, takže nebylo poznat,
      že je klikací. Rámeček fokusu je z tokenu, ne z prohlížeče.
   --------------------------------------------------------------- */
@media (hover: hover) {
  .zs26.zs26-kategorie .zs-k3:hover .zs-k3__obrazek { transform: scale(1.03); }
  .zs26.zs26-kategorie .zs-k3:hover .zs-tlacitko--sekundarni { background: var(--zs-barva-akce-sekundarni-hover); }
}

.zs26.zs26-kategorie .zs-k3__obrazek { transition: transform 0.2s ease-out; }

.zs26.zs26-kategorie .zs-k3:focus-visible {
  outline: 3px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .zs26.zs26-kategorie .zs-k3__obrazek { transition: none; }
  .zs26.zs26-kategorie .zs-k3:hover .zs-k3__obrazek { transform: none; }
}

/* 34-jak-to-funguje-v2.css
   Co to je: verze 2 sekce Jak to funguje na homepage. Krok dostane fotku přes celou
   šířku karty a číslo v kolečku, které přesahuje spodní hranu fotky. Pod mřížkou
   je tlačítko a drobná poznámka. Zadání Marka 26. 8. 2026, předloha je sekce
   "Here's how Factor works" na factor75.com (screenshot v zadání).

   Proč vlastní partial a ne zásah do 20-komponenty.css: .zs-krok je sdílená
   komponenta, používá ji i /program-na-miru (51-na-miru.css) a /nutricni-poradenstvi
   (52-poradenstvi.css). Tam fotky nejsou a mít je nemají. Modifikátor .zs-krok--foto
   proto přidává, nepřepisuje, a všechno je pod obalem .zs26-jak-to-funguje.
   V novy-2026.css je tenhle soubor připojený na konec, takže smí přebít 20-komponenty.

   Ořez fotek dělá aspect-ratio 3/2 a object-fit: cover na originálech 964 x 500,
   které už na webu jsou. Nevznikají nové soubory ani druhá kopie fotek.

   30. 8. 2026: fotka kroku 1 vyměněná za /images/zs26/foto/jak-1-vyber-programu.jpg
   (Marek). Na displeji notebooku je mřížka programů z faceliftu, ne starý web.
   Zdroj je rovnou 3/2, takže ho aspect-ratio níž neořízne.

   Záměrně nehotové:
   - tlačítko je čtvrté limetkové na homepage (hlavička, hero, sticky lišta, tady).
     Pravidlo "na jedné obrazovce jen jedno primární" z tokenů tím padá vědomě,
     protože je to čtyřikrát tatáž akce a tatáž barva je srozumitelnější než čtvrtý odstín
*/

/* ---------------------------------------------------------------
   1. Krok s fotkou. Karta bez vnitřního odsazení, fotka sedí na její hranu.
      overflow: hidden zaoblí horní rohy fotky podle rádiusu karty.
   --------------------------------------------------------------- */
.zs26.zs26-jak-to-funguje .zs-krok--foto {
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-radius: var(--zs-radius-karta);
}

.zs26.zs26-jak-to-funguje .zs-krok__foto {
  position: relative;
  margin: 0;
  line-height: 0;
}
.zs26.zs26-jak-to-funguje .zs-krok__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* Dodávka: řidič je v originálu vlevo od středu, střed ořezu se posune, ať zůstane
   v záběru i žlutá plocha s logem. Měřeno na originálu 964 x 500. */
.zs26.zs26-jak-to-funguje .zs-krok__foto img[src*="rozvoz_ridic"] { object-position: 42% 50%; }

/* ---------------------------------------------------------------
   2. Číslo. Kolečko z 20-komponenty.css, tady se z něj stane odznak na fotce.
      Bílý prstenec místo stínu, aby se oddělil od fotky (stíny jsou v balíku zakázané).
   --------------------------------------------------------------- */
.zs26.zs26-jak-to-funguje .zs-krok--foto .zs-krok__cislo {
  position: absolute;
  bottom: 0;
  left: var(--zs-odstup-xl);
  width: 44px;
  height: 44px;
  border: 4px solid var(--zs-barva-pozadi-karta);
  transform: translateY(50%);
  font-size: 18px;
}

/* ---------------------------------------------------------------
   3. Tělo kroku. Horní odsazení počítá s tím, že kolečko přesahuje o polovinu výšky.
   --------------------------------------------------------------- */
.zs26.zs26-jak-to-funguje .zs-krok__telo {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
  padding: calc(var(--zs-odstup-xl) + var(--zs-odstup-md)) var(--zs-odstup-xl) var(--zs-odstup-xl);
}
.zs26.zs26-jak-to-funguje .zs-krok__telo > * { margin: 0; }

/* ---------------------------------------------------------------
   4. Akce pod mřížkou. Tlačítko a pod ním podmínka změny, ať se na ni nemusí klikat do FAQ.
   --------------------------------------------------------------- */
.zs26.zs26-jak-to-funguje .zs-m-postup__akce {
  margin: var(--zs-odstup-2xl) 0 0;
  text-align: center;
}
.zs26.zs26-jak-to-funguje .zs-m-postup__poznamka {
  margin: var(--zs-odstup-md) 0 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}

/* ---------------------------------------------------------------
   5. Mobil. Na jednom sloupci je fotka přes celou šířku obrazovky, 3/2 by ji
      vytáhlo přes půl displeje. 16/9 nechá na kroky vidět bez posouvání.
   --------------------------------------------------------------- */
@media (max-width: 699px) {
  .zs26.zs26-jak-to-funguje .zs-krok__foto img { aspect-ratio: 16 / 9; }
}

/* ===== css-partials/35-hero-v2.css ===== */
/* 35-hero-v2.css
   Co to je: hero homepage podle Figmy ZS-wireframe, uzel 82:27 (get_design_context 26. 8. 2026).
   Tmavě zelený pás, limetkový nadtitulek a druhý řádek nadpisu, fotka vpravo s velkým
   zaoblením, uvnitř tmavého pásu dva světlé ostrůvky: widget PSČ a odpověď na PSČ.
   Zadání Marka 26. 8. 2026: „udělej to podle grafiky, ale zkontroluj čitelnost".

   Rozvržení a stavba zůstávají z 31-homepage-a.css, tenhle partial přidává tmavou
   variantu a mění proporce sloupců. Je připojený na konec novy-2026.css, takže smí
   přebíjet 10-zaklad a 20-komponenty.

   ------------------------------------------------------------------
   Kontrola čitelnosti (kontrast-hero.py, WCAG 2.2, prahy 4,5:1 text, 3:1 velký text
   a netextové prvky). Tmavá předloha prošla 18 z 18. Přesto se tady od Figmy
   vědomě odchyluje na čtyřech místech, protože kontrast není celá čitelnost:
   ------------------------------------------------------------------

   1. DRUHÝ ŘÁDEK NADPISU. Figma má #9CBD2A (5,40:1). Ta barva není v tokenech,
      je to jednorázový odstín. Tady je --zs-barva-akce-primarni #AED800 (7,00:1),
      tedy táž limetka jako nadtitulek a tlačítko. O půldruhého stupně vyšší kontrast
      a o jednu netokenovanou barvu míň.

   2. BÍLÁ NA TMAVÉ. Figma dává popisku ceny a třem ze čtyř benefitů čistou bílou
      #FFFFFF (11,65:1), perexu a nadpisu #F3FDEE (11,15:1). Čistá bílá na tmavém
      podkladu se roztéká (halation), nejvíc u astigmatismu, a je to nejtvrdší možná
      dvojice. Tady drží systém tmavé sekce z 10-zaklad.css: nadpisy #F3FDEE,
      doprovodný text #D5DACC (8,17:1). Pořád vysoko nad prahem, jen bez oslnění.

   3. FAJFKY U BENEFITŮ. V exportu z Figmy mají tři #AED800 a čtvrtá #9CC200
      (hover odstín). Tady mají všechny čtyři --zs-barva-akce-primarni.

   4. SEKUNDÁRNÍ TLAČÍTKO. Figma má „Vyzkoušet na 2 dny" jako plnou bílou pilulku.
      Bílá plocha na tmavém pozadí má kontrast hranice 11,65:1, limetkové primární
      tlačítko 7,00:1. Sekundární akce by tedy křičela víc než primární a obrátila
      hierarchii, kterou popisuje sama komponenta Tlačítko ve Figmě (uzel 72:100):
      „Jedna primární akce na obrazovku" a „na fotce nebo tmavém podkladu Textové
      s bílým textem". Tady je proto obrys: průhledné pozadí, světlý rámeček
      a světlý text (11,15:1), na hover se plocha obrátí.

   ------------------------------------------------------------------
   Dvě věci, které předloha neřeší a bez nich by tmavý hero byl horší než dnešní:
   ------------------------------------------------------------------

   5. FOKUSOVÝ PRSTENEC. Token --zs-barva-stav-fokus #2F6FE0 má na tmavě zelené
      2,48:1, což je pod prahem 3:1 (WCAG 2.4.11 a 1.4.11). Na bílé má 4,70:1
      a projde. V tmavém pásu se proto prstenec přebarvuje na --zs-barva-text-na-tmavem
      (11,15:1) a uvnitř světlých ostrůvků se vrací zpátky na modrou.

   6. SVĚTLÉ OSTRŮVKY. .zs-sekce--tmava v 10-zaklad.css barví text i všechny odkazy
      světle. Uvnitř bílého widgetu PSČ a světlé odpovědi na PSČ (ta se dokresluje
      skriptem ze složky 27) by světlý text zmizel. Ostrůvky si proto barvu textu
      berou zpátky. Nebyla to teorie: první nasazení na test mělo v odpovědi
      pro PSČ 602 00 text tlačítka #F3FDEE na krémovém boxu, tedy 1,02:1.
*/

/* ---------------------------------------------------------------
   1. Proporce sloupců podle Figmy: obsah 1180 = text 504 + mezera 56 + vizuál 620.
      Poměrem fr místo pevných pixelů, ať se to chová i mezi 1024 a 1180 px.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .zs26.zs26-hero .zs-m-hero__mrizka {
    grid-template-columns: minmax(0, 504fr) minmax(0, 620fr);
    column-gap: 56px;
  }
}

/* Fotka má ve Figmě velké zaoblení (24 px), ne kartové (16 px). */
.zs26.zs26-hero .zs-m-hero__foto { border-radius: var(--zs-radius-velke); }

/* ---------------------------------------------------------------
   1b. Fotka nesmi urcovat vysku hera.

      Od 1024 px ji 31-homepage-a.css dava align-self: stretch s poznamkou
      "fotka drzi stejnou vysku jako textovy sloupec". Nedrzela. <img> uvnitr
      je v toku a jeho vlastni pomer se pocita do vysky radku mrizky, ktere
      fotka pres obe presahuje, takze vysku hera urcovala fotka, ne text.

      Zmereno na webvyvoj2 31. 8. 2026 na 1440 x 726: hero-uvodni.webp je
      1122 x 1402, tedy pomer 0,800. Pri sirce sloupce 598 px z toho vyslo
      747 px, zatimco textovy sloupec potrebuje 678. Hero merilo 875 px misto
      805 z Figmy (uzel 82:27, okno fotky 620 x 677, pomer 0,916) a pod PSC
      widgetem zbylo 69 px prazdneho tmaveho pasu.

      Reseni: obrazek ven z toku. Kontejner tim nema vlastni vysku, stretch
      ho natahne presne na vysku textoveho sloupce a object-fit: cover orizne.
      Pod 1024 px se nemeni nic, tam ma fotka pevny pomer (16/10, pod 700 4/3).
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .zs26.zs26-hero .zs-m-hero__foto { position: relative; }
  .zs26.zs26-hero .zs-m-hero__obrazek { position: absolute; inset: 0; }
}

/* ---------------------------------------------------------------
   1c. Plynula svisla vysparovani hera. Jen od 1024 px.

      Marek 31. 8. 2026: "padding sekce udelej dle best practice, at to vypada
      dobre." Sdilena .zs-sekce ma na desktopu pevnych 64 px nahore i dole
      (--zs-odstup-sekce) a Figma 82:27 predepisuje totez. Pevna hodnota je ale
      spatne prave u hera: je to jediny blok, ktery se cely odehrava nad prehybem,
      a na kratkem okne tech 128 px vzduchu ubira misto obsahu.

      clamp(40px, 6vh, 64px) resi obojim smerem. Na 726 px vysokem okne da 44 px
      a hero se zkrati o 40 px, na 1067 px a vys da plnych 64 px z predlohy.
      Strop je 64, takze se od Figmy nikdy neodchyli nahoru, jen dolu a jen tam,
      kde na to neni misto.

      Proc az od 1024 px: pod tim ma prohlizec na mobilu pohyblivou lisu URL,
      takze by se 6vh menilo pri scrollovani a blok by poskakoval. Mobil drzi
      pevnych --zs-odstup-sekce-mobil (44 px).

      Vedomy rozchod s predlohou, nevracet zpatky jako chybu.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .zs26.zs26-hero .zs-sekce { padding-block: clamp(40px, 6vh, 64px); }
}

/* ---------------------------------------------------------------
   2. Tmavý pás: nadtitulek a druhý řádek nadpisu limetkově.
      .zs-sekce--tmava jinak sráží .zs-text-vedlejsi na tlumenou, proto sem.
   --------------------------------------------------------------- */
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__nadtitulek,
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__akcent,
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__check { color: var(--zs-barva-akce-primarni); }

/* ---------------------------------------------------------------
   3. Sekundární tlačítko v tmavém pásu: obrys místo bílé plochy.

      Proč !important: novy-2026.css má za partialy ručně psaný blok
      z 24. 8. 2026, který opakuje pravidla tlačítek s !important, protože
      šablona (content2024.css, řádky 1004 a 1015) vynucuje !important
      na button, input a textarea. Bez !important tenhle blok přebije
      i selektor se čtyřmi třídami. Změřeno v náhledu 26. 8.: bez něj
      zůstalo tlačítko bílé (rgb(255,255,255)).

      Primární a tmavé tlačítko tady pravidlo nepotřebují: ten blok jim
      barvu textu drží sám a přebíjí i .zs-sekce--tmava a, které by jim
      jinak dalo světlý text na limetce, tedy 1,66:1.
   --------------------------------------------------------------- */
.zs26.zs26-hero .zs-sekce--tmava .zs-tlacitko--sekundarni {
  background: transparent !important;
  border-color: var(--zs-barva-text-na-tmavem) !important;
  color: var(--zs-barva-text-na-tmavem) !important;
}
.zs26.zs26-hero .zs-sekce--tmava .zs-tlacitko--sekundarni:hover {
  background: var(--zs-barva-text-na-tmavem) !important;
  color: var(--zs-barva-text-nadpis) !important;
}

/* ---------------------------------------------------------------
   4. Benefity. 31-homepage-a.css je od 700 px sází do dvou stejně širokých
      sloupců. Textový sloupec je nově užší (504 z 1180 místo poloviny),
      takže „Nutriční poradenství v ceně" se lámalo na dva řádky, zatímco
      sousední benefit měl řádek jeden. Figma 82:47 má obtékání, ne mřížku:
      položky se řadí za sebe a zalomí se, až když se nevejdou. Tím jsou
      všechny čtyři na jednom řádku textu.
   --------------------------------------------------------------- */
.zs26.zs26-hero .zs-m-hero__benefity {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-sm) var(--zs-odstup-lg);
}

/* 31. 8. 2026: od 1024 px zpatky do dvou sloupcu.
   Duvod, proc tu byl obtekany flex, padl s claim-checkem: "Doprava zdarma"
   se zmenila na "Doprava v cene celodennich programu" (jina session, 31. 8.).
   Ten text meri 322 px a se sousednim 230 px se do sloupce 486 px nevejde,
   takze obtekani rozhodilo ctyri benefity do tri nesourodych radku,
   1 + 1 + 2, a vysku pasu z 56 na 88 px. Zmereno na 1440 x 726.
   Mrizka 2 x 2 drzi tvar z Figmy 82:47 i tehdy, kdyz se jedna polozka lame
   na dva radky. Pod 1024 px zustava obtekani, tam je sloupec na celou sirku. */
@media (min-width: 1024px) {
  .zs26.zs26-hero .zs-m-hero__benefity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
.zs26.zs26-hero .zs-m-hero__benefit { align-items: center; }
.zs26.zs26-hero .zs-m-hero__check { margin-top: 0; }

/* ---------------------------------------------------------------
   5. Fokus. Na tmavém světlý prstenec, uvnitř světlých ostrůvků zpátky modrý.
   --------------------------------------------------------------- */
.zs26.zs26-hero .zs-sekce--tmava :focus-visible { outline-color: var(--zs-barva-text-na-tmavem); }
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__psc :focus-visible,
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__psc-odpoved :focus-visible { outline-color: var(--zs-barva-stav-fokus); }

/* ---------------------------------------------------------------
   6. Světlé ostrůvky uvnitř tmavého pásu: widget PSČ a odpověď na PSČ.
      Odpověď dokresluje zs26-rozvoz.js ze složky 27, její .zs-rozvoz__detail
      nemá vlastní barvu a dědila by světlou ze sekce.
   --------------------------------------------------------------- */
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__psc,
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__psc-odpoved { color: var(--zs-barva-text-zakladni); }
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__psc-odpoved .zs-rozvoz__verdikt { color: var(--zs-barva-text-nadpis); }

/* Odkazy v ostrůvcích. Platí i na .zs-tlacitko bez varianty: zs26-rozvoz.js dává
   vedlejším východům ("Napište nám", "Podívat se na mapu") jen třídu .zs-tlacitko,
   ta nemá vlastní barvu a dědila by světlou z .zs-sekce--tmava a. Změřeno na testu
   26. 8. na odpovědi pro PSČ 602 00: text tlačítka vyšel #F3FDEE na krémovém boxu,
   tedy 1,02:1. S barvou odkazu je to 5,4 až 6,4:1 na všech čtyřech podkladech,
   které box umí (jemná, ok, pozor, chyba). */
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__psc a,
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__psc-odpoved a { color: var(--zs-barva-text-odkaz); }

/* Kdyby v ostrůvku skončilo sekundární tlačítko, vrátit mu vzhled pro světlý podklad.
   Obrys z bodu 3 je určený jen pro tmavý pás. */
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__psc .zs-tlacitko--sekundarni,
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__psc-odpoved .zs-tlacitko--sekundarni {
  background: var(--zs-barva-pozadi-karta) !important;
  border-color: var(--zs-barva-akce-sekundarni-ramecek) !important;
  color: var(--zs-barva-text-nadpis) !important;
}
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__psc .zs-tlacitko--sekundarni:hover,
.zs26.zs26-hero .zs-sekce--tmava .zs-m-hero__psc-odpoved .zs-tlacitko--sekundarni:hover {
  background: var(--zs-barva-akce-sekundarni-hover) !important;
}

/* 36-dukazy-v2.css, obsah ve verzi 3 (26. 8. 2026 odpoledne)
   Co to je: pás čtyř čísel na konci homepage, modul 05.

   Historie souboru, ať je jasné, proč se jmenuje dukazy a kreslí jen čísla:
   - v1 (21. 8.) tmavý pruh s čísly plus bílá sekce s logy médií
   - v2 (26. 8. dopoledne) jedna světle zelená plocha, čísla, sjednocená loga
     a vytažený důkaz z Černých ovcí
   - v3 (26. 8. odpoledne) Marek: "tohle je hrozne slabe.. tu sekci s logy
     uplne vyhodime... a bude to odkaz jen v paticce" a pás čísel "prehodme
     tohle uplne nakonec pod caste dotazy"

   Zbyla proto jen mřížka čísel a modul se v Joomle přesunul na ordering 10,
   tedy za FAQ. Plocha je krémová, protože FAQ nad ním je světle zelené
   a dvě stejné plochy vedle sebe splynou v jednu.

   Vyhozené selektory .zs-d2__media, __sloupec, __nadpis, __loga, __logo,
   __odkaz, __sipka, __karta a __poznamka. Nikdo jiný je nepoužíval, celá
   jmenná oblast .zs-d2 patří tomuhle modulu. Původní verze zůstává
   v 36-dukazy-v2.css.pred-v3, kdyby se loga měla vrátit.

   Pravidla: každý selektor začíná .zs26.zs26-dukazy, barvy a odstupy jen přes
   var(--zs-...), žádné stíny, žádný hex kromě #fff, breakpointy 700 a 1024 px. */

/* ---------------------------------------------------------------
   1. Čísla. Mobil 2 x 2, od 700 px čtyři vedle sebe.
   --------------------------------------------------------------- */
.zs26.zs26-dukazy .zs-d2__fakta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zs-odstup-xl) var(--zs-odstup-base);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zs26.zs26-dukazy .zs-d2__fakt { text-align: center; }

.zs26.zs26-dukazy .zs-d2__cislo {
  margin: 0 0 var(--zs-odstup-xs);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--zs-barva-text-nadpis);
}

.zs26.zs26-dukazy .zs-d2__popis {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--zs-barva-text-popisek);
}

/* ---------------------------------------------------------------
   2. Od 700 px čtyři čísla v řadě.
   --------------------------------------------------------------- */
@media (min-width: 700px) {
  .zs26.zs26-dukazy .zs-d2__fakta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 37-kdo-za-jidlem-v2.css
   Co to je: verze 2 modulu 06 na homepage. Zadání Marka 26. 8. 2026:
   sekce nebudí důvěru, chybí příběh zakladatelky a chybí kde se vaří.

   Skladba: jedna sekce, tři patra v pořadí kdo, kde, kdo vaří.
   Verze 1 měla vedle sebe kartu poradkyně a reklamní blok o poradenství,
   pod tím druhý nadpis a čtyři hostující šéfkuchaře. Byla to dvě témata
   v jedné sekci a to hlavní (kdo jsme) v ní nebylo vůbec.

   Předloha: CookUnity staví celou sekci na jmenovaných kuchařích z vlastního
   provozu (tmavý pás portrétů se jménem a rolí), Factor dává dietoložku
   do skutečné kuchyně. Provoz se u obou ukazuje jako pozadí za člověkem,
   ne jako samostatná sekce "naše kuchyně". Screenshoty ve složce
   03 Web, audit a návrh oprav/Důkazy/screenshoty/svet/cookunity a /factor.

   Proč vlastní partial: třídy .zs-m-poradna__* a .zs-m-kuchari__* v
   32-homepage-b.css používá i /nutricni-poradenstvi (52-poradenstvi.css)
   a stránka Na míru. Tenhle soubor je nesahá a zavádí vlastní oblast .zs-kd.
   Připojuje se na konec novy-2026.css, takže přebíjí starší partialy.

   Karta má nejvýš čtyři prvky (fotka, jméno, pozice, jedna věta).
   Bloky v řadě jsou stejně vysoké. Žádné stíny.

   Pravidla: každý selektor začíná .zs26.zs26-kdo-za-jidlem-stoji, barvy
   a odstupy jen přes var(--zs-...), žádný hex kromě #fff, breakpointy
   700 a 1024 px. */

/* ---------------------------------------------------------------
   0. Společné pro sekci.
   --------------------------------------------------------------- */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__perex {
  max-width: 780px;
  margin: var(--zs-odstup-md) 0 var(--zs-odstup-2xl);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__podnadpis {
  margin: var(--zs-odstup-xs) 0 var(--zs-odstup-lg);
}

/* ---------------------------------------------------------------
   1. Patro 1, zakladatelka. Bílá deska na krémové ploše, fotka sedí
      na její hranu (žádné vnitřní odsazení kolem fotky).
   --------------------------------------------------------------- */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__pribeh {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-velke);
  background: var(--zs-barva-pozadi-karta);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__portret {
  margin: 0;
  line-height: 0;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__portret img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__vypraveni {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-base);
  padding: var(--zs-odstup-xl);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__vypraveni > * { margin: 0; }

/* Nadpis příběhu je věta, ne titulek, proto o kus větší než .zs-h3. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__nadpis {
  font-size: clamp(21px, 2.1vw, 26px);
  line-height: 1.25;
}

/* Měřítko řádku: přes 75 znaků se dlouhý text čte hůř, na 1440 px by
   sloupec vyšel na zhruba 95 znaků. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__text {
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--zs-barva-text-zakladni);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__podpis {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__jmeno {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--zs-barva-text-nadpis);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__role {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--zs-barva-text-popisek);
}

/* Tři fakta jako řádky se linkou. Čte se to jako list vlastností,
   což je přesně to, co má nedůvěřivý člověk dostat. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__fakta {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--zs-barva-ramecek-karta);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__fakt {
  padding: var(--zs-odstup-md) 0;
  border-bottom: 1px solid var(--zs-barva-ramecek-karta);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}

/* Zbytek bloku o poradenství, který se z homepage vypustil.
   Plná verze je na /nutricni-poradenstvi. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__poradna {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zs-odstup-sm) var(--zs-odstup-base);
  padding: var(--zs-odstup-md) var(--zs-odstup-base);
  border-radius: var(--zs-radius-male);
  background: var(--zs-barva-pozadi-sekce);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-zakladni);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__odkaz {
  font-weight: 600;
  color: var(--zs-barva-text-odkaz);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__odkaz:hover { text-decoration: none; }

/* ---------------------------------------------------------------
   2. Patro 2, kde se vaří. Tři dlaždice, u každé fotka a jedna věta.
   --------------------------------------------------------------- */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__provoz,
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__kuchari {
  margin-top: var(--zs-odstup-sekce-mobil);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__mrizka {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__misto {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
  height: 100%;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__misto > * { margin: 0; }

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__foto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--zs-radius-karta);
  margin-bottom: var(--zs-odstup-xs);
}
/* Placeholder musí mít stejnou krabičku jako fotka, ať se doplněním
   nerozsype řádek. .zs-obrazek--placeholder má 4/3, tady platí 3/2. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__foto.zs-obrazek--placeholder {
  aspect-ratio: 3 / 2;
  height: auto;
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__stitky {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-sm);
  margin: var(--zs-odstup-lg) 0 0;
  padding: 0;
  list-style: none;
}
/* Sdílený .zs-stitek má 8 px po stranách. Na verzálkách s letter-spacingem
   je to na první písmeno málo, "IFS" se opticky lepilo na rámeček. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__stitky .zs-stitek {
  min-height: 28px;
  padding: 0 var(--zs-odstup-md);
}

/* ---------------------------------------------------------------
   3. Patro 3, kdo vaří. Nahoře naši, pod nimi tenký řádek hostujících.
      Hierarchie je záměrná: hostující pomáhají s recepturami a na akcích,
      nevaří denně, a tak se ani nesmějí formulovat.
   --------------------------------------------------------------- */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__nasi {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Karta je na šířku: portrét vlevo, čtyři prvky vpravo. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__karta {
  flex-direction: row;
  align-items: center;
  gap: var(--zs-odstup-lg);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__karta .zs-karta__telo > * { margin: 0; }

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__portret-maly {
  flex: 0 0 118px;
  width: 118px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--zs-radius-karta);
  font-size: 12.5px;
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__pozice { margin-bottom: var(--zs-odstup-xs); }

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__vyjimky {
  margin: var(--zs-odstup-base) 0 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__hoste {
  margin-top: var(--zs-odstup-2xl);
  padding-top: var(--zs-odstup-xl);
  border-top: 1px solid var(--zs-barva-ramecek-karta);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__hoste-nadpis {
  margin: 0 0 var(--zs-odstup-base);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__hoste-seznam {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zs-odstup-base);
  margin: 0;
  padding: 0;
  list-style: none;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__host {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-xs);
}
/* Portréty jsou z dnešního webu, každý z jiného focení: Křížek a Chopra Bhalla
   na tmavém pozadí, Punčochář a David na světlém. Vedle sebe to bez zásahu
   vypadá jako pět nesouvisejících fotek.
   Odbarvení je tady trojí řešení. Sjednotí je bez nových fotek, drží
   hierarchii (hostující jsou černobílí, naši kuchaři nad nimi zůstanou barevní,
   až přijdou jejich fotky) a odděluje je od pásu tváří v modulu 07, kde je
   deset barevných portrétů zákazníků a osobností. Vzniká tím čitelná hranice
   mezi tím, kdo za jídlem stojí, a tím, kdo u nás jí.
   Plná barva se vrací na hover a na fokus. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__host-foto {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--zs-radius-karta);
  margin-bottom: var(--zs-odstup-xs);
  filter: grayscale(1) contrast(1.02);
  transition: filter .15s ease;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__host:hover .zs-kd__host-foto,
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__host:focus-within .zs-kd__host-foto { filter: none; }
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__host-jmeno {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--zs-barva-text-nadpis);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__host-role {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--zs-barva-text-popisek);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd__vice {
  margin: var(--zs-odstup-2xl) 0 0;
  text-align: center;
}

/* ---------------------------------------------------------------
   4. Od 700 px. Dvě dlaždice provozu a dvě karty kuchařů vedle sebe.
   --------------------------------------------------------------- */
@media (min-width: 700px) {
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd__provoz,
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd__kuchari { margin-top: var(--zs-odstup-sekce); }

  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd__nasi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd__hoste-seznam { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------
   5. Od 1024 px. Fotka zakladatelky vlevo na pevném sloupci, tři
      dlaždice provozu v řadě.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd__pribeh {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  }
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd__portret img {
    aspect-ratio: auto;
    min-height: 100%;
  }
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd__vypraveni {
    gap: var(--zs-odstup-lg);
    padding: var(--zs-odstup-2xl);
  }
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd__mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== css-partials/53-detail-programu.css ===== */
/* 53-detail-programu.css
   Co to je: styly navíc pro sdílený pás pod detailem programu
   (moduly/12-detail-programu.html, modul na pozici obsah_pod přiřazený na položky
   menu /programy-a-priprava/program-*). Jen to, co v novy-2026.css neexistuje:
   chipy dalších programů a řádek akcí pod nimi.
   Sdílené komponenty se tady NEDEFINUJÍ, přebírají se z novy-2026.css
   (.zs-sekce, .zs-obsah, .zs-obsah--uzky, .zs-pas-fotek, .zs-faq, .zs-m-faq__seznam,
   .zs-m-kuchyne__hlavicka, .zs-tlacitko). Stejně jako u 50-programy.css platí, že
   odstupy nadpisů jsou scopnuté obalem modulu, takže se pro obal .zs26-detail-programu
   musí zopakovat.
   Chipy jsou tvarem shodné s filtrem v 50-programy.css. Vědomě se nesdílí jedna
   třída: filtr na /programy-a-priprava přepíná seznam a má stav aktivní, tohle jsou
   obyčejné odkazy. Sloučit je půjde, až filtr dostane vlastní komponentu.
   Odsazení a výšky drží tokeny, žádné pevné pixely mimo velikost písma.
   Kontrakt: bez stínů, breakpointy jen 700 a 1024. */

/* ---------------------------------------------------------------
   1. Odstupy nadpisů, scopnuté obalem modulu
   --------------------------------------------------------------- */
.zs26.zs26-detail-programu .zs-h2 {
  margin: 0 0 var(--zs-odstup-sm);
}

.zs26.zs26-detail-programu .zs-m-kuchyne__hlavicka-text .zs-perex {
  margin: 0;
}

.zs26.zs26-detail-programu .zs-m-faq__seznam {
  margin-top: var(--zs-odstup-xl);
}

/* ---------------------------------------------------------------
   2. Chipy dalších programů
   --------------------------------------------------------------- */
.zs26.zs26-detail-programu .zs-m-detail__chipy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-md);
  margin: var(--zs-odstup-xl) 0 0;
}

.zs26.zs26-detail-programu .zs-m-detail__chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--zs-vyska-tlacitko-male);
  padding: 0 var(--zs-odstup-lg);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-pozadi-karta);
  color: var(--zs-barva-text-nadpis);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.zs26.zs26-detail-programu .zs-m-detail__chip:hover {
  border-color: var(--zs-barva-ramecek-pole);
  background: var(--zs-barva-akce-sekundarni-hover);
}

.zs26.zs26-detail-programu .zs-m-detail__chip:focus-visible {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   3. Řádek akcí pod chipy
   --------------------------------------------------------------- */
.zs26.zs26-detail-programu .zs-m-detail__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zs-odstup-lg);
  margin: var(--zs-odstup-xl) 0 0;
}

/* ===== css-partials/54-poradna.css ===== */
/* 54-poradna.css
   Co to je: blok „Nejste si jistí? Projdeme to s vámi." jako sdílená komponenta
   .zs-poradna. Fotka vlevo, text vpravo, na mobilu pod sebou. Poprvé použitý
   na konci /programy-a-priprava, ale schválně není scopnutý obalem modulu,
   aby šel dát i na detail programu nebo do ceníku.
   Vzor je blok z vrstvy kalkulačky (.zs26-kv__poradna v novy-2026-kalkulacka.css),
   jenže ten se načítá jen na /doporucovaci-kalkulacka a staví ho JavaScript.
   Tady je statické HTML nad sdílenými komponentami z novy-2026.css.
   Sdílené komponenty se tady NEDEFINUJÍ (.zs-sekce, .zs-obsah, .zs-h2, .zs-perex,
   .zs-popisek, .zs-cena, .zs-tlacitko), přebírají se.
   Kontrakt: bez stínů, breakpointy jen 700 a 1024, žádné hexy. */

.zs26 .zs-poradna {
  display: grid;
  gap: var(--zs-odstup-xl);
  padding: var(--zs-odstup-xl);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-sekce-2);
}

.zs26 .zs-poradna__foto {
  margin: 0;
}

.zs26 .zs-poradna__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--zs-radius-karta);
  object-fit: cover;
}

.zs26 .zs-poradna__popisek {
  margin: var(--zs-odstup-sm) 0 0;
}

.zs26 .zs-poradna__telo .zs-h2 {
  margin: 0 0 var(--zs-odstup-sm);
}

.zs26 .zs-poradna__telo .zs-perex {
  margin: 0 0 var(--zs-odstup-base);
}

.zs26 .zs-poradna__kontakt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--zs-odstup-md);
  margin: 0 0 var(--zs-odstup-base);
}

.zs26 .zs-poradna__kontakt .zs-popisek {
  margin: 0;
}

.zs26 .zs-poradna__akce {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-md);
}

/* ---------------------------------------------------------------
   Od 700 px fotka vlevo, text vpravo. Fotka je 800 x 434, tedy na šířku,
   proto dostává pevný sloupec a ne polovinu plochy.
   --------------------------------------------------------------- */
@media (min-width: 700px) {
  .zs26 .zs-poradna {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: start;
    padding: var(--zs-odstup-2xl);
  }
}

/* ===== css-partials/55-konfigurator.css ===== */
/* 55-konfigurator.css
   Co to je: klikaci vyber kaloricke rady a chodu se zivou cenou za den
   (moduly/13-konfigurator.html, modul na pozici obsah_pod prirazeny na polozku
   menu stranky programu). Nahrazuje statickou matici variant, ktera mela
   61 dlazdic a nula klikatelnych prvku.

   Obsah kresli js/zs26-data.js z /cenik?typ=NN, takze v HTML modulu je jen
   obal a zaloha pro pripad, ze se cenik nenacte.

   Sdilene komponenty se tady NEDEFINUJI, prebiraji se z novy-2026.css
   (.zs-sekce, .zs-obsah, .zs-h2, .zs-perex, .zs-tlacitko). Stejne jako
   u 50-programy.css a 53-detail-programu.css plati, ze odstupy nadpisu jsou
   scopnute obalem modulu, takze se pro .zs26-konfigurator musi zopakovat.

   Kontrakt: bez stinu, breakpointy jen 700 a 1024, odstupy a radiusy z tokenu,
   pevne pixely jen u velikosti pisma.

   Proc je tady !important. Sablona v content2024.css vynucuje na kazde button
   padding 21px 25px a border 0, obojí s !important, a novy-2026.css to proto
   neutralizuje pravidlem .zs26 button { padding: 0 !important; border: 0 !important }.
   Komponenta, ktera z buttonu dela dlazdici nebo chip, se proto bez !important
   neprosadi. Zmereno 27. 8. 2026: dlazdice mely computed border 0px none
   a padding 0px, prestoze pravidlo nize melo vyssi specificitu.
   Existujici chipy v 50-programy.css tenhle problem nemaji, protoze jsou to
   odkazy <a>, ne <button>. Tady jsou to ovladaci prvky, ne navigace. */

/* ---------------------------------------------------------------
   1. Odstupy nadpisu, scopnute obalem modulu
   --------------------------------------------------------------- */
.zs26.zs26-konfigurator .zs-h2 {
  margin: 0 0 var(--zs-odstup-sm);
}

.zs26.zs26-konfigurator .zs-perex {
  margin: 0 0 var(--zs-odstup-2xl);
  max-width: 62ch;
}

/* ---------------------------------------------------------------
   2. Rozvrzeni. Do 1024 px pod sebou, nad tim volba vlevo a cenovy
      panel vpravo. Panel je sticky, protoze cena je to, kvuli cemu
      se sem clovek diva; vzor je pravy souhrn u peti z peti ceskych
      konkurentu (FitKitchen, ntfy, NutritionPro, Popapej, my v kosiku).
   --------------------------------------------------------------- */
.zs26.zs26-konfigurator .zs-konf {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-2xl);
  align-items: start;
}

@media (min-width: 1024px) {
  .zs26.zs26-konfigurator .zs-konf {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: var(--zs-odstup-2xl);
    row-gap: var(--zs-odstup-2xl);
  }
  .zs26.zs26-konfigurator .zs-konf__blok {
    grid-column: 1;
  }
  .zs26.zs26-konfigurator .zs-konf__panel {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: var(--zs-odstup-2xl);
  }
}

.zs26.zs26-konfigurator .zs-konf__nadpis {
  margin: 0 0 var(--zs-odstup-lg);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--zs-barva-text-nadpis);
}

/* ---------------------------------------------------------------
   3. Kaloricke rady. Dlazdice nesou kJ, prepocet na kcal a vetu, pro
      koho rada je. Ctyri z peti ceskych konkurentu mluvi v kcal
      (FitKitchen, ntfy, NutritionPro, Popapej), my jsme jedini, kdo
      mel jen kJ. Veta pro koho je vzor Prep Kitchen.
   --------------------------------------------------------------- */
/* Nejvys ctyri sloupce: rad je u PRO ZDRAVI osm, takze vyjdou 4 + 4.
   Pri auto-fit bez stropu se veslo pet a druha rada mela tri, coz vypadalo
   jako chyba. Uzsi displeje si pocet snizi samy. */
.zs26.zs26-konfigurator .zs-konf__rady {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--zs-odstup-md);
}

@media (min-width: 700px) {
  .zs26.zs26-konfigurator .zs-konf__rady {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.zs26.zs26-konfigurator .zs-konf__rada {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-xs);
  min-height: 116px;
  padding: var(--zs-odstup-lg) !important;
  border: 1px solid var(--zs-barva-ramecek-karta) !important;
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
  font-family: var(--zs-pismo);
  text-align: left;
  cursor: pointer;
}

.zs26.zs26-konfigurator .zs-konf__rada-kj {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--zs-barva-text-nadpis);
}

.zs26.zs26-konfigurator .zs-konf__rada-kcal {
  font-size: 15px;
  line-height: 1.3;
  color: var(--zs-barva-text-popisek);
}

.zs26.zs26-konfigurator .zs-konf__rada-popis {
  margin-top: auto;
  font-size: 14px;
  line-height: 1.35;
  color: var(--zs-barva-text-tlumeny);
}

.zs26.zs26-konfigurator .zs-konf__rada:hover {
  border-color: var(--zs-barva-ramecek-pole);
  background: var(--zs-barva-akce-sekundarni-hover);
}

/* Vybrana rada. Puvodne mela pozadi --zs-barva-pozadi-sekce, jenze sekce ma
   tutez barvu, takze vyber nebyl videt vubec. Zmereno 27. 8. 2026: vybrana
   i nevybrana dlazdice mely stejny computed background. */
.zs26.zs26-konfigurator .zs-konf__rada.je-vybrana {
  border: 2px solid var(--zs-barva-akce-tmave) !important;
  padding: calc(var(--zs-odstup-lg) - 1px) !important;
  background: var(--zs-barva-akcent-limetka-plo);
}

.zs26.zs26-konfigurator .zs-konf__rada:focus-visible {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   4. Kombinace chodu. Radek nese nazev, vycet chodu a cenu.
      Marek 27. 8. o predchozi verzi s prepinaci na kazdy chod: "ta kombinace
      co muzu kam klikat neni jednoznacna, takze ty kombinace jsou docela
      nahodile". Prepinace predstiraly volny vyber, ktery nabidka nema.
      Ted je videt rovnou deset hotovych kombinaci z ceniku, kazda se svou
      cenou, takze je jednoznacne, na co se klika i co za to bude.
   --------------------------------------------------------------- */
.zs26.zs26-konfigurator .zs-konf__kombinace {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-sm);
}

@media (min-width: 700px) {
  .zs26.zs26-konfigurator .zs-konf__kombinace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--zs-odstup-md);
  }
}

/* Dva radky misto jednoho flexu. Prvni nese nazev a cenu, druhy pas chodu
   pres celou sirku. Do 30. 8. to byl flex se dvema deti a chody byly veta
   slovy uvnitr leveho sloupce. */
.zs26.zs26-konfigurator .zs-konf__kombinace-radek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--zs-odstup-md);
  row-gap: var(--zs-odstup-sm);
  width: 100%;
  min-height: 60px;
  padding: var(--zs-odstup-md) var(--zs-odstup-lg) !important;
  border: 1px solid var(--zs-barva-ramecek-karta) !important;
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
  font-family: var(--zs-pismo);
  text-align: left;
  cursor: pointer;
}

.zs26.zs26-konfigurator .zs-konf__kombinace-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.zs26.zs26-konfigurator .zs-konf__kombinace-nazev {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--zs-barva-text-nadpis) !important;
}

/* ---------------------------------------------------------------
   4b. Pas chodu (30. 8. 2026)

   Marek: "tady chybi ukazka tech chodu, jak to mame v ceniku, tzn snidane,
   svacina, obed atp." Predloha je zivá sekce "Mozne varianty programu"
   na ostrem webu (overeno v prohlizeci 30. 8. 2026): pet policek v rade,
   zahrnuty chod pln, nezahrnuty zesvetleny. Vyhoda proti vyctu slovy je,
   ze deset kombinaci nad sebou drzi stejnou mrizku, takze rozdil mezi nimi
   je videt bez cteni.

   Pet sloupcu i na mobilu. Zalomeni na dva radky by rozbilo prave tu vlastnost,
   kvuli ktere to vzniklo: policko na pate pozici uz by nebylo vecere.
   Sirka na 390 px vychazi kolem 62 px na policko, proto pismo 11 px
   a zalomeni slova zakazane.

   Kdo pas nema: MENICKO (78) a DOPLNKY (77). Jejich kody kombinaci nejsou
   v CHODY_MAPA, `k.chody` vrati null a pas se nekresli. Chovani zustava dnesni.

   Odecitac pas nevidi (aria-hidden), cte skrytou vetu "Obsahuje: ...",
   protoze pet nazvu v pristupnem jmenu tlacitka by rozdil mezi radky smazalo.
   --------------------------------------------------------------- */
.zs26.zs26-konfigurator .zs-konf__chody {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.zs26.zs26-konfigurator .zs-konf__chod {
  padding: 5px 2px;
  border-radius: var(--zs-radius-male);
  background: var(--zs-barva-akcent-limetka-plo);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--zs-barva-text-nadpis) !important;
  box-sizing: border-box;
  border: 1.5px solid var(--zs-barva-akce-primarni);
}

/* Nezahrnuty chod. Prepsano 1. 9. 2026, Marek: "spatna citelnost kdyz
   boldovane znamena, ze to v tom programu je a neboldovane ne, hodne se to
   sliva, kdyz clovek hur vidi".

   Priciny byly dve. Za prve se plochy lisily jen jmenem: zahrnuty chod mel
   --zs-barva-pozadi-sekce #F3FDEE a nezahrnuty --zs-barva-pozadi-jemne
   #F6FFF2, tedy rozdil tri urovni v kazdem kanalu, opticky nic. Za druhe
   zbyvajici rozdil byl jen ve vaze pisma a v odstinu textu, tedy dva signaly
   teheoz druhu, a rozdily v mire se pri slabsim zraku slevaji jako prvni.

   Ted se stavy lisi druhem, ne mirou: zahrnuty ma plochu i limetkovy okraj,
   nezahrnuty nema ani jedno. Okraj je pruhledny, ne zadny, aby police
   nemenila rozmer a pet sloupcu zustalo zarovnanych.

   Preskrtnuti se znovu zvazilo a znovu neprosl: v rozostrenem snimku
   (simulace slabsiho zraku, Gauss 2,6) zmizi uplne, takze pridava sum v ostrem
   a nepomaha v tom, kvuli cemu vzniklo.

   Tmava vypln jako u pruvodce na /cenik (.zs26-pv__chod--ano) se taky zkousela
   a pro tuhle mrizku se nehodi: pri 11 az 12,5 px se svetly text na tmave
   slije do plne pilulky a popisek zmizi. U pruvodce to funguje, protoze jeho
   chipy jsou sirsi a maji 13 px. Dva ruzne vzory pro tutez myslenku jsou
   vedomy rozdil, ne nedopatreni.

   Kontrasty, dopocet 1. 9. 2026: text na zahrnutem 10,32:1, text
   nezahrnuteho na bile karte 5,51:1. Dukazy: srovnani ctyr variant ostre
   i rozostrene, scratchpad session, chody/srovnani4-*.png. */
.zs26.zs26-konfigurator .zs-konf__chod--ne {
  background: transparent;
  border-color: transparent;
  font-weight: 400;
  color: var(--zs-barva-text-popisek) !important;
}

/* Ve vybranem radku ma karta limetkovou plochu, na ktere by se svetle zelena
   policka ztratila. Zahrnuta prechazi na bilou, nezahrnuta zustavaji tlumena. */
.zs26.zs26-konfigurator .zs-konf__kombinace-radek.je-vybrana .zs-konf__chod {
  background: var(--zs-barva-pozadi-karta);
}
.zs26.zs26-konfigurator .zs-konf__kombinace-radek.je-vybrana .zs-konf__chod--ne {
  background: transparent;
}

@media (min-width: 700px) {
  .zs26.zs26-konfigurator .zs-konf__chod {
    padding: 6px 4px;
    font-size: 12px;
  }
}

.zs26.zs26-konfigurator .zs-konf__kombinace-cena {
  flex: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--zs-barva-text-nadpis) !important;
}

.zs26.zs26-konfigurator .zs-konf__kombinace-radek:hover {
  border-color: var(--zs-barva-ramecek-pole) !important;
  background: var(--zs-barva-akce-sekundarni-hover);
}

.zs26.zs26-konfigurator .zs-konf__kombinace-radek.je-vybrana,
.zs26.zs26-konfigurator .zs-konf__kombinace-radek.je-vybrana:hover {
  border: 2px solid var(--zs-barva-akce-tmave) !important;
  padding: calc(var(--zs-odstup-md) - 1px) calc(var(--zs-odstup-lg) - 1px) !important;
  background: var(--zs-barva-akcent-limetka-plo);
}

/* kombinace, kterou program v teto kaloricke rade nevozi */
.zs26.zs26-konfigurator .zs-konf__kombinace-radek.je-nedostupna {
  cursor: default;
  opacity: 0.45;
}

.zs26.zs26-konfigurator .zs-konf__kombinace-radek:focus-visible {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   5. Cenovy panel
   --------------------------------------------------------------- */
.zs26.zs26-konfigurator .zs-konf__panel {
  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);
}

.zs26.zs26-konfigurator .zs-konf__panel-nazev {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--zs-barva-text-nadpis);
}

.zs26.zs26-konfigurator .zs-konf__panel-rada {
  margin: var(--zs-odstup-xs) 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--zs-barva-text-popisek);
}

.zs26.zs26-konfigurator .zs-konf__panel-cena {
  margin: var(--zs-odstup-lg) 0 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--zs-barva-text-nadpis);
}

.zs26.zs26-konfigurator .zs-konf__panel-poznamka {
  margin: var(--zs-odstup-xs) 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--zs-barva-text-tlumeny);
}

/* Termin nejblizsiho zavozu, prenesene z hlavicky 31. 8. 2026.
   Stoji hned pod tlacitkem, protoze odpovida na otazku, kterou si clovek
   klade prave v tu chvili: kdy zacnu jist. Text prichazi z PHP includu
   v HTML modulu na dvou radcich, proto stred a mensi radkovani. */
.zs26.zs26-konfigurator .zs-konf__panel-datum {
  margin: var(--zs-odstup-sm) 0 0;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--zs-barva-text-tlumeny);
}

.zs26.zs26-konfigurator .zs-konf__akce {
  display: flex;
  width: 100%;
  margin: var(--zs-odstup-lg) 0 0;
}

.zs26.zs26-konfigurator .zs-konf__akce[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}

/* Dva textove odkazy pod tlacitkem. Bez display:flex se slily do jednoho radku
   bez mezery ("Co se v tehle rade variNevite? Kalkulacka poradi"), protoze
   .zs-tlacitko--textove je inline-flex. */
.zs26.zs26-konfigurator .zs-konf__jidelnicek,
.zs26.zs26-konfigurator .zs-konf__kalkulacka {
  display: flex;
  justify-content: flex-start;
  margin: var(--zs-odstup-md) 0 0;
}

/* ---------------------------------------------------------------
   6. Zaloha bez JS
   --------------------------------------------------------------- */
.zs26.zs26-konfigurator .zs-konf__zaloha p {
  margin: 0 0 var(--zs-odstup-lg);
  max-width: 62ch;
}

.zs26.zs26-konfigurator .zs-konf__zaloha-akce {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-md);
}

/* ===== css-partials/56-fakta-programu.css ===== */
/* 56-fakta-programu.css, 27. 8. 2026
   Pás štítků pod hlavičkou programu (moduly/14-fakta-programu.html).

   Proč pás a ne text v hlavičce: v hlavičce se opakovalo totéž, co pak stálo
   v perexu článku (počty chodů, kalorické řady, cena). Marek 27. 8.: "ať se
   člověk rychle zorientuje." Štítek nese jedno číslo a jednu ikonu, nic víc.

   Plocha je bílá, aby oddělila světle zelenou hlavičku od těla článku. Štítky
   mají světle zelenou plochu bez rámečku, ikona je tmavší zelená z tokenu ikony.
   Bez stínů, kontrakt bod 3. Zalamují se, na mobilu jsou pod sebou v jednom
   sloupci jen tehdy, když se nevejdou dva vedle sebe. */

.zs26.zs26-fakta {
  background: var(--zs-barva-pozadi-stranka);
}
.zs26 .zs-fakta {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--zs-sirka-obsah);
  margin-inline: auto;
  padding: var(--zs-odstup-xl) var(--zs-odstup-lg);
}
.zs26 .zs-fakta__seznam {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-sm) 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Selektor je delsi, nez by se zdalo nutne, a background ma vykricnik.
   Duvod je pravidlo o kus vys v tomhle souboru:
   `.zs26 ul li, .zs26 ul li:nth-child(n) { background: none !important; padding-left: 0 }`.
   Je tam proto, aby legacy odrazka (buleta.png ze sablony, `ul li` r. 44
   content2024.css) nelezla do seznamu uvnitr ZS26 sekci. Ma ale specificitu
   (0,2,2), takze prebije i `.zs26 .zs-fakta__stitek` (0,2,0): stitek zustal bily
   a bez leveho odsazeni. Zmereno 27. 8. 2026 na testu.
   `.zs26 .zs-fakta__seznam > li.zs-fakta__stitek` ma (0,3,1) a vyhrava,
   u background se navic musi vykricnik potkat s vykricnikem. */
.zs26 .zs-fakta__seznam > li.zs-fakta__stitek {
  display: inline-flex;
  align-items: center;
  gap: var(--zs-odstup-sm);
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-pozadi-sekce) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--zs-barva-text-nadpis);
}
/* Štítek s číslem se kreslí, až když číslo dojde z ceníku. */
.zs26 .zs-fakta__seznam > li.zs-fakta__stitek--ceka {
  display: none;
}
.zs26 .zs-fakta__ikona {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--zs-barva-ikona-check);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------
   COOKIE LISTA NA MOBILU, 2026-08-29.

   Stav pred zasahem, zmereno na 390 x 844: #popup_pod je position: fixed,
   z-index 999999, 390 x 844 px, top 0. Neni to lista, je to zed pres cely
   viewport. Prvni, co clovek na telefonu uvidi, neni web.

   Merilo se to teprve 29. 8., protoze cdp.mjs i qa-cdp.mjs cookie listu pred
   kazdym merenim skryvaly. Na zadnem z desitek snimku v Dukazy/ proto neni.
   Od 29. 8. na to existuje prepinac --s-cookie.

   Co se meni: jen plocha, kterou zed zabira, a velikost dotykovych cilu.
   Text, poradi ani chovani voleb se nemeni, souhlas zustava presne takovy,
   jaky byl. Pravne se neposouva nic.

   Co se vedome NEMENI a je to rozhodnuti pro Marka: dnes je "Prijmout vse"
   zelena pilulka a "Pouze nezbytne" textovy odkaz. Srovnat jejich vahu je
   zlepseni souladu s GDPR a zaroven to snizi miru souhlasu, tedy pokryti
   v GA4 a v Ads. To je obchodni rozhodnuti, ne CSS.

   Mandat: plugin ajaxpeli ani index.php se nedotykame. CSS lisy je inline
   <style> v index.php radky 182 az 194, tedy PRED nasim <link> na radku 224.
   Pri stejne specificite vyhrava pozdejsi, takze staci prebit odsud.

   PAST: #popup_clona je absolute uvnitr rodice s height: 100%. Kdyz rodici
   dame height: auto, clona zkolabuje na nulu. Musi byt fixed. A nesmi se
   skryt, jeji onclick je jedna ze tri cest, jak listu zavrit.
   --------------------------------------------------------------- */
@media (max-width: 699px) {
  body:has(.zs26-hlavicka) #popup_pod.cookieLista {
    height: auto;
    top: auto;
    bottom: 0;
    z-index: var(--zs-z-cookie);
  }

  body:has(.zs26-hlavicka) #popup_pod.cookieLista #popup_clona {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    background: rgba(0, 0, 0, .35);
  }

  body:has(.zs26-hlavicka) #popup_pod.cookieLista #popup_ramecek {
    top: auto;
    margin: 0;
    max-width: none;
    width: 100%;
    max-height: 70dvh;
    overflow-y: auto;
    border-radius: var(--zs-radius-karta, 16px) var(--zs-radius-karta, 16px) 0 0;
    padding: var(--zs-odstup-base) var(--zs-odstup-base)
             calc(var(--zs-odstup-base) + env(safe-area-inset-bottom, 0px));
    text-align: left;
  }

  /* Dotykove cile. Zmereno pred zasahem: Prijmout vse 101x30, Pouze nezbytne
     107x20, Podrobne nastaveni 139x20, Vice informaci 96x20. Vsechny pod
     doporucenym minimem 44x44. Meni se plocha na prst, ne vaha ani vzhled:
     "Pouze nezbytne" zustava textovy odkaz bez pozadi. */
  body:has(.zs26-hlavicka) #popup_pod.cookieLista span.button,
  body:has(.zs26-hlavicka) #popup_pod.cookieLista span.alink,
  body:has(.zs26-hlavicka) #popup_pod.cookieLista .cookie_uvod > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-left: var(--zs-odstup-sm);
    padding-right: var(--zs-odstup-sm);
  }

  /* Zaskrtavatka v Podrobnem nastaveni maji vychozi 13 px, na prst je to malo. */
  body:has(.zs26-hlavicka) #popup_pod.cookieLista .pol_cook input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
}

/* Varianta listy CTA s dlouhym textem tlacitka (Program Na miru, 29. 8. 2026).
   Tlacitko "Chci program Na miru" zabere 212 z 390 px, na levy sloupec zbyde 140.
   Prvni pokus byl white-space: nowrap, coz bylo HORSI: text se nezalomil, ale
   pretekl pod tlacitko a byl useknuty. Nowrap sam o sobe misto nevyrobi.
   Reseno obsahem, viz varianta 'jeden-radek' v zs26-data.js: levy sloupec nese
   jen jeden radek. Tady zbyva jen ochrana proti pretekani. */
@media (max-width: 699px) {
  .zs26-lista-cta--jeden-radek .zs-sticky-lista__cena { min-width: 0; }
  .zs26-lista-cta--jeden-radek .zs-cena,
  .zs26-lista-cta--jeden-radek .zs-popisek {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .zs26-lista-cta--jeden-radek .zs-tlacitko { flex: 0 0 auto; }
}

/* ============================================================================
   GRAFIKA 2026-08-30, druhá vlna podle překreslení od Lucie Soukupové (28. 8. 2026)
   Předlohy: images/2. část/, varianta "Celý web varianta se žlutou.png".
   Bloky níž se připojují na konec souboru, takže přebíjejí dřívější pravidla.
   Vrácení: smazat všechno od téhle hlavičky dolů a nahrát znovu.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Sdílené: žlutá plocha sekce
   Čtvrtá barva sekce vedle --bila, --svetla, --kremova. Používá ji pás čísel
   (modul 05) a bloky v modulu 06.

   Kontrast na #F1D511 (dopočet WCAG 2.2, 30. 8. 2026):
     #1F3F2A nadpis        7,9 : 1   AAA
     #1D1D1D základní text 11,5 : 1  AAA
     #5F6C63 popisek       3,7 : 1   NEPROJDE, proto se na žluté přebíjí
   Černá by dala 14,3 : 1, ale je to výstražná kombinace a rozešla by se
   se zbytkem webu. Rozhodnutí Marka 30. 8. 2026.
   --------------------------------------------------------------------------- */
.zs26 .zs-sekce--zluta { background: var(--zs-barva-akcent-zluta); }
.zs26 .zs-sekce--zluta .zs-popisek,
.zs26 .zs-sekce--zluta .zs-perex,
.zs26 .zs-sekce--zluta .zs-text-vedlejsi { color: var(--zs-barva-text-zakladni); }

/* ---------------------------------------------------------------------------
   34-jak-to-funguje-v3
   Tři limetková kolečka s ikonou místo tří fotek. Mezi nimi spojnice se šipkou,
   nad kolečkem tmavý odznak s číslem. Předloha
   images/2. část/Jak to funguje_/grafika - Jak to funguje .png.

   Proti verzi 2 se nic nemaže, jen přebíjí: pravidla pro .zs-krok--foto výš
   v souboru zůstávají a jsou neúčinná, protože modul tu třídu už nemá.
   Návrat k fotkám = vrátit HTML modulu ze zálohy a smazat tenhle blok.

   Spojnice je <span> v markupu, ne pseudoelement li::before. Ten je na řádku
   2719 vypnutý přes !important a nešel by přebít.

   Šířka spojnice: kolečko má 96 px, od jeho hrany se odsazuje 12 px, takže
   od středu jednoho kroku k dalšímu je to 100 % šířky kroku plus mezera mřížky
   minus dvakrát (48 + 12).
   --------------------------------------------------------------------------- */
.zs26.zs26-jak-to-funguje .zs-m-postup__kroky--ikony {
  --zs-jtf-kolecko: 96px;
  --zs-jtf-mezera: var(--zs-odstup-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-2xl);
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.zs26.zs26-jak-to-funguje .zs-krok-ikona {
  position: relative;
  margin: 0;
  padding: 0;
  text-align: center;
}

.zs26.zs26-jak-to-funguje .zs-krok-ikona__znak {
  position: relative;
  width: var(--zs-jtf-kolecko);
  height: var(--zs-jtf-kolecko);
  margin: 0 auto var(--zs-odstup-base);
  line-height: 0;
}

.zs26.zs26-jak-to-funguje .zs-krok-ikona__obrazek {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--zs-barva-ikona-vychozi);
}

/* Plocha kolečka a fajfka na tmavé dlaždici. Kresba bere barvu z currentColor. */
.zs26.zs26-jak-to-funguje .zs-krok-ikona__plocha { fill: var(--zs-barva-akce-primarni); }
.zs26.zs26-jak-to-funguje .zs-krok-ikona__fajfka { stroke: var(--zs-barva-akce-primarni); }

/* Odznak přesahuje levý horní okraj kolečka, jako v předloze. */
.zs26.zs26-jak-to-funguje .zs-krok-ikona__cislo {
  position: absolute;
  top: 0;
  left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-pozadi-tmave);
  color: var(--zs-barva-text-na-tmavem);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.zs26.zs26-jak-to-funguje .zs-krok-ikona__nadpis { margin: 0 0 var(--zs-odstup-sm); }
.zs26.zs26-jak-to-funguje .zs-krok-ikona__text { max-width: 26ch; margin: 0 auto; }

/* Na mobilu jsou kroky pod sebou a vodorovná šipka by ukazovala do prázdna. */
.zs26.zs26-jak-to-funguje .zs-krok-ikona__spojnice { display: none; }

@media (min-width: 700px) {
  .zs26.zs26-jak-to-funguje .zs-m-postup__kroky--ikony {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--zs-jtf-mezera);
  }
  .zs26.zs26-jak-to-funguje .zs-krok-ikona__spojnice {
    display: block;
    position: absolute;
    top: calc(var(--zs-jtf-kolecko) / 2 - 1px);
    left: calc(50% + var(--zs-jtf-kolecko) / 2 + 12px);
    width: calc(100% + var(--zs-jtf-mezera) - var(--zs-jtf-kolecko) - 24px);
    height: 2px;
    background: var(--zs-barva-ramecek-karta);
  }
  .zs26.zs26-jak-to-funguje .zs-krok-ikona__spojnice::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--zs-barva-ramecek-karta);
    border-right: 2px solid var(--zs-barva-ramecek-karta);
    transform: translate(1px, -50%) rotate(45deg);
  }
}

/* ---------------------------------------------------------------------------
   36-dukazy-v4: pás čísel na žluté
   Popisek má vlastní jmennou oblast .zs-d2__popis, takže ho obecné pravidlo
   pro .zs-popisek na žluté nechytne a musí se přebít jmenovitě.
   #5F6C63 na #F1D511 je 3,7 : 1 a neprojde AA, #1D1D1D je 11,5 : 1.
   Číslo zůstává tmavě zelené, 7,9 : 1 při velikosti 30 až 42 px.
   --------------------------------------------------------------------------- */
.zs26.zs26-dukazy .zs-sekce--zluta .zs-d2__popis { color: var(--zs-barva-text-zakladni); }

/* ---------------------------------------------------------------------------
   HIERARCHIE TLAČÍTEK, pravidlo platné od 1. 9. 2026 (rozhodl Marek)

   Barva nese hodnotu akce, ne barvu plochy, na které tlačítko leží.

     --primarni    limetka #AED800, konverzní akce té stránky.
                   Nejvýš jedna na obrazovku. Objednat, Vybrat program,
                   a na stránce poradenství i Zavolat poradkyni: konverze
                   té stránky je telefon, ne objednávka.
     --tmave       tmavě zelená výplň, odeslání formuláře na světlé ploše.
                   Ověřit dostupnost v heru (formulář stojí na světlém ostrůvku,
                   proto tmavá výplň funguje i uvnitř sekce --tmava).
     --sekundarni  bílá výplň s tmavě zeleným rámečkem, čtení, srovnání,
                   navigace. Na tmavé ploše se z ní stává buď obrys s bílým
                   rámečkem (.zs-sekce--tmava), nebo bílá výplň s bílým
                   rámečkem (.zs-paticka, blok u .zs-paticka__newsletter-odeslat).
     --textove     doplňkové odkazy.

   ŽLUTÁ NENÍ BARVA TLAČÍTKA. Zůstává barvou plochy (pás čísel v modulu 05,
   .zs-sekce--zluta) a štítku (Novinka od září, .zs-m-kategorie__novinka).

   Proč varianta --zlute zmizela: byla to pátá varianta bez pravidla, čím se
   od ostatních čtyř liší. Nesla dvě akce z opačných konců žebříčku, odeslání
   newsletteru v patičce a odkaz "Více o Zdravém stravování" v modulu 06,
   a byla opticky nejvýraznější věc na webu. Kontrast to nerozhodl, ten měla
   v pořádku (7,9 : 1 proti pozadí patičky, limetka 7,0 : 1, dopočítáno
   z tokenů podle WCAG). Rozhodlo, že barva bez pravidla se u další stránky
   vybere náhodně.

   Kdyby se měla vrátit, je celá v záloze novy-2026.css.pred-tlacitka-2026-09-01.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   37-kdo-za-jidlem-v3, žlutá varianta
   Předloha images/2. část/grafika - Kdo za vašim jídlem stojí.png.
   Jmenná oblast .zs-kd2, aby verze 2 (.zs-kd) zůstala v souboru nedotčená
   a vrácení bylo smazání tohohle bloku plus HTML ze zálohy.

   Barvy na žluté ploše: nadpisy --zs-barva-text-nadpis 7,9 : 1,
   drobný text --zs-barva-text-zakladni 11,5 : 1. Popisek --zs-barva-text-popisek
   se na žlutou nepouští, má 3,7 : 1. Karty uvnitř žlutých bloků jsou bílé,
   tam platí výchozí barvy.
   --------------------------------------------------------------------------- */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__nadpis { margin: 0 0 var(--zs-odstup-xl); }

/* --- Patro 1: fotka a žlutý panel jako jeden zaoblený blok ---------------- */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__citat {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: var(--zs-radius-velke);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__portret { margin: 0; line-height: 0; }
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__portret img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 30%;
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__panel {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-base);
  padding: var(--zs-odstup-2xl) var(--zs-odstup-xl);
  background: var(--zs-barva-akcent-zluta);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__veta {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-nadpis);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__podpis { margin: 0; }
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__jmeno {
  display: block;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--zs-barva-text-nadpis);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__role {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  color: var(--zs-barva-text-zakladni);
}

/* Tři bílé dlaždice v panelu. Na mobilu pod sebou, tři vedle sebe by na 390 px
   daly 110 px na dlaždici a ikona s dvěma řádky se do toho nevejde. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__dlazdice {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-md);
  margin: var(--zs-odstup-sm) 0 0;
  padding: 0;
  list-style: none;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__dlazdice-polozka {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-md);
  margin: 0;
  padding: var(--zs-odstup-md) var(--zs-odstup-base);
  border-radius: var(--zs-radius-male);
  background: var(--zs-barva-pozadi-karta);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__dlazdice-ikona {
  flex: 0 0 auto;
  color: var(--zs-barva-ikona-vychozi);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__dlazdice-text { display: block; }
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__dlazdice-popis {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--zs-barva-text-popisek);
}
/* Třetí dlaždice má v předloze oba řádky tučné ("20 000+ / receptur"),
   první dvě mají popis lehký a hodnotu tučnou. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__dlazdice-popis--silny {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--zs-barva-text-nadpis);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__dlazdice-cislo {
  display: block;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--zs-barva-text-nadpis);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__poradna {
  margin: var(--zs-odstup-base) 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__odkaz {
  margin-left: var(--zs-odstup-md);
  color: var(--zs-barva-text-odkaz);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Patro 2: žlutá plocha s bílými kartami ------------------------------ */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__provoz {
  margin-top: var(--zs-odstup-2xl);
  padding: var(--zs-odstup-xl);
  border-radius: var(--zs-radius-velke);
  background: var(--zs-barva-akcent-zluta);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__provoz-nadpis {
  margin: 0 0 var(--zs-odstup-lg);
  text-align: center;
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__mrizka {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-base);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Fotka vlevo, text vpravo. Na úzkém displeji je to kompaktnější než fotka
   nahoře a karta se vejde na jednu obrazovku i po třech. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__misto {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--zs-odstup-base);
  align-items: center;
  margin: 0;
  padding: var(--zs-odstup-md);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__misto-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--zs-radius-male);
  font-size: 12.5px;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__misto-telo > * { margin: 0; }
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__misto-telo > * + * { margin-top: var(--zs-odstup-sm); }

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__stitky {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--zs-odstup-md);
  margin: var(--zs-odstup-lg) 0 0;
  padding: 0;
  list-style: none;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__stitek {
  margin: 0;
  padding: var(--zs-odstup-sm) var(--zs-odstup-lg);
  border: 1.5px solid var(--zs-barva-akce-sekundarni-ramecek);
  border-radius: var(--zs-radius-pill);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--zs-barva-text-nadpis);
}

/* --- Patro 3: dvě karty kuchařů a širší karta hostujících ---------------- */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__lide { margin-top: var(--zs-odstup-2xl); }
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__lide-nadpis {
  margin: 0 0 var(--zs-odstup-lg);
  text-align: center;
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__lide-mrizka {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-base);
  margin: 0;
  padding: 0;
  list-style: none;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__osoba,
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__hoste {
  margin: 0;
  padding: var(--zs-odstup-base);
  border: 1.5px solid var(--zs-barva-akcent-zluta);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
}
/* align-items: stretch místo start, 1. 9. 2026 večer. Do té doby v kartě
   ležel placeholder v pevném poměru 4:5, takže se výška nikdy neřešila.
   S fotkou to bylo vidět: sloupec fotky měřil 125 px a text vedle 160 až 180,
   takže fotka končila v půlce karty a spodní hrana byla roztřepená.
   Rovnou výšku bloků vedle sebe Marek žádal opakovaně, naposledy u certifikací. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__osoba {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: var(--zs-odstup-base);
  align-items: stretch;
}
/* Fotka drží výšku karty, ne vlastní poměr. `min-height` je pojistka pro případ,
   že by text byl kratší než 125 px: bez ní by se karta srazila na výšku textu
   a z fotky by zbyl proužek. Poměr 4:5 nese sám soubor (400 x 500), takže
   `aspect-ratio` tu být nemusí, a kdyby tu bylo, přebilo by `height: 100 %`
   a fotka by přetekla kartu. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__osoba-foto {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 125px;
  object-fit: cover;
  border-radius: var(--zs-radius-male);
  font-size: 12.5px;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__osoba-telo > * { margin: 0; }
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__osoba-role { margin-top: var(--zs-odstup-xs); }
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__osoba-telo > .zs-text-vedlejsi { margin-top: var(--zs-odstup-sm); }

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__hoste-nadpis {
  margin: 0 0 var(--zs-odstup-md);
  text-align: center;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--zs-barva-text-nadpis);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__hoste-seznam {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--zs-odstup-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__host {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zs-odstup-xs);
  margin: 0;
  text-align: center;
}
/* Do 1. 9. 2026 tu bylo `filter: grayscale(1)` s odůvodněním, že odbarvení drží
   hierarchii: hostující kuchaři podle vlastního textu na webu nevaří denně,
   jen spolupracují na recepturách a na Kulinářském létě.
   Marek to večer 1. 9. 2026 zrušil: "tyhle fotky ať jsou barevné".
   Rozhodnutí je jeho, argument o hierarchii tím nepadá, jen prohrál.
   Řádek nechávám jako komentář, ne smazaný, aby se dal vrátit jedním krokem. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__host-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--zs-radius-male);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__host-jmeno {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--zs-barva-text-nadpis);
}

.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__vice {
  margin: var(--zs-odstup-xl) 0 0;
  text-align: center;
}

@media (min-width: 700px) {
  /* 31. 8. 2026: dlaždice jsou čtyři (přibylo 10 000+ zákazníků loni), proto
     dva krát dva místo jedné řady tří jako v předloze.
     Zkoušel jsem auto-fit s minimem 200 px, ale na každém prahu vyjde někde
     pásmo se třemi sloupci a čtvrtá dlaždice zůstane sama na druhém řádku
     (změřeno na 900 px). Pevné dva sloupce jsou vyvážené na všech šířkách.
     Čtyři vedle sebe nejdou: od 1024 px je panel vedle fotky a má 499 px,
     tedy 116 px na dlaždici. */
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__lide-mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__hoste-seznam { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__panel { padding: var(--zs-odstup-2xl); }
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__provoz { padding: var(--zs-odstup-2xl); }
}

@media (min-width: 1024px) {
  /* Fotka a panel vedle sebe, obojí přes celou výšku bloku. Fotka si výšku
     bere z panelu, proto aspect-ratio zpátky na auto. */
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__citat {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    align-items: stretch;
  }
  /* Zdroj je 800 x 434, okno zhruba 475 x 290, takze se vodorovne orezava
     asi 59 px. Pri 50 % zustala Katerina v prave tretine a vlevo byla prazdna
     kuchyne. 62 % ji vrati do stredu, mereno na testu 31. 8. 2026. */
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__portret img {
    aspect-ratio: auto;
    min-height: 100%;
    object-position: 62% 40%;
  }
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Karta hostujících je širší, drží pět portrétů vedle sebe. */
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__lide-mrizka {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr);
  }
}

/* ---------------------------------------------------------------------------
   07-reference-v2, tmavě zelený kontejner
   Předloha images/2. část/grafika - Jí u nás i lidé, ktéré znáte.png.
   Jmenná oblast .zs-r2, vnitřek karty zůstává na sdílené .zs-reference.

   Karty mají height: 100 % z 20-komponenty.css, takže se srovnají na výšku
   nejdelšího citátu. Doslovné znění zůstává (rozhodnutí Marka 30. 8. 2026),
   proto je text o půl stupně menší než v předloze, aby karta tolik nenarostla.
   --------------------------------------------------------------------------- */
.zs26.zs26-reference .zs-r2__hlava {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--zs-odstup-base);
  align-items: start;
  margin-bottom: var(--zs-odstup-2xl);
}
.zs26.zs26-reference .zs-r2__hlava-text > * { margin: 0; }
.zs26.zs26-reference .zs-r2__perex { margin-top: var(--zs-odstup-sm); }

.zs26.zs26-reference .zs-r2__odznak {
  display: inline-flex;
  align-items: center;
  gap: var(--zs-odstup-sm);
  justify-self: start;
  margin: 0;
  padding: var(--zs-odstup-sm) var(--zs-odstup-lg);
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-pozadi-tmave);
  color: var(--zs-barva-text-na-tmavem);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* Rám kolem tří karet. Odsazení je menší než u sekce, aby karty uvnitř
   nezůstaly úzké. */
.zs26.zs26-reference .zs-r2__ram {
  padding: var(--zs-odstup-base);
  border-radius: var(--zs-radius-velke);
  background: var(--zs-barva-pozadi-tmave);
}
.zs26.zs26-reference .zs-r2__ram .zs-m-reference__mrizka { margin-top: 0; }

/* Karta je uvnitř tmavého rámu, takže bílá, ne krémová jako plocha sekce. */
.zs26.zs26-reference .zs-r2__ram .zs-reference { background: var(--zs-barva-pozadi-karta); }
.zs26.zs26-reference .zs-r2__ram .zs-reference__text { font-size: 15.5px; }

/* Velký znak uvozovek místo uvozovek v textu. Dekorace, proto aria-hidden
   v markupu a záporný spodní okraj, aby nezvedal celý sloupec. */
.zs26.zs26-reference .zs-r2__uvozovka {
  display: block;
  margin-bottom: calc(-1 * var(--zs-odstup-lg));
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--zs-barva-text-nadpis);
}

.zs26.zs26-reference .zs-r2__akce {
  margin: var(--zs-odstup-xl) 0 0;
  text-align: center;
}
/* Tlačítko přebíjí barvu a podtržení z verze 1, kde to byl textový odkaz. */
.zs26.zs26-reference .zs-r2__akce .zs-m-reference__odkaz {
  margin-top: 0;
  color: var(--zs-barva-text-nadpis);
}
.zs26.zs26-reference .zs-r2__akce .zs-m-reference__odkaz:hover { text-decoration: none; }

@media (min-width: 700px) {
  .zs26.zs26-reference .zs-r2__hlava {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .zs26.zs26-reference .zs-r2__odznak { justify-self: end; }
  .zs26.zs26-reference .zs-r2__ram { padding: var(--zs-odstup-xl); }
}

/* ---------------------------------------------------------------------------
   Oprava po první kontrole v prohlížeči, 30. 8. 2026
   Šablona template_general vynucuje background: none !important na "ul li"
   (zopakováno na řádku 2744, aby šlo přebít). Každá karta, která je <li>
   a má mít plochu, proto potřebuje !important. Bez toho vyšly bílé dlaždice
   v panelu zakladatelky i karty provozu průhledné, změřeno přes cdp styles.
   --------------------------------------------------------------------------- */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__dlazdice-polozka,
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__misto,
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__osoba,
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__hoste { background: var(--zs-barva-pozadi-karta) !important; }

/* Fotka kuchaře z 118 na 100 px. Při 118 zbylo na text 171 px a věta
   "Sestavuje jídelníčky společně s nutričními terapeuty" se lámala po dvou
   slovech. Se 100 px je to 189 px. Měřeno na 1440 px. */
@media (min-width: 1024px) {
  .zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__osoba { grid-template-columns: 100px minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   Oprava starší vady, nalezená při kontrole 30. 8. 2026
   .zs-reference__foto má na řádku 782 width: calc(100 % + 2 x 24 px) a záporný
   margin, aby fotka přetekla k okrajům karty. Globální .zs26 img
   { max-width: 100 % } (řádek 2732) to ale ořízne zpátky na 100 %, takže fotka
   zůstala posunutá o 24 px doleva a vpravo v kartě zbývalo 48 px bílé plochy.
   Bylo to tak od 26. 8. 2026, kdy karty dostaly fotku. Vidět na 1440 i na 390 px.
   Třída je jen v modulu 07, jinam to nesahá (ověřeno grepem).
   --------------------------------------------------------------------------- */
.zs26.zs26-reference .zs-reference__foto { max-width: none; }

/* ===========================================================================
   Tmavá hlavička podstránky, sdílená pravidla
   Doplněno 31. 8. 2026, Marek: „sjednoť na tmavě zelenou".

   Do 30. 8. byly tmavé hlavičky jen na homepage, rozcestnících, stránkách
   programů a na objednávce. Pravidla pro ně vznikala scopovaná na konkrétní
   blok (.zs26-rozcestnik, .zs26-programy, .zs26-hero), takže na dalších
   stránkách neplatila. Tenhle blok je zobecňuje na kterýkoli blok ZS26.
   Starší scopované kopie se nechávají, mají tytéž hodnoty a nic nepřebíjejí.

   Co který řádek řeší:
   - H1: `#clanek` v template2024.css nese ID, takže ho selektor ze samých
     tříd nepřebije a nadpis vycházel #1F3F2A na #1F3F2A, neviditelný.
     Proto !important, ne vyšší specificita.
   - Drobečky: .zs-m-rozcestnik__drobecky si drží vlastní tlumenou barvu,
     na tmavém pásu vycházela na 2,5:1.
   - Sekundární tlačítko má bílou plochu a tmavý rámeček, na tmavém podkladu
     splývalo. Na tmavém je z něj obrys ve světlé barvě. !important je tady
     nutné, protože totéž pravidlo o pár set řádků výš je s !important.
   - Fajfka u výhod má barvu --zs-barva-ikona-check, tmavou olivovou.
   =========================================================================== */
.zs26 .zs-sekce--tmava .zs-h1,
.zs26 .zs-sekce--tmava .zs-h1-podstranka {
  color: var(--zs-barva-text-na-tmavem) !important;
}

.zs26 .zs-sekce--tmava .zs-m-rozcestnik__drobecky,
.zs26 .zs-sekce--tmava .zs-m-rozcestnik__drobecky a {
  color: var(--zs-barva-paticka-text-tlumeny);
}

.zs26 .zs-sekce--tmava .zs-tlacitko--sekundarni {
  background: transparent !important;
  border-color: var(--zs-barva-text-na-tmavem) !important;
  color: var(--zs-barva-text-na-tmavem) !important;
}
.zs26 .zs-sekce--tmava .zs-tlacitko--sekundarni:hover {
  background: var(--zs-barva-text-na-tmavem) !important;
  color: var(--zs-barva-text-nadpis) !important;
}

.zs26 .zs-sekce--tmava .zs-m-rozcestnik__vyhoda-ikona {
  color: var(--zs-barva-akce-primarni);
}

/* Text u fajfky ma --zs-barva-text-tlumeny, na tmavem podkladu 1,6:1.
   Bere tutez tlumenou svetlou jako perex, tam vychazi 8,2:1. */
.zs26 .zs-sekce--tmava .zs-m-rozcestnik__vyhoda {
  color: var(--zs-barva-paticka-text-tlumeny);
}

/* ---------------------------------------------------------------------------
   37-kdo-za-jidlem-v3, druhé kolo po Markově prohlídce 31. 8. 2026
   --------------------------------------------------------------------------- */

/* Číslo pod textem karty provozu. Marek: "ke každému tomu bodu bych napsal
   zajímavé číslo". Je to čtvrtý prvek karty, tedy strop podle pravidla
   o nejvýš čtyřech prvcích: fotka, nadpis, text, číslo. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__misto-cislo {
  margin-top: var(--zs-odstup-sm);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--zs-barva-text-nadpis);
  font-variant-numeric: tabular-nums;
}

/* Štítky přestaly být pilulky s obrysem. Marek: "vypadá to jako tlačítka".
   Obrys plus zaoblení pill je vzhled tlačítka, a tyhle prvky nikam nevedou.
   Teď je to odrážka s fajfkou, bez plochy a bez rámečku, tedy zjevně text.
   Text je delší (zkratky přeložené), proto se od 1024 px skládají pod sebe
   do jednoho sloupce na střed místo do jedné řady. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__stitky {
  flex-direction: column;
  align-items: center;
  gap: var(--zs-odstup-sm);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__stitek {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-sm);
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__stitek-ikona {
  flex: 0 0 auto;
  color: var(--zs-barva-ikona-vychozi);
}

/* ============================================================================
   38-stitky-a-odkaz, 31. 8. 2026
   Marek nejdriv chtel stitky laicky rozepsat, pak hotovou dvouurovnovou verzi
   zamitl: "za me je to moc textu... spis kratsi, at to pochopi moje mamka
   a odkaz do sekce o nas, at si tam prectou vic". Vysvetleni je proto na /o-nas
   a tady zustaly jednoradkove stitky plus jeden textovy odkaz pod nimi.

   Ze zamitnute verze zustava jedina vec, `align-items: stretch` na seznamu:
   vychozi `center` dela kazdy stitek siroky presne podle sveho textu
   a vycentrovany, takze fajfky nejsou pod sebou. Se stretch zacinaji vsechny
   na stejnem levem okraji. Kratsi texty to udelaly viditelnejsim, ne mensim.

   Odkaz NENI tlacitko, i kdyz vede na stejnou stranku jako zlute tlacitko
   o kus niz. Tam je to zaver sekce, tady doplnujici cteni k jednomu tvrzeni,
   a ctvrta vaha tlacitka na te strance uz tak visi jako nevyresene rozhodnuti.
   Barva je --zs-barva-ikona-vychozi #1F3F2A, na zlute #F1D511 to je 7,91 : 1.
   Popiskova --zs-barva-text-popisek #5F6C63 by dala 3,7 : 1 a neprosla AA.
   ========================================================================= */
/* Obal `fit-content`, ktery skupinu skutecne vycentruje, 31. 8. 2026.
   Marek: "stejne je ten text spatne zarovnany.. neni vystredeny doprostred
   stranky". Seznam mel `max-width: 720px; margin-inline: auto`, takze se
   centroval BLOK, ale text v nem zacinal u leve hrany a nejdelsi radek meri
   jen 435 px. Zmereno 31. 8. na 1440 px: stred panelu 720, stred skupiny
   stitku 577 a stred odkazu 527, tedy 143 a 193 px vlevo.
   `width: fit-content` na obalu ho zuzi na nejdelsi radek a teprve ten se
   centruje. Obsah uvnitr zustava zarovnany doleva, takze fajfky drzi pod sebou.
   `max-width: min(720px, 100%)` drzi dve veci: strop delky radku na sirokem
   panelu a na 390 px, kde je nejdelsi veta sirsi nez okno, padne obal na 100 %
   a text se lame jako predtim. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__zaruky {
  width: fit-content;
  max-width: min(720px, 100%);
  margin-inline: auto;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__stitky {
  align-items: stretch;
}
/* ----------------------------------------------------------------------------
   Karty provozu: nadpis nahore, cislo dole, 31. 8. 2026
   Marek: "a tohle neni hezky zarovnane porad". Zmereno na 1440 px: karty maji
   stejnou vysku 148 px, ale grid mel `align-items: center`, takze se kratsi
   telo vycentrovalo. Nadpis prvni karty (kratsi popis, dva radky) sedel
   o 11 px niz nez nadpisy zbylych dvou (tri radky).

   Reseni ma dve casti, obe nutne:
   1. Grid se vrati k vychozimu stretch a fotce se da `align-self: start`.
      Telo se tim natahne na vysku karty, fotka zustane ctvercova nahore.
   2. Telo je flex sloupec a cislo ma `margin-top: auto`, takze se prilepi
      ke spodni hrane. Tim sedi nadpisy nahore A cisla dole, ne jen jedno z toho.
      Selektor je o jednu tridu specifictejsi nez `.zs-kd2__misto-telo > * + *`
      vys v souboru, jinak by ho odsazeni sm prebilo.
   -------------------------------------------------------------------------- */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__misto {
  align-items: stretch;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__misto-foto {
  align-self: start;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__misto-telo {
  display: flex;
  flex-direction: column;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__misto-telo > .zs-kd2__misto-cislo {
  margin-top: auto;
  padding-top: var(--zs-odstup-sm);
}

/* Fajfka k prvnimu radku, ne na stred stitku. Na 390 px se vsechny tri
   stitky lamou na dva radky a s vychozim `center` sedela fajfka v mezere
   mezi nimi (mereno 31. 8. 2026). Odsazeni 3 px srovna 18px ikonu
   s prvnim radkem 15px textu. */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__stitek {
  align-items: flex-start;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__stitek-ikona {
  margin-top: 3px;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__stitky-vice {
  /* --zs-odstup-lg, ne sm. Mezera mezi stitky je sm (8 px) a se stejnou
     mezerou odkaz vypadal jako ctvrta odrazka, ktere chybi fajfka.
     20 px ho oddeli jako samostatny prvek. Centrovani uz resi obal vys,
     proto `0` misto `auto`. */
  margin: var(--zs-odstup-lg) 0 0;
  /* Na stred, ne pod text stitku. Marek jmenoval mezi spatne zarovnanymi vecmi
     i tenhle odkaz. Obal ma fit-content a je vycentrovany, takze `center` uvnitr
     nej trefi stred panelu. Odsazeni na sirku fajfky (calc 18px + sm), ktere tu
     bylo predtim, ho drzelo u leve hrany textu, tedy 51 px vlevo od stredu. */
  text-align: center;
  font-size: 15px;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__stitky-odkaz {
  color: var(--zs-barva-ikona-vychozi);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__stitky-odkaz:hover,
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__stitky-odkaz:focus-visible {
  text-decoration-thickness: 2px;
}

/* ----------------------------------------------------------------------------
   Nutricni poradenstvi uvnitr zluteho panelu, 31. 8. 2026
   Marek: "vlozme primo pod ty usp, at to neni mimo ten box... a dal bych tam
   jen odkaz, kde se dozvi vic, bez cisla". Radka se presunula z bile plochy
   pod panelem dovnitr panelu, pod dlazdice, a telefon z ni vypadl.

   Barvy se musely prebit, obe puvodni na zlute #F1D511 nestaci nebo tesne
   nestaci (dopocet WCAG 2.2, 31. 8. 2026):
   --zs-barva-text-tlumeny #4E5A50 da 4,92 : 1, projde, ale vedle tucneho
   textu dlazdic pusobi vybledle, proto --zs-barva-text-zakladni #1D1D1D, 11,45 : 1.
   --zs-barva-text-odkaz #4E6600 da 4,42 : 1 a AA pro bezny text (4,5) NEPROJDE.
   Odkaz proto bere --zs-barva-ikona-vychozi #1F3F2A, 7,91 : 1, s podtrzenim,
   stejne jako odkaz pod stitky nize.
   -------------------------------------------------------------------------- */
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__panel .zs-kd2__poradna {
  margin: var(--zs-odstup-base) 0 0;
  color: var(--zs-barva-text-zakladni);
}
.zs26.zs26-kdo-za-jidlem-stoji .zs-kd2__panel .zs-kd2__poradna-odkaz {
  margin-left: var(--zs-odstup-sm);
  color: var(--zs-barva-ikona-vychozi);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   58-jak-to-funguje-stranka
   Ctyri kroky misto tri na podstrance /jak-to-funguje (1. 9. 2026).

   Cely vzhled kroku uz existuje v bloku 34-jak-to-funguje-v3, ktery kresli
   modul 883 na homepage. Tady se nic neopisuje: wrapper v tele clanku 32 nese
   i tridu .zs26-jak-to-funguje, takze zdedi vsechno, a .zs26-jtf jen prepne
   pocet sloupcu a sirku. Kdyz se zmeni v3, zmeni se obe mista naraz, coz je
   zamer: je to jedna komponenta, ne dve.

   Sirka: tri kroky se veslou do 940 px, ctyri potrebuji vic, jinak se text
   pod kolecky laame na ctyri radky. Kotva je sirka obsahu 1180.

   Predloha: Figma ZS-wireframe, stranka 80 Jak to funguje, frame Desktop 1440.
   --------------------------------------------------------------------------- */
.zs26.zs26-jtf .zs-m-postup__perex {
  max-width: 60ch;
  margin: 0 auto var(--zs-odstup-2xl);
  text-align: center;
  color: var(--zs-barva-text-tlumeny);
}

@media (min-width: 700px) {
  .zs26.zs26-jtf .zs-m-postup__kroky--ikony {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: var(--zs-sirka-obsah, 1180px);
  }
  /* Ve dvou sloupcich ukazuje spojnice u sudych kroku do prazdna. */
  .zs26.zs26-jtf .zs-krok-ikona:nth-child(2n) .zs-krok-ikona__spojnice {
    display: none;
  }
}

@media (min-width: 1024px) {
  .zs26.zs26-jtf .zs-m-postup__kroky--ikony {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .zs26.zs26-jtf .zs-krok-ikona:nth-child(2n) .zs-krok-ikona__spojnice {
    display: block;
  }
  .zs26.zs26-jtf .zs-krok-ikona:last-child .zs-krok-ikona__spojnice {
    display: none;
  }
}

/* Zaverecny pas CTA v tele clanku. Sekce kolem nej ma vlastni odsazeni,
   pas uz zadne nepotrebuje. */
.zs26.zs26-jtf-cta {
  margin-top: var(--zs-odstup-sekce);
}

/* Pas fotek na /jak-to-funguje. Komponenta .zs-pas-fotek je stavena na mrizku
   modulu, v tele clanku ji staci dat spodni odsazeni a poznamce pod ni odsadit
   od posuvniku. Polozka je 300 px siroka a na desktopu se ctyri vedle sebe
   do 1180 vejdou, takze se posouva jen na uzkych oknech. */
.zs26.zs26-jtf-fotky {
  margin: var(--zs-odstup-2xl) 0 var(--zs-odstup-sekce);
}
.zs26.zs26-jtf-fotky .zs26-jtf-fotky__pozn {
  margin: var(--zs-odstup-md) 0 0;
  color: var(--zs-barva-text-popisek);
}

/* ---------------------------------------------------------------------------
   58-jak-to-funguje-stranka, obnoveno 1. 9. 2026
   Tyhle tri pravidla ze souboru zmizely pri soubeznem zapisu ctvrte session,
   ktera nahrala novy-2026.css nad stavem, co precetla drive. Projevilo se to
   tim, ze druha akce v tmavem pasu CTA mela barvu --zs-barva-text-odkaz
   (rgb(78,102,0)) na tmave zelene, tedy prakticky necitelnou.
   Zdroj pravdy je css-partials/58-jak-to-funguje-stranka.css, odtud obnoveno.

   1. 9. 2026 vecer: z tohohle bloku smazane pravidlo
   .zs26.zs26-jtf-cta { margin-top: var(--zs-odstup-sekce); }, protoze uz stoji
   nad timhle komentarem a obnova ho pridala podruhe. Deklarace byly shodne,
   takze se nic nekreslilo spatne, ale duplikat prezije lint i pojistku
   na selektory a najde ho az porovnani dvojic selektor plus telo.
   V partialu 58 je to pravidlo jednou, tohle neni odchylka od nej.
   --------------------------------------------------------------------------- */
.zs26.zs26-jtf-cta .zs-pas-cta--tmavy .zs-pas-cta__odkaz {
  display: inline-flex;
  align-items: center;
  min-height: var(--zs-vyska-tlacitko);
  color: var(--zs-barva-text-na-tmavem);
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
}
.zs26.zs26-jtf-cta .zs-pas-cta--tmavy .zs-pas-cta__odkaz:hover { text-decoration: none; }
.zs26.zs26-jtf .zs-m-postup__perex {
  margin-left: 0;
  text-align: left;
}



/* ===== blok-8b-velka-fotka-hlavicky.css ===== */
/* Znacka je tu proto, aby blok poznaly nastroje, ktere sdileny soubor
   prepisuji po blocich (napr. vymen-blok.py). Bez ni se pravidla na konci
   souboru nepocitaji jako blok a sousedni session hlasi 'za mnou zustava
   0 cizich bloku', i kdyz tam neco je. Doplneno 1. 9. 2026 vecer na podnet
   session, ktera stavela /o-nas. */
/* ---------------------------------------------------------------------------
   8b. Hero rozcestniku a katalogu: velka fotka az k prave hrane okna
   1. 9. 2026. Marek poslal snimek /rozvoz ("kde mame v hlavicce fotku a text
   jako je tato") a snimek /jak-to-funguje/priprava ("chci zvetsit fotku, tak
   jak to mame tady"), jako cil pak urcil primo /jak-to-funguje.

   Zmereno na 1440 px pred zmenou, sirka fotky, podil sirky okna, prava hrana
   od okraje okna, zaobleni, zelena nad a pod:
     /jak-to-funguje       720 px  50,0 %    0 px  radius 0   0 / 0    CIL
     /jak-to-funguje/faq   538 px  37,4 %  150 px  radius 24  64 / 64
     rozcestniky, katalog  410 px  28,5 %  150 px  radius 24  64 / 64
     /rozvoz               538 px  37,4 %  154 px  radius 24  44 / 44  vyjimka

   Plati od 700 px. Pod 700 px se zamerne nemeni nic: fotka je tam karta 3:2
   s odsazenim 20 px a zaoblenim 24, zavedeno 30. 8. na Markuv pokyn "na mobilu
   nejde videt fotka" a stejne to ma i stara rodina v 70-clanky.css bloku 5.

   OBE VYJIMKY PADLY vecer 1. 9., Marek poslal tri adresy s tim, ze to tam
   chybi: /rozvoz, /o-nas a /nutricni-poradna.
   - /nutricni-poradna je uz tady, blok proto neni scopnuty pres
     :not(.zs26-poradenstvi) jako v prvni verzi. Puvodni obava byla, ze natazeni
     urizne krajni dve specialistky ze skupinovky; nerealizovala se, protoze slot
     je 1,6 a zdroj 4:3, takze se orezava svisle, ne do stran. Overeno okem.
   - /rozvoz ma vlastni .zs-rozvoz__hlavicka v jinem baliku, resi ho
     27/css/novy-2026-rozvoz.css.
   - /o-nas melo velikost spravne uz predtim (720 px, 50,0 %, prava hrana 0),
     chybel jen prechod do pasu. Dostava proto jen ::before, nic jineho.

   Zaobleni se prebiji poradim, ne !important: sdilene
   .zs-m-rozcestnik__hero-foto { border-radius: var(--zs-radius-velke) } je
   vys v souboru, tenhle blok je za nim, a obrazek ma border-radius: inherit.

   Vraceni: novy-2026.css.pred-velka-fotka-hlavicky, postup v 25/VRACENI.md.
   --------------------------------------------------------------------------- */

@media (min-width: 700px) {
  /* Pas i kontejner ustoupi, aby fotka mohla k hrane okna. Sekce hera
     neobsahuje nic jineho nez hero, overeno v nasazeni/rozcestniky/*.html,
     takze zruseni odsazeni nic dalsiho nepostihne. Svisly rytmus 64 px
     prebira textovy sloupec, cimz se cislo nemeni, jen se stehuje. */
  .zs26 .zs-sekce--tmava:has(> .zs-obsah > .zs-m-rozcestnik__hero) {
    padding-block: 0;
  }
  .zs26 .zs-obsah:has(> .zs-m-rozcestnik__hero) {
    max-width: none;
    padding: 0;
  }
  .zs26 .zs-m-rozcestnik__hero { gap: 0; }

  /* Leva hrana textu na ose obsahu, tyz vzorec jako u stare rodiny
     (70-clanky.css blok 1): obsah zacina na max(bocni odsazeni,
     (sirka okna - 1180) / 2 + bocni odsazeni). Procentni padding se pocita
     ze sirky vztazneho ramce, tedy tady z bunky mrizky. Mezi 700 a 1023 px
     je mrizka jednosloupcova, bunka je siroka jako okno, takze 50 % je
     polovina okna a vzorec vyjde presne. Bez vw, ten pocita i posuvnik. */
  .zs26 .zs-m-rozcestnik__hero-text {
    box-sizing: border-box;
    padding-block: var(--zs-odstup-sekce);
    padding-inline: max(
      var(--zs-odstup-lg),
      calc(50% - var(--zs-sirka-obsah) / 2 + var(--zs-odstup-lg))
    );
  }

  .zs26 .zs-m-rozcestnik__hero-foto { border-radius: 0; }

  /* Obrazek si drzi vlastnich 16 px, i kdyz je obal na nule, takze v rozich
     prosvita zeleny pas. Dela to `#clanek img:not([class])` v 60-zaklad.css
     (1 id, 3 tridy, 2 elementy), moje tridy ho nepreberou. Skin to nema jako
     !important, takze staci jedna vyjimka. Projevilo se to az ted: dokud mel
     obal 24, orez prekryl 16 a videt to nebylo. Zmereno 1. 9. vecer na rohu
     vpravo dole na /hubnu, zelena vysec ve fotce. /rozvoz tuhle vadu nema,
     jeho hlavicka je modul mimo #clanek. */
  .zs26 .zs-m-rozcestnik__hero-foto > img { border-radius: 0 !important; }
}

@media (min-width: 1024px) {
  /* Presne polovina okna. Do 1. 9. to bylo 1,7fr ku 1fr uvnitr kontejneru
     1180 px, tedy fotka 410 px a 28,5 % sirky okna. */
  .zs26 .zs-m-rozcestnik__hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Od 1024 px je mrizka dvousloupcova, bunka je siroka jako polovina okna,
     takze tyz vzorec bere 100 % misto 50 %. Pri 1440 px vyjde
     720 - 590 + 20 = 150 px, tedy tataz osa, na ktere stoji #clanek.

     min-height patri na textovy sloupec, ne na .zs-m-rozcestnik__hero.
     Na kontejneru se pod 1024 px rozdeli mezi dva zalomene radky a fotka
     spadne na nulu; tataz past je zapsana v 70-clanky.css u .text. */
  .zs26 .zs-m-rozcestnik__hero-text {
    padding-inline: max(
        var(--zs-odstup-lg),
        calc(100% - var(--zs-sirka-obsah) / 2 + var(--zs-odstup-lg))
      )
      var(--zs-odstup-2xl);
    min-height: 400px;
  }

  /* Prechod z fotky do pasu, jako .stin stare rodiny: 150 px zleva, barva
     pasu do prusvitna. Zamerne az od 1024 px. Mezi 700 a 1023 px je fotka
     samostatny radek pres celou sirku a svisly gradient by na ni byl
     vodorovny sev, ne prechod; stara rodina resi tentyz problem skrytim
     .stin na zalomenem mobilu (70-clanky.css blok 5). */
  .zs26 .zs-m-rozcestnik__hero-foto { position: relative; }
  .zs26 .zs-m-rozcestnik__hero-foto::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 150px;
    background-image: linear-gradient(to right, var(--zs-barva-pozadi-tmave), transparent);
  }
}

/* ---------------------------------------------------------------------------
   8c. Dodatky z veceru 1. 9. 2026: poradenstvi a O nas
   --------------------------------------------------------------------------- */

@media (min-width: 700px) {
  /* Poradenstvi si do 1. 9. drzelo vlastni pomer 4:3 a align-self: center,
     protoze puvodni slot byl skoro ctverec a natazeni by ze skupinovky trech
     specialistek urizlo krajni dve. Novy slot je zhruba 1,6 a zdroj 4:3, takze
     se orezava svisle, ne do stran, a vsechny tri zustavaji cele. Prebiji se
     poradim: tenhle blok je na konci souboru, puvodni pravidlo vys. */
  .zs26.zs26-poradenstvi .zs-m-rozcestnik__hero-foto {
    aspect-ratio: auto;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    border-radius: 0;
  }
}

@media (min-width: 1024px) {
  /* O nas melo velikost spravne uz pred timhle zasahem, chybel jen prechod
     fotky do pasu, ktery ma stara rodina pres .stin a rozcestniky pres ::before.
     .zs26-o-nas__hero-foto uz je position: absolute, takze se ::before posadi
     do nej. Nic jineho se na te strance nemeni. */
  .zs26 .zs26-o-nas__hero-foto::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 150px;
    background-image: linear-gradient(to right, var(--zs-barva-pozadi-tmave), transparent);
  }
}

/* ===== konec blok-8b-velka-fotka-hlavicky.css ===== */

/* ===== 57-o-nas.css =====
   Stránka /o-nas, článek 66. Přestavba podle grafiky Lucie Soukupové z 1. 9. 2026.
   Celá stránka je jeden blok .zs26.zs26-o-nas uvnitř článku, stejný vzor jako
   rozcestníky. Návrh ve Figmě: stránka 90 O nás, uzly 664:3 a 680:160.

   Ikony jsou mask-image s data-zs-ikona, kánon viewBox 24, tah 1 (u mapy 1,5).
   Odchylka od kánonových 1,5: ikony jsou tu 34 až 52 px, ne 26 px jako u nadpisů
   v článku, a při 1,5 vypadají výrazně tučněji než předloha. Poměr 1/24 je stejný,
   jaký používá modul 04. Doloženo třemi koly vizuálního porovnání, viz
   podklady/ikony-o-nas.md.

   Mřížka: obsah 1180 px přes .zs-obsah, hero fotka jde přes pravý okraj ven
   (position absolute, ne stretch: obrázek v toku by nafoukl řádky mřížky). */

.zs26-o-nas h2,
.zs26-o-nas h3,
.zs26-o-nas h4 { color: var(--zs-barva-text-nadpis); }

.zs26-o-nas p { color: var(--zs-barva-text-zakladni); }

.zs26 .zs26-o-nas__ikona {
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  background-color: var(--zs-barva-ikona-vychozi);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* mapa ČR má poměr zhruba 2:1, ve čtverci by byla o třetinu menší než ostatní */
.zs26 .zs26-o-nas__ikona--mapa { width: 52px; height: 52px; }

/* ---------- 01 hero ---------- */

.zs26-o-nas__hero { position: relative; overflow: hidden; }

.zs26-o-nas__hero-mrizka { position: relative; z-index: 1; }
/* fotka je sourozenec .zs-obsah, pozicuje se vůči pásu, ne vůči obsahové mřížce */

.zs26-o-nas__drobecky {
  font-size: 14.5px;
  margin: 0 0 14px;
  color: var(--zs-barva-paticka-text-tlumeny);
}
.zs26-o-nas__drobecky a { color: var(--zs-barva-paticka-text-tlumeny); }

.zs26-o-nas__hero h1 { color: var(--zs-barva-text-na-tmavem); margin: 0 0 18px; }

.zs26-o-nas__hero .zs-perex,
.zs26-o-nas__hero-veta,
.zs26-o-nas__hero p { color: var(--zs-barva-text-na-tmavem); }

.zs26-o-nas__hero .zs-perex { margin: 0 0 10px; }
.zs26-o-nas__hero-veta { margin: 0 0 30px; font-size: 17px; }

.zs26 .zs26-o-nas__fakta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.zs26 .zs26-o-nas__fakta li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.zs26 .zs26-o-nas__fakta .zs26-o-nas__ikona {
  background-color: var(--zs-barva-akce-primarni);
  margin-bottom: 8px;
}
.zs26 .zs26-o-nas__fakta strong {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--zs-barva-text-na-tmavem);
}
.zs26 .zs26-o-nas__fakta span { font-size: 13px; color: var(--zs-barva-text-na-tmavem); }
/* pevná výška obalu ikony drží čísla na jedné lince i u vyšší mapy */
.zs26 .zs26-o-nas__fakta .zs26-o-nas__ikona { height: 42px; width: 32px; }
.zs26 .zs26-o-nas__fakta .zs26-o-nas__ikona--mapa { width: 42px; }

@media (min-width: 700px) {
  .zs26 .zs26-o-nas__fakta { display: flex; gap: 44px; }
  .zs26 .zs26-o-nas__fakta strong { font-size: 30px; }
  .zs26 .zs26-o-nas__fakta span { font-size: 15px; }
  .zs26 .zs26-o-nas__fakta .zs26-o-nas__ikona { height: 52px; width: 42px; }
  .zs26 .zs26-o-nas__fakta .zs26-o-nas__ikona--mapa { width: 52px; }
}

.zs26-o-nas__hero-odkaz { margin: 0; }
.zs26-o-nas__hero-odkaz a {
  color: var(--zs-barva-akce-primarni);
  font-weight: 500;
  text-decoration: underline;
}

/* Na mobilu je fotka nad textem a přes celou šířku, jako v návrhu.
   Sekce má overflow: hidden, takže full-bleed přes 100vw nevyrobí vodorovný posuv. */
.zs26 .zs26-o-nas__hero { display: flex; flex-direction: column; padding-top: 0 !important; }
.zs26-o-nas__hero-foto {
  order: -1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.zs26-o-nas__hero-foto img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) {
  .zs26-o-nas__hero-mrizka { max-width: var(--zs-sirka-obsah); padding-right: 56px; }
  .zs26-o-nas__hero-text { max-width: 560px; }
  .zs26 .zs26-o-nas__hero { display: block; padding-top: var(--zs-odstup-sekce) !important; }
  .zs26-o-nas__hero-foto {
    display: block;
    order: 0;
    /* polovina šířky okna. Předloha má 51 %, měřeno na grafice od Lucie
       (hranice tmavého pásu a fotky na třech řádcích: 50,3 / 52,8 / 51,1 %),
       a stejnou polovinu mají i ostatní podstránky s tmavou hlavičkou. */
    width: 50%;
    margin-left: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
  }
  .zs26-o-nas__hero-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* ---------- 02 čím jsme jiní ---------- */

.zs26 .zs26-o-nas__duvody {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.zs26 .zs26-o-nas__duvod {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 0;
  padding: 24px;
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
}
.zs26 .zs26-o-nas__duvod h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.35; }
.zs26 .zs26-o-nas__duvod p { margin: 0; font-size: 16px; line-height: 1.55; }

@media (min-width: 700px) {
  .zs26 .zs26-o-nas__duvody { grid-template-columns: 1fr 1fr; }
}

/* ---------- 03 zakladatelka ---------- */

.zs26-o-nas__zakladatelka { display: grid; gap: 28px; align-items: center; }
.zs26-o-nas__zakladatelka-foto img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--zs-radius-karta);
}
.zs26-o-nas__zakladatelka-text h2 { margin: 0 0 16px; }
.zs26-o-nas__zakladatelka-text p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; }

.zs26-o-nas__box {
  background: var(--zs-barva-pozadi-sekce);
  border-radius: var(--zs-radius-karta);
  padding: 20px 22px;
}
.zs26-o-nas__box p { margin: 0; font-size: 16px; }

@media (min-width: 1024px) {
  .zs26-o-nas__zakladatelka { grid-template-columns: 430px 1fr; gap: 56px; }
}

/* ---------- 04 lidé ---------- */

.zs26-o-nas__tym { display: grid; gap: 24px; align-items: center; margin: 28px 0 36px; }
.zs26-o-nas__tym-text h3 { margin: 0 0 10px; font-size: 22px; }
.zs26-o-nas__tym-text p { margin: 0; font-size: 17px; line-height: 1.6; }

.zs26 .zs26-o-nas__portrety {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zs26 .zs26-o-nas__portrety li { margin: 0; padding: 0; }
.zs26 .zs26-o-nas__portrety img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--zs-radius-karta);
}

/* Jedna skupinová fotka místo tří portrétů, 1. 9. 2026 večer.
   Pravidla pro .zs26-o-nas__portrety nad tímhle zůstávají, i když je stránka
   dnes nepoužívá: až budou fotky poradkyň nafocené na výšku, vrátí se ta řádka
   beze změny CSS. Zápis o důvodu je v HTML článku u samotné figure.
   Šířku má fotka pevnou, ne auto: sloupec je `1fr auto` a snímek 4:3
   by jinak sebral půlku pásu a text vedle by se zalomil do sloupce 320 px. */
.zs26 .zs26-o-nas__tym-foto {
  margin: 0;
  padding: 0;
}
.zs26 .zs26-o-nas__tym-obrazek {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--zs-radius-karta);
}

.zs26-o-nas__podnadpis { margin: 0 0 10px; font-size: 22px; }

.zs26 .zs26-o-nas__kuchari {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 18px 0 36px;
  padding: 0;
  list-style: none;
}
.zs26 .zs26-o-nas__kuchari li {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-doporucena);
  border-radius: var(--zs-radius-karta);
}
.zs26 .zs26-o-nas__kuchari img {
  width: 130px;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}
.zs26 .zs26-o-nas__kuchari div { padding: 18px 22px; }
.zs26 .zs26-o-nas__kuchari h4 { margin: 0 0 2px; font-size: 20px; }
.zs26 .zs26-o-nas__kuchari p { margin: 0; font-size: 15px; color: var(--zs-barva-text-tlumeny); }

@media (min-width: 700px) {
  .zs26 .zs26-o-nas__kuchari { grid-template-columns: 1fr 1fr; }
  .zs26 .zs26-o-nas__kuchari img { width: 200px; min-height: 190px; }
}
@media (min-width: 1024px) {
  .zs26-o-nas__tym { grid-template-columns: 1fr auto; gap: 40px; }
  .zs26 .zs26-o-nas__portrety { grid-template-columns: repeat(3, 150px); }
  /* 478 px byla šířka řádky tří portrétů, jedna fotka na její místo sedne
     beze změny zbytku pásu. Zdroj je 960 px široký, tedy 2,0x, což je hranice
     ostrosti, kterou drží ostatní fotky na stránce. */
  .zs26 .zs26-o-nas__tym-foto { width: 478px; }
}

/* ---------- 05 časová osa ---------- */

.zs26-o-nas__osa-nadpis { font-size: clamp(24px, 2.4vw, 30px); }

.zs26 .zs26-o-nas__osa {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.zs26 .zs26-o-nas__osa li {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  margin: 0;
  padding: 0 0 22px;
  position: relative;
}
.zs26 .zs26-o-nas__osa .zs26-o-nas__ikona {
  grid-column: 1;
  grid-row: 1;
  margin: 0 auto 8px;
  width: 34px;
  height: 34px;
}
.zs26 .zs26-o-nas__osa .zs26-o-nas__ikona--mapa { width: 42px; height: 42px; }
/* Puntík je limetkový podle předlohy, ale limetka má na bílé 1,66:1, tedy pod
   prahem 3,0 pro nesouvislou grafiku. Tmavý obrys v barvě čáry ho dostane nad práh
   a vizuálně zůstane limetkový. Změřeno 1. 9. 2026. */
.zs26-o-nas__puntik {
  grid-column: 1;
  grid-row: 2;
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--zs-barva-akce-primarni);
  border: 1.5px solid var(--zs-barva-text-nadpis);
  box-sizing: content-box;
  position: relative;
  z-index: 1;
}
.zs26 .zs26-o-nas__osa strong {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 18px;
  font-weight: 600;
  color: var(--zs-barva-text-nadpis);
}
.zs26 .zs26-o-nas__osa span:not(.zs26-o-nas__ikona):not(.zs26-o-nas__puntik) {
  grid-column: 2;
  grid-row: 2;
  font-size: 15px;
  line-height: 1.5;
  color: var(--zs-barva-text-zakladni);
}
/* svislá spojnice mezi puntíky, na posledním bodu se nekreslí */
.zs26 .zs26-o-nas__osa li::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 48px;
  bottom: 0;
  width: 2px;
  background: var(--zs-barva-text-nadpis);
}
.zs26 .zs26-o-nas__osa li:last-child::after { display: none; }

@media (min-width: 1024px) {
  .zs26-o-nas__osa-nadpis { text-align: center; }
  .zs26 .zs26-o-nas__osa {
    grid-template-columns: repeat(5, 1fr);
    margin-top: 36px;
  }
  .zs26 .zs26-o-nas__osa li {
    grid-template-columns: 1fr;
    grid-template-rows: 52px 30px auto auto;
    justify-items: center;
    text-align: center;
    padding: 0 8px;
  }
  .zs26 .zs26-o-nas__osa .zs26-o-nas__ikona {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin: 0 0 10px;
    width: 42px;
    height: 42px;
  }
  .zs26 .zs26-o-nas__osa .zs26-o-nas__ikona--mapa { width: 52px; height: 52px; }
  /* na desktopu je bod jednosloupcový: ikona, puntík, rok a text pod sebou.
     grid-column se musí přepsat u všech, jinak zůstane implicitní druhý sloupec
     z mobilní varianty a puntík se vysype vlevo mimo vodorovnou čáru.
     Změřeno na testu 1. 9. 2026: grid-template-columns hlásilo "42px 162px". */
  .zs26-o-nas__puntik {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    width: 14px;
    height: 14px;
  }
  .zs26 .zs26-o-nas__osa strong {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    margin-bottom: 4px;
  }
  .zs26 .zs26-o-nas__osa span:not(.zs26-o-nas__ikona):not(.zs26-o-nas__puntik) {
    grid-column: 1;
    grid-row: 4;
  }
  /* vodorovná čára: půlka doleva a půlka doprava od puntíku, krajní body jen dovnitř */
  .zs26 .zs26-o-nas__osa li::after {
    left: 0;
    right: 0;
    top: 68px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .zs26 .zs26-o-nas__osa li:first-child::after { left: 50%; }
  .zs26 .zs26-o-nas__osa li:last-child::after { display: block; right: 50%; }
}

/* ---------- 06 provoz ---------- */

.zs26-o-nas__provoz { display: grid; gap: 28px; margin: 24px 0 0; }
.zs26-o-nas__provoz-foto img {
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: cover;
  display: block;
  border-radius: var(--zs-radius-karta);
}
.zs26-o-nas__provoz-foto .zs-popisek { margin: 14px 0 0; }

.zs26 .zs26-o-nas__provoz-karty {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}
.zs26 .zs26-o-nas__provoz-karty li {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 22px 24px;
  background: var(--zs-barva-pozadi-karta);
  border-radius: var(--zs-radius-karta);
}
.zs26 .zs26-o-nas__provoz-karty strong {
  display: block;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--zs-barva-text-nadpis);
}
.zs26 .zs26-o-nas__provoz-karty span { font-size: 15.5px; color: var(--zs-barva-text-zakladni); }

.zs26-o-nas__akce { margin: 28px 0 0; }

/* Tlačítko pod logy médií, 1. 9. 2026 večer. Modifikátor, ne změna základní
   třídy: tutéž třídu nese i tlačítko v sekci Vaříme si sami, kde má zůstat
   vlevo pod odstavcem. 44 px místo 28: loga jsou tenká, sedí na účaří a
   tlačítko pod nimi na 28 px vypadalo, jako by patřilo k poslednímu logu. */
.zs26 .zs26-o-nas__akce--stred {
  margin-top: 44px;
  text-align: center;
}

@media (min-width: 1024px) {
  .zs26-o-nas__provoz { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
}

/* ---------- 07 kontroly ---------- */

.zs26-o-nas__uvod {
  max-width: 880px;
  margin: 16px 0 26px;
  font-size: 16.5px;
  line-height: 1.6;
}
.zs26 .zs-sekce--tmava .zs26-o-nas__uvod { color: var(--zs-barva-text-na-tmavem); }
.zs26 .zs-sekce--tmava h2 { color: var(--zs-barva-text-na-tmavem); }

.zs26 .zs26-o-nas__kontroly {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zs26 .zs26-o-nas__kontroly li {
  margin: 0;
  padding: 24px;
  background: var(--zs-barva-pozadi-karta);
  border-radius: var(--zs-radius-karta);
}
.zs26 .zs26-o-nas__kontroly h3 { margin: 12px 0 10px; font-size: 19px; line-height: 1.35; }
.zs26 .zs26-o-nas__kontroly p { margin: 0; font-size: 15.5px; line-height: 1.55; }

@media (min-width: 700px) {
  .zs26 .zs26-o-nas__kontroly { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 08 loga médií ---------- */

.zs26 .zs26-o-nas__loga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px 32px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.zs26 .zs26-o-nas__loga li { margin: 0; padding: 0; }
.zs26 .zs26-o-nas__loga img { display: block; width: auto; }
/* Loga nesmí mít zaoblení. Dává jim ho `#clanek img:not([class])` z 60-zaklad.css,
   selektor s id má (1,1,1) a `.zs26 .zs26-o-nas__loga img` (0,2,1) ho nepřebije.
   U log na průhledném pozadí to není vidět, u Blesku pro ženy, který je celý
   červená plocha 46 x 46, vypadalo logo jako ikona aplikace. Nalezeno až
   zvětšením rohu na snímku, měření hlásilo správné rozměry. 1. 9. 2026. */
.zs26 .zs26-o-nas__loga img { border-radius: 0 !important; }
/* výšky jsou dorovnané podle vizuální váhy, ne podle rámečku souboru:
   část log má kolem sebe v PNG prázdné okraje */
.zs26 .zs26-o-nas__loga li:nth-child(1) img { height: 30px; }
.zs26 .zs26-o-nas__loga li:nth-child(2) img { height: 30px; }
.zs26 .zs26-o-nas__loga li:nth-child(3) img { height: 23px; }
.zs26 .zs26-o-nas__loga li:nth-child(4) img { height: 26px; }
.zs26 .zs26-o-nas__loga li:nth-child(5) img { height: 46px; }
.zs26-o-nas__logo-text {
  font-size: 18px;
  font-weight: 500;
  color: var(--zs-barva-text-nadpis);
}

/* ---------- 09 CTA ---------- */

.zs26-o-nas__cta {
  display: grid;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
}
.zs26-o-nas__cta h2 { margin: 0 0 6px; font-size: 24px; }
.zs26-o-nas__cta p { margin: 0; }
.zs26-o-nas__cta-akce { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* Fotka jídla v pásu, 1. 9. 2026 večer. Do té doby to byl holý pás
   na světle zelené ploše, nadpis vlevo a dvě tlačítka vpravo.
   Karta má bílou plochu, takže se od zeleného pásu oddělí, a fotka jde
   od kraje ke kraji karty, oblé rohy jí ořezává obal (overflow: hidden).
   Na mobilu je fotka nad textem a je nízká (poměr 16:9), aby nevytlačila
   tlačítka pod přehyb. */
.zs26 .zs26-o-nas__cta-foto {
  margin: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.zs26 .zs26-o-nas__cta-obrazek {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  max-width: none !important;
}
.zs26 .zs26-o-nas__cta-telo { padding: 26px 28px; }

@media (min-width: 700px) {
  .zs26-o-nas__cta { grid-template-columns: 300px minmax(0, 1fr); }
  .zs26 .zs26-o-nas__cta-foto { aspect-ratio: auto; height: 100%; }
  .zs26 .zs26-o-nas__cta-telo { padding: 32px 36px; }
}
@media (min-width: 1024px) {
  .zs26-o-nas__cta { grid-template-columns: 380px minmax(0, 1fr); }
  /* Text a tlačítka pod sebou, ne vedle sebe. Zkoušel jsem řádek se
     `space-between`, ale text potřebuje 260 px a dvojice tlačítek 420,
     takže se ve zbylých 680 px stejně zalomila. Zalomený řádek vypadá jako
     vada, tenhle zápis říká, že je to záměr. */
  .zs26 .zs26-o-nas__cta-telo { padding: 36px 40px; }
  .zs26 .zs26-o-nas__cta-akce { margin-top: 20px; }
}

/* ---------- 10 věděli jste ---------- */

.zs26-o-nas__vedeli {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 26px 28px;
  background: var(--zs-barva-pozadi-sekce);
  border-radius: var(--zs-radius-karta);
}
.zs26-o-nas__vedeli h2 { margin: 0 0 4px; font-size: 20px; }
.zs26-o-nas__vedeli p { margin: 0; font-size: 16.5px; line-height: 1.58; }

@media (min-width: 1024px) {
  .zs26-o-nas__vedeli { align-items: center; }
}

/* Blok je od 1. 9. 2026 večer uvnitř sekce s časovou osou, ne v sekci vlastní.
   Odsazení proto nese sám, sekce už žádné nepřidá. 36 px je odstup, který mají
   od sebe bloky uvnitř jedné sekce jinde na stránce (.zs26-o-nas__tym má 36 dole). */
.zs26 .zs26-o-nas__vedeli--pod-osou { margin-top: 36px; }
.zs26 .zs26-o-nas__ikona[data-zs-ikona="budova"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2.4%2020.6h19.2'%2F%3E%3Cpath%20d%3D'M5%2020.6V9.4h4.4'%2F%3E%3Cpath%20d%3D'M9.4%2020.6V3.4h5.2v17.2'%2F%3E%3Cpath%20d%3D'M14.6%209.4H19v11.2'%2F%3E%3Cpath%20d%3D'M10.9%2020.6v-3.2h2.2v3.2'%2F%3E%3Cpath%20d%3D'M11%206.3v.9M13%206.3v.9M11%209.4v.9M13%209.4v.9M11%2012.5v.9M13%2012.5v.9'%2F%3E%3Cpath%20d%3D'M6.9%2012.3v.9M6.9%2015.4v.9M17.1%2012.3v.9M17.1%2015.4v.9'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2.4%2020.6h19.2'%2F%3E%3Cpath%20d%3D'M5%2020.6V9.4h4.4'%2F%3E%3Cpath%20d%3D'M9.4%2020.6V3.4h5.2v17.2'%2F%3E%3Cpath%20d%3D'M14.6%209.4H19v11.2'%2F%3E%3Cpath%20d%3D'M10.9%2020.6v-3.2h2.2v3.2'%2F%3E%3Cpath%20d%3D'M11%206.3v.9M13%206.3v.9M11%209.4v.9M13%209.4v.9M11%2012.5v.9M13%2012.5v.9'%2F%3E%3Cpath%20d%3D'M6.9%2012.3v.9M6.9%2015.4v.9M17.1%2012.3v.9M17.1%2015.4v.9'%2F%3E%3C%2Fsvg%3E");
}
.zs26 .zs26-o-nas__ikona[data-zs-ikona="hrnec"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4.8%2011.6h14.4v5.1a2.8%202.8%200%200%201-2.8%202.8H7.6a2.8%202.8%200%200%201-2.8-2.8z'%2F%3E%3Crect%20x%3D'2.7'%20y%3D'12.7'%20width%3D'2.6'%20height%3D'2.5'%20rx%3D'1.25'%2F%3E%3Crect%20x%3D'18.7'%20y%3D'12.7'%20width%3D'2.6'%20height%3D'2.5'%20rx%3D'1.25'%2F%3E%3Crect%20x%3D'3.6'%20y%3D'9.4'%20width%3D'16.8'%20height%3D'2.1'%20rx%3D'1.05'%2F%3E%3Cpath%20d%3D'M5.9%209.4c.7-1.9%203.2-3.3%206.1-3.3s5.4%201.4%206.1%203.3'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'4'%20r%3D'1.3'%2F%3E%3Cpath%20d%3D'M12%205.3v.3'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4.8%2011.6h14.4v5.1a2.8%202.8%200%200%201-2.8%202.8H7.6a2.8%202.8%200%200%201-2.8-2.8z'%2F%3E%3Crect%20x%3D'2.7'%20y%3D'12.7'%20width%3D'2.6'%20height%3D'2.5'%20rx%3D'1.25'%2F%3E%3Crect%20x%3D'18.7'%20y%3D'12.7'%20width%3D'2.6'%20height%3D'2.5'%20rx%3D'1.25'%2F%3E%3Crect%20x%3D'3.6'%20y%3D'9.4'%20width%3D'16.8'%20height%3D'2.1'%20rx%3D'1.05'%2F%3E%3Cpath%20d%3D'M5.9%209.4c.7-1.9%203.2-3.3%206.1-3.3s5.4%201.4%206.1%203.3'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'4'%20r%3D'1.3'%2F%3E%3Cpath%20d%3D'M12%205.3v.3'%2F%3E%3C%2Fsvg%3E");
}
.zs26 .zs26-o-nas__ikona[data-zs-ikona="poklop"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4.6%2015.9a7.4%207.4%200%200%201%2014.8%200'%2F%3E%3Crect%20x%3D'2.4'%20y%3D'15.9'%20width%3D'19.2'%20height%3D'2'%20rx%3D'1'%2F%3E%3Cpath%20d%3D'M3.9%2017.9c.5%201.4%201.7%202.3%203.1%202.3h10c1.4%200%202.6-.9%203.1-2.3'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'6.7'%20r%3D'1.3'%2F%3E%3Cpath%20d%3D'M12%208v.5'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4.6%2015.9a7.4%207.4%200%200%201%2014.8%200'%2F%3E%3Crect%20x%3D'2.4'%20y%3D'15.9'%20width%3D'19.2'%20height%3D'2'%20rx%3D'1'%2F%3E%3Cpath%20d%3D'M3.9%2017.9c.5%201.4%201.7%202.3%203.1%202.3h10c1.4%200%202.6-.9%203.1-2.3'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'6.7'%20r%3D'1.3'%2F%3E%3Cpath%20d%3D'M12%208v.5'%2F%3E%3C%2Fsvg%3E");
}
.zs26 .zs26-o-nas__ikona[data-zs-ikona="dodavka"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2.4%206.6a1.5%201.5%200%200%201%201.5-1.5h9.6v11.6H2.4z'%2F%3E%3Cpath%20d%3D'M13.5%208.3h3.3c.5%200%20.9.2%201.2.6l2.3%203.4c.2.3.3.6.3.9v3.5h-7.1z'%2F%3E%3Cpath%20d%3D'M15%209.8h2l1.4%202.3H15z'%2F%3E%3Ccircle%20cx%3D'6.6'%20cy%3D'18.3'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'16.5'%20cy%3D'18.3'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'6.6'%20cy%3D'18.3'%20r%3D'.35'%2F%3E%3Ccircle%20cx%3D'16.5'%20cy%3D'18.3'%20r%3D'.35'%2F%3E%3Cpath%20d%3D'M5%2010.9h6M8%207.9v6'%2F%3E%3Cpath%20d%3D'm10.4%2012.1-1.2-1.2%201.2-1.2M5.6%209.7l1.2%201.2-1.2%201.2M9.2%208.5%208%209.7%206.8%208.5M6.8%2013.3%208%2012.1l1.2%201.2'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2.4%206.6a1.5%201.5%200%200%201%201.5-1.5h9.6v11.6H2.4z'%2F%3E%3Cpath%20d%3D'M13.5%208.3h3.3c.5%200%20.9.2%201.2.6l2.3%203.4c.2.3.3.6.3.9v3.5h-7.1z'%2F%3E%3Cpath%20d%3D'M15%209.8h2l1.4%202.3H15z'%2F%3E%3Ccircle%20cx%3D'6.6'%20cy%3D'18.3'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'16.5'%20cy%3D'18.3'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'6.6'%20cy%3D'18.3'%20r%3D'.35'%2F%3E%3Ccircle%20cx%3D'16.5'%20cy%3D'18.3'%20r%3D'.35'%2F%3E%3Cpath%20d%3D'M5%2010.9h6M8%207.9v6'%2F%3E%3Cpath%20d%3D'm10.4%2012.1-1.2-1.2%201.2-1.2M5.6%209.7l1.2%201.2-1.2%201.2M9.2%208.5%208%209.7%206.8%208.5M6.8%2013.3%208%2012.1l1.2%201.2'%2F%3E%3C%2Fsvg%3E");
}
.zs26 .zs26-o-nas__ikona[data-zs-ikona="stit"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203.3c1.9%201.7%204.2%202.6%206.6%202.6.4%200%20.8%200%201.2-.1v6c0%203.7-2.8%207-7.8%208.9-5-1.9-7.8-5.2-7.8-8.9v-6c.4.1.8.1%201.2.1%202.4%200%204.7-.9%206.6-2.6z'%2F%3E%3Cpath%20d%3D'm8.7%2012.1%202.4%202.4%204.2-4.3'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203.3c1.9%201.7%204.2%202.6%206.6%202.6.4%200%20.8%200%201.2-.1v6c0%203.7-2.8%207-7.8%208.9-5-1.9-7.8-5.2-7.8-8.9v-6c.4.1.8.1%201.2.1%202.4%200%204.7-.9%206.6-2.6z'%2F%3E%3Cpath%20d%3D'm8.7%2012.1%202.4%202.4%204.2-4.3'%2F%3E%3C%2Fsvg%3E");
}
.zs26 .zs26-o-nas__ikona[data-zs-ikona="jablko"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%208.2c-1-.8-2.1-1.2-3.2-1.2-2.5%200-4.5%202.2-4.5%205.5%200%203.8%202.6%207.8%205%207.8.9%200%201.6-.5%202.7-.5s1.8.5%202.7.5c2.4%200%205-4%205-7.8%200-3.3-2-5.5-4.5-5.5-1.1%200-2.2.4-3.2%201.2z'%2F%3E%3Cpath%20d%3D'M12%208.2V6.3'%2F%3E%3Cpath%20d%3D'M12%206.4c.2-1.1%201.2-1.9%202.5-1.9%200%201.2-1.1%202-2.5%201.9z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%208.2c-1-.8-2.1-1.2-3.2-1.2-2.5%200-4.5%202.2-4.5%205.5%200%203.8%202.6%207.8%205%207.8.9%200%201.6-.5%202.7-.5s1.8.5%202.7.5c2.4%200%205-4%205-7.8%200-3.3-2-5.5-4.5-5.5-1.1%200-2.2.4-3.2%201.2z'%2F%3E%3Cpath%20d%3D'M12%208.2V6.3'%2F%3E%3Cpath%20d%3D'M12%206.4c.2-1.1%201.2-1.9%202.5-1.9%200%201.2-1.1%202-2.5%201.9z'%2F%3E%3C%2Fsvg%3E");
}
.zs26 .zs26-o-nas__ikona[data-zs-ikona="kosik"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2.2'%20y%3D'8.4'%20width%3D'19.6'%20height%3D'2.2'%20rx%3D'1.1'%2F%3E%3Cpath%20d%3D'M3.7%2010.6l1.5%206.9a2%202%200%200%200%202%201.6h9.6a2%202%200%200%200%202-1.6l1.5-6.9'%2F%3E%3Cpath%20d%3D'M9.2%208.4%2011.6%204.7M14.8%208.4%2012.4%204.7'%2F%3E%3Cpath%20d%3D'M9.4%2013v3M12%2013v3M14.6%2013v3'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2.2'%20y%3D'8.4'%20width%3D'19.6'%20height%3D'2.2'%20rx%3D'1.1'%2F%3E%3Cpath%20d%3D'M3.7%2010.6l1.5%206.9a2%202%200%200%200%202%201.6h9.6a2%202%200%200%200%202-1.6l1.5-6.9'%2F%3E%3Cpath%20d%3D'M9.2%208.4%2011.6%204.7M14.8%208.4%2012.4%204.7'%2F%3E%3Cpath%20d%3D'M9.4%2013v3M12%2013v3M14.6%2013v3'%2F%3E%3C%2Fsvg%3E");
}
.zs26 .zs26-o-nas__ikona[data-zs-ikona="krabicky"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2.1%2011.2%203.7%208.8a.9.9%200%200%201%20.8-.4h4.9a.9.9%200%200%201%20.8.4l1.6%202.4'%2F%3E%3Cpath%20d%3D'M3.6%2010.9%204.6%209.5h3.7l1%201.4'%2F%3E%3Crect%20x%3D'1.6'%20y%3D'11.2'%20width%3D'9.9'%20height%3D'1.7'%20rx%3D'.6'%2F%3E%3Cpath%20d%3D'M2.6%2012.9%203.4%2016a1.2%201.2%200%200%200%201.2.9h3.9A1.2%201.2%200%200%200%209.7%2016l.8-3.1'%2F%3E%3Cpath%20d%3D'M4.9%2013.6v1.7M6.55%2013.6v1.7M8.2%2013.6v1.7'%2F%3E%3Cpath%20d%3D'm12.6%2011.2%201.6-2.4a.9.9%200%200%201%20.8-.4h4.9a.9.9%200%200%201%20.8.4l1.6%202.4'%2F%3E%3Cpath%20d%3D'M14.1%2010.9l1-1.4h3.7l1%201.4'%2F%3E%3Crect%20x%3D'12.1'%20y%3D'11.2'%20width%3D'9.9'%20height%3D'1.7'%20rx%3D'.6'%2F%3E%3Cpath%20d%3D'M13.1%2012.9l.8%203.1a1.2%201.2%200%200%200%201.2.9H19a1.2%201.2%200%200%200%201.2-.9l.8-3.1'%2F%3E%3Cpath%20d%3D'M15.4%2013.6v1.7M17.05%2013.6v1.7M18.7%2013.6v1.7'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2.1%2011.2%203.7%208.8a.9.9%200%200%201%20.8-.4h4.9a.9.9%200%200%201%20.8.4l1.6%202.4'%2F%3E%3Cpath%20d%3D'M3.6%2010.9%204.6%209.5h3.7l1%201.4'%2F%3E%3Crect%20x%3D'1.6'%20y%3D'11.2'%20width%3D'9.9'%20height%3D'1.7'%20rx%3D'.6'%2F%3E%3Cpath%20d%3D'M2.6%2012.9%203.4%2016a1.2%201.2%200%200%200%201.2.9h3.9A1.2%201.2%200%200%200%209.7%2016l.8-3.1'%2F%3E%3Cpath%20d%3D'M4.9%2013.6v1.7M6.55%2013.6v1.7M8.2%2013.6v1.7'%2F%3E%3Cpath%20d%3D'm12.6%2011.2%201.6-2.4a.9.9%200%200%201%20.8-.4h4.9a.9.9%200%200%201%20.8.4l1.6%202.4'%2F%3E%3Cpath%20d%3D'M14.1%2010.9l1-1.4h3.7l1%201.4'%2F%3E%3Crect%20x%3D'12.1'%20y%3D'11.2'%20width%3D'9.9'%20height%3D'1.7'%20rx%3D'.6'%2F%3E%3Cpath%20d%3D'M13.1%2012.9l.8%203.1a1.2%201.2%200%200%200%201.2.9H19a1.2%201.2%200%200%200%201.2-.9l.8-3.1'%2F%3E%3Cpath%20d%3D'M15.4%2013.6v1.7M17.05%2013.6v1.7M18.7%2013.6v1.7'%2F%3E%3C%2Fsvg%3E");
}
.zs26 .zs26-o-nas__ikona[data-zs-ikona="lide"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'10.6'%20r%3D'2.5'%2F%3E%3Cpath%20d%3D'M7.4%2019.8a4.6%204.6%200%200%201%209.2%200'%2F%3E%3Ccircle%20cx%3D'5.1'%20cy%3D'12.5'%20r%3D'1.9'%2F%3E%3Cpath%20d%3D'M1.5%2019.8c0-2%201.5-3.4%203.6-3.4.5%200%201%20.1%201.4.2'%2F%3E%3Ccircle%20cx%3D'18.9'%20cy%3D'12.5'%20r%3D'1.9'%2F%3E%3Cpath%20d%3D'M22.5%2019.8c0-2-1.5-3.4-3.6-3.4-.5%200-1%20.1-1.4.2'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'10.6'%20r%3D'2.5'%2F%3E%3Cpath%20d%3D'M7.4%2019.8a4.6%204.6%200%200%201%209.2%200'%2F%3E%3Ccircle%20cx%3D'5.1'%20cy%3D'12.5'%20r%3D'1.9'%2F%3E%3Cpath%20d%3D'M1.5%2019.8c0-2%201.5-3.4%203.6-3.4.5%200%201%20.1%201.4.2'%2F%3E%3Ccircle%20cx%3D'18.9'%20cy%3D'12.5'%20r%3D'1.9'%2F%3E%3Cpath%20d%3D'M22.5%2019.8c0-2-1.5-3.4-3.6-3.4-.5%200-1%20.1-1.4.2'%2F%3E%3C%2Fsvg%3E");
}
.zs26 .zs26-o-nas__ikona[data-zs-ikona="lupa"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'10'%20cy%3D'10'%20r%3D'6.4'%2F%3E%3Cpath%20d%3D'm7%2010.2%202.1%202.1%203.9-4.2'%2F%3E%3Cpath%20d%3D'm14.6%2014.6%205.9%205.9'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'10'%20cy%3D'10'%20r%3D'6.4'%2F%3E%3Cpath%20d%3D'm7%2010.2%202.1%202.1%203.9-4.2'%2F%3E%3Cpath%20d%3D'm14.6%2014.6%205.9%205.9'%2F%3E%3C%2Fsvg%3E");
}
.zs26 .zs26-o-nas__ikona[data-zs-ikona="mapa"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M8.40%205.88%20Q8.40%205.88%208.80%205.95%20Q9.20%206.02%209.56%206.42%20Q9.92%206.82%2010.20%206.50%20Q10.48%206.18%2010.81%206.13%20Q11.14%206.07%2011.53%206.58%20Q11.92%207.10%2012.68%207.44%20Q13.44%207.79%2014.09%207.82%20Q14.74%207.84%2014.92%208.15%20Q15.10%208.45%2014.91%208.79%20Q14.72%209.12%2015.20%209.66%20Q15.68%2010.20%2015.95%209.56%20Q16.21%208.92%2016.64%209.33%20Q17.07%209.73%2017.93%209.52%20Q18.79%209.31%2019.02%2010.01%20Q19.26%2010.70%2019.59%2010.60%20Q19.92%2010.50%2020.89%2010.75%20Q21.86%2011.00%2022.18%2012.07%20Q22.50%2013.14%2021.53%2013.81%20Q20.56%2014.49%2020.03%2015.34%20Q19.51%2016.18%2018.90%2016.53%20Q18.29%2016.88%2017.83%2016.79%20Q17.37%2016.71%2017.06%2017.19%20Q16.74%2017.68%2016.14%2017.36%20Q15.55%2017.04%2015.05%2017.18%20Q14.55%2017.32%2012.69%2016.75%20Q10.84%2016.18%2010.32%2017.07%20Q9.81%2017.96%208.66%2018.04%20Q7.51%2018.12%206.96%2017.37%20Q6.40%2016.63%206.17%2016.57%20Q5.93%2016.52%204.59%2015.19%20Q3.25%2013.86%202.83%2013.14%20Q2.41%2012.42%202.58%2012.00%20Q2.75%2011.58%202.12%2010.57%20Q1.50%209.56%201.62%209.44%20Q1.75%209.31%202.03%209.41%20Q2.30%209.51%202.95%209.09%20Q3.61%208.68%203.90%208.73%20Q4.19%208.79%204.64%208.40%20Q5.10%208.01%206.67%207.37%20Q8.23%206.74%208.32%206.31%20Q8.40%205.88%208.40%205.88Z'%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M8.40%205.88%20Q8.40%205.88%208.80%205.95%20Q9.20%206.02%209.56%206.42%20Q9.92%206.82%2010.20%206.50%20Q10.48%206.18%2010.81%206.13%20Q11.14%206.07%2011.53%206.58%20Q11.92%207.10%2012.68%207.44%20Q13.44%207.79%2014.09%207.82%20Q14.74%207.84%2014.92%208.15%20Q15.10%208.45%2014.91%208.79%20Q14.72%209.12%2015.20%209.66%20Q15.68%2010.20%2015.95%209.56%20Q16.21%208.92%2016.64%209.33%20Q17.07%209.73%2017.93%209.52%20Q18.79%209.31%2019.02%2010.01%20Q19.26%2010.70%2019.59%2010.60%20Q19.92%2010.50%2020.89%2010.75%20Q21.86%2011.00%2022.18%2012.07%20Q22.50%2013.14%2021.53%2013.81%20Q20.56%2014.49%2020.03%2015.34%20Q19.51%2016.18%2018.90%2016.53%20Q18.29%2016.88%2017.83%2016.79%20Q17.37%2016.71%2017.06%2017.19%20Q16.74%2017.68%2016.14%2017.36%20Q15.55%2017.04%2015.05%2017.18%20Q14.55%2017.32%2012.69%2016.75%20Q10.84%2016.18%2010.32%2017.07%20Q9.81%2017.96%208.66%2018.04%20Q7.51%2018.12%206.96%2017.37%20Q6.40%2016.63%206.17%2016.57%20Q5.93%2016.52%204.59%2015.19%20Q3.25%2013.86%202.83%2013.14%20Q2.41%2012.42%202.58%2012.00%20Q2.75%2011.58%202.12%2010.57%20Q1.50%209.56%201.62%209.44%20Q1.75%209.31%202.03%209.41%20Q2.30%209.51%202.95%209.09%20Q3.61%208.68%203.90%208.73%20Q4.19%208.79%204.64%208.40%20Q5.10%208.01%206.67%207.37%20Q8.23%206.74%208.32%206.31%20Q8.40%205.88%208.40%205.88Z'%2F%3E%3C%2Fsvg%3E");
}

/* ---------------------------------------------------------------
   Přebití skinu nad starým obsahem, měřeno na nasazené stránce 1. 9. 2026

   Karty jsou <li>, a na ty má content2024.css i skin vlastní pravidla
   s vyšší specificitou (#clanek li). Bez !important zůstaly karty
   průhledné a bez levého paddingu. Je to tentýž případ, jaký je
   popsaný ve vaultu jako "karta jako li chce background s !important".

   Nadpis v tmavém pásu bral barvu z #clanek h2, tedy tmavě zelenou
   na tmavě zeleném pozadí. Selektor .zs26 .zs-sekce--tmava h2 na to
   nestačí, #clanek h2 má vyšší specificitu.
   --------------------------------------------------------------- */

/* Selektory jsou delší, než by se zdálo nutné, a mají vykřičník u pozadí.
   Důvod je pravidlo o kus výš v tomhle souboru:
   `.zs26 ul li, .zs26 ul li:nth-child(n) { background: none !important; padding-left: 0 }`.
   Je tam kvůli legacy odrážce ze šablony, ale má specificitu (0,2,2), takže přebije
   i `.zs26 .zs26-o-nas__kontroly li` (0,2,1). Karty zůstaly průhledné.
   Stejnou past má `.zs-fakta__stitek` o kus výš a řeší ji stejně.
   Změřeno na testu 1. 9. 2026: padding se aplikoval, background ne. */
.zs26 ul.zs26-o-nas__duvody > li.zs26-o-nas__duvod,
.zs26 ul.zs26-o-nas__kontroly > li:nth-child(n),
.zs26 ul.zs26-o-nas__provoz-karty > li:nth-child(n),
.zs26 ul.zs26-o-nas__kuchari > li:nth-child(n) {
  background: var(--zs-barva-pozadi-karta) !important;
}

.zs26 ul.zs26-o-nas__duvody > li.zs26-o-nas__duvod,
.zs26 ul.zs26-o-nas__kontroly > li:nth-child(n) {
  padding: 24px !important;
}
.zs26 ul.zs26-o-nas__provoz-karty > li:nth-child(n) { padding: 22px 24px !important; }
.zs26 ul.zs26-o-nas__kuchari > li:nth-child(n) { padding: 0 !important; }

.zs26 ul.zs26-o-nas__fakta > li:nth-child(n),
.zs26 ul.zs26-o-nas__portrety > li:nth-child(n),
.zs26 ul.zs26-o-nas__loga > li:nth-child(n) {
  padding-left: 0 !important;
  background: none !important;
}
/* bod osy má padding na obou stranách, jinak by puntík nesedel na střed
   sloupce a vodorovná čára by šla o 4 px vedle */
.zs26 ol.zs26-o-nas__osa > li:nth-child(n) {
  padding: 0 0 22px !important;
  background: none !important;
}
@media (min-width: 1024px) {
  .zs26 ol.zs26-o-nas__osa > li:nth-child(n) { padding: 0 8px !important; }
}

/* nadpis a úvodní odstavec v tmavém pásu */
.zs26 .zs-sekce--tmava > .zs-obsah > h2,
.zs26 .zs26-o-nas__uvod { color: var(--zs-barva-text-na-tmavem) !important; }

/* text uvnitř bílých karet zůstává tmavý i v tmavém pásu */
.zs26 .zs26-o-nas__kontroly h3 { color: var(--zs-barva-text-nadpis) !important; }
.zs26 .zs26-o-nas__kontroly p { color: var(--zs-barva-text-zakladni) !important; }
.zs26 .zs26-o-nas__kontroly a { color: var(--zs-barva-text-odkaz) !important; }

/* hero: nadpis, perex a čísla jsou na tmavém pozadí */
.zs26 .zs26-o-nas__hero h1,
.zs26 .zs26-o-nas__hero p,
.zs26 .zs26-o-nas__fakta strong,
.zs26 .zs26-o-nas__fakta span { color: var(--zs-barva-text-na-tmavem) !important; }
.zs26 .zs26-o-nas__drobecky,
.zs26 .zs26-o-nas__drobecky a { color: var(--zs-barva-paticka-text-tlumeny) !important; }
.zs26 .zs26-o-nas__hero-odkaz a { color: var(--zs-barva-akce-primarni) !important; }

/* obrázky v článku mají od skinu radius 16 na všech rozích a max-width 100 %.
   Fotka v kartě kuchaře má zaoblené jen levé rohy, hero fotka žádné. */
.zs26 .zs26-o-nas__kuchari img {
  border-radius: var(--zs-radius-karta) 0 0 var(--zs-radius-karta) !important;
  max-width: none !important;
}
.zs26 .zs26-o-nas__hero-foto img {
  border-radius: 0 !important;
  max-width: none !important;
}

/* ===== konec 57-o-nas.css ===== */

/* ===== 59-vernost.css =====
   Kalkulačka věrnostní slevy na /programy, blok .zs26-vernost.
   Staví ji js/zs26-vernost.js, důvod a rozdíl proti verzi na /cenik jsou
   v hlavičce toho souboru.

   Proč vlastní třídy a ne .zs26-pv__* z ceníku: ty jsou v novy-2026-pruvodce.css
   a ten se načítá jen na /cenik. Načíst ho i sem by znamenalo přinést s ním
   celou vrstvu průvodce včetně pravidel, která pod body.zs26-pruvodce schovávají
   legacy bloky. Rozměry a barvy jsou proto opsané, ne sdílené, a když se mění
   vzhled kalkulačky, mění se na dvou místech. Vědomá cena za to, že se na
   /programy nenačítá 60 kB cizí vrstvy.

   Kontrakt: bez stínů, breakpointy jen 700 a 1024, žádné hexy, žádný em dash. */

.zs26-vernost__kalk {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-xl);
  margin-top: var(--zs-odstup-2xl);
  padding: var(--zs-odstup-lg);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-sekce);
}

@media (min-width: 1024px) {
  .zs26-vernost__kalk {
    flex-direction: row;
    align-items: stretch;
    gap: var(--zs-odstup-2xl);
    padding: var(--zs-odstup-2xl);
  }
}

.zs26-vernost__ovladani {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--zs-odstup-xl);
  min-width: 0;
}

@media (min-width: 1024px) {
  .zs26-vernost__ovladani { flex: 0 0 420px; width: 420px; }
}

.zs26-vernost__posuvnik {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-md);
}

.zs26-vernost__posuvnik-popisek {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--zs-barva-text-nadpis);
}

/* Štítek s počtem dní stojí nad knoflíkem posuvníku a jde s ním. Pozice je
   poměr hodnoty krát dráha mezi krajními středy knoflíku, tedy 100 % minus
   šířka knoflíku 28 px, plus jeho polovina. Proměnnou nastavuje JS při každém
   input. Výška obalu je výška knoflíku, ať sloupec nepřeskakuje. */
.zs26-vernost__stitek-obal {
  position: relative;
  width: 100%;
  height: 28px;
}

.zs26 .zs26-vernost__stitek {
  position: absolute;
  bottom: 0;
  left: calc(var(--zs-vernost-pomer, 0.88) * (100% - 28px) + 14px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Posuvník: dráha 6 px, vyplněná část limetka, jezdec 28 px.
   Výplň řeší proměnná --zs-vernost-vypln, kterou nastavuje JS.
   Šablona vynucuje na každém input vlastní padding a border s !important
   (viz blok proti šabloně v novy-2026.css), proto je obojí přepsané. */
.zs26 .zs26-vernost__posuvnik-vstup {
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.zs26-vernost__posuvnik-vstup::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--zs-barva-akce-primarni) 0 var(--zs-vernost-vypln, 88%),
    var(--zs-barva-ramecek-karta) var(--zs-vernost-vypln, 88%) 100%);
}

.zs26-vernost__posuvnik-vstup::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--zs-barva-akce-primarni) 0 var(--zs-vernost-vypln, 88%),
    var(--zs-barva-ramecek-karta) var(--zs-vernost-vypln, 88%) 100%);
}

.zs26-vernost__posuvnik-vstup::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border: 2px solid var(--zs-barva-ramecek-doporucena);
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-pozadi-karta);
}

.zs26-vernost__posuvnik-vstup::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 2px solid var(--zs-barva-ramecek-doporucena);
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-pozadi-karta);
}

.zs26-vernost__meze {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}

.zs26 .zs26-vernost__poznamka {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}

/* Panel s volbou programu. Na /cenik je na tomhle místě souhrn toho,
   co člověk zvolil v průvodci. Tady se program vybírá rovnou tady. */
.zs26-vernost__volba {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-xs);
  padding: var(--zs-odstup-lg);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
}

.zs26-vernost__volba-popisek {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}

/* Šablona sahá na select stejně jako na button a input, proto !important
   u výplně a rámečku. Šipka je vlastní, protože appearance: none ji sebere. */
.zs26 .zs26-vernost__vyber {
  width: 100%;
  margin: 0;
  padding: 10px 40px 10px 14px !important;
  border: 1px solid var(--zs-barva-ramecek-doporucena) !important;
  border-radius: var(--zs-radius-male);
  background-color: var(--zs-barva-pozadi-karta) !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231F3F2A'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm6%209%206%206%206-6'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  font-family: var(--zs-pismo);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--zs-barva-text-nadpis);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.zs26 .zs26-vernost__vyber:focus-visible {
  outline: 2px solid var(--zs-barva-stav-fokus);
  outline-offset: 2px;
}

.zs26 .zs26-vernost__volba-cena {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--zs-barva-text-zakladni);
}

.zs26-vernost__graf-blok {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--zs-odstup-xl);
  min-width: 0;
}

.zs26-vernost__graf-plocha {
  padding: var(--zs-odstup-base);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
}

@media (min-width: 700px) {
  .zs26-vernost__graf-plocha { padding: var(--zs-odstup-xl); }
}

.zs26-vernost__graf-stitky {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-sm);
  margin-bottom: var(--zs-odstup-md);
}

.zs26-vernost__graf-ceny {
  display: flex;
  justify-content: space-between;
  gap: var(--zs-odstup-sm);
  margin-bottom: var(--zs-odstup-xs);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--zs-barva-text-nadpis);
}

.zs26-vernost__graf-sloupce {
  display: flex;
  align-items: flex-end;
  gap: var(--zs-odstup-sm);
  height: 160px;
}

@media (min-width: 700px) {
  .zs26-vernost__graf-sloupce { gap: var(--zs-odstup-md); height: 180px; }
}

.zs26-vernost__graf-sloupec {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 6px 6px 0 0;
  background: var(--zs-barva-pozadi-jemne);
}

.zs26-vernost__graf-hrana {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 6px 6px 0 0;
  background: var(--zs-barva-akce-primarni);
}

.zs26-vernost__graf-osa {
  display: flex;
  justify-content: space-between;
  gap: var(--zs-odstup-sm);
  margin-top: var(--zs-odstup-sm);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--zs-barva-text-popisek);
}

/* Popisky 3. a 9. měsíce se pod 700 px nevejdou, zbývají tři krajní. */
.zs26-vernost__jen-desktop { display: none; }

@media (min-width: 700px) {
  .zs26-vernost__jen-desktop { display: block; }
}

.zs26-vernost__vysledek-blok {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zs26 .zs26-vernost__vysledek {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--zs-barva-text-nadpis);
}

@media (min-width: 700px) {
  .zs26 .zs26-vernost__vysledek { font-size: 40px; }
}

.zs26 .zs26-vernost__vysledek-popis {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}

.zs26-vernost__drobne {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
  margin-top: var(--zs-odstup-lg);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}

.zs26 .zs26-vernost__drobne p { margin: 0; }

/* ---------------------------------------------------------------
   Skin nad starým obsahem. Blok leží uvnitř #clanek, takže na jeho
   odstavce dosáhne `#obsah > .main_limit.obsah p:not(.zs26 *)`
   z 60-zaklad.css. To má id a pět tříd, naše pravidla je nepřebijí
   samotnými třídami. Uvnitř .zs26 je ale výjimka `:not(.zs26 *)`
   splněná, takže na nás to pravidlo nepadá. Co skin nastavuje i uvnitř
   .zs26, je barva nadpisu přes `#clanek h1` a `#clanek h2`, a to
   se srovná druhým id.
   --------------------------------------------------------------- */
#obsah #clanek .zs26-vernost .zs-h2 {
  color: var(--zs-barva-text-nadpis);
}

/* ===== konec 59-vernost.css ===== */

/* Prepinac jazyku v hlavicce, 2. 9. 2026. Vzor je stary web (mod_languages): vlajecka
   aktualniho jazyka, po najeti, fokusu nebo kliku nabidka ostatnich. Bez stinu, ramecek
   jako karta. Vlajky jsou gify sablony 18 x 12 px v puvodni velikosti. Stoji v .zs-hlavicka__akce
   pred uctem, na vsech sirkach (na mobilu je v panelu i textovy odkaz zs-menu__vedlejsi). */
.zs26 .zs-hlavicka__jazyk { position: relative; display: inline-flex; flex: 0 0 auto; }
.zs26 .zs-hlavicka__jazyk-prepinac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zs-odstup-xs);
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--zs-radius-male);
  background: transparent;
  color: var(--zs-barva-ikona-vychozi);
  cursor: pointer;
}
.zs26 .zs-hlavicka__jazyk-prepinac::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.zs26 .zs-hlavicka__jazyk-prepinac:hover,
.zs26 .zs-hlavicka__jazyk--otevreny .zs-hlavicka__jazyk-prepinac { background: var(--zs-barva-pozadi-jemne); }
.zs26 .zs-hlavicka__vlajka { display: block; width: 18px; height: 12px; }
.zs26 .zs-hlavicka__jazyk-nabidka {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  min-width: 160px;
  margin: 0;
  padding: var(--zs-odstup-xs) 0;
  list-style: none;
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-male);
}
.zs26 .zs-hlavicka__jazyk:hover .zs-hlavicka__jazyk-nabidka,
.zs26 .zs-hlavicka__jazyk:focus-within .zs-hlavicka__jazyk-nabidka,
.zs26 .zs-hlavicka__jazyk--otevreny .zs-hlavicka__jazyk-nabidka { display: block; }
.zs26 .zs-hlavicka__jazyk-nabidka li { background: none; margin: 0; padding: 0; }
.zs26 .zs-hlavicka__jazyk-nabidka a {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-sm);
  padding: var(--zs-odstup-sm) var(--zs-odstup-base);
  color: var(--zs-barva-text-nadpis);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.zs26 .zs-hlavicka__jazyk-nabidka a:hover { background: var(--zs-barva-pozadi-jemne); }

/* Objednat v mobilnim panelu menu, 2. 9. 2026. Marek: "v hamburger menu chybi
   tlacitko objednat, nemelo by tam byt?" Melo. Limetkove Objednat z listy je pod
   1280 px schovane (.zs-hlavicka__objednat) a panel za nej nemel nahradu, takze
   z otevreneho menu vedla k objednavce jen cesta pres Programy. Tlacitko stoji
   pod hlavnimi polozkami a nad druhym blokem (Kontakt, jazyky): je to hlavni akce
   panelu, ne dalsi radek seznamu. Od 1280 px je schovane, tam je Objednat v liste. */
.zs26 .zs-menu__objednat { display: none; }
@media (max-width: 1279px) {
  .zs26 .zs-hlavicka--otevrene .zs-hlavicka__menu > a.zs-menu__objednat {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: var(--zs-odstup-base) 0 var(--zs-odstup-xs);
    padding: 0 var(--zs-odstup-xl);
    border-bottom: 0;
    font-size: 16px;
  }
}

/* Kontakt jen v panelu, 2. 9. 2026. Z listy Kontakt odesel 25. 8. (od 1280 px ho
   zastupuje telefon), v panelu byl v drobnem druhem bloku spolu se Slovensky.
   Marek: Kontakt ma vypadat jako ostatni polozky, Slovensky nedava smysl, kdyz je
   v liste prepinac jazyku s vlajkou. Kontakt je tedy sesta hlavni polozka
   (.zs-menu__hlavni) a tenhle modifikator ho drzi mimo desktopovou listu. */
@media (min-width: 1280px) {
  .zs26 .zs-menu__hlavni--jen-panel { display: none; }
}

/* ---------- Mezery na mobilu, 2. 9. 2026 ----------
   Marek ze snimku z iPhonu: drobecky "Domu / O nas" nalepene na fotku,
   tlacitko "Cela cesta jidla" nalepene na kartu, karta certifikace nalepena
   na text. Zmereno 2. 9. 2026 na 390 px: .zs26-o-nas__drobecky, h1,
   __hero-veta, __akce i __uvod mely computed margin 0 / 0, i kdyz je partial
   nastavuje. Selektory o jedne tride (0,1,0) prohravaji s obecnym nulovanim
   v .zs26 (0,1,1); .zs-perex s (0,2,0) vyhraval, proto mel 10 px a ostatni nic.
   Tady se tytez hodnoty pisou se specificitou (0,2,0), bez vykricniku.
   K tomu odstup textu od fotky: pod 1024 px ma hero padding-top 0 a fotka
   sedi primo na drobeckach. */
.zs26 .zs26-o-nas__drobecky { margin: 0 0 14px; }
.zs26 .zs26-o-nas__hero h1 { margin: 0 0 18px; }
.zs26 .zs26-o-nas__hero-veta { margin: 0 0 30px; }
.zs26 .zs26-o-nas__akce { margin: 28px 0 0; }
.zs26 .zs26-o-nas__akce--stred { margin-top: 44px; }
.zs26 .zs26-o-nas__uvod { margin: 16px 0 26px; }
@media (max-width: 1023px) {
  .zs26 .zs26-o-nas__hero-mrizka { padding-top: 28px; }
}