/*
Theme Name: lxvwine
Template: LXV
*/

/* ==========================================
   LXV WINE — MAIN STYLESHEET
   --------------------------------------------
    1. Design tokens (:root)
    2. Resets & base
    3. Typography
    4. Page & content wrappers
    5–11. [DISABLED 2026-05-28] Old Bridge header overrides
          (locked positioning, desktop/mobile layout, top bar, nav,
           dropdowns, CTA buttons — removed when site switched to
           custom Elementor header; see commented block below)
   12. Commerce7 — account & cart widgets
   13. Commerce7 — account dropdown
   14. Notification bar
   15. Sliders & hero buttons
   16. Footer
   17. Misc utilities
   ========================================== */


/* ==========================================
   1. DESIGN TOKENS
   ========================================== */

:root {
    /* Fixed sizes — UI, labels, meta */
    --fs-2xs:  0.6875rem;   /* 11px — tiny counters, badges */
    --fs-xs:   0.75rem;     /* 12px — captions, tooltip text */
    --fs-sm:   0.8125rem;   /* 13px — small UI, cart meta */
    --fs-base: 1rem;        /* 16px — body copy base */
    --fs-md:   1.0625rem;   /* 17px — nav links, standard UI */
    --fs-lg:   1.1875rem;   /* 19px — larger body, event titles */
    --fs-xl:   1.3125rem;   /* 21px — widget nav, prominent UI */

    /* Fluid heading sizes — scale with viewport */
    --fs-h6:   clamp(0.9375rem, 1.3vw, 1.125rem);
    --fs-h5:   clamp(1.0625rem, 1.6vw, 1.3125rem);
    --fs-h4:   clamp(1.1875rem, 2.1vw, 1.5rem);
    --fs-h3:   clamp(1.375rem,  2.8vw, 1.75rem);
    --fs-h2:   clamp(1.625rem,  3.2vw, 2.25rem);
    --fs-h1:   clamp(2.25rem,   5vw,   3.25rem);
    --fs-body: clamp(1rem, 1.9vw, 1.125rem);

    /* Palette — Spring 2026 */
    --sc-deep:     #2C1810;
    --sc-mid:      #5C2E2E;
    --sc-blush:    #A8706A;
    --sc-gold:     #C4A265;
    --sc-gold-lt:  #D4B87A;
    --sc-cream:    #F7F2EA;
    --sc-cream-dk: #EDE5D5;
    --sc-stone:    #9A9189;
    --sc-char:     #2A2520;
    --sc-white:    #FEFCF9;
    --sc-text:     #3A3530;
    --sc-text-lt:  #7A726A;

    /* Extended palette — not in primary brand palette */
    --sc-footer-bg: #3b2a22;   /* footer background — dark warm espresso */
    --sc-rose:      #DDCAC2;   /* footer accent links — warm rose-white   */

    /* Font stacks */
    --sc-serif: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
    --sc-sans:  'DM Sans', 'Helvetica Neue', 'Arial', sans-serif;

    /* Commerce7 overrides */
    --c7-font-family:              var(--sc-sans) !important;
    --c7-heading-font-family:      var(--sc-sans) !important;
    --c7-body-text-color:          var(--sc-text) !important;
    --c7-alt-text-color:           var(--sc-text) !important;
    --c7-heading-text-color:       var(--sc-deep) !important;
    --c7-link-color:               var(--sc-mid)  !important;
    --c7-primary-color:            var(--sc-deep) !important;
    --c7-primary-button-bg:        var(--sc-deep) !important;
    --c7-primary-button-bg-hover:  var(--sc-mid)  !important;
    --c7-primary-button-text-color: #ffffff !important;
    --c7-alt-button-bg:            var(--sc-deep) !important;
    --c7-alt-button-bg-hover:      var(--sc-mid)  !important;
    --c7-alt-button-text-color:    #ffffff !important;
    --c7-bg:                       var(--sc-cream) !important;
    --c7-bg-alt:                   var(--sc-cream) !important;
    --c7-block-bg:                 var(--sc-cream) !important;
    --c7-block-border-color:       var(--sc-gold)  !important;
    --c7-border-color:             var(--sc-gold)  !important;
    --c7-field-option-selected-color: var(--sc-gold) !important;
    --c7-success:                  var(--sc-cream) !important;
    --c7-success-bg:               var(--sc-gold)  !important;
    --c7-border-radius:            0px;
    --c7-field-border-radius:      0px !important;
    --c7-button-border-radius:     0px !important;
}


/* ==========================================
   2. RESETS & BASE
   ========================================== */

/* ── Anti-jank: prevent horizontal overflow without breaking sticky ────
   CRITICAL: overflow-x:hidden forces overflow-y:visible→auto (CSS spec),
   making body a scroll container which BREAKS position:sticky on the header.
   Solution: overflow-x:clip — clips content without creating a scroll
   container, so sticky keeps working and the viewport remains the scroller.
   scrollbar-gutter:stable reserves the scrollbar gutter so removing the
   scrollbar (e.g. when side-cart opens) doesn't shift layout by ~17px.

   overflow-y:visible on body is LOAD-BEARING, not decorative: Bridge sets
   `body { overflow-y: scroll }`, and per CSS Overflow 3 a scrolling value
   on one axis downgrades the other axis's `clip` to `hidden`. That made
   body a scroll container anyway (defeating the note above) AND gave it a
   permanent scrollbar track next to the viewport's — the double scrollbar.
   Restating overflow-y:visible keeps the clip/visible pair legal, so body
   stays a non-scroll-container and only <html> shows a scrollbar. The
   gutter is reserved on <html>, which is what Bridge's rule was really for.
   ─────────────────────────────────────────────────────────────────── */
html {
    overflow-x: clip !important;
    scrollbar-gutter: stable;
}

body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    scrollbar-gutter: auto !important;
}

/* Let browsers use width/height attrs to prevent CLS */
img {
    max-width: 100%;
    height: auto;
}

/* Fallback aspect-ratio for lazy images missing width/height */
img[data-src]:not([width]):not([height]),
img[data-lazy-src]:not([width]):not([height]) {
    aspect-ratio: 3 / 2;
    background: #f0edea;
}

body {
    color: var(--sc-text);
    margin: 0;
    padding: 0;
    font-family: var(--sc-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a        { color: var(--sc-deep) !important; }
a:hover  { color: var(--sc-mid)  !important; }

/* Strip underline on all link states site-wide (except disabled & C7 links) */
a:not([disabled]):not(.c7-link):hover,
a:not([disabled]):not(.c7-link):active,
a:not([disabled]):not(.c7-link):focus {
    text-decoration: none !important;
}

/* Primary button text stays white */
.elementor-button,
.c7-btn a,
.c7-btn.c7-btn--primary,
.c7-btn:not(.c7-btn--alt):not(.c7-btn--alt--small) {
    color: #ffffff !important;
}


/* ==========================================
   3. TYPOGRAPHY
   ========================================== */

p {
    color: var(--sc-text);
    font-family: var(--sc-sans) !important;
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.01em;
    margin: 0 0 1.25rem 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sc-serif) !important;
    letter-spacing: 0.01em;
    margin: 0 0 0.75rem 0;
    -webkit-font-smoothing: antialiased;
}

h1 {
    color: var(--sc-deep);
    font-size: var(--fs-h1);
    font-weight: 400;
    line-height: 1.08;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

h2 {
    color: var(--sc-deep);
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: 0.01em;
}

h3 {
    color: var(--sc-text);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: 1.32;
    font-style: italic;
}

h3.elementor-heading-title { text-transform: none; }

h4 {
    color: var(--sc-deep);
    font-size: var(--fs-h4);
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--sc-sans) !important;
    margin: 0 0 0.5rem 0;
}

h5 {
    color: var(--sc-text);
    font-size: var(--fs-h5);
    font-weight: 400;
    line-height: 1.3;
}

h6 {
    color: var(--sc-text-lt);
    font-size: var(--fs-h6);
    font-weight: 400;
    line-height: 1.25;
    font-style: italic;
    margin-bottom: 0.5rem;
}

h1.elementor-heading-title,
h2.elementor-heading-title { margin-bottom: 14px; }

.elementor-heading-title {
    font-family: var(--sc-serif) !important;
}

/* Elementor text widget — inherit sans body font */
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
    font-family: var(--sc-sans) !important;
    font-size: var(--fs-body);
    line-height: 1.8;
    color: var(--sc-text);
}

ul li {
    list-style-position: outside;
    margin-left: 1em;
    font-family: var(--sc-sans);
    line-height: 1.75;
    color: var(--sc-text);
}


/* ==========================================
   4. PAGE & CONTENT WRAPPERS
   ========================================== */

.content .container,
.full_width,
.wrapper { background-color: transparent !important; }

.content {
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #f1edea;
    background-position-y: 995px;
}

.content .container .container_inner.page_container_inner,
.full_page_container_inner { padding: 0 !important; }

.content.content_top_margin_none { padding-top: 0 !important; }


/* ============================================================
   SECTIONS 5-11 DISABLED — old Bridge header overrides.
   Removed 2026-05-28: site switched to custom Elementor header.
   Inner comment closers are escaped as "* /" (space inserted)
   so they do not break this outer block comment.
   ============================================================

/* ==========================================
   5. HEADER — LOCKED POSITIONING (CLS FIX)
   Permanent lock: every header state (base,
   sticky, scrolled) renders identically so
   JS-added classes cannot trigger layout shift.
   overflow:visible is required — dropdowns are
   position:absolute and must paint below the
   header edge.
   ========================================== * /

/* Fixed shell — dark bg, no shadow, no transition * /
header.page_header,
header.page_header.sticky,
header.page_header.scrolled_not_transparent,
header.page_header.sticky.scrolled_not_transparent,
header.centered_logo,
header.centered_logo.sticky {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    background: var(--sc-deep) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(196, 162, 101, 0.12) !important;
    transition: none !important;
}

/* Allow sticky to expand if C7 widget grows * /
header.page_header.sticky,
header.centered_logo.sticky {
    height: auto !important;
    overflow: visible !important;
}

/* Inner layers transparent — parent dark bg shows through * /
.header_top,
.header_bottom,
header.page_header .header_top,
header.page_header .header_bottom,
header.page_header .header_inner,
header.page_header .header_top_bottom_holder {
    background: transparent !important;
    background-image: none !important;
}

.header_top { overflow: visible; }

/* Lock header_top so icons don't shift * /
header.page_header .header_top,
header.page_header.sticky .header_top,
header.centered_logo.sticky .header_top {
    height: auto !important;
    overflow: visible !important;
    transition: none !important;
}

/* Lock bottom padding — identical before/after scroll (desktop) * /
header.page_header .header_bottom,
header.page_header.sticky .header_bottom,
header.centered_logo.sticky .header_bottom {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    transition: none !important;
}

/* Sticky cart allowance * /
header.centered_logo.sticky .header_bottom {
    min-height: 80px !important;
    height: auto !important;
}

/* Lock logo container size * /
header.page_header .logo_wrapper,
header.page_header.sticky .logo_wrapper,
header.centered_logo.sticky .logo_wrapper {
    width: 155px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 40px !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    transition: none !important;
}

header.page_header .logo_wrapper img,
header.page_header.sticky .logo_wrapper img,
header.centered_logo.sticky .q_logo img {
    width: 155px !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 300 / 105; /* reserve space before image loads — prevents CLS * /
    transition: none !important;
}

/* Invert dark logos to white on the dark header * /
header.page_header .q_logo img,
header.page_header.sticky .q_logo img,
header.centered_logo.sticky .q_logo img {
    filter: brightness(0) invert(1) !important;
}

/* Logo anchor — keep visible, unscaled * /
header.page_header .q_logo a,
header.page_header.sticky .q_logo a,
header.centered_logo.sticky .q_logo a {
    visibility: visible !important;
    opacity: 1 !important;
    height: 58px;
    width: 100%;
}

header.page_header .q_logo a > img,
header.page_header.sticky .q_logo a > img,
header.centered_logo.sticky .q_logo a > img {
    transform: none !important;
    -webkit-transform: none !important;
}

header.centered_logo.sticky .q_logo,
header.centered_logo.sticky .q_logo a {
    position: relative !important;
    transition: none !important;
}

header.centered_logo.sticky .q_logo a {
    display: block !important;
    height: auto !important;
}

header.centered_logo .q_logo       { height: 58px !important; }
header.centered_logo .header_inner_left { margin: 0 !important; }

/* Prevent parent containers from collapsing * /
header.page_header .header_inner_left,
header.page_header.sticky .header_inner_left,
header.centered_logo.sticky .header_inner_left {
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 40px !important;
    overflow: visible !important;
    display: inline-block !important;
    transition: none !important;
}

/* Right widget area — padding-top * /
.header-right-widget { padding-top: 5px; }

/* Sticky variant locks the padding + kills transition * /
header.page_header.sticky .header-right-widget,
header.centered_logo.sticky .header-right-widget {
    padding-top: 5px !important;
    transition: none !important;
}

/* Lock nav menus — no transition on sticky * /
header.centered_logo.sticky nav.main_menu.left_side,
header.centered_logo.sticky nav.main_menu.right_side {
    transition: none !important;
}

/* Keep sticky header_top/right area visible (Bridge hides by default) * /
header.sticky .header_fixed_right_area,
header.sticky .header_top { display: block !important; }

/* Sticky header-right-widget-holder: keep transparent * /
header.sticky .header-right-widget-holder > div,
header.fixed_hiding .header-right-widget-holder > div {
    background-color: transparent !important;
}

/* Widget text stays cream on sticky * /
header.page_header.sticky .header_top .header-widget,
header.page_header.sticky .header_top .header-widget *,
header.centered_logo.sticky .header_top .header-widget,
header.centered_logo.sticky .header_top .header-widget * {
    color: var(--sc-cream) !important;
}

/* Cart/account icons stay cream on sticky * /
header.page_header.sticky #c7-cart .c7-user-nav__cart__title::before,
header.centered_logo.sticky #c7-cart .c7-user-nav__cart__title::before,
header.page_header.sticky #c7-account .c7-user-nav__account__login::before,
header.page_header.sticky #c7-account .c7-user-nav__account__name::before,
header.centered_logo.sticky #c7-account .c7-user-nav__account__login::before,
header.centered_logo.sticky #c7-account .c7-user-nav__account__name::before {
    color: var(--sc-cream) !important;
}


/* ==========================================
   6. HEADER — DESKTOP LAYOUT (≥1001px)
   Body padding-top + header height pinned to
   187px so lazy content can't invalidate it.
   ========================================== * /

@media only screen and (min-width: 1001px) {

    body { padding-top: 187px !important; }

    header.page_header,
    header.page_header.sticky {
        height: 187px !important;
        min-height: 187px !important;
        max-height: 187px !important;
        overflow: visible !important;
        z-index: 1000 !important;
    }

    header.stick_with_left_right_menu .header_inner_left { top: 0; }

    header.centered_logo .header_inner_left .logo_wrapper     { width: 155px !important; }
    header.centered_logo .header_inner_left .logo_wrapper img { width: 155px; }

    /* Nav menu widths — left & right each ≤ 50% minus logo * /
    header.stick_with_left_right_menu nav.main_menu.left_side,
    header.stick_with_left_right_menu nav.main_menu.right_side,
    header.page_header nav.main_menu.left_side,
    header.page_header nav.main_menu.right_side {
        width: 45% !important;
        max-width: calc(50% - 110px) !important;
    }

    /* Keep menu items on one line * /
    header.page_header nav.main_menu > ul,
    header.centered_logo.sticky nav.main_menu > ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    header.stick_with_left_right_menu nav.main_menu.left_side > ul > li,
    header.page_header nav.main_menu.left_side > ul > li,
    header.stick_with_left_right_menu nav.main_menu.right_side > ul > li,
    header.page_header nav.main_menu.right_side > ul > li {
        white-space: nowrap !important;
    }

    header.stick_with_left_right_menu nav.main_menu.left_side,
    header.stick_with_left_right_menu nav.main_menu.right_side,
    header.centered_logo.sticky nav.main_menu.left_side,
    header.centered_logo.sticky nav.main_menu.right_side {
        display: inline-block !important;
        position: relative !important;
    }

    /* Right-side CTA menu items — compact * /
    #menu-header-navigation-right #menu-item-12884 a,
    #menu-header-navigation-right #menu-item-12883 a {
        padding: 8px 16px !important;
        font-size: var(--fs-2xs) !important;
        margin-left: 12px !important;
        line-height: 1;
    }
}


/* ==========================================
   7. HEADER — MOBILE LAYOUT (≤1000px)
   ========================================== * /

@media only screen and (max-width: 1000px) {

    body { padding-top: 72px !important; }

    .header_top .left { display: none; }

    header.centered_logo .header_inner_left {
        margin-top: 0;
        margin-right: 0;
    }

    /* ── Transparency lock — inner layers & containers ── * /
    header.page_header .header_top,
    header.page_header .header_bottom,
    header.page_header .header_inner,
    header.page_header .header_top_bottom_holder,
    header.page_header .container,
    header.page_header .container_inner,
    header.page_header .right .inner {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    /* Widget text cream — body-prefix for specificity * /
    body header.page_header .header_top .header-widget,
    body header.page_header .header_top .header-widget * {
        color: var(--sc-cream) !important;
    }

    /* Cart & account pseudo-element icons — cream on dark * /
    #c7-cart .c7-user-nav__cart__title::before,
    #c7-account .c7-user-nav__account__login::before,
    #c7-account .c7-user-nav__account__name::before {
        color: var(--sc-cream) !important;
        font-size: 18px !important;
        line-height: 1 !important;
        display: inline-block;
    }

    #c7-account .c7-user-nav__account__login,
    #c7-account .c7-user-nav__account__name { padding: 4px !important; }

    /* Cart SVG strokes — cream on dark * /
    .header_top #c7-cart svg { stroke: var(--sc-cream) !important; }

    /* Mobile cart icon hover * /
    #c7-cart .c7-user-nav__cart__title::before {
        opacity: 0.9;
        transition: color 0.2s ease, opacity 0.2s ease;
    }

    #c7-cart:hover .c7-user-nav__cart__title::before {
        color: var(--sc-gold-lt) !important;
        opacity: 1;
    }

    /* ── Mobile nav drawer ──
       Transparent when collapsed; dark only when opened. * /
    nav.mobile_menu {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding-top: 0 !important;
    }

    nav.mobile_menu.opened,
    nav.mobile_menu[style*="height: auto"],
    nav.mobile_menu[style*="display: block"] {
        background: var(--sc-deep) !important;
        border-right: 1px solid rgba(196, 162, 101, 0.12) !important;
        box-shadow: 8px 0 40px rgba(0, 0, 0, 0.35) !important;
        padding-top: 18px !important;
    }

    nav.mobile_menu > ul,
    nav.mobile_menu > ul#menu-new-mobile-menu { background: transparent !important; }

    nav.mobile_menu.opened > ul,
    nav.mobile_menu[style*="height: auto"] > ul,
    nav.mobile_menu[style*="display: block"] > ul {
        background: var(--sc-deep) !important;
    }

    /* Mobile nav items * /
    nav.mobile_menu ul li,
    nav.mobile_menu ul li ul li {
        border: none;
        border-bottom: 1px solid rgba(247, 242, 234, 0.06) !important;
    }

    nav.mobile_menu > ul > li:last-child { border-bottom: none !important; }

    nav.mobile_menu ul li a {
        color: var(--sc-cream) !important;
        font-family: var(--sc-sans) !important;
        font-size: 0.825rem !important;
        font-weight: 400 !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
        padding: 16px 22px !important;
        transition: color 0.25s ease, background 0.25s ease !important;
    }

    nav.mobile_menu ul li a:hover,
    nav.mobile_menu ul li a:active {
        color: var(--sc-gold-lt) !important;
        background: rgba(196, 162, 101, 0.07) !important;
    }

    /* Sub-menu items — indented, smaller * /
    nav.mobile_menu ul li ul.sub_menu li a {
        font-size: 0.75rem !important;
        letter-spacing: 0.14em !important;
        padding: 13px 22px 13px 36px !important;
        color: rgba(247, 242, 234, 0.7) !important;
        font-weight: 300 !important;
    }

    nav.mobile_menu ul li ul.sub_menu li a:hover,
    nav.mobile_menu ul li ul.sub_menu li a:active {
        color: var(--sc-gold-lt) !important;
        padding-left: 42px !important;
    }

    /* Expand/collapse arrows * /
    nav.mobile_menu .mobile_arrow,
    nav.mobile_menu .mobile_arrow i {
        color: var(--sc-gold) !important;
    }

    nav.mobile_menu .mobile_arrow {
        opacity: 0.55;
        transition: opacity 0.2s ease;
    }

    nav.mobile_menu .mobile_arrow:hover { opacity: 1; }

    /* ── Header bar ── * /
    body .page_header {
        background: var(--sc-deep) !important;
        background-image: none !important;
        border-bottom: 1px solid rgba(196, 162, 101, 0.15) !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25) !important;
    }

    /* header_bottom — positioning context * /
    .page_header .header_bottom,
    header.page_header.sticky .header_bottom,
    header.centered_logo.sticky .header_bottom {
        position: relative !important;
        min-height: 72px !important;
        height: auto !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* Full-width block so logo centers * /
    .page_header .header_inner_left,
    header.page_header.sticky .header_inner_left,
    header.centered_logo.sticky .header_inner_left {
        display: block !important;
        width: 100% !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
        text-align: center !important;
        min-width: auto !important;
        z-index: 2;
    }

    /* ── Hamburger ── * /
    .page_header .mobile_menu_button,
    header.page_header.sticky .mobile_menu_button,
    header.centered_logo.sticky .mobile_menu_button {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10;
        height: auto !important;
        margin: 0 !important;
    }

    .mobile_menu_button span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background: rgba(247, 242, 234, 0.08) !important;
        transition: background 0.3s ease !important;
    }

    .mobile_menu_button span:hover,
    .mobile_menu_button span:active {
        background: rgba(247, 242, 234, 0.16) !important;
    }

    .mobile_menu_button i {
        color: var(--sc-cream) !important;
        font-size: 1.15rem !important;
        transition: color 0.2s ease !important;
    }

    .mobile_menu_button span:hover i { color: var(--sc-gold-lt) !important; }

    /* ── Mobile logo wrapper ── * /
    body .page_header .logo_wrapper,
    header.centered_logo.sticky .logo_wrapper,
    header.page_header.sticky .logo_wrapper {
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        text-align: center;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: translateX(-28%) !important;
    }

    .page_header .q_logo {
        display: inline-block;
        margin-top: 0;
        float: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }

    .page_header .q_logo a {
        left: 0 !important;
        display: inline-block !important;
        float: none !important;
        position: relative !important;
    }

    .page_header .q_logo img,
    header.centered_logo.sticky .q_logo img {
        max-height: 48px !important;
        width: auto !important;
        height: auto !important;
        aspect-ratio: 300 / 105; /* reserve space before image loads — prevents CLS * /
        filter: brightness(0) invert(1) !important;
        opacity: 0.95;
        transition: opacity 0.3s ease;
    }

    .page_header .q_logo a:hover img { opacity: 1; }

    /* ── Cart & account containers — transparent, flex ── * /
    .header-cart-link-container,
    .shopping_cart_header,
    .c7-cart-link,
    .cart_wrapper {
        background: transparent !important;
        border: none !important;
    }

    .c7-cart-quantity-wrapper,
    .cart-contents,
    .c7-cart-link {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        white-space: nowrap !important;
    }

    .c7-cart-quantity {
        margin-left: 4px !important;
        font-size: var(--fs-sm) !important;
        display: inline-block !important;
    }

    .header-cart-link-container {
        min-width: 45px;
        display: flex;
        justify-content: flex-end;
    }

}


/* Mobile header button layout (≤980px) * /
@media only screen and (max-width: 980px) {
    .hide-on-mobile-tablet { display: none !important; }

    .header-widget .hide-on-mobile-tablet { display: inline-block !important; }

    .header-widget #c7-account {
        display: inline-flex !important;
        align-items: center;
        margin: 0 !important;
        padding: 0 2px !important;
    }

    /* Widget area flex so order props work on all children * /
    .header-widget,
    .header-widget .textwidget.custom-html-widget {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 4px;
        padding-right: 4px !important;
    }

    .header-widget .textwidget.custom-html-widget { order: 1; }
    .header-widget #c7-account                    { order: 2; }
    .header-widget #c7-cart                       { order: 3; }

    /* Hide Order Kit on mobile * /
    .header-widget a.home_header_button[href*="perfumed-garden-by-lxv"] {
        display: none !important;
    }

    /* Phone number & CTA buttons — unified mobile size * /
    .header-widget .home_header_button,
    .header-widget a.home_header_button[href*="reservations"],
    .header-widget a.home_header_button[href^="tel"] {
        font-family: var(--sc-sans) !important;
        font-size: 0.6rem !important;
        font-weight: 500 !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase !important;
        border-radius: 0 !important;
        padding: 7px 10px !important;
        margin: 0 !important;
        white-space: nowrap;
        transition: all 0.25s ease !important;
        line-height: 1 !important;
    }

    /* Default outline style * /
    .header-widget .home_header_button {
        background: rgba(247, 242, 234, 0.1) !important;
        color: var(--sc-cream) !important;
        border: 1px solid rgba(247, 242, 234, 0.18) !important;
    }

    /* Reservations + Tel — gold filled * /
    .header-widget a.home_header_button[href*="reservations"],
    .header-widget a.home_header_button[href^="tel"] {
        background: var(--sc-gold) !important;
        color: var(--sc-deep) !important;
        border: 1px solid var(--sc-gold) !important;
        font-weight: 600 !important;
    }

    .header-widget a.home_header_button[href^="tel"]:hover,
    .header-widget a.home_header_button[href^="tel"]:active,
    .header-widget a.home_header_button[href*="reservations"]:hover,
    .header-widget a.home_header_button[href*="reservations"]:active {
        background: var(--sc-gold-lt) !important;
        border-color: var(--sc-gold-lt) !important;
        color: var(--sc-deep) !important;
    }

    .header-widget .home_header_button:hover,
    .header-widget .home_header_button:active {
        background: rgba(196, 162, 101, 0.2) !important;
        border-color: rgba(196, 162, 101, 0.35) !important;
        color: var(--sc-gold-lt) !important;
    }

    .header_top .container,
    .header_top .container_inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .header_top .right {
        padding: 0 !important;
        margin-right: 4px !important;
    }

    /* Right-side CTA menu items — mobile full width * /
    #menu-header-navigation-right #menu-item-12884 a,
    #menu-header-navigation-right #menu-item-12883 a {
        padding: 12px 20px !important;
        font-size: var(--fs-xs) !important;
        margin: 10px 0 !important;
        width: 100%;
        display: block !important;
        text-align: center;
    }
}

@media only screen and (min-width: 980px) {
    .hide-on-desktop { display: none; }
}


/* ==========================================
   8. HEADER — TOP BAR & WIDGETS
   ========================================== * /

/* Header links — scoped so Commerce7 dropdowns don't inherit * /
header.page_header .header_top a,
header.page_header .main_menu a,
header.page_header a.home_header_button,
header.page_header.sticky .header_top a,
header.page_header.sticky .main_menu a,
header.page_header.sticky a.home_header_button {
    color: var(--sc-cream) !important;
}

header.page_header .header_top a:hover,
header.page_header .main_menu a:hover,
header.page_header a.home_header_button:hover,
header.page_header.sticky .header_top a:hover,
header.page_header.sticky .main_menu a:hover,
header.page_header.sticky a.home_header_button:hover {
    color: var(--sc-gold-lt) !important;
}

.header-right-widget nav {
    display: block;
    margin-top: 0 !important;
    position: relative;
}

.header-right-widget nav img {
    min-height: 50px !important;
    min-width: 10px !important;
}

.header-right-widget nav a {
    font-size: var(--fs-xl);
    margin-right: 3px;
}

.header-right-widget nav a span::before       { color: var(--sc-cream); }
.header-right-widget nav a:hover span::before { color: var(--sc-gold-lt); }

.header-right-widget nav a.checkoutLink {
    position: relative;
    display: inline-block;
    height: 100%;
    min-height: 50px;
    vertical-align: middle;
}

.header-right-widget img {
    max-width: 50px !important;
    max-height: 50px !important;
    margin-right: 15px;
}

.header-right-widget a:hover img { filter: brightness(1.3); }

.header_top .header-widget { color: var(--sc-cream) !important; }

/* Social icons in top bar * /
.topbar_icons a {
    display: inline-block;
    margin: 2px !important;
    font-size: var(--fs-lg) !important;
    width: 27px;
    border: 1px solid rgba(247, 242, 234, 0.25);
    padding: 7px 10px;
    border-radius: 2rem;
    color: var(--sc-cream) !important;
    transition: all 0.25s ease;
}

.topbar_icons a:hover {
    border-color: var(--sc-gold);
    color: var(--sc-gold-lt) !important;
}


/* ==========================================
   9. HEADER — NAVIGATION
   ========================================== * /

/* In-between desktop widths — tighten spacing * /
@media only screen and (max-width: 1250px) and (min-width: 1001px) {
    .main_menu > ul > li > a {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: var(--fs-base) !important;
    }
}

/* Main menu links — all states including sticky * /
.main_menu ul li a,
header.sticky .main_menu ul li a,
header.page_header.sticky .main_menu > ul > li > a {
    font-size: var(--fs-md) !important;
    font-weight: 400;
    color: var(--sc-cream) !important;
    transition: color 0.25s ease;
}

.main_menu ul li a:hover,
header.sticky .main_menu ul li a:hover {
    color: var(--sc-gold-lt) !important;
}

.main_menu .second ul li a,
header.sticky .main_menu .second ul li a {
    font-size: var(--fs-base) !important;
}

.main_menu .second ul li a:hover,
header.sticky .main_menu .second ul li a:hover {
    color: var(--sc-gold-lt) !important;
}

/* Nav link spans — theme sometimes targets these separately * /
header.page_header .main_menu > ul > li > a > span {
    color: var(--sc-cream) !important;
}

header.page_header .main_menu > ul > li:hover > a > span {
    color: var(--sc-gold-lt) !important;
}

nav.main_menu > ul > li > a { font-weight: 400 !important; }

/* Active / hover item accent * /
.main_menu > ul > li:hover > a,
.main_menu > ul > li.active > a {
    color: var(--sc-gold-lt) !important;
}

/* Menu edge-item spacing * /
ul#menu-left-menu li:last-child     { margin-right: 10px !important; }
ul#menu-left-menu li:first-child a  { padding-left: 0 !important; }
ul#menu-right-menu li:first-child   { margin-left: 10px !important; }
ul#menu-right-menu li:last-child a  { padding-right: 0 !important; }

/* Bridge nav dropdown arrows & icons — cream on dark header * /
.main_menu ul li a .plus,
.main_menu ul li a span.plus {
    color: var(--sc-cream) !important;
    border-color: rgba(247, 242, 234, 0.2) !important;
}

.main_menu ul li a .menu_icon,
.main_menu ul li a i.menu_icon {
    color: var(--sc-cream) !important;
}


/* ==========================================
   10. HEADER — DROPDOWN MENUS
   ========================================== * /

.drop_down .wide.wide_background .second             { background: var(--sc-cream); }
.drop_down .wide.wide_background .second .inner ul   { padding: 10px; }
.drop_down .wide .second ul li                       { border-left: none; }
.drop_down .wide .second ul                          { padding: 5px; }
.drop_down .second                                   { width: 220px !important; left: -40px !important; }
.drop_down #nav-menu-item-15 .second                 { width: 290px !important; left: -58px !important; }

/* Dropdown panel — warm cream bg, sharp shadow * /
.drop_down .second,
.drop_down .second .inner {
    background: var(--sc-cream) !important;
    border: none !important;
    border-top: 2px solid var(--sc-gold) !important;
    box-shadow: 0 12px 40px rgba(44, 24, 16, 0.18) !important;
}

/* Dropdown links — dark text on cream * /
.drop_down .second ul li a,
.drop_down .second ul li a span {
    color: var(--sc-deep) !important;
    font-family: var(--sc-sans) !important;
    font-size: var(--fs-base) !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(44, 24, 16, 0.06) !important;
    transition: all 0.2s ease !important;
}

.drop_down .second ul li a:hover,
.drop_down .second ul li a:hover span {
    color: var(--sc-mid) !important;
    background: rgba(196, 162, 101, 0.1) !important;
}

.drop_down .second ul li:last-child a { border-bottom: none !important; }

/* Dropdown menu icon — subtle stone * /
.drop_down .second ul li a i.menu_icon { color: var(--sc-stone) !important; }


/* ==========================================
   11. HEADER — CTA BUTTONS
   (home_header_button + right-side CTA items)
   ========================================== * /

/* --- Reservations & Order Kit (header CTA) --- * /
.home_header_button {
    font-family: var(--sc-sans) !important;
    font-size: var(--fs-2xs) !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    background-color: transparent !important;
    color: var(--sc-cream) !important;
    border: 1px solid rgba(247, 242, 234, 0.3) !important;
    border-radius: 0 !important;
    padding: 8px 16px !important;
    margin: 0 4px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.home_header_button:hover {
    background-color: rgba(196, 162, 101, 0.15) !important;
    border-color: var(--sc-gold) !important;
    color: var(--sc-gold-lt) !important;
}

/* Reservations — gold filled * /
a.home_header_button[href*="reservations"],
a.home_header_button[href*="reservations"]:visited {
    background-color: var(--sc-gold) !important;
    color: var(--sc-deep) !important;
    border: 1px solid var(--sc-gold) !important;
    font-weight: 600 !important;
    padding: 9px 22px !important;
    letter-spacing: 0.15em !important;
}

a.home_header_button[href*="reservations"]:hover {
    background-color: var(--sc-cream) !important;
    color: var(--sc-deep) !important;
    border-color: var(--sc-cream) !important;
}

/* Order Kit — stays outline * /
a.home_header_button[href*="perfumed-garden-by-lxv"] {
    background-color: transparent !important;
    color: var(--sc-cream) !important;
}

/* Right-side nav CTA menu items (#menu-item-12884, 12883) * /
#menu-header-navigation-right #menu-item-12884 a,
#menu-header-navigation-right #menu-item-12883 a,
.mobile_menu #menu-header-navigation-right #menu-item-12884 a,
.mobile_menu #menu-header-navigation-right #menu-item-12883 a {
    background-color: rgba(247, 242, 234, 0.1) !important;
    color: var(--sc-cream) !important;
    font-family: var(--sc-sans) !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    letter-spacing: 0.12em !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(247, 242, 234, 0.25) !important;
}

#menu-header-navigation-right #menu-item-12884 a:hover,
#menu-header-navigation-right #menu-item-12883 a:hover {
    background-color: rgba(196, 162, 101, 0.15) !important;
    border-color: var(--sc-gold) !important;
    color: var(--sc-gold-lt) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Old cart_numb badge — keep transparent if present * /
.header-right-widget nav span.cart_numb {
    background-color: transparent !important;
    color: var(--sc-cream) !important;
    position: relative !important;
    top: -8px !important;
    right: 0 !important;
    font-size: var(--fs-xs);
    font-weight: 600;
    width: auto;
    height: auto;
    line-height: 1;
}



   ============================================================
   END DISABLED SECTIONS 5-11
   ============================================================ */


/* ==========================================
   11b. ELEMENTOR HEADER — migrated from template Custom CSS
   Previously lived in Elementor "Custom CSS" on post 3270
   (LXV Website Header May 2026). Moved here 2026-05-29 so
   header styling is version-controlled and survives template edits.
   NOTE: Two element IDs (.elementor-element-e0802ba for the header
   section, .elementor-element-d7fc46f for the logo column) are kept
   temporarily; replace with custom Elementor CSS classes when the
   template is next edited to make selectors durable.
   ========================================== */

/* ── Body / admin bar reset — exclude blank checkout template ──
   This CSS was in Elementor Custom CSS and only fired on pages that use
   the Elementor header. Now it's global it must not run on the blank
   checkout page, which needs the admin-bar margin for logged-in users. */
html body[class]:not(.page-template-blank-checkout-template) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ── Fixed header ──
   position:sticky cannot work here: Commerce7's CDN CSS sets overflow-y:scroll on
   body, making body a scroll container. Sticky would then be relative to body (not
   the viewport), so the header scrolls away. position:fixed is always viewport-relative
   and bypasses all scroll container issues. JS in functions.php compensates for the
   lost flow space by padding the first content section. */
[data-elementor-type='header'] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

/* ── Header section — compact, centered ── */
.elementor-element-e0802ba {
    min-height: auto !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    align-items: center !important;
}

/* ── Logo column — tight, no extra margin ── */
.elementor-element-d7fc46f {
    margin: 0 !important;
    padding: 0 !important;
}
.elementor-element-d7fc46f img {
    height: 140px !important;
    width: auto !important;
    aspect-ratio: 1 / 1 !important;
}

/* ── Nav links ── */
.elementor-nav-menu a,
.elementor-nav-menu .elementor-item {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #2C1810 !important;
    font-weight: 500 !important;
}
.elementor-nav-menu a:hover,
.elementor-item:hover {
    color: #C4A265 !important;
}

/* ── Hamburger toggle ── */
.elementor-menu-toggle { color: #2C1810 !important; }

/* ── Account icon — dark on light header ── */
#c7-account a::before,
.c7-user-nav__account__login::before {
    filter: brightness(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: filter 0.25s ease !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important;
}

/* ── Header icon wrappers ── */
#c7-account, #c7-cart {
    display: inline-flex !important;
    align-items: center !important;
}
#c7-account {
    margin-right: 14px !important;
    align-self: center !important;
    border: 1.5px solid #2C1810 !important;
    border-radius: 2px !important;
    padding: 4px 10px 4px 7px !important;
    transition: border-color 0.25s ease, filter 0.25s ease !important;
    /* overflow:hidden was here — removed because the C7 dropdown is a child
       of #c7-account and overflow:hidden clips it, preventing it from opening. */
}
/* Hover: border turns gold, icon turns gold — no background fill */
#c7-account:hover {
    border-color: #C4A265 !important;
    background: transparent !important;
}
#c7-account:hover .c7-user-nav__account__login::before,
#c7-account:hover .c7-user-nav__account__name::before {
    /* Convert black icon → warm gold: brighten(0)→black, invert(0.5)→mid-gray,
       sepia(1)+saturate(2) push into the warm gold family (#C4A265 approx) */
    filter: brightness(0) invert(0.5) sepia(1) saturate(2) !important;
}
#c7-cart { min-width: 36px !important; min-height: 36px !important; }

/* ── Cart SVG — dark on light header ── */
#c7-cart svg { width: 32px !important; height: 32px !important; }
#c7-cart svg,
#c7-cart svg * { stroke: #2C1810 !important; stroke-width: 1.6 !important; }

/* ── CTA button — "Bring LXV Home" ── */
/* Strip any box from the widget wrapper + content span — only the <a> carries the border */
.lxv-cta,
.lxv-cta .elementor-widget-container,
.lxv-cta .elementor-button-content-wrapper {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.lxv-cta .elementor-button {
    background: transparent !important;
    color: #C4A265 !important;
    border: 1px solid #C4A265 !important;
    border-radius: 0 !important;
    padding: 9px 18px !important;
    font-size: 11px !important;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 500;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.lxv-cta .elementor-button:hover,
.lxv-cta .elementor-button:focus {
    background: #C4A265 !important;
    color: #2C1810 !important;
    border-color: #C4A265 !important;
}

/* ── Desktop — dropdown menus ── */
@media (min-width: 1025px) {
    [data-elementor-type='header'] .elementor-nav-menu--main li.menu-item-has-children {
        position: relative !important;
    }
    [data-elementor-type='header'] .elementor-nav-menu--main .sub-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        min-width: 210px !important;
        background: #F7F2EA !important;
        box-shadow: 0 10px 28px rgba(44, 24, 16, .14) !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity .2s, transform .2s, visibility .2s;
        z-index: 99999 !important;
        display: block !important;
    }
    [data-elementor-type='header'] .elementor-nav-menu--main li.menu-item-has-children:hover > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
    [data-elementor-type='header'] .elementor-nav-menu--main .sub-menu a {
        display: block !important;
        padding: 9px 22px !important;
        font-size: 12px !important;
        letter-spacing: 0.12em !important;
        color: #2C1810 !important;
        white-space: nowrap !important;
    }
    [data-elementor-type='header'] .elementor-nav-menu--main .sub-menu a:hover {
        color: #C4A265 !important;
        background: rgba(196, 162, 101, .08) !important;
    }
}

/* ── Mid-size — hide CTA button to reclaim space (1025–1280px) ── */
@media (max-width: 1280px) {
    .lxv-cta { display: none !important; }
}

/* ── Mid-size — compact nav to prevent wrapping (1025–1180px) ── */
@media (max-width: 1180px) and (min-width: 1025px) {
    .elementor-nav-menu a,
    .elementor-nav-menu .elementor-item {
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    #c7-account { margin-right: 8px !important; }
}

/* ── Mobile ── */
@media (max-width: 1024px) {
    .elementor-element-d7fc46f img { height: 60px !important; }
    .elementor-element-e0802ba {
        flex-wrap: nowrap !important;
        padding: 8px 16px !important;
    }
    .elementor-element-ba434ee { order: 9 !important; }
    .lxv-cta { display: none !important; }
    #c7-account a { padding: 7px 9px !important; font-size: 11px !important; }
    [data-elementor-type='header'] nav.elementor-nav-menu--dropdown .elementor-item {
        padding: 13px 20px !important;
        color: #2C1810 !important;
        border-top: 1px solid rgba(44, 24, 16, .08) !important;
        font-size: 13px !important;
    }
}

/* ── LXV Mobile Menu — custom hamburger replacement ── */
@media only screen and (min-width: 1001px) {
    #lxvMobileNavButton,
    #lxvMobileNavOverlay { display: none !important; }
}
@media only screen and (max-width: 1000px) {
    /* Hide Bridge/Qode native mobile menu */
    .mobile_menu_button,
    nav.mobile_menu,
    .side_menu_button,
    .popup_menu,
    .popup_menu_holder,
    .fullscreen_menu_holder { display: none !important; }

    #lxvMobileNavButton {
        position: fixed;
        top: 18px; right: 18px;
        z-index: 999999;
        width: 46px; height: 46px;
        border: 1px solid rgba(0,0,0,0.18);
        background: rgba(255,255,255,0.96);
        border-radius: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    #lxvMobileNavButton span,
    #lxvMobileNavButton span:before,
    #lxvMobileNavButton span:after {
        display: block;
        width: 22px; height: 2px;
        background: #111;
        position: relative;
        transition: all 0.25s ease;
        content: "";
    }
    #lxvMobileNavButton span:before { position: absolute; top: -7px; left: 0; }
    #lxvMobileNavButton span:after  { position: absolute; top:  7px; left: 0; }
    body.lxv-menu-open #lxvMobileNavButton span { background: transparent; }
    body.lxv-menu-open #lxvMobileNavButton span:before { top: 0; transform: rotate(45deg); }
    body.lxv-menu-open #lxvMobileNavButton span:after  { top: 0; transform: rotate(-45deg); }

    #lxvMobileNavOverlay {
        position: fixed;
        inset: 0;
        z-index: 999998;
        background: #fff;
        display: none;
        overflow-y: auto;
        padding: 90px 34px 50px;
    }
    body.lxv-menu-open #lxvMobileNavOverlay { display: block; }
    body.lxv-menu-open { overflow: hidden; }

    #lxvMobileNavOverlay a {
        display: block;
        color: #111;
        text-decoration: none;
        font-size: 18px;
        line-height: 1.3;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 15px 0;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    #lxvMobileNavOverlay .lxv-mobile-sub {
        font-size: 13px;
        letter-spacing: 0.08em;
        opacity: 0.68;
        padding-left: 16px;
    }
    #lxvMobileNavOverlay .lxv-mobile-logo { margin-bottom: 28px; max-width: 130px; }
}


/* ==========================================
   12. COMMERCE7 — ACCOUNT & CART WIDGETS
   Bridge theme styles all buttons globally;
   these rules reset theme defaults and must
   stay in main (win cascade over async c7-css).
   ========================================== */

/* --- Shared shell: transparent, bordered, 32px --- */
#c7-account,
#c7-cart,
.c7-user-nav__cart,
.header-cart-link-container,
.shopping_cart_header,
.header_bottom .header-right-widget-holder > div,
.header_bottom .qode-header-right-widget-holder > div {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#c7-account,
#c7-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    white-space: nowrap !important;
    position: relative !important;
    line-height: 1 !important;
    vertical-align: top !important;
}

#c7-cart { margin-left: 5px; }


/* --- ACCOUNT --- */

#c7-account .c7-user-nav__account,
#c7-account .c7-user-nav__account__name,
#c7-account .c7-user-nav__account__login,
div#c7-account,
div#c7-account .c7-user-nav__account,
div#c7-account .c7-user-nav__account__login,
div#c7-account .c7-user-nav__account__name,
#c7-account button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Trigger — hide "Hello Name" text, keep icon only */
#c7-account .c7-user-nav__account__name,
#c7-account .c7-user-nav__account__login {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 32px !important;
    padding: 0 6px !important;
    white-space: nowrap !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-decoration: none !important;
}

/* Hide non-SVG, non-sr-only children */
#c7-account .c7-user-nav__account__name > :not(svg):not(.c7-sr-only),
#c7-account .c7-user-nav__account__login > :not(svg):not(.c7-sr-only) {
    display: none !important;
}

/* Keep screen-reader text accessible */
#c7-account .c7-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Draw user icon ourselves (cream) */
#c7-account .c7-user-nav__account__name::before,
#c7-account .c7-user-nav__account__login::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F2EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

/* Hover — gold tint */
#c7-account .c7-user-nav__account__name:hover::before,
#c7-account .c7-user-nav__account__login:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4B87A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

/* ── Login button — styled identically to the "Bring LXV Home" CTA ── */
/* Wrapper: let the bordered button size itself (no fixed 32px / wrapper padding) */
#c7-account {
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
}
/* The link itself = the CTA button.
   Selector raised to `div#c7-account a.…` so the 1px border wins over the
   shared account shell above (`div#c7-account .…{border:0}`), which otherwise
   out-specifies a plain `#c7-account .…` selector and flattens the border. */
#c7-account a.c7-user-nav__account__login,
div#c7-account a.c7-user-nav__account__login {
    height: auto !important;
    padding: 9px 18px !important;
    gap: 0 !important;
    background: transparent !important;
    color: transparent !important;       /* hide the link's own "Log in" text — only the ::after "Login" label shows */
    border: 1px solid #C4A265 !important;
    border-radius: 0 !important;
    font-size: 0 !important;              /* collapse real text node; ::after re-declares 11px so the gold label still renders */
    line-height: 1 !important;
    letter-spacing: 2.5px !important;   /* match the Bring LXV Home CTA exactly */
    text-transform: uppercase !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: background .25s ease, color .25s ease, border-color .25s ease !important;
}
/* Drop the user icon — CTA is text-only */
#c7-account .c7-user-nav__account__login::before { display: none !important; }
/* The visible label */
#c7-account .c7-user-nav__account__login::after {
    content: "Login" !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 2.5px !important;   /* match the Bring LXV Home CTA exactly */
    text-transform: uppercase !important;
    font-weight: 500 !important;
    color: #C4A265 !important;          /* gold text, like the CTA */
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
/* Hover: gold fill, dark text — exactly like the CTA */
#c7-account:hover .c7-user-nav__account__login,
#c7-account .c7-user-nav__account__login:hover {
    background: #C4A265 !important;
    border-color: #C4A265 !important;
}
#c7-account:hover .c7-user-nav__account__login::after,
#c7-account .c7-user-nav__account__login:hover::after {
    color: #2C1810 !important;
}

/* Mobile (≤1024px) — revert login to a compact icon-only control */
@media (max-width: 1024px) {
    #c7-account .c7-user-nav__account__login {
        border: 0 !important;
        padding: 7px 9px !important;
    }
    #c7-account .c7-user-nav__account__login::before { display: inline-block !important; }
    #c7-account .c7-user-nav__account__login::after  { display: none !important; }
}

/* Native caret SVG */
#c7-account .c7-user-nav__account__name svg,
#c7-account .c7-user-nav__account__login svg {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    stroke: var(--sc-cream) !important;
    fill: none !important;
    overflow: visible !important;
}

#c7-account .c7-user-nav__account__name:hover svg,
#c7-account .c7-user-nav__account__login:hover svg {
    stroke: var(--sc-gold-lt) !important;
}

/* Fallback fa-user icon if theme injects it */
#c7-account .fa-user {
    color: #FFFFFF;
    font-size: var(--fs-md);
}

#account-header                { display: inline-block; }
#account-header #c7-account    { padding-right: 10px; display: inline-block; }


/* --- CART --- */

#c7-cart > .c7-user-nav__cart > .c7-link:first-child,
#c7-cart > .c7-user-nav__cart > button.c7-link,
.c7-cart-quantity-wrapper,
.cart-contents,
.c7-cart-link {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: 0 !important;
}

/* Reset theme button defaults on cart trigger */
#c7-cart,
#c7-cart > .c7-user-nav__cart,
#c7-cart > .c7-user-nav__cart > button,
#c7-cart > .c7-user-nav__cart > button.c7-link,
#c7-cart > div > button,
#c7-cart > div > button.c7-link {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#c7-cart > .c7-user-nav__cart > button.c7-link,
#c7-cart > .c7-user-nav__cart > button {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    padding: 4px 6px !important;
    min-height: auto !important;
    width: auto !important;
    cursor: pointer !important;
}

#c7-cart .c7-user-nav__cart > button.c7-link { color: #ffffff; }

/* Cart title — visually hidden, icon only */
#c7-cart .c7-user-nav__cart__title {
    font-size: 0 !important;
    line-height: 1 !important;
}

#c7-cart svg {
    width: 24px !important;
    height: 24px !important;
    /* Header is now Elementor light (cream bg) — icon must be dark */
    stroke: var(--sc-deep) !important;
    fill: none !important;
    flex-shrink: 0 !important;
}

#c7-cart:hover svg { stroke: var(--sc-mid) !important; }

/* Cart count badge */
#c7-cart .c7-user-nav__cart__count {
    position: absolute !important;
    top: 2px !important;
    right: -2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background-color: var(--sc-gold) !important;
    color: var(--sc-deep) !important;
    font-family: var(--sc-sans) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    z-index: 2 !important;
}

/* ── Header trigger alignment ──────────────────────────────────────
   The cart icon was baseline-dropping ~5px because its inner
   .c7-user-nav__cart wrapper is display:block and taller than the
   button, so the icon sat low instead of vertically centered. Forcing
   the inner wrapper to flex-center at 32px lines the cart icon up with
   the account icon (both now centered on the same axis). ── */
#c7-cart > .c7-user-nav__cart {
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
    line-height: 1 !important;
}

/* Side cart panel — fixed, no layout shift when opening */
.c7-side-cart {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 380px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}


/* ==========================================
   13. COMMERCE7 — ACCOUNT DROPDOWN
   Light, luxurious — cream panel, gold-line hovers.
   No box fills; gold left-bar accent on hover.
   ========================================== */

/* Panel */
header .c7-user-nav__account__dropdown {
    background: var(--sc-white, #FEFCF9) !important;
    border: none !important;
    border-top: 2px solid var(--sc-gold, #C4A265) !important;
    box-shadow: 0 16px 48px rgba(44, 24, 16, 0.13), 0 2px 8px rgba(44, 24, 16, 0.05) !important;
    min-width: 210px !important;
    padding: 0 0 4px !important;
    border-radius: 0 0 1px 1px !important;
}

/* Header — name + email */
header .c7-user-nav__account__dropdown__header {
    padding: 16px 24px 12px !important;
    border-bottom: 1px solid rgba(196, 162, 101, 0.16) !important;
}

header .c7-user-nav__account__dropdown__header a,
header .c7-user-nav__account__dropdown__header p a {
    color: var(--sc-deep, #2C1810) !important;
    font-family: var(--sc-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

header .c7-user-nav__account__dropdown__header a:hover,
header .c7-user-nav__account__dropdown__header p a:hover {
    color: var(--sc-gold, #C4A265) !important;
    background: transparent !important;
}

/* Email subtext */
header .c7-user-nav__account__dropdown span {
    display: block !important;
    color: var(--sc-stone, #9A9189) !important;
    font-size: 0.65rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    margin-top: 2px !important;
}

/* Nav links */
header .c7-user-nav__account__dropdown ul {
    padding: 8px 0 4px !important;
    margin: 0 !important;
}

header .c7-user-nav__account__dropdown ul li {
    margin: 0 !important;
    padding: 0 !important;
}

header .c7-user-nav__account__dropdown ul li a {
    display: block !important;
    color: var(--sc-deep, #2C1810) !important;
    background-color: transparent !important;
    font-family: var(--sc-sans) !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 9px 24px 9px 22px !important;
    border-left: 2px solid transparent !important;
    transition: color 0.18s ease, border-color 0.18s ease, padding-left 0.18s ease !important;
}

header .c7-user-nav__account__dropdown ul li a:hover {
    color: var(--sc-gold, #C4A265) !important;
    background-color: transparent !important;
    border-left-color: var(--sc-gold, #C4A265) !important;
    padding-left: 26px !important;
}

/* Logout — quiet text link, separated by fine gold rule */
header .c7-user-nav__account__dropdown__logout {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 4px 24px 16px !important;
    padding: 9px 0 0 !important;
    color: var(--sc-stone, #9A9189) !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(196, 162, 101, 0.16) !important;
    font-family: var(--sc-sans) !important;
    font-size: 0.63rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: color 0.18s ease !important;
}

header .c7-user-nav__account__dropdown__logout:hover {
    color: var(--sc-blush, #A8706A) !important;
    background-color: transparent !important;
    border-color: rgba(196, 162, 101, 0.16) !important;
}

header .c7-user-nav__account__dropdown__logout svg {
    opacity: 0.45;
    transition: opacity 0.18s ease;
}

header .c7-user-nav__account__dropdown__logout:hover svg {
    opacity: 0.75;
}


/* ==========================================
   13b. COMMERCE7 — SIDE CART PANEL
   These rules duplicate key parts of c7-css.css so the side
   cart is branded even before c7-css.css is deployed globally.
   Root problem: our "a { color: dark !important }" rule in
   section 2 makes the text on dark-bg C7 buttons invisible.
   These rules restore correct contrast on every button variant.
   ========================================== */

/* ── Side cart container — open/close transform ── */
.c7-side-cart {
    background: var(--sc-cream, #F7F2EA) !important;
    color: var(--sc-text, #3A3530) !important;
    font-family: var(--sc-sans) !important;
    width: 380px !important;
    max-width: 100vw !important;
    box-shadow: -4px 0 32px rgba(0,0,0,0.18) !important;
    z-index: 99999 !important;
}

/* ── Force ALL text inside side cart dark (cream bg, cream-on-dark context) ── */
.c7-side-cart,
.c7-side-cart p,
.c7-side-cart span,
.c7-side-cart div,
.c7-side-cart h1,
.c7-side-cart h2,
.c7-side-cart h3,
.c7-side-cart label {
    color: var(--sc-text, #3A3530) !important;
}

/* Fix: our global "a { color: dark }" makes links invisible on dark buttons.
   Override for links in the side cart that are NOT inside a dark button. */
.c7-side-cart a:not(.c7-btn):not(.c7-btn--primary):not(.c7-btn--alt):not(.c7-add-more-wines) {
    color: var(--sc-deep, #2C1810) !important;
}
.c7-side-cart a:not(.c7-btn):not(.c7-btn--primary):not(.c7-btn--alt):not(.c7-add-more-wines):hover {
    color: var(--sc-mid, #5C2E2E) !important;
}

/* ── PRIMARY button — dark bg, cream text ── */
.c7-side-cart .c7-btn,
.c7-side-cart .c7-btn--primary,
.c7-side-cart a.c7-btn,
.c7-side-cart a.c7-btn--primary,
.c7-side-cart button.c7-btn,
.c7-side-cart .c7-order-summary__buttons .c7-btn,
.c7-side-cart .c7-order-summary__buttons a.c7-btn--primary {
    background: var(--sc-deep, #2C1810) !important;
    color: var(--sc-cream, #F7F2EA) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--sc-sans) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 14px 20px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex: 1 !important;
    transition: background 0.25s ease !important;
}
.c7-side-cart .c7-btn:hover,
.c7-side-cart a.c7-btn--primary:hover {
    background: var(--sc-mid, #5C2E2E) !important;
    color: var(--sc-cream, #F7F2EA) !important;
}

/* ── ALT button (View Cart / Continue Shopping) — outline, dark text ── */
.c7-side-cart .c7-btn--alt,
.c7-side-cart a.c7-btn--alt,
.c7-side-cart button.c7-btn--alt,
.c7-side-cart .c7-order-summary__buttons a.c7-btn--alt,
.c7-side-cart .c7-add-more-wines,
.c7-side-cart a.c7-add-more-wines {
    background: transparent !important;
    color: var(--sc-deep, #2C1810) !important;
    border: 1px solid rgba(44, 24, 16, 0.3) !important;
    border-radius: 0 !important;
    font-family: var(--sc-sans) !important;
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 12px 20px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex: 1 !important;
    transition: all 0.25s ease !important;
}
.c7-side-cart .c7-btn--alt:hover,
.c7-side-cart a.c7-btn--alt:hover {
    border-color: var(--sc-deep, #2C1810) !important;
    background: rgba(44, 24, 16, 0.04) !important;
    color: var(--sc-deep, #2C1810) !important;
}

/* ── REMOVE button — subtle text link ── */
.c7-side-cart button.c7-link,
.c7-side-cart .c7-order-item__remove button {
    background: transparent !important;
    color: var(--sc-stone, #9A9189) !important;
    border: 1px solid rgba(154, 145, 137, 0.35) !important;
    border-radius: 0 !important;
    font-family: var(--sc-sans) !important;
    font-size: 0.625rem !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    min-height: 24px !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

/* ── Summary buttons row ──
   Force full width on the button row. C7's side cart is 380px wide
   but the buttons container can collapse if any parent has 0 width.
   Use explicit px width as a fallback so buttons are always visible. */
.c7-side-cart .c7-order-summary__buttons,
#c7-side-cart .c7-order-summary__buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 20px 20px !important;
    width: 100% !important;
    min-width: 300px !important;
    box-sizing: border-box !important;
}

/* Each button inside the row fills proportionally */
.c7-side-cart .c7-order-summary__buttons > *,
#c7-side-cart .c7-order-summary__buttons > * {
    flex: 1 1 120px !important;
    min-width: 120px !important;
}

/* ── Order items dark text ── */
.c7-side-cart .c7-order-item__title,
.c7-side-cart .c7-order-item__title a,
.c7-side-cart .c7-order-item__price,
.c7-side-cart .c7-order-item__total,
.c7-side-cart .c7-order-item__description {
    color: var(--sc-deep, #2C1810) !important;
    font-family: var(--sc-sans) !important;
}

/* ── Carrot (upsell) section ── */
.c7-carrot {
    background: var(--sc-cream-dk, #EDE5D5) !important;
    border: 1px solid var(--sc-gold, #C4A265) !important;
    padding: 14px 18px !important;
    margin: 12px 0 !important;
    border-radius: 0 !important;
}
.c7-carrot * { color: var(--sc-text, #3A3530) !important; }
.c7-carrot button.c7-btn,
.c7-carrot .c7-btn--primary {
    background: var(--sc-deep, #2C1810) !important;
    color: var(--sc-cream, #F7F2EA) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--sc-sans) !important;
    font-size: 0.65rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 10px 16px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.25s ease !important;
}
.c7-carrot button.c7-btn:hover { background: var(--sc-mid, #5C2E2E) !important; }
.c7-carrot button.c7-btn span { color: var(--sc-cream, #F7F2EA) !important; }

/* ── Order summary totals ── */
.c7-side-cart .c7-order-summary,
.c7-side-cart .c7-order-summary * {
    color: var(--sc-text, #3A3530) !important;
    background: var(--sc-cream, #F7F2EA) !important;
    font-family: var(--sc-sans) !important;
}
.c7-side-cart .c7-order-summary__item--total .c7-order-summary__title,
.c7-side-cart .c7-order-summary__item--total .c7-order-summary__value {
    color: var(--sc-deep, #2C1810) !important;
    font-weight: 600 !important;
}


/* ==========================================
   13c. ELEMENTOR HEADER — WRAPPING FIXES
   The Elementor nav menu can wrap on mid-size
   screens. These rules force single-line layout.
   ========================================== */

/* Prevent nav items wrapping */
.elementor-nav-menu--main.elementor-nav-menu__container > ul,
.elementor-nav-menu > ul {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.elementor-nav-menu--main > ul > li > a,
.elementor-nav-menu ul li a {
    white-space: nowrap !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Account login — icon + text on one line, text hidden on small header */
.c7-user-nav__account__login,
.c7-user-nav__account__name {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

/* Keep header right-side elements on one row */
.elementor-widget-container > #c7-account,
.elementor-widget-container > #c7-cart {
    white-space: nowrap !important;
}


/* ==========================================
   14. NOTIFICATION BAR
   Hard height prevents JS-injected content
   from growing the bar after first paint.
   ========================================== */

#notification-bar-container {
    height: 40px !important;
    overflow: hidden;
    box-sizing: border-box;
}


/* ==========================================
   15. SLIDERS & HERO BUTTONS
   ========================================== */

/* Page-specific background lock (homepage hero) */
.elementor-2324 .elementor-element.elementor-element-b71dd73 {
    background-color: #1e1710 !important;
    contain: layout style;
}

.home_slider_button_wrapper { margin-bottom: 40px; }

.home_slider_button {
    font-family: var(--sc-sans) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    background-color: var(--sc-deep) !important;
    color: var(--sc-cream) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 0 !important;
    padding: 16px 40px !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s ease;
    text-decoration: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
}

.home_slider_button:hover {
    background-color: var(--sc-mid) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Swiper slides */
.swiper-slide-bg {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease-in-out;
    will-change: transform, opacity;
}

.swiper-slide.lazyloaded .swiper-slide-bg { opacity: 1; }
.swiper-slide { min-height: 500px; }

.swiper-slide-active .swiper-slide-bg {
    transform: translateZ(0); /* will-change inherited from .swiper-slide-bg */
}


/* ==========================================
   16. FOOTER
   ========================================== */

footer {
    position: relative;
    background-color: var(--sc-footer-bg);
}

.footer_logos { display: none; }

/* Second footer strip — collapse all dimensions */
.footer_bottom_holder,
.footer_bottom_holder .footer_bottom,
.footer_bottom_holder .footer_bottom * {
    display:    none !important;
    height:     0    !important;
    min-height: 0    !important;
    max-height: 0    !important;
    padding:    0    !important;
    margin:     0    !important;
    border:     none !important;
    overflow:   hidden !important;
    visibility: hidden !important;
}

.footer_logos_inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer_logos_inner img {
    max-height: 55px;
    width: auto;
    aspect-ratio: 120 / 60;
    object-fit: contain;
    filter: brightness(0) invert(0.9) opacity(0.6);
    transition: all 0.4s ease;
}

.footer_logos_inner a:hover img {
    opacity: 1;
    filter: brightness(0) invert(1);
}

footer:has(.footer_logos) { padding-top: 0 !important; }


/* ── Footer Top — 4-column info area ── */

.footer_top_holder {
    background-color: var(--sc-char) !important;
    background-image: none !important;
}

.footer_top {
    padding: 60px 0 50px !important;
}

/* 4-column grid */
footer .footer_inner .footer_top_holder .footer_top .container .container_inner .four_columns,
footer .footer_inner .footer_top_holder .footer_top .four_columns {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1fr 1fr !important;
    gap: 50px !important;
    align-items: start !important;
    float: none !important;
    width: 100% !important;
}

footer .footer_top .container,
footer .footer_top .container_inner {
    max-width: 1200px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    margin: 0 auto !important;
}

/* Kill theme clearfix — they become grid items and push col4 to row 2 */
footer .footer_inner .footer_top_holder .footer_top .four_columns.clearfix::before,
footer .footer_inner .footer_top_holder .footer_top .four_columns.clearfix::after,
.footer_top .four_columns.clearfix::before,
.footer_top .four_columns.clearfix::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Explicit grid placement */
footer .footer_inner .footer_top_holder .footer_top .four_columns .column1 { grid-column: 1 !important; grid-row: 1 !important; }
footer .footer_inner .footer_top_holder .footer_top .four_columns .column2 { grid-column: 2 !important; grid-row: 1 !important; }
footer .footer_inner .footer_top_holder .footer_top .four_columns .column3 { grid-column: 3 !important; grid-row: 1 !important; }
footer .footer_inner .footer_top_holder .footer_top .four_columns .column4 { grid-column: 4 !important; grid-row: 1 !important; }

/* Kill theme float/width on individual columns */
footer .footer_inner .footer_top_holder .footer_top .four_columns > div,
footer .footer_inner .footer_top_holder .footer_top .four_columns .column1,
footer .footer_inner .footer_top_holder .footer_top .four_columns .column2,
footer .footer_inner .footer_top_holder .footer_top .four_columns .column3,
footer .footer_inner .footer_top_holder .footer_top .four_columns .column4 {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* ── Column 1 — Logo, Copyright, Policy links ── */
.footer_top .footer_col1 img {
    opacity: 0.9;
    transition: opacity 0.3s ease;
    max-width: 130px !important;
}

.footer_top .footer_col1 img:hover { opacity: 1; }

.footer_top .footer_col1 p {
    font-family: var(--sc-sans) !important;
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.35) !important;
    line-height: 1.6 !important;
    margin: 16px 0 12px 0 !important;
    letter-spacing: 0.3px;
}

.footer_top .footer_col1 a {
    color: rgba(255, 255, 255, 0.4) !important;
    text-decoration: none !important;
    font-family: var(--sc-sans) !important;
    font-size: 0.7rem !important;
    line-height: 2 !important;
    letter-spacing: 0.2px;
    transition: color 0.25s ease !important;
}

.footer_top .footer_col1 a:hover {
    color: var(--sc-gold-lt) !important;
}

/* ── Column 4 — link refinements ── */
.footer_top .footer_col4 a {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1.8 !important;
}

.footer_top .footer_col4 p {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    margin-top: 8px !important;
}

/* ── Columns 2-4 — Section headings ── */
.footer_top h6,
.footer_top .column_inner h6 {
    font-family: var(--sc-sans) !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    letter-spacing: 3.5px !important;
    text-transform: uppercase !important;
    color: var(--sc-gold) !important;
    margin-bottom: 22px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(196, 162, 101, 0.15) !important;
    font-style: normal !important;
}

/* ── Widget link containers ── */
.footer_top .widget_link {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.single .entry-content,
.single .post-content,
.single .post_content_holder {
  padding-bottom: 4rem;
}

.single .full_width_inner,
.single .content_inner {
  padding-top: 24px;
}


.footer_top .widget_link div {
    font-family: var(--sc-sans) !important;
    font-size: var(--fs-sm) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    line-height: 1.8 !important;
    letter-spacing: 0.2px;
}

.footer_top .widget_link a {
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
    transition: color 0.25s ease !important;
    display: inline-block;
}

.footer_top .widget_link a:hover {
    color: var(--sc-gold-lt) !important;
}

/* ── Social icons (Column 4) ── */
.footer_top .widget_link div[style*="display: flex"] a,
.footer_top .widget_link .fa {
    color: rgba(255, 255, 255, 0.4) !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
    font-size: 18px !important;
}

.footer_top .widget_link div[style*="display: flex"] a:hover,
.footer_top .widget_link div[style*="display: flex"] a:hover .fa {
    color: var(--sc-gold) !important;
    transform: translateY(-2px);
    padding-left: 0;
}

/* ── Custom footer helpers ── */
.footer-title {
    font-weight: 700;
    color: var(--sc-rose);
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.social-links {
    display: flex;
    gap: 16px;
}

.social-links a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-rose);
    border: 1px solid rgba(221, 202, 194, 0.3); /* --sc-rose at 30% opacity */
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-links svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.social-links a:hover {
    background-color: var(--sc-rose);
    color: #000;
    transform: translateY(-2px);
}

/* ── Footer responsive — tablet & mobile (2-column) ── */
@media only screen and (max-width: 1000px) {
    footer .footer_inner .footer_top_holder .footer_top .four_columns,
    footer .footer_inner .footer_top_holder .footer_top .container .container_inner .four_columns {
        grid-template-columns: 1fr 1fr !important;
        gap: 35px !important;
    }

    /* Reset explicit grid placement for 2-col layout */
    footer .footer_inner .footer_top_holder .footer_top .four_columns .column1,
    footer .footer_inner .footer_top_holder .footer_top .four_columns .column2,
    footer .footer_inner .footer_top_holder .footer_top .four_columns .column3,
    footer .footer_inner .footer_top_holder .footer_top .four_columns .column4 {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    footer .footer_top .container,
    footer .footer_top .container_inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .footer_top h6,
    .footer_top .column_inner h6 {
        text-align: center !important;
    }
}

/* ── Footer responsive — very small screens ── */
@media only screen and (max-width: 576px) {
    footer:has(.footer_logos)   { padding-top: 60px; }
    .footer_logos               { height: 60px; }
    .footer_logos_inner         { padding: 0 10px; }
    .footer_logos_inner div img,
    .footer_logos_inner img     { max-height: 28px; max-width: 80px; }

    .footer_top { padding: 40px 20px 30px !important; }

    footer .footer_inner .footer_top_holder .footer_top .four_columns {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        text-align: center;
    }

    .footer_top h6,
    .footer_top .column_inner h6 {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 14px !important;
    }

    .footer_top .widget_link                           { align-items: center; }
    .footer_top .widget_link a:hover                   { padding-left: 0; }
    .footer_top .widget_link div[style*="display: flex"] { justify-content: center; }
    .footer_top .footer_col1                           { text-align: center; }
    .footer_top .footer_col1 p                         { margin: 12px 0 8px 0 !important; }
}


/* ==========================================
   16b. FOOTER — ELEMENTOR TEMPLATE (post 3323)
   ──────────────────────────────────────────
   The LXV site footer is an Elementor Theme Builder template
   using custom HTML widget classes: .lxv-elementor-footer,
   .lxv-footer-grid, .lxv-footer-col, .lxv-footer-logo.

   Asset CleanUp blocks Elementor's global frontend CSS on some
   pages, so .e-con > .e-con-inner never gets width:100% — all
   footer child elements collapse to 0px wide. The rules below
   restore layout and apply full footer styling.
   ========================================== */

/* ── 1. Fix Elementor container width chain in footer ──
   Root problem: e-con-boxed shrinks to content width (48px) because
   Elementor's flex container has no explicit width and content has no
   inherent width either. Force every ancestor to 100% from footer down. */

/* The <footer> element itself — use 100vw to escape any zero-width
   containing block. overflow-x:hidden on html prevents the scrollbar
   that 100vw would otherwise create.
   The left/margin trick is NOT needed here since overflow-x:hidden
   clips cleanly; use a simpler translate approach instead. */
footer.elementor-location-footer,
.elementor-location-footer {
    width: 100vw !important;
    max-width: 100vw !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
    margin-left: calc(-50vw + 50%) !important;
}

/* The Elementor container inside the footer (e-con / e-con-boxed / e-flex) */
.elementor-location-footer .e-con,
.elementor-location-footer .e-con-boxed,
.elementor-location-footer .e-flex,
.elementor-location-footer .e-parent,
.elementor-location-footer [class*="e-con"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* The inner wrapper that holds the HTML widget */
.elementor-location-footer .e-con > .e-con-inner,
.elementor-location-footer .e-con-boxed > .e-con-inner,
.elementor-location-footer [class*="e-con"] > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* The HTML widget and its wrapper */
.elementor-location-footer .elementor-widget,
.elementor-location-footer .elementor-widget-container {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── 2. Footer outer container ── */
.lxv-elementor-footer {
    background-color: var(--sc-footer-bg) !important;
    padding: 44px 5% 28px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── 3. 4-column grid ──
   Col1 (logo) is intentionally the lightest column content-wise now
   (legal links + Hours both moved out), so it no longer needs the
   widest share — 1.6fr was sized for the old copy-heavy version. */
.lxv-footer-grid {
    display: grid !important;
    grid-template-columns: 1.1fr 1.1fr 1fr 1fr !important;
    gap: 48px !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    align-items: start !important;
}

/* ── 4. Individual columns ── */
.lxv-footer-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* ── 5. Logo ──
   width + height:auto scale proportionally to the image's true aspect
   ratio. object-fit:contain + max-width:100% are a safety net in case
   the <img> tag ever carries mismatched inline width/height attributes
   (e.g. a lazy-load placeholder) that would otherwise fight this rule
   and squish the mark. Never add fixed width+height HTML attributes to
   this logo — CSS is the single source of truth for its size. */
.lxv-footer-logo {
    width: 120px !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 0.75;
    transition: opacity 0.3s ease;
    display: block !important;
	vertical-align:top !important;;
}
.lxv-footer-logo:hover { opacity: 1; }
.lxv-footer-col > a:has(.lxv-footer-logo) {
    display: block !important;
    align-self: flex-start !important;
    line-height: 0 !important;
}
/* ── 6. Column headings ── */
.lxv-footer-col h6,
.lxv-footer-grid h6 {
    font-family: var(--sc-sans) !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    letter-spacing: 3.5px !important;
    text-transform: uppercase !important;
    color: var(--sc-gold) !important;
    margin: 0 0 18px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(196, 162, 101, 0.15) !important;
    font-style: normal !important;
}

/* ── 7. Body text in footer ── */
.lxv-footer-col p,
.lxv-footer-grid p {
    font-family: var(--sc-sans) !important;
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.38) !important;
    line-height: 1.7 !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: 0.2px;
}

/* ── 8. All footer links ── */
.lxv-footer-col a,
.lxv-footer-grid a {
    font-family: var(--sc-sans) !important;
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.52) !important;
    text-decoration: none !important;
    line-height: 1.9 !important;
    letter-spacing: 0.2px;
    transition: color 0.22s ease !important;
    display: block !important;
}
.lxv-footer-col a:hover,
.lxv-footer-grid a:hover {
    color: var(--sc-gold-lt) !important;
}

/* ── 9. Widget link container (shared class inside cols 2-4) ── */
.lxv-footer-col .widget_link {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.lxv-footer-col .widget_link div {
    font-family: var(--sc-sans) !important;
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.52) !important;
    line-height: 1.9 !important;
}
.lxv-footer-col .widget_link a {
    display: block !important;
}

/* ── 10. Col 1 — logo column overrides ──
   Kept deliberately light: logo + one short line only. Legal links
   moved to the site-wide bottom bar (§12) and Hours moved into the
   Visit Us column (§9b) so this column can't out-grow the others
   again like it did when Hours briefly lived here. */
.lxv-footer-col.footer_col1 {
    align-self: start !important;
}
.lxv-footer-col.footer_col1 p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 0.68rem !important;
}

/* ── 9b. Visit Us column — Contact + Hours grouped together ── */
.lxv-footer-col .lxv-footer-subhead {
    margin-top: 22px !important;
}

/* ── 11. Col 4 — stay connected (uppercase small links + social icons) ── */
.lxv-footer-col.footer_col4 a {
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.1px !important;
    line-height: 2 !important;
}
/* Social text links (Instagram, Facebook) — sized to match the
   other Stay Connected links so the words don't render oversized */
.lxv-footer-col.footer_col4 a[href*="instagram"],
.lxv-footer-col.footer_col4 a[href*="facebook"],
.lxv-footer-col.footer_col4 a[href*="twitter"],
.lxv-footer-col.footer_col4 a[href*="yelp"] {
    display: inline-block !important;
    text-transform: uppercase !important;
    font-size: 10.5px !important;
    letter-spacing: 1.1px !important;
    margin-right: 14px !important;
    line-height: 2 !important;
    color: rgba(255, 255, 255, 0.42) !important;
}
.lxv-footer-col.footer_col4 a[href*="instagram"]:hover,
.lxv-footer-col.footer_col4 a[href*="facebook"]:hover,
.lxv-footer-col.footer_col4 a[href*="twitter"]:hover,
.lxv-footer-col.footer_col4 a[href*="yelp"]:hover {
    color: var(--sc-gold-lt) !important;
}

/* ── 12. Copyright / bottom bar — full-width, centered, below the grid ──
   Legal links live here now instead of column 1. This div sits as a
   sibling immediately after .lxv-footer-grid (class="lxv-footer-bottom"
   or "lxv-footer-copyright" both match). Its <a> tags need their own
   color rule: they're outside .lxv-footer-grid/.lxv-footer-col, so the
   site-wide "a { color: var(--sc-deep) }" rule would otherwise apply
   dark brown text on the dark footer background — invisible. */
.lxv-footer-copyright,
.lxv-footer-grid + *,
.lxv-elementor-footer .lxv-footer-bottom {
    margin-top: 48px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(196, 162, 101, 0.12) !important;
    font-family: var(--sc-sans) !important;
    font-size: 0.62rem !important;
    color: rgba(255, 255, 255, 0.28) !important;
    letter-spacing: 0.3px;
    text-align: center !important;
}
.lxv-footer-bottom a,
.lxv-footer-copyright a {
    color: rgba(255, 255, 255, 0.42) !important;
    text-decoration: none !important;
    margin: 0 10px !important;
    transition: color 0.22s ease !important;
}
.lxv-footer-bottom a:hover,
.lxv-footer-copyright a:hover {
    color: var(--sc-gold-lt) !important;
}

/* ── 13. Responsive — tablet (2-col) ── */
@media only screen and (max-width: 1024px) {
    .lxv-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px !important;
    }
    .lxv-elementor-footer {
        padding: 36px 4% 20px !important;
    }
}

/* ── 14. Responsive — mobile (1-col) ── */
@media only screen and (max-width: 600px) {
    .lxv-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .lxv-elementor-footer {
        padding: 28px 20px 18px !important;
    }
    .lxv-footer-col h6,
    .lxv-footer-grid h6 {
        text-align: center !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 10px !important;
    }
    .lxv-footer-col .lxv-footer-subhead {
        margin-top: 16px !important;
    }
    .lxv-footer-col {
        text-align: center !important;
    }
    .lxv-footer-col .widget_link {
        align-items: center !important;
    }
    .lxv-footer-logo {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Bigger tap targets — links were 0.7rem with tight line-height,
       fine for a mouse cursor but cramped for a fingertip. */
    .lxv-footer-col a,
    .lxv-footer-grid a,
    .lxv-footer-col .widget_link a {
        font-size: 0.78rem !important;
        padding: 4px 0 !important;
    }
}

/* ── 14b. Responsive — small phones ── */
@media only screen and (max-width: 380px) {
    .lxv-elementor-footer {
        padding: 22px 16px 16px !important;
    }
    .lxv-footer-grid {
        gap: 24px !important;
    }
    .lxv-footer-logo {
        width: 90px !important;
    }
}

/* ==========================================
   17. MISC UTILITIES
   ========================================== */

.mobile-only { display: none !important; }

#back_to_top.on {
    right: unset;
    left: 25px;
    bottom: 20px;
}

@keyframes line {
    0% { background-position-x: 390px; }
}

/* ─── Elementor aspect-ratio data pseudo-element ──────────────────────────
   Elementor stores image aspect ratios (e.g. 0.66 for a 3:2 crop) as
   CSS content: "0.66" on the posts-widget container's ::after so its JS
   can read the value via getComputedStyle. Normally Elementor's own CSS
   hides this, but Asset CleanUp blocks that stylesheet on some pages so
   the raw fraction becomes visible.
   IMPORTANT: Selector is intentionally narrow (specific element ID only).
   A broad .elementor-element::after rule would collapse clearfix and
   em-based pseudo-elements on columns, breaking footer layout.
   ─────────────────────────────────────────────────────────────────────── */
.elementor-element-40355aa::after {
    font-size: 0 !important;
    color: transparent !important;
}

/* Homepage pull-quote */
.homepage-quote {
    position: relative;
    font-family: var(--sc-serif) !important;
    font-size: var(--fs-h3);
    font-style: italic;
    color: var(--sc-text-lt);
    text-align: center;
    width: 75%;
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    line-height: 1.6;
}

/* ─── Full-bleed page wrapper (v7-* landing pages) ────────────────────────
   PROBLEM: v7 landing pages (e.g. Spring 2026 Wine Club) build every
   coloured band as a full-bleed container:
     .v7-bg-*.e-con { margin-left/right: calc(50% - 50vw); width: 100vw }
   That hack assumes the band's ancestors span the viewport. They don't:
   Bridge renders the page inside .container_inner (qode_grid_1200 → 1100px,
   offset from the left edge) and Elementor's .elementor-<id> wrapper sits
   inside it with overflow-x:hidden. So the negative margin dragged every
   band ~54–143px to the left (depending on viewport) while the wrapper
   clipped anything left of its own box — cutting the first character off
   the wine rows and pushing all body copy and the 3-card trio off-screen.

   FIX: let the wrapper span the viewport on these pages, so the bands'
   existing full-bleed maths resolves correctly. Scoped via :has() on the
   v7 hero class — a stable semantic hook, no page/element IDs (see
   [[website-coding-conventions]]). overflow-x:clip (not hidden) keeps the
   wrapper from becoming a scroll container so sticky/fixed still work.
   ─────────────────────────────────────────────────────────────────────── */
body:has(.v7-bg-hero) .container_inner,
body:has(.v7-bg-hero) .elementor[class*="elementor-"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
}

.homepage-quote::before {
    /* Quote-left mark rendered as inline SVG mask — no font dependency */
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin-bottom: 15px;
    background-color: var(--sc-gold);
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V216z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V216z'/%3E%3C/svg%3E") no-repeat center / contain;
}