/**
 * Kormuth Site Manager — frontend styles
 *
 * Štruktúra cez @layer pre čistý cascade management:
 *  - reset    → základ
 *  - base     → typografia + premenné
 *  - layout   → sekcie
 *  - nav      → hlavička (s modernými scroll-driven animáciami)
 *  - footer   → pätka
 *  - player   → music player
 *  - anim     → animácie
 *  - modern   → progresívne vylepšenia pre nové prehliadače
 *  - responsive
 */

@layer reset, base, layout, nav, footer, player, anim, modern, responsive, theme-dark, astra-override;

/* ════════════════════ RESET ════════════════════ */
@layer reset {
    .kormuth-page *,
    .kormuth-page *::before,
    .kormuth-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
}

/* ════════════════════ BASE ════════════════════ */
@layer base {
    /* ═══════════ BRAND PALETA (konštanty — nemenia sa s témou) ═══════════
       Toto sú "značkové" farby — peach, gold, cream, dark — vždy zostávajú
       rovnaké, lebo definujú vizuálnu identitu Konditorei Kormuth. */
    .kormuth-page {
        --peach:       #d6a787;
        --peach-soft:  #e6c1a4;
        --peach-dark:  #b8825e;
        --gold:        #b89567;
        --gold-light:  #d4b88e;
        --dark:        #2a2520;   /* vždy tmavá brand farba */
        --cream:       #f4ede2;   /* vždy svetlá brand farba */
    }

    /* ─────────── LIGHT THEME (default) — role-based tokens ─────────── */
    .kormuth-page,
    [data-theme="light"].kormuth-page,
    [data-theme="light"] .kormuth-page {
        --text:           #3b3530;       /* hlavný text — tmavý */
        --text-soft:      #6b6058;       /* sekundárny text */
        --page-bg:        #ffffff;
        --section-bg:     #fefcf8;       /* karty / sekcie s textom */
        --section-bg-alt: #fdf7eb;       /* alt sekcia (zebra) */
        --footer-bg:      #f4ede2;       /* patka — používa cream */
        --footer-bg-1:    #fffaf2;       /* footer gradient stop 1 */
        --footer-bg-2:    #fff7ec;       /* footer gradient stop 2 */
        --footer-bg-3:    #fdf4e6;       /* footer gradient stop 3 */
        --footer-text:    #3b3530;
        --gallery-bg:     #faf3e6;       /* Instagram / cykl. galéria */
        --about-bg:       #f4ede2;
        --music-bg:       rgba(255, 255, 255, 0.96);
        --music-text:     #2a2520;
        --insta-bg:       #fefcf8;
        --nav-fallback-bg: rgba(255, 255, 255, 0.92);
        --shadow-soft:    rgba(0, 0, 0, 0.08);
        --shadow-card:    rgba(0, 0, 0, 0.12);
        --border-soft:    rgba(184, 149, 103, 0.18);
    }

    /* ─────────── DARK THEME — len role-based premenné sa menia ─────────── */
    [data-theme="dark"].kormuth-page,
    [data-theme="dark"] .kormuth-page {
        --text:           #d4c8b5;       /* svetlý béžový text */
        --text-soft:      #9a8f7e;
        --page-bg:        #0d0a08;       /* hlboké tmavé pozadie */
        --section-bg:     #14100c;       /* sekcie */
        --section-bg-alt: #1a1510;       /* alt zebra */
        --footer-bg:      #0a0806;       /* patka ešte tmavšie */
        --footer-bg-1:    #14100c;       /* footer gradient stop 1 */
        --footer-bg-2:    #0d0a08;       /* footer gradient stop 2 */
        --footer-bg-3:    #060403;       /* footer gradient stop 3 */
        --footer-text:    #c9bfa8;
        --gallery-bg:     #14100c;
        --about-bg:       #1a1510;
        --music-bg:       rgba(20, 16, 12, 0.92);
        --music-text:     #f0e7d8;
        --insta-bg:       #14100c;
        --nav-fallback-bg: rgba(15, 11, 8, 0.85);
        --shadow-soft:    rgba(0, 0, 0, 0.5);
        --shadow-card:    rgba(0, 0, 0, 0.7);
        --border-soft:    rgba(212, 184, 142, 0.18);
    }

    html { scroll-behavior: smooth; }

    .kormuth-page {
        font-family: 'Jost', sans-serif;
        font-weight: 300;
        background: var(--page-bg);
        color: var(--text);
        overflow-x: hidden;
        line-height: 1.6;
        transition: background-color .4s ease, color .4s ease;
    }
    .kormuth-page img { display: block; max-width: 100%; }

    /* Tranzície na theme-aware elementoch */
    .kormuth-page section,
    .kormuth-page .kk-nav,
    .kormuth-page .kk-footer,
    .kormuth-page .music-player {
        transition: background-color .4s ease, color .4s ease, border-color .4s ease;
    }
}

/* ════════════════════ NAV ════════════════════ */
@layer nav {
    .kk-nav {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 100;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 40px;
        background: rgba(255,255,255,0);
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
        border-bottom: 1px solid transparent;
        transition: background .45s ease, padding .45s ease,
                    box-shadow .45s ease, backdrop-filter .45s ease,
                    border-color .45s ease;
    }
    /* ─────────── GLASSMORPHIC HEADER PRI SCROLLE ─────────── */
    .kk-nav.scrolled {
        background: var(--nav-glass-bg, rgba(255, 248, 238, 0.18)) !important;
        backdrop-filter: blur(var(--nav-glass-blur, 18px)) saturate(180%) !important;
        -webkit-backdrop-filter: blur(var(--nav-glass-blur, 18px)) saturate(180%) !important;
        padding: 10px 40px;
        box-shadow: 0 8px 32px rgba(20, 15, 10, 0.10);
        border-bottom: 1px solid rgba(184, 149, 103, 0.22);
    }
    .kk-nav .nav-links { display: flex; gap: 34px; list-style: none; }
    .kk-nav .nav-links a {
        text-decoration: none;
        color: #fff;
        mix-blend-mode: difference;
        font-family: 'Jost', sans-serif;
        font-size: 11px;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-weight: 400;
        transition: opacity .25s, color .35s ease, text-shadow .35s ease;
    }
    /* Pri scrolle: farba/text-shadow podľa tint témy */
    .kk-nav.scrolled .nav-links a {
        color: var(--nav-glass-txt, #2a2520) !important;
        mix-blend-mode: normal !important;
        font-weight: 500;
        text-shadow: var(--nav-glass-txt-shadow, 0 1px 2px rgba(255, 248, 238, 0.6));
    }
    .kk-nav.scrolled .nav-links a:hover {
        color: var(--gold);
        opacity: 1;
    }
    .kk-nav .nav-links a:hover { opacity: .65; }

    /* ═══════════ HEADER TOOLS WRAPPER ═══════════ */
    .kk-nav .kk-header-tools {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* ═══════════ THEME TOGGLE (☀ / ☾) — od v1.17.2 čistý, bez rámika ═══════════ */
    .kk-nav .theme-toggle {
        --tt-size: 32px;
        width: var(--tt-size);
        height: var(--tt-size);
        border-radius: 50%;
        background: transparent;
        border: none;
        cursor: pointer;
        color: #fff;
        mix-blend-mode: difference;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform .35s cubic-bezier(.2,.8,.2,1), color .3s ease;
        position: relative;
        padding: 0;
    }
    .kk-nav.scrolled .theme-toggle {
        color: var(--nav-glass-txt, #2a2520);
        mix-blend-mode: normal;
        background: transparent;
        border: none;
    }
    .kk-nav .theme-toggle:hover {
        transform: rotate(15deg) scale(1.12);
    }
    .kk-nav .theme-toggle__sun,
    .kk-nav .theme-toggle__moon {
        position: absolute;
        transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
    }
    /* Default (light theme) — moon visible, sun hidden */
    .kk-nav .theme-toggle__sun  { opacity: 0; transform: rotate(-90deg) scale(0.6); }
    .kk-nav .theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); }
    /* Dark theme — sun visible, moon hidden */
    [data-theme="dark"] .kk-nav .theme-toggle__sun  { opacity: 1; transform: rotate(0) scale(1); }
    [data-theme="dark"] .kk-nav .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

    /* OD v1.17.8: Fallback pravidlá BEZ .kk-nav ancestora — pre prípad že
       header.php je include-ovaný v page template kde .kk-nav wrapper
       nemá takú istú DOM hierarchiu ako na homepage. Špecificita 1×class
       je nižšia než .kk-nav .theme-toggle__sun (2×class), takže keď oba
       selektory matchnú, vyhrá ten konkrétnejší. Tým toto nie je override,
       ale len safety net keď .kk-nav vôbec neexistuje. */
    .theme-toggle__sun,
    .theme-toggle__moon {
        position: absolute;
        transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
    }
    .theme-toggle__sun  { opacity: 0; transform: rotate(-90deg) scale(0.6); }
    .theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); }
    [data-theme="dark"] .theme-toggle__sun  { opacity: 1; transform: rotate(0) scale(1); }
    [data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

    /* ═══════════ LANG SWITCHER (vlajky cez flag-icons) — od v1.17.2 ═══════════ */
    .kk-nav .lang-switcher {
        display: flex;
        gap: 8px;
        align-items: center;
        padding: 4px 8px;
        border-radius: 100px;
    }
    .kk-nav.scrolled .lang-switcher {
        background: rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .kk-nav .lang-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        border-radius: 3px;
        opacity: 0.5;
        transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
        position: relative;
    }
    .kk-nav .lang-btn .fi {
        display: block;
        width: 26px;
        height: 19.5px;          /* 4:3 ratio = 26 × 19.5 */
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    }
    .kk-nav .lang-btn:hover {
        opacity: 1;
        transform: scale(1.1);
    }
    .kk-nav .lang-btn.active {
        opacity: 1;
    }
    .kk-nav .lang-btn.active .fi {
        box-shadow: 0 0 0 1.5px var(--gold), 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    .kk-nav.scrolled .lang-btn.active .fi {
        box-shadow: 0 0 0 1.5px var(--gold), 0 2px 8px rgba(184, 149, 103, 0.45);
    }

    /* OD v1.17.9: Fallback pravidlá BEZ .kk-nav ancestora — analogicky ako pre
       theme-toggle v 1.17.8. Na sub-stránkach (Vitráže, Interiér, Naša výroba,
       Ochrana súkromia) je header.php include-ovaný v page templati kde .kk-nav
       ancestor nemusí existovať alebo má inú hierarchiu. Bez týchto pravidiel
       vlajky nemali ani width/height a renderovali sa ako nula-px elementy. */
    .lang-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        border-radius: 3px;
        opacity: 0.5;
        transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
        position: relative;
    }
    .lang-btn .fi {
        display: block;
        width: 26px;
        height: 19.5px;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    }
    .lang-btn:hover {
        opacity: 1;
        transform: scale(1.1);
    }
    .lang-btn.active {
        opacity: 1;
    }
    .lang-btn.active .fi {
        box-shadow: 0 0 0 1.5px #b89567, 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    /* ═══════════ NAV LINK — ACTIVE (Vitráže) ═══════════ */
    .kk-nav .nav-links a.is-active {
        position: relative;
        color: var(--gold);
    }
    .kk-nav .nav-links a.is-active::after {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 1.5px;
        background: currentColor;
    }
    .kk-nav.scrolled .nav-links a.is-active {
        color: var(--gold);
        font-weight: 600;
    }

    /* Skry pôvodné .flag pravidlá ak by ich ešte niekto využíval */
    .kk-nav .flag { display: none; }
}

/* ════════════════════ LAYOUT (sekcie) ════════════════════ */
@layer layout {
    /* HERO */
    .hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 100vh;
        background: var(--peach);
    }
    .hero-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 80px 60px;
        text-align: center;
        color: #fff;
    }
    .hero-title {
        font-family: 'Cormorant Garamond', 'Cormorant', serif !important;
        font-weight: 400 !important;
        font-size: calc(clamp(48px, 5.5vw, 92px) * var(--hero-title-scale, 1)) !important;
        line-height: 1.05 !important;
        letter-spacing: 0.5px;
        margin-bottom: 50px;
        color: var(--hero-title-color, #fff) !important;
        text-shadow: 0 2px 20px rgba(0,0,0,0.08);
        transition: color .3s, font-size .3s;
    }
    .hero-eyebrow {
        font-family: 'Jost', sans-serif;
        font-size: calc(12px * var(--hero-eyebrow-scale, 1)) !important;
        letter-spacing: 5px;
        text-transform: uppercase;
        font-weight: 400;
        margin-bottom: 14px;
        color: var(--hero-eyebrow-color, #fff) !important;
        transition: color .3s, font-size .3s;
    }
    .hero-divider {
        width: 60px;
        height: 1px;
        background: #fff;
        transform: rotate(-18deg);
        margin: 24px auto 36px;
        opacity: .85;
    }

    /* Hero 3D logo — náhrada za lomítko, otáča sa okolo zvislej osi (Y) */
    .hero-logo-3d {
        margin: 18px auto 30px;
        width: clamp(56px, 6vw, 84px);
        height: auto;
        perspective: 800px;
        display: block;
    }
    .hero-logo-3d img {
        width: 100%;
        height: auto;
        display: block;
        filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
        animation: kk-hero-flip 7s cubic-bezier(.5,0,.5,1) infinite;
        transform-style: preserve-3d;
        backface-visibility: visible;
    }
    @keyframes kk-hero-flip {
        0%   { transform: rotateY(0deg); }
        45%  { transform: rotateY(180deg); }
        55%  { transform: rotateY(180deg); }   /* malá pauza na "rube" */
        100% { transform: rotateY(360deg); }
    }
    .hero-logo-3d[data-spin="off"] img { animation: none; }
    .hero-text {
        max-width: 380px;
        font-size: calc(14.5px * var(--hero-text-scale, 1)) !important;
        line-height: 2;
        font-weight: 300 !important;
        color: var(--hero-text-color, #fff) !important;
        transition: color .3s, font-size .3s;
    }
    .hero-right {
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        will-change: transform, filter;
    }
    /* Overlay vrstva nad hero obrázkom (admin slider hero_overlay_opacity) */
    .hero-right-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
    }
    .hero-right .hero-video {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
    }

    /* PARALLAX INTERIOR */
    .parallax-interior {
        position: relative;
        height: 100vh;
        min-height: 600px;
        overflow: hidden;
        background-color: var(--dark);
    }
    .parallax-interior .bg {
        position: absolute;
        inset: -10% 0;
        background-size: cover;
        background-position: center;
        will-change: transform;
    }
    .parallax-interior .overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.45) 100%);
    }
    .parallax-interior .title-block {
        position: absolute;
        top: 50%;
        left: 8%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 36px;
        z-index: 2;
    }
    .parallax-interior .logo-emblem {
        width: calc(110px * var(--kk-logo-scale, 1));
        height: auto;
        filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
        flex-shrink: 0;
        /* offset z dashboardu (X / Y v pixeloch) */
        translate: var(--kk-logo-x, 0px) var(--kk-logo-y, 0px);
        /* spin: pomalá otáčka s pauzou (70 % času stojí, 30 % sa otáča). */
        animation: kk-logo-spin var(--kk-logo-spin-duration, 25s) ease-in-out infinite;
        transform-origin: center center;
    }
    @keyframes kk-logo-spin {
        0%, 70%   { transform: rotate(0deg); }
        100%      { transform: rotate(360deg); }
    }
    /* OFF stav — vypnutie spinu z dashboardu */
    .parallax-interior .logo-emblem[data-spin="off"] {
        animation: none;
    }

    /* 3D logo (GLB cez <model-viewer>) — náhrada za 2D obrázok */
    .parallax-interior .logo-emblem-3d {
        width: calc(180px * var(--kk-logo-scale, 1));
        height: calc(180px * var(--kk-logo-scale, 1));
        flex-shrink: 0;
        translate: var(--kk-logo-x, 0px) var(--kk-logo-y, 0px);
        background-color: transparent;
        --poster-color: transparent;
        filter: drop-shadow(0 10px 25px rgba(0,0,0,.5));
        /* žiadne CSS spin — auto-rotate rieši samotné model-viewer */
    }
    @media (max-width: 900px) {
        .parallax-interior .logo-emblem-3d {
            width: calc(120px * var(--kk-logo-scale, 1));
            height: calc(120px * var(--kk-logo-scale, 1));
        }
    }
    .parallax-interior .title {
        color: #fff !important;
        font-family: 'Cormorant Garamond', serif !important;
        font-weight: 300 !important;
        font-size: clamp(48px, 6vw, 96px) !important;
        line-height: 1.05 !important;
        letter-spacing: 1.5px;
        text-shadow: 0 4px 30px rgba(0,0,0,.5);
    }

    /* TRIPLE GALLERY */
    .triple-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        background: #fff;
    }
    .triple-gallery .cell {
        position: relative;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }
    .triple-gallery .cell img {
        position: absolute;
        inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .6s;
    }
    .triple-gallery .cell:hover img {
        transform: scale(1.06);
        filter: brightness(1.05);
    }

    /* ─────────── CYCLING MODE — rotujúce fotky s Ken Burns pan ─────────── */
    .triple-gallery.is-cycling .cycle-cell {
        position: relative;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: var(--cream);
    }
    /* Dvojvrstvový crossfade: pri zmene fotky sa nový .cycle-img--next fadeuje cez starý .cycle-img--current */
    .triple-gallery.is-cycling .cycle-img {
        position: absolute;
        inset: 0;
        background-color: var(--cream);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 1.4s ease-in-out;
        will-change: opacity, transform;
    }
    .triple-gallery.is-cycling .cycle-img.is-visible { opacity: 1; }

    /* Ken Burns pan — orientácia sa nastaví cez data-orientation cez JS po `load` */
    /* Krajinka (landscape) → posúvaj zľava doprava */
    .triple-gallery.is-cycling .cycle-img[data-orientation="landscape"].is-visible {
        animation: kk-pan-horizontal var(--pan-dur, 10s) ease-in-out alternate infinite;
    }
    /* Portrét (portrait) → posúvaj zhora dole */
    .triple-gallery.is-cycling .cycle-img[data-orientation="portrait"].is-visible {
        animation: kk-pan-vertical var(--pan-dur, 10s) ease-in-out alternate infinite;
    }
    /* Štvorec / neznáme → ľahké zoom-in pulse */
    .triple-gallery.is-cycling .cycle-img[data-orientation="square"].is-visible,
    .triple-gallery.is-cycling .cycle-img:not([data-orientation]).is-visible {
        animation: kk-pan-zoom var(--pan-dur, 10s) ease-in-out alternate infinite;
    }

    @keyframes kk-pan-horizontal {
        0%   { background-position: 12% 50%; transform: scale(1.06); }
        100% { background-position: 88% 50%; transform: scale(1.06); }
    }
    @keyframes kk-pan-vertical {
        0%   { background-position: 50% 12%; transform: scale(1.06); }
        100% { background-position: 50% 88%; transform: scale(1.06); }
    }
    @keyframes kk-pan-zoom {
        0%   { background-position: 50% 50%; transform: scale(1.00); }
        100% { background-position: 50% 50%; transform: scale(1.10); }
    }

    /* Hover pri cycling → zlatá tinta (zachovaný design pattern) */
    .triple-gallery.is-cycling .cycle-cell::after {
        content: '';
        position: absolute; inset: 0;
        background: rgba(184,149,103,0);
        transition: background .35s;
        pointer-events: none;
    }
    .triple-gallery.is-cycling .cycle-cell:hover::after {
        background: rgba(184,149,103,0.18);
    }

    /* BRAND SECTION */
    .brand-section { background: #fff; padding: 100px 40px 110px; text-align: center; position: relative; }
    .brand-meta { display: flex; justify-content: center; gap: 80px; margin-bottom: 50px; }
    .brand-meta span {
        font-size: 11px;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--text);
        font-weight: 400;
    }
    .brand-title-row { display: flex; align-items: center; justify-content: center; gap: 60px; flex-wrap: wrap; }
    .brand-title {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 300;
        font-size: clamp(54px, 7vw, 110px);
        line-height: 1;
        color: var(--dark);
        letter-spacing: 1px;
    }
    .brand-divider {
        width: 80px; height: 1px;
        background: var(--gold);
        transform: rotate(-22deg);
        flex-shrink: 0;
    }

    /* ─────────── VIDEO HERO (full-screen Brand) ─────────── */
    .video-hero {
        position: relative;
        height: 100vh;
        min-height: 600px;
        overflow: hidden;
        background: var(--dark);
    }
    .vh-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    .vh-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .vh-tint, .vh-dark {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }
    .vh-dark { z-index: 2; }

    .vh-container {
        position: relative;
        z-index: 3;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 max(40px, 8vw);
        max-width: 1500px;
        margin: 0 auto;
    }
    .vh-content {
        max-width: 620px;
        color: #fff;
    }
    .vh-eyebrow {
        font-size: 11px;
        letter-spacing: 5px;
        text-transform: uppercase;
        font-weight: 500;
        color: var(--gold);
        margin: 0 0 18px;
        text-shadow: 0 2px 8px rgba(0,0,0,.5);
    }
    .vh-title {
        font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
        font-weight: 300;
        font-size: clamp(44px, 6.5vw, 78px);
        line-height: 1.05;
        letter-spacing: 1px;
        margin: 0 0 26px;
        color: #fff;
        text-shadow: 0 4px 24px rgba(0,0,0,.45);
    }
    .vh-divider {
        width: 100px;
        height: 1px;
        background: var(--gold);
        border: none;
        margin: 0 0 26px;
        opacity: .9;
    }
    .vh-text {
        font-size: clamp(15px, 1.15vw, 17px);
        line-height: 1.75;
        color: rgba(255,255,255,0.94);
        margin: 0 0 36px;
        max-width: 540px;
        text-shadow: 0 2px 12px rgba(0,0,0,.4);
    }
    .vh-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .vh-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 16px 32px;
        font-size: 10.5px;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-weight: 600;
        text-decoration: none;
        transition: background .3s ease, color .3s ease, transform .25s ease, box-shadow .3s ease, border-color .3s ease;
        border: 1px solid rgba(212, 184, 144, 0.55);
        line-height: 1.2;
        min-width: 200px;
        /* OD v1.18.9: autentický frosted glass — secesný feel */
        backdrop-filter: blur(14px) saturate(1.4);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
        position: relative;
        overflow: hidden;
        box-shadow:
            0 4px 18px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    /* Jemná zlatá horná línia (Jugendstil motív) */
    .vh-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(212, 184, 144, 0.85), transparent);
        opacity: 0;
        transition: opacity .35s ease, width .4s ease;
    }
    .vh-btn:hover::before,
    .vh-btn:focus::before {
        opacity: 1;
        width: 90%;
    }
    .vh-btn--primary {
        background: linear-gradient(135deg, rgba(212, 165, 116, 0.85), rgba(184, 149, 103, 0.8));
        color: #fff;
        border-color: rgba(255, 255, 255, 0.3);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    .vh-btn--primary:hover,
    .vh-btn--primary:focus {
        background: linear-gradient(135deg, rgba(212, 165, 116, 1), rgba(184, 149, 103, 0.95));
        color: #fff;
        border-color: rgba(255, 255, 255, 0.55);
        transform: translateY(-2px);
        box-shadow:
            0 10px 28px rgba(184, 149, 103, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    .vh-btn--secondary {
        background: rgba(20, 14, 10, 0.32);
        color: #f4ede2;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    }
    .vh-btn--secondary:hover,
    .vh-btn--secondary:focus {
        background: rgba(184, 149, 103, 0.25);
        color: #fff;
        border-color: rgba(212, 184, 144, 0.85);
        transform: translateY(-2px);
        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    /* ABOUT / HISTORY */
    .about-history { background: var(--cream); padding: 110px 40px; }
    .about-grid {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 80px;
        align-items: center;
    }
    .about-grid img, .about-grid > .fade-up:first-child {
        width: 100%;
        aspect-ratio: 4/5;
        object-fit: cover;
        box-shadow: 0 30px 60px -20px rgba(0,0,0,.25);
    }

    /* ─────────── ABOUT SLIDESHOW (multi-image cycling with transitions) ─────────── */
    .about-slideshow {
        position: relative;
        width: 100%;
        height: var(--about-h, 600px);
        max-height: var(--about-h, 600px);
        overflow: hidden;
        box-shadow: 0 30px 60px -20px rgba(0,0,0,.25);
        background: var(--cream);
    }
    /* Override above .about-grid img rule for slideshow children */
    .about-slideshow .about-slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
        transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.8,.2,1);
        will-change: opacity, transform;
    }
    .about-slideshow .about-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* default — prepisuje sa inline style z PHP (per-fotka fit) od v1.18.0 */
        object-position: center; /* default — prepisuje sa inline style z PHP (per-fotka position) od v1.18.0 */
        display: block;
        aspect-ratio: auto !important; /* prepíše .about-grid img pravidlo */
        box-shadow: none !important;
    }
    /* OD v1.18.0: keď je slide v `contain` móde, vypneme Ken Burns transforms
       (inak by sa zoomovala do prázdneho priestoru pásov a vyzerá to zle).
       Pekné krémové pozadie pásov je už nastavené na .about-slideshow vyššie. */
    .about-slideshow .about-slide[data-fit="contain"] img {
        transform: none !important;
        animation: none !important;
    }
    .about-slideshow .about-slide.is-active {
        opacity: 1;
        z-index: 2;
    }

    /* ── Transitions ── */
    /* FADE — opacity only (default) */
    .about-slideshow[data-transition="fade"] .about-slide {
        opacity: 0;
    }
    .about-slideshow[data-transition="fade"] .about-slide.is-active {
        opacity: 1;
    }

    /* SLIDE-LEFT — nový sa zasunie zprava */
    .about-slideshow[data-transition="slide-left"] .about-slide {
        transform: translateX(100%);
        opacity: 1;
    }
    .about-slideshow[data-transition="slide-left"] .about-slide.is-active {
        transform: translateX(0);
    }

    /* SLIDE-RIGHT — nový sa zasunie zľava */
    .about-slideshow[data-transition="slide-right"] .about-slide {
        transform: translateX(-100%);
        opacity: 1;
    }
    .about-slideshow[data-transition="slide-right"] .about-slide.is-active {
        transform: translateX(0);
    }

    /* ZOOM-IN — nový sa „priblíži" od malého */
    .about-slideshow[data-transition="zoom-in"] .about-slide {
        opacity: 0;
        transform: scale(.85);
    }
    .about-slideshow[data-transition="zoom-in"] .about-slide.is-active {
        opacity: 1;
        transform: scale(1);
    }

    /* ZOOM-OUT — nový sa „oddiali" od veľkého */
    .about-slideshow[data-transition="zoom-out"] .about-slide {
        opacity: 0;
        transform: scale(1.15);
    }
    .about-slideshow[data-transition="zoom-out"] .about-slide.is-active {
        opacity: 1;
        transform: scale(1);
    }

    /* FLIP — 3D otočenie */
    .about-slideshow[data-transition="flip"] {
        perspective: 1500px;
    }
    .about-slideshow[data-transition="flip"] .about-slide {
        opacity: 0;
        transform: rotateY(60deg);
        transform-origin: center;
    }
    .about-slideshow[data-transition="flip"] .about-slide.is-active {
        opacity: 1;
        transform: rotateY(0);
    }

    /* KEN-BURNS — nenahradzuje crossfade, aktívna fotka pomaly zoomuje a panuje.
       Použitý ako základ + ak je zapnutý "ken_burns" toggle, kombinuje s fade. */
    .about-slideshow[data-transition="ken-burns"] .about-slide {
        opacity: 0;
    }
    .about-slideshow[data-transition="ken-burns"] .about-slide.is-active {
        opacity: 1;
        animation: kk-about-kenburns 18s ease-in-out alternate infinite;
    }

    /* Globálny Ken Burns aj nad inými prechodmi (data-ken-burns="1") */
    .about-slideshow[data-ken-burns="1"][data-transition="fade"] .about-slide.is-active img,
    .about-slideshow[data-ken-burns="1"][data-transition="zoom-in"] .about-slide.is-active img,
    .about-slideshow[data-ken-burns="1"][data-transition="zoom-out"] .about-slide.is-active img {
        animation: kk-about-kenburns-img 18s ease-in-out alternate infinite;
    }

    @keyframes kk-about-kenburns {
        0%   { transform: scale(1.06) translate(-1%, 1%); }
        100% { transform: scale(1.18) translate(2%, -2%); }
    }
    @keyframes kk-about-kenburns-img {
        0%   { transform: scale(1.04) translate(-1%, 1%); }
        100% { transform: scale(1.12) translate(2%, -2%); }
    }
    .about-text .section-label {
        font-size: 11px;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 18px;
        font-weight: 500;
    }
    .about-text h3 {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(34px, 4vw, 50px);
        font-weight: 400;
        line-height: 1.15;
        color: var(--dark);
        margin-bottom: 28px;
    }
    .about-text p {
        font-size: 15px;
        line-height: 2;
        font-weight: 300;
        color: var(--text);
        margin-bottom: 18px;
    }

    /* MENU */
    .menu-section { background: #fff; padding: 90px 40px 30px; text-align: center; }
    .menu-section .section-label {
        font-size: 11px;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 18px;
        font-weight: 500;
    }
    .menu-section h2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(40px, 5vw, 64px);
        font-weight: 300;
        color: var(--dark);
        margin-bottom: 70px;
        letter-spacing: 1px;
    }
    .menu-grid {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        text-align: left;
    }
    .menu-col h4 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 28px;
        font-weight: 400;
        color: var(--dark);
        letter-spacing: 1px;
        margin-bottom: 6px;
    }
    .menu-col .col-meta {
        font-size: 10px;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 30px;
        font-weight: 500;
    }
    .menu-item {
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding: 16px 0;
        border-bottom: 1px dotted rgba(0,0,0,.12);
    }
    .menu-item:last-child { border-bottom: none; }
    .menu-name { font-size: 14.5px; color: var(--text); font-weight: 400; flex: 0 0 auto; }
    .menu-dots {
        flex: 1 1 auto;
        border-bottom: 1px dotted rgba(0,0,0,.2);
        transform: translateY(-4px);
    }
    .menu-price {
        font-family: 'Cormorant Garamond', serif;
        font-size: 18px;
        font-weight: 500;
        color: var(--gold-light);
        flex: 0 0 auto;
        letter-spacing: 1px;
    }
    .menu-cta {
        margin-top: 60px;
        display: inline-block;
        padding: 14px 38px;
        border: 1px solid var(--gold);
        color: var(--gold);
        text-decoration: none;
        font-size: 11px;
        letter-spacing: 3px;
        text-transform: uppercase;
        transition: background .3s, color .3s;
    }
    .menu-cta:hover { background: var(--gold); color: #fff; }

    /* Wrapper okolo flipbook keď je v menu sekcii (mode='flipbook' alebo 'both') */
    .menu-flipbook-wrap {
        margin: 20px auto 0;        /* dole 0 — kniha už má vlastný spodný shadow */
        max-width: 1200px;
    }
    .menu-flipbook-wrap .kormuth-flipbook-wrap {
        margin: 0 auto;
        padding: 0;
    }
    /* Pri 'both' móde skryjeme nadpis nad flipbookom (duplicitný s "Naše Menu") */
    .menu-flipbook-wrap .kormuth-flipbook-header { display: none; }
    /* Footer (page counter + Naplno button) — bez extra spodného marginu */
    .menu-flipbook-wrap .kormuth-flipbook-footer { margin-bottom: 0; padding-bottom: 8px; }

    /* INSTAGRAM */
    .insta-strip { background: #fff; padding: 90px 0 0; text-align: center; }
    .insta-strip .section-label {
        font-size: 16px;
        letter-spacing: 8px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 20px;
        font-weight: 600;
    }
    .insta-strip h2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(38px, 4.5vw, 58px);
        font-weight: 300; color: var(--dark); margin-bottom: 60px;
        letter-spacing: 1px;
    }
    .insta-strip h2 a { color: inherit; text-decoration: none; transition: color .2s; }
    .insta-strip h2 a:hover { color: var(--gold); }

    /* Mriežka — počet stĺpcov, max-width, gap a aspect ratio ovládané CSS premennými */
    .insta-row {
        display: grid;
        grid-template-columns: repeat(var(--insta-cols, 3), 1fr);
        gap: var(--insta-gap, 0px);
        max-width: var(--insta-max-w, 900px);
        margin: 0 auto;
        padding: 0 20px;
    }
    .insta-row .insta-cell {
        position: relative;
        aspect-ratio: var(--insta-aspect, 1/1);
        overflow: hidden;
        cursor: pointer;
        /* Cream pozadie sa ukáže pri 'contain' móde (letterbox padding) */
        background: var(--cream);
    }
    .insta-row .insta-cell img {
        position: absolute;
        inset: 0;
        width: 100%; height: 100%;
        /* default: 'contain' = celá fotka viditeľná */
        object-fit: contain;
        object-position: center;
        transition: filter .3s;
    }
    /* Mód 'cover' (Instagram profil štýl — orezané do štvorca) */
    .insta-row[data-fit="cover"] .insta-cell img {
        object-fit: cover;
    }

    /* Hover — defaultne ŽIADNE zväčšenie ani filter */
    .insta-row[data-hover="darken"] .insta-cell::after {
        content: '';
        position: absolute; inset: 0;
        background: rgba(184,149,103,0);
        transition: background .35s;
    }
    .insta-row[data-hover="darken"] .insta-cell:hover img { filter: brightness(.85); }
    .insta-row[data-hover="darken"] .insta-cell:hover::after { background: rgba(184,149,103,0.3); }

    /* MAP */
    .map-strip { position: relative; height: 380px; width: 100%; }
    .map-strip iframe {
        width: 100%; height: 100%;
        border: 0; display: block;
        filter: grayscale(0.2) contrast(1.05);
    }
    .map-overlay {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255,255,255,.96);
        padding: 30px 44px;
        box-shadow: 0 20px 60px rgba(0,0,0,.18);
        text-align: center;
        max-width: 90%;
    }
    .map-overlay h4 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 26px; font-weight: 400; color: var(--dark);
        margin-bottom: 6px; letter-spacing: 1px;
    }
    .map-overlay p { font-size: 13px; color: var(--text); margin-bottom: 16px; letter-spacing: .5px; }
    .map-btn {
        display: inline-block;
        padding: 11px 28px;
        background: var(--gold);
        color: #fff;
        text-decoration: none;
        font-size: 11px;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        transition: background .25s;
    }
    .map-btn:hover { background: var(--peach-dark); }

    /* ─────────── DECORATED MAP (Turandot style) ─────────── */
    .map-decorated {
        position: relative;
        width: 100%;
        /* min-height, padding-top/bottom, background-position sa nastavujú inline z PHP */
        background-size: cover;
        background-repeat: no-repeat;
        padding-left: 24px;
        padding-right: 24px;
        overflow: hidden;
        isolation: isolate;
    }
    .map-decorated__darken {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }
    .map-decorated__container {
        position: relative;
        z-index: 1;
        max-width: 1500px;
        margin: 0 auto;
    }
    .map-decorated__header {
        text-align: center;
        margin-bottom: 50px;
        color: #fff;
    }
    .map-decorated__eyebrow {
        font-size: 11px;
        letter-spacing: 5px;
        text-transform: uppercase;
        font-weight: 500;
        color: var(--gold);
        margin: 0 0 14px;
        text-shadow: 0 2px 8px rgba(0,0,0,.4);
    }
    .map-decorated__title {
        font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
        font-weight: 300;
        font-size: clamp(28px, 4vw, 42px);
        line-height: 1.2;
        margin: 0;
        color: #fff;
        text-shadow: 0 4px 18px rgba(0,0,0,.45);
        letter-spacing: 1px;
    }

    /* Stage — mapa + info kartička */
    .map-decorated__stage {
        position: relative;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        /* Stage sa prispôsobí výške sekcie — neforcuje sekciu byť vyššia.
           Použijeme aspect-ratio AKO náznak, ale konkrétna výška sa orežne
           podľa toho čo zostane v sekcii po hlavičke a pätke. */
        aspect-ratio: 16 / 9;
        height: auto;
        max-height: 70vh;       /* nikdy vyššie ako 70% obrazovky */
        min-height: 320px;      /* ale aspoň 320 px aby bola mapa použiteľná */
        border-radius: 4px;
        overflow: hidden;
        box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.25);
    }
    .map-decorated__iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        filter: grayscale(0.15) contrast(1.05);
    }

    /* ─────────── LEAFLET INTERACTIVE MAP ─────────── */
    .map-decorated__leaflet {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: #e8e2d6;
        z-index: 1;
    }
    /* Override Leaflet defaults pre lepší vzhľad v decorated stage */
    .map-decorated__leaflet .leaflet-control-zoom a {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(6px);
        color: #2a2520;
        border: 1px solid rgba(184, 149, 103, 0.3);
        font-weight: 400;
    }
    .map-decorated__leaflet .leaflet-control-zoom a:hover {
        background: var(--gold);
        color: #fff;
    }
    .map-decorated__leaflet .leaflet-control-attribution {
        background: rgba(255, 255, 255, 0.7);
        font-size: 10px;
    }
    /* Custom HTML marker */
    .kk-marker {
        background: none !important;
        border: none !important;
        width: 56px !important;
        height: 70px !important;
    }
    .kk-marker-inner {
        width: 56px !important;
        height: 56px !important;
        background: linear-gradient(135deg, var(--gold) 0%, #d4a574 100%);
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: kk-marker-bounce 2.5s ease-in-out infinite;
    }
    .kk-marker-inner img {
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        min-width: 0 !important;
        transform: rotate(45deg);
        border-radius: 50%;
        background: #fff;
        padding: 3px;
        object-fit: contain;
        display: block;
    }
    .kk-marker-dot {
        background: var(--gold);
    }
    .kk-marker-dot::after {
        content: "";
        width: 14px; height: 14px;
        background: #fff;
        border-radius: 50%;
        transform: rotate(45deg);
    }
    @keyframes kk-marker-bounce {
        0%, 100% { transform: rotate(-45deg) translateY(0); }
        50%      { transform: rotate(-45deg) translateY(-6px); }
    }
    /* Popup */
    .kk-leaflet-pop {
        font-family: 'Jost', sans-serif;
        font-size: 13px;
        line-height: 1.6;
        min-width: 180px;
    }
    .kk-leaflet-pop strong {
        font-family: 'Cormorant Garamond', serif;
        font-size: 18px;
        color: var(--dark);
        font-weight: 400;
        display: block;
        margin-bottom: 4px;
    }
    .kk-leaflet-pop span { color: #666; font-size: 12px; }
    .kk-leaflet-pop a {
        display: inline-block;
        margin-top: 8px;
        padding: 6px 12px;
        background: var(--gold);
        color: #fff !important;
        text-decoration: none;
        font-size: 10.5px;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-weight: 600;
        border-radius: 2px;
    }
    .kk-leaflet-pop a:hover { background: var(--peach-dark); }

    /* Click-to-interact hint */
    .map-decorated__hint {
        position: absolute;
        bottom: 18px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(20, 15, 10, 0.78);
        backdrop-filter: blur(8px);
        color: #fff;
        padding: 9px 18px;
        border-radius: 100px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Jost', sans-serif;
        font-size: 12px;
        letter-spacing: 1.5px;
        z-index: 500; /* nad Leaflet */
        pointer-events: none;
        opacity: 1;
        transition: opacity .4s ease, transform .4s ease;
    }
    .map-decorated__hint svg {
        width: 16px; height: 16px;
        color: var(--gold);
    }
    .map-decorated__hint.is-hidden {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

    /* Layer toggle (Mapa / Satelit) */
    .map-decorated__layers {
        position: absolute;
        top: 14px; right: 14px;
        z-index: 500;
        display: flex;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(8px);
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
        border: 1px solid rgba(184, 149, 103, 0.3);
    }
    .kk-map-layer {
        background: none;
        border: 0;
        padding: 8px 14px;
        font-family: 'Jost', sans-serif;
        font-size: 11px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        font-weight: 500;
        color: #2a2520;
        cursor: pointer;
        transition: background .25s, color .25s;
    }
    .kk-map-layer:hover { background: rgba(184, 149, 103, 0.12); }
    .kk-map-layer.is-active {
        background: var(--gold);
        color: #fff;
    }

    /* Info kartička — popup nad mapou (vľavo dole, ako v Turandote) */
    .map-decorated__card {
        position: absolute;
        left: 32px;
        top: 50%;
        transform: translateY(-50%);
        width: 360px;
        max-width: calc(100% - 64px);
        max-height: calc(100% - 40px);
        overflow-y: auto;
        background: rgba(255,255,255,0.97);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        padding: 24px 26px 26px;
        border-radius: 6px;
        box-shadow: 0 8px 30px rgba(0,0,0,.18);
        font-family: 'Jost', sans-serif;
        animation: kk-card-in .8s cubic-bezier(.2,.8,.2,1) both;
        animation-delay: .4s;
    }
    @keyframes kk-card-in {
        from { opacity: 0; transform: translateY(-50%) translateX(-20px); }
        to   { opacity: 1; transform: translateY(-50%) translateX(0); }
    }
    .map-decorated__card-close {
        position: absolute;
        top: 8px; right: 10px;
        width: 26px; height: 26px;
        border: none;
        background: transparent;
        font-size: 22px;
        line-height: 1;
        color: #999;
        cursor: pointer;
        border-radius: 50%;
        transition: background .2s, color .2s;
    }
    .map-decorated__card-close:hover { background: #eee; color: #333; }

    .card-name {
        font-family: 'Cormorant Garamond', serif;
        font-size: 24px;
        font-weight: 400;
        color: var(--dark);
        margin: 0 0 2px;
        letter-spacing: .5px;
    }
    .card-subname {
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #888;
        margin: 0 0 12px;
    }
    .card-rating-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        font-size: 13px;
        margin-bottom: 6px;
    }
    .card-stars {
        color: var(--gold);
        letter-spacing: 1px;
        font-size: 14px;
    }
    .card-rating-num {
        font-weight: 600;
        color: var(--dark);
    }
    .card-rating-count {
        color: #999;
        font-size: 12px;
    }
    .card-status {
        margin-left: auto;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .card-status.is-open    { color: #2c8a3a; }
    .card-status.is-closed  { color: #b85a4a; }

    .card-divider {
        border: 0;
        border-top: 1px solid #eee;
        margin: 14px 0 12px;
    }

    .card-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
        color: var(--text);
        margin: 0 0 8px;
        line-height: 1.45;
    }
    .card-row a { color: inherit; text-decoration: none; border-bottom: 1px dashed transparent; transition: border-color .2s; }
    .card-row a:hover { border-bottom-color: var(--gold); }
    .card-ico {
        width: 14px; height: 14px;
        color: var(--gold);
        flex-shrink: 0;
        margin-top: 2px;
    }

    .card-hours-title {
        font-family: 'Jost', sans-serif;
        font-size: 10.5px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--gold);
        margin: 0 0 10px;
        font-weight: 600;
    }
    .card-hours {
        list-style: none;
        padding: 0;
        margin: 0 0 18px;
    }
    .card-hours li {
        display: flex;
        justify-content: space-between;
        font-size: 12.5px;
        padding: 4px 0;
        border-bottom: 1px solid rgba(0,0,0,.04);
    }
    .card-hours li:last-child { border-bottom: 0; }
    .hours-day  { color: var(--text); font-weight: 500; }
    .hours-time { color: #777; font-variant-numeric: tabular-nums; }

    .card-cta {
        display: block;
        text-align: center;
        background: var(--gold);
        color: #fff !important;
        text-decoration: none;
        padding: 12px 18px;
        font-size: 10.5px;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-weight: 600;
        transition: background .25s, transform .2s;
        border-radius: 2px;
    }
    .card-cta:hover {
        background: var(--peach-dark);
        transform: translateY(-1px);
    }

    /* Decoratívna pätka */
    .map-decorated__footer {
        text-align: center;
        margin-top: 70px;
        color: rgba(255,255,255,0.85);
    }
    .map-decorated__brand-logo {
        height: var(--map-logo-h, 90px) !important;
        max-height: var(--map-logo-h, 90px) !important;
        width: auto !important;
        max-width: 100%;
        opacity: 0.92;
        filter: drop-shadow(0 6px 16px rgba(0,0,0,.4));
        transition: height .25s ease;
        display: inline-block;
    }
    .map-decorated__brand-tag {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        font-size: 14px;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin: 14px 0 0;
        color: rgba(255,255,255,0.85);
        text-shadow: 0 2px 8px rgba(0,0,0,.5);
    }
}

/* ════════════════════ FOOTER ════════════════════ */
@layer footer {
    .kormuth-page footer {
        position: relative;
        /* Theme-aware gradient — premenné `--footer-bg` / `--footer-bg-2` flipujú */
        background: linear-gradient(180deg,
            var(--footer-bg-1, #fffaf2) 0%,
            var(--footer-bg-2, #fff7ec) 60%,
            var(--footer-bg-3, #fdf4e6) 100%);
        color: var(--footer-text, var(--text));
        padding: 0 40px 30px;
        border-top: none;
        overflow: hidden;
    }
    /* Decoratívne pozadie: jemný kruh zo zlatého tieňa v rohoch */
    .kormuth-page footer::before {
        content: "";
        position: absolute;
        top: -180px; left: -120px;
        width: 420px; height: 420px;
        background: radial-gradient(circle, rgba(184,149,103,0.08) 0%, transparent 70%);
        pointer-events: none;
    }
    .kormuth-page footer::after {
        content: "";
        position: absolute;
        bottom: -180px; right: -120px;
        width: 420px; height: 420px;
        background: radial-gradient(circle, rgba(184,149,103,0.06) 0%, transparent 70%);
        pointer-events: none;
    }

    /* ─────────── Ornament divider na vrchu ─────────── */
    .footer-ornament {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        padding: 36px 0 50px;
        position: relative;
    }
    .footer-ornament-line {
        flex: 1;
        max-width: 200px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
        opacity: 0.6;
    }
    .footer-ornament-mark {
        font-family: 'Cormorant Garamond', serif;
        font-size: 28px;
        color: var(--gold);
        line-height: 1;
        text-shadow: 0 2px 8px rgba(184,149,103,0.25);
        user-select: none;
    }

    .footer-grid {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.3fr 1fr 1fr 1fr;
        gap: 56px;
        margin-bottom: 50px;
        position: relative;
        z-index: 1;
    }
    .footer-brand img {
        width: 140px;
        margin-bottom: 20px;
        filter: drop-shadow(0 4px 14px rgba(0,0,0,0.10));
    }
    .footer-brand-tag {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        font-size: 14.5px;
        color: #6b6058;
        line-height: 1.8;
        max-width: 280px;
        letter-spacing: 0.3px;
    }

    .footer-col h4 {
        font-family: 'Jost', sans-serif;
        font-size: 11px;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 600;
        /* Reserve height for max 2 lines so all stĺpce h4 majú rovnakú výšku
           a content pod nimi začína na rovnakej Y pozícii. */
        min-height: 50px;
        margin: 0 0 24px;
        padding: 0 0 12px;
        position: relative;
        line-height: 1.6;
    }
    /* Zlatý mikro-divider pod každým h4 — vždy pod posledným riadkom textu */
    .footer-col h4::after {
        content: "";
        position: absolute;
        bottom: 0; left: 0;
        width: 32px; height: 1px;
        background: var(--gold);
        opacity: 0.55;
    }

    .footer-col p, .footer-col a, .footer-col address, .footer-col li {
        font-style: normal;
        font-size: 13.5px;
        line-height: 1.9;
        color: var(--text);
        text-decoration: none;
        font-weight: 300;
    }
    /* ZÁKLADNÝ alignment: vždy zarovnané s ľavým okrajom stĺpca (pod H4) */
    .footer-col ul,
    .footer-col .footer-contact,
    .footer-col .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .footer-col ul li,
    .footer-col .footer-links li {
        margin: 0 0 6px;
        padding: 0;
    }

    /* Kontakt — čisté riadky bez ikoniek, aby Sedlárska začínala pod K */
    .footer-contact { margin: 0; }
    .footer-line {
        margin: 0 0 4px;
        font-size: 13.5px;
        line-height: 1.7;
        color: var(--text);
    }
    .footer-line--spaced { margin-top: 14px; }
    .footer-line a {
        color: inherit;
        position: relative;
    }

    /* Hover s podčiarknutím vo zlatej */
    .footer-col a {
        position: relative;
        transition: color .25s ease;
    }
    .footer-col a::after {
        content: "";
        position: absolute;
        left: 0; bottom: -2px;
        width: 0; height: 1px;
        background: var(--gold);
        transition: width .3s ease;
    }
    .footer-col a:hover {
        color: var(--gold);
    }
    .footer-col a:hover::after {
        width: 100%;
    }

    /* Otváracie hodiny */
    .hours-row {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        padding: 5px 0;
        border-bottom: 1px solid rgba(184,149,103,0.10);
    }
    .hours-row:last-child { border-bottom: 0; }
    .hours-row span:first-child {
        font-weight: 400;
        color: var(--text);
    }
    .hours-row span:last-child {
        color: #999;
        font-variant-numeric: tabular-nums;
        font-size: 12.5px;
    }

    /* ════════════════ 365-day BADGE (od v1.18.2) ════════════════
       Marketingový tag pod hodinami: „Otvorené 365 dní v roku" — gold italic,
       centrované, s jemnou ornamentálnou linkou pred aj za (decoratívne).
       Štyly idú s pohodlným kontrastom v light aj dark mode. */
    .hours-365-badge {
        margin: 14px 0 0;
        padding: 10px 0 0;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-style: italic;
        font-size: 13.5px;
        font-weight: 400;
        text-align: center;
        color: var(--gold);
        letter-spacing: 0.04em;
        position: relative;
        line-height: 1.3;
        opacity: 0.92;
    }
    /* Jemná zlatá linka NAD badge — separuje od tabuľky hodín */
    .hours-365-badge::before {
        content: "";
        display: block;
        width: 36px;
        height: 1px;
        margin: 0 auto 10px;
        background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
        opacity: 0.55;
    }

    /* Sociálne ikony — pekné kruhy so zlatým ringom + hover fill */
    .socials {
        display: flex;
        gap: 14px;
        margin-top: 24px;
    }
    .socials a {
        width: 40px; height: 40px;
        border: 1px solid rgba(184,149,103,0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gold);
        background: rgba(255,255,255,0.6);
        transition: all .3s ease;
    }
    .socials a:hover {
        background: var(--gold);
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(184,149,103,0.35);
        border-color: var(--gold);
    }
    .socials svg { width: 16px; height: 16px; }

    /* ─────────── Footer bottom — copyright s ornamentom ─────────── */
    .footer-bottom {
        max-width: 1200px;
        margin: 30px auto 0;
        padding-top: 28px;
        border-top: 1px solid rgba(184,149,103,0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        font-family: 'Jost', sans-serif;
        font-size: 11.5px;
        color: #8a7d72;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        position: relative;
        z-index: 1;
    }
    .footer-bottom-mark {
        color: var(--gold);
        font-size: 14px;
        opacity: 0.7;
    }
    .footer-bottom-text {
        text-align: center;
    }
}

/* ════════════════════ MUSIC PLAYER ════════════════════ */
@layer player {
    .music-player {
        position: fixed;
        bottom: 22px;
        left: 22px;
        z-index: 90;
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(255,255,255,0.96);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        padding: 10px 16px 10px 10px;
        border-radius: 100px;
        box-shadow: 0 10px 30px rgba(0,0,0,.15);
        transition: transform .35s, opacity .35s;
    }
    .music-toggle {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: var(--gold) !important;
        color: #fff !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer;
        transition: background .2s, transform .2s;
        padding: 0 !important;
        flex-shrink: 0;
    }
    .music-toggle:hover {
        background: var(--peach-dark) !important;
        transform: scale(1.08);
    }
    .music-toggle svg {
        width: 16px !important;
        height: 16px !important;
        fill: #fff !important;
        display: block !important;
    }
    .music-toggle svg path { fill: #fff !important; }
    .music-info {
        font-family: 'Cormorant Garamond', serif;
        font-size: 14px;
        color: var(--dark);
        letter-spacing: .5px;
    }
    .music-info small {
        display: block;
        font-family: 'Jost', sans-serif;
        font-size: 9.5px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 1px;
    }
    .music-pulse {
        display: inline-flex;
        gap: 2px;
        align-items: flex-end;
        height: 12px;
        margin-left: 8px;
    }
    .music-pulse span {
        width: 2px;
        background: var(--gold);
        border-radius: 1px;
        animation: kk-pulse 1.1s ease-in-out infinite;
    }
    .music-pulse span:nth-child(1) { height: 6px;  animation-delay: 0s; }
    .music-pulse span:nth-child(2) { height: 10px; animation-delay: .15s; }
    .music-pulse span:nth-child(3) { height: 4px;  animation-delay: .3s; }
    .music-pulse span:nth-child(4) { height: 8px;  animation-delay: .45s; }
    .music-player.paused .music-pulse span { animation-play-state: paused; opacity: .35; }
    @keyframes kk-pulse {
        0%, 100% { transform: scaleY(0.4); }
        50%      { transform: scaleY(1.2); }
    }

    /* Vizuálna výzva keď browser zablokuje autoplay */
    #kk-audio-hint {
        position: absolute;
        top: 50%;
        left: calc(100% + 12px);
        transform: translateY(-50%);
        background: var(--dark);
        color: #fff;
        padding: 8px 14px 8px 12px;
        border-radius: 100px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Jost', sans-serif;
        font-size: 12px;
        letter-spacing: .5px;
        white-space: nowrap;
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        animation: kk-hint-in .35s ease both, kk-hint-bounce 2.5s ease-in-out infinite 1s;
        z-index: 91;
    }
    #kk-audio-hint::before {
        content: '';
        position: absolute;
        left: -5px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 10px; height: 10px;
        background: var(--dark);
    }
    .kk-audio-hint-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--gold);
        animation: kk-hint-dot 1.2s ease-in-out infinite;
    }
    @keyframes kk-hint-dot {
        0%, 100% { box-shadow: 0 0 0 0 rgba(184,149,103,.6); }
        50%      { box-shadow: 0 0 0 6px rgba(184,149,103,0); }
    }
    @keyframes kk-hint-in {
        from { opacity: 0; transform: translate(-8px, -50%); }
        to   { opacity: 1; transform: translate(0,    -50%); }
    }
    @keyframes kk-hint-bounce {
        0%, 100% { translate: 0; }
        50%      { translate: 4px; }
    }
    #kk-audio-hint.kk-fade-out {
        opacity: 0;
        transition: opacity .35s ease;
    }
}

/* ════════════════════ ANIMATIONS ════════════════════ */
@layer anim {
    .fade-up {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 1s ease, transform 1s ease;
    }
    .fade-up.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ════════════════════ MODERN PROGRESSIVE ENHANCEMENTS ════════════════════
   Tieto sa zapnú LEN v moderných prehliadačoch (Chrome 115+, Safari 17+, FF 121+).
   V starších prehliadačoch sa správanie zachová cez JS fallback. */
@layer modern {

    /* 1. Scroll-driven animation pre nav background — bez JS scroll listenera.
          Používa admin premenné z header.php (--nav-glass-bg, --nav-glass-blur, --nav-glass-txt).
          Hardkódované hodnoty (0.97 atď.) sa odstránili lebo prepisovali admin nastavenia. */
    @supports (animation-timeline: scroll()) {
        @keyframes kk-nav-fill {
            from {
                background: rgba(255,255,255,0);
                backdrop-filter: blur(0);
                -webkit-backdrop-filter: blur(0);
                padding: 18px 40px;
                box-shadow: 0 0 0 rgba(0,0,0,0);
                border-bottom-color: transparent;
            }
            to {
                background: var(--nav-glass-bg, rgba(255, 248, 238, 0.18));
                backdrop-filter: blur(var(--nav-glass-blur, 18px)) saturate(180%);
                -webkit-backdrop-filter: blur(var(--nav-glass-blur, 18px)) saturate(180%);
                padding: 10px 40px;
                box-shadow: 0 8px 32px rgba(20, 15, 10, 0.10);
                border-bottom-color: rgba(184, 149, 103, 0.22);
            }
        }
        .kk-nav {
            animation: kk-nav-fill linear both;
            animation-timeline: scroll(root block);
            animation-range: 0 200px;
            border-bottom: 1px solid transparent;
        }
        @keyframes kk-nav-text {
            from { color: #fff; mix-blend-mode: difference; }
            to   { color: var(--nav-glass-txt, #2a2520); mix-blend-mode: normal; }
        }
        .kk-nav .nav-links a,
        .kk-nav .lang-btn {
            animation: kk-nav-text linear both;
            animation-timeline: scroll(root block);
            animation-range: 0 200px;
        }
    }

    /* 2. Vstupná animácia nav pri načítaní stránky — @starting-style */
    @supports (transition-behavior: allow-discrete) {
        @starting-style {
            .kk-nav {
                transform: translateY(-100%);
                opacity: 0;
            }
        }
        .kk-nav {
            transform: translateY(0);
            opacity: 1;
            transition: transform .6s ease, opacity .6s ease, background .4s, padding .4s, box-shadow .4s;
        }
    }

    /* 3. content-visibility pre sekcie pod ohybom — rýchlejší render */
    @supports (content-visibility: auto) {
        .about-history,
        .menu-section,
        .insta-strip,
        .kormuth-page footer {
            content-visibility: auto;
            contain-intrinsic-size: 800px;
        }
    }

    /* 4. :has() — keď je v music-playeri prehrávané audio, pridáme glow */
    @supports selector(:has(*)) {
        .music-player:has(audio:not([paused])) {
            box-shadow: 0 10px 30px rgba(184,149,103,.35);
        }
    }

    /* 5. View Transitions API — plynulý prechod pri zmene jazyka */
    @supports (view-transition-name: none) {
        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation-duration: .4s;
        }
    }

    /* 6. Reduced motion respect */
    @media (prefers-reduced-motion: reduce) {
        .kk-nav,
        .kk-nav .nav-links a,
        .kk-nav .lang-btn {
            animation: none !important;
        }
        .fade-up { transition: none; opacity: 1; transform: none; }
        .music-pulse span { animation: none !important; }
    }
}

/* ════════════════════ RESPONSIVE ════════════════════ */
@layer responsive {
    @media (max-width: 900px) {
        .kk-nav { padding: 14px 18px; }
        .kk-nav .nav-links { gap: 16px; }
        .kk-nav .nav-links a { font-size: 10px; letter-spacing: 1.5px; }
        .kk-nav .lang-btn { padding: 4px 6px; font-size: 9.5px; }
        .kk-nav .lang-btn span:not(.flag) { display: none; }
        .hero { grid-template-columns: 1fr; }
        .hero-right { min-height: 60vh; }
        .hero-left { padding: 70px 28px; min-height: 60vh; }
        .parallax-interior .title-block { left: 24px; right: 24px; gap: 18px; }
        .parallax-interior .logo-emblem { width: 70px; }
        .parallax-interior .title { font-size: 38px; }
        .triple-gallery { grid-template-columns: 1fr; }
        .brand-title-row { gap: 24px; }
        .brand-divider { display: none; }
        .brand-meta { gap: 30px; flex-wrap: wrap; }
        /* Video hero — mobil */
        .video-hero { height: auto; min-height: 100vh; }
        .vh-container { padding: 80px 24px; }
        .vh-content { max-width: 100%; }
        .vh-title { font-size: clamp(36px, 9vw, 56px); }
        .vh-buttons { flex-direction: column; }
        .vh-btn { width: 100%; min-width: 0; }
        .about-grid { grid-template-columns: 1fr; gap: 40px; }
        .menu-grid { grid-template-columns: 1fr; gap: 50px; }
        .insta-row { grid-template-columns: repeat(min(var(--insta-cols, 3), 3), 1fr); }
        .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
        .map-overlay { padding: 22px 30px; }
        /* Decorated map — mobil: kartička pod mapou namiesto na nej.
           min-height a paddingy nechávame admin slidery z inline štýlu. */
        .map-decorated__stage {
            aspect-ratio: auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            background: rgba(255,255,255,.97);
        }
        .map-decorated__iframe { position: relative; inset: auto; height: 360px; }
        .map-decorated__card {
            position: relative;
            top: auto; left: auto;
            transform: none;
            width: 100%;
            max-width: 100%;
            max-height: none;
            animation: none;
            background: #fff;
            box-shadow: none;
            border-radius: 0;
        }
        .map-decorated__brand-logo {
            /* Na mobile rešpektujeme admin nastavenie, ale s rozumným stropom. */
            height: min(var(--map-logo-h, 90px), 80px) !important;
            max-height: min(var(--map-logo-h, 90px), 80px) !important;
        }
        .music-player { bottom: 12px; left: 12px; padding: 8px 12px 8px 8px; }
        .music-info { display: none; }
    }
    @media (max-width: 500px) {
        .footer-grid { grid-template-columns: 1fr; }
        .insta-row { grid-template-columns: repeat(2, 1fr); }
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   ASTRA OVERRIDES — najvyššia priorita
   ════════════════════════════════════════════════════════════════════════════
   Astra preráža farby liniek cez CSS premennú --ast-global-color-1 v
   `a:hover, a:focus` selektore z theme.css. Riešenie:
   1) Override premennej v scope .kormuth-page (najčistejší spôsob)
   2) Silnejšie selektory pre všetky link stavy (:link, :visited, :hover, :focus, :active)
   3) !important ako poistka */
/* ════════════════════ THEME-DARK OVERRIDES ════════════════════
   Override-y konkrétnych sekcií ktoré majú hardcoded svetlé pozadia
   (alebo používajú --cream ktorá zostáva svetlá). Layer beží PRED
   astra-override, takže Astra špecificita nás neprebije, ale naše
   pôvodné pravidlá v iných layeroch áno.

   Filozofia: ponecháme `--cream`, `--dark`, `--peach`, `--gold` ako
   brand konstanty. Tu len prefarbujeme sekcie ktoré obsahujú TEXT
   (cards, footer, gallery, instagram, menu). Sekcie s obrázkom
   (hero, video-hero, parallax, map) sa nemenia — fotky majú vlastné. */
@layer theme-dark {
    [data-theme="dark"] {

        /* ─── Brand section (logo + meta info pod hero) ─── */
        .kormuth-page .brand-section {
            background: var(--section-bg);
            color: var(--text);
        }

        /* ─── About — história sekcia ─── */
        .kormuth-page .about-history {
            background: var(--about-bg);
            color: var(--text);
        }
        .kormuth-page .about-history h2,
        .kormuth-page .about-history h3 {
            color: var(--text);
        }

        /* ─── Menu sekcia (titul + flipbook wrapper) ─── */
        .kormuth-page .menu-section {
            background: var(--section-bg);
            color: var(--text);
        }
        .kormuth-page .menu-section h2,
        .kormuth-page .menu-section .menu-eyebrow {
            color: var(--text);
        }

        /* ─── Instagram strip ─── */
        .kormuth-page .insta-strip {
            background: var(--insta-bg);
            color: var(--text);
        }
        .kormuth-page .insta-strip h2,
        .kormuth-page .insta-strip .section-label {
            color: var(--text);
        }

        /* ─── Cykliaca galéria (gallery-cycle) ─── */
        .kormuth-page .gallery-cycle {
            background: var(--gallery-bg);
        }

        /* ─── Footer ─── */
        .kormuth-page .kk-footer,
        .kormuth-page footer.kk-footer {
            background: var(--footer-bg);
            color: var(--footer-text);
        }
        .kormuth-page .kk-footer h4,
        .kormuth-page .kk-footer h3,
        .kormuth-page .kk-footer .footer-col h4 {
            color: var(--footer-text);
        }
        .kormuth-page .kk-footer a {
            color: var(--footer-text);
        }
        .kormuth-page .kk-footer a:hover {
            color: var(--gold);
        }

        /* ─── Music player ─── */
        .kormuth-page .music-player {
            background: var(--music-bg);
            color: var(--music-text);
        }
        .kormuth-page .music-player .track-title,
        .kormuth-page .music-player .track-artist {
            color: var(--music-text);
        }

        /* ─── Nav (transparent na top, glass keď scrolled) ─── */
        .kormuth-page .kk-nav.scrolled {
            background: var(--nav-fallback-bg) !important;
            color: var(--text);
        }
        .kormuth-page .kk-nav.scrolled .nav-links a {
            color: var(--text);
        }
        .kormuth-page .kk-nav.scrolled .nav-links a:hover,
        .kormuth-page .kk-nav.scrolled .nav-links a.is-active {
            color: var(--gold);
        }

        /* ─── Generic sekcia background fallback pre cokoľvek čo používa #fff alebo --cream ─── */
        .kormuth-page section[class*="-section"]:not(.hero):not(.parallax-interior):not(.video-hero):not(.map-decorated),
        .kormuth-page .content-section {
            background: var(--section-bg);
            color: var(--text);
        }

        /* ─── Inštagram bunky + cards — invertuj svetlé pozadia ─── */
        .kormuth-page .insta-cell,
        .kormuth-page .gallery-cell {
            background: var(--section-bg-alt);
        }

        /* ─── WordPress / Astra body bg — prerazí Astra theme cez astra-override layer nižšie ─── */
        body.kormuth-page {
            background: var(--page-bg);
            color: var(--text);
        }

        /* ─── Mapa pozadie sekcia (decorated map sa rolovaním otvára nadol) ─── */
        .kormuth-page .map-decorated::before {
            background: linear-gradient(180deg, var(--page-bg) 0%, transparent 30%, transparent 70%, var(--page-bg) 100%);
        }
    }
}

/* ════════════════════ ASTRA OVERRIDE ════════════════════ */
@layer astra-override {

    /* 1) Override Astra CSS premennej v scope našej stránky.
       Touto jedinou premennou Astra rieši VŠETKY hover/focus farby liniek.
       Premenovať ju z modrej na našu --gold = celá Astra hover farba je zlatá. */
    body.kormuth-page {
        --ast-global-color-1: var(--gold);
        --ast-global-color-0: var(--text);
        --ast-link-color: var(--gold);
        --ast-link-hover-color: var(--peach-dark);
    }

    /* 1a) Body pozadie + text — Astra má vlastné, my musíme prebiť */
    html[data-theme="dark"] body.kormuth-page,
    body.kormuth-page[data-theme="dark"] {
        background: var(--page-bg) !important;
        color: var(--text) !important;
    }
    html[data-theme="light"] body.kormuth-page,
    body.kormuth-page[data-theme="light"] {
        background: var(--page-bg) !important;
        color: var(--text) !important;
    }

    /* THEME TOGGLE + LANG SWITCHER — Astra alebo browser default styling na <button>
       prerážalo naše transparentné pozadia (unlayered pravidlá majú prioritu
       nad layered). Bezpečné riešenie: !important v astra-override layeri. (od v1.17.3) */
    body.kormuth-page nav.kk-nav .theme-toggle,
    body.kormuth-page nav.kk-nav .theme-toggle:hover,
    body.kormuth-page nav.kk-nav .theme-toggle:focus,
    body.kormuth-page nav.kk-nav .theme-toggle:active,
    body.kormuth-page nav.kk-nav .lang-btn,
    body.kormuth-page nav.kk-nav .lang-btn:hover,
    body.kormuth-page nav.kk-nav .lang-btn:focus,
    body.kormuth-page nav.kk-nav .lang-btn:active,
    body.kormuth-page nav.kk-nav .lang-switcher,
    body.kormuth-page nav.kk-nav.scrolled .theme-toggle,
    body.kormuth-page nav.kk-nav.scrolled .lang-btn,
    body.kormuth-page nav.kk-nav.scrolled .lang-switcher {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Active vlajka — ponechať len gold outline na .fi (cez box-shadow, nie border) */
    body.kormuth-page nav.kk-nav .lang-btn.active .fi {
        box-shadow: 0 0 0 1.5px var(--gold), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    }

    /* NAV bullety — Astra niekedy dáva ::before "•" alebo list-style: disc na <li>.
       Túto kosmetiku treba zničiť explicitne, lebo .nav-links { list-style: none }
       v nav layer-i Astra dokáže preraziť cielenejším selektorom. (od v1.17.2) */
    body.kormuth-page nav.kk-nav .nav-links,
    body.kormuth-page nav.kk-nav .nav-links li,
    body.kormuth-page footer .footer-links,
    body.kormuth-page footer .footer-links li {
        list-style: none !important;
        padding-left: 0 !important;
        background-image: none !important;
    }
    body.kormuth-page nav.kk-nav .nav-links li::before,
    body.kormuth-page nav.kk-nav .nav-links li::marker,
    body.kormuth-page footer .footer-links li::before,
    body.kormuth-page footer .footer-links li::marker {
        content: none !important;
        display: none !important;
    }

    /* 2) NAV — všetky stavy linky */
    body.kormuth-page nav.kk-nav .nav-links a,
    body.kormuth-page nav.kk-nav .nav-links a:link,
    body.kormuth-page nav.kk-nav .nav-links a:visited,
    body.kormuth-page nav.kk-nav .nav-links a:hover,
    body.kormuth-page nav.kk-nav .nav-links a:focus,
    body.kormuth-page nav.kk-nav .nav-links a:active {
        color: #fff !important;
        text-decoration: none !important;
    }
    body.kormuth-page nav.kk-nav.scrolled .nav-links a,
    body.kormuth-page nav.kk-nav.scrolled .nav-links a:hover,
    body.kormuth-page nav.kk-nav.scrolled .nav-links a:focus {
        color: var(--dark) !important;
    }
    body.kormuth-page nav.kk-nav .lang-btn,
    body.kormuth-page nav.kk-nav .lang-btn:hover,
    body.kormuth-page nav.kk-nav .lang-btn:focus {
        color: #fff !important;
    }
    body.kormuth-page nav.kk-nav.scrolled .lang-btn,
    body.kormuth-page nav.kk-nav.scrolled .lang-btn:hover,
    body.kormuth-page nav.kk-nav.scrolled .lang-btn:focus {
        color: var(--dark) !important;
    }

    /* Instagram nadpis @konditorei_kormuth */
    body.kormuth-page .insta-strip h2 a,
    body.kormuth-page .insta-strip h2 a:link,
    body.kormuth-page .insta-strip h2 a:visited,
    body.kormuth-page .insta-strip h2 a:focus,
    body.kormuth-page .insta-strip h2 a:active {
        color: var(--dark) !important;
        text-decoration: none !important;
    }
    body.kormuth-page .insta-strip h2 a:hover {
        color: var(--gold) !important;
    }

    /* Footer linky — všetky stavy */
    body.kormuth-page footer .footer-col a,
    body.kormuth-page footer .footer-col a:link,
    body.kormuth-page footer .footer-col a:visited,
    body.kormuth-page footer .footer-col a:focus,
    body.kormuth-page footer .footer-col a:active,
    body.kormuth-page footer address a,
    body.kormuth-page footer address a:link,
    body.kormuth-page footer address a:visited,
    body.kormuth-page footer address a:focus,
    body.kormuth-page footer .footer-bottom a {
        color: var(--text) !important;
        text-decoration: none !important;
    }
    body.kormuth-page footer .footer-col a:hover,
    body.kormuth-page footer address a:hover {
        color: var(--gold) !important;
    }

    /* Menu CTA tlačidlo */
    body.kormuth-page .menu-cta,
    body.kormuth-page .menu-cta:link,
    body.kormuth-page .menu-cta:visited,
    body.kormuth-page .menu-cta:focus,
    body.kormuth-page .menu-cta:active {
        color: var(--gold) !important;
        text-decoration: none !important;
    }
    body.kormuth-page .menu-cta:hover {
        background: var(--gold) !important;
        color: #fff !important;
    }

    /* Map button */
    body.kormuth-page .map-btn,
    body.kormuth-page .map-btn:link,
    body.kormuth-page .map-btn:visited,
    body.kormuth-page .map-btn:hover,
    body.kormuth-page .map-btn:focus {
        color: #fff !important;
        text-decoration: none !important;
    }

    /* Insta cells (anchor wrappers) */
    body.kormuth-page .insta-row .insta-cell,
    body.kormuth-page .insta-row .insta-cell:hover,
    body.kormuth-page .insta-row .insta-cell:focus {
        text-decoration: none !important;
        color: inherit !important;
    }

    /* Socials ikonky */
    body.kormuth-page .socials a,
    body.kormuth-page .socials a:link,
    body.kormuth-page .socials a:visited,
    body.kormuth-page .socials a:focus {
        color: var(--gold) !important;
        text-decoration: none !important;
    }
    body.kormuth-page .socials a:hover {
        background: var(--gold) !important;
        color: #fff !important;
    }

    /* Astra niekedy dáva všetkým <a> default modrú — globálny safety net */
    body.kormuth-page a {
        text-decoration: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FÁZA 1 — Mobile responsive + dark mode kontrast fix (od v1.18.7)
   ═══════════════════════════════════════════════════════════════════ */

/* ────────────────── HAMBURGER BUTTON ────────────────── */
.kk-hamburger {
    display: none;  /* skrytý na desktop */
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    z-index: 10003;  /* nad navom */
    background: rgba(20, 14, 10, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(184, 149, 103, 0.4);
    border-radius: 4px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    transition: background-color .3s ease, border-color .3s ease;
}
.kk-hamburger:hover {
    background: rgba(184, 149, 103, 0.2);
    border-color: rgba(184, 149, 103, 0.7);
}
.kk-hamburger-line {
    display: block;
    width: 22px;
    height: 1.8px;
    background: #f4ede2;
    border-radius: 2px;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
    transform-origin: center;
}
/* Animovaný hamburger → X keď je otvorené */
.kk-nav[data-mobile-open="1"] .kk-hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.kk-nav[data-mobile-open="1"] .kk-hamburger-line:nth-child(2) {
    opacity: 0;
}
.kk-nav[data-mobile-open="1"] .kk-hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ────────────────── MOBILE CLOSE BUTTON ────────────────── */
.kk-mobile-close {
    display: none;  /* skrytý do otvorenia menu */
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: rgba(184, 149, 103, 0.12);
    border: 1px solid rgba(184, 149, 103, 0.5);
    border-radius: 3px;
    color: #f4ede2;
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: all .3s ease;
}
.kk-mobile-close:hover {
    background: rgba(184, 149, 103, 0.25);
    border-color: rgba(184, 149, 103, 0.8);
}

/* ────────────────── MOBILE MENU OVERLAY (< 900px) ────────────────── */
@media (max-width: 900px) {
    /* Zobraz hamburger */
    .kk-hamburger {
        display: flex;
    }

    /* Skry desktop nav-links + tools by default, zobraz iba ak je menu otvorené */
    .kk-nav .nav-links,
    .kk-nav .kk-header-tools {
        display: none;
    }

    /* Keď je otvorené menu — fullscreen glass overlay */
    .kk-nav[data-mobile-open="1"] {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(20, 14, 10, 0.78) !important;
        backdrop-filter: blur(22px) saturate(1.4);
        -webkit-backdrop-filter: blur(22px) saturate(1.4);
        z-index: 10002;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 70px 24px 110px;
        gap: 24px;
        animation: kk-mobile-menu-in .35s ease both;
    }
    @keyframes kk-mobile-menu-in {
        from { opacity: 0; backdrop-filter: blur(0px); }
        to   { opacity: 1; backdrop-filter: blur(22px) saturate(1.4); }
    }

    .kk-nav[data-mobile-open="1"] .nav-links {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
        animation: kk-mobile-items-in .5s ease both;
        animation-delay: .1s;
    }
    @keyframes kk-mobile-items-in {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .kk-nav[data-mobile-open="1"] .nav-links li {
        margin: 0;
    }
    .kk-nav[data-mobile-open="1"] .nav-links a {
        display: block;
        padding: 14px 24px;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: 28px;
        font-weight: 400;
        letter-spacing: 0.04em;
        color: #f4ede2;
        text-decoration: none;
        text-transform: uppercase;
        transition: color .25s ease, transform .25s ease;
    }
    .kk-nav[data-mobile-open="1"] .nav-links a:hover,
    .kk-nav[data-mobile-open="1"] .nav-links a.is-active {
        color: #d4b890;
        transform: scale(1.04);
    }

    /* Tools (vlajky + theme toggle) — pod nav linkami */
    .kk-nav[data-mobile-open="1"] .kk-header-tools {
        display: flex !important;
        flex-direction: row;
        gap: 16px;
        align-items: center;
        justify-content: center;
        margin-top: 8px;
        padding-top: 22px;
        border-top: 1px solid rgba(184, 149, 103, 0.25);
        width: 80%;
        max-width: 320px;
    }
    .kk-nav[data-mobile-open="1"] .lang-switcher {
        gap: 6px;
    }
    .kk-nav[data-mobile-open="1"] .lang-btn {
        width: 32px;
        height: 32px;
    }

    /* Close button visible */
    .kk-nav[data-mobile-open="1"] .kk-mobile-close {
        display: inline-flex;
    }

    /* Hamburger sa skryje keď je menu otvorené (jeho fcia → X je v nav-e) */
    .kk-nav[data-mobile-open="1"] ~ .kk-hamburger,
    .kk-nav[data-mobile-open="1"] .kk-hamburger {
        background: transparent;
        border-color: transparent;
    }

    /* Body lock pri otvorenom menu */
    body.kk-mobile-menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* ────────────────── HERO TITLE — clamp na mobile ────────────────── */
@media (max-width: 700px) {
    /* Hlavný titulok webu */
    body.kormuth-page .parallax-interior .title,
    body.kormuth-page .title-block .title,
    body.kormuth-page h2.title {
        font-size: clamp(34px, 9.5vw, 64px) !important;
        line-height: 1.05 !important;
        padding: 0 12px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Hero (video) — VH title */
    body.kormuth-page .vh-title {
        font-size: clamp(28px, 8.5vw, 54px) !important;
        line-height: 1.1 !important;
    }
    body.kormuth-page .vh-text {
        font-size: clamp(14px, 3.6vw, 18px) !important;
    }
    body.kormuth-page .vh-eyebrow {
        font-size: clamp(11px, 2.8vw, 14px) !important;
        letter-spacing: 0.15em !important;
    }
}

/* ────────────────── DARK MODE — KONTRAST FIX ────────────────── */
/* Aktuálne v dark mode niektoré nadpisy zostávajú tmavomodré z Astra global colors */
html[data-theme="dark"] body.kormuth-page .about-text h3,
html[data-theme="dark"] body.kormuth-page .about-text h2,
html[data-theme="dark"] body.kormuth-page .menu-section h3,
html[data-theme="dark"] body.kormuth-page .menu-section h2,
html[data-theme="dark"] body.kormuth-page .map-decorated h3,
html[data-theme="dark"] body.kormuth-page section h3,
html[data-theme="dark"] body.kormuth-page section h2 {
    color: var(--cream, #f4ede2) !important;
}
html[data-theme="dark"] body.kormuth-page .section-label,
html[data-theme="dark"] body.kormuth-page .about-text .section-label {
    color: var(--gold, #b89567) !important;
}

/* Astra global colors override (.entry-content :where(h1..h6)) */
html[data-theme="dark"] body.kormuth-page h1,
html[data-theme="dark"] body.kormuth-page h2,
html[data-theme="dark"] body.kormuth-page h3,
html[data-theme="dark"] body.kormuth-page h4,
html[data-theme="dark"] body.kormuth-page h5,
html[data-theme="dark"] body.kormuth-page h6,
html[data-theme="dark"] body.kormuth-page .entry-content :where(h1, h2, h3, h4, h5, h6) {
    color: var(--cream, #f4ede2) !important;
}
/* Špeciálne pre eyebrow (malé uppercase nadpisy) — gold */
html[data-theme="dark"] body.kormuth-page .vh-eyebrow,
html[data-theme="dark"] body.kormuth-page .footer-eyebrow,
html[data-theme="dark"] body.kormuth-page .about-text .section-label {
    color: var(--gold, #b89567) !important;
}

/* ────────────────── FOOTER — STRÁNKA linky pod čiarou ────────────────── */
body.kormuth-page .footer-col .footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: flex-start;
    justify-content: flex-start;
}
body.kormuth-page .footer-col .footer-links li {
    margin: 0;
    padding: 0;
}
body.kormuth-page .footer-col .footer-links li a {
    display: inline-block;
    padding: 4px 0;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: inherit;
    text-decoration: none;
    transition: color .25s ease;
    white-space: nowrap;
}
body.kormuth-page .footer-col .footer-links li a:hover {
    color: var(--gold, #b89567);
}

/* H4 footer column header — predĺžiť gold čiaru cez celú šírku stĺpca */
body.kormuth-page .footer-col h4 {
    position: relative;
    margin-bottom: 18px;
    padding-bottom: 12px;
}
body.kormuth-page .footer-col h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;  /* PREDTÝM krátka — teraz cez celú šírku stĺpca */
    height: 1px;
    background: linear-gradient(90deg, var(--gold, #b89567) 0%, rgba(184,149,103,0.15) 100%);
}

/* Mobile footer — stĺpce nad sebou + linky stále flex-wrap */
@media (max-width: 700px) {
    body.kormuth-page .footer-col .footer-links {
        gap: 6px 14px;
    }
    body.kormuth-page .footer-col .footer-links li a {
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FÁZA 1 DOPLNENIE (v1.18.8)
   - parallax title scale cez CSS premennú (nie inline font-size)
   - about-slideshow height auto na mobile
   - vlajky vyššia veľkosť v mobile menu
   ═══════════════════════════════════════════════════════════════════ */

/* parallax-interior title — desktop default cez CSS premennú.
   Inline style teraz dáva LEN --title-scale a --title-color, nie font-size.
   Tým CSS @media môže prebíť scale na mobile. */
body.kormuth-page .parallax-interior .title {
    font-size: calc(clamp(48px, 7vw, 96px) * var(--title-scale, 1)) !important;
    color: var(--title-color, #1e293b) !important;
}
html[data-theme="dark"] body.kormuth-page .parallax-interior .title {
    /* V dark mode si dáme nezávislú farbu — Astra global #1e293b je tmavomodrá
       na tmavom pozadí = neviditeľná. Default ostáva cream. */
    color: var(--cream, #f4ede2) !important;
}

@media (max-width: 700px) {
    body.kormuth-page .parallax-interior .title {
        /* Na mobile IGNORUJEME desktop scale (user nastavený v admine pre PC),
           používame agresívne menší clamp aby sa "Konditorei Kormuth" zmestilo. */
        font-size: clamp(32px, 9vw, 56px) !important;
        line-height: 1.05 !important;
        padding: 0 8px !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    /* About slideshow — height: 600px (PC) je príliš veľa na 400px viewport.
       Použijeme height: auto a necháme aspect-ratio (4/5 default) odvodiť výšku
       od skutočnej šírky boxu. Tým zmizne béžový pás dole. */
    body.kormuth-page .about-slideshow {
        height: auto !important;
        max-height: 80vh !important;
    }
    /* Pre 'contain' fit obrázky pridáme jemné dark pozadie aby béžový kus
       (object-position: top) nešokoval. Vlastne necháme cream — sedí s témou. */
}

/* Mobile menu — vlajky musia byť ČITATEĽNÉ. Default 26px ich nestačí
   v 32px button-e — vyzerajú ako mikro krúžky. */
@media (max-width: 900px) {
    .kk-nav[data-mobile-open="1"] .lang-btn {
        width: 48px !important;
        height: 38px !important;
        padding: 2px !important;
    }
    .kk-nav[data-mobile-open="1"] .lang-btn .fi {
        width: 40px !important;
        height: 30px !important;
        border-radius: 3px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
    }
    .kk-nav[data-mobile-open="1"] .lang-btn.active .fi {
        box-shadow: 0 0 0 2px #d4b890, 0 3px 8px rgba(0,0,0,0.4) !important;
    }
    .kk-nav[data-mobile-open="1"] .theme-toggle {
        width: 44px !important;
        height: 44px !important;
    }
    .kk-nav[data-mobile-open="1"] .theme-toggle svg {
        width: 24px !important;
        height: 24px !important;
    }
    /* Spacing v tools row */
    .kk-nav[data-mobile-open="1"] .lang-switcher {
        gap: 10px !important;
    }
    .kk-nav[data-mobile-open="1"] .kk-header-tools {
        gap: 22px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FÁZA 2 — Polish (od v1.18.9)
   - Sekundárny vignette pre video-hero (čitateľnosť textu cez živé video)
   - Silnejší text-shadow na mobile (kde pozadie môže byť rušivé)
   ═══════════════════════════════════════════════════════════════════ */

/* Sekundárny radial vignette nezávislý od admin vh-dark gradientu —
   zabezpečí že text v strede je vždy čitateľný aj na svetlých scénach video. */
body.kormuth-page .video-hero {
    position: relative;
}
body.kormuth-page .video-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center 55%,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.35) 70%,
        rgba(0, 0, 0, 0.55) 100%
    );
    pointer-events: none;
    z-index: 4;
}
body.kormuth-page .video-hero .vh-content,
body.kormuth-page .video-hero .vh-container {
    position: relative;
    z-index: 5;
}

/* Mobile — silnejšie text shadow (na malých obrazovkách je text bližšie k pozadiu) */
@media (max-width: 700px) {
    body.kormuth-page .vh-title {
        text-shadow:
            0 4px 22px rgba(0, 0, 0, 0.75),
            0 2px 6px rgba(0, 0, 0, 0.55) !important;
    }
    body.kormuth-page .vh-text {
        text-shadow:
            0 2px 12px rgba(0, 0, 0, 0.7),
            0 1px 4px rgba(0, 0, 0, 0.55) !important;
    }
    body.kormuth-page .vh-eyebrow {
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.85),
            0 0 3px rgba(0, 0, 0, 0.6) !important;
    }
    /* Mobile — vh-btn väčšie padding + plnú šírku (už máme flex-direction:column) */
    body.kormuth-page .vh-btn {
        padding: 18px 28px !important;
        font-size: 11px !important;
        letter-spacing: 2.5px !important;
    }
}

/* Gold divider získa jemné svetielko (Jugendstil detail) */
body.kormuth-page .vh-divider {
    box-shadow: 0 0 12px rgba(212, 184, 144, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════
   FIX 1.18.10 — Hamburger pozícia + close button v flex flow
   ═══════════════════════════════════════════════════════════════════ */

/* Hamburger — WP admin bar offset (Silvia / Jozef sú prihlásení v admine) */
body.admin-bar .kk-hamburger {
    top: 62px !important;  /* 46px wpadminbar mobile + 16px */
}
@media (min-width: 783px) {
    body.admin-bar .kk-hamburger {
        top: 48px !important;  /* 32px wpadminbar desktop + 16px */
    }
}

/* Štýl — natívnejší vzhľad (tmavší + lepší shadow) */
.kk-hamburger {
    background: rgba(20, 14, 10, 0.78) !important;
    border: 1px solid rgba(212, 184, 144, 0.45) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    border-radius: 6px !important;
}
.kk-hamburger:hover {
    background: rgba(20, 14, 10, 0.88) !important;
    border-color: rgba(212, 184, 144, 0.8) !important;
    transform: scale(1.05);
}

/* ────────────────── CLOSE BUTTON v flex flow (nie absolute) ────────────────── */
/* Predtým: position:absolute bottom:32px → overlapovalo s vlajkami pri vyššom menu.
   Teraz: pridáme ho na koniec flex column-u, naturally pod tools. */

@media (max-width: 900px) {
    .kk-nav[data-mobile-open="1"] {
        /* Override z 1.18.7 — pridáme padding-bottom safe area */
        padding-bottom: 40px !important;
        gap: 20px !important;
        justify-content: center !important;
    }

    .kk-nav[data-mobile-open="1"] .kk-mobile-close {
        /* Vrátime z absolute → relative, takže ostane v column-flow pod tools */
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        display: inline-flex !important;
        margin: 8px auto 0 !important;
        padding: 12px 28px !important;
        background: rgba(212, 184, 144, 0.18) !important;
        border-color: rgba(212, 184, 144, 0.6) !important;
    }
    .kk-nav[data-mobile-open="1"] .kk-mobile-close:hover {
        background: rgba(212, 184, 144, 0.32) !important;
        transform: translateY(-2px) !important;
    }

    /* Tools sekcia má teraz dedikovaný gap pod sebou */
    .kk-nav[data-mobile-open="1"] .kk-header-tools {
        margin-top: 6px !important;
        margin-bottom: 4px !important;
    }

    /* Nav links menšie spacing aby sa zmestilo všetko aj s close pod */
    .kk-nav[data-mobile-open="1"] .nav-links a {
        padding: 11px 24px !important;
        font-size: 26px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FIX 1.18.11 — hero title bez <br> + hamburger safe-area
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── PARALLAX HERO TITLE — single line + nezalamuje slovo ───────── */
/* Od v1.18.11 sme odstránili hardcoded <br> v PHP. Teraz title je "Konditorei Kormuth".
   Browser by mohol slovo "Konditorei" zalomiť dovnútra (Kondito-rei) — preto:
   - hyphens: none — nikdy nevkladaj soft hyphen
   - word-break: keep-all — nezalamuj v rámci slova
   - white-space: normal — nech sa zalomí medzi slovami ak treba
   Plus extra mobile clamp aby sa zmestili obe slová na úzky display (Z Flip 5 closed = 344px). */
body.kormuth-page .parallax-interior .title {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    text-wrap: balance;
}

@media (max-width: 700px) {
    body.kormuth-page .parallax-interior .title {
        /* Mobile: agresívne menší clamp aby "Konditorei Kormuth" sedelo. */
        font-size: clamp(26px, 7.5vw, 48px) !important;
        line-height: 1.1 !important;
        padding: 0 8px !important;
        letter-spacing: -0.5px !important;
    }
}
@media (max-width: 400px) {
    /* Z Flip 5 closed (344px) + iné úzke displeje */
    body.kormuth-page .parallax-interior .title {
        font-size: clamp(22px, 7vw, 36px) !important;
        letter-spacing: -1px !important;
    }
}

/* ───────── HAMBURGER — safe-area inset (notch / Z Flip / iPhone X+) ───────── */
/* env(safe-area-inset-top) berie do úvahy systémový statusbar/notch/punch-hole.
   Z Flip 5 v portrait closed mode má 0 ale v unfolded má notch ~30px.
   iPhone X+ má notch 44-59px. Pridáme bázický 16px gap + safe area. */
.kk-hamburger {
    top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 16px) !important;
}
body.admin-bar .kk-hamburger {
    /* WP admin bar je nad systémovým statusbar — nemá safe-area conflict */
    top: calc(env(safe-area-inset-top, 0px) + 46px + 16px) !important;
}
@media (min-width: 783px) {
    body.admin-bar .kk-hamburger {
        top: calc(env(safe-area-inset-top, 0px) + 32px + 16px) !important;
    }
}

/* Domov stránka (parallax-interior) má vlastný plný-výška hero — hamburger ostáva
   v rovnakej pozícii ale must overlap parallax content. Z-index už OK (10003). */

/* Mobile menu overlay — tiež safe-area inset, aby close button neprekrýval system UI */
@media (max-width: 900px) {
    .kk-nav[data-mobile-open="1"] {
        padding-top: calc(env(safe-area-inset-top, 0px) + 70px) !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FIX 1.18.12 — Hamburger nuclear option
   Od v1.18.12 je hamburger SIBLING nav-u (mimo neho). Tento override:
   - z-index na maximum (nad WP admin bar, nad PWA banner, nad všetkým)
   - !important display flex / none aby žiadne iné pravidlo to neprebíja
   - vyššia priorita ako predošlé pravidlá (sú nižšie v CSS = win)
   ═══════════════════════════════════════════════════════════════════ */

/* Default desktop — skrytý */
.kk-hamburger {
    display: none !important;
}

/* Mobile — viditeľný */
@media (max-width: 900px) {
    .kk-hamburger {
        display: flex !important;
        position: fixed !important;
        z-index: 99999 !important;  /* nad WP toolbar (99999), nad PWA banner (99998) */
        width: 44px !important;
        height: 44px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 0 !important;
        cursor: pointer;
        /* Pozícia s safe-area + WP admin bar offset */
        top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
        right: calc(env(safe-area-inset-right, 0px) + 16px) !important;
        /* Vzhľad */
        background: rgba(20, 14, 10, 0.78) !important;
        backdrop-filter: blur(14px) saturate(1.4) !important;
        -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
        border: 1px solid rgba(212, 184, 144, 0.5) !important;
        border-radius: 6px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    }
    body.admin-bar .kk-hamburger {
        /* WP admin bar 46px mobile + safe area + 16px gap */
        top: calc(env(safe-area-inset-top, 0px) + 46px + 12px) !important;
    }
}
@media (min-width: 783px) and (max-width: 900px) {
    body.admin-bar .kk-hamburger {
        /* WP admin bar 32px desktop variant pre tablet */
        top: calc(env(safe-area-inset-top, 0px) + 32px + 12px) !important;
    }
}

/* Open state — X animation pre čiarky */
@media (max-width: 900px) {
    .kk-nav[data-mobile-open="1"] ~ .kk-hamburger,
    .kk-hamburger[aria-expanded="true"] {
        /* Hamburger ostane viditeľný cez fullscreen overlay, jeho čiarky sa zmenia na X */
    }
    .kk-hamburger[aria-expanded="true"] .kk-hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .kk-hamburger[aria-expanded="true"] .kk-hamburger-line:nth-child(2) {
        opacity: 0;
    }
    .kk-hamburger[aria-expanded="true"] .kk-hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX 1.18.13 — Mobile responsive overflow fix
   
   PROBLÉM: na úzkych mobiloch (< 380px, napr. Z Flip 5 closed = 276px)
   element #heroRight rendroval ~380px wide → horizontálny overflow
   roztiahol body, vznikli "biele pruhy" napravo, hamburger sa „dorobyl"
   nad obsahom. Diagnostika: hero-title pri scale 1.6 mal font-size 76.8px,
   slovo „Historická"/„Cukráreň" = min-content ~380px, grid 1fr to nemohol
   shrink-núť → overflow.
   
   FIXY:
   1) grid-template-columns: minmax(0, 1fr) — dovolí grid items shrink pod
      min-content (lámu sa namiesto roztiahnutia)
   2) overflow-wrap: anywhere — dlhé slová sa rozdelia pri okraji
   3) Hard cap font-size pre malé viewporty (< 480px) — bez ohľadu na admin
      slider scale, fontsize neprekročí čo sa zmestí
   4) isolation: isolate na .hero — clean stacking context
   5) .hero-right background-color fallback (var(--peach)) — keď obrázok
      nepokrýva (napr. transparentné/biele plochy v zdrojovom obrázku),
      presvieta peach místo bieleho dna
   6) Defenzívne overflow-x: hidden na html
   ═══════════════════════════════════════════════════════════════════════ */

/* 1+4: Grid + isolation */
.kormuth-page .hero {
    isolation: isolate;
}
@media (max-width: 900px) {
    .kormuth-page .hero {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 2: Defenzívne lámanie dlhých slov v hero + parallax title */
.kormuth-page .hero-title,
.kormuth-page .hero-eyebrow,
.kormuth-page .hero-text,
.kormuth-page .parallax-interior .title,
.kormuth-page .parallax-interior .subtitle {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 3: Hard cap font-size na úzkych mobiloch */
@media (max-width: 480px) {
    .kormuth-page .hero-title {
        font-size: calc(clamp(28px, 9vw, 44px) * var(--hero-title-scale, 1)) !important;
    }
    .kormuth-page .hero-eyebrow {
        font-size: calc(10px * var(--hero-eyebrow-scale, 1)) !important;
        letter-spacing: 3px !important;
    }
    .kormuth-page .hero-text {
        font-size: calc(13px * var(--hero-text-scale, 1)) !important;
    }
    .kormuth-page .hero-left {
        padding: 50px 18px !important;
    }
    .kormuth-page .parallax-interior .title {
        font-size: clamp(22px, 7vw, 32px) !important;
    }
}

/* Ešte agresívnejšie pre Z Flip 5 closed (< 320px) */
@media (max-width: 320px) {
    .kormuth-page .hero-title {
        font-size: calc(clamp(24px, 9vw, 36px) * var(--hero-title-scale, 1)) !important;
    }
    .kormuth-page .hero-left {
        padding: 40px 14px !important;
    }
}

/* 5: hero-right background-color fallback */
.kormuth-page .hero-right {
    background-color: var(--peach);
}

/* 6: Defenzívne overflow-x na html */
html {
    overflow-x: hidden;
}