/* ═══════════════════════════════════════════════════════════════════════════
   NAMA THEME — mobile.css
   Aethelgard Noir Design System — Mobile Overrides (≤ 768px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Base overrides ─────────────────────────────────────────────────────── */
    html, body {
        overflow: hidden;
        height: 100%;
    }

    /* Hide desktop-only elements on mobile */
    .home-scroll-indicator { display: none !important; }

    /* ── Navigation ─────────────────────────────────────────────────────────── */
    /* Hide desktop nav */
    .nama-nav-desktop,
    .nama-nav-dropdown,
    .nama-nav-links,
    .nama-nav-link { 
        display: none !important; 
    }

    /* Show mobile top bar */
    .nama-nav-mobile-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 24px 24px;
        pointer-events: all;
        position: relative;
        z-index: 10001;
    }

    /* Raise the header above all mobile panels */
    .nama-header {
        z-index: 10002 !important;
    }

    .nama-burger--mobile { display: flex !important; }

    .nama-burger--mobile.is-active .burger-line:nth-child(1) { transform: translateX(8px); width: 24px; }
    .nama-burger--mobile.is-active .burger-line:nth-child(2) { opacity: 1; }
    .nama-burger--mobile.is-active .burger-line:nth-child(3) { transform: translateX(8px); width: 24px; }

    /* Disable :hover-driven indent on mobile — touch taps make :hover "stick"
       and would incorrectly show the selected look. The burger's selected state
       is driven exclusively by .is-active (toggled by the JS when any overlay
       is open). Specificity bumped with :not(.is-active) so that active+touch
       still renders the selected state. */
    .nama-burger:not(.is-active):hover .burger-line:first-child,
    .nama-burger:not(.is-active):hover .burger-line:last-child {
        transform: none;
    }

    /* Disable primary/secondary CTA hover sweep + color flip on mobile —
       same reason: tap-induced :hover persists and looks broken. */
    .nama-btn-primary:hover::before,
    .nama-btn-secondary:hover::before { width: 0; }
    .nama-btn-primary:hover   { color: var(--gold); }
    .nama-btn-secondary:hover { color: var(--silver); }

    .nama-logo--mobile .nama-logo-text {
        display: none;
    }
    .nama-logo--mobile img { 
        height: 28px; 
    }

    /* Mobile overlay — full screen */
    .nama-mobile-overlay {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: none;
        transform: none !important;
        background: rgba(25, 25, 25, 0.5) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        z-index: 10000 !important;
        clip-path: inset(0 0 100% 0);
        transition: clip-path 0.3s cubic-bezier(0.35, 0, 0.65, 1) !important;
        padding-inline: calc((1.25rem + env(safe-area-inset-left, 0px)) * 2 + 6px) !important;
    }
    .nama-mobile-overlay[hidden] {
        display: flex !important;
        clip-path: inset(0 0 100% 0);
        pointer-events: none;
    }
    .nama-mobile-overlay.is-open {
        clip-path: inset(0 0 0% 0) !important;
        pointer-events: all !important;
    }

    .nama-mobile-close { display: none !important; }
    .nama-mobile-overlay-footer { display: none !important; }

    .nama-mobile-nav-list {
        counter-reset: nav-counter;
        margin-top: 2vh;
    }
    .nama-mobile-nav-link {
        font-size: 11vw;
        display: flex;
        flex-direction: column;
        gap: 0.5vw;
        padding: 2.5vh 0;
        border-bottom: 1px solid rgba(213, 197, 180, 0.2) !important;
        counter-increment: nav-counter;
    }
    .nama-mobile-nav-link:last-child {
        border-bottom: none;
    }
    .nama-mobile-nav-link::before {
        content: "0" counter(nav-counter);
        font-family: var(--font-serif);
        font-size: clamp(0.7rem, 4.5vw, 1rem);
        font-weight: 250;
        font-style: italic;
        letter-spacing: 0.1em;
        color: var(--gold);
        line-height: 1;
    }

    /* Side scroll nav — behind the overlay */
    .nama-side-scroll-nav {
        left: calc(1.25rem + env(safe-area-inset-left, 0px));
        z-index: 9998;
    }

    .nama-scroll-dot {
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Upgraded the timing for a snappier morph */
    }

    /* ── HOME SECTION (mobile) ──────────────────────────────────────────────── */
    .section-home {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 12vh 6vw 20vw;
    }

    /* Show mobile hero media, hide the desktop variant */
    .home-bg-video--desktop,
    .home-bg-image--desktop { display: none !important; }
    .home-bg-video--mobile,
    .home-bg-image--mobile { display: block !important; }

    /* Hide right hours column (shown in-stack instead) */
    .home-hours { display: none; }

    .home-center {
        gap: 4vh;
        width: 100%;
    }
    .home-brand { font-size: 12vw; letter-spacing: 0.4em; }
    .home-brand img { 
        height: clamp(6rem, 25vw, 20rem); 
    }

    /* Override the desktop 2-col grid: stack each button on its own row. */
    .home-ctas {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2vh;
        width: 100%;
    }
    #orderOnlineBtn { width: 65vw; }
    .nama-btn-primary,
    .nama-btn-secondary {
        width: 65vw;
        min-width: 0;
        height: 12.5vw;
        font-size: 2.8vw;
        letter-spacing: 0.2em;
    }

    /* Mobile hours shown inline below CTAs */
    .home-hours-mobile {
        display: flex;
        flex-direction: column;
        gap: 1.4vh;
        width: 100%;
        margin-top: 3vh;
    }
    .home-hours-row {
        font-size: 2.8vw;
    }
    .home-status-label { font-size: 2.8vw; }
    .home-status-dot { width: 6px; height: 6px; }

    /* Hide original hours mobile block — replaced by hours panel */
    .home-hours-mobile { display: none !important; }

    /* Hours button — label only now; the status dot lives outside it. */
    #hoursBtn {
        position: relative;
    }
    /* Push the dot further into the side margin on the wider mobile button. */
    .home-schedule-cta { width: 65vw; }
    .home-schedule-cta .home-status-dot { left: -4vw; }

    /* Hide desktop footer */
    .home-footer { display: none; }

    /* Hours panel — fullscreen clip-path drawer on mobile */
    .hours-panel {
        position: fixed !important;
        inset: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        background: rgba(25, 25, 25, 0.6) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: none !important;
        padding: 20vw 8vw 8vw !important;
        transform: none !important;
        clip-path: inset(0 0 100% 0);
        transition: clip-path 0.3s cubic-bezier(0.35, 0, 0.65, 1) !important;
        z-index: 9999 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .hours-panel.is-open {
        clip-path: inset(0 0 0% 0) !important;
        transform: none !important;
    }
    .hours-panel .home-hours-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 3vw 0;
        border-bottom: 1px solid rgba(213, 197, 180, 0.15);
    }
    .hours-panel .home-hours-row:last-of-type { border-bottom: none; }
    .hours-panel .home-hours-day {
        font-family: var(--font-sans);
        font-size: 3vw;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--taupe);
    }
    .hours-panel .home-hours-time {
        font-family: var(--font-serif);
        font-size: 9vw;
        font-weight: 300;
        color: var(--silver);
    }
    .hours-panel .home-hours-row.is-today .home-hours-day,
    .hours-panel .home-hours-row.is-today .home-hours-time { color: var(--gold); }
    .hours-panel .home-status {
        display: flex;
        align-items: center;
        gap: 2vw;
        margin-top: 5vw;
    }
    .hours-panel .home-status-dot { width: 6px; height: 6px; }
    .hours-panel .home-status-label {
        font-size: 3vw;
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }

/* ── Mobile Bottom Docked Bar (Pure Glass) ──────────────────────────────── */
.home-docked-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    
    /* Pure Glassmorphism (No heavy background color) */
    background: rgba(25, 25, 25, 0.5); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(213, 197, 180, 0.15);
    
    display: flex;
    flex-direction: column;
    z-index: 500;
    transition: transform 0.3s ease;
}

.home-docked-bar.is-hidden {
    transform: translateY(100%);
    pointer-events: none;
}

/* ── The Expanding Panels ───────────────────────────────────────────────── */
.home-dock-panels-wrapper {
    width: 100%;
}

.home-dock-panel {
    display: flex;
    align-items: center;
    width: 100%;
    
    /* Collapsed & Hidden State */
    max-height: 0;
    padding: 0 8vw;
    opacity: 0;
    transform: translateY(10px); /* Text starts slightly lower */
    overflow: hidden;
    pointer-events: none;
    
    /* The smoother, unified cubic-bezier animation */
    transition: 
        max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
        padding 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
        opacity 0.3s ease;
}

.home-dock-panel.is-visible {
    /* Adjusted to give it just enough room to open */
    max-height: 15vw;
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    /* 3vw top, 8vw right, 3vw bottom, 8vw left */
    /* This perfectly matches the 3vw top/bottom of the buttons! */
    padding: 3vw 8vw 3vw 8vw; 
}

/* Layout Specifics */
#dockSocialPanel, #dockContactPanel {
    justify-content: space-between; /* Pushes items to left and right edges */
}

#dockLocationPanel {
    justify-content: center; /* Locks item dead center */
}

.home-dock-panel-link {
    font-family: var(--font-sans);
    font-size: 2.8vw;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--taupe); /* Matches the unselected docker bar text */
    text-decoration: none;
}

.home-dock-panel-link.text-center {
    text-align: center;
    line-height: 1.5;
}

/* ── The Navigation Buttons ─────────────────────────────────────────────── */
.home-dock-buttons {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: auto;
    padding: 3vw 0; /* Creates the base height of the bar */
}

.home-dock-btn {
    background: transparent;
    border: none;
    color: var(--taupe);
    transition: color 0.25s ease;
    cursor: pointer;
    font-size: 2.8vw;
    padding: 2vw 0;
    margin: 0;
    line-height: 1;
    
    /* REQUIRED: Gives the animated gold line a reference point */
    position: relative; 
}

/* The Animated Gold Underline */
.home-dock-btn::after {
    content: '';
    position: absolute;
    bottom: 0; 
    left: 50%;
    width: 0; 
    height: 1px;
    background: var(--gold);
    transform: translateX(-50%);
    transition: width 0.25s ease;
}

/* Hover and Active States */
.home-dock-btn:hover, 
.home-dock-btn.is-active { 
    color: var(--gold); 
}

.home-dock-btn:hover::after, 
.home-dock-btn.is-active::after { 
    width: 100%; 
}

.home-dock-label {
    font-family: var(--font-sans);
    line-height: 1;
    margin: 0;
    padding: 0;
    font-size: 2.8vw;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

    /* ── MENUS SECTION (mobile) ─────────────────────────────────────────────── */
    .section-menus { flex-direction: column; }

    .menus-sidebar { display: none; }

    .menus-list { width: 100%; }
    .menus-list-item {
        /* 0 on top/bottom, safe-area math on left/right */
        padding: 0 20px 0 calc(2.5rem + env(safe-area-inset-left, 0px)) !important;        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }
    /* Disable all hover effects on mobile */
    .menus-list:hover .menus-list-item { flex: 1 !important; }
    .menus-list .menus-list-item:hover { flex: 1 !important; background-color: transparent !important; }
    .menus-list-item:hover .menus-item-title-wrap { transform: none; }
    .menus-list-item:hover .menus-item-arrow { transform: none; color: var(--taupe); }
    .menus-list-item:hover .menus-item-count {color: var(--gold);}
    .menus-list-item:hover .menus-item-title { color: var(--silver); }
    .menus-list-item:hover .menus-item-schedule { opacity: 0.5; border-left-color: rgba(213, 197, 180, 0.2); }
    .menus-item-bg { display: none; }

    .menus-item-content { gap: 0px; }
    .menus-item-count {
        font-size: 0.75rem;
        min-width: 36px;
    }
    .menus-item-title {
        font-size: clamp(1.3rem, 6vw, 1.8rem);
        line-height: 1.2;
    }
    .menus-item-title-wrap {
        flex-direction: row;
        align-items: center;
        gap: 3vw;
        flex: 1;
    }
    .menus-item-schedule {
        border-left: 1px solid rgba(213, 197, 180, 0.15);
        padding-left: 3vw;
        align-items: flex-start;
        height: auto;
        gap: 0.2rem;
        flex-shrink: 0;
    }
    .menus-item-schedule-line { display: flex; flex-direction: column; gap: 0; }
    .menus-sched-day,
    .menus-sched-time {
        font-size: 0.5rem;
        letter-spacing: 0.12em;
    }
    .menus-item-arrow {
        display: flex;
        margin-left: auto;
        flex-shrink: 0;
    }
    .menus-item-arrow svg { width: 20px; height: 20px; }

/* ── ABOUT SECTION (mobile) ─────────────────────────────────────────────── */
    .section-about {
        flex-direction: column;
        overflow: hidden;
    }

    /* Hide desktop elements */
    .about-photo-pane  { display: none; }
    .about-text-pane   { display: none; }

    /* 1. Stationary Media Stack */
    .about-mobile-media-stack {
        display: block !important;
        position: absolute;
        top: 0; left: 0;
        width: 100vw;
        height: 100dvh;
        z-index: 1;
        pointer-events: none; /* Let swipes pass through to Swiper */
    }
    .about-mobile-media-item {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        opacity: 0;
        z-index: 1;
        transform: translateZ(0); 
        /* Ensure there are no transition properties here! */
    }
    .about-mobile-media-item:first-child {
        opacity: 1;
        z-index: 2;
    }

    .about-progress-fill {
        /* Ensure there are no transition properties here! */
    }
    
    /* 2. Media Styles */
    .about-mobile-image {
        width: 100vw;
        height: 40dvh;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    .about-mobile-image::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0;
        width: 100%; height: 60%;
        background: linear-gradient(to top, var(--obsidian) 0%, transparent 100%);
        z-index: 2;
    }
    .about-story-label-mobile {
        display: block;
        position: absolute;
        left: 48px;
        bottom: 14vw;
        font-family: var(--font-sans);
        font-size: 2.5vw;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--gold);
        z-index: 5;
    }
    .about-mobile-year {
        font-family: var(--font-serif);
        font-size: 13vw; /* Perfect scale for the mobile layout */
        font-weight: 300;
        font-style: italic;
        color: var(--silver); /* Brightens it up to match desktop */
        line-height: 1;
        position: relative;
        z-index: 5;
        margin-top: -13vw; /* Pulls date up into the image overlay */
        padding-left: 48px;
    }

    /* 3. Text Swiper */
    .about-mobile-swiper {
        display: block;
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        background: transparent;
    }
    .about-mobile-slide {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .about-mobile-spacer {
        width: 100vw;
        height: 40dvh; /* Exact height of image to keep alignment */
        flex-shrink: 0;
    }
    .about-mobile-content {
        flex: 1;
        display: block;
        min-height: 0;
        overflow: hidden;
        background: var(--obsidian);
        position: relative;
    }
    /* Gradient at top — blends into the photo above */
    .about-mobile-content::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 8vw;
        background: linear-gradient(to bottom, var(--obsidian) 0%, transparent 100%);
        z-index: 10;
        pointer-events: none;
    }
    /* Swiper wrapper and slide inside content */
    .about-mobile-content .swiper-wrapper {
        height: 100%;
    }
    .about-mobile-content .swiper-slide {
        height: auto;
        padding: 6vw 6vw calc(6vw + var(--global-bar-height)) 48px;
        box-sizing: border-box;
    }
    .about-mobile-text {
        font-family: var(--font-sans);
        font-size: 2.5vw;
        line-height: 1.85;
        color: var(--taupe);
        margin: 0;
    }

    /* 4. Timeline Footer Mobile Overrides */
    .about-timeline-footer {
        z-index: 10;
        border-radius: 0;
        padding: 3vw 0vw; /* matches home-dock-buttons container padding */
        height: auto;
    }
    .about-year-item {
        font-size: 2.8vw;
        padding: 2vw 0; /* matches home-dock-btn padding, closes the height gap */
        margin: 0;
        line-height: 1;
    }

    /* ── GALLERY SECTION (mobile) — Swiper Cube Stories ─────────────────── */
    /* Minimal CSS — Swiper fully owns the 3D cube effect.                   */
    /* Only override desktop layout rules and position inner content.        */

    /* Hide desktop-only elements */
    .gallery-arrow,
    .gallery-progress,
    .gallery-col-nav,
    .gallery-total-bar {
        display: none !important;
    }

    /* Mobile gallery footer — glassmorphism, same as about timeline footer */
    .gallery-mobile-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(25, 25, 25, 0.5);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 25;
        padding: 3vw 0vw;
        height: auto;
    }

    .gallery-mobile-progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: rgb(81, 77, 72);
    }
    .gallery-mobile-progress-fill {
        height: 100%;
        width: 0%;
        background: var(--gold);
    }

    .gallery-mobile-footer-grid {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        height: 100%;
        align-items: center;
    }

    .gallery-mobile-col-btn {
        font-family: var(--font-sans);
        font-size: 2.8vw;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--taupe);
        transition: color var(--transition-fast);
        position: relative;
        padding: 2vw 0;
        background: none;
        border: none;
        cursor: pointer;
        margin: 0;
        line-height: 1;
    }
    .gallery-mobile-col-btn::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 1px;
        background: var(--gold);
        transform: translateX(-50%);
        transition: width var(--transition-fast);
    }
    .gallery-mobile-col-btn.is-active,
    .gallery-mobile-col-btn:hover { color: var(--gold); }
    .gallery-mobile-col-btn.is-active::after,
    .gallery-mobile-col-btn:hover::after { width: 100%; }

    /* Container: just size it, Swiper handles overflow + 3D */
    .stories-cube-swiper {
        width: 100%;
        height: 100%;
    }

    /* Override desktop flex-direction: column + overflow: hidden (breaks Swiper 3D) */
    .gallery-collections-wrapper {
        flex-direction: row;
        overflow: visible;
    }

    /* Slides: just background, Swiper controls everything else */
    .gallery-collection.swiper-slide {
        background: #000;
        overflow: visible;
    }

    /* Strip is just a stacking container on mobile (override desktop flex/transition) */
    .gallery-images-strip {
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
        transform: none;
        transition: none;
    }

    .gallery-images-strip::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 25vh; /* Covers the top 20% of the screen */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, transparent 100%);
        z-index: 12; /* Keeps it above your active images (z-index: 10) */
        pointer-events: none; /* Crucial: prevents the gradient from blocking finger swipes! */
    }

    /* Stacked images — instant switch, no transition */
    .gallery-img-frame.story-image {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #000;
        opacity: 0;
        z-index: 1;
    }
    .gallery-img-frame.story-image.active {
        opacity: 1;
        z-index: 10;
    }

    /* Wide images: fit width, black bars top/bottom */
    .gallery-img-frame.story-image.is-wide {
        background-size: cover;
    }

    /* Stories progress bar — pinned to top of each slide */
    .gallery-stories-bar {
        position: absolute;
        top: 12px;
        left: 0;
        width: 100%;
        display: flex;
        gap: 3px;
        padding: 0 3vw;
        z-index: 20;
        box-sizing: border-box;
    }
    .gallery-stories-segment {
        flex: 1;
        height: 2.5px;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 2px;
        overflow: hidden;
        position: relative;
    }
    .gallery-stories-fill {
        position: absolute;
        top: 0; left: 0;
        height: 100%;
        width: 0%;
        background: #fff;
        border-radius: 2px;
    }
    .gallery-stories-fill.is-done {
        width: 100%;
    }
    .gallery-stories-fill.is-active {
        /* width set by JS via autoplayTimeLeft */
    }

    .gallery-label {
        position: absolute;
        z-index: 15;
        top: 24px;
        left: 0;
        width: 100vw;
        height: 41.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        bottom: auto;
    }

    .gallery-label-title {
        font-size: 2.8vw;
        margin: 0;
        line-height: 1;
        transform: none;
    }

    .gallery-img-frame.story-image {
        transition: none;
    }

    /* ── ORDER PANEL (mobile) — container rules live in desktop.css (unified
       fullscreen clip-path). Only mobile-specific overrides remain. */
    .order-panel {
        padding: 20vw 8vw 8vw;
    }

    .hours-panel-title,
    .order-panel-mobile-title,
    .nama-mobile-overlay-title {
        font-family: var(--font-sans);
        font-weight: normal;
        font-size: 2.8vw;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--gold);
        margin: 0;
        line-height: 1;
        position: absolute;
        top: 24px;
        left: 0;
        width: 100vw;
        height: 41.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        z-index: 10003;
    }

    /* Hide the panel's inline "Order Online" header on mobile — replaced by
       the floating .order-panel-mobile-title above. */
    .order-panel-header,
    .order-panel-divider { display: none; }

    .order-panel-title   { font-size: 5vw; }
    .order-panel-content {
        font-size: 3.5vw;
        /* No header above the content here, so reclaim its share of the height. */
        min-height: calc(100dvh - 32vw);
    }

    /* ── Ordering buttons (mobile) ──────────────────────────────────────────
       Same markup as desktop; the pair stacks one on top of the other instead
       of sitting side by side, and steps up in size the same way the desktop
       pair does relative to the hero CTAs. */
    .order-buttons {
        flex-direction: column;
        gap: 4vw;
        width: 100%;
    }
    .order-btn {
        width: 72vw;
        height: 14vw;
        padding: 0 3vw;
        font-size: 3.2vw;
    }
    .order-btn.has-image { padding: 1.5vw; }
    .order-buttons-empty { max-width: 100%; font-size: 3vw; }

    /* Touch taps leave :hover stuck, which would freeze a button in its filled
       state after the finger lifts. */
    .order-btn:hover::before { width: 0; }
    .order-btn:hover { color: var(--order-btn-color, var(--gold)); }

} /* end @media (max-width: 768px) */