/* ============================================================
   Reserve-style Theme (web_v31) — Inner Page Styles
   Loaded by Main_innerAsset for menu, cart, checkout, profile, etc.
   Fonts and core vars match style.css; overwrites suit solid-navbar
   inner-page layout.
============================================================ */

@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');

:root {
    /* ── Fonts ──────────────────────────────────────────── */
    --font-heading:  'Playfair Display', serif;
    --font-display:  'Cormorant Garamond', serif;
    --font-body:     'Lato', sans-serif;

    /* ── Palette ─────────────────────────────────────────── */
    --black:         #1c1c1c;   /* matches homepage style.css --black */
    --gold:          #c9a84c;   /* matches homepage style.css --gold */
    --gold-light:    #c4877b;   /* matches homepage style.css --gold-light */
    --gold-rgb:      201,168,76;   /* rgb triplet of --gold, for translucent gold spots */
    --cream:         #f5f0e8;
    --dark-brown:    #1a1208;
    --text-muted:    rgba(255,255,255,0.6);
    --navbar-height: 72px;
    --nav-text:      rgba(255,255,255,0.92);   /* navbar link color — tintable per variation */
    --navy-hover:    #4a0f4e;   /* navy CTA hover/darken shade — tintable per variation */
    --btn-radius:    0;         /* CTA button corner style — tintable per variation */

    /* ── Shared dark palette (mirrors style.css — needed for inner-page-only load) */
    --navy:          #360738;
    --navy-mid:      #360738;
    --navy-mid-rgb:  54,7,56;   /* rgb triplet of --navy-mid, for translucent boxes/gradients */
    --navy-dark:     #002f07;
    --text-dark:     #1c1c1c;
    --text-mid:      #7a6458;
    --white:         #ffffff;

    /* ── Inner-page light background ─────────────────────── */
    --inner-bg:      #ffffff;
    --inner-text:    #1a1208;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.newtheme_inner_page {
    font-family:    var(--font-body);
    background:     var(--inner-bg);
    color:          var(--inner-text);
    padding-top:    var(--navbar-height);   /* offset fixed navbar */
    min-height:     100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }

img { max-width: 100%; }

ul { list-style: none; padding: 0; margin: 0; }

/* ============================================================
   FULL NAVBAR — copied from style.css so inner pages have all
   the layout, menu, hamburger, mobile-nav, and dropdown styles.
   Inner pages are always solid (no transparent/scrolled states).
============================================================ */
.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 flex-wrap:wrap breaking the nav */
    align-items: center !important;
    padding: 0 28px !important;
    background: var(--black) !important;
    border-bottom: 1px solid rgba(var(--gold-rgb),0.15) !important;
    box-shadow: 0 2px 24px rgba(0,0,0,0.5) !important;
}

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

.nav-item { position: relative; }

/* Nav link — white on solid dark navbar, gold on hover/active */
.nav-btn,
a.nav-btn,
button.nav-btn {
    background: none !important;
    border: none;
    color: var(--nav-text) !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 !important;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: color 0.25s ease;
}
.nav-btn:hover,
a.nav-btn:hover,
button.nav-btn:hover,
.nav-btn.active,
a.nav-btn.active { color: var(--gold) !important; }

/* Cart badge — absolutely positioned top-right of the cart button */
.nav-btn.cartCol {
    position: relative !important;
}
.nav-btn .cartCount {
    position: absolute;
    top: 12px;
    right: 4px;
    background: var(--gold);
    color: var(--black);
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    margin-left: 0;
    pointer-events: none;
}

/* Highlighted (Large Group Reservations CTA) — deep purple pill */
.nav-btn--highlight,
a.nav-btn--highlight,
button.nav-btn--highlight {
    background: var(--navy-mid, #360738) !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: var(--btn-radius);
    text-shadow: none;
}
.nav-btn--highlight:hover,
a.nav-btn--highlight:hover,
button.nav-btn--highlight:hover {
    background: var(--navy-hover) !important;
    color: #fff !important;
}

/* ---- Standard nav dropdowns (Order Online, Menus, Reservations, etc.) ---- */
.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.nav-item--open .dropdown { display: block !important; }
.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;
    height: auto !important;
}
.dropdown a:hover { background: none; color: var(--gold) !important; }

/* ---- Auth dropdown (Hello Name → dropMenu) ---- */
.dropMenu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    background: var(--black);
    border: 1px solid rgba(var(--gold-rgb),0.2);
    border-top: 2px solid var(--gold);
    min-width: 190px;
    z-index: 1200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.nav-item.nav-item--open .dropMenu { display: block !important; }
.dropMenu ul { list-style: none; padding: 0; margin: 0; }
.dropMenu ul li a,
.dropMenu a {
    display: block;
    padding: 11px 18px;
    color: var(--gold) !important;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(var(--gold-rgb),0.08);
    transition: background 0.2s, color 0.2s;
    text-decoration: none !important;
    height: auto !important;
}
.dropMenu ul li:last-child a,
.dropMenu a:last-child { border-bottom: none; }
.dropMenu ul li a:hover,
.dropMenu a:hover { background: rgba(var(--gold-rgb),0.08); color: var(--gold-light) !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: var(--gold);
    margin: 5px 0;
    transition: all 0.3s;
    transform-origin: center;
}
.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 menu's own logo header — mirrors style.css's version (inner pages load this
   file instead, never that one, so the rule has to be duplicated here too). Without
   this, the logo img falls back to the generic `img { max-width:100% }` rule above and
   renders far too large inside the menu. */
.mobile-nav__header {
    padding: 10px 28px;
    border-bottom: 1px solid rgba(var(--gold-rgb),0.15);
}
/* Two classes here (vs. .mobile-nav a's one class + one type selector) so this reliably
   overrides the generic menu-item link styling (15px/28px padding, border-bottom, block
   display) that .mobile-nav__logo would otherwise inherit — it's still just an <a> inside
   .mobile-nav, same as "Menus"/"Reservations"/etc. Without this override the logo picked
   up an extra ~30px of padding and a border it was never meant to have. */
.mobile-nav__header .mobile-nav__logo {
    display: inline-block;
    padding: 0;
    border-bottom: none;
}
.mobile-nav__logo img {
    height: 48px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}
/* Hide the persistent top-bar logo while the mobile menu is open (see custom.js, which
   toggles this class) — same reasoning as style.css's copy of this rule. */
body.mobile-menu-open .navbar__logo {
    opacity: 0;
    pointer-events: none;
}
.mobile-nav a {
    display: block;
    padding: 15px 28px;
    color: var(--gold) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(var(--gold-rgb),0.1);
    text-decoration: none;
}
.mobile-nav a:hover { background: rgba(var(--gold-rgb),0.07); }

/* ---- Back to top ---- */
.ak-scrollup {
    position: fixed;
    bottom: -60px;
    right: 30px;
    width: 44px; height: 44px;
    background: var(--navy, #360738);
    color: #fff;
    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: 60px; }
.ak-scrollup:hover { background: #1a0320; }
/* Hide back-to-top when cart panel is open — it floats above the cart overlay */
html.cartSlide .ak-scrollup { display: none !important; }

/* ---- Mobile user account button + dropdown ---- */
.mobile-user-btn {
    display: none;
    background: none;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--gold);
    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-light); }

.mobile-user-dropdown {
    display: none;
    position: fixed;
    top: 72px;
    right: 0;
    background: var(--black);
    border-left:   1px solid rgba(var(--gold-rgb),0.2);
    border-bottom: 1px solid rgba(var(--gold-rgb),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(var(--gold-rgb),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(var(--gold-rgb),0.08);
    text-decoration: none !important;
    transition: background 0.2s;
    height: auto !important;
}
.mobile-user-dropdown a:last-child { border-bottom: none; }
.mobile-user-dropdown a:hover { background: rgba(var(--gold-rgb),0.07); }

/* ---- Responsive breakpoints ---- */
@media (max-width: 1060px) {
    .navbar__menu { display: none !important; }
    .navbar__hamburger { display: block !important; margin-left: auto !important; }
    /* No mobile sticky bar on inner pages — homepage only */
    .mobile-sticky-bar { display: flex !important; }
    .footer {
        margin-bottom: -80px;
    }
}

/* ── Page title (used by inner pages) ─────────────────────── */
.oa-page-title {
    font-family: var(--font-heading);
    color:       var(--black);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn_primary,
.btn.btnPrimary {
    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,
.btn.btnPrimary:hover {
    background-color: transparent;
    color:            var(--gold);
}

/* ── Cart count badge ──────────────────────────────────────── */
.cartCount {
    background: var(--gold);
    color: var(--black);
}

/* ── Scrollbar ────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--gold) var(--cream); }
*::-webkit-scrollbar { width: 6px; }
*::-webkit-scrollbar-track { background: var(--cream); }
*::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* ── Flash / alert messages ───────────────────────────────── */
.floating-alert-top {
    position: fixed;
    top: calc(var(--navbar-height) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    min-width: 320px;
    max-width: 600px;
}

/* ── Product / menu page overrides ───────────────────────── */
.menuSection,
.fixedCenterScroll .menuSection {
    top: calc(var(--navbar-height) + 10px);
}

/* ── Sub-category tab pills — RESERVE theme colour scheme ── */
/* Base (inactive) tab: warm off-white with subtle gold border */
.menuPageContent .customContent .content .tablinks {
    background: #ffffff !important;
    border: 1px solid rgba(var(--gold-rgb),0.35) !important;
    color: var(--text-dark) !important;
    font-weight: 500;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
/* Hover: gold border + gold text */
.menuPageContent .customContent .content .tablinks:hover {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    background: rgba(var(--gold-rgb),0.06) !important;
}
/* Active tab: solid gold fill, dark text — matches .btn_primary */
.menuPageContent .customContent .content .tablinks.active {
    background-color: var(--gold) !important;
    border-color:     var(--gold) !important;
    color:            var(--black) !important;
    font-weight: 700;
}
/* Remove the 17px top padding that creates a blank gap above the
   subcategory tab pills when the bar is in sticky/stuck position */
.fixedCenterScroll .menuSection {
    padding-top: 0 !important;
}

/* ── Form elements ────────────────────────────────────────── */
.formStyle .form-control,
.formStyle .form-select {
    border: 1px solid rgba(201,169,110,0.4);
    border-radius: 4px;
    background: #fff;
    color: var(--inner-text);
}

.formStyle .form-control:focus,
.formStyle .form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201,169,110,0.25);
}

.labelStyle {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--inner-text);
}

/* ── Footer — full RESERVE footer (same as homepage) ─────── */
.footer {
    background: var(--black);
    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-width: 180px;
    width: 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.45);
    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(var(--gold-rgb),0.35);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 14px;
    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 { list-style: none; padding: 0; margin: 0; }
.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: 12px;
    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); }
.footer__link { color: var(--gold); transition: color 0.2s; }
.footer__link:hover { color: var(--gold-light); }

@media (max-width: 768px) {
    .footer { padding: 40px 24px 24px; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
    .footer__grid { grid-template-columns: 1fr; }
    .footer__bottom { flex-direction: column; text-align: center; }
    .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; }
}

/* ── Mobile cart tape ─────────────────────────────────────── */
.mobile_footer_tape {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;
}

/* ── Single-product slide panel ───────────────────────────── */
/* newthemechangeui.css sets z-index:9 which puts this below the fixed navbar (1030).
   Override to 1035 so the slide covers the navbar when .menuPSlide is active,
   while staying below Bootstrap's modal-backdrop (1040) so login modals still
   render above the product detail panel. */
.singleProductSlideCol {
    z-index: 1035 !important;
}
/* Also hide the mobile sticky bar and floating cart when product slide is open */
html.menuPSlide .mobile-sticky-bar { display: none !important; }
html.menuPSlide .ak-scrollup       { display: none !important; }

/* ── Product view: totalPriceColumn must clear the floatingCart tape ──────── */
/* newthemechangeui.css sets sticky bottom: 40px at ≤767px, but the floatingCart
   (.mobile_footer_tape) is fixed at bottom: 0 with z-index: 1001. The ~55px
   floatingCart bar overlaps the bottom ~15px of the price bar (z-index: 7).
   Raise sticky bottom to 70px so the price bar clears the floating cart. */
@media (max-width: 767px) {
    .customFixBar.editviewPage .totalPriceColumn {
        bottom: 70px;
    }
}

/* ── Products/index customise slide: fix phantom scroll space below price bar ── */
/*
   Root cause: newthemechangeui.css makes the <form> the scroll container at ≤767px:
     form { max-height: 100vh; overflow-y: auto }
   The .totalPriceColumn.offCanvasDetail inside it is `position: sticky; bottom: 40px`.
   When the product has many options, form content >> 100vh. Sticky leaves the
   element's natural DOM position at the END of the content, creating a large
   phantom scrollable void below the stuck bar. Users scroll into blank whitespace.

   Fix: convert the form to a flex column so ONLY .menuProductInner scrolls.
   The price bar is a natural flex child at the bottom — no sticky, no phantom space.
   Using 100dvh (dynamic viewport height) so the form fits the actual visible
   area on mobile Safari / Chrome regardless of browser UI state.
*/
@media (max-width: 767px) {
    .singleProductSlideCol .customFixBar form[data-ajax-form="addToCartProductChoice"] {
        display: flex;
        flex-direction: column;
        height: 100vh;           /* fallback for browsers without dvh support */
        height: 100dvh;          /* actual visible height incl. browser UI changes */
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;        /* form itself must NOT scroll */
    }
    .singleProductSlideCol .backToMenu {
        flex: 0 0 auto;          /* fixed-height bar at the top */
    }
    .singleProductSlideCol .menuProductInner {
        flex: 1 1 0;             /* grows to fill all remaining height */
        height: auto !important; /* override any explicit px rule from other queries */
        min-height: 0;           /* required: flex containers need this for overflow to work */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .singleProductSlideCol .customFixBar .totalPriceColumn.offCanvasDetail {
        flex: 0 0 auto;          /* fixed-height bar at the bottom */
        position: static !important;
        bottom: auto;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); /* home indicator */
    }
}

/* ── Loader ────────────────────────────────────────────────── */
/* Hidden by default; shown only when JS adds .active_loader.
   After page load JS adds .hidden → fades out → display:none via setTimeout. */
.loader-wrapper {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;                /* OFF by default — shared CSS pattern */
    align-items: center;
    justify-content: center;
    background: var(--black);
    opacity: 1;
    transition: opacity 0.45s ease;
}
.loader-wrapper.active_loader {
    display: flex !important;  /* override inline style="display:none" set by hideLoader() */
    opacity: 1 !important;     /* override .loader-wrapper.hidden { opacity:0 } fade state */
    pointer-events: auto !important;
}
.loader-wrapper.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ── Inner-page banner (topSpace / pageTitle) ──────────────── */
body.newtheme_inner_page .topSpace {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* Simple, clean page title — matches reference at front1.orderart.com.au */
body.newtheme_inner_page .pageTitle {
    background: #fff !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    padding: 22px 0 18px !important;
    text-align: left !important;
}
body.newtheme_inner_page .pageTitle .oa-page-title,
body.newtheme_inner_page .pageTitle h1,
body.newtheme_inner_page .pageTitle h2 {
    font-family: var(--font-body) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #1a1208 !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    margin: 0 !important;
}

/* ── Page content spacing ─────────────────────────────────── */
body.newtheme_inner_page .pageSpace {
    padding: 56px 0 !important;
}
body.newtheme_inner_page .pageSpace2 {
    padding: 40px 0 60px !important;
}

/* ── Blog listing ────────────────────────────────────────── */
body.newtheme_inner_page .blog-item {
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 36px;
    margin-bottom: 36px;
}
body.newtheme_inner_page .blog-item .post-content h5 a {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    color: var(--inner-text);
    transition: color 0.2s;
}
body.newtheme_inner_page .blog-item .post-content h5 a:hover {
    color: var(--gold);
}
body.newtheme_inner_page .blog-item .meta li {
    color: rgba(26,18,8,0.5);
    font-size: 13px;
}

/* ── Gallery grid ─────────────────────────────────────────── */
body.newtheme_inner_page .gallerySection img {
    border-radius: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.newtheme_inner_page .gallerySection img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

/* ── Product/menu page content area ──────────────────────── */
body.newtheme_inner_page .menuPageContent {
    background: var(--inner-bg);
}

/* ── Product card — button layout fix ────────────────────────
   Global newthemechangeui.css sets .mBtn { position: absolute; bottom: 0; left: 0 }
   which breaks the card layout when content height varies.
   Override back to normal flow (same fix v17 uses).
──────────────────────────────────────────────────────────── */
.mBtn {
    position: static !important;
}
.mBtn > a {
    margin-bottom: 2px;
}
/* Remove the bottom padding reserved for the absolute .mBtn */
.menuContent {
    padding-bottom: 8px !important;
}

/* ── Cards and panels ─────────────────────────────────────── */
body.newtheme_inner_page .card,
body.newtheme_inner_page .cardStyle {
    border: 1px solid rgba(var(--gold-rgb),0.12);
    border-radius: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ── Breadcrumb ────────────────────────────────────────────── */
body.newtheme_inner_page .breadcrumb {
    background: transparent;
    padding: 0;
}
body.newtheme_inner_page .breadcrumb-item a {
    color: var(--gold);
}
body.newtheme_inner_page .breadcrumb-item.active {
    color: rgba(26,18,8,0.5);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 991px) {
    body.newtheme_inner_page {
        padding-top: var(--navbar-height);
    }
    body.newtheme_inner_page .pageTitle {
        padding: 18px 20px 14px !important;
    }
}

/* ============================================================
   MODALS — Login / Register / Forgot Password
   modalNewstyle = RESERVE dark modal style
============================================================ */
.modalNewstyle .modal-content {
    background: var(--black);
    border: 1px solid rgba(var(--gold-rgb),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(var(--gold-rgb),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(var(--gold-rgb),0.1);
    border-color: var(--gold);
    color: var(--gold);
}

/* ── Primary button (modal variant — uppercase B) ── */
.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(var(--gold-rgb),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(var(--gold-rgb),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(var(--gold-rgb),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(var(--gold-rgb),0.4); }
.modalNewstyle .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }

/* ── Pagination for blog / gallery ── */
.pagination-type {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 24px 0 0;
    margin: 0;
}
.pagination-type a,
.pagination-type .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid rgba(var(--gold-rgb),0.25);
    color: var(--inner-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pagination-type a:hover,
.pagination-type .page-link:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
}
.pagination-type .active a,
.pagination-type .active .page-link {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--black);
}

/* ── Blog entry thumbnail ── */
body.newtheme_inner_page .entry-thumbnail a {
    display: block;
    overflow: hidden;
}
body.newtheme_inner_page .entry-thumbnail a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
body.newtheme_inner_page .entry-thumbnail a:hover img {
    transform: scale(1.03);
}

/* ── Read more button (blog) ── */
body.newtheme_inner_page .btn-read-more {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
}

/* ── Recent posts sidebar ── */
body.newtheme_inner_page .recent-post .post-title h4 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 500;
    color: var(--inner-text);
    letter-spacing: 1px;
}

/* ── Contact page ── */
body.newtheme_inner_page .contactPage .rightIconFld .fldIcon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    opacity: 0.4;
}
body.newtheme_inner_page .contactPage .form-control,
body.newtheme_inner_page .contactPage .form-select {
    border-radius: 0;
}

/* ── Profile / account pages ── */
body.newtheme_inner_page .profileForm {
    max-width: 860px;
    margin: 0 auto;
}

/* ── modalStyle (OTP, upload, etc.) — dark theme override ── */
.modalStyle .modal-content {
    background: var(--black);
    border: 1px solid rgba(var(--gold-rgb),0.2);
    border-radius: 0;
    color: rgba(255,255,255,0.8);
}
.modalStyle .modal-header { border-bottom: none; }
.modalStyle .modal-title { color: var(--gold); font-family: var(--font-heading); letter-spacing: 2px; }
.modalStyle .labelStyle { color: rgba(255,255,255,0.7); }
.modalStyle .form-control,
.modalStyle .form-select {
    background: rgba(255,255,255,0.06);
    border-color: rgba(var(--gold-rgb),0.25);
    color: rgba(255,255,255,0.85);
    border-radius: 0;
}
.modalStyle .form-control:focus,
.modalStyle .form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(var(--gold-rgb),0.15);
    color: rgba(255,255,255,0.9);
}
.modalStyle .btn-close { filter: invert(1) sepia(1) saturate(2) hue-rotate(10deg); opacity: 0.7; }

/* ── Opening Hours modal ── */
.openingHourModalContent {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    font-size: 14px;
    color: rgba(255,255,255,0.75);
}
.titleLbl {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
}
.simpleList {
    list-style: none;
    padding: 0;
    margin: 0;
}
.simpleList > li + li { margin-top: 8px; }
.simpleList li { color: rgba(255,255,255,0.7); font-size: 13px; }
.circleIcon { fill: currentColor; }

/* ── Cart tape (mobile bottom bar) ── */
.mobile_footer_tape { z-index: 1001; }

/* ============================================================
   FORM ICON FIELDS — login / register / booking modals
============================================================ */
.rightIconFld {
    position: relative;
}
.rightIconFld > .form-control,
.rightIconFld > .form-select {
    padding-right: 46px;
}
.rightIconFld > .inputFieldIcon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    color: rgba(0,0,0,0.30);
    display: flex;
    align-items: center;
}
.fieldIcon {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

/* ============================================================
   MOBILE STICKY BOTTOM BAR — kept for CSS completeness.
   HTML is only rendered on the homepage (footer-main.php).
   Inner pages do NOT show this bar.
============================================================ */
.mobile-sticky-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 15px;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    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;
}

/* ── Floating alert position fix for solid inner navbar ── */
.floating-alert-top {
    position: fixed;
    top: calc(var(--navbar-height) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    min-width: 320px;
    max-width: 600px;
}
/* floating button at the bottom */
.floatingBtnMb {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  z-index: 8;
  background-color: var(--primary);
  border-radius: 50px;
  margin: 0 15px;
}
.floatingBtnMb a.btn {
  flex: 0 0 auto;
  width: 50%;
  border-radius: 0;
  padding: 16px 10px;
}
.floatingBtnMb a.btn + a.btn {
  border-left: 1px solid var(--white);
}
@media screen and (max-width: 767px) {
.floatingBtnMb a.btn {
    padding: 14px 10px;
  }
}
@media (max-width: 1199px) {
    .editviewPage .totalPriceColumn.viewPriceBtn {
        padding-bottom: 80px !important;
    }
}

/* ============================================================
   CONTACT PAGE (home/contact — v25 RESERVE theme)
   Loaded on inner pages via Main_innerAsset (style.css doesn't apply here) —
   duplicated from style.css so the same .lgr-page__hero hero pattern and
   .btn-navy button used by Drinks/Wellness/etc. also work on this page.
============================================================ */
.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(var(--navy-mid-rgb),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;
}
/* 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;
}
.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: var(--btn-radius);
    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;
}
button.btn-navy {
    -webkit-appearance: none;
    appearance: none;
}

.contact-page__content {
    background: #ffffff;
    padding: 88px 0 100px;
}
.contact-page__inner {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.contact-page__subheading {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-mid);
    margin: 0 0 32px;
}
.contact-page__note {
    font-size: 15px;
    color: var(--text-mid);
    margin: 0 0 28px;
}
.contact-page__form { text-align: left; }
.contact-page__field { margin-bottom: 24px; }
.contact-page__label {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dark);
    margin-bottom: 8px;
}
.contact-page__required { color: var(--gold); }
.contact-page__input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-dark);
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 2px;
    transition: border-color 0.2s;
}
.contact-page__input:focus { outline: none; border-color: var(--navy); }
.contact-page__input.is-invalid { border-color: #dc3545; }
.contact-page__textarea { resize: vertical; min-height: 130px; }
.contact-page__error { color: #dc3545; font-size: 13px; margin-top: 6px; }
.contact-page__captcha-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.contact-page__captcha-refresh { cursor: pointer; color: var(--navy); font-size: 18px; }
.contact-page__submit { width: 100%; margin-top: 8px; }
@media (max-width: 991px) {
    .lgr-page__hero { height: 100vh; height: 100dvh; min-height: 500px; }
}
@media (max-width: 767px) {
    .contact-page__content { padding: 60px 0 72px; }
}
/* css placed from layout file */
.formStyle .form-select,
.formStyle .form-control {
    border-width: 2px !important;
}
.menuPageContent .fixedCenterScroll .menuSection {
    top: 70px;
}
@media (max-width: 1199px) {
    .menuPageContent .fixedCenterScroll .menuSection {
        position: sticky !important;
    }
    .menuPageContent .fixedCenterScroll .menuSection {
        top: 111px;
    }
    .topLinksSwiper {
        top: 72px;
    }
}
.sideLinesDivider {
   padding: 0px;
}

/* ============================================================
   PRODUCT / MENU LISTING — match v30 (bun2) card layout
   The product cards use the shared base view + the identical
   newthemechangeui.css engine, but v31's reserve inner overrides
   (static .mBtn, trimmed .menuContent padding) plus the missing
   row/spice fixes let cards stack the image on top and overflow
   the price row on narrow columns. These rules restore the exact
   v30 behaviour, scoped to the menu listing card only so other
   inner pages keep v31's own styling.
   ============================================================ */

/* 1. Restore the shared card baseline for the listing card:
      button pinned to the bottom + padding reserved for it
      (reverts v31's global .mBtn:static / .menuContent:8px). */
body.newtheme_inner_page .menuPageContent .menuCard .menuContent { padding-bottom: 32px !important; }
body.newtheme_inner_page .menuPageContent .menuCard .mBtn { position: absolute !important; }

/* 2. Outer card row: image stays LEFT, content RIGHT — never wrap
      the image on top when the column gets narrow. */
body.newtheme_inner_page .menuPageContent .menuCard > .row.g-2 { flex-wrap: nowrap !important; }
body.newtheme_inner_page .menuPageContent .menuCard > .row.g-2 > .col { min-width: 0; }

/* 3. Inner price / dietary-icon row stays on one line (v30 parity). */
body.newtheme_inner_page .menuPageContent .menuCard .row.g-2.align-items-center { flex-wrap: nowrap; }
body.newtheme_inner_page .menuPageContent .menuCard .row.g-2.align-items-center > .col { min-width: 0; }

/* 4. When a spice-level (chilli) select is present the price + icons +
      select can't share one line — let this row wrap: price above,
      icons + select right-aligned below (exact v30 :has() handling). */
body.newtheme_inner_page .menuPageContent .menuCard .row.g-2.align-items-center:has(.addChilli) { flex-wrap: wrap; }
body.newtheme_inner_page .menuPageContent .menuCard .row.g-2.align-items-center:has(.addChilli) > .col { min-width: max-content; flex-shrink: 0; }
body.newtheme_inner_page .menuPageContent .menuCard .row.g-2.align-items-center:has(.addChilli) > .col-auto { margin-left: auto; }

/* 5. Spice-level select — BS5 `.form-select` markup that newthemechangeui.css
      doesn't size, so it falls back to an oversized default. Compact it (v30). */
body.newtheme_inner_page .addChilli .form-select,
body.newtheme_inner_page .addChilli select {
    padding: 3px 20px 3px 8px;
    height: auto;
    width: auto;
    min-width: 60px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 6px;
    background-size: 10px;
}
@media (max-width: 767px) {
    body.newtheme_inner_page .addChilli .form-select,
    body.newtheme_inner_page .addChilli select {
        font-size: 11px;
        padding: 3px 18px 3px 6px;
        min-width: 58px;
        background-size: 8px 6px;
    }
}

/* 6. Add + Customize button row must stay INSIDE the card.
      newthemechangeui.css gives .smBtn a min-width:68px floor, so the two
      buttons are ~155px wide and spill past the card's right edge on narrow
      2-column widths (visible at ~100% zoom on smaller screens). Bound the
      absolute row to the content width and drop the floor so the buttons size
      to their label and shrink to fit instead of overflowing. Natural size is
      kept at normal widths (matches v30); ellipsis is a safety net only. */
body.newtheme_inner_page .menuPageContent .menuCard .mBtn {
    left: 0;
    right: 0;
    gap: 6px;
}
body.newtheme_inner_page .menuPageContent .menuCard .mBtn .btn_primary.smBtn {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   GALLERY PAGE — 3-column CSS grid (matches v30 / bun2)
   Used by web_v31/views/home/gallery-images.php instead of the
   shared masonry grid (which fell back to 2 columns on v31).
   ============================================================ */
.rv-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-bottom: 48px;
}
.rv-gallery-cell {
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #efeae0;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.rv-gallery-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.rv-gallery-cell:hover img { transform: scale(1.06); }
@media (max-width: 900px) {
    .rv-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .rv-gallery-grid { grid-template-columns: 1fr; }
}