/* ==========================================================================
   ZBOZI_DETAIL.CSS
   Styly stránky detailu zboží (prefix zboDet = "zboží detail").
   Načítá se z hlavní PHP šablony eshopu jen pro detail zboží.
   Vyžaduje global.css, web.css, components.css a eshop.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .zboDetTop - horní část detailu: galerie | (hlavička + info)

   Hlavička (H1 + štítky), galerie a info jsou PŘÍMÍ potomci gridu, aby šlo
   na mobilu dát H1 nad galerii bez změny pořadí v DOM (H1 je v DOM první,
   takže pořadí sedí i pro čtečky a SEO - žádné CSS "order").

   Desktop:                 Mobil (≤969px):
   +---------+--------+     +--------+
   | gallery | head   |     | head   |
   |         +--------+     +--------+
   |         | info   |     | gallery|
   +---------+--------+     +--------+
                            | info   |
                            +--------+

   Řádky "auto 1fr": hlavička má přirozenou výšku, info zabere zbytek výšky
   galerie (pokud je galerie vyšší). Obsah info i galerie je zarovnán
   nahoru (align-self: start), takže se nic neroztahuje.
   -------------------------------------------------------------------------- */
.zboDetTop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'gallery head'
    'gallery info';
  column-gap: var(--space-xl);
  row-gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.zboDetHead {
  grid-area: head;
  min-width: 0;
}

.zboDetGallery {
  grid-area: gallery;
  align-self: start;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Galerie - hlavní obrázek + jeden řádek náhledů.

   Hlavní obrázek: box přes celou šířku sloupce, poměr 4:3 (ležatý obdélník),
   max. výška 400px. Box má stálou velikost - při přepnutí náhledu ani při
   načítání obrázku nic neposkočí. Obrázek je v boxu na středu a vejde se
   celý bez ohledu na poměr stran (čtverec, na výšku, na šířku).
   -------------------------------------------------------------------------- */
/* Bez rámečku - box má pevný poměr 4:3, takže kolem čtvercových
   a barevných obrázků zůstávají prázdné pruhy; rámeček by je zvýraznil.
   Obrázky s bílým pozadím tak splývají se stránkou. */
.zboDetGalleryMain {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 400px;
  cursor: zoom-in;
}

/* Obrázek se jen zmenšuje, nikdy nezvětšuje (malý obrázek by byl
   roztažený neostrý) - absolutně na střed + jen max. rozměry.
   Procenta max-width/max-height se počítají z boxu (containing block),
   takže fungují spolehlivě. */
.zboDetGalleryMainImg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}

.zboDetGalleryMain:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Náhledy - vždy jeden řádek, max. 6 pozic (PHP vypíše max. 6 položek;
   při víc obrázcích 5 náhledů + dlaždice "+N"). Pozice se roztáhnou podle
   šířky sloupce, ale max. 80px - řádek se nikdy nezalomí.
   Řada je vycentrovaná pod hlavním obrázkem (ten je v boxu také na středu).
   grid-auto-flow: column - počet sloupců = počet náhledů (ne pevně 6),
   takže se na střed zarovná i řada se 2-3 náhledy. */
.zboDetGalleryThumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 80px);
  justify-content: center;
  gap: var(--space-sm);
  margin: var(--space-sm) 0 0 0;
  padding: 0;
  list-style: none;
}

.zboDetGalleryThumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-white);
  overflow: hidden;
}

.zboDetGalleryThumb img {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  object-fit: contain;
}

.zboDetGalleryThumb:hover {
  border-color: var(--color-primary);
}

/* Vybraný náhled - modrý rámeček 2px (border + inset stín, bez posunu) */
.zboDetGalleryThumbSelected,
.zboDetGalleryThumbSelected:hover {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.zboDetGalleryThumb:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Dlaždice "+N" - ztlumený obrázek s počtem dalších obrázků */
.zboDetGalleryMore img {
  opacity: 0.3;
}

.zboDetGalleryMoreText {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-medium);
  font-weight: 700;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Lightbox - <dialog> na celou obrazovku, bílé neprůhledné pozadí
   (produktové fotky na bílém pozadí s lightboxem splývají).
   HTML vytváří JS (eshop-controls.js) z data-images galerie.

   Rozložení podle tvaru okna:
     okno na šířku a široké (≥ 970px) .. náhledy svisle vpravo
     na výšku / užší ................... náhledy vodorovně dole
     nízké okno (≤ 500px, mobil na šířku) náhledy skryté, jen počítadlo
   -------------------------------------------------------------------------- */
.zboDetLightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--color-white);
  color: var(--color-text);
}

.zboDetLightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.zboDetLightbox::backdrop {
  background-color: var(--color-white);
}

/* Stránka pod otevřeným lightboxem se neposouvá */
html:has(.zboDetLightbox[open]) {
  overflow: hidden;
}

/* Horní lišta - počítadlo vlevo, zavírací tlačítko vpravo */
.zboDetLightboxTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
}

.zboDetLightboxCounter {
  font-size: var(--font-size-body);
  color: var(--color-text-light);
}

/* Kulatá šedá tlačítka (zavřít, šipky) - hover/focus modrá */
.zboDetLightboxBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-bg-light);
  color: var(--color-text);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.zboDetLightboxClose {
  font-size: 1.25rem;
}

.zboDetLightboxBtn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.zboDetLightboxBtn:focus-visible,
.zboDetLightboxThumb:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Tělo: obrázek (zbytek místa) + náhledy - výchozí stav = náhledy dole */
.zboDetLightboxBody {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

/* Plocha obrázku - obrázek absolutně přes celou plochu, vejde se celý */
.zboDetLightboxStage {
  position: relative;
  min-height: 0;
  min-width: 0;
}

/* Stejně jako hlavní obrázek na stránce - jen zmenšovat, nezvětšovat */
.zboDetLightboxImg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 2 * var(--space-md));
  max-height: calc(100% - 2 * var(--space-md));
}

.zboDetLightboxPrev,
.zboDetLightboxNext {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.zboDetLightboxPrev {
  left: var(--space-md);
}

.zboDetLightboxNext {
  right: var(--space-md);
}

/* Náhledy - vodorovná řada dole, při víc obrázcích se posouvá */
.zboDetLightboxThumbs {
  display: flex;
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: 1px solid var(--color-bg-footer);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.zboDetLightboxThumb {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-white);
  cursor: pointer;
  overflow: hidden;
}

.zboDetLightboxThumb img {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  object-fit: contain;
}

.zboDetLightboxThumb:hover {
  border-color: var(--color-primary);
}

/* Aktivní náhled - stejně jako v galerii na stránce */
.zboDetLightboxThumbSelected,
.zboDetLightboxThumbSelected:hover {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* Jediný obrázek - bez šipek a náhledů */
.zboDetLightboxSingle .zboDetLightboxPrev,
.zboDetLightboxSingle .zboDetLightboxNext,
.zboDetLightboxSingle .zboDetLightboxThumbs {
  display: none;
}

/* Okno na šířku a široké - náhledy svisle vpravo (omezující je výška,
   šířky je nazbyt) */
@media screen and (orientation: landscape) and (min-width: 970px) {
  .zboDetLightboxBody {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
  }

  .zboDetLightboxThumbs {
    flex-direction: column;
    padding: 0 var(--space-md) var(--space-md);
    border-top: 0;
    border-left: 1px solid var(--color-bg-footer);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .zboDetLightboxThumb {
    width: 4.5rem;
    height: 4.5rem;
  }
}

/* Dotyková zařízení - šipky skryté, ovládá se přejetím prstem a náhledy */
@media (hover: none) {
  .zboDetLightboxPrev,
  .zboDetLightboxNext {
    display: none;
  }
}

/* Nízké okno (mobil na šířku) - náhledy skryté, obrázek dostane celou výšku */
@media screen and (max-height: 500px) {
  .zboDetLightboxThumbs {
    display: none;
  }
}

/* Bloky uvnitř info (popisek, varianty, nákupní box, parametry) jsou
   odděleny přes gap - jednotlivé bloky tak nepotřebují vlastní margin
   a vynechání libovolného bloku (např. bez variant) nezanechá díru. */
.zboDetInfo {
  grid-area: info;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Hlavička: H1 + štítky
   <main> nemá .defaultText, H1 má proto vlastní typografii.
   Velikost menší než --font-size-h1 - názvy zboží bývají dlouhé.
   -------------------------------------------------------------------------- */
.zboDetH1 {
  margin: 0;
  font-size: 1.75rem; /* 28px */
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-primary);
}

/* Vzhled jednotlivého štítku je sdílený (.zboziStitek v eshop.css),
   tady jen rozložení řádku pod H1. */
.zboDetStitky {
  display: flex;
  flex-wrap: wrap;
  gap: 4px; /* sjednoceno se .sezZboStitekList a .katalogStitekList */
  margin-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Krátký popisek - HTML z editoru (obvykle jeden <p>)
   -------------------------------------------------------------------------- */
.zboDetPopisShort {
  font-size: var(--font-size-body);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}

/* Odstavce bez okrajů - prázdný řádek dělá admin v editoru prázdným
   odstavcem (<p>&nbsp;</p>), stejně jako na starém webu. */
.zboDetPopisShort p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   .zboDetVarianty - seznamy variant nahoře (Varianty, Jiné balení,
   Alternativy...). Každý seznam se vykresluje stejně, liší se jen nadpis.
   Dlaždice: obrázek vlevo, název + cena vpravo vycentrované pod sebou.
   Mřížka auto-fill - v pravém sloupci desktopu 2 sloupce, na mobilu
   podle šířky (pod ~450px jeden sloupec).
   -------------------------------------------------------------------------- */
.zboDetVariantyNadpis {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--color-text);
}

/* Dvojtečka jen vizuálně - text nadpisu (a jeho čtení) zůstává čistý */
.zboDetVariantyNadpis::after {
  content: ':';
}

.zboDetVariantyList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zboDetVariantyList li {
  min-width: 0;
}

/* height: 100% - dlaždice v jednom řádku mřížky mají stejnou výšku,
   i když se název u některé zalomí na dva řádky. */
.zboDetVarianta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: 100%;
  min-height: 3.125rem; /* 50px - obrázek 48px + rámeček */
  padding: 0 var(--space-sm) 0 0; /* obrázek sedí přímo u rámečku */
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: var(--font-size-body);
  font-weight: 300;
  line-height: 1.25;
}

.zboDetVarianta:link,
.zboDetVarianta:visited,
.zboDetVarianta:active {
  color: var(--color-text);
  background-color: var(--color-white);
  text-decoration: none;
}

/* Hover stejný jako u .chipList (components.css) */
.zboDetVarianta:hover {
  color: var(--color-text);
  background-color: #fff3e6;
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

.zboDetVarianta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Právě zobrazené zboží - musí být za :hover (stejná specificita 0,2,0),
   aby si vybraná dlaždice ponechala zelené pozadí i při najetí myší. */
.zboDetVariantaSelected:link,
.zboDetVariantaSelected:visited,
.zboDetVariantaSelected:active,
.zboDetVariantaSelected:hover {
  background-color: var(--color-ok-bg);
  border-color: var(--color-accent);
}

/* Obrázek je natažený na celou výšku dlaždice (align-self: stretch)
   s bílým pozadím - i u vybrané/hover dlaždice nebo při zalomení názvu
   na dva řádky zůstane oblast obrázku celá bílá, bez barevného proužku.

   contain: size - rozměry/poměr stran obrázku se nezapočítávají do výšky
   dlaždice. Výšku tak určuje jen text (min. 50px) a vysoký obrázek
   (např. balení na výšku) dlaždici nezvětší - zmenší se do 48px šířky
   a výšky dlaždice (object-fit: contain).

   Zaoblení vlevo = vnitřní poloměr dlaždice (4px - 1px rámeček). */
.zboDetVariantaImg {
  display: block;
  flex-shrink: 0;
  align-self: stretch;
  width: 48px;
  height: auto;
  min-height: 48px;
  contain: size;
  object-fit: contain;
  background-color: var(--color-white);
  border-radius: 3px 0 0 3px;
}

.zboDetVariantaText {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.zboDetVariantaCena {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   .zboDetBuyBox - nákupní box: dostupnost, cena + formulář, bloky slev.
   Pozadí stejné jako nákupní pruh katalogové karty (--color-ok-bg).
   Bloky uvnitř řadí gap - chybějící sleva nenechá díru.
   -------------------------------------------------------------------------- */
.zboDetBuyBox {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: 6px;
  background-color: var(--color-ok-bg);
}

/* Barva a tučnost řeší .zboziDostupnost0/1/2 (eshop.css) */
.zboDetDostupnost {
  font-size: var(--font-size-body);
}

/* Cena vlevo, formulář vpravo; na úzké šířce se formulář zalomí pod cenu */
.zboDetCenaRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
}

.zboDetCenaBox {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
}

/* Přebíjí velikost z .zboziCena (stejná specificita, zbozi_detail.css
   se načítá až po eshop.css) */
.zboDetCena {
  font-size: var(--font-size-h2);
  line-height: 1.2;
}

/* Přeškrtnutí řeší .zboziCenaOld / <s>, tady jen barva a velikost */
.zboDetCenaOld {
  font-size: var(--font-size-body);
  color: var(--color-text-light);
}

/* Odznak "−15 %" = sdílený štítek, jen zarovnání na střed řádku */
.zboDetCenaBox .zboziStitek {
  align-self: center;
}

/* --------------------------------------------------------------------------
   Bloky slev (množstevní, X + Y zdarma) - bílý blok s barevným proužkem
   vlevo v barvě odpovídajícího štítku (--color-stitek-* v eshop.css).
   -------------------------------------------------------------------------- */
.zboDetSleva {
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--color-border);
  border-radius: 0;
  background-color: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-text);
}

.zboDetSleva p {
  margin: 0;
}

.zboDetSlevaMn {
  border-left-color: var(--color-stitek-mnslevy);
}

.zboDetSlevaXzdarma {
  border-left-color: var(--color-stitek-xzdarma);
}

/* Nadpis bloku - u množstevních slev je to <caption> tabulky
   (caption záměrně bez display: block - musí zůstat table-caption) */
.zboDetSlevaNadpis,
.zboDetMnSlevy caption {
  margin-bottom: var(--space-xs);
  font-weight: 500;
  text-align: left;
}

.zboDetSlevaNadpis {
  display: block;
}

.zboDetMnSlevy {
  border-collapse: collapse;
}

.zboDetMnSlevy td {
  padding: 1px 0;
  vertical-align: baseline;
  white-space: nowrap;
}

.zboDetMnSlevy td + td {
  padding-left: var(--space-lg);
}

/* --------------------------------------------------------------------------
   .zboDetParams - tabulka informací (výrobce, kód, EAN, balení...)
   Záměrně bez rámečku a pozadí - nesoupeří s nákupním boxem nad ní.
   Sloupec názvů má pevnou šířku; delší název (např. "Výrobce, odpovědná
   osoba") se zalomí, místo aby rozšířil sloupec pro všechny řádky.
   -------------------------------------------------------------------------- */
.zboDetParams {
  border-collapse: collapse;
  font-size: var(--font-size-body);
  line-height: 1.4;
  color: var(--color-text);
}

.zboDetParams th,
.zboDetParams td {
  padding: 2px 0;
  text-align: left;
  vertical-align: top;
}

.zboDetParams th {
  width: 8.5rem;
  padding-right: var(--space-md);
  font-weight: 400;
  color: var(--color-text-light);
}

/* Dvojtečka jen vizuálně (stejně jako u nadpisů variant) */
.zboDetParams th::after {
  content: ':';
}

.zboDetParams td {
  font-weight: 400;
}

.zboDetParams a:link,
.zboDetParams a:visited,
.zboDetParams a:active {
  color: var(--color-primary);
  text-decoration: none;
}

.zboDetParams a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   .zboDetSections - spodní část: popis, související články, seznamy zboží.
   Struktura:
     .zboDetSections            obal (rozsah pro :has() záložek)
       .zboDetTabs              řádek záložek (jen při 2+ sekcích)
       .zboDetSectionsList      sekce pod sebou, rozestupy přes gap
         section.zboDetSection  jednotlivé sekce
   -------------------------------------------------------------------------- */
.zboDetSectionsList {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.zboDetSection {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Záložky detailu - vzhled a lepení řeší sdílená komponenta .tabBar
   (components.css), zde jen párování záložek se sekcemi.
   První záložka "Vše" (výchozí, checked) ukazuje všechny sekce.
   Ostatní záložky se se sekcemi párují PODLE POŘADÍ: 2. záložka = 1. sekce,
   3. záložka = 2. sekce... CSS tak nezná typy seznamů a nový seznam zboží
   funguje bez úpravy CSS. Pořadí záložek a sekcí zaručuje PHP (sekce se
   vykreslí do bufferu a záložky se skládají ve stejném pořadí).
   Pravidla jsou pro max. 10 sekcí.
   -------------------------------------------------------------------------- */

/* Vybraná jiná záložka než "Vše": skrýt všechny sekce i jejich nadpisy
   (název sekce je na záložce) ... */
.zboDetSections:has(.tabBarItem:not(:first-child) .tabBarInput:checked) .zboDetSection,
.zboDetSections:has(.tabBarItem:not(:first-child) .tabBarInput:checked) .zboDetSection > .sekceNadpis {
  display: none;
}

/* ... a zobrazit sekci podle pořadí záložky. Vyšší specificita
   (:nth-of-type navíc) přebije skrytí výše. */
.zboDetSections:has(.tabBarItem:nth-child(2) .tabBarInput:checked) .zboDetSection:nth-of-type(1),
.zboDetSections:has(.tabBarItem:nth-child(3) .tabBarInput:checked) .zboDetSection:nth-of-type(2),
.zboDetSections:has(.tabBarItem:nth-child(4) .tabBarInput:checked) .zboDetSection:nth-of-type(3),
.zboDetSections:has(.tabBarItem:nth-child(5) .tabBarInput:checked) .zboDetSection:nth-of-type(4),
.zboDetSections:has(.tabBarItem:nth-child(6) .tabBarInput:checked) .zboDetSection:nth-of-type(5),
.zboDetSections:has(.tabBarItem:nth-child(7) .tabBarInput:checked) .zboDetSection:nth-of-type(6),
.zboDetSections:has(.tabBarItem:nth-child(8) .tabBarInput:checked) .zboDetSection:nth-of-type(7),
.zboDetSections:has(.tabBarItem:nth-child(9) .tabBarInput:checked) .zboDetSection:nth-of-type(8),
.zboDetSections:has(.tabBarItem:nth-child(10) .tabBarInput:checked) .zboDetSection:nth-of-type(9),
.zboDetSections:has(.tabBarItem:nth-child(11) .tabBarInput:checked) .zboDetSection:nth-of-type(10) {
  display: block;
}

/* Nadpis sekce = sdílený .sekceNadpis (components.css) */

/* --------------------------------------------------------------------------
   Popis zboží - HTML z editoru, typografie z .defaultText (global.css).
   Odstavce bez okrajů - prázdný řádek dělá admin v editoru prázdným
   odstavcem, stejně jako u krátkého popisku.
   .zboDetPopis p má stejnou specificitu jako .defaultText p (0,1,1) -
   vyhrává pořadím načtení (zbozi_detail.css až po global.css).
   Seznamy si ponechávají okraj z .defaultText (0 nahoře, 16px dole).
   -------------------------------------------------------------------------- */
.zboDetPopis p {
  margin: 0;
}

/* Nadpisy z editoru (např. importované texty TrueLife) - vždy podřízené
   nadpisu sekce .sekceNadpis (20px): menší a v barvě textu místo modré
   velké z .defaultText. h1 v popisu se chová jako h2. Stejná specificita
   jako .defaultText h2 (0,1,1) - vyhrává pořadím načtení. */
.zboDetPopis h1,
.zboDetPopis h2,
.zboDetPopis h3,
.zboDetPopis h4,
.zboDetPopis h5,
.zboDetPopis h6 {
  margin: 0 0 var(--space-sm) 0;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.zboDetPopis h1,
.zboDetPopis h2 {
  font-size: 1.125rem; /* 18px */
}

.zboDetPopis h3,
.zboDetPopis h4,
.zboDetPopis h5,
.zboDetPopis h6 {
  font-size: var(--font-size-body); /* 16px */
}

.zboDetPopis th {
	text-align: left;
}



/* --------------------------------------------------------------------------
   RESPONSIVE: 970-1279px - užší obsah (sidebar 170px).
   -------------------------------------------------------------------------- */
@media screen and (min-width: 970px) and (max-width: 1279px) {
  /* Sloupce zůstávají 1:1 (při 2:3 by byl obrázek galerie příliš malý),
     jen užší mezera mezi nimi. */
  .zboDetTop {
    column-gap: var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE: do 969px včetně (mobil) - jeden sloupec: head, gallery, info
   -------------------------------------------------------------------------- */
@media screen and (max-width: 969px) {
  .zboDetTop {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      'head'
      'gallery'
      'info';
    row-gap: var(--space-lg);
    margin-bottom: var(--space-xl);
  }

  .zboDetH1 {
    font-size: var(--font-size-h2); /* 24px */
  }

  .zboDetSectionsList {
    gap: var(--space-xl);
  }
}

/* --------------------------------------------------------------------------
   TISK - bez záložek, vždy všechny sekce i s nadpisy.
   !important záměrně: přebíjí filtrovací pravidla s vysokou specificitou.
   -------------------------------------------------------------------------- */
@media print {
  .zboDetTabs {
    display: none;
  }

  .zboDetSection,
  .zboDetSection > .sekceNadpis {
    display: block !important;
  }
}