/* =============================================================================
   novy-2026-pruvodce.css, 25. 8. 2026
   Vzhled vrstvy pruvodce cenou na /cenik. Patri k js/zs26-pruvodce.js a js/rady.js.

   PRAVIDLA, KTERA TENHLE SOUBOR DRZI
   - Kazdy selektor zacina body.zs26-pruvodce (prepis legacy) nebo .zs26-pv
     (vlastni prvky vrstvy). Bez te tridy na body se stranka chova jako dnes.
   - Tokeny --zs-* z novy-2026.css, ktery je na strance uz dnes (mereno 25. 8. 2026).
     Zadny hex krome #fff, zadne stiny, breakpointy jen 700 a 1024.
   - Sdilene komponenty .zs-tlacitko, .zs-faq, .zs-pas-cta, .zs-sticky-lista,
     .zs-sekce, .zs-obsah, .zs-h1-podstranka, .zs-h2, .zs-h3, .zs-perex,
     .zs-popisek, .zs-cena, .zs-cena-velka, .zs-stitek se nedefinuji znovu,
     jen se misty dolaďují uvnitr .zs26-pv.

   PREDLOHA
   Figma ZS-wireframe yPtWQdvR3z3CaLCwsUuP6N:
     417:3  Pruvodce cenou desktop 1440
     417:4  Pruvodce cenou mobil 390
     455:409 rozbaleny cely cenik, tabulka 456:567
     425:96 vernostni slevy, karta kalkulacky 462:556, graf 464:553
   Odstupy a barvy jsou opsane z uzlu, ne odhadnute.

   ZAMERNE JINAK NEZ FIGMA (zduvodneni v STAVITEL-P.md)
   - Ctenе texty kroku maji 16 px misto 15,5 px z Figmy. Kontrakt rika
     "cteny text min. 16 px" a ten ma prednost.
   - Sirka obsahu je sdilena .zs-obsah (max 1180 vcetne 20 px odsazeni),
     Figma ma 1180 cisteho obsahu a 130 px okraje. Rozdil 40 px, ale drzi to
     jednu sirku se zbytkem webu.
   - Stitky zlomu slev jsou nad grafem v radce, ne absolutne nad sloupci.
     Prahy se posouvaji podle posuvniku, absolutni pozice by lhala.
   ========================================================================== */

/* ---------------------------------------------------------------
   1. Legacy pod tridou zs26-pruvodce. Nic se nemaze, jen schovava.
   --------------------------------------------------------------- */
body.zs26-pruvodce .pas.m110,
body.zs26-pruvodce #clanek,
body.zs26-pruvodce #sidebar,
body.zs26-pruvodce .pas.m226 { display: none; }

/* Nad ramec kontraktu: #prepinac_sidebar je plovouci ctverec 50 x 50 px vpravo
   (na mobilu prekryva obsah), ktery prepina prave schovany #sidebar. S nim uz
   nema co delat, proto pod nasi tridou mizi taky. #respofix zustava.
   Mereno headless Chromem 25. 8. 2026 na 390 px: fixed, top 405, left 340. */
/* !important pridano 30. 8. 2026: bez nej pravidlo neplatilo, mereno headless
   Chromem na 390 px, computed display byl porad block a zluty ctverec prekryval
   novou sekci s porovnanim programu. Legacy pravidlo ma vyssi specificitu. */
body.zs26-pruvodce #prepinac_sidebar { display: none !important; }

/* Blok .main_limit.obsah (mrizka 815 + 325 px) uz nema co ukazovat, zbylo by
   po nem jen prazdnych 128 px odsazeni. Sraz ho na nulu, ale nemaz: je v nem
   #system-message-container, ktery Joomla pouziva na hlasky.
   Selektor musi mit #obsah i :not(.foxplus), protoze legacy pravidlo
   novy-2026-obsah.css r. 105 ma specificitu (1,4,1) a bez toho by vyhralo
   (mereno 25. 8. 2026). */
body.zs26-pruvodce:not(.foxplus) #obsah > .main_limit.obsah {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
body.zs26-pruvodce #obsah #dcomponent {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Misto pro mobilni listu, aby neprekryla paticku. */
/* !important: skript sablony pise na body inline padding-bottom (17 px), stejne to resi balik 26 i vrstva jidelnicku. */
body.zs26-pruvodce { padding-bottom: 96px !important; }
@media (min-width: 1024px) {
  body.zs26-pruvodce { padding-bottom: 0 !important; }
}

/* Vlastni obal vrstvy je videt jen pod tridou zs26-pruvodce, stejne jako
   se pod ni schovava legacy. Bez toho by odebrani tridy vratilo legacy,
   ale vrstva by zustala na strance a obsah by se zdvojil.
   Nalez P1 z QA vlny 2 (QA-noc.md, 25. 8. 2026), opraveno tyz den. */
.zs26-pv { display: none; }
body.zs26-pruvodce .zs26-pv { display: block; }

/* ---------------------------------------------------------------
   2. Sekce vrstvy. Figma ma svisle odsazeni 44 px i na desktopu,
      hero 32 px nahore a 44 px dole.
   --------------------------------------------------------------- */
.zs26-pv .zs-sekce { padding-block: var(--zs-odstup-sekce-mobil); }
/* 31. 8. 2026: svisly rytmus hlavicky sjednocen na 44 px mobil a 64 px desktop,
   stejne jako .zs-sekce v novy-2026.css a jako hlavicky v 70-clanky.css.
   POZOR, je to vedomy rozchod s predlohou: Figma tady kresli 32 px nahore
   a 44 px dole. Marek to 31. 8. rozhodl s tim, ze se ma opravit i predloha,
   at se kod a Figma zase potkaji. Nevracet zpatky jako chybu. */
.zs26-pv .zs26-pv__hero {
  padding-block: var(--zs-odstup-sekce-mobil);
}

@media (min-width: 700px) {
  .zs26-pv .zs26-pv__hero { padding-block: var(--zs-odstup-sekce); }
}
.zs26-pv .zs26-pv__cenik-sekce { padding-block: 0 var(--zs-odstup-sekce-mobil); }

.zs26-pv .zs26-pv__hero .zs-obsah {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-md);
}
/* Drobecky v tmave hlavicce (31. 8. 2026). Sdilena konvence .zs-sekce--tmava
   v novy-2026.css obarvi nadpis, perex i popisek, ale drobecky maji vlastni
   tridu s tmavym textem, ktery by na tmavem podkladu zmizel. Tlumeni je
   pruhlednost svetleho textu, ne seda, at kontrast zustane nad 4,5:1. */
.zs26-pv__drobecky {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zs-odstup-sm);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-na-tmavem);
  opacity: .72;
}
.zs26-pv__drobecky a { color: var(--zs-barva-text-na-tmavem); }
.zs26-pv__drobecky-sip { color: var(--zs-barva-text-na-tmavem); }

.zs26-pv .zs26-pv__hero .zs-perex { max-width: 760px; }

/* Prepinani textu mezi mobilem a desktopem (Figma ma na 390 kratsi zneni).
   --jen-uzke je vazane na 1024, protoze v jednosloupcovem rozvrzeni ma souhrn
   vetu z mobilu i mezi 700 a 1024 px. */
.zs26-pv__jen-desktop,
.zs26-pv__jen-desktop-blok { display: none; }
.zs26-pv__jen-mobil,
.zs26-pv__jen-uzke { display: inline; }
@media (min-width: 700px) {
  .zs26-pv__jen-desktop { display: inline; }
  .zs26-pv__jen-desktop-blok { display: block; }
  .zs26-pv__jen-mobil { display: none; }
}
@media (min-width: 1024px) {
  .zs26-pv__jen-uzke { display: none; }
}

/* ---------------------------------------------------------------
   3. Rozvrzeni pruvodce: kroky vlevo, souhrn vpravo od 1024 px.
      Figma 419:26: 768 + 32 + 380 = 1180.
   --------------------------------------------------------------- */
.zs26-pv__rozvrzeni {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zs-odstup-2xl);
  align-items: start;
}
@media (min-width: 1024px) {
  .zs26-pv__rozvrzeni { grid-template-columns: minmax(0, 1fr) 380px; }
}

.zs26-pv__kroky {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-2xl);
  min-width: 0;
}
.zs26-pv__krok {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-lg);
  min-width: 0;
}

.zs26-pv__krok-hlavicka {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
}
.zs26-pv__krok-radek {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-md);
}
.zs26-pv__krok-cislo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-akcent-limetka-plo);
  color: var(--zs-barva-text-nadpis);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.zs26-pv__krok-nadpis {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-nadpis);
}
@media (min-width: 700px) {
  .zs26-pv__krok-nadpis { font-size: 26px; }
}
.zs26-pv__krok-popis {
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}

/* ---------------------------------------------------------------
   4. Krok 1: filtr a karty programu. Figma 419:35 a 419:47.
   --------------------------------------------------------------- */
.zs26-pv__filtr {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-sm);
}
.zs26-pv__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px 0 20px;
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-pill);
  background: var(--zs-barva-pozadi-stranka);
  color: var(--zs-barva-text-nadpis);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.zs26-pv__chip--aktivni {
  background: var(--zs-barva-pozadi-tmave);
  border-color: var(--zs-barva-pozadi-tmave);
  color: var(--zs-barva-text-na-tmavem);
}

.zs26-pv__programy {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-md);
}
.zs26-pv__program {
  display: flex;
  align-items: center;
  gap: var(--zs-odstup-md);
  width: 100%;
  padding: var(--zs-odstup-md) var(--zs-odstup-base) var(--zs-odstup-md) var(--zs-odstup-md);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
  text-align: left;
  cursor: pointer;
}
.zs26-pv__program--vybrany {
  border-width: 2px;
  border-color: var(--zs-barva-ramecek-doporucena);
  background: var(--zs-barva-akcent-limetka-plo);
  padding: 11px 15px 11px 11px;
}
.zs26-pv__program-ikona {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--zs-radius-male);
  object-fit: cover;
}
.zs26-pv__program-telo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-xs);
  min-width: 0;
}
.zs26-pv .zs26-pv__stitek-vybrano {
  background: var(--zs-barva-akcent-zluta);
  border-color: var(--zs-barva-text-nadpis);
  color: var(--zs-barva-text-nadpis);
}
.zs26-pv__program-nazev {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-nadpis);
}
.zs26-pv__program-popis {
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}
.zs26-pv__program-cena {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--zs-barva-text-zakladni);
}
.zs26-pv__program .bi {
  display: none;
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
  color: var(--zs-barva-ikona-vychozi);
}
@media (min-width: 700px) {
  .zs26-pv__program .bi { display: block; }
}

.zs26-pv__vice {
  align-self: flex-start;
  padding: var(--zs-odstup-sm) 0;
  border: 0;
  background: transparent;
  color: var(--zs-barva-text-odkaz);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  cursor: pointer;
}
.zs26-pv__sip { margin-left: var(--zs-odstup-sm); }

/* ---------------------------------------------------------------
   5. Krok 2: kaloricke rady. Figma 421:72 a 421:73.
   --------------------------------------------------------------- */
.zs26-pv__rady {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zs-odstup-base);
}
@media (min-width: 700px) {
  .zs26-pv__rady { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.zs26-pv__rada {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-xs);
  padding: var(--zs-odstup-base) var(--zs-odstup-lg);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
  text-align: left;
  cursor: pointer;
}
.zs26-pv__rada--vybrana {
  border-width: 2px;
  border-color: var(--zs-barva-ramecek-doporucena);
  background: var(--zs-barva-pozadi-jemne);
  padding: 15px 19px;
}
.zs26-pv__rada-hodnota {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--zs-odstup-sm);
}
.zs26-pv__rada-kj {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--zs-barva-text-nadpis);
}
.zs26-pv__rada-kcal {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-tlumeny);
}
.zs26-pv__rada-popis {
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}

.zs26-pv__nevite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-base);
  padding: var(--zs-odstup-base) var(--zs-odstup-lg);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-jemne);
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}
@media (min-width: 700px) {
  .zs26-pv__nevite { flex-direction: row; align-items: center; }
  .zs26-pv__nevite > p { flex: 1 1 auto; min-width: 0; }
}
.zs26-pv__nevite-akce {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-md);
}

/* ---------------------------------------------------------------
   6. Krok 3: kombinace chodu. Figma 423:76.
   --------------------------------------------------------------- */
.zs26-pv__kombinace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zs-odstup-base);
  align-items: stretch;
}
@media (min-width: 700px) {
  .zs26-pv__kombinace { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zs26-pv__kombinace--dalsi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.zs26-pv__komb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-sm);
  height: 100%;
  padding: var(--zs-odstup-lg);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
  text-align: left;
  cursor: pointer;
}
.zs26-pv__komb--vybrana {
  border-width: 2px;
  border-color: var(--zs-barva-ramecek-doporucena);
  background: var(--zs-barva-pozadi-jemne);
  padding: 19px;
}
.zs26-pv__komb[disabled] { opacity: .55; cursor: default; }
.zs26-pv__komb-nazev {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--zs-barva-text-nadpis);
}
.zs26-pv__komb-popis {
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}
.zs26-pv__komb-cena {
  margin-top: auto;
  padding-top: var(--zs-odstup-sm);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--zs-barva-text-nadpis);
}
.zs26-pv__komb-cena--bez {
  font-size: 16px;
  font-weight: 400;
  color: var(--zs-barva-text-popisek);
}
.zs26-pv__komb--mala { padding: var(--zs-odstup-base); }
.zs26-pv__komb--mala.zs26-pv__komb--vybrana { padding: 15px; }
.zs26-pv__komb--mala .zs26-pv__komb-nazev { font-size: 17.5px; }
.zs26-pv__komb--mala .zs26-pv__komb-cena { font-size: 17.5px; }

/* 1. 9. 2026: .zs-faq je nove karta (bila plocha, ramecek, radius 16, odsazeni 24).
   __dalsi a __rozbal sdili atom .zs-faq, ale nejsou polozkou FAQ seznamu, je v nich
   siroka tabulka. Karta by je zuzila o 48 px, u porovnani programu hned pri nacteni,
   protoze to je defaultne open. Zustavaji proto radkove.
   Puvodni radek `.zs26-pv__dalsi .zs-faq__odpoved { padding-bottom }` odsud zmizel:
   byl 0,3,0 bez !important a blok proti sablone v novy-2026.css ho prebijel, takze
   nikdy nic nedelal. Odsazeni ted resi promenna --zs-faq-odsazeni-*. */
.zs26-pv .zs26-pv__dalsi,
.zs26-pv .zs26-pv__rozbal {
  --zs-faq-odsazeni-x: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: 0;
}
.zs26-pv .zs26-pv__dalsi:hover,
.zs26-pv .zs26-pv__rozbal:hover { border-color: var(--zs-barva-ramecek-karta); }
.zs26-pv .zs26-pv__dalsi + .zs-faq,
.zs26-pv .zs26-pv__rozbal + .zs-faq { margin-top: 0; }

/* ---------------------------------------------------------------
   7. Souhrn. Figma 424:75 a 424:76, od 1024 px lepivy.
   --------------------------------------------------------------- */
.zs26-pv__souhrn { min-width: 0; }
@media (min-width: 1024px) {
  .zs26-pv__souhrn { position: sticky; top: var(--zs-odstup-lg); }
}
.zs26-pv__souhrn-karta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--zs-odstup-base);
  padding: var(--zs-odstup-xl);
  border: 2px solid var(--zs-barva-ramecek-doporucena);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
}
.zs26-pv__souhrn-stitek {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--zs-barva-text-tlumeny);
}
.zs26-pv__souhrn-volby {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
}
.zs26-pv__souhrn-radek {
  display: flex;
  gap: var(--zs-odstup-md);
  align-items: baseline;
  font-size: 16px;
  line-height: 1.55;
}
.zs26-pv__souhrn-popisek {
  flex: 0 0 auto;
  color: var(--zs-barva-text-tlumeny);
}
.zs26-pv__souhrn-hodnota {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-weight: 600;
  color: var(--zs-barva-text-nadpis);
}
.zs26-pv__linka {
  height: 1px;
  background: var(--zs-barva-ramecek-karta);
}
.zs26-pv__souhrn-cena {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-xs);
}
.zs26-pv__souhrn-cena-radek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--zs-odstup-sm);
}
.zs26-pv .zs26-pv__cena-velka {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.zs26-pv__cena-jednotka {
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-tlumeny);
}
.zs26-pv__souhrn-veta {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}
/* Seznam V cene mate je jen od 1024 px, pod tim je jeho obsah shrnuty
   do vety pod cenou (Figma 431:241). */
.zs26-pv__vcene {
  display: none;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
}
@media (min-width: 1024px) {
  .zs26-pv__vcene { display: flex; }
}
.zs26-pv__vcene-nadpis {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--zs-barva-text-nadpis);
}
.zs26-pv__vcene-radek {
  display: flex;
  align-items: flex-start;
  gap: var(--zs-odstup-sm);
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}
.zs26-pv__vcene-radek .bi {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1.55;
  color: var(--zs-barva-ikona-check);
}
.zs26-pv .zs26-pv__souhrn-objednat { width: 100%; }
.zs26-pv .zs26-pv__souhrn-cenik { align-self: center; }
/* ---------------------------------------------------------------
   8. Cely cenik a porovnani programu. Figma 456:567 a 457.
   --------------------------------------------------------------- */
/* Radkovy tvar __rozbal je vyresen vyse v sekci 6, spolu s __dalsi.
   Barva textu potrebuje !important: blok proti sablone v novy-2026.css
   forsiruje color na .zs-faq__odpoved, takze tenhle radek do 1. 9. 2026
   nic nedelal a cely cenik se kreslil tlumenou barvou misto zakladni. */
.zs26-pv .zs26-pv__rozbal > .zs-faq__odpoved { color: var(--zs-barva-text-zakladni) !important; }

/* ---------------------------------------------------------------
   Rada chodu, pevnych pet pozic
   Vyplnena pozice je v cene, prazdna neni. Vzor je z dnesniho webu,
   blok "Mozne varianty programu X" kresli radu cipu s class="ne"
   u vypnuteho chodu. Rozdil: tady je vzdy pet pozic, i u trichodovych
   programu, protoze prazdna pozice je prave ta informace.
   --------------------------------------------------------------- */
.zs26-pv__chody {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-xs);
  margin-top: var(--zs-odstup-sm);
}
.zs26-pv__chod {
  padding: 3px var(--zs-odstup-sm);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-pill);
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
}
.zs26-pv__chod--ano {
  border-color: var(--zs-barva-ramecek-doporucena);
  background: var(--zs-barva-ramecek-doporucena);
  color: var(--zs-barva-text-na-tmavem);
  font-weight: 600;
}
.zs26-pv__chod--ne {
  background: transparent;
  color: var(--zs-barva-text-tlumeny);
  text-decoration: line-through;
  opacity: 0.75;
}
.zs26-pv__chody--drobna .zs26-pv__chod { padding: 2px 6px; font-size: 12px; }
.zs26-pv__chody-jednotka {
  margin-top: var(--zs-odstup-sm);
  font-size: 14px;
  color: var(--zs-barva-text-tlumeny);
}
/* cena u programu, ktery ceny v systemu jeste nema */
.zs26-pv__program-cena--bez,
.zs26-pv__program--bezcen .zs26-pv__program-cena {
  color: var(--zs-barva-text-tlumeny);
  font-weight: 600;
}
.zs26-pv__program--bezcen { cursor: default; }
.zs26-pv__souhrn-chody { margin-top: var(--zs-odstup-sm); }
.zs26-pv__souhrn-chody .zs26-pv__chody { margin-top: 0; }

/* ---------------------------------------------------------------
   Porovnani programu, pet sloupcu misto matice
   --------------------------------------------------------------- */
.zs26-pv__porov-prepinac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zs-odstup-sm);
  margin-bottom: var(--zs-odstup-md);
}
.zs26-pv__porov-popisek {
  font-size: 14px;
  font-weight: 600;
  color: var(--zs-barva-text-tlumeny);
}
.zs26-pv__porov-chipy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-xs);
}
.zs26-pv__chip--male {
  min-height: 34px;
  padding: 0 var(--zs-odstup-base);
  font-size: 14px;
}
.zs26-pv__porov td { vertical-align: middle; }
.zs26-pv__porov-kat,
.zs26-pv__porov-energie { font-size: 14px; color: var(--zs-barva-text-tlumeny); }
/* V tabulce musi rada zustat na jednom radku, jinak se sloupec neporovnava
   pohledem, ale cte. Proto drobna varianta a zakaz zalomeni. */
.zs26-pv__porov-chody { min-width: 264px; }
.zs26-pv__porov-chody .zs26-pv__chody {
  margin-top: 0;
  flex-wrap: nowrap;
}
.zs26-pv__porov-cena { white-space: nowrap; font-weight: 700; }
.zs26-pv__porov-odkaz { color: var(--zs-barva-text-odkaz); font-weight: 600; }

/* Pod 700 px se pet sloupcu nevejde. Tabulka se preklopi na karty, jeden
   program na kartu, hlavicky sloupcu nese data-popisek. Vodorovne rolovani
   by lide nenasli. */
@media (max-width: 699px) {
  .zs26-pv__porov,
  .zs26-pv__porov tbody,
  .zs26-pv__porov tr,
  .zs26-pv__porov th,
  .zs26-pv__porov td { display: block; width: auto; }
  .zs26-pv__porov thead { display: none; }
  .zs26-pv__porov tr {
    margin-bottom: var(--zs-odstup-base);
    padding: var(--zs-odstup-base);
    border: 1px solid var(--zs-barva-ramecek-karta);
    border-radius: var(--zs-radius-karta);
    background: var(--zs-barva-pozadi-karta);
  }
  .zs26-pv__porov tr.zs26-pv__tab-radek--vybrany {
    border: 2px solid var(--zs-barva-ramecek-doporucena);
    background: var(--zs-barva-akcent-limetka-plo);
  }
  .zs26-pv__porov .zs26-pv__tab-zahlavi {
    font-size: 18px;
    font-weight: 700;
    color: var(--zs-barva-text-nadpis);
  }
  .zs26-pv__porov td { padding: var(--zs-odstup-xs) 0; border: 0; }
  .zs26-pv__porov-cena { text-align: left; }
}

/* Sbalovaci tlacitko je az za tabulkou. Nadpisem sekce je summary rozbalovacky,
   proto tu uz neni .zs26-pv__tab-hlavicka ani .zs26-pv__tab-nadpis. */
.zs26-pv__tab-paticka {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--zs-odstup-base);
}
.zs26-pv__tab-popis {
  margin-bottom: var(--zs-odstup-base);
  font-size: 16px;
  line-height: 1.4;
  color: var(--zs-barva-text-popisek);
}
.zs26-pv__tab-obal {
  overflow-x: auto;
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-male);
}
.zs26-pv__tab {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.zs26-pv__tab th,
.zs26-pv__tab td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}
.zs26-pv__tab thead tr { background: var(--zs-barva-pozadi-jemne); }
.zs26-pv__tab thead th {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--zs-barva-text-nadpis);
  white-space: nowrap;
}
.zs26-pv__tab thead th.zs26-pv__tab-rohova {
  min-width: 200px;
  font-size: 14.5px;
  color: var(--zs-barva-text-popisek);
}
@media (min-width: 1024px) {
  .zs26-pv__tab-rohova { min-width: 264px; }
}
.zs26-pv__tab-kj { display: block; }
.zs26-pv__tab-kcal {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--zs-barva-text-popisek);
}
.zs26-pv__tab tbody tr:nth-child(even) { background: var(--zs-barva-pozadi-jemne); }
.zs26-pv__tab-zahlavi {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--zs-barva-text-zakladni);
}
.zs26-pv__tab-cena {
  display: block;
  width: 100%;
  padding: 6px 8px;
  margin: -6px -8px;
  border: 2px solid transparent;
  border-radius: var(--zs-radius-male);
  background: transparent;
  text-align: left;
  font-size: 16px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--zs-barva-text-odkaz);
  white-space: nowrap;
  cursor: pointer;
}
.zs26-pv__tab-cena:hover { text-decoration: underline; }
.zs26-pv__tab-cena--vybrana {
  border-color: var(--zs-barva-ramecek-doporucena);
  background: var(--zs-barva-akcent-limetka-plo);
  font-weight: 700;
  color: var(--zs-barva-text-nadpis);
}
.zs26-pv__tab-radek--vybrany .zs26-pv__tab-zahlavi { color: var(--zs-barva-text-nadpis); }
.zs26-pv__tab-poznamka {
  margin-top: var(--zs-odstup-md);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}

/* ---------------------------------------------------------------
   9. Kalkulacka uspory. Figma 462:556, graf 464:553.
   --------------------------------------------------------------- */
.zs26-pv .zs26-pv__slevy .zs-perex { margin-top: var(--zs-odstup-md); }
.zs26-pv__kalk {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-xl);
  margin-top: var(--zs-odstup-2xl);
  padding: var(--zs-odstup-lg);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-sekce);
}
@media (min-width: 1024px) {
  .zs26-pv__kalk {
    flex-direction: row;
    align-items: stretch;
    gap: var(--zs-odstup-2xl);
    padding: var(--zs-odstup-2xl);
  }
}
.zs26-pv__kalk-ovladani {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--zs-odstup-xl);
  min-width: 0;
}
@media (min-width: 1024px) {
  .zs26-pv__kalk-ovladani { flex: 0 0 420px; width: 420px; }
}
.zs26-pv__posuvnik {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-md);
}
.zs26-pv__posuvnik-popisek {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--zs-barva-text-nadpis);
}
/* Stitek s poctem dni stoji nad knoflikem posuvniku a jde s nim.
   Pozice je pomer hodnoty (value minus min, deleno rozsahem) krat draha
   mezi krajnimi stredy knoflíku, tedy 100 % minus sirka knoflíku 28 px,
   plus polovina knoflíku. Promennou --zs-pv-pomer nastavuje JS pri kazdem
   input. Predtim byl stitek prvni polozkou sloupce a stal porad vlevo,
   coz cetlo jako popisek sekce. Vizualni nalez 2 z QA vlny 2.
   Vyska obalu je vyska knoflíku, at sloupec nepreskakuje. */
.zs26-pv__posuvnik-stitek-obal {
  position: relative;
  width: 100%;
  height: 28px;
}
.zs26-pv .zs26-pv__posuvnik-stitek {
  position: absolute;
  bottom: 0;
  left: calc(var(--zs-pv-pomer, 0.88) * (100% - 28px) + 14px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Posuvnik: draha 6 px, vyplnena cast limetka, jezdec 28 px.
   Vypln resi promenna --zs-pv-vypln, kterou nastavuje JS. */
.zs26-pv__posuvnik-vstup {
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.zs26-pv__posuvnik-vstup::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--zs-barva-akce-primarni) 0 var(--zs-pv-vypln, 88%),
    var(--zs-barva-ramecek-karta) var(--zs-pv-vypln, 88%) 100%);
}
.zs26-pv__posuvnik-vstup::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--zs-barva-akce-primarni) 0 var(--zs-pv-vypln, 88%),
    var(--zs-barva-ramecek-karta) var(--zs-pv-vypln, 88%) 100%);
}
.zs26-pv__posuvnik-vstup::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border: 2px solid var(--zs-barva-ramecek-doporucena);
  border-radius: var(--zs-radius-pill);
  background: #fff;
}
.zs26-pv__posuvnik-vstup::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 2px solid var(--zs-barva-ramecek-doporucena);
  border-radius: var(--zs-radius-pill);
  background: #fff;
}
.zs26-pv__posuvnik-meze {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}
.zs26-pv__kalk-poznamka {
  font-size: 16px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}
.zs26-pv__kalk-volba {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--zs-odstup-xs);
  padding: var(--zs-odstup-lg);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
}
.zs26-pv__kalk-volba-popisek {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}
.zs26-pv__kalk-volba-nazev {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--zs-barva-text-zakladni);
}
.zs26-pv__kalk-volba-cena {
  font-size: 16px;
  line-height: 1.5;
  color: var(--zs-barva-text-zakladni);
}

.zs26-pv__kalk-graf-blok {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--zs-odstup-xl);
  min-width: 0;
}
.zs26-pv__graf-plocha {
  padding: var(--zs-odstup-base);
  border: 1px solid var(--zs-barva-ramecek-karta);
  border-radius: var(--zs-radius-karta);
  background: var(--zs-barva-pozadi-karta);
}
@media (min-width: 700px) {
  .zs26-pv__graf-plocha { padding: var(--zs-odstup-xl); }
}
.zs26-pv__graf-stitky {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zs-odstup-sm);
  margin-bottom: var(--zs-odstup-md);
}
.zs26-pv__graf-ceny {
  display: flex;
  justify-content: space-between;
  gap: var(--zs-odstup-sm);
  margin-bottom: var(--zs-odstup-xs);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--zs-barva-text-nadpis);
}
.zs26-pv__graf-sloupce {
  display: flex;
  align-items: flex-end;
  gap: var(--zs-odstup-sm);
  height: 160px;
}
@media (min-width: 700px) {
  .zs26-pv__graf-sloupce { gap: var(--zs-odstup-md); height: 180px; }
}
.zs26-pv__graf-sloupec {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 6px 6px 0 0;
  background: var(--zs-barva-pozadi-jemne);
}
.zs26-pv__graf-hrana {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 6px 6px 0 0;
  background: var(--zs-barva-akce-primarni);
}
.zs26-pv__graf-osa {
  display: flex;
  justify-content: space-between;
  gap: var(--zs-odstup-sm);
  margin-top: var(--zs-odstup-sm);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--zs-barva-text-popisek);
}
.zs26-pv__kalk-vysledek-blok {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zs26-pv__kalk-vysledek {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--zs-barva-text-nadpis);
}
@media (min-width: 700px) {
  .zs26-pv__kalk-vysledek { font-size: 40px; }
}
.zs26-pv__kalk-vysledek-popis {
  font-size: 16px;
  line-height: 1.55;
  color: var(--zs-barva-text-zakladni);
}
.zs26-pv__drobne {
  display: flex;
  flex-direction: column;
  gap: var(--zs-odstup-sm);
  margin-top: var(--zs-odstup-lg);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zs-barva-text-popisek);
}

/* ---------------------------------------------------------------
   10. FAQ a pas CTA. Figma 426:100 a 426:129.
   --------------------------------------------------------------- */
.zs26-pv .zs26-pv__faq .zs-h2 { margin-bottom: var(--zs-odstup-lg); }
/* Radek `.zs26-pv__faq-seznam .zs-faq__odpoved { font-size: 16px }` odsud 1. 9. 2026
   zmizel: prebijel ho blok proti sablone v novy-2026.css, takze nikdy nic nedelal,
   a hodnota byla stejna jako v komponente. */
.zs26-pv .zs26-pv__cta { padding-block: 0 var(--zs-odstup-sekce-mobil); }

/* ---------------------------------------------------------------
   11. Mobilni lista dole. Figma 417:4, uzel I431:3497.
       Komponenta .zs-sticky-lista se nad 700 px sama schovava, tady ji
       potrebujeme az do 1024 px, proto vyssi specifita s tridou na body.
   --------------------------------------------------------------- */
/* Lista je take vazana na tridu na body, jinak by po jejim odebrani
   prekryvala vracenou legacy stranku. Nalez P1 z QA vlny 2. */
.zs26-pv-lista { display: none; }
body.zs26-pruvodce .zs26-pv-lista {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
}
body.zs26-pruvodce .zs26-pv-lista .zs-sticky-lista {
  display: flex;
  position: static;
}
body.zs26-pruvodce .zs26-pv-lista .zs-cena { font-size: 22px; }
body.zs26-pruvodce .zs26-pv-lista .zs-popisek { font-size: 14.5px; }
@media (min-width: 1024px) {
  body.zs26-pruvodce .zs26-pv-lista { display: none; }
}

/* ---------------------------------------------------------------
   12. Tisk: vrstva se netiskne dobre, radeji legacy tabulka.
       Zamerne neresim, jen zabranim tomu, aby lista prekryla tisk.
   --------------------------------------------------------------- */
@media print {
  body.zs26-pruvodce .zs26-pv-lista { display: none; }
}


/* ---------------------------------------------------------------
   13. Prebiti legacy !important na <button>.

   Sablona a balik 25 vynucuji na kazdem tlacitku vlastni vzhled:
     novy-2026.css r. 2160        .zs26 button { padding: 0 !important; border: 0 !important }
     novy-2026-obsah.css r. 495   #obsah > :not(.zs26) button { padding, border,
                                  border-radius, background, color, font-size !important }
   Vlastni prvky vrstvy jsou karty, ne tlacitka, a <button> je pouzity kvuli
   klavesnici a odecitacum. Tohle je jedine misto v souboru s !important
   a je presne na to, co kontrakt dovoluje: prebiti legacy !important
   na polich a tlacitkach.

   Obal vrstvy je primy potomek #obsah s tridou zs26, takze pravidlo
   z novy-2026-obsah.css na nej uz nedosahne. Blok je tu pro jistotu
   (nahradni vlozeni pred #clanek) a hlavne kvuli .zs26 button, ktere plati vzdy.
   Trida na body je nutna kvuli specificite: .zs26 button je (0,1,1),
   holy .zs26-pv__chip jen (0,1,0) a prohral by i s !important.
   --------------------------------------------------------------- */
body.zs26-pruvodce .zs26-pv__chip {
  padding: 0 16px 0 20px !important;
  border: 1px solid var(--zs-barva-ramecek-karta) !important;
  border-radius: var(--zs-radius-pill) !important;
  background: var(--zs-barva-pozadi-stranka) !important;
  color: var(--zs-barva-text-nadpis) !important;
}
body.zs26-pruvodce .zs26-pv__chip--aktivni {
  border-color: var(--zs-barva-pozadi-tmave) !important;
  background: var(--zs-barva-pozadi-tmave) !important;
  color: var(--zs-barva-text-na-tmavem) !important;
}
/* mensi chip nad porovnanim, jinak by ho prebil padding z pravidla vyse */
body.zs26-pruvodce .zs26-pv__chip--male {
  min-height: 34px !important;
  padding: 0 var(--zs-odstup-base) !important;
  font-size: 14px !important;
}
/* karta programu bez cen se needituje, ale nesmi vypadat jako rozbita */
body.zs26-pruvodce .zs26-pv__program--bezcen {
  cursor: default !important;
  opacity: 1 !important;
}
body.zs26-pruvodce .zs26-pv__program {
  padding: var(--zs-odstup-md) var(--zs-odstup-base) var(--zs-odstup-md) var(--zs-odstup-md) !important;
  border: 1px solid var(--zs-barva-ramecek-karta) !important;
  border-radius: var(--zs-radius-karta) !important;
  background: var(--zs-barva-pozadi-karta) !important;
}
body.zs26-pruvodce .zs26-pv__program--vybrany {
  padding: 11px 15px 11px 11px !important;
  border: 2px solid var(--zs-barva-ramecek-doporucena) !important;
  /* !important nutne: o par radku vys dostava .zs26-pv__program bilou s !important,
     ktera by nad neprebijenym pravidlem z bloku karet vyhrala */
  background: var(--zs-barva-akcent-limetka-plo) !important;
}
body.zs26-pruvodce .zs26-pv__rada {
  padding: var(--zs-odstup-base) var(--zs-odstup-lg) !important;
  border: 1px solid var(--zs-barva-ramecek-karta) !important;
  border-radius: var(--zs-radius-karta) !important;
  background: var(--zs-barva-pozadi-karta) !important;
}
body.zs26-pruvodce .zs26-pv__rada--vybrana {
  padding: 15px 19px !important;
  border: 2px solid var(--zs-barva-ramecek-doporucena) !important;
  background: var(--zs-barva-pozadi-jemne) !important;
}
body.zs26-pruvodce .zs26-pv__komb {
  padding: var(--zs-odstup-lg) !important;
  border: 1px solid var(--zs-barva-ramecek-karta) !important;
  border-radius: var(--zs-radius-karta) !important;
  background: var(--zs-barva-pozadi-karta) !important;
}
body.zs26-pruvodce .zs26-pv__komb--vybrana {
  padding: 19px !important;
  border: 2px solid var(--zs-barva-ramecek-doporucena) !important;
  background: var(--zs-barva-pozadi-jemne) !important;
}
body.zs26-pruvodce .zs26-pv__komb--mala { padding: var(--zs-odstup-base) !important; }
body.zs26-pruvodce .zs26-pv__komb--mala.zs26-pv__komb--vybrana { padding: 15px !important; }
body.zs26-pruvodce .zs26-pv__vice {
  padding: var(--zs-odstup-sm) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--zs-barva-text-odkaz) !important;
}
body.zs26-pruvodce .zs26-pv__tab-cena {
  padding: 6px 8px !important;
  border: 2px solid transparent !important;
  border-radius: var(--zs-radius-male) !important;
  background: none !important;
  color: var(--zs-barva-text-odkaz) !important;
}
body.zs26-pruvodce .zs26-pv__tab-cena--vybrana {
  border-color: var(--zs-barva-ramecek-doporucena) !important;
  background: var(--zs-barva-akcent-limetka-plo) !important;
  color: var(--zs-barva-text-nadpis) !important;
}