/* =============================================================================
   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. */
body.zs26-pruvodce #prepinac_sidebar { display: none; }

/* 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); }
.zs26-pv .zs26-pv__hero {
  padding-block: var(--zs-odstup-2xl) var(--zs-odstup-sekce-mobil);
}
.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);
}
.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-tlumeny);
}
.zs26-pv__drobecky a { color: var(--zs-barva-text-tlumeny); }
.zs26-pv__drobecky-sip { color: var(--zs-barva-text-popisek); }

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

.zs26-pv .zs26-pv__dalsi { border-bottom: 1px solid var(--zs-barva-ramecek-karta); }
.zs26-pv .zs26-pv__dalsi .zs-faq__odpoved { padding-bottom: var(--zs-odstup-lg); }

/* ---------------------------------------------------------------
   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.
   --------------------------------------------------------------- */
.zs26-pv .zs26-pv__rozbal { border-bottom: 1px solid var(--zs-barva-ramecek-karta); }
.zs26-pv .zs26-pv__rozbal > .zs-faq__odpoved { color: var(--zs-barva-text-zakladni); }

.zs26-pv__tab-hlavicka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--zs-odstup-base);
  margin-bottom: var(--zs-odstup-md);
}
.zs26-pv__tab-nadpis {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--zs-barva-text-nadpis);
}
@media (min-width: 700px) {
  .zs26-pv__tab-nadpis { font-size: 24px; }
}
.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); }
.zs26-pv .zs26-pv__faq-seznam .zs-faq__odpoved { font-size: 16px; }
.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;
}
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;
}
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;
}