/* =========================
   ZÁKLAD & PREMENNÉ
========================= */
:root{
  --brown:#5c3b2e;
  --cream:#f5efe9;     /* farba plátna stránky */
  --accent:#b47d56;
  --ink:#2b1e19;

  --hdr-h:90px;        /* reálna výška headera */
  --hero-overlap:32px; /* prekrytie bannera pod header */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
}
.wrap{ max-width:1100px; margin:0 auto; padding:16px; }

/* 3D tieň pre nadpisy (používame na viaceré sekcie) */
.threeD,
h1.threeD,h2.threeD,h3.threeD,
.section-title,.menu-title{
  text-shadow:0 4px 6px rgba(92,59,46,0.40);
}

/* =========================
   HEADER (STICKY + BLUR)
========================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(243,232,208,0.40);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#3e281f;
  border-bottom:1px solid rgba(255,255,255,0.30);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ height:64px; width:auto; display:block; }
.brand-text{ font-weight:900; letter-spacing:.2px; color:#3e281f; }
.site-header a{ color:#3e281f; text-decoration:none; font-weight:600; }
.site-header a:hover{ color:#8C4B24; }

/* NAV – desktop priamo v hlavičke */
.nav{ display:flex; gap:8px; }
.nav .nav-btn{
  padding:9px 12px; border-radius:10px; background:transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
  color:var(--brown);
}
.nav .nav-btn:hover,
.nav .nav-btn:focus-visible{
  color:#fff; background:var(--brown); border-radius:6px; outline:none;
}
.nav .nav-btn.active,
.nav .nav-btn[aria-current="page"]{
  color:#fff; background:var(--brown); border-radius:6px;
}

/* Burger (len mobil zobrazí) */
.burger{ width:42px; height:36px; border:0; background:transparent;
  display:none; flex-direction:column; justify-content:center; gap:5px; cursor:pointer; }
.burger .b-line{ height:2px; background:#3e281f; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.burger.is-open .b-line:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open .b-line:nth-child(2){ opacity:0; }
.burger.is-open .b-line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================
   HERO (banner pod header)
========================= */
.header-spacer{ height:var(--hdr-h); } /* ak potrebuješ manuálne vyrovnávať */
.hero,
.hero-section{
  margin-top:calc(-1 * var(--hdr-h)); /* banner lezie pod header */
  position:relative; z-index:0;
}
.hero img,.hero-img,.hero-section img{
  display:block; width:100%; height:auto; object-fit:cover;
}

/* Voliteľný „1 cm prekryv“ spodku bannera farbou plátna */
.hero-section::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:16px; /* približne 1 cm na hi-dpi upravíš podľa oka */
  background:var(--cream); z-index:2;
}

/* =========================
   MENU / LISTY – univerzálne karty
========================= */
.menu-card,.menu-daycard{
  background:#fff; border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:16px; margin:14px 0;
}
.day-title{ margin:0 0 8px; color:var(--brown); }
.menu-list{ display:flex; flex-direction:column; gap:8px; }
.menu-list .row{
  display:flex; justify-content:space-between; gap:16px;
  border-top:1px dashed #eee; padding:10px 0;
}
.menu-list .row:first-child{ border-top:0; }
.row-price{
  white-space:nowrap; font-weight:700; color:var(--accent);
  padding:6px 10px; border-radius:999px; background:rgba(180,125,86,.10);
}

/* Jednoduché centrálne menu (A4 „hárok“ vibe) */
.menu-hero{ text-align:center; padding:0; }
.menu-title{ margin:0; font-size:75px; color:var(--brown); }
.menu-dates{ color:#7a6a5d; font-weight:700; }

.sheet-wrap{ display:flex; justify-content:center; padding:0 12px 0; background:transparent; }
.sheet-outer{
  width:min(900px,96vw);
  position:relative; overflow:hidden;
  border:1px solid rgba(0,0,0,.08); border-radius:16px;
  box-shadow:6px 10px 22px rgba(0,0,0,.10);
  background:#fff;             /* zámerne biela, nech sa neháda s plátnom */
  z-index:2;
}
.sheet-content{ position:relative; z-index:3; padding:20px 18px 26px; }
.menu-simple{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.menu-simple h2.sec-title{
  margin:8px auto 12px; font-size:22px; color:var(--brown); font-weight:900;
  border-bottom:3px solid #ded6cd; padding-bottom:6px; text-transform:uppercase; letter-spacing:.4px;
  text-align:center; width:100%;
  text-shadow:0 4px 6px rgba(92,59,46,0.40);
}
.menu-simple h3.sub{ text-align:center; width:100%; margin:14px 0 8px; font-size:16px; font-weight:900; color:var(--brown); }
.menu-simple .day{ width:80%; margin:22px auto; }
.menu-simple .day .day-head{ display:flex; flex-direction:column; align-items:flex-start; border-bottom:2px solid #ded6cd; padding-bottom:6px; margin-bottom:8px; }
.menu-simple .day .name{ font-size:20px; font-weight:900; color:var(--ink); text-shadow:0 4px 6px rgba(92,59,46,0.40); }
.menu-simple .day .date{ font-size:14px; font-weight:700; color:#6f6258; margin-top:2px; }
.menu-simple .block{ width:80%; margin:0 auto; text-align:center; }
.menu-simple .line{ width:100%; margin:0 auto; display:grid; grid-template-columns:1fr minmax(88px,auto); justify-items:center; align-items:center; text-align:center; gap:12px; padding:6px 0; }
.menu-simple .line + .line{ border-top:1px dashed rgba(0,0,0,.08); }
.menu-simple .dish{ text-align:center; justify-self:center; font-size:16.5px; line-height:1.5; }
.menu-simple .meta{ color:#8a7d73; font-size:12.5px; margin-left:.35rem; }
.menu-simple .price{ text-align:center; justify-self:center; font-weight:900; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* =========================
   SEKCIA „NAŠE SLUŽBY“ (bez dreva – len čisté plátno)
========================= */
.services{
  position:relative; z-index:1; padding:40px 0;
}
.services .section-title{ font-size:32px; color:var(--brown); margin:0 0 18px; }
.services .section-title.threeD{ text-shadow:0 4px 6px rgba(92,59,46,0.40); }

/* Ak chceš ikony s textom vľavo (pripravené) */
.services .list{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px;
}
.services .item{
  display:flex; gap:12px; align-items:flex-start;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px;
  padding:12px 14px; box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.services .item .ico{ width:40px; height:40px; flex:0 0 40px; border-radius:10px; display:grid; place-items:center; background:#f7f2ec; color:var(--brown); }
.services .item h4{ margin:0 0 6px; color:var(--brown); }
.services .item p{ margin:0; color:#5a4a40; }

/* =========================
   BOARD / PANEL (ak používaš)
========================= */
.board{
  position:relative; border-radius:16px; overflow:hidden;
  background:#111; border:1px solid #233148; min-height:320px;
}
.board__bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.7); }
.board__scrim{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 30% 0%, rgba(0,0,0,.35), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.6));
  backdrop-filter: blur(1px);
}
.board__panel{
  position:relative; z-index:2; margin:18px; padding:18px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.35) inset, 0 2px 8px rgba(0,0,0,.25);
}
.board__title{ margin:0 0 10px; font-size:18px; letter-spacing:.02em; }
.board__list{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr auto; row-gap:8px; column-gap:14px; }
.board__cat{ display:inline-block; font-size:12px; opacity:.75; margin-right:8px; }
.board__logo{ position:absolute; right:14px; top:14px; width:54px; height:54px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:#fff; object-fit:cover; }
.board__imgmenu{ display:block; max-width:100%; border-radius:10px; border:1px solid #2b3544; margin-top:10px; }

/* =========================
   FOOTER
========================= */
.site-footer{
  background:#F3E8D0;  /* zmeň podľa potreby */
  color:#3E281F;
  padding:30px 0;
  border-top:1px solid rgba(255,255,255,0.3);
  box-shadow:0 -4px 20px rgba(0,0,0,.06);
  margin-top:40px;
  text-align:center;
}
.site-footer .wrap{ max-width:1100px; margin:0 auto; padding:0 16px; }
.footer-nav{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin:12px 0 6px; }
.footer-nav .contact-link{
  color:#3E281F; text-decoration:none; font-weight:600; padding:4px 6px; border-radius:6px;
  transition: background-color .2s ease, color .2s ease;
}
.footer-nav .contact-link:hover{ background:rgba(62,40,31,0.08); color:#2b1e19; }
.footer-social{ display:flex; justify-content:center; gap:14px; margin-top:10px; }
.footer-social .social-btn{
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  background:rgba(255,255,255,0.7); border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 2px 10px rgba(0,0,0,.06); transition: transform .15s ease, background .2s ease;
}
.footer-social .social-btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.9); }
.footer-social svg{ width:22px; height:22px; display:block; fill:currentColor; }
.footer-social .ig{ color:#E1306C; } .footer-social .fb{ color:#1877F2; } .footer-social .yt{ color:#FF0000; }

/* =========================
   MODAL (skrytý default)
========================= */
#catalogModal[hidden]{ display:none !important; visibility:hidden !important; opacity:0 !important; }

/* =========================
   RESPONSIVE
========================= */
@media (min-width:901px){
  .burger{ display:none; }
  .brand img{ height:90px; }
}

/* Off-canvas menu (MOBILE) */
@media (max-width:900px){
  .burger{ display:flex; }
  .nav{ display:none; } /* nav sa schová – zobrazí sa drawer */

  .nav-drawer{
    position:fixed; left:0;
    top: var(--hdr-h);
    height: calc(100vh - var(--hdr-h));
    width: min(72vw,320px);
    padding:14px 12px;
    display:flex; flex-direction:column; gap:8px;
    background: rgba(229,210,170,0.94);
    backdrop-filter: saturate(115%) blur(6px);
    border-right:1px solid rgba(255,255,255,.12);
    box-shadow: 8px 0 24px rgba(0,0,0,.28);
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 1200; overflow-y:auto;
  }
  .nav-drawer.is-open{ transform: translateX(0); }
  .nav-drawer .nav-btn{
    display:block; padding:12px 12px; border-radius:12px;
    color:#fff; text-decoration:none;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    font-weight:600;
  }
  .nav-drawer .nav-btn:hover{ background: rgba(255,255,255,.18); }
  .nav-drawer .nav-btn.active{ background:#fff; color: var(--brown); }

  .nav-backdrop{
    position:fixed; left:0; right:0;
    top: var(--hdr-h); height: calc(100vh - var(--hdr-h));
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    opacity:0; pointer-events:none; transition: opacity .25s ease;
    z-index:1100;
  }
  .nav-backdrop.show{ opacity:1; pointer-events:auto; }

  body.nav-open{ overflow:hidden; }

  /* Menu A4 – užšie okraje */
  .menu-simple .day,
  .menu-simple .block{ width:90%; }
  .menu-title{ font-size:48px; }
}

/* Menšie mobily */
@media (max-width:768px){
  .menu-spinner{
    display:flex; flex-direction:column; gap:18px;
    max-height:80vh; overflow-y:auto; scroll-snap-type:y mandatory;
  }
/* Veľmi úzke (ikony/riadky) */
@media (max-width:640px){
  .footer-nav{ gap:12px; }
  .services .list{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .hero-section::after{
    height: 6px;           /* pôvodne ~16px, kľudne daj 0–10px */
  }
}
@media (max-width: 900px){
  .about{ padding-top: 32px; }          /* bolo 40–80px, prispôsob */
  .about-split{ gap: 16px; }            /* menšia medzera medzi stĺpcami */
  /* ak potrebuješ ešte bližšie k banneru: */
  .about{ margin-top: -8px; }           /* jemné vytiahnutie sekcie hore */
}
.nav-drawer .nav-btn{
  color:#3e281f;                        /* tmavý text namiesto bieleho */
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(0,0,0,.08);
}
.nav-drawer .nav-btn:hover{
  background: rgba(255,255,255,.35);
}
.nav-drawer .nav-btn.active{
  background:#fff; color: var(--brown);
}
/* ======= PALETA – JEDNOTNÁ ======= */
:root{
  --ink:#2b1e19;
  --brown:#5c3b2e;
  --accent:#b47d56;

  /* plátno + „papier“ hárok */
  --canvas:#eadfd6;  /* pozadie stránky */
  --paper:#efe6d9;   /* hárok A4 / svetlá krémová */
  --cream:#f3ebdf;   /* ľahšia krémová na panely */
}

/* ======= ZÁKLAD ======= */
body{ background:var(--canvas) !important; color:var(--ink); }

/* Zruš duplicity header štýlov a nežiadané blury */
.site-header{
  position:sticky; top:0; z-index:1000;
  background: linear-gradient(to top, #F3E8D0,#E5D2AA) !important;
  color:#3e281f;
  border-bottom:1px solid rgba(255,255,255,0.2);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  backdrop-filter:none !important;           /* vypne miešajúce sa blury */
  -webkit-backdrop-filter:none !important;
}

/* Voliteľne – jemný blur len pri scrollnutí (ak používaš triedu .scrolled v JS) */
.site-header.scrolled{
  background: rgba(243,232,208,0.75) !important;
  backdrop-filter: blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
}

/* Hero – nech negeneruje vlastný odtieň pod sebou */
.hero, .hero-section{
  margin-top:0 !important;
  z-index:0;
}
.hero img, .hero-section img{ display:block; width:100%; height:auto; object-fit:cover; }

/* ======= HÁROK (meníčko) – papier, jednotná farba + tieň ======= */
.sheet-outer{
  background: var(--paper) !important;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow:
    0 18px 40px rgba(0,0,0,.18),
    0 2px 0 rgba(255,255,255,.6) inset;
}
/* 3D text na nadpisoch a položkách meníčka */
.menu-hero h1,
.menu-simple h2.sec-title,
.menu-simple .day .name,
.menu-simple .dish,
.menu-simple .price{
  text-shadow: 0 4px 6px rgba(92,59,46,0.4);
}

/* Odstráň „cm pásik“ – žiadne faux prekrytia nad hárkom */
.hero-section::after{ content:none !important; }
.sheet-top-fade{ height:0 !important; background:transparent !important; }

/* ======= „Naše služby“ panel – čisté pozadie, bez miešania ======= */
.services{
  position:relative; z-index:1; padding:40px 0;
  isolation:auto;
}
.services::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:-40px; bottom:-40px; width:100vw;
  background: url('<?= e(APP_BASE) ?>/assets/img_old_sk/desk_wood2_symbol-1024x462.png') center/cover no-repeat;
  opacity:.95; z-index:-1;
}
/* Kontajner „Naše služby“ – polopriehľadný s blur na mobile */
.services .services-card{
  background: rgba(255,255,255,0.5);
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
  padding:18px;
}
@media (max-width:900px){
  .services .services-card{
    background: rgba(255,255,255,0.38);
    backdrop-filter: blur(10px);            /* mobilný „glass“ efekt */
    -webkit-backdrop-filter: blur(10px);
  }
  /* Skráť „vzduch“ pod bannerom – tanier bližšie k hárku */
  .hero, .hero-section{ margin-bottom: 10px !important; }
}

/* ======= BURGER (off-canvas) – tmavá krémová + tmavý text ======= */
@media (max-width:900px){
  .nav-drawer{
    background: rgba(229,210,170,0.94) !important;   /* #e5d2aa */
    backdrop-filter: saturate(115%) blur(6px);
    -webkit-backdrop-filter: saturate(115%) blur(6px);
    border-right:1px solid rgba(0,0,0,.08);
    box-shadow: 8px 0 24px rgba(0,0,0,.22);
  }
  .nav-drawer .nav-btn{
    color:#3e281f !important;
    background: rgba(255,255,255,.25);
    border:1px solid rgba(0,0,0,.06);
  }
  .nav-drawer .nav-btn:hover{ background: rgba(255,255,255,.35); }
  .nav-drawer .nav-btn.active{ background:#fff; color: var(--brown) !important; }
}

/* ======= FOOTER – jednotná varianta (bez extra textúr) ======= */
.site-footer{
  background: #F3E8D0 !important;
  color:#3e281f;
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
  border-top:1px solid rgba(255,255,255,0.3);
}

/* ======= DROBNÉ KOLÍZIE (zníži vplyv starých pravidiel) ======= */
.nav-drawer{ background-clip: padding-box; }
.nav-backdrop{ backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* Poistka: nezobrazuj nič, čo by prekrývalo hárok zhora */
.sheet-outer::before,
.sheet-outer::after{ content:none !important; }

/* === FIX: zjednotenie palety === */
:root{
  /* používaj JEDNU plátno premennú */
  --canvas:#eadfd6;   /* pozadie stránky */
  --paper:#efe6d9;    /* „hárok“ A4 */
  --ink:#2b1e19;
  --brown:#5c3b2e;
  --accent:#b47d56;

  --hdr-h:90px;
  --hero-overlap:32px;
}
body{ background:var(--canvas) !important; color:var(--ink) !important; }

/* === FIX: hlavička späť priehľadná + blur (zruší gradient override) === */
.site-header{
  position:sticky !important;
  top:0; z-index:1000;
  background: rgba(243,232,208,0.40) !important;   /* priehľadné */
  backdrop-filter: blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  color:#3e281f !important;
  border-bottom:1px solid rgba(255,255,255,0.30) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.15) !important;
}
/* voliteľné stmavenie pri scrollnutí (ak v JS pridávaš .scrolled) */
.site-header.scrolled{
  background: rgba(243,232,208,0.60) !important;
}

/* === HERO: nech nič zbytočne neprekrýva hlavičku === */
.hero, .hero-section{
  margin-top: calc(-1 * var(--hdr-h)) !important;
  z-index:0;
}
.hero-section::after{ content:none !important; }  /* zruší „pásik“ ak nechceš */

/* === Hárok meníčka: jednotná farba + 3D tieň === */
.sheet-outer{
  background: var(--paper) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:16px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.18),
              0 2px 0 rgba(255,255,255,.6) inset !important;
}

/* === Burger zásuvka: krémová, nie „kakáová“ === */
@media (max-width:900px){
  .nav-drawer{
    background: rgba(229,210,170,0.94) !important; /* #e5d2aa */
    backdrop-filter: saturate(115%) blur(6px) !important;
    -webkit-backdrop-filter: saturate(115%) blur(6px) !important;
    border-right:1px solid rgba(0,0,0,.08) !important;
    box-shadow: 8px 0 24px rgba(0,0,0,.22) !important;
  }
  .nav-drawer .nav-btn{
    color:#3e281f !important;
    background: rgba(255,255,255,.25) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
  }
  .nav-drawer .nav-btn:hover{ background: rgba(255,255,255,.35) !important; }
  .nav-drawer .nav-btn.active{ background:#fff !important; color: var(--brown) !important; }
}
/* === MOBILE OFF-CANVAS LAYER ORDER & BOUNDS === */
@media (max-width: 900px){
  :root{ --hdr-h: 72px; }                 /* reálna výška headera na mobile */

  .site-header{
    position: sticky;
    top: 0;
    z-index: 1400 !important;             /* header nad všetkým */
  }
  .nav-drawer{
    position: fixed;
    left: 0;
    top: var(--hdr-h);
    height: calc(100vh - var(--hdr-h));
    width: min(72vw, 320px);
    z-index: 1300 !important;             /* panel pod headerom */
  }
  .nav-backdrop{
    position: fixed;
    left: 0; right: 0;
    top: var(--hdr-h);                     /* nezaťahuje pod header */
    height: calc(100vh - var(--hdr-h));
    z-index: 1200 !important;              /* backdrop pod panelom aj pod headerom */
    opacity: 0; pointer-events: none;
    background: rgba(0,0,0,.45);
    transition: opacity .25s ease;
  }
  .nav-backdrop.show{
    opacity: 1; pointer-events: auto;
  }
.nav-backdrop{
  background: rgba(0,0,0,.45);
}
/* === MOBILE NAV DRAWER – jednotná krémová + glass === */
@media (max-width: 600px){
  /* zasiahneme všetky možné selektory zásuvky */
  #mainmenu.nav-drawer,
  .site-header .nav-drawer,
  .nav-drawer{
    background: rgba(234,223,214,0.60) !important;  /* #eadfd6 tón */
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
    border-right: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 8px 0 24px rgba(0,0,0,.22);
    isolation: isolate;
    z-index: 1200;
  }

  /* ak má vnútri ešte nejaký wrapper/ul s vlastným pozadím, vynuluj ho */
  .nav-drawer .nav,
  .nav-drawer ul,
  .nav-drawer .menu,
  .nav-drawer .panel{
    background: transparent !important;
    box-shadow: none !important;
  }

  /* farby tlačidiel v zásuvke */
  .nav-drawer .nav-btn{
    color: #3e281f !important;                 /* tmavý text */
    background: rgba(255,255,255,.25) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
  }
  .nav-drawer .nav-btn:hover{
    background: rgba(255,255,255,.35) !important;
  }
  .nav-drawer .nav-btn.active{
    background: #fff !important;
    color: var(--brown) !important;
  }

  /* backdrop zlaď s plátnom, nie čiernym filtrom */
  .nav-backdrop{
    background: rgba(234,223,214,0.45) !important;  /* #eadfd6 s jemnou alfou */
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Mobil: banner nech je úplne pod headerom */
@media (max-width:900px){
  :root{
    --hdr-h: 72px;        /* reálna výška headera na mobile (doladíš) */
    --hero-overlap: 0px;  /* žiadne prekrývanie na mobile */
  }

  /* spacer nech vytlačí obsah presne o výšku headera */
  .header-spacer{ height: var(--hdr-h) !important; }

  /* zruš negatívne prekrývanie z desktopu */
  .hero, .hero-section{
    margin-top: 0 !important;
  }

  /* jemné doladenie výrezu bannera (voliteľné) */
  .hero-section img{
    object-position: center top; /* alebo center 20% podľa oka */
  }