/* 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.
   - ODCHYLKA: značka FAQ je + a x podle kontraktu. Figma 78:45 i PNG mají plus a minus.
     Přepnutí je jeden znak v ::after 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);
}

/* ---------------------------------------------------------------
   8. FAQ. Nativní details a summary, značka přes ::after, bez JS.
   --------------------------------------------------------------- */
.zs26 .zs-faq { border-bottom: 1px solid var(--zs-barva-ramecek-karta); }

.zs26 .zs-faq__otazka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zs-odstup-base);
  padding: var(--zs-odstup-lg) 0;
  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: ""; }

.zs26 .zs-faq__otazka::after {
  content: "+";
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--zs-barva-ikona-vychozi);
}
.zs26 .zs-faq[open] > .zs-faq__otazka::after { content: "\00D7"; }
.zs26 .zs-faq[open] > .zs-faq__otazka { padding-bottom: var(--zs-odstup-md); }

.zs26 .zs-faq__odpoved {
  padding-bottom: var(--zs-odstup-lg);
  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); }

/* ---------------------------------------------------------------
   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;
  }
}

/* ---------------------------------------------------------------
   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__telefon-text { display: inline; }
  .zs26 .zs-hlavicka__objednat { display: inline-flex; }
}

@media (min-width: 1024px) {
  .zs26 .zs-hlavicka__obsah {
    gap: var(--zs-odstup-2xl);
    min-height: 80px;
  }
  .zs26 .zs-hlavicka__logo { width: 200px; }
  .zs26 .zs-hlavicka__menu {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--zs-odstup-xl);
    padding-left: var(--zs-odstup-base);
  }
  .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-lg); }
  .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;
}

.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;
}

/* ---------------------------------------------------------------
   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; }
.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);
}

.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;
}

.zs26 .zs-m-rozcestnik__hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  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; }
}

/* 2026-08-24, nasazeni na webvyvoj2: sablona ma na .obsah_okolo overflow: hidden,
   coz position: sticky uvnitr rozbiji (lista zustala na konci stranky). Na mobilu
   je proto lista position: fixed a body si pod ni rezervuje misto. Moduly ZS26
   maji style System-none, takze nemaji obal .pas. */
@media (max-width: 699px) {
  .zs26.zs26-sticky-lista { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; }
  html:has(.zs26.zs26-sticky-lista) body { padding-bottom: 92px !important; }
  html:has(.zs26.zs26-sticky-lista) #pata { padding-bottom: 92px; }
}

/* 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; }

/* mobilni menu: hamburger prepina tridu, menu se rozbali pod listou */
@media (max-width: 699px) {
  .zs26 .zs-hlavicka--otevrene .zs-hlavicka__menu {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--zs-barva-pozadi-stranka); border-top: 1px solid var(--zs-barva-linka, #e5e7e2);
    padding: 8px 20px 16px; z-index: 70;
  }
  .zs26 .zs-hlavicka--otevrene .zs-hlavicka__menu a { padding: 12px 0; border-bottom: 1px solid var(--zs-barva-linka, #e5e7e2); }
  .zs26 .zs-hlavicka__lista { position: relative; }
}

/* 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; }
.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; } }
.zs26 .zs-faq__otazka { padding: var(--zs-odstup-lg) 0 !important; font-size: 17.5px !important; line-height: 1.35 !important; color: var(--zs-barva-text-nadpis) !important; }
.zs26 .zs-faq__otazka::after { height: 24px !important; font-size: 24px !important; line-height: 1 !important; color: var(--zs-barva-ikona-vychozi) !important; }
.zs26 .zs-faq[open] > .zs-faq__otazka { padding-bottom: var(--zs-odstup-md) !important; }
.zs26 .zs-faq__odpoved { padding-bottom: var(--zs-odstup-lg) !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; }

/* ===== 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).
   --------------------------------------------------------------- */

/* ===== 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;
}

/* ---------------------------------------------------------------
   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);
}

.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 je v PNG bílá karta s rámečkem, ne zelený placeholder */
.zs26.zs26-poradenstvi .zs-m-rozcestnik__hero-foto {
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  min-height: 300px;
}

/* ---------------------------------------------------------------
   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;
}

.zs26.zs26-poradenstvi .zs-m-poradna__portret {
  border-radius: 0;
  border-width: 0 0 1px;
}

.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);
}

.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);
  }
}

/* ---------------------------------------------------------------
   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, __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-v2.css
   Co to je: styly pro modul 02 "Jak právě žijete?" ve verzi 2 (25. 8. 2026), tři klesající
   úrovně: karty situací, pás Můj výběr, proužek s pomocí. Všechno scopnuté obalem
   .zs26.zs26-kategorie (specificita 0,3,0), takže to přebíjí sdílené .zs26 .zs-karta--kategorie
   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á.
   Zdroj rozměrů: Figma ZS-wireframe 84:39 (karta 480 px, mezera 24 px, štítek 24 px,
   fotka pásu 340 px na 1180 px = 29 %, zadání říká cca 35 %, drží se zadání).
   Pravidla: každý selektor začíná .zs26.zs26-kategorie, barvy a odstupy jen přes var(--zs-...),
   žádné stíny, breakpointy 700 px a 1024 px, žádný em dash.
   Kontrasty (dopočet WCAG 2.2, skript kontrast.py, 25. 8. 2026):
   - štítek: #1F3F2A na #F1D511 7,9:1
   - text karty #F3FDEE na ztmavení 80 % #1F3F2A přes bílou fotku 6,1:1 (nejhorší případ)
   - odkaz v proužku #4E6600 na #F3FDEE 6,2:1, text proužku #4E5A50 na #F3FDEE 6,9:1
   Záměrně nehotové:
   - [DOPLNIT] u ceny pásu je jen zvýrazněné, ne skryté, ať je na testu vidět, co chybí
   - !important jen tam, kde ho vynucuje reset proti šabloně na konci novy-2026.css
     (barva textového tlačítka v kartě) */

/* ---------------------------------------------------------------
   1. Hlavička sekce. Nadpis bez okraje, perex nese odstup k mřížce.
   --------------------------------------------------------------- */
.zs26.zs26-kategorie .zs-h2 { margin: 0; }
.zs26.zs26-kategorie .zs-m-kategorie__perex {
  max-width: 62ch;
  margin: var(--zs-odstup-sm) 0 var(--zs-odstup-xl);
}

/* ---------------------------------------------------------------
   2. Úroveň 1: mřížka karet. Mobil 2 x 2 (zadání), od 1024 px čtyři sloupce.
   --------------------------------------------------------------- */
.zs26.zs26-kategorie .zs-m-kategorie__mrizka {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zs-odstup-md);
  margin: 0 0 var(--zs-odstup-xl);
}

/* Karta: fotka přes celou plochu na všech šířkách, text dole na ztmavení.
   Celá karta je <a>, proto text-decoration a color explicitně. */
.zs26.zs26-kategorie .zs-karta--kategorie {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--zs-odstup-sm);
  min-height: 340px;
  padding: var(--zs-odstup-base);
  overflow: hidden;
  background: var(--zs-barva-pozadi-tmave);
  color: var(--zs-barva-text-na-tmavem);
  text-decoration: none;
}

.zs26.zs26-kategorie .zs-karta--kategorie .zs-karta__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
}

/* Ztmavení pro text. Zarážky jsou v px odspodu, ne v procentech, aby text měl stejnou
   oporu na mobilní kartě 340 px i na desktopové 480 px: spodních 240 px má aspoň 80 %
   tmavě zelené, což na bílé fotce dává 6,1:1 pro světlý text 15,5 px. Horní třetina
   desktopové karty zůstává čistá, aby byla vidět tvář. Bez color-mix spadne na prostý přechod. */
.zs26.zs26-kategorie .zs-karta--kategorie::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(to top, var(--zs-barva-pozadi-tmave), transparent);
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--zs-barva-pozadi-tmave) 96%, transparent) 0,
    color-mix(in srgb, var(--zs-barva-pozadi-tmave) 88%, transparent) 160px,
    color-mix(in srgb, var(--zs-barva-pozadi-tmave) 80%, transparent) 240px,
    color-mix(in srgb, var(--zs-barva-pozadi-tmave) 25%, transparent) 320px,
    color-mix(in srgb, var(--zs-barva-pozadi-tmave) 0%, transparent) 100%
  );
}

.zs26.zs26-kategorie .zs-karta--kategorie .zs-karta__telo,
.zs26.zs26-kategorie .zs-karta--kategorie .zs-karta__pata {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

/* tělo a pata jsou <span>, ne <div>, kvůli <a> kolem karty */
.zs26.zs26-kategorie .zs-karta--kategorie .zs-karta__telo {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-xs);
  min-width: 0;
}

.zs26.zs26-kategorie .zs-karta--kategorie .zs-karta__pata {
  display: flex;
  margin-top: 0;
  padding-top: var(--zs-odstup-xs);
}

.zs26.zs26-kategorie .zs-karta--kategorie .zs-h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-na-tmavem);
}

.zs26.zs26-kategorie .zs-karta--kategorie .zs-popisek {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-na-tmavem);
}

.zs26.zs26-kategorie .zs-karta--kategorie .zs-cena {
  margin: 0;
  padding-top: var(--zs-odstup-xs);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--zs-barva-text-na-tmavem);
}

/* Vzhled tlačítka na <span>: stejné jako textové tlačítko v Figmě 75:15, na celou šířku
   a na střed. Barva má !important, protože reset proti šabloně ji dává jen od 700 px. */
.zs26.zs26-kategorie .zs-karta--kategorie .zs-tlacitko--textove {
  width: 100%;
  justify-content: center;
  min-height: var(--zs-vyska-tlacitko-male) !important;
  color: var(--zs-barva-text-na-tmavem) !important;
}

/* Do 699 px má karta 169 px a "Ukázat programy" se šipkou se do řádku nevejde. Flex by
   zalomil text na dva řádky a šipku nechal viset vpravo, proto je tlačítko blok v řádkovém
   toku: zalomí se na "Ukázat" / "programy →". line-height má !important kvůli resetu. */
@media (max-width: 699px) {
  .zs26.zs26-kategorie .zs-karta--kategorie .zs-tlacitko--textove {
    display: block;
    padding: var(--zs-odstup-md) 0 !important;
    text-align: center;
    line-height: 1.25 !important;
  }
  .zs26.zs26-kategorie .zs-karta--kategorie .zs-m-kategorie__sipka {
    display: inline-block;
    margin-left: var(--zs-odstup-xs);
    vertical-align: middle;
  }
}

.zs26.zs26-kategorie .zs-karta--kategorie:hover .zs-h3 { text-decoration: underline; }
.zs26.zs26-kategorie .zs-karta--kategorie:hover { border-color: var(--zs-barva-ramecek-pole); }
.zs26.zs26-kategorie .zs-karta--kategorie:focus-visible {
  outline: 3px solid var(--zs-barva-stav-fokus);
  outline-offset: 3px;
}

.zs26.zs26-kategorie .zs-m-kategorie__sipka { flex: 0 0 auto; }

/* ---------------------------------------------------------------
   3. Úroveň 2: pás Můj výběr. Bílá plocha s rámečkem, aby nesplýval
      se světlou sekcí ani s kartami. Mobil: fotka nahoře, obsah pod ní.
   --------------------------------------------------------------- */
.zs26.zs26-kategorie .zs-m-vyber {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: var(--zs-barva-pozadi-karta);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
}

.zs26.zs26-kategorie .zs-m-vyber__foto {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--zs-barva-pozadi-jemne);
}

.zs26.zs26-kategorie .zs-m-vyber__obrazek {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Štítek na fotce: varianta Doporučení z Figmy 73:4 (žlutá, tmavě zelený text i rámeček).
   Sdílená .zs-stitek--novinka je bledě limetková s olivovým textem, na fotce by se ztratila. */
.zs26.zs26-kategorie .zs-m-vyber__stitek {
  position: absolute;
  top: var(--zs-odstup-base);
  left: var(--zs-odstup-base);
  z-index: 1;
  margin: 0;
  background: var(--zs-barva-akcent-zluta);
  border-color: var(--zs-barva-text-nadpis);
  color: var(--zs-barva-text-nadpis);
}

.zs26.zs26-kategorie .zs-m-vyber__telo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--zs-odstup-sm);
  padding: var(--zs-odstup-xl);
}

.zs26.zs26-kategorie .zs-m-vyber__nadpis {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

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

.zs26.zs26-kategorie .zs-m-vyber__ukazka {
  max-width: 58ch;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--zs-barva-text-popisek);
}

.zs26.zs26-kategorie .zs-m-vyber__cena {
  margin: var(--zs-odstup-xs) 0 0;
}

/* CENA k doplnění: zvýrazněné, ať to na testu nikdo nepřehlédne */
.zs26.zs26-kategorie .zs-m-vyber__doplnit {
  padding: 0 var(--zs-odstup-xs);
  border-radius: var(--zs-radius-male);
  background: var(--zs-barva-stav-pozor-plo);
  color: var(--zs-barva-stav-pozor);
}

.zs26.zs26-kategorie .zs-m-vyber__akce {
  width: 100%;
  margin: var(--zs-odstup-sm) 0 0;
}

.zs26.zs26-kategorie .zs-m-vyber__akce .zs-tlacitko { width: 100%; }

/* ---------------------------------------------------------------
   4. Úroveň 3: proužek s pomocí. Bez nadpisu, bez boxu, menší písmo.
      Odkazy podtržené, protože reset .zs26 a podtržení sundává.
   --------------------------------------------------------------- */
.zs26.zs26-kategorie .zs-m-pomoc {
  max-width: none;
  margin: var(--zs-odstup-lg) 0 0;
  padding: 0 var(--zs-odstup-xs);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}

.zs26.zs26-kategorie .zs-m-pomoc__odkaz {
  color: var(--zs-barva-text-odkaz);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.zs26.zs26-kategorie .zs-m-pomoc__odkaz:hover { color: var(--zs-barva-text-nadpis); }

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

/* ---------------------------------------------------------------
   5. Od 700 px: karty 480 px jako ve Figmě, pás fotka vlevo, tlačítko podle obsahu.
   --------------------------------------------------------------- */
@media (min-width: 700px) {
  .zs26.zs26-kategorie .zs-m-kategorie__mrizka { gap: var(--zs-odstup-xl); }

  .zs26.zs26-kategorie .zs-karta--kategorie {
    min-height: 480px;
    padding: var(--zs-odstup-lg);
    gap: var(--zs-odstup-sm);
  }

  .zs26.zs26-kategorie .zs-karta--kategorie .zs-h3 { font-size: 26px; }
  .zs26.zs26-kategorie .zs-karta--kategorie .zs-popisek { font-size: 15.5px; line-height: 1.55; }
  .zs26.zs26-kategorie .zs-karta--kategorie .zs-cena { font-size: 16px; }
  .zs26.zs26-kategorie .zs-karta--kategorie .zs-karta__pata { padding-top: var(--zs-odstup-sm); }

  .zs26.zs26-kategorie .zs-m-vyber {
    grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
  }

  .zs26.zs26-kategorie .zs-m-vyber__foto {
    height: 100%;
    min-height: 260px;
    aspect-ratio: auto;
  }

  .zs26.zs26-kategorie .zs-m-vyber__telo {
    padding: var(--zs-odstup-2xl) 36px;
  }

  .zs26.zs26-kategorie .zs-m-vyber__akce { width: auto; }
  .zs26.zs26-kategorie .zs-m-vyber__akce .zs-tlacitko { width: auto; }

  .zs26.zs26-kategorie .zs-m-pomoc { margin-top: var(--zs-odstup-xl); }
}

/* ---------------------------------------------------------------
   6. Od 1024 px: čtyři sloupce.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .zs26.zs26-kategorie .zs-m-kategorie__mrizka {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 2026-08-25, Marek: karty kategorii. gradient: pevny start na vsech kartach, obsah prispendleny dolu,
   popisek fixne na 2 radky, aby nadpisy zacinaly ve stejne vysce. Fotky dostanou spolecny color grade
   (nasazeni/fotky-grade.py), az prijdou z Figmy. */
@media (min-width: 700px) {
  .zs26 .zs-karta--kategorie { display: flex; flex-direction: column; }
  .zs26 .zs-karta--kategorie::after {
    background-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(26, 61, 42, 0.15) 35%,
      rgba(26, 61, 42, 0.92) 62%,
      rgba(26, 61, 42, 0.97) 100%);
  }
  .zs26 .zs-karta--kategorie .zs-karta__telo { margin-top: auto; }
  .zs26 .zs-karta--kategorie .zs-karta__telo .zs-popisek {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .zs26 .zs-karta--kategorie .zs-h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Marek 25. 8.: karty kategorii v2, pevny gradient na vsech kartach, telo dolu, popisek 2 radky,
   nadpis na jeden radek. Scope .zs26.zs26-kategorie (0,3,x) prebiji 33-kategorie-v2.css. Fotky maji spolecny
   color grade (saturace 60 %, teplejsi bila, modra k zelenosede, jas 118), originaly v images/foto-original/. */
@media (min-width: 700px) {
  .zs26.zs26-kategorie .zs-karta--kategorie::after {
    background-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(26, 61, 42, 0.15) 35%,
      rgba(26, 61, 42, 0.92) 62%,
      rgba(26, 61, 42, 0.97) 100%);
  }
  .zs26.zs26-kategorie .zs-karta--kategorie { display: flex; flex-direction: column; }
  .zs26.zs26-kategorie .zs-karta--kategorie .zs-karta__telo { margin-top: auto; }
  .zs26.zs26-kategorie .zs-karta--kategorie .zs-karta__telo .zs-popisek {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .zs26.zs26-kategorie .zs-karta--kategorie .zs-h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Marek 25. 8. 1:50: tlacitko karty zarovnane k levemu okraji textu (jako nadpis a popisek), sipka s pevnou mezerou,
   cela pata bez odsazeni. Scope .zs26.zs26-kategorie, aby prebil partial 33 i sdilene .zs-karta__pata. */
@media (min-width: 700px) {
  .zs26.zs26-kategorie .zs-karta--kategorie .zs-karta__pata { text-align: left; padding-left: 0; padding-right: 0; margin-left: 0; display: flex; justify-content: flex-start;
    align-self: stretch; width: 100%; }
  /* Pricina odsazeni: karta ma align-items: center (zmereno 25. 8. 1:55, pata sirka 176 px na stred 226 px tela).
     align-self: stretch ji roztahne na sirku tela, tlacitko pak zacina na stejnem x jako nadpis. */
  .zs26.zs26-kategorie .zs-karta--kategorie .zs-karta__pata .zs-tlacitko--textove {
    padding-left: 0 !important; padding-right: 0 !important; margin: 0; justify-content: flex-start; gap: 10px;
    min-height: 0; font-size: 16px; font-weight: 600; text-decoration: none;
  }
  .zs26.zs26-kategorie .zs-karta--kategorie .zs-karta__pata .zs-tlacitko--textove:hover { text-decoration: underline; text-underline-offset: 3px; }
}