/* Google Fonts — loaded here so the CSS bundle is self-contained */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap');

/* ============================================================
   RESET & CSS VARIABLES
   NOTE: --gold / --navy / --navy-dark are defaults.
   The <style> block in main.php injects dynamic overrides from DB.
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* ── Warm accent palette ─────────────────────────────── */
    --gold:         #c9a84c;   /* primary gold — overridable via theme_settings */
    --gold-light:   #c4877b;   /* dusty rose  — hover/light  */
    --tan:          #d9bb9b;   /* warm tan    — soft accents */
    --gold-dim:     rgba(201,168,76,0.22);

    /* ── Dark palette ────────────────────────────────────── */
    --black:        #1c1c1c;   /* near-black  — navbar/footer */
    --navy:         #360738;   /* deep purple — buttons/boxes */
    --navy-mid:     #360738;   /* deep purple — same family  */
    --navy-dark:    #002f07;   /* forest green— modal/deep   */

    /* ── Light palette ───────────────────────────────────── */
    --white:        #ffffff;
    --off-white:    #faf3e8;   /* warm cream  — bg / boxes   */

    /* ── Text ────────────────────────────────────────────── */
    --text-dark:    #1c1c1c;
    --text-mid:     #7a6458;   /* warm mid-tone              */

    /* ── Footer ─────────────────────────────────────────── */
    --footer-bg:    #1c1c1c;

    /* ── Typography ──────────────────────────────────────── */
    --font-heading:  'Playfair Display', serif;   /* main headings */
    --font-display:  'Cormorant Garamond', serif; /* eyebrows, labels, display */
    --font-body:     'Lato', sans-serif;          /* body, nav, buttons */
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* ============================================================
   HERO BANNER — full-viewport height, navbar overlays transparently
============================================================ */
.hero-banner {
    position: relative;
    height: 100vh;
    height: 100dvh;   /* iOS 15.4+: shrinks with Safari URL bar */
    min-height: 620px;
    background-image: url('../images/reservations-bg.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
/* Dark overlay for text legibility */
.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(28,28,28,0.60) 0%,
        rgba(54,7,56,0.28)  50%,
        rgba(0,47,7,0.55)   100%
    );
}
.hero-banner__content {
    position: relative;
    z-index: 1;
    padding: 0 24px;
    max-width: 800px;
}
.hero-banner__eyebrow {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
}
.hero-banner__title {
    font-family: var(--font-heading);
    font-size: clamp(52px, 8vw, 96px);
    font-weight: 700;
    color: var(--white);
    line-height: 1.05;
    margin-bottom: 28px;
    text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
.hero-banner__rule {
    width: 52px;
    height: 2px;
    background: var(--gold);
    margin: 0 auto 28px;
}
.hero-banner__locations {
    font-family: var(--font-display);
    font-size: 13.5px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    margin-bottom: 48px;
}
.hero-banner__btns {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}
/* Scroll-down chevron */
.hero-banner__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.5);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: heroBounce 2s ease-in-out infinite;
    cursor: pointer;
}
.hero-banner__scroll svg {
    width: 20px;
    height: 20px;
    stroke: rgba(255,255,255,0.5);
    fill: none;
    stroke-width: 2;
}
@keyframes heroBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   NAVIGATION — transparent at top, solid black+gold on scroll
   !important guards prevent shared/Bootstrap CSS from overriding
   the core transparent→scrolled transition.
============================================================ */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;  /* below BS5 modal-backdrop (1040) so modals cover the navbar */
    height: 72px !important;
    display: flex !important;
    flex-wrap: nowrap !important;  /* prevent Bootstrap's flex-wrap:wrap from shifting logo */
    align-items: center !important;
    padding: 0 28px !important;
    background: transparent !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    transition:
        background   0.4s ease,
        border-color 0.4s ease,
        box-shadow   0.3s ease;
}
/* Scrolled — solid dark bar with gold accent */
.navbar.scrolled {
    background: var(--black) !important;
    border-bottom-color: rgba(201,168,76,0.20) !important;
    box-shadow: 0 2px 24px rgba(0,0,0,0.65) !important;
}

/* ---- Logo ---- */
/* Both images occupy the same grid cell (grid-area 1/1) so they
   overlap perfectly; opacity crossfade swaps them on scroll.
   align-content:center moves the track to the vertical middle of the
   72px container (align-items:center alone only centres within the track,
   not the track within the container). !important guards shared-CSS overrides. */
.navbar__logo {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    flex-shrink: 0;
    margin-right: 36px;
    height: 72px !important;
}
.navbar__logo-img {
    /* flex+absolute approach: spacer (3rd img, no class) reserves width;
       light/dark logos sit centred via absolute positioning */
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    height: 64px !important;
    width: auto !important;
    max-width: 200px;
    object-fit: contain;
    transition: opacity 0.4s ease, filter 0.4s ease;
    display: block;
}
/* Transparent state: light logo + drop-shadow over hero image */
.navbar__logo-img--light {
    opacity: 1;
    filter: drop-shadow(0 1px 6px rgba(0,0,0,0.7)) brightness(1.05);
}
/* Dark logo: hidden on transparent navbar */
.navbar__logo-img--dark {
    opacity: 0;
}
/* Scrolled: swap — dark logo in, light logo out */
.navbar.scrolled .navbar__logo-img--light {
    opacity: 0;
    filter: none;
}
.navbar.scrolled .navbar__logo-img--dark {
    opacity: 1;
}

/* ---- Desktop nav menu ---- */
.navbar__menu {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
    flex-wrap: nowrap !important;
    overflow: visible;
    min-width: 0;
}

.nav-item { position: relative; }

/* Nav button / link — white on transparent navbar */
.nav-btn,
a.nav-btn,
button.nav-btn {
    background: none !important;
    border: none;
    color: #fff !important;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0 9px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    text-decoration: none !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.40);
    transition: color 0.25s ease, text-shadow 0.25s ease;
}
.nav-btn:hover,
a.nav-btn:hover,
button.nav-btn:hover {
    color: #fff !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

/* Scrolled state — gold text, no text-shadow needed on solid bg */
.navbar.scrolled .nav-btn,
.navbar.scrolled a.nav-btn,
.navbar.scrolled button.nav-btn {
    color: var(--gold) !important;
    text-shadow: none;
}
.navbar.scrolled .nav-btn:hover,
.navbar.scrolled a.nav-btn:hover,
.navbar.scrolled button.nav-btn:hover {
    color: var(--gold-light) !important;
    text-shadow: none;
}

/* Cart badge */
.nav-btn .cartCount {
    background: var(--gold);
    color: var(--black);
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    margin-left: 2px;
}

/* Highlighted button (Large Group Reservations CTA) — deep purple pill */
.nav-btn--highlight,
a.nav-btn--highlight,
button.nav-btn--highlight {
    background: var(--navy-mid) !important;
    color: #fff !important;
    padding: 8px 18px !important;   /* vertical padding creates breathing room above/below */
    height: auto !important;         /* don't inherit the 72px full-navbar height */
    align-self: center;              /* stay centred in the flex navbar row */
    border-radius: 4px;
    text-shadow: none;    /* solid bg — no text-shadow needed */
}
.nav-btn--highlight:hover,
a.nav-btn--highlight:hover,
button.nav-btn--highlight:hover { background: #4a0f4e !important; color: #fff !important; }
/* Keep white text on scroll too; override gold inherited from .navbar.scrolled .nav-btn */
.navbar.scrolled .nav-btn--highlight,
.navbar.scrolled a.nav-btn--highlight,
.navbar.scrolled button.nav-btn--highlight { color: #fff !important; text-shadow: none; }

/* ---- Caret (dropdown indicator) ---- */
.nav-btn .caret {
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.nav-item:hover .caret { transform: rotate(180deg); }

/* ---- Dropdown panel ---- */
.dropdown {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: var(--navy);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0 0 8px 8px;
    min-width: 210px;
    z-index: 1100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    overflow: hidden;
}
.nav-item:hover .dropdown { display: block; }
.dropdown a {
    display: block;
    padding: 13px 18px;
    color: #ffffff !important;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: none;
    transition: color 0.2s;
    text-decoration: none !important;
}
.dropdown a:hover { background: none; color: var(--gold) !important; }

/* ---- Mobile hamburger ---- */
.navbar__hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
}
.navbar__hamburger span {
    display: block;
    width: 24px; height: 2px;
    background: rgba(255,255,255,0.9);
    margin: 5px 0;
    transition: all 0.3s, background 0.4s ease;
    transform-origin: center;
}
.navbar.scrolled .navbar__hamburger span { background: var(--gold); }
.navbar__hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__hamburger.active span:nth-child(2) { opacity: 0; }
.navbar__hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.mobile-nav {
    display: none;
    position: fixed;
    top: 72px;
    left: 0; right: 0; bottom: 0;
    background: var(--black);
    z-index: 999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
}
.mobile-nav.open { display: block; }
.mobile-nav a {
    display: block;
    padding: 15px 28px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(201,168,76,0.1);
}
.mobile-nav a:hover { background: rgba(201,168,76,0.07); }

/* Anchor scroll offset for fixed navbar */
#order, #gallery, #reservations, #vip, #locations { scroll-margin-top: 72px; }

/* ============================================================
   HERO — THREE LOCATION PANELS
============================================================ */
.hero-locations {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 326px;
    column-gap: 8px;
    padding: 15px 15px 0;
    background: #fff;
}
.loc-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
}
.loc-card__img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    filter: brightness(1.08) saturate(1.15);
}
.loc-card:hover .loc-card__img { transform: scale(1.06); }
.loc-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.18);
}
.loc-card__name {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    line-height: 1;
    white-space: nowrap;
    text-align: center;
}

/* ============================================================
   ABOUT SECTION
============================================================ */
.about {
    padding: 64px 32px 52px;
    text-align: center;
    background: var(--white);
}
.about__heading {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    line-height: 1.3;
    max-width: 820px;
    margin: 0 auto 18px;
}
.gold-rule {
    width: 52px; height: 2px;
    background: var(--gold);
    margin: 0 auto 22px;
}
.about__text {
    font-size: 15px;
    color: var(--text-mid);
    line-height: 1.85;
    max-width: 760px;
    margin: 0 auto;
    font-weight: 400;
}

/* ============================================================
   ORDER ONLINE — parallax background
============================================================ */
.order-online {
    padding: 174px 48px;
    text-align: center;
    background-image: url('../images/order-online-bg.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
.order-online__box {
    background: rgba(54, 7, 56, 0.88);
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 64px;
}
.order-online__heading {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 700;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 7px;
    margin-bottom: 42px;
}
.order-online__btns {
    display: flex;
    gap: 22px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-outline-white {
    display: inline-block;
    border: 2px solid rgba(255,255,255,0.85);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 15px 38px;
    cursor: pointer;
    background: transparent;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn-outline-white:hover { background: var(--white); color: var(--navy); }

/* ============================================================
   PHOTO GALLERY 4×2 GRID
============================================================ */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 4px;
    padding: 0;
    background: #fff;
}
.gallery__cell {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    aspect-ratio: 1;
}
.gallery__cell img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.gallery__cell:hover img { transform: scale(1.08); }
.gallery__cell::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.3s;
    pointer-events: none;
}
.gallery__cell:hover::after { background: rgba(0,0,0,0.12); }
.gallery__label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px 16px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    color: rgba(255,255,255,0.8);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.3s;
}
.gallery__cell:hover .gallery__label { opacity: 1; }

/* ============================================================
   RESERVATIONS — parallax background
============================================================ */
.reservations {
    padding: 204px 48px;
    text-align: center;
    background-image: url('../images/reservations-bg.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
.reservations__box {
    background: rgba(250, 243, 232, 0.94);
    max-width: 760px;
    margin: 0 auto;
    padding: 60px 64px;
}
.reservations__heading {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 14px;
}
.reservations__sub {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-mid);
    margin-bottom: 10px;
}
.reservations__btns {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}
.btn-navy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 13px 38px;
    cursor: pointer;
    border: 2px solid var(--navy);
    border-radius: 0;                   /* sharp corners, no browser-default rounding */
    outline: none;
    box-shadow: none;
    line-height: 1.4;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}
.btn-navy:hover,
.btn-navy:focus {
    background: transparent;
    color: var(--navy);
    outline: none;
    box-shadow: none;
}
/* When btn-navy is used as a <button> element — strip browser UA styles */
button.btn-navy {
    -webkit-appearance: none;
    appearance: none;
}

/* ============================================================
   VIP SECTION
============================================================ */
.vip-section {
    padding: 80px 32px;
    text-align: center;
    background: var(--white);
}
.vip-section__heading {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3.5vw, 46px);
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.25;
    max-width: 680px;
    margin: 0 auto 18px;
    font-style: italic;
}
.vip-section__sub {
    font-size: 14.5px;
    color: var(--text-mid);
    margin-bottom: 36px;
    line-height: 1.6;
}

/* ── Social buttons row ── */
.vip-section__social {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}
.vip-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 28px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    border: 2px solid transparent;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
    cursor: pointer;
}
.vip-social-btn i {
    font-size: 15px;
    line-height: 1;
}
/* Base dark navy style (matches btn-navy) */
.vip-social-btn--facebook  { background: var(--navy); color: #fff; border-color: var(--navy); }
.vip-social-btn--instagram { background: var(--navy); color: #fff; border-color: var(--navy); }
.vip-social-btn--twitter   { background: var(--navy); color: #fff; border-color: var(--navy); }
.vip-social-btn--youtube   { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Hover: transparent with navy border+text */
.vip-social-btn:hover {
    background: transparent;
    color: var(--navy);
    border-color: var(--navy);
    text-decoration: none;
}

/* ── Elfsight reviews wrapper ── */
.vip-section__reviews {
    max-width: 1100px;
    margin: 0 auto;
}

/* ============================================================
   FOOTER
============================================================ */
.footer {
    background: var(--footer-bg);
    color: rgba(255,255,255,0.65);
    padding: 54px 56px 30px;
    margin-bottom: -25px;
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__logo-img {
    max-height: 70px;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 14px;
    display: block;
}
.footer__tagline {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    font-style: italic;
    margin-bottom: 14px;
}
.footer__desc {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    line-height: 1.75;
    margin-bottom: 16px;
}
.footer__social { display: flex; gap: 10px; margin-top: 4px; }
.footer__social a {
    width: 36px; height: 36px;
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.footer__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.footer__col-title {
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}
.footer__links li { margin-bottom: 9px; }
.footer__links a {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    transition: color 0.2s;
    letter-spacing: 0.3px;
}
.footer__links a:hover { color: var(--gold); }
.footer__addr {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    line-height: 1.85;
}
ul.footer__links {
  padding-left: 0px;
}
.footer__addr a { color: var(--gold); }
.footer__bottom {
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: rgba(255,255,255,0.3);
    flex-wrap: wrap;
    gap: 8px;
}
.footer__bottom a { color: rgba(255,255,255,0.3); margin-left: 16px; }
.footer__bottom a:hover { color: rgba(255,255,255,0.6); }

/* ============================================================
   VIP MODAL (slides up from bottom)
============================================================ */
.vip-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
}
.vip-modal.open { display: flex; align-items: flex-end; justify-content: center; }
.vip-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28,28,28,0.60);
    backdrop-filter: blur(3px);
}
.vip-modal__box {
    position: relative;
    background: var(--navy-dark);
    color: var(--white);
    padding: 44px 50px 40px;
    max-width: 540px;
    width: 100%;
    animation: slideUp 0.45s cubic-bezier(.22,.68,0,1.2);
}
@keyframes slideUp {
    from { transform: translateY(110%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.vip-modal__close {
    position: absolute;
    top: 14px; right: 18px;
    background: none; border: none;
    color: rgba(255,255,255,0.5);
    font-size: 22px; cursor: pointer; line-height: 1;
    transition: color 0.2s;
}
.vip-modal__close:hover { color: var(--white); }
.vip-modal__eyebrow {
    font-family: var(--font-display);
    font-size: 12px; font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
}
.vip-modal__heading {
    font-family: var(--font-heading);
    font-size: 24px; font-weight: 700;
    margin-bottom: 10px;
}
.vip-modal__sub {
    font-size: 13.5px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 22px;
    line-height: 1.6;
}
.vip-modal__form { display: flex; margin-bottom: 16px; }
.vip-modal__input {
    flex: 1;
    padding: 13px 16px;
    background: rgba(250,243,232,0.07);
    border: 1px solid rgba(250,243,232,0.25);
    border-right: none;
    color: var(--white);
    font-size: 13.5px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.2s;
}
.vip-modal__input::placeholder { color: rgba(255,255,255,0.35); }
.vip-modal__input:focus { border-color: var(--gold); }
.vip-modal__submit {
    background: var(--gold);
    border: 1px solid var(--gold);
    color: var(--black);
    padding: 13px 22px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background 0.2s;
    white-space: nowrap;
}
.vip-modal__submit:hover { background: var(--gold-light); }
.vip-modal__or {
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.vip-modal__socials { display: flex; gap: 10px; }
.vip-modal__social-btn {
    flex: 1;
    padding: 11px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(250,243,232,0.05);
    color: rgba(250,243,232,0.88);
    font-size: 12.5px;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    transition: background 0.2s, border-color 0.2s;
    letter-spacing: 0.5px;
}
.vip-modal__social-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.4);
}

/* ============================================================
   MOBILE USER ACCOUNT BUTTON + DROPDOWN
   Visible only on mobile (≤1060px) for logged-in users.
   Shows user icon in navbar that opens an account link panel.
============================================================ */
.mobile-user-btn {
    display: none;        /* hidden on desktop */
    background: none;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    color: rgba(255,255,255,0.85);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    align-items: center;
    transition: color 0.25s ease;
}
.mobile-user-btn:hover,
.mobile-user-btn.active { color: var(--gold); }
.navbar.scrolled .mobile-user-btn { color: var(--gold); }

.mobile-user-dropdown {
    display: none;
    position: fixed;
    top: 72px;
    right: 0;
    background: var(--black);
    border-left:   1px solid rgba(201,168,76,0.2);
    border-bottom: 1px solid rgba(201,168,76,0.2);
    border-top:    2px solid var(--gold);
    min-width: 230px;
    z-index: 1200;
    box-shadow: -4px 8px 24px rgba(0,0,0,0.5);
    overflow-y: auto;
    max-height: calc(100vh - 72px);
}
.mobile-user-dropdown.open { display: block; }
.mobile-user-dropdown__header {
    padding: 14px 20px 12px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    border-bottom: 1px solid rgba(201,168,76,0.12);
}
.mobile-user-dropdown a {
    display: block;
    padding: 13px 20px;
    color: var(--gold) !important;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(201,168,76,0.08);
    text-decoration: none !important;
    transition: background 0.2s;
}
.mobile-user-dropdown a:last-child { border-bottom: none; }
.mobile-user-dropdown a:hover { background: rgba(201,168,76,0.07); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1060px) {
    .navbar__menu { display: none; }
    .navbar__hamburger { display: block; margin-left: auto; }  /* auto-margin pushes hamburger to far right */
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }  /* sticky bar + iPhone home indicator */
    .mobile-sticky-bar { display: flex !important; }
    .footer {
        margin-bottom: -100px;
    }
    .footer__bottom {
        margin-bottom: 50px;
    }

}
@media (max-width: 768px) {
    .hero-locations {
        grid-template-columns: 1fr;
        height: auto;
        gap: 8px;
        padding: 15px;
    }
    .loc-card { height: 220px; }
    .loc-card + .loc-card { border-left: none; border-top: none; }
    .gallery { grid-template-columns: 1fr; grid-template-rows: auto; gap: 4px; padding: 0; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .order-online { background-attachment: scroll; padding: 80px 20px; }
    .reservations { background-attachment: scroll; padding: 90px 20px; }
    .order-online__box, .reservations__box { padding: 44px 28px; }
    .vip-modal__box { padding: 32px 24px 28px; }
}
@media (max-width: 500px) {
    .footer__grid { grid-template-columns: 1fr; }
    .footer { padding: 40px 24px 24px; }
    .footer__bottom { flex-direction: column; text-align: center; }
    .gallery { grid-template-columns: 1fr; grid-template-rows: auto; gap: 4px; padding: 0; }
    /* Center all footer column content on single-column mobile layout */
    .footer__grid > div { text-align: center; }
    .footer__social { justify-content: center; }
    .footer__logo-img { margin-left: auto; margin-right: auto; }
    .footer__links { padding-left: 0; }
}

/* ============================================================
   AUTH DROPDOWN (.dropMenu) — logged-in user dropdown in navbar
   Mirrors .dropdown styles from the RESERVE theme
============================================================ */
.dropMenu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    background: var(--navy);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0 0 8px 8px;
    min-width: 190px;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    overflow: visible;   /* must be visible so .dropMenu__sub flyouts are not clipped */
}
.nav-item:hover .dropMenu,
.nav-item:focus-within .dropMenu { display: block; }
.dropMenu ul { list-style: none; padding: 0; margin: 0; }
.dropMenu ul li a,
.dropMenu a {
    display: block;
    padding: 13px 18px;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-align: left;
    border-bottom: none;
    transition: color 0.2s;
}
.dropMenu ul li:last-child a,
.dropMenu a:last-child { border-bottom: none; }
.dropMenu ul li a:hover,
.dropMenu a:hover { background: none; color: var(--gold); }

/* ---- Nested flyout inside More dropdown (.has-sub) ---- */
.dropMenu ul li.has-sub { position: relative; }
.dropMenu ul li.has-sub > a { display: flex; align-items: center; justify-content: space-between; }
.dropMenu ul li.has-sub > a .sub-caret {
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    margin-left: 10px;
    flex-shrink: 0;
}
.dropMenu .dropMenu__sub {
    display: none;
    position: absolute;
    left: 100%; top: -2px;
    background: var(--navy);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0 8px 8px 8px;
    min-width: 160px;
    z-index: 1200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    list-style: none; padding: 0; margin: 0;
    overflow: hidden;
}
.dropMenu ul li.has-sub:hover .dropMenu__sub { display: block; }
.dropMenu .dropMenu__sub li a {
    padding: 12px 16px;
    white-space: nowrap;
    text-align: left;
}

/* ============================================================
   BACK TO TOP BUTTON
============================================================ */
.ak-scrollup {
    position: fixed;
    bottom: -60px;
    right: 30px;
    width: 44px;
    height: 44px;
    background: var(--navy);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 900;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    transition: bottom 0.3s ease, background 0.2s;
}
.ak-scrollup.visible {
    bottom: 70px;
}
.ak-scrollup:hover { background: var(--navy-dark); }

/* ============================================================
   RESERVATION FORM — Bootstrap inputs styled for cream box
============================================================ */
.reservations__form {
    margin-top: 30px;
}
/* Align all form-row children (inputs, selects, button) to the same height */
.reservations__form .row {
    align-items: stretch;
}
.reservations__form .col-lg-3,
.reservations__form .col-md-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.reservations__form .form-control,
.reservations__form .form-select {
    background-color: rgba(255,255,255,0.85);
    border: 1px solid rgba(28,28,28,0.2);
    color: var(--text-dark);
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.5px;
    border-radius: 0;
    padding: 12px 16px;
    height: auto;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.reservations__form .form-control:focus,
.reservations__form .form-select:focus {
    background-color: #fff;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-dim);
    color: var(--text-dark);
    outline: none;
}
.reservations__form .form-select {
    /* Remove native browser arrow; Bootstrap's custom SVG arrow takes over */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    /* Ensure Bootstrap's custom arrow is visible over our background */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231c1c1c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 11px;
    padding-right: 38px;
}
/* Date input — hide native browser icon, show custom SVG calendar via background-image.
   The .customDatePicker wrapper already calls showPicker() on click (see reservation.php JS). */
.reservations__form input[type="date"] {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='16' y1='2' x2='16' y2='6'%3e%3c/line%3e%3cline x1='8' y1='2' x2='8' y2='6'%3e%3c/line%3e%3cline x1='3' y1='10' x2='21' y2='10'%3e%3c/line%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    cursor: pointer;
}
/* Hide the native browser calendar icon — our custom SVG replaces it */
.reservations__form input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}

/* ============================================================
   FOOTER LINK — inline utility used in footer-main.php
============================================================ */
.footer__link {
    color: var(--gold);
    transition: color 0.2s;
}
.footer__link:hover { color: var(--gold-light); }

/* ============================================================
   MODALS — Login / Register / Forgot Password
   Identical to style-inner.css so the homepage modal matches inner pages.
   modalNewstyle = RESERVE dark modal style
============================================================ */
.modalNewstyle .modal-content {
    background: var(--black);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 0;
    color: rgba(255,255,255,0.85);
}
.modalNewstyle .modal-header {
    padding: 28px 32px 16px;
    border-bottom: none;
    position: relative;
}
.modalNewstyle .modal-body {
    padding: 8px 32px 32px;
}
.modalNewstyle .modal-title,
.modalNewstyle .mdTitle {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--gold);
    text-transform: uppercase;
}
.modalNewstyle .btn-close {
    filter: invert(1) sepia(1) saturate(2) hue-rotate(10deg);
    opacity: 0.7;
}
.modalNewstyle .btn-close:hover { opacity: 1; }

/* Modal form wrapper */
.modalForm {
    max-width: 480px;
    margin: 0 auto;
}

/* ── Social login buttons (Facebook / Google) ── */
.btnDarkOutline {
    background: transparent;
    border: 1px solid rgba(201,168,76,0.4);
    color: rgba(255,255,255,0.85);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 16px;
    border-radius: 0;
    transition: background 0.2s, border-color 0.2s;
}
.btnDarkOutline:hover {
    background: rgba(201,168,76,0.1);
    border-color: var(--gold);
    color: var(--gold);
}

/* ── Primary button (modal variant) ── */
.btn.btnPrimary {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 0;
    padding: 12px 20px;
    transition: background 0.25s, color 0.25s;
}
.btn.btnPrimary:hover {
    background: transparent;
    border-color: var(--gold);
    color: var(--gold);
}

/* ── OR divider ── */
.sideLinesDivider {
    overflow: hidden;
    text-align: center;
    position: relative;
}
.sideLinesDivider .dividerText {
    display: inline-block;
    position: relative;
    padding: 0 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}
.sideLinesDivider .dividerText::before,
.sideLinesDivider .dividerText::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 100vw;
    margin-top: -1px;
    border-top: 1px solid rgba(201,168,76,0.2);
}
.sideLinesDivider .dividerText::before { right: 100%; }
.sideLinesDivider .dividerText::after  { left: 100%; }

/* ── Input field with right-side icon ── */
.rightIconFld {
    position: relative;
}
.inputFieldIcon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
}
.fieldIcon {
    width: 18px;
    height: 18px;
    display: block;
    opacity: 0.45;
    fill: currentColor;
}
.rightIconFld .form-control {
    padding-right: 44px;
}

/* Modal form-control overrides for dark background */
.modalNewstyle .form-control,
.modalNewstyle .form-select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(201,168,76,0.25);
    color: rgba(255,255,255,0.85);
    border-radius: 0;
}
.modalNewstyle .form-control::placeholder { color: rgba(255,255,255,0.35); }
.modalNewstyle .form-control:focus,
.modalNewstyle .form-select:focus {
    background: rgba(255,255,255,0.09);
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201,168,76,0.15);
    color: rgba(255,255,255,0.9);
    outline: none;
}

/* ── Simple / styled links ── */
.simpleLink {
    color: var(--gold);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}
.simpleLink:hover { color: var(--gold-light); text-decoration: underline; }

.linkStyle2 {
    color: var(--gold);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: color 0.2s;
}
.linkStyle2:hover { color: var(--gold-light); }

/* ── Primary colour text ── */
.textPrimary { color: var(--gold) !important; }

/* ── Error / OTP ── */
.errorMsg { color: #e55; font-size: 12px; min-height: 1.2em; }
#timer { font-size: 13px; color: rgba(255,255,255,0.55); }

/* ── Form check in dark modal ── */
.modalNewstyle .form-check-label { color: rgba(255,255,255,0.6); font-size: 12px; line-height: 1.5; }
.modalNewstyle .form-check-input { border-color: rgba(201,168,76,0.4); }
.modalNewstyle .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }

/* ============================================================
   MOBILE STICKY BOTTOM BAR  (homepage only, ≤1060px)
   Matches theme24 floatingBtnMb — pill container floating
   15px above bottom, theme-primary background, white text.
============================================================ */
.mobile-sticky-bar {
    display: none;              /* hidden on desktop; made flex by media query */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 15px;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));  /* iPhone home indicator */
    margin: 0 15px;
    z-index: 1040;
    flex-direction: row;
    align-items: stretch;
    border-radius: 50px;
    overflow: hidden;
    background-color: var(--primary-theme-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.30);
}
.mobile-sticky-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 50%;
    padding: 16px 10px;
    color: #fff !important;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: background 0.25s;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
}
.mobile-sticky-bar__btn + .mobile-sticky-bar__btn {
    border-left: 1px solid rgba(255,255,255,0.30);
}
.mobile-sticky-bar__btn:hover,
.mobile-sticky-bar__btn:active {
    background: rgba(255,255,255,0.12);
    color: #fff !important;
}

/* ============================================================
   MOBILE CART TAPE
   CSS ported from newthemechangeui.css so the floating cart bar
   and slide-up cart panel work on the homepage.
   Inner pages load newthemechangeui.css directly; homepage does not.
============================================================ */

/* ── Primary cart button (.btn_primary) ──────────────────── */
.btn_primary {
    background-color: var(--gold);
    border-color:     var(--gold);
    color:            var(--black);
    font-family:      var(--font-body);
    font-size:        13px;
    font-weight:      700;
    letter-spacing:   2px;
    text-transform:   uppercase;
    transition:       background 0.3s ease, color 0.3s ease;
}
.btn_primary:hover {
    background-color: transparent;
    color:            var(--gold);
}
.btn_primary:focus { color: #ffffff; }
.btn_primary > span {
    display: inline-block;
    vertical-align: middle;
}
.btn_primary > span > img { display: block; }

/* ── Floating bottom cart bar ────────────────────────────── */
.floatingCart {
    padding: 15px 20px;
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));  /* iPhone home indicator */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 30px 30px 0 0;
    z-index: 1050;   /* above .mobile-sticky-bar (1040) */
}
.floatingCart .cartPrice {
    font-size: 18px;
    font-weight: bold;
}
.floatingCart .cartPrice > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
.floatingCart .cartPrice > span + span { margin-left: 5px; }
.floatingCart .cartPrice > span > img  { display: block; }
.floatingCart .cartPrice svg path {
    fill: var(--primary-theme-color, var(--gold)) !important;
}

/* ── Cart tape wrapper ───────────────────────────────────── */
.mobile_footer_tape { display: none; }   /* hidden by default */
.mobile_footer_tape {
    position: relative;
    z-index: 99;
}

/* ── Cart main / title ───────────────────────────────────── */
.nwCartMain .nwCartTitle {
    padding: 15px 0 10px;
    border-bottom: 1px solid #E3E3E3;
}
.nwCartMain .nwCartTitle h2 {
    font-size: 20px;
    font-weight: 600;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    text-align: left;
}

/* ── Cart items ──────────────────────────────────────────── */
.cartCardImg { width: 70px; }
.cartCardImg > img {
    width: 100%;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
}
.nwaddDetail {
    border-bottom: 1px solid #E3E3E3;
    margin-bottom: 15px;
    padding-bottom: 15px;
}
.nwaddDetail h2 { font-size: 14px; }
.nwaddDetail p  { margin: 0 0 2px; font-size: 14px; color: #130F26; }
.nwaddDetail p span { font-weight: 700; }
.nwaddText h3  { font-size: 16px; color: #130F26; font-weight: 700; margin: 0; }
.nwaddDetailMain {
    border: 1px dashed;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
}
.nwaddDetailMain + .nwaddDetailMain { margin-top: 10px; }
.edRMainCol { padding-top: 10px; }
.rEdCol ul li {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 600;
}
.rEdCol ul li span { display: inline-block; vertical-align: middle; }
.rEdCol ul li span img { display: block; margin-right: 4px; }
.rEdCol ul li + li { margin-left: 15px; }
a.removeStyle { color: #d33315; }

/* ── Quantity +/- buttons ────────────────────────────────── */
.cart-inc-dec .quantity {
    display: flex !important;
    border: 1px solid #dddddd !important;
    width: 84px;
    height: 30px;
    border-radius: 50px;
    align-items: center;
    overflow: hidden;
}
/* Strip browser-native appearance so width/height work on all mobile browsers */
.cart-inc-dec .quantity .minus,
.cart-inc-dec .quantity .plus {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    background-color: transparent;
    box-shadow: none !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 30px !important;
    cursor: pointer;
    font-size: 18px !important;
    line-height: 30px;
    color: #333 !important;
    padding: 0;
    text-align: center;
}
.cart-inc-dec .quantity .minus { border-radius: 30px 0 0 30px !important; }
.cart-inc-dec .quantity .plus  { border-radius: 0 30px 30px 0 !important; }
.cart-inc-dec .quantity input.qty {
    -webkit-appearance: none !important;
    appearance: none !important;
    font-weight: 600;
    font-size: 14px !important;
    height: 30px !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #000 !important;
    flex: 1 1 0 !important;
    text-align: center;
    width: 0;           /* flex handles sizing; prevents default input min-width */
    padding: 0;
    min-width: 0;
}
.nwaddDetail .cart-inc-dec .quantity input.qty { background-color: transparent; }

/* ── Cart total summary row ──────────────────────────────── */
.cartTotalPrice h4 { font-size: 18px; }

/* ── Empty cart ──────────────────────────────────────────── */
.emptyCartIcon { max-width: 200px; margin: 0 auto; }
.emptyCartCol {
    background-color: #ffffff;
    padding: 40px 20px 20px;
    position: relative;
}
.emptyCartCol::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background-color: rgba(0, 0, 0, 0.1);
}
.emptyCartCol > h3 { font-size: 20px; font-weight: 700; }
.emptyCartCol p a  { font-weight: 600; }
.emptyCartCol p    { font-size: 14px; }

/* ── Empty cart floating animation ──────────────────────── */
.emptyCartIcon svg #oval,
.emptyCartIcon svg #plus,
.emptyCartIcon svg #diamond,
.emptyCartIcon svg #bubble-rounded {
    -webkit-animation: plopp 4s ease-out infinite;
    animation: plopp 4s ease-out infinite;
}
@-webkit-keyframes plopp {
    0%   { transform: translate(0, 0);     opacity: 1; }
    100% { transform: translate(0, -10px); opacity: 0; }
}
@keyframes plopp {
    0%   { transform: translate(0, 0);     opacity: 1; }
    100% { transform: translate(0, -10px); opacity: 0; }
}

/* ── Pay button ──────────────────────────────────────────── */
.btn_primary.payBtn::before { border-radius: 14px; }

/* ============================================================
   MOBILE CART TAPE — slide-up panel (≤1199px)
============================================================ */
@media (max-width: 1199px) {
    /* Sidebar (cart panel) starts off-screen below, slides up on .cartSlide */
    .sidebarright {
        position: fixed;
        left: 0; right: 0;
        top: auto; bottom: 0;
        width: 100%;
        background-color: transparent;
        z-index: 11;
        margin: 0;
        overflow-y: inherit;
        -webkit-transition: all 300ms ease-in-out 0s;
        transition: all 300ms ease-in-out 0s;
        -webkit-transform: translateY(200%) !important;
        transform: translateY(200%) !important;
    }
    .cartSlide .sidebarright {
        -webkit-transform: translateY(0%) !important;
        transform: translateY(0%) !important;
    }
    .nwCartTitle { position: relative; }
    .cartBody {
        max-height: calc(100vh - 160px);
        max-height: calc(100dvh - 160px);  /* iOS 15.4+: true viewport height */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
        padding: 0 20px 130px;
    }
    .mobile_footer_tape .nwCartInner {
        max-height: calc(100vh - 200px);
        max-height: calc(100dvh - 200px);  /* iOS 15.4+ */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 10px 0 100px;
    }
    .mobile_footer_tape .nwCartMain {
        background-color: #ffffff;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.14);
        border-radius: 30px 30px 0 0;
        padding: 15px;
    }
    .emptyCartCol {
        max-height: calc(100vh - 160px);
        max-height: calc(100dvh - 160px);  /* iOS 15.4+ */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 30px 0 100px;
    }
    .emptyCartCol h4   { font-size: 18px; margin: 15px 0; }
    .emptyCartCol::before { display: none; }
    .nwCartMain .nwCartTitle   { padding: 0 0 15px; }
    .nwCartMain .nwCartTitle h2 { text-align: center; }
    .cartCardImg        { width: 50px; }
    .cartCardImg > img  { height: 50px; }
    .cartTitle {
        font-size: 25px;
        font-weight: 600;
        padding: 15px 100px;
        text-align: center;
        margin: 0;
        background-color: #ffffff;
        position: relative;
    }
    .cartBackIcon {
        position: absolute;
        left: 10px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-top: -6px;
    }
    .cartBackIcon > img { display: block; }
    /* Fixed pay-bar at bottom of open cart */
    .p2pCol {
        padding: 20px 30px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));  /* iPhone home indicator */
        position: fixed;
        left: 0; right: 0; bottom: 0;
        background-color: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 40px 40px 0 0;
        z-index: 9999;
    }
    .priceLgText { font-size: 22px; font-weight: bold; }
    /* Dark overlay behind open cart */
    html.cartSlide { position: relative; overflow: hidden; }
    html.cartSlide::before {
        content: "";
        position: fixed;
        left: 0; right: 0; top: 0; bottom: 0;
        -webkit-transition: all 300ms ease-in-out 0s;
        transition: all 300ms ease-in-out 0s;
        background-color: rgba(19, 15, 38, 0.8);
        z-index: 10 !important;
    }
    /* Hide sticky bar AND floating cart bar when cart panel is open.
       Reason: .floatingCart has z-index:1050 while .sidebarright has z-index:11,
       so without hiding it the floating bar would cover the p2pCol "Proceed To Pay"
       bar (which lives inside the sidebarright stacking context). */
    html.cartSlide .mobile-sticky-bar { display: none !important; }
    html.cartSlide .floatingCart      { display: none !important; }
    html.cartSlide .ak-scrollup       { display: none !important; }
    .cartTotalPrice {
        padding: 20px 30px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));  /* iPhone home indicator */
        position: fixed;
        left: 0; right: 0; bottom: 0;
        background-color: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 40px 40px 0 0;
        z-index: 9999;
    }
    .btn.payBtn {
        text-align: left;
        position: relative;
        font-weight: 700;
        min-width: 145px;
        border-radius: 14px;
        text-transform: capitalize;
        font-size: 13px;
        padding: 11px 45px 11px 15px;
    }
    .btn.payBtn > span          { line-height: 1; }
    .btn.payBtn > span > span   { font-size: 20px; }
    .btn.payBtn > span > img    { width: 10px; }
    .payBtnIcon {
        position: absolute;
        right: 20px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    /* Show the cart tape on mobile */
    .mobile_footer_tape { display: block; }
    .mobile_footer_tape .pageContent.mobilePageContent { padding: 0; }
    .sidebarright { width: 100% !important; }
    body { overflow-x: hidden; }

    .seo-info-text-wrapper {
        margin-bottom: -25px;
    }
}

/* ── Refinements at ≤991px ───────────────────────────────── */
@media (max-width: 991px) {
    .cartTotalPrice {
        padding: 15px 20px;
        border-radius: 20px 20px 0 0;
    }
    .p2pCol {
        padding: 15px;
        border-radius: 20px 20px 0 0;
    }
}

/* ── Refinements at ≤767px ───────────────────────────────── */
@media (max-width: 767px) {
    .floatingCart           { padding: 8px 15px; }
    .floatingCart .cartPrice { font-size: 16px; }
    .floatingCart .cartPrice svg { width: 18px; }
    .cartRightText.viewCartItems a { font-size: 14px; }
}

/* ============================================================
   ORDER ONLINE PAGE  (home/order-online — v25 RESERVE theme)
   Uses main.php layout (transparent navbar overlays hero).
   Replicates ROOH's /pa-order layout:
     1. Full-height hero with dark overlay + heading
     2. TAKE AWAY section (dark bg)
     3. Delivery platforms row (light cream bg)
============================================================ */

/* ── 1. Hero ──────────────────────────────────────────────── */
.order-page__hero {
    position: relative;
    height: 100vh;
    height: 100dvh;   /* iOS 15.4+: shrinks with Safari URL bar */
    min-height: 600px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.order-page__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(28,28,28,0.65) 0%,
        rgba(54,7,56,0.35)  50%,
        rgba(28,28,28,0.75) 100%
    );
}
.order-page__hero-content {
    position: relative;
    z-index: 1;
    padding: 0 24px;
}
.order-page__eyebrow {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}
.order-page__title {
    font-family: var(--font-heading);
    font-size: clamp(44px, 7vw, 80px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.05;
    margin: 0 0 20px;
}
.order-page__rule {
    width: 60px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 20px;
    opacity: 0.7;
}
.order-page__location-name {
    font-family: var(--font-display);
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
}

/* ── 2. Section shared styles ─────────────────────────────── */
.order-page__section { padding: 80px 0; }
.order-page__section-inner {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}
.order-page__section-heading {
    font-family: var(--font-heading);
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 20px;
}
.order-page__rule--gold {
    width: 50px;
    height: 2px;
    background: var(--gold);
    margin: 0 0 28px;
    opacity: 0.8;
}
.order-page__rule--center { margin: 0 auto 40px; }
.order-page__section-text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 36px;
}
.order-page__section-text a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
.order-page__section-text a:hover { color: #fff; }

/* ── 3. TAKE AWAY — white bg (matches ROOH /pa-order) ────────── */
.order-page__takeaway {
    background: #ffffff;
    color: var(--black);
}
.order-page__takeaway .order-page__section-heading { color: var(--black); }
.order-page__takeaway .order-page__section-text    { color: #666666; }
.order-page__takeaway .order-page__section-text a  { color: var(--navy); }
.order-page__takeaway .order-page__section-text a:hover { color: var(--black); }

.order-page__btn {
    display: inline-block;
    padding: 16px 48px;
    background: var(--navy);
    border: 2px solid var(--navy);
    color: #ffffff !important;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.25s, border-color 0.25s;
}
.order-page__btn:hover {
    background: #4a0f4e;
    border-color: #4a0f4e;
    color: #ffffff !important;
}

/* ── 4. Delivery platforms — cream bg ─────────────────────── */
.order-page__delivery {
    background: #f5f0e8;
    text-align: center;
}
.order-page__delivery .order-page__section-heading { color: #1a1208; }
.order-page__platforms {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.order-page__platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 36px 40px;
    background: #ffffff;
    border: 1px solid rgba(201,168,76,0.2);
    min-width: 200px;
    text-decoration: none !important;
    color: #1a1208 !important;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.order-page__platform:hover {
    border-color: var(--gold);
    box-shadow: 0 6px 24px rgba(201,168,76,0.15);
    transform: translateY(-3px);
}
.order-page__platform-logo {
    width: 130px;
    height: 36px;
    display: flex;
    align-items: center;
}
.order-page__platform-logo svg {
    width: 100%;
    height: 100%;
    color: #1a1208;
}
.order-page__platform-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
}

/* ── 5. Photo gallery ─────────────────────────────────────────
   Desktop : 4 columns, 12px white gap between images,
             16px white padding top + bottom (creates white border above/below)
             no side padding — images run edge-to-edge horizontally
   Mobile  : 1 column, full-width images, no side gaps
──────────────────────────────────────────────────────────── */
.order-page__gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;               /* white gap between images */
    background: #ffffff;     /* gap colour = white */
    width: 100%;
    padding: 16px 0;         /* white border top and bottom only */
}
.order-page__gallery-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #ffffff;
}
.order-page__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.order-page__gallery-item:hover img {
    transform: scale(1.06);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .order-page__hero       { height: 100vh; height: 100dvh; min-height: 500px; }
    .order-page__section    { padding: 56px 0; }
    .order-page__platforms  { flex-direction: column; align-items: center; }
    .order-page__platform   { width: 100%; max-width: 320px; padding: 28px 24px; }

    /* Gallery — single column, full-width, no side gaps (matches ROOH mobile) */
    .order-page__gallery {
        grid-template-columns: 1fr !important;
        gap: 12px;            /* vertical gap between stacked images */
        padding: 16px 0;      /* white top/bottom only — no side padding */
    }
}

/* ============================================================
   MENUS PAGE  (home/menus — v25 RESERVE theme)
   Replicates ROOH's /pa-menus layout:
     1. Full-viewport hero (identical pattern to order-online)
     2. Menu cards — 3-column grid, square image + centred label overlay
============================================================ */

/* ── 1. Hero — identical to order-online hero ─────────────── */
.menus-page__hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.menus-page__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(28,28,28,0.65) 0%,
        rgba(54,7,56,0.35)  50%,
        rgba(28,28,28,0.75) 100%
    );
}
.menus-page__hero-content {
    position: relative;
    z-index: 1;
    padding: 0 24px;
}
.menus-page__eyebrow {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}
.menus-page__title {
    font-family: var(--font-heading);
    font-size: clamp(44px, 7vw, 80px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.05;
    margin: 0 0 20px;
}
.menus-page__rule {
    width: 60px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 20px;
    opacity: 0.7;
}
.menus-page__location-name {
    font-family: var(--font-display);
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
}

/* ── 2. Cards section ─────────────────────────────────────── */
.menus-page__section {
    padding: 80px 0 100px;
    background: #ffffff;
}
.menus-page__section-heading {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--black);
    text-align: center;
    margin: 0 0 16px;
}
.menus-page__rule--gold {
    width: 50px;
    height: 2px;
    background: var(--gold);
    opacity: 0.8;
    margin-bottom: 56px;
}
.menus-page__rule--center { margin-left: auto; margin-right: auto; }

/* ── 3-column grid — full-width, matches ROOH's edge-to-edge layout ── */
.menus-page__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 0 16px;   /* small breathing room from viewport edges */
    width: 100%;
}

/* ── Card — square image + centred label overlay ── */
.menus-page__card {
    display: block;
    text-decoration: none !important;
    overflow: hidden;
}
.menus-page__card-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.menus-page__card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.menus-page__card:hover .menus-page__card-img-wrap img {
    transform: scale(1.06);
}
/* No overlay by default — images show at full brightness like ROOH.
   A very light tint appears only on hover for depth. */
.menus-page__card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.35s ease;
}
.menus-page__card:hover .menus-page__card-overlay {
    background: rgba(0,0,0,0.22);
}
/* Label centred over image — readable via text-shadow, not overlay */
.menus-page__card-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ffffff;
    z-index: 1;
    text-align: center;
    padding: 16px;
    text-shadow:
        0 2px 12px rgba(0,0,0,0.75),
        0 1px  4px rgba(0,0,0,0.60);
    transition: letter-spacing 0.3s ease;
}
.menus-page__card:hover .menus-page__card-label {
    letter-spacing: 5px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .menus-page__hero      { height: 100vh; height: 100dvh; min-height: 500px; }
    .menus-page__section   { padding: 56px 0 72px; }
    /* 1 column on mobile — same as ROOH (xs-12) */
    .menus-page__grid      { grid-template-columns: 1fr !important; gap: 12px; padding: 0 12px; }
    .menus-page__card-label { font-size: clamp(22px, 6vw, 32px); }
}

/* ============================================================
   RESERVATIONS PAGE  (home/reservations — v25 RESERVE theme)
   Matches ROOH's /pa-reservations:
     1. Full-viewport hero
     2. White intro text
     3. Reservation module — no parallax bg, no heading
     4. Parallax policy section — 2×2 card grid with food bg
============================================================ */

/* ── 1. Hero ──────────────────────────────────────────────── */
.res-page__hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.res-page__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(28,28,28,0.65) 0%,
        rgba(54,7,56,0.35)  50%,
        rgba(28,28,28,0.75) 100%
    );
}
.res-page__hero-content { position: relative; z-index: 1; padding: 0 24px; }
.res-page__eyebrow {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}
.res-page__title {
    font-family: var(--font-heading);
    font-size: clamp(44px, 7vw, 80px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.05;
    margin: 0 0 20px;
}
.res-page__rule {
    width: 60px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 20px;
    opacity: 0.7;
}
.res-page__location-name {
    font-family: var(--font-display);
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
}

/* ── 2. Intro text ────────────────────────────────────────── */
.res-page__intro {
    background: #ffffff;
    padding: 48px 0 32px;
    text-align: center;
}
.res-page__intro-text {
    font-family: var(--font-body);
    font-size: 16px;
    color: #555555;
    line-height: 1.8;
    max-width: 720px;
    margin: 0 auto;
}
.res-page__intro-text a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}
.res-page__intro-text a:hover { color: var(--gold); }

/* ── 3. Reservation module overrides for reservations page ───
   - No parallax bg (background-image removed)
   - Reduced padding: homepage uses 204px to show the bg image
     on both sides of the box; plain white needs much less
   - Wider box: 760px cap was for the homepage hero context;
     a dedicated page benefits from more breathing room
──────────────────────────────────────────────────────────── */
.res-page__form-wrapper .reservations {
    background-image: none !important;
    background-color: #ffffff !important;
    padding: 72px 48px !important;     /* was 204px — no bg to reveal */
}
.res-page__form-wrapper .reservations__box {
    max-width: 1060px !important;      /* was 760px — wider, less cramped */
    padding: 72px 80px !important;     /* more internal breathing room */
}
@media (max-width: 991px) {
    .res-page__form-wrapper .reservations { padding: 48px 20px !important; }
    .res-page__form-wrapper .reservations__box { padding: 48px 28px !important; }
}

/* ── 4. Policies — parallax bg + 2×2 card grid ───────────── */
.res-page__policies {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;   /* parallax scroll effect */
    padding: 0;
}
/* 2-column × 2-row grid, no outer padding — matches ROOH edge-to-edge */
.res-page__policy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;           /* thin gap shows bg image between cards */
}
/* Each card: semi-transparent navy overlay on the bg image */
.res-page__policy-card {
    background: rgba(54, 7, 56, 0.72);   /* --navy at 72% opacity */
    padding: 48px 40px;
    text-align: center;
    color: #ffffff;
}
.res-page__policy-card-heading {
    font-family: var(--font-heading);
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 20px;
}
.res-page__policy-card-text {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255,255,255,0.88);
    margin: 0;
}
.res-page__policy-card-text strong { color: #ffffff; }
.res-page__policy-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: inline-block;
}
.res-page__policy-card-list li {
    font-family: var(--font-body);
    font-size: 15px;
    color: rgba(255,255,255,0.88);
    line-height: 1.8;
    padding: 5px 0 5px 20px;
    position: relative;
}
.res-page__policy-card-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-size: 16px;
}
.res-page__policy-card-list strong { color: #ffffff; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .res-page__hero   { height: 100vh; height: 100dvh; min-height: 500px; }
    .res-page__intro  { padding: 36px 0 24px; }
    /* Stack cards to single column on mobile */
    .res-page__policy-grid { grid-template-columns: 1fr !important; }
    .res-page__policy-card { padding: 36px 24px; }
    /* Disable fixed attachment on mobile (causes issues on iOS) */
    .res-page__policies { background-attachment: scroll; }
}

/* ============================================================
   GRADUATION PARTIES PAGE  (home/graduation-parties — v25)
   Replicates ROOH's /graduation-party-dinner-san-francisco:
     1. Full-viewport hero with CTA button
     2. Content section — image left / text right
============================================================ */

/* ── 1. Hero ──────────────────────────────────────────────── */
.grad-page__hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.grad-page__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(28,28,28,0.60) 0%,
        rgba(54,7,56,0.30)  50%,
        rgba(28,28,28,0.70) 100%
    );
}
.grad-page__hero-content {
    position: relative;
    z-index: 1;
    padding: 0 24px;
    max-width: 860px;
}
.grad-page__eyebrow {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}
.grad-page__title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    margin: 0 0 20px;
}
.grad-page__rule {
    width: 60px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 24px;
    opacity: 0.7;
}
.grad-page__sub {
    font-family: var(--font-display);
    font-size: clamp(16px, 2.5vw, 22px);
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 36px;
}
/* Hero CTA button — gold outline → filled on hover */
.grad-page__hero-btn {
    display: inline-block;
    padding: 15px 44px;
    border: 2px solid var(--gold);
    color: var(--gold) !important;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.25s, color 0.25s;
}
.grad-page__hero-btn:hover {
    background: var(--gold);
    color: var(--black) !important;
}

/* ── 2. Content section ───────────────────────────────────── */
.grad-page__content {
    background: #ffffff;
    padding: 80px 0 100px;
}
.grad-page__content-heading {
    font-family: var(--font-heading);
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--black);
    text-align: center;
    margin: 0 0 16px;
}
.grad-page__rule--gold {
    width: 50px;
    height: 2px;
    background: var(--gold);
    opacity: 0.8;
    margin-bottom: 56px;
}
.grad-page__rule--center { margin-left: auto; margin-right: auto; }

/* Image — left column */
.grad-page__content-img-wrap {
    overflow: hidden;
    height: 100%;
    min-height: 400px;
}
.grad-page__content-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.grad-page__content-img-wrap:hover img { transform: scale(1.04); }

/* Text — right column */
.grad-page__content-text {
    padding: 0 0 0 40px;
}
.grad-page__content-text p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.85;
    color: #555555;
    margin-bottom: 20px;
}
/* Content CTA button — solid navy */
.grad-page__content-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 14px 40px;
    background: var(--navy);
    border: 2px solid var(--navy);
    color: #ffffff !important;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.25s, border-color 0.25s;
}
.grad-page__content-btn:hover {
    background: #4a0f4e;
    border-color: #4a0f4e;
    color: #ffffff !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .grad-page__hero   { height: 100vh; height: 100dvh; min-height: 500px; }
    .grad-page__content { padding: 56px 0 72px; }
    .grad-page__rule--gold { margin-bottom: 36px; }
    .grad-page__content-img-wrap { min-height: 280px; margin-bottom: 32px; }
    .grad-page__content-text { padding: 0; }
}

/* ============================================================
   LARGE GROUP RESERVATIONS PAGE  (home/large-group-reservations)
   Replicates ROOH's /pa-private-events:
     1. Full-viewport hero
     2. Centred text section — H2 + sub + H3 + body + CTA
============================================================ */

/* ── 1. Hero ──────────────────────────────────────────────── */
.lgr-page__hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.lgr-page__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(28,28,28,0.65) 0%,
        rgba(54,7,56,0.35)  50%,
        rgba(28,28,28,0.75) 100%
    );
}
.lgr-page__hero-content { position: relative; z-index: 1; padding: 0 24px; }
.lgr-page__eyebrow {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}
.lgr-page__title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    margin: 0 0 20px;
}
.lgr-page__rule {
    width: 60px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 20px;
    opacity: 0.7;
}
.lgr-page__location-name {
    font-family: var(--font-display);
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
}

/* ── 2. Centred content section ───────────────────────────── */
.lgr-page__content {
    background: #ffffff;
    padding: 88px 0 100px;
}
.lgr-page__content-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
/* Main H2 — matches ROOH's large centred heading */
.lgr-page__heading {
    font-family: var(--font-heading);
    font-size: clamp(26px, 4vw, 46px);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 28px;
    line-height: 1.15;
}
/* All-caps sub-heading paragraph — large, muted */
.lgr-page__subheading {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #666666;
    line-height: 1.7;
    margin: 0 0 36px;
}
.lgr-page__rule--gold {
    width: 50px;
    height: 2px;
    background: var(--gold);
    opacity: 0.8;
    margin-bottom: 36px;
}
.lgr-page__rule--center { margin-left: auto; margin-right: auto; }
/* "Our Packages" H3 */
.lgr-page__packages-heading {
    font-family: var(--font-heading);
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: 600;
    color: var(--black);
    margin: 0 0 28px;
    letter-spacing: 1px;
}
/* Body text paragraphs */
.lgr-page__body p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.85;
    color: #555555;
    margin-bottom: 18px;
}
.lgr-page__body a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}
.lgr-page__body a:hover { color: var(--gold); }
/* CTA button */
.lgr-page__cta-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 16px 52px;
    background: var(--navy);
    border: 2px solid var(--navy);
    color: #ffffff !important;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.25s, border-color 0.25s;
}
.lgr-page__cta-btn:hover {
    background: #4a0f4e;
    border-color: #4a0f4e;
    color: #ffffff !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .lgr-page__hero    { height: 100vh; height: 100dvh; min-height: 500px; }
    .lgr-page__content { padding: 60px 0 72px; }
    .lgr-page__content-inner { padding: 0 8px; }
}

/* ============================================================
   CATERING PAGE  (home/catering — v25 RESERVE theme)
   Replicates ROOH's /san-francisco-catering layout:
     1. Full-viewport hero
     2. 4-image horizontal photo gallery strip
============================================================ */

/* ── 1. Hero ──────────────────────────────────────────────── */
.cat-page__hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.cat-page__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(28,28,28,0.65) 0%,
        rgba(54,7,56,0.35)  50%,
        rgba(28,28,28,0.75) 100%
    );
}
.cat-page__hero-content { position: relative; z-index: 1; padding: 0 24px; }
.cat-page__eyebrow {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}
.cat-page__title {
    font-family: var(--font-heading);
    font-size: clamp(44px, 7vw, 80px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.05;
    margin: 0 0 20px;
}
.cat-page__rule {
    width: 60px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 20px;
    opacity: 0.7;
}
.cat-page__location-name {
    font-family: var(--font-display);
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
}

/* ── 2. 4-image gallery strip ─────────────────────────────── */
/* Section wrapper — white bg shows on top and sides of the grid */
.cat-page__gallery-section {
    background: #ffffff;
    padding: 10px 0 0;     /* white border on top; sides come from .container */
}
/* Grid — fills container width, white gaps between images */
.cat-page__gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;              /* white dividers between images */
    background: #ffffff;   /* gap colour = white */
}
.cat-page__gallery-item {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #ffffff;
}
.cat-page__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.cat-page__gallery-item:hover img { transform: scale(1.06); }

/* ── 3. Content box ───────────────────────────────────────── */
.cat-page__content {
    background: #ffffff;
    padding: 60px 0 80px;
}
.cat-page__content-box {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    padding: 48px 40px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.cat-page__content-box p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.8;
    color: #444444;
    margin-bottom: 20px;
}
.cat-page__content-box p:last-of-type { margin-bottom: 32px; }
.cat-page__cta-btn {
    display: inline-block;
    padding: 16px 44px;
    background: var(--navy);
    border-radius: 6px;
    color: #ffffff !important;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.25s;
}
.cat-page__cta-btn:hover { background: #4a0f4e; color: #ffffff !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .cat-page__hero        { height: 100vh; height: 100dvh; min-height: 500px; }
    .cat-page__gallery     { grid-template-columns: repeat(2, 1fr) !important; }
    .cat-page__content     { padding: 40px 0 56px; }
    .cat-page__content-box { padding: 36px 24px; }
    .cat-page__gallery-section { padding: 8px 0 0; }
}
@media (max-width: 480px) {
    .cat-page__gallery         { grid-template-columns: 1fr !important; }
    .cat-page__gallery-item    { aspect-ratio: 16 / 9; }
}