/*user css zlatý strom*/

/* ============================================================
   HERO „TŘI SVĚTY" – custom modul (Nest / Roots / Apple)
   Fotka přes celou kartu (jasná, bez transformu).
   Spodní textový blok:
     • klid  = poloprůhledný tmavý stín (aubergine) → fotka prosvítá
     • hover = přesně ohraničený plný blok v barvě světa
   Barvy jen přes proměnné (viz doplněk palety v typography.css).
   Layout + typografie = BS5 + design systém v HTML.
   ============================================================ */
.tri{ background: var(--c-forest-400); isolation:isolate; }
.tri__panel{
  --band: var(--c-forest-400);   /* barva světa (hover blok) */
  --ink:  var(--c-surface);      /* barva textu na tom bloku  */
  min-height: 100svh;            /* desktop: celá výška okna  */
  color: var(--c-surface);
}
.tri__panel[data-world="nest"]  { --band: var(--world-nest);  --ink: var(--c-forest-400); }  /* zlatá  – tmavý text */
.tri__panel[data-world="roots"] { --band: var(--world-roots); --ink: var(--c-forest-400); }  /* fialová – tmavý text */
.tri__panel[data-world="apple"] { --band: var(--world-apple); --ink: var(--c-surface);     } /* růžová  – světlý text */

/* dělicí linka mezi panely (desktop) */
@media (min-width:992px){
  .tri__panel + .tri__panel::after{
    content:""; position:absolute; left:0; top:0; bottom:0; width:1px; z-index:3;
    background: color-mix(in srgb, var(--c-surface) 12%, transparent);
  }
}

/* fotka – jasná, statická */
.tri__media{ background-size:cover; background-position:center; }
.tri__media img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  pointer-events:none;          /* tah prstem projde na scroll kontejner */
  -webkit-user-drag:none;
  user-select:none;
}
/* SPODNÍ BLOK S TEXTEM */
.tri__body{
  position:relative; z-index:2;
  overflow:hidden;               /* ořízne barevný blok, dokud je pod hranou */
  color: var(--c-surface);
  /* klid: tmavý stín – dole plný aubergine, nahoře průhledný (fotka prosvítá) */
  background: linear-gradient(0deg,
    var(--c-forest-400) 0%,
    var(--c-forest-400) 24%,
    color-mix(in srgb, var(--c-forest-400) 60%, transparent) 55%,
    color-mix(in srgb, var(--c-forest-400) 26%, transparent) 82%,
    transparent 100%);
}
/* hover blok – přesně ohraničený (box textu), plná barva světa.
   Viditelnost neřeší opacity, ale poloha: stojí pod spodní hranou
   a při hoveru najede zdola (stejný princip jako .world-card__overlay). */
.tri__body::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: var(--band);
  transform: translateY(calc(100% + 2px));
  transition: transform .3s ease;
}

/* typografické drobnosti */
/* „The" na vlastním řádku nad názvem světa.
   Dřív to zajišťoval mod_deer_hero (.zs-vhero__eyebrow / .pre / .main),
   který se na této stránce už nenačítá → struktura patří sem.
   Přítah v em, aby držel opticky stejně na mobilu i na desktopu. */
.tri__pre, .tri__name{ display:block; }
.tri__pre{
  font-size:clamp(28px,2.6vw,40px);
  line-height:1;
  margin-bottom: var(--tri-pre-gap, -.3em) !important;
}
.tri__name{ letter-spacing:-.01em; }
.tri__desc{ letter-spacing:.04em; max-width:30ch; }
.tri__cta.btn{
  align-self:flex-start; background:transparent;
  border:1px solid color-mix(in srgb, currentColor 45%, transparent);
  transition: border-color .2s ease, color .3s ease;
}
/* ==================== KONEC: HERO „TŘI SVĚTY" ==================== */

/* ============================================================
   BARVY TEXTU – explicitně (.tri__panel …) = přebijí h1–h6/.typo-*
   ============================================================ */
/* KLID */
.tri__panel .tri__pre,
.tri__panel .tri__name,
.tri__panel .tri__cta.btn { color: var(--c-surface); }   /* nadpis + „The" + tlačítko světlé */
.tri__panel .tri__desc     { color: var(--c-amber-400); font-family: var(--ff-mono);} /* podnadpis zlatý */

/* HOVER / FOCUS – vše na barvu --ink daného světa */
.tri__panel:hover .tri__pre,
.tri__panel:hover .tri__name,
.tri__panel:hover .tri__desc,
.tri__panel:hover .tri__cta.btn,
.tri__panel:focus-within .tri__pre,
.tri__panel:focus-within .tri__name,
.tri__panel:focus-within .tri__desc,
.tri__panel:focus-within .tri__cta.btn { color: var(--ink); }

/* hover blok najede zdola + focus ring */
.tri__panel:hover .tri__body::before,
.tri__panel:focus-within .tri__body::before{ transform: translateY(0); }
.tri__panel:focus-visible{ outline:none; box-shadow: var(--focus-ring); }

/* ---------- MOBIL (< lg) – vodorovný posuvník, barva rovnou ----------
   Panely se nezalamují pod sebe: .tri (BS .row) se změní na scroll
   kontejner se snapem, panel je užší než viewport → další vykukuje zprava. */
@media (max-width:991.98px){
  .tri{
    flex-wrap: nowrap;                 /* přebije .row { flex-wrap: wrap } */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;             /* Firefox */
  }
  .tri::-webkit-scrollbar{ display:none; }   /* Chrome/Safari */

  .tri__panel{
    flex: 0 0 min(86%, 390px);         /* přebije col-12 → ořez zprava, strop 390px */
    max-width: min(86%, 390px);
    scroll-snap-align: start;
  }

  .tri__panel{ min-height:0; height:82svh; }
  .tri__body::before{ transform:none; }   /* mobil: barva rovnou, bez najíždění */
  .tri__panel .tri__pre,
  .tri__panel .tri__name,
  .tri__panel .tri__desc,
  .tri__panel .tri__cta.btn { color: var(--ink); }
}

@media (prefers-reduced-motion:reduce){
  .tri__body::before, .tri__cta.btn{ transition:none; }
}
/* ==================== KONEC: BARVY TEXTU ==================== */

/* ============================================================
   RECENZE – strom vpravo + barva hvězd podle světa
   Hook: .review-card na <article>. Soubor: /images/logo-recenze.svg

   BARVA HVĚZD = Module Class Suffix v nastavení modulu:
     " world-nest"   → zlatá   (#C2A361)
     " world-roots"  → fialová  (#A86EFF)
     " world-apple"  → růžová   (#EC1262)
   (POZOR: mezera na začátku suffixu = samostatná třída)
   ============================================================ */
.review-card{
  --star: var(--world-nest);          /* default zlatá; přepíše ji world-* třída */
  --tree: var(--c-canvas);            /* barva větví */

  position: relative;
  overflow: hidden;
  isolation: isolate;

  background-image: linear-gradient(90deg,
    var(--c-forest-400) 0%,
    var(--c-forest-300) 100%);
  border: 1px solid var(--c-forest-300);
}

/* hvězdy – barvu drží currentColor přes --star */
.review-card .review-stars{ color: var(--star); }

/* větve vpravo – maska, sedí na spodní hraně */
.review-card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background: var(--tree);
  opacity: .10;

  -webkit-mask:
    url("/images/logo-recenze.svg") right bottom / auto 100% no-repeat,
    linear-gradient(to left, #000 0%, #000 28%, transparent 62%);
          mask:
    url("/images/logo-recenze.svg") right bottom / auto 100% no-repeat,
    linear-gradient(to left, #000 0%, #000 28%, transparent 62%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* ---- barva hvězd podle světa (Module Class Suffix) ---- */
.world-nest  .review-card{ --star: var(--world-nest);  }
.world-roots .review-card{ --star: var(--world-roots); }
.world-apple .review-card{ --star: var(--world-apple); }

/* (volitelné) obarvit i větve podle světa – odkomentuj: */
/* .world-roots .review-card{ --tree: var(--c-violet-200);  } */
/* .world-apple .review-card{ --tree: var(--c-magenta-200); } */

@media (max-width: 767.98px){
  .review-card::before{ opacity: .075; }
}
/* ==================== KONEC: RECENZE ==================== */


select#bhgfgLangSelect {
    font-size: 18px;
}

.mod-languages {
    position: relative;
    top: 5px;
}
html:not(.nav-ready) .mod-menu.desktop.magazin {
  visibility: hidden;
}
.napoje .mb-4.d-flex.flex-wrap.gap-2 {
    margin-bottom: var(--space-5) !important;
}
.napoje .bhglist-container span.ms-1.mb-2.typo-b1.mw400.pb-3.border-bottom {
    border-bottom: 0!important;
    margin-left: 0 !important;
}
select#bhgfgLangSelect, button#bhgfgRestoreBtn {
    border-radius: 8px;
}
div#mod-bhg-share-148 {
    margin-top: var(--space-4);
}
.map-item.leaflet-container {
    z-index: 2 !important;
}
/* ==========================================================
   TEXT COLORS – use tokens from typography.css (NO hardcode)
   Body text  -> --c-merlot-300
   Headings   -> --c-merlot-400
   ========================================================== */
html.hp-hero-step3 header {
    background-color: var(--c-forest-400) !important;
}
html.hp-hero-free .mag-lead-fullbleed .hero-scrollcue {
    display: none !important;
    visibility: hidden;
}
body:not(.bhg-room-mode) .item-1463,
body:not(.bhg-room-mode) .item-1464 {
    display:none !important;
}
.text-secondary {
    color: var(--c-merlot-400) !important;
}
body.site.error_site {
    background-color: var(--c-forest-400) !important;
}
body.site.error_site header {
    background-color: var(--c-forest-400) !important;
    background-image: none !important;
}
.modal-backdrop.show {
  background-color: var(--color-primary); /* #93352F */
  opacity: 0.8;
}
.modal-header .btn-close {
  background: none;
  font-size: 0;
  width: 32px;
  height: 32px;
  position: relative;
  opacity: 1;
}
.modal-header .btn-close::after {
  content: "\00D7";
  font-size: 24px;
  color: var(--secondary-color);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-hero-js a#back-top {
    display: none !important;
}
/* ==================== KONEC: TEXT COLORS ==================== */

/* ============================================================
   ZS TICKER – zlatá běžící lišta (marquee) nad panelem headeru
   Modul: custom HTML v pozici `ticker`, markup .zs-ticker
   ============================================================ */
.zs-ticker {
    overflow: hidden;
    /* Barvu řídí svět stránky – proměnné --page-world-* zapisuje mod_zsvenues.
       Když na stránce venue modul se světem není, platí fallback = zlatá. */
    background: linear-gradient(90deg,
        var(--page-world-a, var(--c-grain-300, #E7C766)),
        var(--page-world-b, var(--c-grain-400, #C2A361)));
    color: var(--page-world-ink, var(--c-forest-400));
    padding: 12px 0;
    font-size: 18px;
    font-family: var(--ff-mono);
    border-radius: 0px;
    font-weight: 600;
    position: relative;
    letter-spacing: .06em;
    text-transform: uppercase;
    top: 0;
    transition: background .3s ease, color .3s ease;
}
/* --- Topbar wrapper: modul je v pozici `topbar`, Cassiopeia ho obali
   <div class="container-topbar"> jako 1. dite <header>.
   Ticker je full-width lista na horni hrane stranky. --- */
header .container-topbar,
header .container-topbar > .topbar,
header .container-topbar .mod-custom {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
/* .zs-ticker nese i BS tridu .container – nutne prebit, jinak se zuzi na 1140px */
.zs-ticker.container {
  width: 100%;
  max-width: none !important;
  margin-inline: 0;
  padding-inline: 0;
}
.zs-ticker__track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: zs-ticker-scroll 32s linear infinite;
}
.zs-ticker:hover .zs-ticker__track { animation-play-state: paused; }
.zs-ticker__item { padding: 0 2rem; }
.zs-ticker__item a { color: inherit !important; text-decoration: underline; text-underline-offset: 2px; }
@keyframes zs-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .zs-ticker__track { animation: none; }
  .zs-ticker { transition: none; }
}
/* Barvu určí hero přítomný na stránce – nezávisle na <style> v hlavičce.
   Selektor :has() funguje i přesto, že je ticker v DOM nad herem. */
body:has(.zs-vhero[data-world="nest"]) .zs-ticker {
    --page-world-a: var(--c-grain-300, #E7C766);
    --page-world-b: var(--c-grain-400, #C2A361);
}
body:has(.zs-vhero[data-world="roots"]) .zs-ticker {
    --page-world-a: color-mix(in srgb, var(--world-roots) 65%, #fff);
    --page-world-b: var(--world-roots);
}
body:has(.zs-vhero[data-world="apple"]) .zs-ticker {
    --page-world-a: color-mix(in srgb, var(--world-apple) 55%, #fff);
    --page-world-b: color-mix(in srgb, var(--world-apple) 85%, #fff);
}
/* ==================== KONEC: ZS TICKER ==================== */

/* ============================================================
   HEADER NAV – desktop lišta (ticker | logo | menu | rezervace | EN)
   header  = absolutní (jen překrývá foto), svislý stack na střed
   .container-ticker = zlatá lišta, šířka containeru
   .grid-child.container-nav = tmavý panel, šířka containeru, překrývá
     spodní hranu tickeru
   Jen desktop (>=992px); mobil má vlastní hamburger systém níže.
   ============================================================ */
@media (min-width: 992px) {

  /* Header překrývá hero/foto, nezabírá výšku; svislý stack na střed */
  header.header.container-header1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: transparent;
    overflow: visible;

    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;                  /* topbar sedí na horní hraně stránky */
    padding-inline: 0;               /* boční odsazení řeší max-width panelu níže */
  }

  /* Topbar (ticker) – přes celou šířku, na horní hraně, nad panelem */
  header.header.container-header1 > .container-topbar {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  /* Tmavý panel – šířka containeru, na střed; přetáhne přes spodek tickeru */
  header.header.container-header1 > .grid-child.container-nav {
    position: relative;
    width: 100%;
    max-width: min(var(--header-max, 900px), calc(100% - 48px));
    height: 60px;                    /* pevná výška panelu */
    margin: 24px auto 0;             /* odsazení panelu od topbaru */
    z-index: 2;

    background: var(--c-forest-400);
    border-radius: 6px;
    /* jemný světlý rámeček – oddělí panel od stejně tmavého pozadí */
    border: 1px solid color-mix(in srgb, var(--c-canvas) 18%, transparent);

    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;                 /* jen horizontální; výšku drží height */
  }

  /* Prázdný modul na konci nic nezabírá */
  header .grid-child.container-nav > #mod-custom164:empty { display: none; }

  /* --- Logo (levý kraj) --- */
  header .grid-child.container-nav > #mod-custom273        { flex: 0 0 auto; margin: 0; }
  header .grid-child.container-nav > #mod-custom273 p      { margin: 0; }
  header .grid-child.container-nav > #mod-custom273 a      { margin: 0 !important; display: block; }
  header .grid-child.container-nav > #mod-custom273 img    { display: block; width: 90px; height: 50px; object-fit: contain; }

  /* --- Menu (mx-auto → centr mezi logem a pravou skupinou) --- */
  header .grid-child.container-nav > .mod-menu.magazin {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(8px, 1.1vw, 18px);
    margin: 0 0 0 auto;
    min-width: 0;                    /* smí se zúžit, nevytlačí EN z panelu */
    padding: 0;
    list-style: none;
  }
  header .grid-child.container-nav > .mod-menu.magazin > li.nav-item { display: flex; align-items: center; }
  /* Rodinu pisma resi tady, ne utility tridou: mod_menu nema class field
     na polozky, takze .ff-mono neni kam napsat. Velikost zustava 14px. */
  header .grid-child.container-nav > .mod-menu.magazin > li.nav-item > a,
  header .grid-child.container-nav > .mod-menu.magazin > li.nav-item > .nav-link.separator {
    color: var(--c-canvas);
    font-family: var(--ff-mono);
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 0;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
  }
  header .grid-child.container-nav > .mod-menu.magazin > li.nav-item > a:hover,
  header .grid-child.container-nav > .mod-menu.magazin > li.nav-item > a:focus-visible {
    color: var(--menu-hover, #ffbb67);
    text-decoration: underline;
    text-decoration-color: currentColor;
  }

  /* BAR & CLUB (separator) – šipka + hover jako u odkazů */
  header .grid-child.container-nav > .mod-menu.magazin > li.nav-item > .nav-link.separator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }
  header .grid-child.container-nav > .mod-menu.magazin > li.nav-item > .nav-link.separator::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
  }
  header .grid-child.container-nav > .mod-menu.magazin > li.nav-item.divider:hover > .nav-link.separator {
    color: var(--menu-hover, #ffbb67);
  }
  header .grid-child.container-nav > .mod-menu.magazin > li.nav-item.divider:hover > .nav-link.separator::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  /* --- Rezervace + EN (pravý kraj) --- */
  header .grid-child.container-nav > #mod-custom163, header .grid-child.container-nav > #mod-custom385   { flex: 0 0 auto; margin: 0; }
  header .grid-child.container-nav > #mod-custom163 p, header .grid-child.container-nav > #mod-custom385 p { margin: 0; }
  .menu-rezervace { position: static; }   /* barvu řeší .btn-canvas.btn-fill */
  header .grid-child.container-nav .menu-rezervace { padding-top: 8px; padding-bottom: 8px; }

  header .grid-child.container-nav > .mod-languages { flex: 0 0 auto; position: static; top: auto; margin: 0; }
  header .grid-child.container-nav > .mod-languages .mod-languages__list { margin-top: 0; }

  /* EN – outline varianta: rámeček, průhledné pozadí, zaoblený obdélník
     (přebíjí globální pill 46×46 i .ishero canvas variantu) */
  header .grid-child.container-nav > .mod-languages li a {
    min-width: 44px;
    height: 40px;
    padding: 8px 12px;
    border-radius: var(--radius-btn, 6px);
    background-color: transparent;
    border: 1px solid color-mix(in srgb, var(--c-canvas) 35%, transparent);
    color: var(--c-canvas) !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  header .grid-child.container-nav > .mod-languages li a:hover,
  header .grid-child.container-nav > .mod-languages li a:focus-visible {
    background-color: color-mix(in srgb, var(--c-canvas) 12%, transparent);
    border-color: color-mix(in srgb, var(--c-canvas) 60%, transparent);
    color: var(--c-canvas) !important;
  }
}

/* ============================================================
   ZS MEGA MENU – rozbalovací panel pod BAR & CLUB
   Trigger = polozka menu bez odkazu (.divider se <span class="nav-link separator">).
   Zamerne NE pres item-XXX: kazdy jazyk ma vlastni ID polozky.
   Modul: mod_zsmegamenu (pozice `menu`, za menu modulem).
   CSS ani JS modulu se nenačítá → styly i otevírání jsou zde,
   čistě přes CSS (:has + hover). .is-open zůstává pro případný JS.
   ============================================================ */
@media (min-width: 992px) {

  /* Menu na plnou výšku lišty – zruší mrtvou zónu pod textem, kde by
     hover propadl cestou dolů do panelu. Nutné na ul i li:
     samotné li se roztáhne jen na výšku ul. */
  header .grid-child.container-nav > .mod-menu.magazin,
  header .grid-child.container-nav > .mod-menu.magazin > li.nav-item {
    align-self: stretch;
  }

  /* Panel je vždy vykreslený, jen oříznutý – schovává ho overflow,
     nikoli opacity. Díky tomu může obsah vyjet zpod lišty. */
  .zs-mega {
    --mega-gap: 8px;                 /* mezera mezi lištou a panelem */

    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    padding-top: var(--mega-gap);    /* mezera je součástí panelu = hoverovatelná */
    overflow: hidden;
    pointer-events: none;
  }

  /* Zavřeno: obsah schovaný nad horní hranou (za lištou), oříznutý.
     --mega-close-delay = odklad zavření: přežije jednosnímkový výpadek
     hoveru při rychlém přejezdu z lišty do panelu. Otevírání je bez odkladu. */
  .zs-mega__inner {
    --mega-close-delay: .15s;
    transform: translateY(calc(-100% - var(--mega-gap)));
    transition: transform .35s cubic-bezier(.2, .8, .2, 1) var(--mega-close-delay);
  }

  /* Otevřeno – hover/focus na panelu nebo .is-open (JS).
     POZOR: :has() pravidla jsou záměrně v samostatných blocích níže.
     Neznámý selektor v čárkovém seznamu zneplatní CELÉ pravidlo, takže
     spojení obou variant by v prohlížeči bez :has() shodilo i hover fallback. */
  .zs-mega:hover,
  .zs-mega:focus-within,
  .zs-mega.is-open {
    pointer-events: auto;
  }

  .zs-mega:hover .zs-mega__inner,
  .zs-mega:focus-within .zs-mega__inner,
  .zs-mega.is-open .zs-mega__inner {
    transform: translateY(0);
    transition-delay: 0s;            /* otevírá se okamžitě */
  }

  /* Otevřeno – hover/focus na položce BAR & CLUB (vyžaduje :has()) */
  header .grid-child.container-nav:has(li.nav-item.divider:hover) .zs-mega,
  header .grid-child.container-nav:has(li.nav-item.divider:focus-within) .zs-mega {
    pointer-events: auto;
  }

  header .grid-child.container-nav:has(li.nav-item.divider:hover) .zs-mega__inner,
  header .grid-child.container-nav:has(li.nav-item.divider:focus-within) .zs-mega__inner {
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* --- Panel --- */
  .zs-mega__inner {
    background: var(--c-forest-400);
    border: 1px solid color-mix(in srgb, var(--c-canvas) 18%, transparent);
    border-radius: 6px;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(var(--mega-cards, 3), 1fr) 0.85fr;
    gap: 20px;
  }
  .zs-mega--noside .zs-mega__inner {
    grid-template-columns: repeat(var(--mega-cards, 3), 1fr);
  }

  /* --- Velká karta --- */
  .zs-mega__card { display: flex; flex-direction: column; }

  /* Media box – nese zástupné pozadí; když obrázek chybí, prosvitne placeholder */
  .zs-mega__media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    overflow: hidden;
    background:
      repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--c-canvas) 7%, transparent) 0 8px,
        transparent 8px 16px),
      var(--c-forest-300);
  }
  .zs-mega__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Pozn.: globální reset a:not(.btn):not(.nav-link)… má specificitu (0,5,1)
     a přebil by barvu i podtržení – proto !important. */
  /* Typografii (velikost/rodina/uppercase) nese class field modulu,
     vychozi hodnota "typo-c1 ff-mono text-uppercase". Tady jen struktura. */
  .zs-mega__title {
    display: inline-block;
    margin-top: 12px;
    color: var(--c-canvas) !important;
    text-decoration: underline !important;   /* podtrzeno i v klidovem stavu */
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color .15s ease;
  }

  .zs-mega__desc {
    margin: 6px 0 0;
    color: color-mix(in srgb, var(--c-canvas) 70%, transparent);
    font-size: var(--typo-c1-fs);
    line-height: var(--typo-c1-lh);
    font-weight: var(--typo-w-body);
  }

  .zs-mega__cta { margin-top: auto; padding-top: 14px; }
  .zs-mega__cta .btn {
    font-size: var(--typo-btn-fs);
    line-height: var(--typo-btn-lh);
    padding: 6px 16px;
  }

  /* --- Boční sloupec ---
     Výška = přesně výška obrázku karty. Panel má pevnou šířku (--header-max),
     takže jde dopočítat:
       šířka karty  = (panel − 2px rámeček − 2×20px padding − 3×20px gap) / 3.85
                    = (--header-max − 102px) / 3.85
       výška obrázku = šířka karty × 10/16   (aspect-ratio 16/10) */
  .zs-mega__side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 20px;
    border-left: 1px solid color-mix(in srgb, var(--c-canvas) 12%, transparent);

    align-self: start;
    height: calc((var(--header-max, 1000px) - 102px) / 3.85 * 0.625);
  }
  .zs-mega__side-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 0;                       /* dvě položky rozdělí výšku obrázku */
    min-height: 0;
    color: var(--c-canvas) !important;
    text-decoration: none !important;
  }
  .zs-mega__side-media {
    flex: 0 0 auto;
    position: relative;
    width: 84px;
    height: 100%;                      /* náhled na plnou výšku položky */
    border-radius: 6px;
    overflow: hidden;
    background:
      repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--c-canvas) 7%, transparent) 0 6px,
        transparent 6px 12px),
      var(--c-forest-300);
  }
  .zs-mega__side-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Rodic .zs-mega__side-item (<a>) ma text-decoration: none !important,
     proto musi byt podtrzeni titulku take !important. */
  .zs-mega__side-title {
    display: block;
    color: var(--c-canvas);
    text-decoration: underline !important;   /* podtrzeno i v klidovem stavu */
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color .15s ease;
  }
  .zs-mega__side-desc {
    display: block;
    margin-top: 2px;
    color: color-mix(in srgb, var(--c-canvas) 70%, transparent);
    font-size: var(--typo-c1-fs);
    line-height: var(--typo-c1-lh);
    font-weight: var(--typo-w-body);
  }

  /* Hover – jednotná barva jako u hlavního menu */
  .zs-mega__title:hover,
  .zs-mega__title:focus-visible {
    color: var(--menu-hover, #ffbb67) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
  }
  .zs-mega__side-item:hover .zs-mega__side-title,
  .zs-mega__side-item:focus-visible .zs-mega__side-title {
    color: var(--menu-hover, #ffbb67);
    text-decoration: underline !important;
    text-underline-offset: 4px;
  }

  @media (prefers-reduced-motion: reduce) {
    .zs-mega__inner { transition: none; --mega-close-delay: 0s; }
  }
}

/* Mobil – desktop menu je skryté, panel taky */
@media (max-width: 991.98px) {
  .zs-mega { display: none; }
}
/* ==================== KONEC: ZS MEGA MENU ==================== */

/* Mobil – skrýt menu i tlačítko.
   Pozn.: zdejsi "header { height: 90px }" bylo mrtve — §21 ZS MOBILNI MENU
   nastavuje ve stejnem @media "height: auto" a je nize v souboru. Odstraneno. */
@media (max-width: 991.98px) {
  .menu-rezervace,
  ul.mod-menu.desktop.magazin {
    display: none !important;
  }
    #mod-custom273 {
        display: none !important;
    }
    ul.mod-menu.magazin > li.active > a::after {
        display:none !important;
    }
}

/* Na hero stránkách – canvas varianta */
body.ishero .menu-rezervace {
  background-color: var(--c-canvas) !important;
  border-color: var(--c-canvas) !important;
  color: var(--c-forest-400) !important;
}
body.ishero .mod-languages li a {
  color: var(--c-canvas) !important;
}
body.ishero .menu-rezervace:hover {
  background-color: #CFD3E8 !important;
  border-color: #CFD3E8 !important;
  color: var(--c-forest-400) !important;
}
/* ==================== KONEC: HEADER NAV ==================== */

html { scrollbar-gutter: stable; }
:root {
  --color-text:       var(--c-canvas);
  --color-text-muted: color-mix(in srgb, var(--c-canvas) 70%, transparent);
  --body-color:       var(--c-canvas);
  --bs-body-color:    var(--c-canvas);
  --bs-heading-color: var(--c-canvas);
  --box-shadow-sm:    0px 0px 20px 0px rgba(35, 20, 45, 0.15);
  --header-max:       1000px;   /* max šířka obsahu headeru (ticker + panel) */
  --menu-hover:       #ffbb67;  /* hover položek hlavního menu */
}
a:focus,
a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
.bg-body {
    background-color: var(--color-bg) !important;
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
  color: var(--bs-heading-color);
}
.bhg-eshop .small {
    font-size: var(--typo-b1-fs);
}
.eshop-no-category .breadcrumbs {
    display: none;
}
.bhg-eshop__content.eshop-no-category {
    display: none;
}
.typo-h1, .typo-h12, .typo-h2, .typo-h3, .typo-h4 {
  color: var(--bs-heading-color);
}
.bg-forest-400 { background-color: var(--c-forest-400) !important; }
.bg-forest-08  { background-color: var(--bg-forest-08) !important; }
.text-canvas     { color: var(--c-canvas) !important; }
.text-canvas-80  { color: color-mix(in srgb, var(--c-canvas) 80%, transparent) !important; }
.mw920 { max-width: 920px; }

.mw800{ max-width: 800px; }
.mw752 { max-width: 752px; }
.mw680 { max-width: 680px; }
.mw700 { max-width: 700px; }
.mw600 { max-width: 600px; }
.mw450 { max-width: 450px; }
.mw420 { max-width: 420px; }
.mw400 { max-width: 400px; }
.mw360 { max-width: 360px; }
.fw-extrabold { font-weight: 800 !important; }
.fw-sub   { font-weight: var(--typo-w-sub) !important; }
.fw-500   { font-weight: 500 !important; }
.lh-1     { line-height: 1 !important; }
.lh-05     { line-height: 0.5 !important; }
/* FIX: chyběla závorka u @media */
@media (min-width: 576px) {
  .min450 { min-width: 450px; }
}
:is(
  [class~="forest"],
  [class^="forest-"],
  [class*=" forest-"],
  [class*=" forest__"],
  .bg-forest,
  .forest-split__card
) .badge-pill, .badge-pill.light {
  color: var(--c-canvas);
}
.border-pata {
    border-color: color-mix(in srgb, var(--c-canvas) 20%, transparent) !important;
}

/* ============================================================
   TRUST-ICON – rozměr 56×56
   Přesunuto z modulů #132, #140, #150
   ============================================================ */
.trust-icon {
  width: 56px;
  height: 56px;
}
.trust-icon svg { display: block; }
/* ==================== KONEC: TRUST-ICON ==================== */

/* ============================================================
   HERITAGE SPLIT
   Přesunuto z modulů #142, #180, #229, #230, #328, #330
   ============================================================ */
.forest-split__media,
.forest-split__card {
  border-radius: 18px;
  overflow: hidden;
}
.forest-split__img {
  object-fit: cover;
  min-height: clamp(360px, 36vw, 680px);
}
.forest-split__card {
  background: var(--c-forest-400);
  padding: clamp(28px, calc(24px + 0.6vw), 32px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.forest-split__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 575.98px) {
  .forest-split__btn {
    white-space: normal;
    line-height: 1.2;
  }
}
@media (max-width: 991.98px) {
  .forest-split { position: relative; }
  .forest-split__row { margin-bottom: -60px; }
  .forest-split__card {
    margin-top: -40px;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
  }
    .forest-split__row > .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* ==================== KONEC: HERITAGE SPLIT ==================== */
body:not(.events) .mod-catswithtags .badge-pill {
    /*display: none;*/
}
/* --- PODNIKY BHG – logo pás --- */
.bhg-logos__img {
  width: auto;
  height: 125px;
  max-height: 125px;
  transition: opacity .2s ease;
}
.bhg-logos__link:hover .bhg-logos__img {
  opacity: .65;
}

@media (max-width: 991.98px) {
  .bhg-logos__img {
    height: 90px;
    max-height: 90px;
  }
}
@media (max-width: 575.98px) {
  .bhg-logos__img {
    height: 88px;
    max-height: 80px;
  }
}
/* === mod_bhglist_items === */
.mod-bhglist-items__img {
    aspect-ratio: 1 / 1;
}
.napoje .bhglist-container section .col > .d-flex {
    max-width: 780px;
    border-bottom: var(--border-width, var(--bs-border-width, 1px))
                   var(--border-style, var(--bs-border-style, solid))
                   var(--border-color, var(--bs-border-color, currentColor)) !important;
    padding-bottom: var(--space-4);
}
div#bhgfg-root .bhgfg-translate, .bhglist-container .bhgfg-translate {
    border-bottom: var(--border-width, var(--bs-border-width, 1px))
                   var(--border-style, var(--bs-border-style, solid))
                   var(--border-color, var(--bs-border-color, currentColor)) !important;
    padding-bottom: var(--space-5);
}
/* ============================================================
   TIMELINE ZIG-ZAG – O nás (celá šířka containeru)
   Desktop (>=992px):
     - intro řádek: nadpis VLEVO (statický) + 1. item VPRAVO
     - pak zig-zag: even(child#2,#4,#6)=VLEVO, odd(child#3,#5,#7)=VPRAVO
     - svislá čára uprostřed s tečkami
     - kaskádový overlap: každý item začíná v ~60% výšky předchozího
   Mobil (<992px):
     - čára vlevo, obsah vpravo, nadpis nad 1. itemem
   ============================================================ */

.tl-zigzag {
  --tl-line-color: var(--c-forest-400);
  --tl-dot-size: 14px;
  --tl-line-width: 2px;
  --tl-gap: 28px;
  --tl-item-spacing: 48px;
  --tl-overlap: 18%;        /* desktop: posun dalšího itemu zpět */
  --tl-overlap-first: 18%;  /* desktop: posun 1. itemu po intro */
  position: relative;
  padding: 0;
}

/* Svislá čára */
.tl-zigzag::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--tl-line-width);
  background: var(--tl-line-color);
}

/* Tečka */
.tl-zigzag__dot {
  position: absolute;
  top: 6px;
  width: var(--tl-dot-size);
  height: var(--tl-dot-size);
  border-radius: 50%;
  background: var(--tl-line-color);
  z-index: 2;
}

/* Item */
.tl-zigzag__item {
  position: relative;
  padding-bottom: var(--tl-item-spacing);
}
.tl-zigzag__item:last-child {
  padding-bottom: 0;
}

/* Obrázek */
.tl-zigzag__img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

/* Intro blok */
.tl-zigzag__intro {
  position: relative;
  margin-bottom: var(--tl-item-spacing);
}

/* --- MOBIL: čára vlevo --- */
.tl-zigzag::before {
  left: calc(var(--tl-dot-size) / 2 - var(--tl-line-width) / 2);
}
.tl-zigzag__dot {
  left: 0;
}
.tl-zigzag__content {
  margin-left: calc(var(--tl-dot-size) + var(--tl-gap));
}
.tl-zigzag__intro .tl-zigzag__heading {
  margin-left: calc(var(--tl-dot-size) + var(--tl-gap));
  margin-bottom: 2rem;
}
.tl-zigzag__intro .tl-zigzag__content {
  margin-left: calc(var(--tl-dot-size) + var(--tl-gap));
}

/* --- DESKTOP (>=992px) --- */
@media (min-width: 992px) {
  .tl-zigzag {
    --tl-gap: 40px;
    --tl-item-spacing: 64px;
  }

  /* Čára uprostřed */
  .tl-zigzag::before {
    left: 50%;
    transform: translateX(-50%);
  }
  .tl-zigzag__dot {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Kaskádový overlap */
  .tl-zigzag__item {
    padding-bottom: 0;
    margin-top: calc(-1 * var(--tl-overlap));
  }
  .tl-zigzag__item:nth-child(2) {
    margin-top: calc(-1 * var(--tl-overlap-first));
  }

  /* Intro: CSS grid – [nadpis] [tečka] [1. item] */
  .tl-zigzag__intro {
    display: grid;
    grid-template-columns:
      calc(50% - var(--tl-dot-size) / 2 - var(--tl-gap))
      calc(var(--tl-dot-size) + var(--tl-gap) * 2)
      calc(50% - var(--tl-dot-size) / 2 - var(--tl-gap));
    align-items: start;
    margin-bottom: 0;
  }
  .tl-zigzag__intro .tl-zigzag__heading {
    grid-column: 1;
    margin-left: 0;
    margin-bottom: 0;
    text-align: left;
    padding-top: 4px;
  }
  .tl-zigzag__intro .tl-zigzag__dot {
    grid-column: 2;
    position: relative;
    left: auto;
    transform: none;
    justify-self: center;
    top: 6px;
  }
  .tl-zigzag__intro .tl-zigzag__content {
    grid-column: 3;
    margin-left: 0;
    width: auto;
    text-align: left;
  }

  /* Zbylé itemy: šířka poloviny */
  .tl-zigzag__content {
    margin-left: 0;
    width: calc(50% - var(--tl-dot-size) / 2 - var(--tl-gap));
  }

  /* Po intro (child #1): child #2=even, #3=odd, #4=even …
     intro=VPRAVO → #2=VLEVO → #3=VPRAVO → #4=VLEVO … */

  /* Even (child #2, #4, #6… = 1992, 2010, 2022…) = VLEVO */
  .tl-zigzag__item:nth-child(even) .tl-zigzag__content {
    margin-left: 0;
    margin-right: auto;
    text-align: right;
  }
  .tl-zigzag__item:nth-child(even) .tl-zigzag__media {
    display: flex;
    justify-content: flex-end;
  }

  /* Odd (child #3, #5, #7… = 2000, 2016, 2024…) = VPRAVO */
  .tl-zigzag__item:nth-child(odd) .tl-zigzag__content {
    margin-left: auto;
    margin-right: 0;
    text-align: left;
  }
}
/* ==================== KONEC: TIMELINE ZIG-ZAG ==================== */
/* ============================================================
   FAQ ACCORDION
   Přesunuto z #143, #183, #190, #195, #217, #222, #292–#297
   ============================================================ */
.faq .tf-accordion-widget--item {
  border-bottom: 1px solid color-mix(in srgb, var(--c-merlot-400) 20%, transparent) !important;
}
.faq .tf-accordion-widget--item--title {
  font-family: var(--ff-head);
  font-size: var(--typo-s2-fs);
  line-height: var(--typo-s2-lh);
  font-weight: 600;
  color: var(--c-merlot-400);
  padding-left: 0;
}
.faq .tf-accordion-widget--item--content {
  font-size: var(--typo-b2-fs);
  line-height: var(--typo-b2-lh);
  font-weight: 400;
}
@media (max-width: 991.98px) {
  .faq.container-fluid.pt-5.border-top.border-2 {
    border: none !important;
    padding-top: 0 !important;
  }
}
/* ==================== KONEC: FAQ ACCORDION ==================== */

/* ==========================================================
   PŘESUNUTO Z MODULŮ – pseudo-elementy, masking, animace
   ========================================================== */
/* --- HP HERO – Přesunuto z #198 (CZ), #321 (EN) --- */
.hp-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 70vh, 740px);
  padding: clamp(20px, 4vw, 56px) clamp(20px, 5vw, 64px);
  color: inherit;
  padding-top: 0;
}
.hp-hero::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -15px;
  width: min(760px, 58vw);
  height: min(760px, 78vh);
  background: currentColor;
  opacity: 0.30;
  pointer-events: none;
  transform: translateY(0);
  will-change: transform, opacity;
  -webkit-mask-image: url("/images/staromestske-namesti.png");
          mask-image: url("/images/staromestske-namesti.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left bottom;
          mask-position: left bottom;
  -webkit-mask-size: contain;
          mask-size: contain;
}
@supports (-webkit-mask-composite: source-in) {
  .hp-hero::before {
    -webkit-mask-image:
      url("/images/staromestske-namesti.png"),
      linear-gradient(to top, transparent 0%, rgba(0,0,0,.35) 10%, #000 22%, #000 100%),
      linear-gradient(to right, #000 0%, #000 55%, rgba(0,0,0,.60) 70%, transparent 92%);
    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
    -webkit-mask-position: left bottom, left bottom, left bottom;
    -webkit-mask-size: contain, 100% 100%, 100% 100%;
    -webkit-mask-composite: source-in, source-in;
  }
}
.hp-hero__note,
.hp-hero__bottom {
  opacity: 1;
  transform: translateY(0);
  will-change: transform, opacity;
  position: relative;
  z-index: 1;
}
.hp-hero__claim {
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-size: clamp(44px, 5.8vw, 84px);
}
@media (max-width: 860px) {
  .hp-hero__bottom { grid-template-columns: 1fr; align-items: start; }
  .hp-hero__note   { justify-self: start; max-width: 60ch; }
  .hp-hero::before {
    opacity: 0.24;
    width: min(720px, 92vw);
    height: min(560px, 62vh);
    left: -12px;
    bottom: -15px;
    -webkit-mask-position: left bottom;
            mask-position: left bottom;
  }
}
html.hp-hero-step3-start .hp-hero::before {
  opacity: 0;
  transform: translateY(-120vh);
  transition: transform 260ms ease, opacity 260ms ease;
}
html.hp-hero-step3-start .hp-hero__note,
html.hp-hero-step3-start .hp-hero__bottom {
  opacity: 0;
  transform: translateY(-18px);
  transition:
    opacity calc(var(--panel2-anim, 900ms) / 2) ease,
    transform calc(var(--panel2-anim, 900ms) / 2) ease;
}

/* --- DEER HERO – mobil: kontakt badge pod buttony --- */
@media (max-width: 991.98px) {
  .deer-hero {
    flex-direction: column;
    margin-top: -90px;
    padding-top: 110px;
  }
  .deer-hero__contact {
    position: relative;   /* zůstává v toku pod kartou, ale nad obloukem */
    z-index: 3;           /* nad obloukem (z-index 2) */
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    align-items: center !important;
    margin-top: -30px;
    top: -5px;
  }
  .deer-hero .hero-cta-card {
    margin-bottom: 20px;
  }
}

/* --- NASE PODNIKY – Přesunuto z #170 (CZ), #307 (EN) --- */
.podniky-wrap {
  position: relative;
  padding: 24px 0;
  isolation: isolate;
}
.podniky-wrap.bg-paper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--c-paper);
  z-index: -1;
}
.podniky-left {
  position: sticky;
  top: 24px;
  align-self: flex-start;
  padding: 8px 12px;
}
.podniky-right { padding: 8px 12px; }
@media (max-width: 991.98px) {
  .podniky-left { position: static; }
}

/* --- PETR BAUER – Přesunuto z #175 (CZ), #256 (EN) --- */
.person__media {
  border-radius: var(--radius-card, 20px);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.person__quote-wrap { max-width: 36rem; }
@media (max-width: 991.98px) {
  .person__quote-wrap { max-width: 100%; padding-top: 0.5rem; }
}

/* ============================================================
   §  PATIČKA – STROM (nahrazuje sekci "PATIČKA ORLOJ", user.css ř. 1234–1259)
   Soubor: /images/strom-pata.svg  (levá polovina stromu, gradient dohasíná doleva)
   Opacity je zapečená v SVG (fill-opacity=".1") → žádné z-index vrstvení.

   LADICÍ KNOFLÍK: --strom-top = mezera stromu od HORNÍ hrany patičky.
   Strom je ukotvený dole a jeho výška = výška patičky mínus tato mezera,
   takže nikdy nepřeteče nahoru a vždy končí kousek pod horní hranou.
   ============================================================ */
footer.container-footer {
  --strom-top: 48px;
  /* bocni odsazeni obsahu paticky na mobilu = krajni sloupec site-gridu.
     Zmer si v devtools skutecnou sirku [full-start] minmax() sloupce
     (na 420px vetsinou ~16px) a dosad. Desktop ho nuluje (viz nize). */
  --pata-gutter: 16px;

  position: relative;
  overflow: hidden;

  background-color: var(--c-forest-400) !important;
  background-image: url("/images/strom-pata.svg") !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: auto calc(100% - var(--strom-top)) !important;
}

/* Obsahová část modulu musí být průhledná, jinak strom překryje.
   (Pozadí i zaoblení 16px 16px 0 0 drží samotný footer.container-footer.) */
footer.container-footer .grid-child,
footer.container-footer .moduletable,
footer.container-footer .mod-custom,
footer.container-footer .card {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

@media (max-width: 991.98px) {
  footer.container-footer { --strom-top: 32px; }
}

@media (max-width: 575.98px) {
  footer.container-footer { --strom-top: 24px; }
}

/* --- Bocni odsazeni obsahu paticky ---
   Paticka NENI .site-grid (ten resi okraj prazdnymi krajnimi sloupci
   [full-start] minmax(0,1fr) …). Paticka je footer.container-footer
   s vlastnim .container uvnitr modulu. Aby na mobilu drzela stejny
   okraj jako zbytek webu, davame gutter rucne; na desktopu 0 (full-width). */
footer.container-footer > .grid-child {
  padding-left: var(--pata-gutter);
  padding-right: var(--pata-gutter);
}
@media (min-width: 992px) {
  footer.container-footer > .grid-child {
    padding-left: 0;
    padding-right: 0;
  }
}
/* ==================== KONEC: PATIČKA – STROM ==================== */

/* --- CO NÁS DEFINUJE – Přesunuto z #174 (CZ), #310 (EN) --- */
.value-icon {
  width: 64px;
  height: 64px;
}

/* --- REZERVOVAT STŮL – Přesunuto z #228 (CZ), #275 (EN) --- */
.reserve-btn {
  --reserve-link-color: var(--c-canvas);
  --reserve-icon-bg:    #E3DDD3;
  --reserve-icon-color: var(--color-primary);
}
@media (min-width: 992px) {
  .border-start-lg {
    border-left: 1px solid var(--color-border) !important;
  }
}
.btn.btn-outline.reserve-btn {
  border: 0 !important;
  color: var(--reserve-link-color) !important;
  text-decoration: none;
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.reserve-btn__icon {
  width: 44px;
  height: 44px;
  background: var(--reserve-icon-bg);
  color: var(--reserve-icon-color);
}
.reserve-btn__svg  { display: block; }
.reserve-btn__text { letter-spacing: .08em; }

/* --- BHG HERO CTA – Přesunuto z #176 (CZ), #298 (EN) --- */
.bhg-hero {
  border-radius: 16px;
  min-height: 400px;
  background: #000;
  position: relative;
  overflow: visible;
}
.bhg-hero__bg {
  position: absolute;
  inset: 0;
  background: url("images/bhg-family-interier-restaurace.webp") center/cover no-repeat;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
}
.bhg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 60%);
  pointer-events: none;
  z-index: 0;
}
.bhg-card {
  position: relative;
  z-index: 1;
  background: var(--c-surface, #f6f1ea);
  border-radius: 8px;
  box-shadow: 0px 0px 20px 0px rgba(35, 20, 45, 0.15);
}
.bhg-card--lift { transform: translateY(-40px); }
@media (max-width: 991.98px) {
  .bhg-hero { padding: 18px 0; }
  .bhg-card { margin: 14px; max-width: 100%; }
  .bhg-card--lift { transform: none; }
}
@media (max-width: 767.98px) {
  .bhg-hero {
    padding: 0;
    min-height: auto;
    background: transparent;
    overflow: visible;
    border-radius: 18px;
  }
  .bhg-hero::after { content: none; }
  .bhg-hero__bg {
    position: relative;
    inset: auto;
    height: 60vw;
    min-height: 240px;
    max-height: 380px;
    border-radius: inherit;
    overflow: hidden;
    z-index: 0;
    background: url("images/rodina.jpg") center/cover no-repeat;
  }
  .bhg-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 55%);
    pointer-events: none;
  }
  .bhg-card {
    margin: 0 !important;
    max-width: none;
    border-radius: 18px;
    transform: translateY(-12vw);
  }
  .bhg-hero .container {
    padding: 0;
    margin-bottom: -50px;
  }
}
@media (max-width: 575.98px) {
  .bhg-hero { border-radius: 18px; }
  .bhg-card { border-radius: 18px; padding: 20px; }
}

/* --- ERROR 404 – Přesunuto z #254 --- */
.err404-wrap {
  position: relative;
  overflow: visible;
  min-height: clamp(520px, 78vh, 820px);
  display: grid;
  place-items: center;
  color: inherit;
}



/* --- ESHOP HERO – Přesunuto z #141 --- */
.eshop-hero {
  min-height: clamp(420px, 38vw, 620px);
  display: flex;
  align-items: stretch;
}
.eshop-hero__bg {
  position: absolute;
  inset: 0;
  background: url("/images/eshop-banner.jpg") center right / cover no-repeat;
}
.eshop-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: stretch;
}
.eshop-hero__card {
  width: min(540px, 100%);
  border-radius: 14px;
  padding: clamp(28px, 3.2vw, 56px);
  background: var(--color-bg, #fff);
  margin-block: 32px;
  height: calc(100% - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .eshop-hero__bg { background-position: center; }
  .eshop-hero__card { margin-left: auto; margin-right: auto; }
}
@media (max-width: 767.98px) {
  .eshop-hero { min-height: auto; padding: 16px 0; }
  .eshop-hero__bg { display: none; }
  .eshop-hero__card {
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
  }
  .eshop-hero__card::before {
    content: "";
    display: block;
    height: clamp(180px, 46vw, 260px);
    background: url("/images/eshop-banner.jpg") center / cover no-repeat;
    margin: -24px -24px 20px -24px;
    border-radius: 24px 24px 0 0;
  }
  .eshop-hero__card h2 { margin-top: 0; }
  .eshop-hero__card p  { margin-top: 16px !important; }
}

/* --- WORLD CARD – homepage --- */
.world-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}
.world-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 55%);
  pointer-events: none;
}
.world-card__label {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  transition: opacity .2s ease, transform .2s ease;
}
.world-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform: translateY(calc(100% + 2px));
  transition: transform .28s ease;
  pointer-events: none;
}
.world-card__overlay a.btn { pointer-events: auto; }
.world-card:hover .world-card__overlay,
.world-card:focus-within .world-card__overlay { transform: translateY(0); }
.world-card:hover .world-card__label,
.world-card:focus-within .world-card__label  { opacity: 0; transform: translateY(8px); }

/* --- REZERVACE POKOJŮ --- */
.info-panel.infoapa { display: none; }
.bg-surface, .total, .kolotoc .pole, .bg-total { background-color: var(--c-surface) !important; }
.kolotoc .pole { border: none !important; }
.kolotoc .pole.vybran { color: var(--c-canvas); }
.kolotoc .pole.odjezd .bhg-day-card {
  background-color: var(--c-forest-400) !important;
  border-color: var(--c-forest-400) !important;
  opacity: 0.6;
  color: var(--c-canvas);
}
.date-picker-wrapper { background-color: var(--c-surface) !important; }
/* ==================== KONEC: PŘESUNUTO Z MODULŮ ==================== */

/* klasické stylování */
.mag-body p { margin-bottom: 1.5rem; }
.mod-languages li a {
    text-decoration: none !important;
}
/* Tlačítko nahoru – hover + všechny interakční stavy stejně */
a#back-top:hover,
a#back-top:focus,
a#back-top:focus-visible,
a#back-top:active,
a#back-top:visited {
  color: var(--c-canvas);
  background-color: var(--c-forest-400);
  border-color: var(--c-forest-400);
  outline: none;
  box-shadow: none;
}
p.counter { display: none; }
.card { overflow: hidden; }
.shadow-block, .shadow-panel {
  box-shadow: 0px 0px 20px 0px rgba(35, 20, 45, 0.15) !important;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.shadow-block:hover { transform: translateY(-16px) scale(1.02) !important; }
/*  error page */
/* Error stránka – světlé menu na tmavém pozadí */
body.site.error_site header li.nav-item a,
body.site.error_site header li.nav-item span,
body.site.error_site header .navbar-brand a,
body.site.error_site header .container-nav a,
body.site.error_site header .mod-menu .nav-link,
body.site.error_site header .brand-logo {
    color: var(--c-canvas) !important;
}
/* Error stránka – tlačítko REZERVACE má canvas pozadí, takže text musí být forest */
html body.site.error_site header .menu-rezervace,
html body.site.error_site header .menu-rezervace * {
    color: var(--c-forest-400) !important;
}
body.site.error_site header {
    top:-20px;
}
body.site.error_site header img[src*="logo-shop"] {
    content: url("/images/logo-deer-light.svg");
}
/* formuláře → přesunuto do forms.css (§F1) */

/* FIX: odstraněno dvojité "color: color:" */
body { color: var(--bs-body-color); }

.itemid-870 .main-bottom.no-card.border-top { border-top: none !important; }
.container-topbar1.d-flex.container {
  justify-content: flex-end;
  background-color: var(--c-forest-400) !important;
  margin-bottom: var(--space-3) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.topbar .mod-languages a {
  font-size: var(--typo-c2-fs);
  text-decoration: none !important;
}
.magpod .topbar .mod-languages a { color: var(--c-canvas) !important; }
.topbar .mod-languages { margin-top: -3px; }

header .reserve-btn {
  --reserve-link-color: var(--c-merlot-400);
  --reserve-icon-bg:    var(--c-forest-400);
  --reserve-icon-color: var(--c-canvas);
}
.magpod header .reserve-btn {
  --reserve-link-color: var(--c-canvas);
  --reserve-icon-bg:    var(--c-canvas);
  --reserve-icon-color: var(--c-forest-400);
}
header .reserve-btn:hover {
  background-color: var(--c-forest-300) !important;
  color: var(--c-canvas) !important;
}
header .reserve-btn:hover .reserve-btn__text { color: var(--c-canvas) !important; }

div#mod-custom156 { display: flex; }
.itemid-870 .nohome { display: none; }
body.site.com_bhgshop.view-produkt .breadcrumbs.horni { display: none; }
.bhg-prod .vpravo .breadcrumb {
  background-color: transparent;
  padding: 0 !important;
  margin-bottom: 3rem;
}

.footer {
  /* --- ladicí knoflíky patičky --- */
  --pata-link-gap: 4px;    /* mezera mezi řádky ve sloupcích */
  --pata-head-gap: 14px;   /* mezera pod nadpisem sloupce   */

  color: var(--c-canvas) !important;
  background-color: var(--c-forest-400) !important;
  background-image: none;
  border-radius: 16px 16px 0 0;
}
footer.container-footer { margin-top: var(--space-5); }
.footer a:not(.btn) {
  color: color-mix(in srgb, var(--c-surface) 80%, transparent) !important;
  text-decoration: none !important;
}
/* Patička – právní odkazy: hover = bílá + podtržení */
.footer ul.list-unstyled.typo-c1 a:hover,
.footer ul.list-unstyled.typo-c1 a:focus-visible {
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}
.footer .modal a:not(.btn) {
    color: inherit !important;
}

.kontakty footer.container-footer { margin-top: -7px; }

.share-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--c-forest-400) !important;
  color: var(--on-primary) !important;
}
.share-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.share-ic     { width: 32px; height: 32px; display: block; }
.share-ic--24 { width: 24px; height: 24px; }
.breadcrumb   { --breadcrumb-font-size: 12px; }

/* .bhg-qty (qty stepper) → přesunuto do forms.css (§F2) */

/* otázky a odpovědi */
.faq .tf-accordion-widget {
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0;
}.tf-accordion-widget--item--content {
  font-size: var(--typo-s3-fs) !important;
  line-height: var(--typo-s3-lh) !important;
  font-weight: var(--typo-w-body) !important;
  color: var(--c-merlot-300) !important;
}
.tf-accordion-widget--item--content:not(.multiform .tf-accordion-widget--item--content) {
  padding-left: 0 !important;
}
/* .multiform (ConvertForms) → přesunuto do forms.css (§F3) */
@media (max-width: 991.98px) {
  div#mod-custom193 section.py-5 { padding-bottom: 0 !important; }
  div#mod-custom195 section { padding-top: 0 !important; padding-bottom: 0 !important; }
  div#mod-custom195 section .faq { padding-top: 10px !important; }
}

/* slider homepage */
.swiper-wrapper { padding-top: 35px; padding-bottom: 35px; }
.swiper-slide img { display: block; width: 100%; height: auto; transform: translateY(0); }
.swiper-slide img         { border-radius: 8px; }
.swiper-slide.is-odd  img { transform: translateY(-35px); }
.swiper-slide.is-even img { transform: translateY( 35px); }
.swiper, .swiper-slide    { overflow: visible; }

/* drobečkovka */
/* FIX: šablona přejmenována cassiopeia_bhg → cassiopeia_trs.
   Body class vzniká z request var "layout" (CMD filtr zahodí dvojtečku),
   takže z "cassiopeia_trs:blognapsali" je "layout-cassiopeia_trsblognapsali".
   Starý selektor ponechán kvůli legacy/cache. */
.layout-cassiopeia_trsblognapsali .container-banner,
.layout-cassiopeia_bhgblognapsali .container-banner { margin: 0; }
.breadcrumb { background-color: transparent; }
.homeshop .horni.eshop, .com_bhgshop.view-cart .horni.eshop { display: none; }
.drobek .breadcrumb,
.drobek .breadcrumb a,
.drobek .breadcrumb span,
.drobek .breadcrumb li:before {
  font-size: var(--typo-c2-fs) !important;
  color: var(--color-text) !important;
  text-transform: uppercase;
}
.magpod .drobek .breadcrumb,
.magpod .drobek .breadcrumb a,
.magpod .drobek .breadcrumb span,
.magpod .drobek .breadcrumb li:before { color: var(--c-canvas) !important; }
.breadcrumbs.small.horni .breadcrumb { padding-left: 0 !important; }
.magpod .breadcrumb { display: none; }
.layout-cassiopeia_bhgblogstitky .breadcrumb { display: block; }
.bhg-breadcrumbs--desktop .breadcrumb {
  padding-left: 0 !important;
  padding-top: 0 !important;
  margin-bottom: var(--space-5) !important;
}
@media (max-width: 767.98px) {
  .bhg-breadcrumbs--desktop .breadcrumb { display: none; }
}
.mod-breadcrumbs__wrapper .bc-divider       { color: var(--c-merlot-400); }
.drobek .mod-breadcrumbs__wrapper .bc-divider { color: var(--c-canvas); }

/* modul recenze */
.review-panel__sketch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: block;
  opacity: .55;
  z-index: 0;
}
.review-panel__sketch::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 56%;
  background: url("/images/a-panel.png") left bottom / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
}
.review-panel__sketch::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 56%;
  background: url("/images/b-panel.png") right bottom / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
}
.review-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to right,
    transparent 0%, transparent 10%,
    var(--c-merlot-400) 28%, var(--c-merlot-400) 72%,
    transparent 90%, transparent 100%
  );
}
@media (max-width: 767.98px) {
  .review-panel__sketch::before { display: none; }
  .review-panel { padding-bottom: 4rem !important; }
}

/* hero modul s obrázkem */
.hero-section { width: 100%; position: relative; }
.hero-fullvw {
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  height: 100vh;
  height: 100svh;
}
.hero-under-header {
  padding-top: var(--header-h, 0px);
  min-height: calc(100svh + var(--header-h, 0px));
  height: calc(100svh + var(--header-h, 0px));
}
.hero-section .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 18% 78%, rgba(0,0,0,.70) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg,
      rgba(0,0,0,.75) 0%, rgba(0,0,0,.55) 10%, rgba(0,0,0,.25) 22%, rgba(0,0,0,0) 38%,
      rgba(0,0,0,0) 72%, rgba(0,0,0,.35) 85%, rgba(0,0,0,.80) 100%
    );
}
.hero-section .hero-inner {
  min-height: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  z-index: 1 !important;
  padding-bottom: var(--space-5);
}
.hero-section .hero-grid { margin-top: auto !important; align-items: flex-end !important; }
.autoplay-progress-circle { display: none !important; }

header { position: relative; z-index: 40; background: transparent; }

@media (max-width: 991.98px) {
  .hero-section.hero-under-header {
    --hero-overhang: 100px;
    overflow: visible !important;
    margin-bottom: var(--space-5);
  }
  .hero-inner,
  .hero-inner > .hero-grid {
    min-height: 100% !important;
    height: 100% !important;
    align-content: end;
  }
  .hero-inner {
    transform: translateY(var(--hero-overhang));
    padding-top: 2rem;
    padding-bottom: 0 !important;
  }
  .hero-note {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255,255,255,.92);
    border-radius: 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.18);
    padding: 1.25rem;
  }
  .hero-note .text-canvas { color: var(--c-merlot-300) !important; }
}

/* naše vize */
.vision__media {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 32px rgba(0,0,0,.18);
}
.vision__media img {
  width: 100%;
  height: clamp(180px, 18vw, 240px);
  object-fit: cover;
  display: block;
}
@media (max-width: 980px) {
  .vision__grid { grid-template-columns: 1fr; }
  .vision__text { max-width: 70ch; }
  .vision__media img { height: 240px; }
}

/* detail voucheru */
.zazitektyp { display: none; }
.vouchertyp { display: block; }
body.itemid-757 .zazitektyp { display: block; }
body.itemid-757 .vouchertyp { display: none; }

/* staré */
header .mod-list { flex-direction: row; float: right; }
header .mod-list li { padding: 0 5px; }
button#language_btn_110 { border: none; padding: 0 0 0 20px; }
div#mod-custom123 { width: fit-content; }
.container-topbar1 { align-items: center; max-width: 100%; }
header li.nav-item a, header li.nav-item span { text-transform: uppercase; text-decoration: none !important; }
.magpod li.nav-item a, .magpod li.nav-item span { color: var(--c-canvas) !important; }
.topmenu li.nav-item a, .topmenu li.nav-item span { color: var(--c-canvas) !important; text-transform: none; }
.container-topbar1 .mod-menu {
  margin-left: auto;
  margin-bottom: 0;
  display: flex;
  gap: 1rem;
  list-style: none;
  padding-left: 0;
}

.container-topbar1 .topbar { margin-left: 1.5rem; float: none !important; }

.container-topbar1 #mod-custom123 a span { font-size: 1.2rem; margin-right: 0.5rem; }
.grid-child.container-nav { display: flex; }
.grid-child.container-nav #mod-custom124 p,.grid-child.container-nav #mod-custom349 p { margin: 0; }
.logovmenu span { display: none; }

ul.mod-menu.magazin { position: relative; }
/* aktivní i aktuální položka (multilingual fix) */
ul.mod-menu.magazin > li.active > a,
ul.mod-menu.magazin > li.current > a { position: relative; }

body:not(.magpod) .logovmenu.svetle,
body:not(.magpod) li.nav-item.item-911 { display: none !important; }
.magpod .logovmenu.tmave,
.magpod li.nav-item.item-914,.magpod li.nav-item.item-1375 { display: none !important; }

/*.grid-child.container-nav .mod-menu.desktop {
  margin-left: auto;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  padding-left: 0;
} */
@media (max-width: 1200px) { .grid-child.container-nav .mod-menu { gap: 1rem; } }
@media (max-width: 1000px) { .grid-child.container-nav .mod-menu { gap: 0.9rem; } }
.grid-child.container-nav .mod-menu .nav-item { display: flex; align-items: center; }

.topbar.topmenu .nav-item.active { position: relative; }
.topbar.topmenu .nav-item.active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5.65686%200C5.65686%200%206.50589%202.50587%207.65686%203.65685C8.80783%204.80782%2011.3137%205.65685%2011.3137%205.65685C11.3137%205.65685%208.80783%206.50587%207.65686%207.65684C6.50588%208.80782%205.65686%2011.3137%205.65686%2011.3137C5.65686%2011.3137%204.80784%208.80782%203.65686%207.65684C2.50589%206.50587%206.19888e-06%205.65685%206.19888e-06%205.65685C6.19888e-06%205.65685%202.50589%204.80782%203.65686%203.65685C4.80783%202.50587%205.65686%200%205.65686%200Z%22%20fill%3D%22%23F1E5CB%22/%3E%3C/svg%3E");
}

.mod-menu.klasic .dropdown { position: relative; }
.mod-menu.klasic .dropdown-menu li a { color: black !important; }
.mod-menu.klasic .dropdown-menu {
  display: block;
  position: absolute;
  top: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  margin-top: 0;
  z-index: 1000;
}
.mod-menu.klasic .dropdown:hover > .dropdown-menu,
.mod-menu.klasic .dropdown:focus-within > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* menu mobilní */
@media (max-width: 991.98px) {
  a#back-top { display: none; }
  .container-topbar1.d-flex.container { background-color: transparent !important; }
  .topbar .mod-languages { position: fixed; top: 15px; right: 60px; }
  .topbar.topmenu, header ul.mod-menu.mod-list.nav.desktop { display: none !important; }
  .menu.rezervace { display: none; }
  .horni ul.mod-menu.mod-list.nav {
    padding-top: 25px;
    margin-top: 5px;
    border-top: solid 1px color-mix(in srgb, var(--c-canvas) 20%, transparent);
  }
  .mod-bhgshop-cart--offcanvas.is-open .bhg-cart-panel { top: 50px !important; }
  .bhg-main-site-btn {
    display: block;
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0;
    border: 1px solid var(--color-border, #ddd);
    background-color: var(--color-bg, #fff);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 0.8rem;
    position: absolute;
    bottom: 60px;
    left: 5px;
    width: calc(100% - 10px);
  }
  .bhg-main-site-btn .arrow { margin-left: .5rem; }
  /*div#mod-custom156 { display: none; }*/
  .view-eshop header.header.container-header1 { height: 65px; }
  .view-eshop header { height: 65px; }
}

/* košík – napravo od menu */
.grid-child.container-nav .mod-bhgshop-cart { margin-left: 1.5rem; display: flex; align-items: center; }
div#bhgCartPanel th.pt-0.pb-2.text-muted.fw-normal.small { display: none; }
button.btn.btn-outline-secondary.btn-sm.js-bhg-clear { display: none; }
button.btn.btn-outline-danger.btn-sm.js-bhg-remove { border: none; }

@media (max-width: 991px) {
  #mod-custom124 img { max-width: 120px; height: auto; }
}

/* eshop */
a.btn.btn-sm.btn-outline-secondary.zpet { display: none; }
.com_bhgshop header.header, .shp header.header {
  /*box-shadow: 0px 2px 10px 0px rgba(35, 20, 45, 0.1);*/
  padding-bottom: 15px;
  margin-bottom: -15px;
}

/* ConvertForms .cf-btn--forest → přesunuto do forms.css (§F4) */
/*             galerie              */
.tf-gallery-wrapper figure.item a {
    border-radius: var(--radius-card);
    overflow: hidden;
}
.tf-gallery-wrapper .gallery-items.grid {
    row-gap: var(--space-4)!important;
}
.tf-gallery-wrapper .gallery-items {
    column-gap: var(--space-4)!important;
}
/* výpis zážitků */
/* Zážitky – obrázek v kartě */
.bhg-product-img-wrapper {
  position: relative;
  padding-top: 66.6667%;
  overflow: hidden;
}
.bhg-product-img-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.bhg-product-tile:hover .bhg-product-img-wrapper img {
  transform: scale(1.03);
}
/* patička – typografie sloupců (dle Figmy) */
/* Nadpis sloupce: 14/22, weight 400, uppercase, #F0F3FF */
.footer .text-uppercase.small.fw-semibold {
  font-size: var(--typo-c1-fs);
  line-height: var(--typo-c1-lh);
  font-weight: var(--typo-w-body) !important;  /* 400 – přebíjí .fw-semibold (600) */
  color: var(--c-surface) !important;
  text-transform: uppercase !important;
  /* !important kvuli Bootstrap .mb-2, ktera ma vlastni !important */
  margin-bottom: var(--pata-head-gap) !important;
}
/* Text/odkaz ve sloupci: 16/24, weight 400, #F0F3FF @ 80 % */
.footer a.nav-link {
  font-size: var(--typo-b1-fs);
  line-height: var(--typo-b1-lh);
  font-weight: var(--typo-w-body);
  color: color-mix(in srgb, var(--c-surface) 80%, transparent) !important;
  margin-bottom: 0;
}
/* platební ikony */
.payment-icons {
  gap: clamp(12px, calc(12px + (24 - 12) * ((100vw - 320px) / (992 - 320))), 24px);
}
.payment-icon {
  display: block;
  height: 41px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  border-radius: 6px;
}
/* Pozn.: (0,2,2) – přebíjí .footer a.nav-link (0,2,1), proto stejné hodnoty. */
.footer li.metismenu-item a,
.footer li.metismenu-item span {
  font-size: var(--typo-b1-fs);
  line-height: var(--typo-b1-lh);
  text-decoration: none !important;
}
.footer li.metismenu-item { padding-left: 0 !important; }
/* Rozestup mezi radky ve sloupcich paticky.
   Na <li>, ne na <a>: svisly margin se na inline odkazu neprojevi.
   "+" = mezera jen MEZI polozkami, ne pod posledni (drzi zarovnani spodku).
   Treti selektor bere i vlastni HTML moduly (napr. Rychly kontakt),
   vyloucene tridy = vodorovne seznamy (pravni odkazy, ikony siti). */
/* Nulujeme spodni margin polozek: Bootstrap .mb-2 na <li> (8px, !important)
   se SLUCUJE s nasim margin-top a vzdy vyhraje ta vetsi hodnota — pri
   --pata-link-gap pod 8px by promenna nedelala vubec nic. */
.footer ul.mod-menu > li,
.footer li.metismenu-item,
.footer ul:not(.mod-menu):not(.list-unstyled):not(.list-inline):not(.d-flex) > li {
  margin-bottom: 0 !important;
}
.footer ul.mod-menu > li + li,
.footer li.metismenu-item + li.metismenu-item,
.footer ul:not(.mod-menu):not(.list-unstyled):not(.list-inline):not(.d-flex) > li + li {
  margin-top: var(--pata-link-gap);
}
.metismenu.mod-menu .metismenu-item.divider:not(.parent) { border-right: none; width: auto; margin: inherit; padding: inherit; }

@media (max-width: 767px) {
  /*img.footer-logo { content: url("/images/logo-h.png"); }*/
  .footer .d-inline-flex.align-items-center.justify-content-center { margin-bottom: 0 !important; }
}

/* ============================================================
   ARC SYSTEM – base styly pro SVG oblouky (z oblouk.php)
   ============================================================ */
.arc-wrap{
  width: 100%;
  line-height: 0;
}
.arc{
  display: block;
  width: 100%;
}
.arc .arc-stroke{
  fill: none;
  stroke-linecap: round;
}
/* ==================== KONEC: ARC SYSTEM ==================== */

/* ============================================================
   DEER HERO – fullscreen hero s progressive blur overlays
   Přesunuto z custom modulu deer-hero
   ============================================================ */
.deer-hero{
  position: relative;
  min-height: max(820px, 100vh);
  min-height: max(820px, 100svh);
  display: flex;
  align-items: center;
  justify-content: center;
}
.deer-hero__bg{
  position: absolute;
  inset: 0;
  background: url("/images/hphero.jpg") center/cover no-repeat;
  z-index: 0;
}
.deer-hero__bg.lpbrunch{
background: url("/images/headers/deer-brunch-benedict.webp") center/cover no-repeat !important;
}
.deer-hero__bg.lpvenison{
background: url("/images/headers/signature-zverina-deer-restaurant.webp") center/cover no-repeat !important;
}
.deer-hero__bg.lpdegu{
background: url("/images/content/degustacni-menu_deer-restaurant.webp") center/cover no-repeat !important;
}
/* Poloprůhledný tmavý overlay přes celou fotku */
.deer-hero__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(35, 20, 45, 0.5);
  pointer-events: none;
}
/* Horní overlay: gradient shora dolů + blur shora (20px) → dole (0px) */
.deer-hero__overlay-top{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(35,20,45,0.7) 0%, rgba(35,20,45,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  z-index: 1;
  pointer-events: none;
}
/* Spodní overlay: gradient zdola nahoru + blur zdola (20px) → nahoře (0px) */
.deer-hero__overlay-bottom{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  background: linear-gradient(0deg, rgba(35,20,45,1) 0%, rgba(35,20,45,0) 100%);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 100%);
          mask-image: linear-gradient(0deg, #000 0%, transparent 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  z-index: 1;
  pointer-events: none;
}
.deer-hero__arc{
  --arc-top: transparent;
  --arc-bottom: var(--c-surface);
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  line-height: 0;
    --stroke: 0px;
  /* sagitta: 60px na 360px → 150px na 1200px */
  --sagitta: clamp(60px, calc(21.428571429px + 10.714285714vw), 150px);
}
.deer-hero__arc .arc{
  width: 100%;
  display: block;
}
.deer-hero__contact-item{
  background: var(--c-surface);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
  transition: background-color .15s ease !important;
}
a.deer-hero__contact-item:hover{
  background: var(--c-grain-100);
  color: var(--c-forest-400) !important;
}
.deer-hero__contact-item svg{
  flex-shrink: 0;
}
/* Kontaktní blok – desktop: absolutně vpravo dole */
@media (min-width: 992px){
  .deer-hero__contact{
    position: absolute;
    right: clamp(20px, 3vw, 48px);
    bottom: 50px;
    z-index: 5;
  }
}
/* ==================== KONEC: DEER HERO ==================== */
/* Canvas outline button – pro tmavé pozadí */
.btn.btn-canvas-outline{
  color: var(--c-canvas);
  border: 1px solid color-mix(in srgb, var(--c-canvas) 50%, transparent);
  background: transparent;
}
.btn.btn-canvas-outline:hover{
  background: color-mix(in srgb, var(--c-canvas) 12%, transparent);
  border-color: color-mix(in srgb, var(--c-canvas) 70%, transparent);
  color: var(--c-canvas);
}
/* steps */
.bhg-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  background: var(--c-forest-50-warm);
  color: var(--c-forest-400);
}
.is-active .bhg-step-dot {
  /* FIX: nahrazeno tokenem */
  background: var(--color-primary);
  color: var(--c-surface) !important;
}
.is-active .bhg-step-text { color: var(--c-forest-400) !important; }

/* Map */

.openstreetmap.map-widget .leaflet-tile {
  filter: grayscale(76%) sepia(80%) hue-rotate(274deg) saturate(377%) brightness(44%) contrast(192%);
  -webkit-filter: grayscale(76%) sepia(80%) hue-rotate(274deg) saturate(377%) brightness(44%) contrast(192%);
}
.openstreetmap.map-widget .leaflet-tile {
  filter: grayscale(100%) invert(100%) sepia(74%) hue-rotate(217deg) saturate(199%) brightness(98%) contrast(107%);
  -webkit-filter: grayscale(100%) invert(100%) sepia(74%) hue-rotate(217deg) saturate(199%) brightness(98%) contrast(107%);
}

.openstreetmap.map-widget .leaflet-marker-icon,
.openstreetmap.map-widget .leaflet-marker-icon img {
  filter: none !important;
  -webkit-filter: none !important;
}

.openstreetmap.map-widget {
  border-radius: 8px;
  overflow: hidden;
 /* border: 1px solid rgba(201, 169, 97, 0.25);*/
}

/* ============================================================
   LANGUAGE SWITCHER – pill 36×36
   ============================================================ */
.mod-languages .mod-languages__list {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  margin-top: -12px;
  list-style: none;
}

.mod-languages li {
  margin: 0;
  padding: 0;
}

.mod-languages li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 8px 10px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c-forest-400) 20%, transparent);
  color: var(--c-forest-400) !important;
  font-family: var(--ff-ui);        /* Space Mono */
  font-synthesis: none;
  font-size: var(--typo-btn-fs);    /* 14px – stejne jako tlacitka */
  line-height: 1;
  font-weight: var(--typo-w-btn);
  text-transform: uppercase;
  text-decoration: none !important;
  letter-spacing: 0;
  transition: background-color .15s ease, color .15s ease;
}

.mod-languages li a:hover {
  background-color: color-mix(in srgb, var(--c-forest-400) 30%, transparent);
  color: var(--c-forest-400) !important;
}

/* Hero (magpod) – canvas varianta */
.ishero .mod-languages li a {
  background-color: color-mix(in srgb, var(--c-canvas) 20%, transparent);
  color: var(--c-canvas) !important;
}

.ishero .mod-languages li a:hover {
  background-color: color-mix(in srgb, var(--c-canvas) 30%, transparent);
  color: var(--c-canvas) !important;
}
/* ==================== KONEC: LANGUAGE SWITCHER ==================== */

/* ============================================================
   POPTÁVKA AKCE – tmavá aubergine sekce
   Markup: modul "Vlastní kód" (deer-poptavka-modul.html)
   Layout, barvy a rozestupy řeší BS5 utility + typo-* na markupu.
   Tady jen mechanika, kterou utility neumí:
   full-bleed, dělicí linka, kroužky ikon, ConvertForms.
   ============================================================ */

.deer-poptavka {
  --pop-fg:       var(--c-surface);
  --pop-muted:    color-mix(in srgb, var(--c-surface) 68%, transparent);
  --pop-line:     color-mix(in srgb, var(--c-surface) 14%, transparent);
  --pop-field-bg: color-mix(in srgb, var(--c-surface) 6%, transparent);
  --pop-accent:   var(--c-grain-400);
}

/* Full-bleed breakout z Bootstrap containeru (vzorec jako .deer-napsali--bleed) */
.deer-poptavka--bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Dělicí linka mezi sloupci – BS5 border-* nemá breakpoint varianty */
@media (min-width: 992px) {
  .deer-poptavka__divider { border-left: 1px solid var(--pop-line); }
}

/* --- Odkazy tel / mail ---
   Stylujeme potomka <li>, ne třídu na <a>: plugin "Email cloaking"
   nahradí <a href="mailto:…"> za <joomla-hidden-mail><a>…</a></…> a naši
   třídu zahodí. */
.deer-poptavka__contacts joomla-hidden-mail { display: inline; }

.deer-poptavka .deer-poptavka__contacts a {
  color: var(--pop-fg) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--c-surface) 50%, transparent) !important;
  overflow-wrap: anywhere;
}

.deer-poptavka .deer-poptavka__contacts a:hover {
  text-decoration-color: currentColor !important;
}

.deer-poptavka .deer-poptavka__contacts a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-surface) 35%, transparent);
  border-radius: 4px;
}

.deer-poptavka__ico {
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--c-surface) 28%, transparent);
  background: color-mix(in srgb, var(--c-surface) 8%, transparent);
  color: var(--pop-fg);
}

/* ConvertForms uvnitř .deer-poptavka__form → přesunuto do forms.css (§F5) */
/* ==================== KONEC: POPTÁVKA AKCE ==================== */
/* ============================================================
   §15 REZERVACE – tmavá sekce s panelem formuláře  [START]
   Stránka: Rezervace (custom HTML) + moduly #154 / #214 / #219 / #220
   Hooky: .res-dark, .res-panel, .res-alert, .res-info
   ============================================================ */

/* --- Tmavé pozadí celé sekce (full-bleed přes pseudo-prvek).
       Pokud je stránka tmavá už z šablony, tento ::before smaž. --- */
.res-dark {
  position: relative;
  isolation: isolate;

  color: var(--c-canvas);
}
.res-dark::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--c-forest-400);
}

/* Nadpisy a text sekce na tmavém */
.res-dark h1,
.res-dark h2,
.res-dark h3,
.res-dark .typo-h1,
.res-dark .typo-h2,
.res-dark .typo-h3,
.res-dark .typo-h4 { color: var(--c-canvas); }

.res-dark .res-lead,
.res-dark .text-muted { color: color-mix(in srgb, var(--c-canvas) 70%, transparent) !important; }

.res-hr {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--c-canvas) 15%, transparent);
  opacity: 1;
}

/* --- Panel s formulářem --- */
.res-panel {
  background: var(--c-forest-350);
  border: 1px solid color-mix(in srgb, var(--c-canvas) 8%, transparent);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.res-panel__body { padding: 24px; }

/* --- Upozornění nad formulářem --- */
.res-alert {
  display: flex;
  align-items: center;              /* ikona vycentrovaná k celému textu */
  gap: 12px;
  margin: 24px 24px 0;              /* zarovnáno s paddingem .res-panel__body,
                                       spodní mezeru tvoří jeho padding-top */
  padding: 22px 20px;
  background: #ED0C321A;
  border-radius: var(--radius-card);
  color: #ED0C32;                   /* jednotná barva pro ikonu i text */
}
.res-alert__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: inherit;
}
.res-alert__title,
.res-alert__text {
  margin: 0;
  color: inherit;
  font-size: 14px;
  line-height: 1.45;
}
.res-alert__title { font-weight: 600; }
.res-alert__text  { margin-top: 2px; }

/* --- Formulářové prvky panelu → přesunuto do forms.css (§F6) --- */

/* --- Důležité informace (modul pod panelem) --- */
.res-info h2,
.res-info h3,
.res-info .typo-h3,
.res-info .typo-h4 { color: var(--c-canvas) !important; }

.res-info,
.res-info p,
.res-info li { color: color-mix(in srgb, var(--c-canvas) 78%, transparent); }

.res-info ol,
.res-info ul { padding-left: 1.1rem; margin-bottom: 0; }
.res-info ol li,
.res-info ul li { margin-bottom: .85rem; }
.res-info a { color: var(--c-grain-400); }

/* --- Mobil --- */
@media (max-width: 575.98px) {
  .res-panel__body { padding: 18px; }
  .res-alert { margin: 18px 18px 0; padding: 12px 14px; }
  .res-tabs { flex-wrap: wrap; }
}
/* ==================== KONEC: §15 REZERVACE ==================== */
/* ============================================================
   §16 ESHOP ZÁŽITKY – tmavé karty přes com_bhgshop generické třídy
   Stránka: Zážitky (view=eshop, com_bhgshop) — komponenta se needituje,
   cílíme přímo na existující generické třídy z výstupu komponenty:
   .bhg-product-tile / .bhg-product-img-wrapper / .bhg-product-body /
   .bhg-product-price / .btn.btn-primary uvnitř karty.
   Hodnoty 1:1 podle Figma specifikace (karta, nadpis, text, cena, tlačítko).

   FONT „Space Mono" se načítá přes @font-face ve font-scheme souborech
   šablony, které definují i --ff-mono a .ff-mono.
   Používej token --ff-mono, ne literál názvu fontu.
   ============================================================ */

/* --- Karta: pozadí + 1px okraj (inner alignment = box-sizing: border-box) --- */
.bhg-product-tile {
  box-sizing: border-box;
  background-color: var(--c-forest-350) !important;   /* #2C1A38 */
  border: 1px solid var(--c-forest-300) !important;    /* #392745 */
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* --- Obrázek: čtvercovější crop (4:3 místo výchozích 3:2).
       Existující padding-hack (.bhg-product-img-wrapper + absolutně
       pozicovaný img, viz řádek ~2238) i hover zoom necháváme beze
       změny, měníme jen poměr stran přes padding-top. --- */
.bhg-product-tile .bhg-product-img-wrapper {
  padding-top: 75%; /* 4:3, výchozí obecné pravidlo má 66.6667% (3:2) */
}

/* --- Text obsah karty --- */
.bhg-product-tile .bhg-product-body {
  padding: 24px !important;
}

/* Název — Inter Tight 500, 24/32, -2% tracking (NE ff-head/serif) */
.bhg-product-tile h2 a {
  color: var(--c-surface) !important;
  font-family: var(--ff-body);
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none !important;
}
.bhg-product-tile h2 a:hover {
  color: var(--c-surface) !important;
  opacity: 0.85;
}

/* Popis — .typo-b1 (16/24, weight 400, 0% tracking) už sedí přesně
   se zadáním, barva je #F0F3FF (--c-surface) @ 70 % opacity.
   POZN.: komponenta vykresluje popis jako <p class="typo-b1 ..."></p>
   (prázdné, prohlížeč ho automaticky zavře kvůli vnořenému <p> uvnitř)
   následované holým <p>text</p> BEZ třídy — cílíme proto na všechny
   <p> v těle karty, ne jen na .typo-b1, ať se trefí do toho správného. */
.bhg-product-tile .bhg-product-body p {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--c-surface) 70%, transparent) !important;
}

/* Cena — Space Mono 400, 16/24, 0% tracking, UPPERCASE, zlatá */
.bhg-product-tile .bhg-product-price {
  font-family: var(--ff-mono);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-grain-400) !important;   /* #C2A361 */
}

/* --- Tlačítko: světlé "hug" pilulka podle Frame 2095585285 ---
   Layout: hug šířka (ne w-100), padding 8/14, gap 10, radius 4, border 1px
   Barvy: pozadí #F0F3FF (--c-surface) plné, border #F0F3FF @ 20 % */
.bhg-product-tile form.d-grid {
  display: block; /* zruší Bootstrap .d-grid stretch, ať button není 100% */
}
.bhg-product-tile .btn.btn-primary {
  width: auto !important;
  display: inline-flex !important;
  min-height: 0;
  padding: 8px 14px;
  gap: 10px;
  border-radius: 4px;

  --bs-btn-bg: var(--c-surface);
  --bs-btn-border-color: color-mix(in srgb, var(--c-surface) 20%, transparent);
  --bs-btn-color: var(--c-forest-400);

  --bs-btn-hover-bg: #CFD3E8;
  --bs-btn-hover-border-color: #CFD3E8;
  --bs-btn-hover-color: var(--c-forest-400);

  --bs-btn-active-bg: #CFD3E8;
  --bs-btn-active-border-color: #CFD3E8;
  --bs-btn-active-color: var(--c-forest-400);

  background-color: var(--bs-btn-bg);
  background-image: none;
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
}
.bhg-product-tile .btn.btn-primary:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}
.bhg-product-tile .btn.btn-primary:active,
.bhg-product-tile .btn.btn-primary.active {
  background-color: var(--bs-btn-active-bg) !important;
  border-color: var(--bs-btn-active-border-color) !important;
  color: var(--bs-btn-active-color) !important;
  background-image: none !important;
}

/* --- Mobil: o něco menší padding v těle karty --- */
@media (max-width: 575.98px) {
  .bhg-product-tile .bhg-product-body { padding: 18px !important; }
}
/* ==================== KONEC: §16 ESHOP ZÁŽITKY ==================== */

/* ============================================================
   §17 ESHOP – MODUL KOŠÍKU + DETAIL ZÁŽITKU (jen barvy)
   Komponenta se needituje, cílíme na existující generické třídy.
   Stejná paleta jako §16 (karty): pozadí --c-forest-350, okraj
   --c-forest-300, text --c-surface, cena Space Mono --c-grain-400.

   POZN.: .js-bhg-clear ("Vyčistit košík") je už jinde v tomto souboru
   nastaven na display:none — záměrně ho tady nestylujeme (mrtvý prvek).
   ============================================================ */

/* --- Rozbalený panel košíku (slideout) ---
   POZN.: NEscopujeme přes .mod-bhgshop-cart jako předka — Bootstrap/JS
   offcanvas panel může být za běhu přesunut jinam v DOM (typický důvod,
   proč se ancestor-scoped pravidla netrefí). Cílíme přímo na bhg-* třídy,
   které jsou pro tenhle košík dost specifické, aby nekolidovaly jinde. */
.bhg-cart-panel.bg-surface {
  background-color: var(--c-forest-350) !important;
  border: 1px solid var(--c-forest-300);
}
.bhg-cart-panel thead th.bg-surface {
  background-color: var(--c-forest-350) !important;
  color: var(--c-surface) !important;
}
.bhg-cart-panel .bhg-cart-close {
  color: var(--c-surface) !important;
}

/* Řádek položky */
.bhg-cart-panel .bhg-title {
  color: var(--bs-body-color) !important;
}
.bhg-cart-panel .bhg-unit-price {
  color: var(--bs-body-color) !important;
}
.bhg-cart-panel .row-total {
  font-family: var(--ff-mono);
  color: var(--c-grain-400) !important;
}

/* Qty stepper — jen v panelu košíku, jinde (např. eshop filtry) beze změny */
.bhg-cart-panel .bhg-qty {
  background: transparent !important;
  border-color: var(--c-forest-300) !important;
}
.bhg-cart-panel .bhg-qty input {
  color: var(--c-surface) !important;
  background: transparent !important;
}
.bhg-cart-panel .bhg-qty .btn {
  color: var(--c-surface) !important;
}

/* Prázdný thumbnail (položky bez obrázku, typicky vouchery/zážitky) —
   ať je vidět aspoň jako rámeček, ne černá díra na tmavém pozadí */
.bhg-cart-panel .bhg-thumb.is-empty {
  background-color: color-mix(in srgb, var(--c-surface) 8%, transparent) !important;
  border: 1px solid var(--c-forest-300);
  border-radius: 6px;
}

/* "Košík je prázdný." a případná další Bootstrap .alert hláška v panelu */
.bhg-cart-panel .alert {
  background-color: color-mix(in srgb, var(--c-surface) 12%, transparent) !important;
  border: 1px solid var(--c-forest-300);
  color: var(--c-surface) !important;
}

/* Patička panelu — mezisoučet + tlačítko checkout (světlá "canvas" pilulka,
   stejný recept jako tlačítko na kartě zážitku v §16) */
.bhg-footer .fw-bold {
  color: var(--c-surface) !important;
}
.bhg-checkout-btn.btn.btn-primary {
  --bs-btn-bg: var(--c-surface);
  --bs-btn-border-color: color-mix(in srgb, var(--c-surface) 20%, transparent);
  --bs-btn-color: var(--c-forest-400);
  background-color: var(--bs-btn-bg) !important;
  background-image: none !important;
  border-color: var(--bs-btn-border-color) !important;
  color: var(--bs-btn-color) !important;
}
.bhg-checkout-btn.btn.btn-primary:hover {
  background-color: #CFD3E8 !important;
  border-color: #CFD3E8 !important;
  color: var(--c-forest-400) !important;
}

/* --- Stránka detailu zážitku (form#voucher) ---
   POZN.: scoping přes #voucher (ID formuláře, potvrzené přímo z HTML),
   ne přes body class "view-produkt" — ta patří jiné stránce a vůbec
   se na tuhle stránku netrefovala (proto nešel button ani cena). */
.com_bhgshop.view-create form#voucher,
.com_bhgshop.view-cart .bhg-cart,
.com_bhgshop.view-thankyou main {
  padding-top: var(--space-6);
  margin-top: var(--space-6);
}
.com_bhgshop.view-thankyou main {
  margin-top: 0;
}
#voucher #pageH1,
#voucher label,
#voucher label h4,
#voucher #voucherBullets h2 {
  color: var(--c-surface) !important;
}
#voucher #pageIntro,
#voucher #voucherBullets,
#voucher #voucherBullets li,
#voucher .text-muted,
#voucher #validityInfo {
  color: var(--bs-body-color) !important;
}
/* .form-text (Bootstrap) má natvrdo var(--secondary-color) = tmavá
   merlot barva pro světlé pozadí — na tmavém je skoro neviditelná.
   Týká se #vp-help ("Za každou osobu..."), #qtyHint, "Minimálně 3 slova...". */
#voucher .form-text {
  color: var(--bs-body-color) !important;
}
#voucher #price {
  font-family: var(--ff-mono);
  color: var(--c-grain-400) !important;
}

/* Hlavní CTA "Přidat do košíku" — světlá "canvas" pilulka */
#voucher #addToCartBtn.btn.btn-primary {
  --bs-btn-bg: var(--c-surface);
  --bs-btn-border-color: color-mix(in srgb, var(--c-surface) 20%, transparent);
  --bs-btn-color: var(--c-forest-400);
  background-color: var(--bs-btn-bg) !important;
  background-image: none !important;
  border-color: var(--bs-btn-border-color) !important;
  color: var(--bs-btn-color) !important;
}
#voucher #addToCartBtn.btn.btn-primary:hover {
  background-color: #CFD3E8 !important;
  border-color: #CFD3E8 !important;
  color: var(--c-forest-400) !important;
}

/* Přepínače hodnoty voucheru (násobek) — outline-secondary na tmavém pozadí
   potřebuje světlý okraj; aktivní stav má v typography.css !important, proto i tady */
#multiplierWrap label.btn-outline-secondary {
  color: var(--c-surface) !important;
  border-color: color-mix(in srgb, var(--c-surface) 40%, transparent) !important;
}
#multiplierWrap label.btn-outline-secondary.active {
  background-color: var(--c-surface) !important;
  color: var(--c-forest-400) !important;
  border-color: var(--c-surface) !important;
}
/* ==================== KONEC: §17 KOŠÍK + DETAIL ZÁŽITKU ==================== */

/* ============================================================
   §18 CART TOGGLE (viditelnost) + MODAL "Přidáno do košíku"
   ============================================================ */

/* --- Tlačítko košíku v headeru — desktop i mobil, ať se neztrácí
   bez ohledu na barvu pozadí headeru. Normal stav je jemný (poloprůhledný
   nádech), hover je plná světlá pilulka — ne naopak, jak to bylo předtím. */
.mod-bhgshop-cart .bhg-cart-toggle.btn.btn-primary {
  background-color: color-mix(in srgb, var(--c-surface) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--c-surface) 25%, transparent) !important;
  transition: background-color .2s ease, border-color .2s ease;
}
.mod-bhgshop-cart .bhg-cart-toggle.btn.btn-primary:hover {
  background-color: var(--c-surface) !important;
  border-color: color-mix(in srgb, var(--c-surface) 20%, transparent) !important;
}
.mod-bhgshop-cart .bhg-cart-toggle .bhg-cart-toggle-icon,
.mod-bhgshop-cart .bhg-cart-toggle .bhg-cart-toggle-label,
.mod-bhgshop-cart .bhg-cart-toggle .bhg-cart-toggle-total {
  color: var(--c-surface) !important;
  transition: color .2s ease;
}
.mod-bhgshop-cart .bhg-cart-toggle.btn.btn-primary:hover .bhg-cart-toggle-icon,
.mod-bhgshop-cart .bhg-cart-toggle.btn.btn-primary:hover .bhg-cart-toggle-label,
.mod-bhgshop-cart .bhg-cart-toggle.btn.btn-primary:hover .bhg-cart-toggle-total {
  color: var(--c-forest-400) !important;
}
.mod-bhgshop-cart .bhg-cart-toggle .bhg-cart-toggle-count {
  background-color: var(--c-forest-400) !important;
  color: var(--c-surface) !important;
}

/* --- Modal #bhgAddOK "Přidáno do košíku" — stejná tmavá paleta --- */
#bhgAddOK .modal-content.bg-surface {
  background-color: var(--c-forest-350) !important;
  border: 1px solid var(--c-forest-300);
}
#bhgAddOK .modal-header h3 {
  color: var(--c-surface);
}
/* Bootstrap .btn-close je tmavá SVG maska — na tmavém pozadí neviditelná */
#bhgAddOK .btn-close {
  filter: invert(1) grayscale(100%) brightness(1.8);
}
#bhgAddOK .modal-body .border {
  border-color: var(--c-forest-300) !important;
}
/* náhledový obrázek má natvrdo inline background:#e5e5e5 */
#bhgAddOK .modal-body .ratio.ratio-1x1 {
  background: var(--c-forest-300) !important;
}
#bhgAddOK #bhgAddTitle,
#bhgAddOK #bhgAddPrice {
  color: var(--bs-body-color) !important;
}
#bhgAddOK #bhgAddUnitPrice {
  font-family: var(--ff-mono);
  color: var(--c-grain-400) !important;
}
#bhgAddOK #bhgAddOKMsg.text-muted {
  color: var(--bs-body-color) !important;
}

/* Qty stepper v modalu (má vlastní +/- tlačítka, na rozdíl od panelu košíku) */
#bhgAddOK .bhg-qty {
  background: transparent;
  border-color: var(--c-forest-300) !important;
}
#bhgAddOK .bhg-qty input {
  color: var(--c-surface) !important;
  background: transparent !important;
}
#bhgAddOK .bhg-qty-minus,
#bhgAddOK .bhg-qty-plus {
  color: var(--c-surface) !important;
}

/* Patička: "Pokračovat v nákupu" (.btn-outline bez barevné třídy → spadá na
   --color-primary = tmavá forest, na tmavém pozadí neviditelné) + "Přejít
   do pokladny" (světlá canvas pilulka, stejně jako ostatní CTA) */
#bhgAddOK #bhgPopupContinueBtn.btn-outline {
  --btn-color: var(--c-surface);
  color: var(--c-surface);
  border-color: color-mix(in srgb, var(--c-surface) 55%, transparent);
}
#bhgAddOK #bhgPopupContinueBtn.btn-outline:hover {
  background-color: color-mix(in srgb, var(--c-surface) 10%, transparent);
  color: var(--c-surface);
}
#bhgAddOK #bhgPopupCheckoutBtn.btn.btn-primary {
  --bs-btn-bg: var(--c-surface);
  --bs-btn-border-color: color-mix(in srgb, var(--c-surface) 20%, transparent);
  --bs-btn-color: var(--c-forest-400);
  background-color: var(--bs-btn-bg) !important;
  background-image: none !important;
  border-color: var(--bs-btn-border-color) !important;
  color: var(--bs-btn-color) !important;
}
#bhgAddOK #bhgPopupCheckoutBtn.btn.btn-primary:hover {
  background-color: #CFD3E8 !important;
  border-color: #CFD3E8 !important;
  color: var(--c-forest-400) !important;
}
/* ==================== KONEC: §18 CART TOGGLE + MODAL ==================== */

/* ============================================================
   §19 POKLADNA (checkout) — tmavé téma, konzistentní s eshop/košíkem
   Scoped přes .bhg-cart (obalový div stránky) a #bhgCheckoutForm.
   Recept shodný s §16-18: pozadí --c-forest-350, okraj --c-forest-300,
   text --bs-body-color/--c-surface, cena Space Mono --c-grain-400,
   tlačítka světlá "canvas" pilulka.
   ============================================================ */

.bhg-cart > h1 {
  color: var(--c-surface);
}

/* Karty (Doprava/Platba/Kontaktní údaje/Fakturace/Poznámka/Souhlasy/Souhrn) */
.bhg-cart .card.shadow-panel.bg-surface {
  background-color: var(--c-forest-350) !important;
  border: 1px solid var(--c-forest-300) !important;
  box-shadow: none !important;
}
.bhg-cart .display-4.text-merlot-400 {
  color: var(--c-surface) !important;
}
.bhg-cart .card-body,
.bhg-cart .form-label,
.bhg-cart .form-check-label {
  color: var(--bs-body-color);
}
.bhg-cart .text-body-secondary {
  color: color-mix(in srgb, var(--bs-body-color) 70%, transparent) !important;
}

/* Vstupní pole pokladny → přesunuto do forms.css (§F7) */

/* Odkazy (obchodní podmínky / zpracování osobních údajů) */
.bhg-cart a.link-primary {
  color: var(--c-grain-400) !important;
}

/* Checkboxy pokladny → přesunuto do forms.css (§F7) */

/* Souhrn objednávky — ceny zlatě/Space Mono, stejně jako karty zážitků */
.bhg-cart .bhg-summary-sticky .fw-semibold.text-nowrap,
.bhg-cart .bhg-summary-sticky #bhgCartSubtotal,
.bhg-cart .bhg-summary-sticky #bhgSummaryTotal,
.bhg-cart .bhg-summary-sticky #bhgShipPrice {
  font-family: var(--ff-mono);
  color: var(--c-grain-400) !important;
}
.bhg-cart .bhg-summary-sticky .typo-s2.text-merlot-400 {
  color: var(--c-surface) !important;
}

/* Tlačítko "Dokončit objednávku a zaplatit" — světlá canvas pilulka */
.bhg-cart button[type="submit"].btn.btn-primary {
  --bs-btn-bg: var(--c-surface);
  --bs-btn-border-color: color-mix(in srgb, var(--c-surface) 20%, transparent);
  --bs-btn-color: var(--c-forest-400);
  background-color: var(--bs-btn-bg) !important;
  background-image: none !important;
  border-color: var(--bs-btn-border-color) !important;
  color: var(--bs-btn-color) !important;
}
.bhg-cart button[type="submit"].btn.btn-primary:hover {
  background-color: #CFD3E8 !important;
  border-color: #CFD3E8 !important;
  color: var(--c-forest-400) !important;
}
/* ==================== KONEC: §19 POKLADNA ==================== */

/* ============================================================
   §20 DĚKOVNÁ STRÁNKA (thankyou) — tmavé téma, konzistentní se
   zážitky/košíkem/pokladnou. Scoped přes .com_bhgshop.view-thankyou.
   ============================================================ */

.com_bhgshop.view-thankyou h1.display-6,
.com_bhgshop.view-thankyou p.lead {
  color: var(--c-surface) !important;
}
.com_bhgshop.view-thankyou .text-muted {
  color: color-mix(in srgb, var(--c-surface) 70%, transparent) !important;
}

/* Karty (Údaje zákazníka / Položky objednávky) — stejný recept jako §16-19 */
.com_bhgshop.view-thankyou .card.shadow-panel.bg-surface {
  background-color: var(--c-forest-350) !important;
  border: 1px solid var(--c-forest-300) !important;
  box-shadow: none !important;
}
.com_bhgshop.view-thankyou .card-body h2.h5 {
  color: var(--c-surface) !important;
}
.com_bhgshop.view-thankyou .card-body {
  color: var(--bs-body-color);
}

/* Tabulka položek — buňky dědí barvu z .card (inline <style> na stránce
   už dělá color:inherit; background-color:transparent), takže stačí
   dobarvit jen odkazy a zvýraznit finální součet */
.com_bhgshop.view-thankyou .table a {
  color: var(--c-surface) !important;
  text-decoration: none !important;
}
.com_bhgshop.view-thankyou .table a:hover {
  color: var(--c-grain-400) !important;
}
.com_bhgshop.view-thankyou .table tfoot tr:last-child th {
  font-family: var(--ff-mono);
  color: var(--c-grain-400) !important;
}

/* "Zpět na úvod" — btn-heritage.btn-outline používá --c-heritage-400,
   což je jen alias na --c-forest-400 (tmavá) → na tmavém pozadí neviditelné.
   Přepnuto na světlou canvas variantu jako všude jinde v tomhle flow. */
.com_bhgshop.view-thankyou a.btn.btn-heritage.btn-outline {
  --btn-color: var(--c-surface);
  color: var(--c-surface);
  border-color: color-mix(in srgb, var(--c-surface) 55%, transparent);
}
.com_bhgshop.view-thankyou a.btn.btn-heritage.btn-outline:hover {
  background-color: color-mix(in srgb, var(--c-surface) 10%, transparent);
  color: var(--c-surface);
}
/* ==================== KONEC: §20 DĚKOVNÁ STRÁNKA ==================== */

/* ============================================================
   §21 ZS MOBILNÍ MENU (zs-mnav) — hamburger + výsuvný drawer
   Override: templates/cassiopeia_trs/html/mod_custom/hamburger.php
   Shell z modulu, obsah menu klonuje JS z ul.mod-menu + [data-zsmega].
   Jen < 992px; desktop řeší HEADER NAV / ZS MEGA MENU výše.
   ============================================================ */

.zs-mnav { display: none; }

@media (max-width: 991.98px) {

  .zs-mnav {
    display: block;
    width: 100%;
    --zs-pad:      20px;    /* boční odsazení lišty i panelu */
    --zs-bar-h:    60px;    /* výška zabalené lišty */
    --zs-top:      0px;     /* posun panelu shora (0 = přes ticker) */
    --zs-panel-w:  350px;   /* max šířka výsuvného panelu */
    --zs-ink:      var(--c-surface);   /* #F0F3FF dle Figmy */
    --zs-line:     color-mix(in srgb, var(--c-surface) 18%, transparent);
    --zs-muted:    color-mix(in srgb, var(--c-surface) 70%, transparent);
    --zs-chip-bg:  color-mix(in srgb, var(--c-surface) 14%, transparent);
    --zs-chip-brd: color-mix(in srgb, var(--c-surface) 35%, transparent);
  }

  /* --- Header na mobilu: fixní nahoře, přes celou šířku, ticker úplně nahoře ---
     position: sticky drží ticker i lištu nahoře a přitom zabírá výšku v toku,
     takže není potřeba padding-top na body ani magické číslo výšky.
     Pozn.: sticky vyžaduje, aby žádný předek neměl overflow:hidden.
     html/body mají overflow-x: clip (ř. 746) – to sticky neruší.
     Kdyby přesto odjíždělo, přepni na fixed variantu níže. */
  header.header.container-header1 {
    position: sticky;
    top: 0;
    z-index: 1050;
    height: auto;
    margin: 0;
    padding: 0;
    background: var(--c-forest-400);
  }

  /* Fallback, jen kdyby sticky neprošlo (nějaký předek s overflow:hidden):
  header.header.container-header1 { position: fixed; top: 0; left: 0; right: 0; }
  body { padding-top: 90px; }
  */

  /* Cassiopeia .grid-child má max-width – na mobilu ho zrušit (jinak světlý pruh vpravo) */
  header.header.container-header1 > .container-topbar,
  header.header.container-header1 > .container-ticker,
  header.header.container-header1 > .grid-child {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* Přebíjí §ZS TICKER ř. 285 (top: -9px + radius) – to je záměr jen pro desktop */
  .zs-ticker { top: 0; border-radius: 0; }
  .zs-ticker.container { width: 100%; max-width: none !important; margin: 0; padding-inline: 0; }

  /* container-nav je na mobilu obyčejný blok – layout drží .zs-mnav__bar */
  header.header.container-header1 > .grid-child.container-nav {
    display: block;
    padding: 0;
    margin: 0;
  }

  /* EN má vlastní místo v panelu, z lišty pryč */
  header .grid-child.container-nav > .mod-languages { display: none !important; }

  /* ---------- 1) Zabalená lišta ---------- */
  .zs-mnav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--zs-bar-h);
    padding: 0 var(--zs-pad);
  }

  /* .zs-mnav__logo je <a> → přebít typography.css ř. 440 (a:not(.btn)...) */
  .zs-mnav__logo { display: inline-flex; align-items: center; text-decoration: none !important; }
  .zs-mnav__logo img {
    display: block;
    width: 90px;
    height: 50px;
    object-fit: contain;
    object-position: left center;
  }

  .zs-mnav__burger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--zs-chip-bg);
    color: var(--zs-ink);
    cursor: pointer;
    transition: background-color .15s ease;
  }
  .zs-mnav__burger:hover,
  .zs-mnav__burger:focus-visible {
    background: color-mix(in srgb, var(--c-surface) 24%, transparent);
  }

  /* tři čárky bez SVG */
  .zs-mnav__burger-bars,
  .zs-mnav__burger-bars::before,
  .zs-mnav__burger-bars::after {
    display: block;
    width: 16px;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
  }
  .zs-mnav__burger-bars { position: relative; }
  .zs-mnav__burger-bars::before,
  .zs-mnav__burger-bars::after { content: ""; position: absolute; left: 0; }
  .zs-mnav__burger-bars::before { top: -5px; }
  .zs-mnav__burger-bars::after  { top:  5px; }

  /* ---------- 2) Scrim + výsuvný panel ---------- */
  .zs-mnav__scrim {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: color-mix(in srgb, var(--c-forest-400) 65%, transparent);
    opacity: 0;
    transition: opacity .28s ease;
  }
  .zs-mnav.is-open .zs-mnav__scrim { opacity: 1; }

  .zs-mnav__panel {
    position: fixed;
    top: var(--zs-top);
    right: 0;
    left: auto;
    width: min(var(--zs-panel-w), 100%);
    height: calc(100dvh - var(--zs-top));
    z-index: 1080;
    display: flex;
    flex-direction: column;
    background: var(--c-forest-400);
    color: var(--zs-ink);
    box-shadow: -12px 0 32px color-mix(in srgb, var(--c-forest-400) 45%, transparent);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s ease, visibility .28s ease;
  }
  @supports not (height: 100dvh) {
    .zs-mnav__panel { height: calc(100vh - var(--zs-top)); }
  }

  .zs-mnav.is-open .zs-mnav__panel {
    transform: translateX(0);
    visibility: visible;
  }

  body.zs-mnav-open { overflow: hidden; }

  /* --- hlavička panelu --- */
  .zs-mnav__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--zs-bar-h);
    padding: 0 var(--zs-pad);
  }
  .zs-mnav__actions,
  .zs-mnav__bar-actions { display: flex; align-items: center; gap: 10px; }

  /* --- Košík (JS ho přesune do lišty i do hlavičky panelu, před hamburger) ---
     Selektor 0,4,1 kvůli §18 CART TOGGLE:
       .mod-bhgshop-cart .bhg-cart-toggle.btn.btn-primary { background-color: ... !important }  -> 0,4,0
     U dvou !important rozhoduje specificita, proto to nejde napsat kratčeji. */
  .zs-mnav__bar-actions .mod-bhgshop-cart,
  .zs-mnav__actions .mod-bhgshop-cart {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    align-items: center;
    height: 40px;
  }

  .zs-mnav__bar-actions button.bhg-cart-toggle.btn.btn-primary,
  .zs-mnav__actions button.bhg-cart-toggle.btn.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: var(--zs-chip-bg) !important;
    box-shadow: none !important;
    transition: background-color .15s ease;
  }
  .zs-mnav__bar-actions button.bhg-cart-toggle.btn.btn-primary:hover,
  .zs-mnav__bar-actions button.bhg-cart-toggle.btn.btn-primary:focus-visible,
  .zs-mnav__actions button.bhg-cart-toggle.btn.btn-primary:hover,
  .zs-mnav__actions button.bhg-cart-toggle.btn.btn-primary:focus-visible {
    background-color: color-mix(in srgb, var(--c-surface) 24%, transparent) !important;
  }

  /* v panelu jen ikona */
  .zs-mnav__bar-actions button.bhg-cart-toggle > span,
  .zs-mnav__actions button.bhg-cart-toggle > span { display: none !important; }
  .zs-mnav__bar-actions button.bhg-cart-toggle span.bhg-cart-toggle-icon,
  .zs-mnav__actions button.bhg-cart-toggle span.bhg-cart-toggle-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    line-height: 0;
    color: var(--zs-ink) !important;
  }
  .zs-mnav__bar-actions button.bhg-cart-toggle.btn.btn-primary:hover span.bhg-cart-toggle-icon,
  .zs-mnav__actions button.bhg-cart-toggle.btn.btn-primary:hover span.bhg-cart-toggle-icon {
    color: var(--zs-ink) !important;
  }
  .zs-mnav__bar-actions button.bhg-cart-toggle span.bhg-cart-toggle-icon svg,
  .zs-mnav__actions button.bhg-cart-toggle span.bhg-cart-toggle-icon svg {
    width: 16px;
    height: 18px;
    display: block;
  }

  .zs-mnav__lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--zs-chip-brd);
    border-radius: var(--radius-btn, 8px);
    background: transparent;
    color: var(--zs-ink) !important;
    font-family: var(--ff-body);
    font-size: 13px;
    letter-spacing: 0;
    text-decoration: none !important;
    text-transform: uppercase;
  }
  .zs-mnav__lang:hover,
  .zs-mnav__lang:focus-visible {
    background: color-mix(in srgb, var(--c-surface) 12%, transparent);
    border-color: color-mix(in srgb, var(--c-surface) 60%, transparent);
  }

  .zs-mnav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--zs-chip-bg);
    color: var(--zs-ink);
    cursor: pointer;
    transition: background-color .15s ease;
  }
  .zs-mnav__close:hover,
  .zs-mnav__close:focus-visible {
    background: color-mix(in srgb, var(--c-surface) 24%, transparent);
  }

  /* --- přepínání úrovní --- */
  .zs-mnav__viewport {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .zs-mnav__view {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px var(--zs-pad) 20px;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .26s ease, opacity .2s ease, visibility .26s ease;
  }
  .zs-mnav__view.is-current { transform: translateX(0);    opacity: 1; visibility: visible; }
  .zs-mnav__view.is-past    { transform: translateX(-25%); opacity: 0; visibility: hidden; }

  /* --- seznam 1. úrovně --- */
  .zs-mnav__list { list-style: none; margin: 0; padding: 0; }
  .zs-mnav__item { margin: 0; }

  .zs-mnav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 0;
    margin: 0;
    border: 0;
    background: none;
    text-align: left;
    /* !important – přebíjí typography.css ř. 440 a:not(.btn)…, jinak je odkaz
       #23142D na #23142D (= neviditelný) a podtržený */
    color: var(--zs-ink) !important;
    text-decoration: none !important;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
  }
  .zs-mnav__link .zs-mnav__label { flex: 1 1 auto; min-width: 0; }
  .zs-mnav__link--static { cursor: default; color: var(--zs-muted); }

  .zs-mnav__link:hover .zs-mnav__label,
  .zs-mnav__link:focus-visible .zs-mnav__label,
  .zs-mnav__link.is-active .zs-mnav__label {
    color: var(--menu-hover, #ffbb67);
  }

  /* šipka „>“ – stejný princip jako desktop separator */
  .zs-mnav__chev {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: .75;
  }

  /* --- 3) druhá úroveň: zpět + titulek --- */
  .zs-mnav__crumb {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 4px 0 14px;
  }

  .zs-mnav__back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--zs-muted);
    font-family: var(--ff-body);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .zs-mnav__back::before {
    content: "";
    width: 6px;
    height: 6px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .zs-mnav__back:hover { color: var(--zs-ink); }

  .zs-mnav__title {
    margin: 0;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--zs-ink);
  }

  /* --- karty 2. úrovně --- */
  .zs-mnav__card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    color: var(--zs-ink) !important;
    text-decoration: none !important;
  }

  .zs-mnav__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 4px;
    background: color-mix(in srgb, var(--c-surface) 10%, transparent);
  }
  .zs-mnav__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .zs-mnav__body { flex: 1 1 auto; min-width: 0; }

  .zs-mnav__name {
    display: block;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--zs-ink);
  }
  .zs-mnav__card:hover .zs-mnav__name,
  .zs-mnav__card:focus-visible .zs-mnav__name,
  .zs-mnav__card.is-active .zs-mnav__name {
    color: var(--menu-hover, #ffbb67);
  }

  .zs-mnav__desc {
    display: block;
    margin-top: 4px;
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--zs-muted);
  }

  .zs-mnav__card .zs-mnav__chev { align-self: center; }

  /* oddělovač mezi položkami s obrázkem a bez něj */
  .zs-mnav__item--card + .zs-mnav__item--plain {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--zs-line);
  }
  .zs-mnav__item--plain .zs-mnav__card { padding: 12px 0; }

  /* --- CTA Rezervace: v toku nad seznamem, hned pod hlavičkou panelu --- */
  .zs-mnav__cta {
    margin: 16px 0 20px;
  }
  .zs-mnav__cta .btn { letter-spacing: .12em; text-transform: uppercase; }

  @media (prefers-reduced-motion: reduce) {
    .zs-mnav__panel,
    .zs-mnav__scrim,
    .zs-mnav__view { transition: none; }
  }
}
/* ==================== KONEC: §21 ZS MOBILNÍ MENU ==================== */


/* ============================================================
   §22 DEER HEROBOX — responzivní top gap
   ============================================================ */

@media (max-width: 991.98px) {
  /* --hbx-top-gap si nastavuje modul inline přímo na elementu
     (style="--hbx-top-gap:220px"). Inline deklaraci nepřebíjí specificita,
     jen !important z autorského stylu — proto je tu. Desktopová hodnota
     zůstává na modulu. */
  .deer-herobox { --hbx-top-gap: 80px !important; }
}
/* ==================== KONEC: §22 DEER HEROBOX ==================== */

/* ============================================================
   §23 NAPSALI O NÁS — category blog override "blognapsali"
   Layout: html/com_content/category/blognapsali.php + _item.php
   Tmavá aubergine sekce s kartami tiskových zmínek.
   Barvy/typografie = utility na markupu, tady jen mechanika.
   ============================================================ */

/* --- §23.1 Sekce --- */
.deer-napsali {
  background: var(--c-forest-400);
  padding-block: clamp(48px, 6vw, 96px);
  color: var(--c-surface);
}

/* Full-bleed breakout z Bootstrap containeru */
.deer-napsali--bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.deer-napsali__heading { margin: 0 0 clamp(24px, 3vw, 40px); }

.deer-napsali__desc {
  margin: 0 0 clamp(24px, 3vw, 40px);
  max-width: 68ch;
  color: color-mix(in srgb, var(--c-surface) 82%, transparent);
}

/* --- §23.2 Karta --- */
.deer-napsali__item { display: flex; }

.deer-napsali__link {
  display: flex;
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
}

.deer-napsali__link:hover,
.deer-napsali__link:focus {
  text-decoration: none;
  color: inherit;
}

.deer-napsali__card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;

  padding: clamp(18px, 1.6vw, 22px) clamp(18px, 1.6vw, 22px) clamp(22px, 2vw, 26px);

  background: var(--c-forest-350);
  border: 1px solid var(--c-forest-300);
  border-radius: 6px;

  transition:
    background-color .22s ease,
    border-color .22s ease,
    transform .28s cubic-bezier(.2,.8,.2,1);
}

/* Hover jen u klikatelných karet */
.deer-napsali__link:not(.deer-napsali__link--static):hover .deer-napsali__card {
  background: var(--c-forest-300);
  border-color: color-mix(in srgb, var(--c-grain-400) 45%, transparent);
  transform: translateY(-3px);
}

.deer-napsali__link:focus-visible { outline: none; }

.deer-napsali__link:focus-visible .deer-napsali__card {
  border-color: var(--c-grain-400);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-grain-400) 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .deer-napsali__card { transition: none; }
  .deer-napsali__link:hover .deer-napsali__card { transform: none; }
}

/* --- §23.3 Zdroj (pole "medium") --- */
.deer-napsali__source {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}

/* Dvojtečka za názvem média je dekorace, ne data */
.deer-napsali__source::after { content: ":"; }

/* --- §23.4 Titulek --- */
.deer-napsali__title {
  margin: 0;
  text-wrap: balance;

  /* max 3 řádky – karty v řádku drží stejnou výšku */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- §23.5 Odznak (pole "odznak") --- */
.deer-napsali__badge { margin-bottom: 4px; }

/* --- §23.6 Načíst další --- */
.deer-napsali__more { margin-top: clamp(28px, 3.5vw, 48px); }

.deer-napsali__more .btn[aria-busy="true"] {
  pointer-events: none;
  opacity: .55;
}
/* ==================== KONEC: §23 NAPSALI O NÁS ==================== */

/* ============================================================
   §24 TLAČÍTKA FORMULÁŘŮ — SPACE MONO
   Přesunuto do forms.css (§F8).
   ============================================================ */