:root {
    /* Base colors with Telegram fallbacks */
    --bg-dark: #070706;
    --bg-card: #0d0d0b;
    --gold: #b8a38f;
    /* Warm Bronze/Beige instead of yellow */
    --gold-dim: #302b26;
    --gold-real: #b8a38f;
    /* Tan/Gold for highlights */
    --text-light: #cfc0b0;
    --text-muted: #81766c;

    /* Typography: Jost is the single interface and brand typeface. */
    --font-heading: 'Jost', sans-serif;
    --font-display: 'Jost', sans-serif;
    --font-body: 'Jost', sans-serif;
    --gold-real: var(--gold);
    --gold-bright: #d2c2b1;

    /* Layout */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --nav-height: 80px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
}

/* Author-level display rules must never override the native hidden state. */
[hidden] {
    display: none !important;
}

body.modal-open {
    overflow: hidden !important;
    height: 100vh;
}

/* Typography Utility */
h1,
h2,
h3 {
    font-weight: 400;
}

/* Hero Section & Slider */
.hero {
    position: relative;
    height: clamp(330px, 36svh, 400px);
    width: 100%;
    overflow: hidden;
    background: #000;
}

.hero-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Align to top part */
    align-items: center;
    padding-top: 2vh;
    /* Minimized top gap */
    z-index: 1;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180%;
    /* Increased for durable parallax */
    object-fit: cover;
    will-change: transform;
    /* Move up slightly to start parallax from a better position */
    transform: translateY(-10%);
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(1, 2, 2, 0.7) 100%);
}

/* Hero Slide Glass Card */
.slide-content {
    position: relative;
    z-index: 10;
    padding: 20px 20px 50px;
    width: 90%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    border-radius: 24px;
    border: 1px solid rgba(196, 164, 132, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Running Light Border Animation (Synced with Footer Style) */
.slide-content::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 25px;
    padding: 1.5px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(196, 164, 132, 0) 40%,
            var(--gold-real) 50%,
            rgba(196, 164, 132, 0) 60%,
            transparent 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background-size: 200% 100%;
    animation: linearBorderMove 12s linear infinite;
    /* Even slower */
    pointer-events: none;
    z-index: 5;
    opacity: 0.7;
    /* Clip out bottom to focus on top/sides */
    clip-path: inset(-10% -10% 2px -10%);
}

@keyframes linearBorderMove {
    0% {
        background-position: 200% 0;
        opacity: 0;
    }

    3% {
        opacity: 0.7;
    }

    20% {
        background-position: -200% 0;
        opacity: 0.7;
    }

    25%,
    100% {
        background-position: -200% 0;
        opacity: 0;
    }

    /* Much longer pause */
}

.slide-content::after {
    display: none;
}

.mini-logo {
    width: 60px;
    height: auto;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 12px rgba(160, 179, 171, 0.3));
    /* Soft Silver Mist */
}

.slide-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    /* More compact and neat */
    font-weight: 400;
    /* High contrast gradient */
    background: linear-gradient(135deg, #FFEFBA 0%, var(--gold) 45%, #C4A484 75%, #8b6e23 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 8px;
    margin-bottom: 5px;
    line-height: 1.3;
    /* Increased for airiness */
    text-transform: uppercase;
    letter-spacing: 3px;
    /* Reduced for neatness */
}

.slide-title span {
    display: block;
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 1px;
    /* Tighter and cleaner */
    margin-top: 5px;
    /* More vertical air */
    background: linear-gradient(to right, hwb(41 38% 24%), var(--gold), #f7e1ad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-address {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: #e8deb3;
    /* Pure white is cleaner */
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.5;
    /* Very subtle and airy */
    text-align: center;
    margin-top: 0px;
    margin-bottom: 10px;
}

.hero-kicker {
    margin: 0 0 4px;
    color: rgba(255, 255, 255, 0.68);
    font: 500 0.56rem/1 var(--font-heading);
    letter-spacing: 0.28em;
}

.hero-title {
    margin-top: 4px;
    font-size: clamp(1.9rem, 7vw, 2.3rem);
    letter-spacing: 0.12em;
}

.hero-title span {
    margin-top: -2px;
    font-size: 2.8rem;
    line-height: 1;
    letter-spacing: 0.08em;
}

/* Venue introduction */
.about-venue {
    position: relative;
    z-index: 4;
    padding: 78px 20px 34px;
}

.about-card {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(196, 164, 132, 0.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(196, 164, 132, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.about-card::after {
    content: '12';
    position: absolute;
    top: -28px;
    right: -10px;
    color: rgba(196, 164, 132, 0.045);
    font: 400 10rem/1 var(--font-display);
    pointer-events: none;
}

.about-heading,
.about-copy,
.venue-facts,
.about-actions {
    position: relative;
    z-index: 1;
}

.about-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--gold);
    font-size: 0.57rem;
    letter-spacing: 0.24em;
}

.about-heading h2 {
    color: #f1e5d7;
    font: 400 clamp(1.75rem, 7vw, 2.45rem)/1.08 var(--font-display);
    letter-spacing: 0.015em;
}

.about-copy {
    max-width: 600px;
    margin-top: 18px;
    color: rgba(240, 240, 240, 0.62);
    font-size: 0.78rem;
    line-height: 1.75;
}

.venue-facts {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.venue-fact {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.18);
    color: #e8ddd2;
    text-decoration: none;
    font-size: 0.72rem;
}

.venue-fact > i:first-child {
    color: var(--gold);
    font-size: 1rem;
    text-align: center;
}

.venue-fact small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.5rem;
    letter-spacing: 0.16em;
}

.fact-arrow {
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.65rem;
}

.about-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.about-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(196, 164, 132, 0.35);
    border-radius: 14px;
    background: transparent;
    color: #ddc8b2;
    font: 500 0.61rem var(--font-heading);
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.about-button-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #dbc3a9, #9e7c5e);
    color: #15120f;
}

.about-venue + .home-promotions,
.about-venue ~ .menu-listing {
    margin-top: 0;
}

.hero-slogan {
    font-size: 0.9rem;
    color: var(--text-light);
    letter-spacing: 5px;
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-weight: 300;
    opacity: 0.8;
}

.status-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Neutral cold glass instead of browns */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    height: 26px;
    border-radius: 13px;
    padding: 0 16px;
    margin: 8px auto 0;
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    overflow: hidden;
    z-index: 15;
    /* Clean Embossing */
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 4px 6px rgba(0, 0, 0, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.5);
}



/* Glass glint for volume */
/* Glass glint for volume - Generic Base */
.menu-tab.active::after {
    content: '';
    position: absolute;
    left: 10%;
    width: 80%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: goldFlash 2s infinite alternate;
}

/* 1. Menu Page underline: HIGHER (approx 3px above border) */
.menu-page-modal .menu-tab.active::after {
    bottom: -4px;
}

/* 2. Food Card underline: LOWER */
#food-modal .menu-tab.active::after {
    bottom: -10px;
}

.status-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: linear-gradient(to right, rgba(247, 225, 173, 0.03), rgba(247, 225, 173, 0.15));
    border-radius: 13px;
    transition: width 1.5s cubic-bezier(0.2, 1, 0.3, 1);
    z-index: 1;
}

.status-content {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Reset to start to avoid "shifts" */
    gap: 8px;
    /* Tighter gap */
    width: 100%;
}

.status-text {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    color: #ebe9ce;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
    opacity: 0.6;
    white-space: nowrap;
    /* No wrapping */
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 4px;
    /* Reduced margin */
    position: relative;
    flex-shrink: 0;
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        /* Bottom depth */
        0 2px 4px rgba(0, 0, 0, 0.4);
}

/* 3D Bead Highlight */
.status-dot::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 4px;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    z-index: 2;
    filter: blur(0.5px);
}

.status-dot.online {
    background: radial-gradient(circle at 35% 35%, #F7E1AD, #C4A484 60%, #4A3F35);
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(196, 164, 132, 0.5);
}

.status-dot.offline {
    background: radial-gradient(circle at 35% 35%, #8B837E, #5A5A5A 60%, #222);
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.5);
}

@keyframes statusPulseGreen {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes statusPulseRed {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.btn {
    padding: 12px 24px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: transparent;
    border: none;
    outline: none;
}

.btn-outline {
    border: 1px solid var(--gold);
    color: var(--gold);
}

.btn-outline:hover,
.btn-outline:active {
    background: rgba(196, 164, 132, 0.1);
    box-shadow: 0 0 15px rgba(196, 164, 132, 0.2);
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    color: #000;
    font-weight: 600;
    width: 100%;
}

.highlights {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    /* Even spacing across width */
    align-items: center;
    padding: 0 10%;
    /* Breathing room from edges */
    margin: 0;
    transform: translateY(60%);
    z-index: 100;
}

.highlight-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.highlight-item:hover .icon-box {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(196, 164, 132, 0.4);
}

.highlight-item:hover span {
    color: var(--gold);
}

.icon-box {
    width: 54px;
    /* Slightly larger */
    height: 54px;
    background: rgb(28 38 30 / 66%);
    backdrop-filter: blur(30px) saturate(300%);
    -webkit-backdrop-filter: blur(30px) saturate(300%);
    border: 1px solid rgba(63, 63, 63, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    position: relative;
}

/* Reels Story Glow Border */
.highlight-item:first-child .icon-box::after {
    content: '';
    position: absolute;
    inset: -2px;
    /* Tight golden border */
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(45deg, #f7e1ad 0%, var(--gold) 50%, #8b6e23 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6;
    animation: storyGlow 3s ease-in-out infinite;
}

@keyframes storyGlow {
    0% {
        opacity: 0.5;
        filter: brightness(1);
    }

    50% {
        opacity: 1;
        filter: brightness(1.5);
    }

    100% {
        opacity: 0.5;
        filter: brightness(1);
    }
}

.highlight-item.is-story .icon-box {
    /* Merged style: no separate pulse, just unified material */
    animation: none;
}

/* Staggered pulse for stories */
.highlight-item.is-story:nth-of-type(1) .icon-box {
    animation-delay: 0s;
}

.highlight-item.is-story:nth-of-type(2) .icon-box {
    animation-delay: 0.6s;
}

.highlight-item.is-story:nth-of-type(3) .icon-box {
    animation-delay: 1.2s;
}


.icon-box i {
    z-index: 2;
    font-size: 1.3rem;
    color: #FFF;
}

.highlight-item span {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    color: #FFF;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
    margin-top: 4px;
    /* Tighter */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}


/* Section Common */
.section-header {
    margin-bottom: 15px;
    /* Compact gap before food list */
    padding: 0 20px;
}

.section-header h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

/* Menu Listing Section */
/* Popular Section (Horizontal Carousel Style) */
/* Horizontal Scroll for Popular */
.popular-scroll {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 10px 20px 30px;
    /* This sets the 20px margin for cards scroll */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.popular-scroll::-webkit-scrollbar {
    display: none;
}

/* Global Scrollbar Hiding */
.scroll-hide::-webkit-scrollbar {
    display: none;
}

.scroll-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.food-card.vertical {
    flex-direction: column;
    min-width: 175px;
    width: 175px;
    height: auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(160, 179, 171, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.food-card.vertical:hover {
    transform: translateY(-6px);
    border-color: rgba(196, 164, 132, 0.4);
    box-shadow: 0 15px 40px rgba(196, 164, 132, 0.25);
}

.food-card.vertical .food-img {
    width: 100%;
    height: 155px;
    /* Slightly taller image */
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    position: relative;
}

.food-card.vertical .food-img img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.food-card.vertical:active .food-img img {
    transform: scale(1.1);
}

.food-card.vertical .food-info {
    padding: 15px;
    text-align: left;
    height: auto;
    /* Let it flow */
    min-height: 120px;
}

.food-card.vertical h3 {
    font-size: 0.95rem;
    font-family: var(--font-display);
    margin-bottom: 8px;
    color: #FFF;
    letter-spacing: 0.5px;
}

.food-card.vertical p {
    font-size: 0.7rem;
    margin-bottom: 12px;
}

.food-card {
    display: flex;
    background: rgba(10, 18, 15, 0.4);
    /* Glassmorphism for whole card */
    backdrop-filter: blur(15px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: 125px;
    margin-bottom: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.food-card:active {
    transform: scale(0.98);
    border-color: var(--gold);
}

.food-img {
    width: 100px;
    min-width: 100px;
    height: 100%;
}

.food-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#food-modal {
    z-index: 9000 !important;
    /* Below bottom nav which is 9999 */
}

.food-item-active {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.food-info {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.food-info h3 {
    font-size: 1rem;
    margin-bottom: 2px;
    /* Tighter */
    color: var(--text-light);
}

.food-info p {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    /* Tighter */
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.food-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    /* Tighter */
}

/* Removed .add-btn styles as it is no longer used */
.status-text {
    font-family: var(--font-heading);
    color: #FFF;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.price {
    font-family: var(--font-display);
    color: var(--gold);
    font-weight: 500;
    font-size: 0.85rem;
    /* Compact */
    letter-spacing: 0.5px;
    background: none;
    backdrop-filter: none;
    padding: 0;
    border: none;
}

/* Removed .add-btn styles as it is no longer used */

/* Collections Grid */
.menu-listing {
    position: relative;
    margin-top: -4vh;
    /* Увеличил отступ (было -10vh / -5vh) */
    padding-bottom: 20px;
    background: transparent;
    z-index: 110;
}

.collections {
    padding: 0;
    /* Removed padding to avoid double margin with section-header */
    margin-bottom: var(--spacing-lg);
}

.collections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.collection-card {
    position: relative;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.collection-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.collection-card:hover img {
    transform: scale(1.1);
}

.col-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
}

.collection-card span {
    position: absolute;
    bottom: 12px;
    left: 8px;
    right: 8px;
    font-size: 0.75rem;
    text-align: center;
    font-weight: 500;
    color: var(--text-light);
    text-transform: uppercase;
    z-index: 1;
}

/* Spacer for Bottom Nav */
.spacer {
    height: 120px;
}

body {
    padding-bottom: 20px;
    /* Extra breathing room */
}

/* Bottom Nav Stylized */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background: rgba(5, 8, 7, 0.5);
    /* Frost Glass Deep */
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-top: 1px solid transparent;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    /* Always on top of everything */
    padding-top: 15px;
    /* More gap from top line to icons */
    padding-bottom: 25px;
    /* Bottom safety space */
}

/* Synchronized Glowing Line */
.bottom-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(160, 179, 171, 0.2) 15%,
            var(--gold) 50%,
            rgba(160, 179, 171, 0.2) 85%,
            transparent 100%);
    opacity: 0.5;
    z-index: 10;
    transform-origin: center;
    animation: synchronizedGlow 3s ease-in-out infinite alternate;
}

@keyframes synchronizedGlow {
    0% {
        transform: scaleX(0.85);
        opacity: 0.2;
        filter: brightness(0.8);
    }

    100% {
        transform: scaleX(1);
        opacity: 0.6;
        filter: brightness(1.2);
    }
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-family: var(--font-display);
    /* Using Tenor Sans for premium feel */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    gap: 6px;
    width: 60px;
    transition: all 0.3s;
}

.nav-item i {
    font-size: 1.2rem;
}

.nav-item:hover {
    color: var(--gold);
    transform: translateY(-2px);
}

.nav-item:hover i {
    filter: drop-shadow(0 0 8px rgba(196, 164, 132, 0.5));
}

.nav-item.active {
    color: var(--gold);
}

.menu-tab.active {
    color: var(--gold);
}

.menu-tab.active i {
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(196, 164, 132, 0.4);
}

/* Center Logo FAB */
.nav-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(196, 164, 132, 0.24));
}

.fab-circle {
    width: 60px;
    height: 60px;
    background: #010202;
    border: 1px solid rgba(160, 179, 171, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    padding: 3px;
    /* Reduced padding for larger logo */
    position: relative;
    box-shadow: 0 0 25px rgba(0, 0, 0, 1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    animation: circleGlow 3s ease-in-out infinite alternate;
}

@keyframes circleGlow {
    0% {
        border-color: rgba(160, 179, 171, 0.3);
        box-shadow: 0 0 15px rgba(0, 0, 0, 1);
    }

    100% {
        border-color: var(--gold);
        box-shadow: 0 0 25px rgba(160, 179, 171, 0.3);
    }
}

/* Popups/Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 8000;
    display: none;
    justify-content: center;
    align-items: flex-start;
    /* Changed from center to flex-start */
    padding-top: 5vh;
    /* Add top padding for breathing room */
    overflow-y: auto;
    /* Allow scrolling if content is too tall */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Fix menu tab relative positioning for underline */
.menu-tab {
    position: relative;
}

/* When active, show modal */
.modal.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 24px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.modal.active .modal-content {
    transform: translateY(0);
}

/* RESTORED MISSING RULE: Slide content up when active */
.modal.active .modal-content {
    transform: translateY(0);
}

/* Stories Popup (9:16 Aspect) - Override scroll because stories are full screen */
.story-modal .modal-content {
    width: 95vw;
    height: calc(95vw * 16 / 9);
    max-height: 85vh;
    max-width: 420px;
    padding: 0;
    overflow: hidden;
    /* Stories should NOT scroll */
    background: #000;
}

.story-viewer {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.story-progress {
    position: absolute;
    top: 15px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}

.story-caption {
    position: absolute;
    right: 18px;
    bottom: 28px;
    left: 18px;
    padding: 46px 18px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
    color: #fff;
}

.story-caption h3 {
    margin: 0;
    font: 400 1.35rem/1.15 var(--font-display);
}

.story-caption p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.76rem;
    line-height: 1.4;
}

.progress-bar {
    height: 2px;
    flex: 1;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #FFF;
    width: 0%;
}

.fab-circle::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
    opacity: 0.2;
    z-index: -1;
    animation: logoGlow 3s ease-in-out infinite alternate;
}

@keyframes logoGlow {
    0% {
        transform: scale(0.95);
        opacity: 0.1;
    }

    100% {
        transform: scale(1.1);
        opacity: 0.4;
    }
}


.center-fab {
    position: relative;
    top: -25px;
    /* User confirmed -25px looks perfect */
    z-index: 1002;
}



.nav-item.active .fab-circle {
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(160, 179, 171, 0.2);
}

.center-fab span {
    margin-top: 0px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 2px;
}

/* Full Menu Page Modal Redesign */
.menu-page-modal .modal-content {
    max-width: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow-y: auto;
    padding: 0;
    /* Changed to handle custom header */
    background: #010202;
    /* Absolute black as per mockup */
}

.menu-top-nav {
    display: flex;
    background: rgba(18, 18, 18, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 2px solid rgba(196, 164, 132, 0.1);
    /* Subtle divider */
    padding: 10px 10px 0;
    /* No bottom padding for tabs to touch border */
    position: sticky;
    top: 0;
    z-index: 100;
    justify-content: space-around;
}

.menu-tab {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border-bottom: 2px solid transparent;
}

/* Modal Nav Refinement */
.modal-nav-refinement .menu-tab {
    flex-direction: row;
    font-size: 1.1rem;
    gap: 12px;
    font-weight: 600;
}

.modal-nav-refinement .menu-tab i {
    font-size: 1.4rem;
}

.menu-tab i {
    font-size: 1.2rem;
    color: inherit;
    /* Sync with parent text color */
    transition: transform 0.3s ease;
}

/* Pulse from Center Active Tab - Thinner & Wider into Void */
.menu-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    /* Moved down to overlap divider perfectly */
    left: 50%;
    /* Start from center */
    width: 0%;
    /* Initial width 0 */
    height: 1px;
    /* Thinner line */
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: pulseVoid 4s infinite alternate ease-in-out;
    transform: translateX(-50%);
    /* Center transparently */
    box-shadow: 0 0 7px rgba(196, 164, 132, 0.4);
}

@keyframes pulseVoid {
    0% {
        width: 40%;
        opacity: 0.3;
    }

    100% {
        width: 100%;
        /* Stretch far into void */
        opacity: 0.8;
        filter: brightness(1.2);
    }
}




.menu-sub-nav {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 20px;
    background: transparent;
}

.sub-pill {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 164, 132, 0.2);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    transition: all 0.3s ease;
}

.sub-pill.active {
    background: rgba(196, 164, 132, 0.1);
    border-color: var(--gold);
    color: var(--gold);
}

.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 0 15px 100px;
}

.menu-food-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    min-height: 200px;
    /* Force minimum card height */
}

.menu-food-card:hover {
    transform: translateY(-4px);
    border-color: rgba(196, 164, 132, 0.4);
    box-shadow: 0 8px 20px rgba(196, 164, 132, 0.2);
}

.card-img-wrapper {
    width: 100%;
    height: 160px;
    min-height: 160px;
    /* Fallback insurance */
    overflow: hidden;
    background: #111;
    position: relative;
    padding-bottom: 0;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.menu-food-card:hover .card-img-wrapper img {
    transform: scale(1.05);
}

.card-info {
    padding: 12px;
}

.card-info h3 {
    font-family: var(--font-display);
    color: var(--gold);
    font-size: 0.95rem;
    margin-bottom: 6px;
    line-height: 1.2;
}

.card-info p {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 10px;
    overflow: hidden;
}

.card-price {
    font-family: var(--font-display);
    color: var(--gold);
    font-size: 1rem;
    font-weight: 600;
}

.food-modal-fullscreen {
    z-index: 9500;
}

.food-modal-nav-container {
    padding-top: 15px;
    background: rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 10000;
}

.modal-nav-refinement {
    padding: 0 15px;
}

.food-modal-fullscreen .modal-content {
    max-width: 100%;
    width: 100%;
    height: 100%;
    background: #000;
    padding: 0;
    overflow: hidden;
    position: relative;
    border-radius: 0;
}

.food-carousel-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.food-item-active {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.food-full-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 0.5s ease-in-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

/* Carousel intuition: Stacked card hint with actual neighbor images */
.food-carousel-container::before,
.food-carousel-container::after {
    content: '';
    position: absolute;
    top: 25%;
    width: 65%;
    height: 45%;
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(160, 179, 171, 0.2);
    border-radius: 20px;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    opacity: 0.4;
    /* More visible */
    pointer-events: none;
    background-color: #000;
    /* Fallback */
    /* Ensure sizing is correct relative to container */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* Adjust transforms for better "peek" effect */
.food-carousel-container::before {
    left: -60%;
    /* Adjusted from -55% to peek more */
    background-image: var(--prev-img);
    transform: perspective(1000px) rotateY(25deg) scale(0.85);
    /* Slightly larger scale */
}

.food-carousel-container::after {
    right: -60%;
    /* Adjusted from -55% */
    background-image: var(--next-img);
    transform: perspective(1000px) rotateY(-25deg) scale(0.85);
}

.food-carousel-container::before {
    left: -55%;
    background-image: var(--prev-img);
    transform: perspective(1000px) rotateY(20deg) scale(0.8);
}

.food-carousel-container::after {
    right: -55%;
    background-image: var(--next-img);
    transform: perspective(1000px) rotateY(-20deg) scale(0.8);
}

.food-full-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            transparent 30%,
            transparent 60%,
            rgba(0, 0, 0, 0.8) 100%);
    z-index: 2;
}

.food-info-card {
    background: rgba(10, 15, 14, 0.6);
    /* More transparent */
    backdrop-filter: blur(10px);
    /* Less blur to see outlines */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(196, 164, 132, 0.2);
    border-radius: 24px;
    /* All corners rounded */
    padding: 25px 25px 30px;
    /* Adjusted padding */
    position: absolute;
    bottom: 20px;
    /* Floating from bottom */
    left: 4%;
    /* Centered horizontally */
    width: 92%;
    /* Not full width */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    z-index: 100;
    /* Ensure above background */
}

.food-info-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    position: relative;
    padding-right: 40px;
    /* Space for close button */
}

#modal-food-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0;
    flex: 1;
    /* Gradient Text Style */
    background: linear-gradient(135deg, #f7e1ad 0%, var(--gold) 50%, #8b6e23 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Fallback */
}

#modal-food-price {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--gold);
    font-weight: 500;
    white-space: nowrap;
    margin-top: 5px;
    padding-left: 15px;
}

.food-info-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.8;
}

.food-modal-meta {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(196, 164, 132, 0.15);
}

.food-modal-meta span {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.food-modal-meta i {
    color: var(--gold);
    font-size: 0.9rem;
}

.swipe-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 15px;
    color: var(--gold);
}

.swipe-hand {
    font-size: 1.8rem;
    animation: swipeHandAnim 2.5s infinite ease-in-out;
    filter: drop-shadow(0 0 10px rgba(196, 164, 132, 0.5));
}

@keyframes swipeHandAnim {
    0% {
        transform: translateX(-15px) rotate(-10deg);
        opacity: 0.2;
    }

    50% {
        transform: translateX(15px) rotate(10deg);
        opacity: 1;
    }

    100% {
        transform: translateX(-15px) rotate(-10deg);
        opacity: 0.2;
    }
}

/* Immersive Navigation Header */
.food-modal-nav-container {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    z-index: 10001;
    /* Very high z-index */
    pointer-events: auto;
    /* Force clickable */
    background: rgba(15, 15, 15, 0.65);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(196, 164, 132, 0.2);
    border-radius: 20px;
    padding: 8px 10px;
}

.food-modal-nav-container .menu-top-nav {
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    padding: 0;
}

.food-modal-nav-container .menu-tab {
    padding: 8px 10px;
    font-size: 0.75rem;
}

.food-modal-nav-container .menu-tab i {
    font-size: 1rem;
}

.food-modal-nav-container .menu-sub-nav {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 5px;
    padding: 8px 0 3px;
    gap: 10px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.food-modal-nav-container .menu-sub-nav::-webkit-scrollbar {
    display: none;
}

.food-modal-nav-container .sub-pill {
    padding: 6px 16px;
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.food-modal-nav-container .sub-pill.active {
    background: var(--gold);
    color: #000;
}

#modal-food-header {
    pointer-events: none;
    /* Container ignores clicks */
    position: relative;
    z-index: 10000;
}

/* Ensure sub-pills are clickable and properly spaced */
.sub-pill {
    pointer-events: auto;
    cursor: pointer;
    flex-shrink: 0;
    /* Prevent squishing */
}


/* Modal Close Adjustment for full screen */
.modal-close-card {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.5rem;
    color: var(--gold);
    cursor: pointer;
    line-height: 1;
    z-index: 120;
    opacity: 0.8;
    /* More visible */
    transition: all 0.3s;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    /* Darker backdrop for visibility */
    border: 1px solid rgba(196, 164, 132, 0.3);
    border-radius: 50%;
}

.modal-close-card:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

/* --- Rules Page Styles (Refined) --- */
.rules-page {
    max-width: 500px;
    width: 80% !important;
    height: 95vh;
    /* Elongated block */
    display: flex;
    flex-direction: column;
    padding: 25px 0 0 !important;
    /* Removed side padding, shifted bottom padding to container */
    background: rgba(255, 255, 255, 0.03) !important;
    /* Neutral high-transparency glass */
    border-radius: 30px 30px 0 0 !important;
    /* Rounded only at top, "emerging" from bottom */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: none !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translate(-50%, 100%) !important;
    /* Align with footer */
    backdrop-filter: blur(35px) saturate(150%) !important;

}



.infographic-title {
    font-size: 1.5rem !important;
    margin-bottom: 25px !important;
    padding: 0 20px !important;
    /* Keep title away from edges */
    letter-spacing: 4px !important;
    text-align: center;
}

.rules-container {
    /* Removed flex: 1 and overflow-y: auto to let parent scroll */
    padding: 0 15px 120px;
    /* Reduced top padding as title has margin */
    margin-bottom: 0;
    position: relative;
    /* Убрали изоляцию, так как перешли на по-карточное свечение */

    /* Fading edges mask */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}

@keyframes rulesGlowPulse {
    0% {
        filter: blur(40px) brightness(0.7);
        transform: translateY(-50%) scale(0.9);
    }

    100% {
        filter: blur(60px) brightness(1.5);
        transform: translateY(-50%) scale(1.1);
    }
}

/* Custom Gold Scrollbar (Thinner) */
.rules-container::-webkit-scrollbar,
.loyalty-page::-webkit-scrollbar,
.rules-page::-webkit-scrollbar {
    width: 2px;
}

.rules-container::-webkit-scrollbar-track,
.loyalty-page::-webkit-scrollbar-track,
.rules-page::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-block: 20px;
}

.rules-container::-webkit-scrollbar-thumb,
.loyalty-page::-webkit-scrollbar-thumb,
.rules-page::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom,
            transparent 0%,
            #f7e1ad 50%,
            transparent 100%);
    /* Luminous dissipating line */
    box-shadow: 0 0 10px rgba(247, 225, 173, 0.3);
    border-radius: 10px;
}

.rule-item {
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(247, 225, 173, 0.15);
    /* Right rim light */
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        inset 0 8px 15px rgba(0, 0, 0, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.2);
}

.rule-item::after {
    content: '';
    position: absolute;
    top: 10%;
    right: -45px;
    transform: translateY(-20%);
    height: 300px;
    width: 150px;
    background: radial-gradient(circle at center,
            rgba(247, 225, 173, 0.7) 0%,
            rgba(247, 225, 173, 0.3) 40%,
            transparent 80%);
    filter: blur(20px);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 3;
    /* Яркость ТОЛЬКО из JS (через --spot-opacity) */
    opacity: var(--spot-opacity, 0);
    animation: rulesGlowPulse 4s infinite alternate ease-in-out;
    transition: opacity 0.5s ease;
}

.rule-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
    border-color: rgba(196, 164, 132, 0.4);
}

.rule-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.rule-number {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--gold);
    background: rgba(196, 164, 132, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
}

.rule-header h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: #f7e1ad;
    /* Soft Gold Titles */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    font-weight: 500;
}

.rule-item p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* --- FULL SCREEN MENU PAGE OVERRIDES --- */
.menu-page-modal {
    padding: 0 !important;
    /* Remove safety padding from base modal */
    align-items: flex-start !important;
    /* Align to top */
    background: #010202 !important;
    /* Solid background */
}

.menu-page-modal .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    /* Let modal bg show */
    padding: 0 !important;
    transform: none !important;
    /* Remove slide effect or keep simple */
    overflow-y: hidden;
    /* Scroll handled by inner containers if needed */
    display: flex;
    flex-direction: column;
}

.menu-page-modal .modal-close {
    position: absolute;
    /* Add position absolute to place it correctly */
    top: 15px;
    right: 20px;
    z-index: 100;
    /* Ensure it doesn't overlap header badly */
    background: rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding-bottom: 4px;
    /* Optically center x */
}

/* Ensure sub-nav and grid scroll correctly within the page */
#menu-grid-container {
    padding-bottom: 100px;
    /* Space for bottom nav */
    overflow-y: auto;
    height: 100%;
}

/* --- Loyalty & Rules Modal Styles (Refined) --- */
.loyalty-page,
.rules-page {
    position: relative;
    width: 90% !important;
    max-width: 450px;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 30px !important;

    /* Responsive Scroll & Centering */
    max-height: 90vh;
    /* Don't exceed screen height */
    overflow-y: auto;
    /* Enable scroll inside card */
    margin: auto;
    /* Center in parent flex container */

    /* Reset transforms from older code */
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;

    /* Ensure no absolute positioning conflicts */
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
}

.modal.active .loyalty-page,
.modal.active .rules-page {
    transform: translateY(0) !important;
}



.loyalty-header {
    margin-bottom: 25px;
    text-align: center;
}

.loyalty-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    background: linear-gradient(to right, #f7e1ad, var(--gold), #f7e1ad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0;
}

.loyalty-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 5px;
}

.loyalty-mockup-container {
    margin: 10px auto 30px;
    position: relative;
    width: 200px;
    /* Reduced from 220px */
    height: auto;
    /* Allow height to adapt */
    padding-top: 20px;
    /* Space for floating animation */
    overflow: visible;
    /* Prevent clipping */
}

.phone-mockup {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.6));
    animation: floatingPhone 4s ease-in-out infinite;
}

@keyframes floatingPhone {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.loyalty-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    text-align: left;
    margin-bottom: 30px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.02);
    padding: 10px;
    border-radius: 12px;
}

.feature-item i {
    font-size: 1.25rem;
    color: var(--gold);
    opacity: 0.8;
}

.feature-text h3 {
    font-size: 0.75rem;
    color: #f7e1ad;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.feature-text p {
    font-size: 0.65rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.5);
}

.loyalty-stores {
    display: flex;
    justify-content: space-between;
    /* Push to edges to clear logo */
    gap: 40px;
    /* Stronger separation */
    padding: 0 10px 40px;
    /* Increased bottom padding */
}

.store-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.store-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--gold);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 15px rgba(196, 164, 132, 0.3);
}

.store-btn i {
    font-size: 1.1rem;
}

.store-btn span {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Restore original card flows */
.card-image-click-area {
    width: 100%;
    display: block;
}

/* Catalog and selected-position layout */
.menu-page-modal {
    background:
        radial-gradient(circle at 50% 0%, rgba(117, 82, 48, 0.12), transparent 34%),
        #050706 !important;
}

.menu-page-modal .modal-content {
    max-width: 720px !important;
    margin: 0 auto !important;
    background: transparent !important;
}

.menu-brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 104px;
    padding: 17px 28px 11px;
}

.menu-brand-logo {
    position: absolute;
    left: 28px;
    width: 66px;
    height: 66px;
    object-fit: contain;
    opacity: 0.8;
    filter: sepia(0.45) saturate(0.8) drop-shadow(0 0 12px rgba(196, 164, 132, 0.12));
}

.menu-brand-copy {
    text-align: center;
    color: var(--gold);
}

.menu-brand-name {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 4.6vw, 1.9rem);
    letter-spacing: 0.3em;
    line-height: 1.2;
    white-space: nowrap;
}

.menu-brand-city {
    margin-top: 5px;
    color: rgba(240, 240, 240, 0.52);
    font-size: 0.62rem;
    letter-spacing: 0.38em;
}

.menu-page-modal .menu-top-nav {
    position: relative;
    top: auto;
    z-index: 20;
    flex: 0 0 auto;
    min-height: 104px;
    padding: 6px 18px 0;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.menu-page-modal .menu-tab {
    appearance: none;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
    padding: 10px 6px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: rgba(240, 240, 240, 0.46);
    font: inherit;
    font-family: var(--font-display);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.menu-page-modal .menu-tab i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(196, 164, 132, 0.22);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 164, 132, 0.075), rgba(196, 164, 132, 0.015) 68%, transparent 70%);
    color: rgba(196, 164, 132, 0.6);
    font-size: 1.45rem;
    box-shadow: inset 0 0 18px rgba(196, 164, 132, 0.035);
}

.menu-page-modal .menu-tab.active {
    color: var(--gold);
}

.menu-page-modal .menu-tab.active i {
    border-color: rgba(196, 164, 132, 0.58);
    background: radial-gradient(circle, rgba(196, 164, 132, 0.18), rgba(196, 164, 132, 0.035) 68%, transparent 70%);
    box-shadow: inset 0 0 20px rgba(196, 164, 132, 0.06), 0 0 26px rgba(196, 164, 132, 0.12);
}

.menu-page-modal .menu-tab.active::after {
    bottom: -1px;
    width: 92%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
    animation: none;
    opacity: 0.9;
}

.menu-page-modal .menu-tab.is-scroll-current {
    color: var(--gold);
}

.menu-page-modal .menu-tab.is-scroll-current i {
    transform: translateY(-2px);
    border-color: rgba(196, 164, 132, 0.58);
    background: radial-gradient(circle, rgba(196, 164, 132, 0.18), rgba(196, 164, 132, 0.035) 68%, transparent 70%);
    box-shadow: inset 0 0 20px rgba(196, 164, 132, 0.06), 0 0 26px rgba(196, 164, 132, 0.12);
}

.menu-page-modal .menu-tab.is-scroll-current::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 92%;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
    opacity: 0.9;
}

.menu-page-modal .menu-top-nav.has-scroll-current .menu-tab[data-category="all"].active {
    color: rgba(240, 240, 240, 0.46);
}

.menu-page-modal .menu-top-nav.has-scroll-current .menu-tab[data-category="all"].active i {
    transform: none;
    border-color: rgba(196, 164, 132, 0.22);
    background: radial-gradient(circle, rgba(196, 164, 132, 0.075), rgba(196, 164, 132, 0.015) 68%, transparent 70%);
    box-shadow: inset 0 0 18px rgba(196, 164, 132, 0.035);
}

.menu-page-modal .menu-top-nav.has-scroll-current .menu-tab[data-category="all"].active::after {
    opacity: 0;
}

.menu-page-modal .menu-sub-nav {
    flex: 0 0 auto;
    gap: 10px;
    padding: 18px 26px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
}

.menu-page-modal .sub-pill {
    appearance: none;
    min-width: 104px;
    padding: 9px 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(240, 240, 240, 0.66);
    font: inherit;
    font-family: var(--font-display);
    font-size: 0.78rem;
    text-align: center;
}

.menu-page-modal .sub-pill.active {
    border-color: rgba(196, 164, 132, 0.78);
    background: rgba(196, 164, 132, 0.08);
    color: #e4c09d;
    box-shadow: inset 0 0 16px rgba(196, 164, 132, 0.04);
}

.menu-page-modal .menu-grid,
#menu-grid-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 7px;
    min-height: 0;
    height: auto;
    padding: 0 26px calc(var(--nav-height) + 30px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

#menu-grid-container::after {
    content: '';
    display: block;
    flex: 0 0 var(--menu-anchor-space, 0px);
    width: 1px;
    pointer-events: none;
}

.menu-loading,
.menu-empty {
    width: 100%;
    padding: 42px 20px;
    color: rgba(196, 164, 132, 0.72);
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-align: center;
}

.menu-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 7px 5px 11px;
    color: #e0b489;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.menu-section-divider::before,
.menu-section-divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(203, 164, 126, 0.42));
}

.menu-section-divider::after {
    background: linear-gradient(90deg, rgba(203, 164, 126, 0.42), transparent);
}

.menu-list-section {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 11px;
    margin: 8px 0 14px;
    padding: 13px;
    border: 1px solid rgba(203, 164, 126, 0.13);
    border-radius: 23px;
    background: rgba(10, 12, 10, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 16px 36px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.menu-list-section.is-single-section {
    gap: 12px;
    margin: 4px 0 14px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.menu-category-group {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.menu-category-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.menu-list-section.is-single-section .menu-category-content {
    margin: 2px 0 5px;
    padding: 12px;
    border: 1px solid rgba(203, 164, 126, 0.15);
    border-radius: 19px;
    background: rgba(10, 12, 10, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.028), 0 12px 28px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.menu-list-section.is-single-section .menu-category-level-1 {
    padding-bottom: 10px;
    border-bottom: 0;
}

.menu-category-level-1 {
    padding: 10px 4px 15px;
    border: 0;
    border-bottom: 1px solid rgba(203, 164, 126, 0.1);
    border-radius: 0;
    background: transparent;
}

.menu-category-level-1.has-hidden-heading {
    padding-top: 6px;
}

.menu-list-section > .menu-category-level-1:last-child {
    padding-bottom: 5px;
    border-bottom: 0;
}

.menu-category-group .menu-category-group {
    position: relative;
    margin: 5px 0 1px 11px;
    padding: 6px 0 2px 13px;
    border: 0;
}

.menu-category-group .menu-category-group::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(203, 164, 126, 0.48);
    box-shadow: 0 0 8px rgba(203, 164, 126, 0.22);
}

.menu-category-heading {
    position: relative;
    margin: 0;
    color: rgba(239, 218, 196, 0.9);
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 400;
    letter-spacing: 0.09em;
    line-height: 1.3;
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

.menu-category-group.is-anchor-target > .menu-category-heading {
    color: #f0c69d;
    text-shadow: 0 0 18px rgba(203, 164, 126, 0.38);
}

.menu-category-group.is-anchor-target > .menu-category-content > .menu-category-heading {
    color: #f0c69d;
    text-shadow: 0 0 18px rgba(203, 164, 126, 0.38);
}

.menu-category-level-1 > .menu-category-heading,
.menu-category-level-1 > .menu-category-content > .menu-category-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 1px 3px 5px;
    color: #deb58d;
    font-size: 1rem;
    letter-spacing: 0.055em;
}

.menu-category-level-1 > .menu-category-heading::after,
.menu-category-level-1 > .menu-category-content > .menu-category-heading::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(203, 164, 126, 0.25), transparent);
}

.menu-category-level-2 > .menu-category-heading,
.menu-category-level-2 > .menu-category-content > .menu-category-heading {
    color: rgba(239, 218, 196, 0.82);
    font-size: 0.84rem;
    letter-spacing: 0.045em;
}

.menu-category-level-3 > .menu-category-heading,
.menu-category-level-3 > .menu-category-content > .menu-category-heading {
    color: rgba(239, 218, 196, 0.62);
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.035em;
}

.menu-category-items {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.menu-page-modal .menu-food-card {
    appearance: none;
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-height: 132px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 13px;
    background: rgba(7, 11, 9, 0.82);
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.menu-page-modal .menu-food-card:hover {
    transform: none;
    border-color: rgba(196, 164, 132, 0.35);
    box-shadow: none;
}

.menu-page-modal .menu-food-card:active {
    transform: scale(0.992);
}

.menu-page-modal .menu-food-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.menu-page-modal .menu-food-card.is-selected {
    border-color: rgba(196, 164, 132, 0.62);
    background: rgba(16, 16, 12, 0.94);
}

.menu-page-modal .card-image-click-area {
    flex: 0 0 38%;
    width: 38%;
    min-width: 136px;
}

.menu-page-modal .card-img-wrapper {
    width: 100%;
    height: 100%;
    min-height: 132px;
    border-radius: 0;
    background: #101210;
}

.menu-page-modal .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-page-modal .menu-food-card:hover .card-img-wrapper img {
    transform: none;
}

/* Спокойная фирменная заглушка для блюд без фотографии. */
img[src*="dish-placeholder.svg"] {
    object-fit: contain !important;
    padding: 22px;
    background: #171a18;
    filter: brightness(0) saturate(100%) invert(75%) sepia(30%) saturate(700%) hue-rotate(350deg) brightness(92%) contrast(88%);
}

.food-img img[src*="dish-placeholder.svg"] {
    padding: 12px;
}

.menu-page-modal .card-info {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    padding: 16px 14px 14px 20px;
}

.menu-page-modal .card-info h3 {
    display: -webkit-box;
    margin: 0 0 7px;
    overflow: hidden;
    color: rgba(248, 241, 232, 0.86);
    font-family: var(--font-display);
    font-size: clamp(0.94rem, 3.1vw, 1.1rem);
    font-weight: 400;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.menu-page-modal .card-info p {
    display: -webkit-box;
    margin: 0 0 8px;
    overflow: hidden;
    color: rgba(240, 240, 240, 0.42);
    font-size: 0.72rem;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card-weight {
    margin-top: auto;
    color: rgba(240, 240, 240, 0.46);
    font-size: 0.68rem;
}

.menu-page-modal .card-price {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    min-width: 92px;
    padding: 14px 18px 14px 6px;
    color: #d2aa82;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    white-space: nowrap;
}

#food-modal {
    z-index: 9400 !important;
}

.food-detail-modal {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.food-detail-modal .modal-content {
    width: 100%;
    max-width: 720px;
    max-height: min(calc(100dvh - var(--nav-height) - env(safe-area-inset-bottom, 0px) - 10px), 650px);
    margin: 0 0 calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
    padding: 54px 34px 34px;
    overflow-y: auto;
    border: 1px solid rgba(196, 164, 132, 0.18);
    border-bottom: 0;
    border-radius: 38px 38px 0 0;
    background: rgba(16, 19, 16, 0.72);
    backdrop-filter: blur(28px) saturate(130%);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
    box-shadow: 0 -18px 52px rgba(0, 0, 0, 0.48);
    transform: translateY(105%);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.food-detail-modal.active .modal-content {
    transform: translateY(0);
}

.food-detail-handle {
    position: absolute;
    top: 16px;
    left: 50%;
    width: 82px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.34);
    transform: translateX(-50%);
}

.food-detail-close {
    position: absolute;
    top: 22px;
    right: 27px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(229, 207, 182, 0.55);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.25rem;
    cursor: pointer;
}

.food-detail-close:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.food-detail-summary {
    display: grid;
    grid-template-columns: minmax(180px, 42%) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.food-detail-image {
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid rgba(196, 164, 132, 0.28);
    border-radius: 22px;
    background: #101210;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
}

.food-detail-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.food-detail-copy {
    min-width: 0;
    padding-top: 32px;
}

#modal-food-title {
    margin: 0 0 17px;
    color: #f0dfcf;
    background: none;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 5vw, 2rem);
    font-weight: 400;
    line-height: 1.14;
    -webkit-text-fill-color: currentColor;
}

.food-detail-copy > p {
    margin: 0;
    color: rgba(240, 240, 240, 0.58);
    font-size: 0.85rem;
    line-height: 1.55;
}

.food-detail-modal .food-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(196, 164, 132, 0.16);
}

.food-detail-modal .food-modal-meta span {
    gap: 7px;
    color: rgba(240, 240, 240, 0.58);
    font-size: 0.74rem;
}

.food-detail-modal .food-modal-meta i {
    color: #cba47e;
}

.food-detail-modal .food-nutrition {
    display: flex;
    flex: 1 1 100%;
    align-items: flex-start;
    gap: 8px;
    color: rgba(240, 240, 240, 0.58);
    font-size: 0.72rem;
    line-height: 1.55;
}

.food-detail-modal .food-nutrition strong {
    display: block;
    margin-bottom: 3px;
    color: #cba47e;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
}

.food-detail-modal .food-card-price {
    margin-top: 20px;
    color: #d2aa82;
    font-family: var(--font-display);
    font-size: 1.1rem;
}

@media (max-width: 520px) {
    .menu-brand {
        min-height: 90px;
        padding-inline: 18px;
    }

    .menu-brand-logo {
        left: 18px;
        width: 54px;
        height: 54px;
    }

    .menu-brand-name {
        font-size: 1.12rem;
        letter-spacing: 0.22em;
    }

    .menu-brand-city {
        font-size: 0.52rem;
    }

    .menu-page-modal .menu-top-nav {
        min-height: 92px;
        padding-inline: 8px;
    }

    .menu-page-modal .menu-tab {
        font-size: 0.61rem;
    }

    .menu-page-modal .menu-tab i {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .menu-page-modal .menu-sub-nav {
        padding: 14px 16px;
    }

    .menu-page-modal .sub-pill {
        min-width: 92px;
        padding: 8px 16px;
        font-size: 0.72rem;
    }

    .menu-page-modal .menu-grid,
    #menu-grid-container {
        padding-inline: 12px;
    }

    .menu-page-modal .menu-food-card {
        min-height: 112px;
    }

    .menu-page-modal .card-image-click-area {
        flex-basis: 43%;
        width: 43%;
        min-width: 140px;
    }

    .menu-page-modal .card-img-wrapper {
        min-height: 112px;
    }

    .menu-page-modal .card-info {
        padding: 12px 8px 11px 13px;
    }

    .menu-page-modal .card-info h3 {
        font-size: 0.88rem;
    }

    .menu-page-modal .card-info p {
        font-size: 0.65rem;
    }

    .menu-page-modal .card-price {
        min-width: 70px;
        padding: 10px 10px 10px 3px;
        font-size: 0.9rem;
    }

    .food-detail-modal .modal-content {
        max-height: calc(100dvh - var(--nav-height) - env(safe-area-inset-bottom, 0px) - 10px);
        margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
        padding: 54px 20px 34px;
        scroll-padding-bottom: 34px;
        border-radius: 30px 30px 0 0;
    }

    .food-detail-summary {
        grid-template-columns: minmax(122px, 42%) minmax(0, 1fr);
        gap: 17px;
    }

    .food-detail-image {
        border-radius: 17px;
    }

    .food-detail-copy {
        padding-top: 28px;
    }

    #modal-food-title {
        margin-bottom: 10px;
        font-size: 1.18rem;
    }

    .food-detail-copy > p {
        font-size: 0.72rem;
        line-height: 1.45;
    }

    .food-detail-modal .food-modal-meta {
        gap: 7px;
        margin-top: 12px;
        padding-top: 10px;
    }

    .food-detail-modal .food-modal-meta span {
        font-size: 0.64rem;
    }

    .food-detail-modal .food-card-price {
        margin-top: 13px;
        font-size: 0.94rem;
    }

    .food-detail-close {
        top: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }
}

/* V12 compact concept — Jost-led, lighter and closer to the supplied layout. */
body {
    background:
        radial-gradient(circle at 50% -10%, rgba(146, 96, 50, 0.08), transparent 34%),
        #050505;
}

.hero {
    height: clamp(410px, 57svh, 520px);
    max-height: none;
    background: #050505;
}

.slide {
    justify-content: stretch;
    align-items: stretch;
    padding-top: 0;
}

.slide-bg {
    top: -5%;
    height: 125%;
    object-position: 42% center;
}

.slide-overlay {
    background:
        linear-gradient(90deg, rgba(2, 2, 2, 0.9) 0%, rgba(2, 2, 2, 0.42) 58%, rgba(2, 2, 2, 0.14) 100%),
        linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, 0.08) 55%, rgba(5, 5, 5, 0.36) 100%);
}

.slide-content {
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    max-width: 760px;
    height: 100%;
    margin: 0 auto;
    padding: 90px 22px 112px;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-align: left;
}

.slide-content::before {
    display: none;
}

.hero-brand-logo {
    position: absolute;
    top: 18px;
    left: 20px;
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}

.hero-address {
    margin: 0 0 6px;
    color: rgba(239, 210, 181, 0.62);
    font: 400 0.58rem/1 var(--font-heading);
    letter-spacing: 0.24em;
    opacity: 1;
    text-align: left;
}

.hero-kicker {
    order: 3;
    margin: 7px 0 0;
    color: #d0a879;
    font-size: 0.6rem;
    letter-spacing: 0.36em;
}

.hero-title {
    margin: 0;
    background: none;
    color: #ead9c7;
    font: 300 clamp(2.05rem, 9vw, 3.2rem)/1 var(--font-heading);
    letter-spacing: 0.07em;
    -webkit-text-fill-color: currentColor;
}

.hero-description {
    order: 4;
    margin-top: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.45;
}

.hero-actions {
    order: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 18px;
}

.hero-booking {
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(206, 157, 103, 0.65);
    border-radius: 10px;
    background: rgba(5, 5, 5, 0.4);
    color: #dbb88d;
    font: 500 0.62rem var(--font-heading);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-menu-link {
    color: rgba(244, 228, 211, 0.76);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.hero-menu-link i {
    margin-left: 6px;
    color: #ca9c69;
}

.hero-actions .status-badge {
    flex: 0 0 100%;
    width: max-content;
    height: 22px;
    margin: 0;
    padding-inline: 10px;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.28);
    box-shadow: none;
}

.hero-actions .status-dot {
    width: 8px;
    height: 8px;
    margin-right: 0;
}

.hero-actions .status-dot::before {
    display: none;
}

.hero-actions .status-text {
    font-size: 0.52rem;
    font-weight: 400;
    letter-spacing: 0.09em;
}

.highlights {
    bottom: 16px;
    left: 20px;
    right: 20px;
    width: auto;
    max-width: 720px;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
    transform: none;
}

.highlight-item {
    flex: 1 1 0;
    max-width: 180px;
    min-height: 66px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(194, 143, 89, 0.28);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(24, 23, 21, 0.88), rgba(10, 10, 9, 0.78));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.icon-box {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.highlight-item:first-child .icon-box::after {
    display: none;
}

.icon-box i {
    color: #c99359;
    font-size: 1.15rem;
}

.highlight-item span {
    margin-top: 0;
    color: #e3d0bd;
    font-size: 0.52rem;
    font-weight: 400;
    letter-spacing: 0.11em;
    text-shadow: none;
}

.about-venue {
    padding: 18px 16px 24px;
}

.about-card {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: 24px;
    padding: 20px;
    border-color: rgba(194, 143, 89, 0.22);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(25, 24, 22, 0.76), rgba(10, 10, 9, 0.92));
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

.about-card::after {
    top: -20px;
    right: 4px;
    font-size: 7rem;
}

.about-heading,
.about-copy,
.about-handwritten {
    grid-column: 1;
}

.about-kicker {
    margin-bottom: 6px;
    color: #c99660;
    font-size: 0.52rem;
}

.about-heading h2 {
    color: #ead9c7;
    font: 400 1.22rem/1.2 var(--font-heading);
    letter-spacing: 0.04em;
}

.about-copy {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.72rem;
    line-height: 1.5;
}

.about-handwritten {
    margin-top: 10px;
    color: #c99d70;
    font: 500 1.25rem/1.1 'Caveat', cursive;
    transform: rotate(-2deg);
}

.venue-facts {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-content: center;
    margin-top: 0;
}

.venue-fact {
    min-height: 54px;
    border-color: rgba(194, 143, 89, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.section-header {
    margin-bottom: 9px;
}

.section-header h2 {
    color: #c99660;
    font: 400 0.78rem/1 var(--font-heading);
    letter-spacing: 0.16em;
}

.bottom-nav {
    height: 74px;
    padding-top: 10px;
    padding-bottom: 20px;
}

.fab-circle {
    width: 54px;
    height: 54px;
}

.nav-item {
    font-size: 0.54rem;
    letter-spacing: 0.1em;
}

@media (max-width: 560px) {
    .about-card {
        grid-template-columns: 1fr;
    }

    .about-heading,
    .about-copy,
    .about-handwritten,
    .venue-facts {
        grid-column: 1;
    }

    .venue-facts {
        grid-row: auto;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 16px;
    }

    .venue-fact {
        grid-template-columns: 27px minmax(0, 1fr) auto;
        padding: 9px;
    }

    .venue-fact span {
        line-height: 1.25;
    }

    .highlight-item span {
        letter-spacing: 0.04em;
    }
}

@media (max-width: 370px) {
    .hero {
        height: 440px;
    }

    .slide-content {
        padding-inline: 16px;
    }

    .highlights {
        left: 12px;
        right: 12px;
    }

    .highlight-item {
        min-height: 60px;
        padding-inline: 7px;
    }

    .icon-box {
        width: 28px;
        flex-basis: 28px;
    }

    .venue-facts {
        grid-template-columns: 1fr;
    }
}

/* Thin outlined primary navigation, kept on one horizontal line. */
.menu-page-modal .menu-top-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
}

.menu-page-modal .menu-tab {
    flex: 1 0 72px;
    scroll-snap-align: center;
}

.menu-page-modal .menu-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border: 1px solid rgba(196, 164, 132, 0.22);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 164, 132, 0.075), rgba(196, 164, 132, 0.015) 68%, transparent 70%);
    color: rgba(196, 164, 132, 0.68);
    font-size: 25px;
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: inset 0 0 18px rgba(196, 164, 132, 0.035);
    fill: none;
    stroke: currentColor;
    stroke-width: 0.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-page-modal .menu-tab.active .menu-tab-icon {
    border-color: rgba(196, 164, 132, 0.58);
    background: radial-gradient(circle, rgba(196, 164, 132, 0.18), rgba(196, 164, 132, 0.035) 68%, transparent 70%);
    color: #d7ad84;
    box-shadow: inset 0 0 20px rgba(196, 164, 132, 0.06), 0 0 26px rgba(196, 164, 132, 0.12);
}

.menu-page-modal .sub-pill.is-manageable {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.card-drag-handle {
    touch-action: none;
    cursor: grab;
}

.card-drag-handle:active {
    cursor: grabbing;
}

.category-order-item.is-dragging,
.menu-food-card.is-dragging {
    z-index: 5;
    pointer-events: none;
    border-color: rgba(196, 164, 132, 0.7) !important;
    opacity: 0.78;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

#category-order-modal {
    height: 100dvh;
    align-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
    overflow: hidden;
}

#category-order-modal .category-order-content {
    display: flex;
    flex-direction: column;
    width: min(100%, 680px);
    height: min(760px, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px));
    max-height: none;
    padding: 54px 18px 18px;
    overflow: hidden;
    border-bottom: 1px solid rgba(203, 164, 126, 0.22);
    border-radius: 28px;
}

#category-order-modal .food-detail-close {
    top: 14px;
    right: 16px;
}

.category-order-sections {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    margin: 16px -18px 0;
    padding: 0 18px 10px;
    overflow-x: auto;
}

.category-order-section {
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid rgba(203, 164, 126, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.62);
    font: 500 0.68rem var(--font-body);
}

.category-order-section.active {
    border-color: rgba(203, 164, 126, 0.72);
    background: rgba(203, 164, 126, 0.14);
    color: #e2bb95;
}

.category-order-help {
    flex: 0 0 auto;
    margin: 4px 0 12px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.65rem;
}

.category-order-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 2px 22px;
}

.category-order-item {
    position: relative;
    display: grid;
    grid-template-columns: 38px 24px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    flex: 0 0 54px;
    padding: 7px 12px 7px 7px;
    border: 1px solid rgba(203, 164, 126, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    color: #ead9c8;
    cursor: default;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.category-order-item:active {
    cursor: default;
}

.category-order-item.is-hidden-category {
    border-style: dashed;
    background: rgba(255, 255, 255, 0.018);
}

.category-order-item.is-hidden-category strong,
.category-order-item.is-hidden-category .category-order-number {
    opacity: 0.46;
}

.category-order-item strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
}

.category-order-grip {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(203, 164, 126, 0.3);
    border-radius: 10px;
    background: rgba(203, 164, 126, 0.1);
    color: #d7ad84;
    cursor: grab;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

.category-order-grip i {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

.category-order-drag-zone {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 46px;
    width: calc(38% - 46px);
    min-width: 48px;
    cursor: grab;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

.category-order-drag-zone:active {
    cursor: grabbing;
}

.category-order-grip:active {
    cursor: grabbing;
}

.category-order-number {
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.65rem;
    text-align: center;
}

.category-order-visibility,
.card-visibility-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(203, 164, 126, 0.28);
    border-radius: 50%;
    background: rgba(5, 8, 6, 0.82);
    color: #d6ad85;
    cursor: pointer;
    touch-action: manipulation;
}

.category-order-item.is-hidden-category .category-order-visibility {
    color: #efa99e;
}

.category-order-visibility:disabled,
.card-visibility-toggle:disabled {
    opacity: 0.45;
}

.menu-page-modal .menu-food-card {
    position: relative;
}

.card-drag-handle {
    position: absolute;
    right: 9px;
    bottom: 9px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(203, 164, 126, 0.3);
    border-radius: 50%;
    background: rgba(5, 8, 6, 0.88);
    color: #d2aa82;
}

@media (max-width: 520px) {
    .menu-page-modal .menu-top-nav {
        min-height: 96px;
        padding-inline: 3px;
    }

    .menu-page-modal .menu-tab {
        flex-basis: 68px;
        min-width: 68px;
    }

    .menu-page-modal .menu-tab-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 23px;
    }
}

@media (max-width: 360px) {
    .menu-brand-logo {
        width: 46px;
        height: 46px;
    }

    .menu-brand-name {
        font-size: 0.98rem;
    }

    .menu-page-modal .card-image-click-area {
        min-width: 92px;
    }

    .food-detail-summary {
        grid-template-columns: 1fr;
    }

    .food-detail-image {
        width: min(100%, 260px);
    }

    .food-detail-copy {
        padding-top: 0;
    }
}

/* Embedded catalog management. The controls stay visually subordinate to
   the guest menu and are only revealed after server-side Telegram auth. */
.manage-menu-button {
    position: absolute;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 1px solid rgba(203, 164, 126, 0.34);
    border-radius: 999px;
    background: rgba(203, 164, 126, 0.08);
    color: #d2aa82;
    font: 500 0.68rem var(--font-body);
    cursor: pointer;
}

.manage-menu-button.active {
    top: 14px;
    right: 14px;
    z-index: 4;
    width: 38px;
    height: 38px;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    background: rgba(10, 9, 8, 0.68);
    color: #ead5c0;
    font-size: 1rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.manage-menu-button.active span {
    display: none;
}

.management-toolbar {
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(203, 164, 126, 0.18);
    background: rgba(203, 164, 126, 0.08);
}

.management-toolbar:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
}

.management-toolbar div {
    display: grid;
    gap: 3px;
}

.management-toolbar div:first-child {
    flex: 1 0 100%;
    margin-right: 0;
}

.management-toolbar strong {
    color: #ead9c8;
    font-size: 0.75rem;
}

.management-toolbar span {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.58rem;
}

.management-sync-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 9px 11px;
    border: 1px solid rgba(203, 164, 126, 0.32);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    color: #d2aa82;
    font-size: 0.62rem;
}

.management-sync-button.is-loading i {
    animation: management-spin 0.8s linear infinite;
}

@keyframes management-spin {
    to { transform: rotate(360deg); }
}

.menu-food-card.is-hidden-item {
    opacity: 0.68;
    filter: grayscale(0.9);
    border-style: dashed;
    border-color: rgba(203, 164, 126, 0.42);
}

.sub-pill.is-hidden-category {
    border-style: dashed;
    color: rgba(255, 255, 255, 0.55);
}

.card-visibility-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(5, 8, 6, 0.86);
    font-size: 0.74rem;
}

.menu-food-card.is-hidden-item .card-visibility-toggle {
    color: #f0b3a8;
}

.card-admin-state {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(5, 8, 6, 0.86);
    color: #d2aa82;
    font-size: 0.53rem;
    letter-spacing: 0.08em;
}

.card-admin-state.is-hidden-state {
    color: #f0b3a8;
}

.menu-editor-modal {
    z-index: 10100 !important;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(0, 0, 0, 0.74);
    backdrop-filter: blur(3px);
}

.menu-editor-modal .modal-content {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    margin: 0;
    padding: 58px 24px 30px;
    overflow-y: auto;
    border: 1px solid rgba(203, 164, 126, 0.22);
    border-bottom: 0;
    border-radius: 32px 32px 0 0;
    background: linear-gradient(145deg, #1b1b17, #0b0e0c 70%);
    transform: translateY(105%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.menu-editor-modal.active .modal-content {
    transform: translateY(0);
}

.editor-heading {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.editor-heading img {
    width: 92px;
    height: 92px;
    border: 1px solid rgba(203, 164, 126, 0.28);
    border-radius: 16px;
    object-fit: cover;
}

.editor-kicker {
    color: #cba47e;
    font-size: 0.56rem;
    letter-spacing: 0.14em;
}

#editor-title {
    margin: 6px 0;
    color: #f0dfcf;
    font: 400 1.25rem/1.2 var(--font-display);
}

.editor-source-category {
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.65rem;
    line-height: 1.35;
}

.editor-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(203, 164, 126, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.editor-switch-row span {
    display: grid;
    gap: 3px;
}

.editor-switch-row strong {
    color: #ead9c8;
    font-size: 0.78rem;
}

.editor-switch-row small,
.editor-file-label small {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6rem;
}

.editor-switch-row input {
    position: absolute;
    opacity: 0;
}

.editor-switch-row i {
    position: relative;
    width: 43px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #333833;
    transition: background 0.2s;
}

.editor-switch-row i::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d8d8d5;
    transition: transform 0.2s;
}

.editor-switch-row input:checked + i {
    background: #b88d63;
}

.editor-switch-row input:checked + i::after {
    transform: translateX(19px);
}

.editor-fields {
    display: grid;
    gap: 14px;
}

.editor-fields > label,
.editor-category-field,
.editor-readonly-grid label,
.editor-file-label {
    display: grid;
    gap: 7px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.67rem;
}

.editor-fields input[type='text'],
.editor-fields input[type='number'],
.editor-fields textarea,
.editor-fields select,
.editor-fields input[type='file'] {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(203, 164, 126, 0.2);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.045);
    color: #eee4da;
    font: 400 0.76rem/1.4 var(--font-body);
}

.editor-fields textarea {
    resize: vertical;
}

.editor-fields input[readonly],
.editor-fields select:disabled {
    color: rgba(255, 255, 255, 0.38);
    background: rgba(0, 0, 0, 0.16);
}

.editor-fields option {
    color: #111;
}

.editor-category-field {
    position: relative;
}

.editor-category-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid rgba(203, 164, 126, 0.26);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(203, 164, 126, 0.09), rgba(255, 255, 255, 0.035));
    color: #eee4da;
    font: 400 0.76rem/1.35 var(--font-body);
    text-align: left;
}

.editor-category-trigger i {
    color: #cba47e;
    transition: transform 0.2s ease;
}

.editor-category-trigger[aria-expanded='true'] i {
    transform: rotate(180deg);
}

.editor-category-trigger:disabled {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.16);
    color: rgba(255, 255, 255, 0.42);
}

.editor-category-menu {
    display: grid;
    max-height: 260px;
    margin-top: 2px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid rgba(203, 164, 126, 0.22);
    border-radius: 14px;
    background: #111411;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4);
}

.editor-category-menu[hidden] {
    display: none;
}

.editor-category-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #eee4da;
    text-align: left;
}

.editor-category-option span {
    display: grid;
    gap: 2px;
}

.editor-category-option strong {
    font-size: 0.75rem;
    font-weight: 500;
}

.editor-category-option small {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.58rem;
}

.editor-category-option i {
    opacity: 0;
    color: #cba47e;
}

.editor-category-option.is-selected {
    background: rgba(203, 164, 126, 0.12);
}

.editor-category-option.is-selected i {
    opacity: 1;
}

.editor-move-promotions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid rgba(203, 164, 126, 0.38);
    border-radius: 12px;
    background: rgba(203, 164, 126, 0.08);
    color: #d9b48f;
    font: 500 0.72rem var(--font-body);
}

.editor-move-promotions.is-selected {
    border-color: rgba(118, 155, 126, 0.34);
    background: rgba(118, 155, 126, 0.1);
    color: #a9c4ad;
}

.editor-readonly-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.editor-source-toggle,
.editor-flags label {
    display: flex !important;
    grid-template-columns: none;
    align-items: center;
    gap: 9px !important;
}

.editor-source-toggle input,
.editor-flags input {
    accent-color: #cba47e;
}

.editor-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 0 2px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.68rem;
}

.editor-error {
    margin-top: 15px;
    padding: 10px 12px;
    border: 1px solid rgba(213, 99, 83, 0.35);
    border-radius: 10px;
    background: rgba(213, 99, 83, 0.08);
    color: #e7a398;
    font-size: 0.68rem;
}

.editor-save-button {
    width: 100%;
    margin-top: 18px;
    padding: 13px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #d0aa83, #a9784e);
    color: #12130f;
    font: 600 0.76rem var(--font-body);
}

.editor-save-button:disabled {
    opacity: 0.55;
}

.menu-load-error {
    padding: 30px;
    color: #e7a398;
    text-align: center;
}

.menu-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin: 8px 20px 0;
    padding: 0 16px;
    min-height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.42);
}

.menu-search:focus-within {
    border-color: rgba(203, 164, 126, 0.38);
    box-shadow: 0 0 0 3px rgba(203, 164, 126, 0.06);
}

.menu-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #eee4da;
    font: 400 0.78rem var(--font-body);
}

.menu-search input::placeholder {
    color: rgba(255, 255, 255, 0.34);
}

.menu-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.58);
}

.menu-page-modal .menu-top-nav {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
}

.menu-page-modal .menu-top-nav::-webkit-scrollbar {
    display: none;
}

.menu-page-modal .menu-tab {
    flex: 1 0 78px;
}

.menu-page-modal .menu-tab span {
    max-width: 94px;
    line-height: 1.2;
    text-align: center;
}

.home-promotions {
    position: relative;
    z-index: 3;
    margin-top: -42px;
    padding-top: 8px;
}

.home-promotions:not([hidden]) + .menu-listing {
    margin-top: 0;
}

.promotion-slider {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 20px 30px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

.promotion-slider .promotion-card {
    flex: 0 0 calc(100vw - 40px);
    width: calc(100vw - 40px);
    max-width: 520px;
}

.promotion-card {
    position: relative;
    flex: 0 0 min(82vw, 520px);
    min-height: 250px;
    overflow: hidden;
    border: 1px solid rgba(203, 164, 126, 0.2);
    border-radius: 20px;
    background: #11140f;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
    scroll-snap-align: start;
    cursor: pointer;
}

.promotion-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promotion-card-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(4, 7, 5, 0.88));
}

.promotion-card-copy {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    padding: 24px;
}

.promotion-card h3 {
    margin: 0;
    color: #f1e1d1;
    font: 400 1.45rem/1.15 var(--font-display);
}

.promotion-card p {
    max-width: 480px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.74rem;
    line-height: 1.45;
}

.promotion-link-label,
.promotion-edit-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #d2aa82;
    font-size: 0.66rem;
    letter-spacing: 0.05em;
}

.promotion-admin-state {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(4, 7, 5, 0.74);
    color: #d2aa82;
    font-size: 0.52rem;
    letter-spacing: 0.08em;
}

.promotion-card.is-hidden-promotion {
    opacity: 0.52;
    filter: grayscale(0.65);
}

.promotion-catalog-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
    gap: 16px !important;
}

.promotion-catalog-grid .promotion-card {
    width: 100%;
    min-height: 260px;
}

.promotion-manager-content {
    padding-top: 54px !important;
}

.promotion-manager-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.promotion-manager-heading h2 {
    margin: 4px 0 0;
    color: #f1e1d1;
    font: 400 1.55rem/1.15 var(--font-display);
}

.promotion-manager-heading .management-sync-button {
    flex: 0 0 auto;
}

#promotion-manager-list:empty::before {
    content: 'Акций пока нет';
    color: rgba(255, 255, 255, 0.56);
}

.promotion-editor-actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: end;
}

.promotion-delete-button {
    height: 42px;
    padding: 0 17px;
    border: 1px solid rgba(213, 99, 83, 0.38);
    border-radius: 12px;
    background: rgba(213, 99, 83, 0.08);
    color: #e7a398;
}

.promotion-editor-actions .editor-save-button {
    margin-top: 18px;
}

@media (max-width: 520px) {
    .menu-list-section {
        gap: 9px;
        padding: 9px;
        border-radius: 18px;
    }

    .menu-category-level-1 {
        padding: 8px 3px 13px;
    }

    .menu-list-section.is-single-section .menu-category-content {
        padding: 10px;
        border-radius: 17px;
    }

    .menu-category-group .menu-category-group {
        margin-left: 6px;
        padding-left: 8px;
    }

    .manage-menu-button {
        right: 12px;
        padding: 8px 9px;
    }

    .manage-menu-button span {
        display: none;
    }

    .management-toolbar {
        padding-inline: 12px;
    }

    .management-sync-button {
        max-width: 126px;
    }

    .menu-search {
        margin-inline: 12px;
    }

    .menu-page-modal .menu-top-nav {
        padding-inline: 4px;
    }

    .menu-page-modal .menu-tab {
        flex-basis: 68px;
        padding-inline: 3px;
        font-size: 0.54rem;
    }

    .menu-page-modal .menu-tab i {
        width: 42px;
        height: 42px;
    }

    .promotion-card {
        min-height: 220px;
    }

    .promotion-manager-heading {
        align-items: flex-end;
    }

    .menu-editor-modal .modal-content {
        padding-inline: 18px;
    }
}

/* Jost remains the primary working typeface throughout the catalogue. */
.food-card.vertical h3,
.menu-page-modal .card-info h3,
.menu-page-modal .card-price,
.menu-page-modal .sub-pill,
.menu-category-heading,
.menu-section-divider,
.promotion-card h3,
.promotion-card p {
    font-family: var(--font-heading);
}