/* ============================================
   QrMenum - Global Styles
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Reserve space for scrollbar so layout width stays constant whether
       content scrolls or not. Prevents "content shifts left on scroll"
       artifacts on desktop browsers. */
    scrollbar-gutter: stable;
}

/* When loaded in an iframe (dashboard / settings preview), kill the native
   scrollbar entirely. Scrolling still works via wheel/touch; the layout
   width never changes so content cannot shift sideways. Flag is set from
   JS (preview-bridge.js) to avoid affecting direct browser visits. */
html.in-iframe {
    scrollbar-gutter: auto;
    scrollbar-width: none;
}
html.in-iframe::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

body {
    font-family: var(--font-primary);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

ul, ol {
    list-style: none;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* ============================================
   Hero / Homepage
   ============================================ */

.hero {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: var(--space-xl) var(--space-md);
    padding-bottom: calc(var(--nav-height) + var(--space-xl) + var(--safe-bottom));
}

/* Empty hero backdrop — used when the tenant has neither an outlet
   cover image nor a homepage media row. Without this rule the hero
   sits on the body's plain white/cream and the logo + buttons float
   on a blank canvas. The animated gradient uses the operator's brand
   colors so a freshly-set-up menu still feels designed, not empty. */
.hero--empty .hero__video-wrap {
    background: linear-gradient(
        135deg,
        var(--color-primary, #c8a97e) 0%,
        var(--color-secondary, #1a1a2e) 50%,
        var(--color-primary, #c8a97e) 100%
    );
    background-size: 200% 200%;
    animation: heroEmptyFlow 14s ease-in-out infinite;
}
@keyframes heroEmptyFlow {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
@media (prefers-reduced-motion: reduce) {
    .hero--empty .hero__video-wrap { animation: none; }
}

.hero__video-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

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

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.15) 40%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

.hero__logo {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: var(--space-2xl);
    animation: fadeInDown 0.8s ease;
    background: var(--hero-glass-bg, #fef7e663);
    width: 100%;
    backdrop-filter: var(--hero-glass-blur, var(--blur-md));
    -webkit-backdrop-filter: var(--hero-glass-blur, var(--blur-md));
    border-radius: 12px;
    padding: 10px;
}

.hero__logo-img {
    max-width: 180px;
    max-height: 180px;
    margin: 0 auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.hero__logo-text {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
}

/* Outlet name caption — sits BELOW the logo block (not inside)
   so the brand mark and the outlet name read as separate layers.
   Color + text-shadow come from inline style on the wrapper element
   (set in home/index.php from per-outlet DB columns); the rule
   below only defines size/spacing/weight. */
.hero__outlet {
    margin-top: 18px;
    text-align: center;
    z-index: 99;
    /* Inherit text-shadow set on the wrapper inline style so both
       the name and the tagline pick up the operator's shadow choice. */
}

.hero__outlet-name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: inherit;
}

.hero__outlet-tagline {
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0.06em;
    opacity: 0.85;
    margin-top: 4px;
    text-shadow: inherit;
}

body.theme-light .hero__outlet-tagline {
    color: var(--color-text);
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.5);
}

.hero__categories {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-width);
    animation: fadeInUp 0.8s ease 0.2s both;
}

/* ============================================
   Category Grid (Homepage)
   ============================================ */

.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

/* Odd-count centering — when the operator has 1, 3, 5, ... cards the
   trailing card otherwise pins itself to the left half and looks
   misaligned. This rule spans the last card across both columns and
   caps its width at "one column" so it visually matches its siblings
   but centers horizontally instead of left-justifying.
   :nth-child(odd):last-child matches only when the total count is
   odd — even counts hit the default 2-col grid as before. */
.category-grid > .category-card:nth-child(odd):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--space-md)) / 2);
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);

    background: var(--card-glass-bg, var(--color-bg-glass));
    backdrop-filter: var(--card-glass-blur, var(--blur-md));
    -webkit-backdrop-filter: var(--card-glass-blur, var(--blur-md));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    text-align: center;
    min-height: 110px;
}

.category-card:active {
    transform: scale(0.97);
    background: var(--color-bg-glass-strong);
}

.category-card__icon {
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    /* Drive `fill="currentColor"` paths via CSS color */
    color: var(--color-bg);
}
.category-card__icon img,
.category-card__icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    fill: var(--color-bg);
}

.category-card__name {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-bg);
}

/* ============================================
   Page Content Area
   ============================================ */

.page-content {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    background: var(--color-bg);
    max-width: 1180px;
    margin: auto;
}

.page-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

.page-header__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-bg-glass-strong);
    transition: background var(--transition-fast);
}

.page-header__back:active {
    background: var(--color-bg-card-hover);
}

.page-header__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    flex: 1;
}

/* ============================================
   Modals Base
   ============================================ */

.search-modal,
.info-modal,
.lang-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.search-modal[hidden],
.info-modal[hidden],
.lang-modal[hidden] {
    display: none;
}

.search-modal__backdrop,
.info-modal__backdrop,
.lang-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}

.search-modal__content {
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    height: 100%;
    background: var(--color-bg-modal);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.info-modal__content,
.lang-modal__content {
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    max-height: 80vh;
    background: var(--color-bg-modal);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-lg);
    animation: slideUp 0.3s ease;
    overflow-y: auto;
}

.info-modal__header,
.lang-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.info-modal__header h3,
.lang-modal__header h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.info-modal__close,
.lang-modal__close {
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.info-modal__logo {
    text-align: center;
    margin-bottom: var(--space-md);
}

.info-modal__logo img {
    max-width: 120px;
    margin: 0 auto;
}

.info-modal__business-name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    text-align: center;
    margin-bottom: var(--space-lg);
}

/* Language Modal */
.lang-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.lang-modal__form {
    display: contents;
}

.lang-modal__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    width: 100%;
    text-align: left;
}

.lang-modal__item:active {
    background: var(--color-bg-glass-strong);
}

.lang-modal__item--active {
    background: var(--color-bg-glass);
    border: 1px solid var(--color-primary);
}

.lang-modal__flag {
    font-size: 1.5rem;
}

.lang-modal__name {
    flex: 1;
    font-weight: 500;
}

.lang-modal__check {
    color: var(--color-primary);
}

/* ============================================
   Search Modal Specifics
   ============================================ */

.search-modal__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.search-modal__input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-modal__icon {
    position: absolute;
    left: var(--space-sm);
    width: 20px;
    height: 20px;
    opacity: 0.4;
}

.search-modal__input {
    width: 100%;
    padding: var(--space-md) var(--space-md);
    padding-left: 36px;
    background: var(--color-bg-glass);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-base);
    outline: none;
    transition: border-color var(--transition-fast);
}

.search-modal__input:focus {
    border-color: var(--color-primary);
}

.search-modal__input::placeholder {
    color: var(--color-text-muted);
}

.search-modal__clear {
    position: absolute;
    right: var(--space-sm);
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.search-modal__close {
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-sm);
    white-space: nowrap;
}

.search-modal__results {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
}

.search-modal__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    color: var(--color-text-muted);
    text-align: center;
}

.search-modal__empty[hidden] {
    display: none;
}

/* Search - Featured Products */
.search-featured {
    padding: var(--space-md);
}

.search-featured__title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-md);
}

.search-featured__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.search-featured__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
}

.search-featured__item:active {
    background: var(--color-bg-glass);
}

.search-featured__img {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-bg-glass);
}

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

.search-featured__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.search-featured__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.search-featured__name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-featured__price {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 2px;
}

/* ============================================
   Animations
   ============================================ */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-light);
    border-radius: 2px;
}

/* ============================================
   Powered By Badge
   ============================================ */

.powered-badge {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-md) var(--space-md) calc(var(--nav-height) + var(--space-xl) + var(--safe-bottom));
}

.powered-badge__link {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    opacity: 0.75;
    transition: opacity 0.3s ease;
    text-decoration: none;
}

.powered-badge__link:hover,
.powered-badge__link:active {
    opacity: 0.8;
}

.powered-badge__logo {
    height: 20px;
    width: auto;
}

/* ============================================
   Light Mode Overrides
   ============================================ */

/* Hero overlay - lighter for light mode */
body.theme-light .hero__overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

/* Hero text needs dark color in light mode */
body.theme-light .hero__logo-text {
    color: var(--color-text);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.5);
}

body.theme-light .hero__logo-img {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

/* Category cards - light glass */
body.theme-light .category-card {
    background: var(--card-glass-bg, rgba(217, 189, 150, 0.5));
    backdrop-filter: var(--card-glass-blur, var(--blur-md));
    -webkit-backdrop-filter: var(--card-glass-blur, var(--blur-md));
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

body.theme-light .category-card:active {
    background: rgba(255, 255, 255, 0.9);
}

/* Page header */
body.theme-light .page-header {
    background: rgba(245, 245, 245, 0.9);
}

body.theme-light .page-header__back {
    background: rgba(0, 0, 0, 0.05);
}

/* Product section titles */
body.theme-light .product-section__title {
    color: var(--color-primary-dark);
    background: var(--color-bg);
}

/* Product card borders */
body.theme-light .product-card + .product-card {
    border-color: rgba(0, 0, 0, 0.06);
}

/* Search modal */
body.theme-light .search-modal__content {
    background: rgba(245, 245, 245, 0.98);
}

body.theme-light .search-modal__input {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}

/* Language modal */
body.theme-light .lang-modal__content {
    background: rgba(255, 255, 255, 0.98);
    color: #1a1a1a;
}

body.theme-light .lang-modal__item--active {
    background: rgba(0, 0, 0, 0.04);
}

/* Category tabs */
body.theme-light .category-tabs {
    background: var(--color-bg);
    border-color: rgba(0, 0, 0, 0.06);
}

body.theme-light .category-tab {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-secondary);
}

body.theme-light .category-tab--active {
    background: var(--color-primary);
    color: #fff;
}

/* Product detail - back button on image */
body.theme-light .page-content [style*="background: rgba(0,0,0,0.5)"] {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #333;
}

/* Bottom nav icon colors for light footer */
body.theme-light .bottom-nav__icon {
    color: var(--color-footer-text, rgba(0, 0, 0, 0.5));
}

/* ============================================
   Desktop App Frame — tablet-feel column
   ============================================
   Activates ONLY on laptop/desktop (≥1100px). Real tablets (768-1099px)
   keep their native full-width feel — it's their natural habitat. On big
   monitors the menu stays in a centered ~800px "tablet-like" column with
   theme-tinted gradient edges. */
@media (min-width: 1100px) {
    body {
        background: linear-gradient(135deg,
            var(--color-footer-bg, #1a1a1a) 0%,
            var(--color-primary-dark, #8a6f47) 50%,
            var(--color-footer-bg, #1a1a1a) 100%);
        background-attachment: fixed;
        min-height: 100dvh;
    }

    /* Constrain ONLY the always-visible chrome — header, bottom nav, hero bg,
       and the content column. Menu panel + modals stay full-viewport so their
       backdrop scrim darkens everything behind (including the gradient edges). */
    .top-header,
    .bottom-nav-wrap,
    .hero__video-wrap,
    .hero__overlay {
        max-width: 800px;
        width: 100%;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }

    /* Menu panel drawer: stays full-viewport for proper scrim, but the
       sliding drawer content anchors to the frame's left edge. The drawer's
       inner element (usually .menu-panel__content) keeps its own width. */
    .menu-panel,
    .menu-panel-overlay,
    .search-modal,
    .info-modal,
    .lang-modal,
    .campaign-modal {
        /* no frame constraint — full viewport for backdrop */
    }

    /* Inner modal content blocks: center them with tablet width */
    .search-modal__content,
    .info-modal__content,
    .lang-modal__content,
    .campaign-modal__content {
        max-width: 800px !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* Centered flow-layout column */
    .page-wrap {
        max-width: 800px;
        margin: 0 auto;
        background: var(--color-bg);
        min-height: 100dvh;
        box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
    }

    /* Light theme: softer gradient, no heavy shadow */
    body.theme-light {
        background: linear-gradient(135deg, #f5f5f0 0%, #e8e4d8 50%, #dbd6c5 100%);
        background-attachment: fixed;
    }
    body.theme-light .page-wrap {
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.18);
    }
}

/* ============================================
   Desktop Mockup Stage (≥1280px)
   ============================================
   Turns the empty side stripes into a brand stage. The page-wrap
   becomes a "device" — rounded corners, generous shadow, floating
   margin — and a brand info card slides in on the left as a glass
   card with logo, today's hours, address with maps link, phone,
   and social icons. A fixed `.desktop-stage` div behind everything
   carries the tenant's cover image (with dark overlay) so the
   whole window feels like a marketing landing.

   Mobile/tablet (<1280px) ignore all of this — the .desktop-stage
   and .desktop-brand-card are display:none below the threshold.

   The 1280px threshold (vs 1100px for the existing tablet-feel
   column) is intentional: the brand card needs ~300px of breathing
   room and crowding it into 1100px produces a worse result than
   the gradient-only frame. */

/* Stage backdrop layer — hidden by default; revealed at 1280px.
   Inline style on the element supplies background-image. The dark
   overlay is applied as ::after on the same element. */
.desktop-stage {
    display: none;
}

@media (min-width: 1280px) {
    .desktop-stage {
        display: block;
        position: fixed;
        inset: 0;
        z-index: -1;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* Default fallback when no cover image — gradient using
           tenant theme colors (matches the previous 1100px frame
           gradient so brandless tenants don't regress). */
        background-color: var(--color-footer-bg, #1a1a1a);
        background-image: linear-gradient(135deg,
            var(--color-footer-bg, #1a1a1a) 0%,
            var(--color-primary-dark, #8a6f47) 50%,
            var(--color-footer-bg, #1a1a1a) 100%);
    }
    /* Dark overlay on top of the cover image. Slightly blurred so
       busy food photos don't fight the foreground card legibility.
       Note: blur affects what's BEHIND ::after which is the stage's
       background-image — exactly what we want. */
    .desktop-stage::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(8, 10, 18, 0.62);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    /* The "device" — rounded card floating on the stage. */
    .page-wrap {
        position: relative;
        z-index: 2;
        max-width: 760px;
        margin: 32px auto;
        border-radius: 36px;
        overflow: hidden;
        min-height: calc(100dvh - 64px);
        box-shadow:
            0 30px 80px -10px rgba(0, 0, 0, 0.55),
            0 12px 32px -8px rgba(0, 0, 0, 0.35);
    }

    /* Pinned chrome elements follow the new 760px rounded width
       and respect the rounded clip. */
    .top-header,
    .bottom-nav-wrap,
    .hero__video-wrap,
    .hero__overlay {
        max-width: 760px;
    }
    .top-header {
        border-top-left-radius: 36px;
        border-top-right-radius: 36px;
    }
    .bottom-nav-wrap {
        border-bottom-left-radius: 36px;
        border-bottom-right-radius: 36px;
    }

    /* ── Brand card (glass card) ─────────────────────────────── */
    .desktop-brand-card {
        position: fixed;
        left: max(32px, calc((100vw - 760px) / 2 - 360px));
        top: 50%;
        transform: translateY(-50%);
        width: 300px;
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        z-index: 3;
        /* Glass card surface */
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(24px) saturate(140%);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 24px;
        padding: 24px 22px;
        box-shadow:
            0 20px 60px -10px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.95);
        font-family: var(--font-body, 'Inter'), sans-serif;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }
    .desktop-brand-card::-webkit-scrollbar { width: 4px; }
    .desktop-brand-card::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.18);
        border-radius: 2px;
    }

    /* Logo — sits on a soft white tile so brand marks with a
       white stroke or transparent backgrounds stay readable on
       any cover. */
    .dbc-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.96);
        border-radius: 16px;
        padding: 14px 16px;
        margin-bottom: 16px;
        box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.3);
    }
    .dbc-logo img {
        max-width: 100%;
        max-height: 64px;
        width: auto;
        height: auto;
        display: block;
    }

    .dbc-brand-name {
        font-family: var(--font-heading, 'Playfair Display'), serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 20px;
        letter-spacing: -0.01em;
        color: #fff;
    }

    /* Section blocks — separated by a faint divider for hierarchy. */
    .dbc-block {
        margin: 0;
        padding: 14px 0;
        font-size: 13px;
        line-height: 1.5;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }
    .dbc-block:first-of-type {
        border-top: none;
        padding-top: 0;
    }
    .dbc-block__label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: rgba(255, 255, 255, 0.55);
        margin-bottom: 6px;
    }

    /* "Bugün" hours block — the most important info, gets a
       brand-colored accent stripe on the left. */
    .dbc-block--hours {
        position: relative;
        padding-left: 12px;
    }
    .dbc-block--hours::before {
        content: '';
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 3px;
        background: var(--color-primary, #c8a97e);
        border-radius: 2px;
    }
    .dbc-block--hours:first-of-type {
        padding-left: 12px;
    }
    .dbc-block--hours:first-of-type::before {
        top: 0;
    }
    .dbc-hours {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .dbc-hours__day {
        font-weight: 600;
        font-size: 14px;
        color: #fff;
    }
    .dbc-hours__time {
        font-family: var(--font-body, 'Inter'), monospace;
        font-variant-numeric: tabular-nums;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        letter-spacing: 0.02em;
    }

    /* Address block. */
    .dbc-address-link,
    .dbc-phone-link {
        color: inherit;
        text-decoration: none;
        transition: color 0.15s;
    }
    .dbc-address-link {
        display: block;
    }
    .dbc-address-text {
        display: block;
        font-size: 13px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.92);
    }
    .dbc-maps-cta {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 8px;
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.10);
        border-radius: 999px;
        font-size: 11px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        transition: background 0.15s;
    }
    .dbc-address-link:hover .dbc-maps-cta {
        background: rgba(255, 255, 255, 0.18);
    }

    /* Phone block — call-to-action style. */
    .dbc-phone-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        color: #fff;
        transition: background 0.15s, border-color 0.15s, transform 0.15s;
    }
    .dbc-phone-link:hover {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.22);
        transform: translateY(-1px);
    }
    .dbc-phone-link svg {
        opacity: 0.7;
    }

    /* Social icons row. */
    .dbc-socials {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }
    .dbc-social-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.10);
        color: rgba(255, 255, 255, 0.92);
        transition: background 0.15s, transform 0.15s, color 0.15s;
    }
    .dbc-social-icon:hover {
        background: var(--color-primary, #c8a97e);
        color: #fff;
        transform: translateY(-2px);
    }
}

/* Hide the brand card markup below the desktop threshold — server
   always renders it; CSS toggles visibility for free. */
@media (max-width: 1279px) {
    .desktop-brand-card { display: none !important; }
    .desktop-stage      { display: none !important; }
}