/*
Theme Name: Kalium - Child Theme
Theme URI: https://kaliumtheme.com
Author: Laborator
Author URI: https://laborator.co
Description: Lennox Beverages child theme. Bridges the active Elementor kit (ID 29) global tokens to readable variable names, then applies brand-aligned overrides on WC + Kalium surfaces (shop, cart, checkout, my-account, single product, header, footer). All design tokens flow from the kit; no hardcoded brand hex in selectors.
Requires PHP: 7.2
Version: 1.38
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: kalium
Text Domain: kalium
*/

/* ==========================================================================
   0. @FONT-FACE — Optima Pro + Garamond Premier Pro
   Canonical files at /uploads/2026/05/, woff2-only (universal modern support
   since 2016; IE11 not targeted). Migrated 2026-05-15 from /uploads/2026/02/
   generic/-webfont paths — old and new files are bit-identical (verified MD5
   match on garamondpremrpro-it pair); rename is for path consistency.
   Garamond display 600 used to declare a separate "Garamond Premier Pro
   Display" family; unified into Garamond Premier Pro at weight 600 per the
   canonical typography map.
   ========================================================================== */
@font-face {
    font-family: 'Optima Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/uploads/2026/05/optima-pro-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Optima Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/wp-content/uploads/2026/05/optima-pro-medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Optima Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/wp-content/uploads/2026/05/optima-pro-demibold.woff2') format('woff2');
}
@font-face {
    font-family: 'Garamond Premier Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/uploads/2026/05/garamondpremrpro-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Garamond Premier Pro';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/uploads/2026/05/garamondpremrpro-it.woff2') format('woff2');
}
@font-face {
    font-family: 'Garamond Premier Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/wp-content/uploads/2026/05/garamondpremrpro-subhead-medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Garamond Premier Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/wp-content/uploads/2026/05/garamondpremrpro-display-semibold.woff2') format('woff2');
}

/* ==========================================================================
   1. BRAND TOKENS
   Bridged from Elementor kit (active kit ID 29) so changes in Elementor →
   Site Settings → Global Colors / Typography automatically propagate here.
   See brand-system.md §12 for full reference card.
   ========================================================================== */
:root {
    /* ===== COLORS — hardcoded per brand spec (M8 2026-05-14) =====
       PREVIOUSLY these tokens used `var(--e-global-color-X)` indirection,
       expecting Elementor kit 29 to supply the values. Discovered 2026-05-14
       during gemini-assisted visual audit: kit 29 CSS (post-29.css) only
       loads on Elementor-rendered pages. On WC pages (/my-account/, /cart/,
       /checkout/, /shop/), PDP single-product.php, the 404, and any other
       non-Elementor template, every `var(--e-global-color-X)` resolves to
       EMPTY — silently breaking the entire token cascade (body bg, text,
       cards, etc.). Memory `brand_token_source_of_truth` already flagged
       kit 29 as stale Hotel-demo data, so the cleanest fix is to define
       values directly here in the child theme — single source of truth,
       works on every page, eliminates the Elementor-vs-PHP cascade trap.
       Values from CLAUDE.md "Colors" canon. */
    --lx-grey:        #3D3935;  /* text + inverse surface */
    --lx-ivory:       #FAF7F4;  /* primary surface */
    --lx-pearl:       #E8E3DC;  /* secondary surface */
    --lx-cashmere:    #B5ACA3;  /* borders, dividers */
    --lx-white:       #FFFFFF;  /* utility */
    --lx-grey-soft:   #5C544C;  /* secondary text (v2 — supersedes v1's #6B6661 Ink Soft) */
    --lx-ink-muted:   #6F665D;  /* tertiary text */
    --lx-fog:         #DCD4C8;  /* tertiary surface */
    --lx-rose-500:    #A33C4B;  /* PDP accent ONLY, never UI chrome */

    /* Semantic state (form validation only — muted, never traffic-light) */
    --success: #4A6B4E;
    --warning: #8A6A3A;
    --error:   #8A3D3D;
    --info:    #4A5E6B;

    /* v1 → v2 backwards-compat aliases (kept so ~2000 lines of downstream CSS keep working) */
    --lx-canvas:      var(--lx-ivory);                        /* v1 alias */
    --lx-ink-primary: var(--lx-grey);                         /* v1 alias */
    --lx-helper:      var(--lx-grey-soft);                    /* v1 alias; VALUE CHANGED v1→v2: #6B6661 → #5C544C per design canon (slightly darker; improves AA contrast on Ivory) */
    --lx-dark-brown:  var(--lx-grey);                         /* legacy */
    --lx-cream:       var(--lx-ivory);                        /* legacy */
    --lx-mid-stone:   var(--lx-cashmere);                     /* legacy */
    --lx-light-stone: var(--lx-pearl);                        /* legacy */

    /* Semantic aliases (design 2026-05-11) */
    --surface-primary:   var(--lx-ivory);
    --surface-secondary: var(--lx-pearl);
    --surface-inverse:   var(--lx-grey);
    --text-primary:      var(--lx-grey);
    --text-secondary:    var(--lx-grey-soft);
    --text-inverse:      var(--lx-ivory);
    --border-subtle:     var(--lx-cashmere);
    --accent-rose:       var(--lx-rose-500);

    /* ===== TYPOGRAPHY (M8 2026-05-14: hardcoded, same reasoning as colors above) ===== */
    --lx-font-serif: "Garamond Premier Pro", Garamond, Georgia, serif;
    --lx-font-sans:  "Optima Pro", Optima, system-ui, sans-serif;
    /* Design family aliases */
    --font-display: "Garamond Premier Pro", Garamond, Georgia, serif;
    --font-serif:   "Garamond Premier Pro", Garamond, Georgia, serif;
    --font-sans:    "Optima Pro", Optima, system-ui, sans-serif;
    /* --font-script removed 2026-05-13 — Austin Text Semibold is desktop-license
       only; wordmarks are now vectorized so no web-loading needed. */

    /* ===== SPACING — v1 --lx-space-* preserved (values unchanged) ===== */
    --lx-space-1: 4px;   --lx-space-2: 8px;
    --lx-space-3: 16px;  --lx-space-4: 24px;  --lx-space-5: 32px;
    --lx-space-6: 48px;  --lx-space-7: 64px;  --lx-space-8: 96px;  --lx-space-9: 128px;
    /* Design --s-* scale (includes 12px step at --s-3 — NEW; --lx-space-* token map below) */
    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
    --s-9: 96px;  --s-10: 128px;
    /* Section padding presets (per design) */
    --section-sm: 80px;
    --section-md: 128px;
    --section-lg: 160px;
    /* Layout */
    --container: 1280px;
    --gutter:    32px;

    /* ===== MOTION — v1 --lx-* preserved as aliases pointing at design tokens ===== */
    --lx-ease:         cubic-bezier(0.32, 0.72, 0.26, 1);  /* now matches design --ease-elegant (v1 was 0.16,1,0.3,1) */
    --lx-dur-instant:  160ms;  /* v1: 150ms */
    --lx-dur-state:    280ms;  /* v1: 240ms */
    --lx-dur-reveal:   480ms;  /* unchanged */
    --lx-dur-hero:     720ms;  /* unchanged */
    /* Design two-curve naming */
    --ease-elegant: cubic-bezier(0.32, 0.72, 0.26, 1);
    --ease-quiet:   cubic-bezier(0.4, 0, 0.2, 1);
    --dur-1: 160ms; --dur-2: 280ms; --dur-3: 480ms; --dur-4: 720ms;

    /* ===== BORDERS + RADII ===== */
    --lx-border-subtle: 1px solid var(--lx-cashmere);
    --lx-radius-sharp:  0;
    --lx-radius-soft:   2px;  /* v1: 3px — updated per design --r-1 */
    --lx-radius-card:   4px;  /* unchanged */
    /* Design --r-* */
    --r-0: 0;
    --r-1: 2px;               /* inputs/buttons/badges */
    --r-2: 4px;               /* general */
    --r-soft-card: 12px;      /* RESERVED for design's .soft cards only */

    /* ===== SHADOWS ===== */
    --lx-shadow-soft:   0 2px 4px  rgba(61, 57, 53, 0.06);
    --lx-shadow-raised: 0 4px 12px rgba(61, 57, 53, 0.08);
    /* Design progressive shadows */
    --shadow-1: 0 1px 2px rgba(58, 53, 47, 0.06), 0 1px 1px rgba(58, 53, 47, 0.04);
    --shadow-2: 0 6px 24px -8px rgba(58, 53, 47, 0.16), 0 2px 4px rgba(58, 53, 47, 0.04);
    --shadow-3: 0 24px 60px -20px rgba(58, 53, 47, 0.24), 0 4px 12px rgba(58, 53, 47, 0.06);

    /* ===== TRACKING (letter-spacing) ===== */
    --tr-tight:   -0.02em;
    --tr-normal:   0;
    --tr-wide:     0.04em;
    --tr-wider:    0.16em;
    --tr-widest:   0.32em;

    /* ===== WP / GUTENBERG GLOBAL OVERRIDES — Phase 6.E+F (2026-05-12) =====
       Align WP's block-library `.alignwide` width to our brand container
       (1280px) so the Cart Block + Checkout Block sit flush with the
       brand hero/helpband we inject via the_content filter. */
    --wp--style--global--wide-size: 1280px;
    --wp--style--global--content-size: 1280px;

    /* ===== KALIUM PARENT --k-color-N + --k-button-* REDECLARATIONS (Phase 6.B.4, 2026-05-12) =====
       Kalium parent's kit-29 dynamic CSS (uploads/elementor/css/post-29.css) ships
       --k-color-1..9 with Hotel-demo gold + grey values from before the Lennox migration:
         --k-color-1: #c39a2c (Hotel gold) — leaks to --k-button-hover-bg
         --k-color-2: #9a7613 (darker gold)
         --k-color-3: #333333 (dark grey)
         --k-color-4: #222222 (near-black) — leaks to --k-button-bg
         --k-color-5..9: various leftover neutrals
         --k-color-8: #EEEEEE — leaks into elements adjacent to .lx-pearl regions
       These leak through Elementor widgets that bypass .woocommerce selectors.
       Redeclaring at :root with brand tokens neutralizes the leak via cascade
       (kalium-child :root wins over kit-29 dynamic CSS because :root selectors
       have equal specificity and the kalium-child rule loads later in cascade).
       The CSS audit (design-imports/WC_CSS_AUDIT_2026-05-12.md §1.5) flagged
       this as 70+ inherited rule sources. */
    --k-color-1: var(--lx-grey);          /* Hotel gold → brand grey (primary buttons) */
    --k-color-2: var(--lx-cashmere);      /* darker gold → cashmere (secondary surfaces) */
    --k-color-3: var(--lx-grey);          /* dark grey → brand grey */
    --k-color-4: var(--lx-grey);          /* near-black → brand grey (button-bg base) */
    --k-color-5: var(--lx-grey-soft);     /* neutral → secondary text */
    --k-color-6: var(--lx-ink-muted);     /* neutral → tertiary text */
    --k-color-7: var(--lx-cashmere);      /* neutral → borders */
    --k-color-8: var(--lx-pearl);         /* #EEEEEE → brand pearl */
    --k-color-9: var(--lx-fog);           /* neutral → tertiary surface */
    --k-button-bg: var(--lx-grey);                /* was var(--k-color-4) = #222222 */
    --k-button-hover-bg: var(--lx-cashmere);      /* was var(--k-color-1) = Hotel gold */
    --k-button-text: var(--lx-ivory);
    --k-button-hover-text: var(--lx-grey);
}

/* gold-hover fix (2026-05-26): Kalium's Customizer prints an inline
   :root{ --k-color-1:#c39a2c; --k-button-hover-bg:var(--k-color-1) } in <head> AFTER this
   stylesheet, so the :root remap above (equal specificity, earlier in source) LOSES → the
   Hotel-leftover gold (#c39a2c) leaks onto every .elementor-button:hover lacking .btn--primary.
   html:root (0,1,1) beats the Customizer's :root (0,1,0) regardless of order. Hover → brand
   dark-grey #2A2622 (matches the §25.7/§40.6 solid-button hover; supersedes the cashmere above). */
html:root {
    --k-color-1: var(--lx-grey);
    --k-color-4: var(--lx-grey);          /* Hotel near-black #222222 → brand grey (feeds --k-button-bg) */
    --k-button-bg: var(--lx-grey);        /* rest bg: brand grey #3D3935 (was Customizer-leaked #222222) */
    --k-button-hover-bg: #2A2622;         /* hover: darker grey */
    --k-button-active-bg: #2A2622;        /* active/click: was Hotel gold #9a7613 → killed (this was the click-gold) */
    --k-button-hover-border-color: #2A2622;
    --k-button-hover-text: var(--lx-ivory);  /* B2 (client 2026-06-23): html:root flips hover-bg to dark #2A2622 but left hover-text at --lx-grey (line 227) → dark-on-dark on every Kalium-fallback button hover. Force ivory so hover text is legible on the dark hover fill. */
}

/* ==========================================================================
   2. UTILITY: respect prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* §3 (SITE-WIDE BUTTONS — brand primary / secondary / ghost) STRIPPED 2026-05-12 Phase 6.B.1 — shadowed dead WC code per WC_CSS_AUDIT_2026-05-12.md §4.1; superseded by §16-§25. */
/* ==========================================================================
   4. SITE-WIDE FORMS — text/email/select/textarea + labels + WC fields
   ========================================================================== */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select {
    background-color: var(--lx-canvas);
    border: 1px solid var(--lx-cashmere);
    border-radius: var(--lx-radius-soft);
    padding: 12px 16px;
    font-family: var(--lx-font-sans);
    font-size: 14px;
    color: var(--lx-ink-primary);
    width: 100%;
    transition: border-color var(--lx-dur-state) var(--lx-ease),
                background-color var(--lx-dur-state) var(--lx-ease);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--lx-ink-primary);
    background-color: var(--lx-white);
    box-shadow: 0 0 0 3px rgba(61, 57, 53, 0.22);   /* a11y WCAG 2.4.7 — visible focus ring (was outline:none with no replacement) */
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
    font-family: var(--lx-font-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--lx-ink-primary);
    margin-bottom: var(--lx-space-2);
    display: block;
}

.woocommerce form .form-row .required,
.woocommerce-page form .form-row .required {
    color: var(--lx-cashmere);
    text-decoration: none;
}

/* ==========================================================================
   5. NOTICES — info / success / error
   Replace WC default green/red with brand-aligned tones.
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
    background-color: var(--lx-pearl);
    color: var(--lx-ink-primary);
    border-top: 3px solid var(--lx-cashmere);
    border-radius: var(--lx-radius-soft);
    padding: var(--lx-space-3) var(--lx-space-4);
    font-family: var(--lx-font-sans);
    font-size: 14px;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--lx-ink-primary);
}

.woocommerce-message {
    position: relative;
    min-height: 52px;
    box-sizing: border-box;
    padding-left: calc(var(--lx-space-4) + 38px) !important;
}

.woocommerce-message::before {
    position: absolute;
    top: 50%;
    left: var(--lx-space-4);
    width: 18px;
    margin: 0;
    line-height: 1;
    text-align: center;
    transform: translateY(-50%);
}

.woocommerce-message .button,
.woocommerce-message a.button {
    float: right;
    margin-left: 16px;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .woocommerce-message .button,
    .woocommerce-message a.button {
        display: inline-flex;
        float: none;
        margin: 8px 0 0;
    }
}

.woocommerce-error {
    border-top-color: var(--error); /* v2 semantic state palette (#8A3D3D); was hardcoded #C62828 pre-Phase-6.B.3 (2026-05-12) */
}


/* §6 (SHOP ARCHIVE — editorial product grid) STRIPPED 2026-05-12 Phase 6.B.1 — shadowed dead WC code per WC_CSS_AUDIT_2026-05-12.md §4.1; superseded by §16-§25. */

/* §7 (SINGLE PRODUCT — editorial layout, generous whitespace) STRIPPED 2026-05-12 Phase 6.B.1 — shadowed dead WC code per WC_CSS_AUDIT_2026-05-12.md §4.1; superseded by §16-§25. */

/* §8 (CART PAGE — clean table, restrained chrome) STRIPPED 2026-05-12 Phase 6.B.1 — shadowed dead WC code per WC_CSS_AUDIT_2026-05-12.md §4.1; superseded by §16-§25. */

/* §9 (CHECKOUT PAGE) STRIPPED 2026-05-12 Phase 6.B.1 — shadowed dead WC code per WC_CSS_AUDIT_2026-05-12.md §4.1; superseded by §16-§25. */
/* ==========================================================================
   10. ORDER RECEIVED / THANK YOU
   ========================================================================== */
.woocommerce-order .woocommerce-thankyou-order-received {
    font-family: var(--lx-font-serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--lx-ink-primary);
    border: none;
    padding: var(--lx-space-6) 0;
    text-align: center;
    background: none;
}

.woocommerce-order .woocommerce-order-overview {
    background-color: var(--lx-pearl);
    border-radius: var(--lx-radius-card);
    padding: var(--lx-space-4);
    border: none;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--lx-space-5);
    justify-content: center;
}

.woocommerce-order .woocommerce-order-overview li {
    font-family: var(--lx-font-sans);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lx-helper);
    border: none;
    flex: 0 1 auto;
}

.woocommerce-order .woocommerce-order-overview li strong {
    font-family: var(--lx-font-serif);
    font-size: 18px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--lx-ink-primary);
    display: block;
    margin-top: var(--lx-space-1);
}

/* ==========================================================================
   11. MY ACCOUNT — sidebar nav + dashboard + endpoints
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background-color: var(--lx-pearl);
    border-radius: var(--lx-radius-card);
    padding: var(--lx-space-3);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--lx-cashmere);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--lx-space-3);
    font-family: var(--lx-font-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--lx-ink-primary);
    text-decoration: none;
    transition: background-color var(--lx-dur-state) var(--lx-ease),
                color var(--lx-dur-state) var(--lx-ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: var(--lx-canvas);
    color: var(--lx-ink-primary);
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-family: var(--lx-font-serif);
    font-weight: 500;
    color: var(--lx-ink-primary);
}

.woocommerce-account .woocommerce-MyAccount-content p {
    font-family: var(--lx-font-serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--lx-ink-primary);
}


/* §12 (MY ACCOUNT — Edit Account form (specific layered fix from earlier)) STRIPPED 2026-05-12 Phase 6.B.1 — shadowed dead WC code per WC_CSS_AUDIT_2026-05-12.md §4.1; superseded by §16-§25. */
/* ==========================================================================
   14. RESPONSIVE TUNING
   ========================================================================== */
@media (max-width: 768px) {
    .woocommerce-account .edit-account fieldset {
        padding: var(--lx-space-3) var(--lx-space-3);
    }

    .woocommerce-account .edit-account button[type="submit"],
    .woocommerce-account .edit-account input[type="submit"] {
        width: 100% !important;
        text-align: center !important;
    }

    .single-product div.product .product_title {
        font-size: 32px;
    }

    .woocommerce-cart table.shop_table th {
        font-size: 12px;
    }

    .woocommerce-cart table.shop_table .product-name a {
        font-size: 17px;
    }
}

/* ==========================================================================
   15. SITE HEADER v2 — two-tier (logo center + cart top-right; CAPS nav below)
   Template 6974. Behavior:
   - Default: cream background (NO grey/cashmere bottom border per feedback)
   - Nav text: UPPERCASE Optima Pro Medium with letter-spacing
   - On nav-link hover: header background turns white (Ruinart-style)
   - Cart utility: small icon, no Elementor button chrome
   - Sub-menu (mega-menu) styling for hover-reveal: ready when WP nav-menu items
     have children. Currently nav items are flat — add child items in WP Admin →
     Appearance → Menus → Primary to populate hover dropdowns.
   ========================================================================== */
/* AUSTIN TEXT @font-face REMOVED 2026-05-13.
   Reason: Austin Text Semibold is desktop-license only. @font-face on a public
   site = web use, which the license doesn't permit. Lennox wordmarks have been
   vectorized (text→paths via Inkscape) so they no longer depend on any web font.
   The OTF still lives at /wp-content/uploads/lennox-fonts/ for any
   future desktop-only export use. */

/* ==========================================================================
   HEADER — SIMPLIFIED (2026-05-13)
   Single state: solid white background, grey wordmark, grey nav text.
   The previous Ruinart-style glassy-header pattern (transparent default +
   ivory on hover, IVORY-wordmark swap to GREY on hover) is SUSPENDED until
   the homepage hero is built. With no hero behind the header, the ivory
   wordmark is invisible against the page bg. TODO: restore the 3-scenario
   pattern (see Git history for kalium-child/style.css §27 pre-2026-05-13)
   once a full-bleed hero exists on body.home.
   ========================================================================== */

header.elementor.elementor-6974,
header[data-elementor-id="6974"] {
    background-color: var(--lx-white) !important;
    position: relative;
    z-index: 100;
    width: 100%;
}

/* Inner Elementor containers must NOT paint their own background */
header.elementor.elementor-6974 > .e-con,
header.elementor.elementor-6974 .e-con,
header[data-elementor-id="6974"] > .e-con,
header[data-elementor-id="6974"] .e-con {
    background: transparent !important;
}

/* §27.b — Kalium-native nav menu spacing (header_menu_item_spacing customizer
   not wired to a CSS variable, so explicit here). Applies to both the
   left primary menu and the right utility menu. */
header.site-header ul.menu > li.menu-item {
    margin-right: 24px;
}
header.site-header ul.menu > li.menu-item:last-child {
    margin-right: 0;
}
/* Slight breathing room between text and dropdown caret in items with submenus */
header.site-header ul.menu > li.menu-item-has-children > a .dropdown-toggle {
    margin-left: 6px;
}
/* Lennox brand typography for header nav items */
header.site-header ul.menu > li.menu-item > a {
    font-family: 'Optima Pro', 'Optima', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #3D3935;
    text-decoration: none;
}
header.site-header ul.menu > li.menu-item > a:hover,
header.site-header ul.menu > li.menu-item.current-menu-item > a {
    color: #5C544C;
}
/* Sticky-state nav items inherit color from inner content; no override needed */

/* §27.c — Submenu rescue. Kalium customizer sets submenu bg to transparent
   (color-7, alpha 0). On hover this leaves the dropdown invisible over the
   page content. Restore solid Ivory bg + brand styling. */
header.site-header ul.menu .sub-menu {
    background-color: #FAF7F4 !important;   /* Lennox Ivory */
    box-shadow: 0 12px 32px rgba(61, 57, 53, 0.08);
    border-top: 1px solid #B5ACA3;
    padding: 16px 20px !important;
    min-width: 220px;
    list-style: none;
    z-index: 999;
}
header.site-header ul.menu .sub-menu li.menu-item {
    margin: 0;
    padding: 0;
}
header.site-header ul.menu .sub-menu li.menu-item > a {
    display: block;
    padding: 8px 0;
    font-family: 'Optima Pro', 'Optima', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #3D3935;
    text-decoration: none;
    transition: color 200ms ease;
}
header.site-header ul.menu .sub-menu li.menu-item > a:hover {
    color: #5C544C;
}
/* Prevent the parent <li> from collapsing when submenu opens (no layout shift) */
header.site-header ul.menu > li.menu-item-has-children {
    position: relative;
}

/* §27.d — Header right-slot: add breathing space between the utility menu
   (Trade / Contact / Account) and the cart icon. */
header.site-header .header-block__item--type-woocommerce-mini-cart,
header.site-header .lb-header-legacy_header_woocommerce_mini_cart {
    margin-left: 28px;
}
@media (max-width: 768px) {
    header.site-header .header-block__item--type-woocommerce-mini-cart,
    header.site-header .lb-header-legacy_header_woocommerce_mini_cart {
        margin-left: 16px;
    }
}

/* 2026-05-20 D15 update: legacy 3-col-grid override for the chrome row
   scoped to desktop only. On mobile the grid forced col 1 to ~33px which
   was narrower than the hamburger trigger (40px), causing the hamburger
   to overflow + wrap to a new line. Mobile uses Elementor's native flex
   layout with cells sized by their content + the row's space-between
   justification. */
@media (min-width: 1025px) {

/* Top tier — strict 3-col grid: empty | logo center | empty (cart now lives
   in the bottom tier per latest feedback). Logo is always horizontally
   centered on the page regardless of sibling widths. */
[data-elementor-id="6974"] [data-id="7f3227b"] {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    width: 100% !important;
}

[data-elementor-id="6974"] [data-id="5087750"],
[data-elementor-id="6974"] [data-id="7368b9e"],
[data-elementor-id="6974"] [data-id="0490a55"] {
    width: auto !important;
    flex: initial !important;
    min-width: 0 !important;
}
[data-elementor-id="6974"] [data-id="5087750"] { grid-column: 1 !important; justify-self: start !important; }
[data-elementor-id="6974"] [data-id="7368b9e"] { grid-column: 2 !important; justify-self: center !important; }
[data-elementor-id="6974"] [data-id="0490a55"] { grid-column: 3 !important; justify-self: end !important; display: flex; align-items: center; gap: 16px; }

/* Top-tier logo cell: a fixed-size box (220×56) that contains BOTH wordmark
   variants stacked at exactly the same position. Both are absolute, both
   centered identically — no jump on color swap. */
[data-elementor-id="6974"] [data-id="7368b9e"] {
    position: relative !important;
    width: 176px !important;       /* §B3 logo −20% (client 2026-06-23): 220→176 */
    height: 45px !important;       /* §B3 logo −20%: 56→45 */
    flex: 0 0 176px !important;    /* §B3 logo −20% */
}

[data-elementor-id="6974"] [data-id="7368b9e"] .elementor-widget-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity var(--lx-dur-state) var(--lx-ease) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Wordmark: always show GREY (5ea0b58), hide IVORY (2dd0048) until the
   homepage hero is built and the glassy pattern is restored. */
[data-elementor-id="6974"] [data-id="2dd0048"] { opacity: 0 !important; pointer-events: none !important; z-index: 1; }
[data-elementor-id="6974"] [data-id="5ea0b58"] { opacity: 1 !important; pointer-events: auto !important; z-index: 2; }

/* Bottom tier — relative so cart can absolute-position to the right while
   nav stays centered on the page. */
[data-elementor-id="6974"] [data-id="80c0dcf"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    position: relative;
    min-height: 56px !important;
}

[data-elementor-id="6974"] [data-id="80c0dcf"] .elementor-widget-nav-menu {
    width: auto !important;
}

[data-elementor-id="6974"] [data-id="80c0dcf"] .elementor-nav-menu {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Cart sits at the right edge of the bottom tier — same row as nav text. */
[data-elementor-id="6974"] [data-id="80c0dcf"] .elementor-widget-woocommerce-menu-cart {
    position: absolute !important;
    right: 32px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
}

} /* end desktop-only chrome layout scope */

/* Mobile + tablet chrome layout: balanced 3-cell row with logo centered.
   Side cells (5087750 hamburger + 0490a55 cart-utils) have flex:1 1 0 so
   they share remaining space EQUALLY — that keeps the centered logo (cell
   7368b9e) anchored to viewport center regardless of asymmetric icon widths
   (hamburger 40px vs cart+badge 54px+). Validated via Gemini visual review
   2026-05-20: 'side cells aren't equal-width so logo skews right'.

   The lone !important below is targeted at Elementor's per-post CSS variable
   (--container-widget-flex-grow) which sets each cell's flex-grow individually
   based on widget settings I couldn't get to apply via the MCP _flex_grow key
   (Elementor's control wires to a setting name we couldn't identify exactly).
   One rule, one purpose, documented — not a cascade-war pattern. */
/* Mobile + tablet chrome layout: defensive CSS Grid override.
   ================================================================
   The flex-based approach kept regressing because Elementor's frontend.js
   re-applies --flex-wrap-mobile + per-post CSS variables ~1s after page
   load (operator confirmed on real iPhone Safari + Chrome DevTools mobile-
   emulation: 'design WOULD work but gets overridden after a second,
   removing menu styling and putting menu trigger lower again').
   Switching to explicit CSS Grid bypasses ALL flex-variable inheritance.
   Grid columns are hardcoded percentage tracks that Elementor's runtime
   can't repaint. Five !important rules total, all scoped to this single
   chrome-row block — documented, not a cascade arms race. */
@media (max-width: 1024px) {
    [data-elementor-id="6974"] [data-id="7f3227b"] {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        grid-auto-flow: column !important;
        align-items: center !important;
        gap: 16px !important;
    }
    [data-elementor-id="6974"] [data-id="5087750"] {
        grid-column: 1 !important;
        justify-self: start !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    [data-elementor-id="6974"] [data-id="7368b9e"] {
        grid-column: 2 !important;
        justify-self: center !important;
        width: 128px !important;        /* §B3 logo −20%: 160→128 */
        min-width: 0 !important;
        position: static !important;
        transform: none !important;
        pointer-events: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Widgets inside chrome cells: flex-center their content. Use
       align-self:stretch (works with parent min-height) instead of
       height:100% (which resolves to 0 because parent's height is
       auto, only min-height is set). */
    [data-elementor-id="6974"] [data-id="7368b9e"] .elementor-widget-image,
    [data-elementor-id="6974"] [data-id="5087750"] .elementor-widget-html,
    [data-elementor-id="6974"] [data-id="0490a55"] .elementor-widget {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
    }
    [data-elementor-id="6974"] [data-id="7368b9e"] .elementor-widget-image img {
        width: 128px;        /* §B3 logo −20%: 160→128 */
        max-width: 128px;
    }
    [data-elementor-id="6974"] [data-id="0490a55"] {
        grid-column: 3 !important;
        justify-self: end !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
}

/* ============================================================
   ROOT-CAUSE FIX (2026-05-20): HC-offcanvas-nav adds
   `.hc-nav-trigger` class to our customToggle anchor after init,
   which carries `position:absolute; top:20px; left:-20px`. That
   reposition is the source of the "design loads correct then
   gets overridden after ~1s" bug operator was reporting on real
   iPhone Safari + Chrome DevTools mobile-emu. Override here so
   the trigger stays static-positioned + cell-centered.
   ============================================================ */
.elementor-location-header a.lx-mobile-trigger.hc-nav-trigger {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 40px !important;
    min-height: 0 !important;
    z-index: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
}
/* HC also adds child spans for its own burger glyph — hide them so
   our SVG hamburger inside the anchor is the only visible icon. */
.elementor-location-header a.lx-mobile-trigger.hc-nav-trigger > span {
    display: none !important;
}
.elementor-location-header a.lx-mobile-trigger.hc-nav-trigger svg {
    display: block;
}

/* Homepage: SUSPENDED — header used to absolute-position over a full-bleed
   hero (Ruinart pattern). With no hero yet, we keep the header in flow with
   the same solid white treatment as every other page. TODO: restore absolute
   positioning + transparent default once the hero is built. */

/* Make sure the page content on home doesn't add a top spacer that
   pushes the hero below the header — first Elementor section starts at top:0 */
body.home #content,
body.home main#content,
body.home .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.home .site-content > .elementor,
body.home .site-content > .elementor > section:first-child,
body.home .site-content > .elementor > .elementor-section:first-child {
    margin-top: 0 !important;
}

/* Anchor sections — scroll-margin-top so URL hash targets land below the
   absolute/fixed header instead of being hidden under it. */
[id="our-vision"],
[id="our-craft"],
[id^="lx-anchor-"] {
    scroll-margin-top: 140px;
}

/* 2026-05-20 D15 update: legacy CAPS-nav + mega-menu CSS scoped to
   desktop-only. The [data-elementor-id="6974"] attribute selector has
   specificity 0,1,0 (one attribute selector counts as a class) plus
   the descendant chain — so combined with !important on every property,
   it was beating the Off-Canvas drawer nav-menu widget's own scoped CSS
   on mobile. The whole legacy block belongs to the desktop chrome only.
   Wrapped here in @media (min-width: 1025px) so mobile gets the widget-
   scoped CSS without competition. */
@media (min-width: 1025px) {

/* CAPS nav per typography spec §3.6. Always GREY on the solid white header.
   Hovered item gets an underline (border-bottom). No baseline shift on hover. */
[data-elementor-id="6974"] .elementor-nav-menu .elementor-item {
    font-family: var(--lx-font-sans) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: var(--lx-ink-primary) !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    padding: 8px 0 6px 0 !important;
    transition: border-bottom-color var(--lx-dur-state) var(--lx-ease) !important;
    transform: none !important;
}

/* Hovering a nav item → underline appears */
[data-elementor-id="6974"] .elementor-nav-menu .elementor-item:hover,
[data-elementor-id="6974"] .elementor-nav-menu .menu-item:hover > .elementor-item,
[data-elementor-id="6974"] .elementor-nav-menu .menu-item-has-children:hover > .elementor-item,
[data-elementor-id="6974"] .elementor-nav-menu .menu-item:focus-within > .elementor-item {
    color: var(--lx-ink-primary) !important;
    border-bottom-color: var(--lx-ink-primary) !important;
    text-decoration: none !important;
}

} /* end desktop-only CAPS-nav scope */

/* 2026-05-20 D15 update: legacy mega-menu CSS scoped to desktop-only.
   Without this gate, the [data-elementor-id="6974"] attribute selector
   has higher specificity than .elementor-location-header class selectors
   used elsewhere in this file, and the .sub-menu absolute-positioning
   + 100vw width bleed into the mobile drawer DOM rendered by the new
   Off-Canvas widget. Mega-menu remains exactly as designed on ≥1025px;
   on tablet/mobile the Off-Canvas widget owns the drawer. */
@media (min-width: 1025px) {

/* ----------------------------------------------------------------
   MEGA-MENU — full-viewport-width white panel that opens flush with
   the bottom of the header (Ruinart pattern). Cards are landscape
   (wider than tall). Card text always GREY; underline ONLY on hover
   of the card; no baseline shift on hover.
   ---------------------------------------------------------------- */

/* Parent <li> goes static so the .sub-menu's `top: 100%` resolves
   against the <header> element — the panel opens at the very bottom
   edge of the header band, no gap. */
[data-elementor-id="6974"] .elementor-nav-menu > .menu-item-has-children {
    position: static !important;
}

/* Sub-menu breaks out to FULL VIEWPORT width (100vw) via translateX, opens
   flush with the bottom of the header (margin-top: -1px to absorb any 1px
   inline baseline gap), and is IVORY (matching the hover header bg) so the
   strip reads as one continuous ivory band, edge-to-edge. */
[data-elementor-id="6974"] .elementor-nav-menu .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    margin-top: -1px !important;
    background-color: var(--lx-canvas) !important;
    border-top: none !important;
    box-shadow: var(--shadow-2) !important; /* tokenized v1.7 (was hardcoded rgba) */
    padding: var(--lx-space-6) var(--lx-space-5) var(--lx-space-7) !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: var(--lx-space-7) !important;
    list-style: none !important;
    z-index: 99 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--lx-dur-state) var(--lx-ease),
                visibility 0s linear var(--lx-dur-state);
}

/* Sub-menu opens ONLY when the actual link element is hovered/focused — not
   when the cursor is on padding around it or in the gap between nav items.
   `:has(> .elementor-item:hover)` ensures the trigger is the link itself.
   The sub-menu also stays open while hovered itself, so cursor can travel
   from link → cards without flicker. */
[data-elementor-id="6974"] .elementor-nav-menu > .menu-item-has-children:has(> .elementor-item:hover) > .sub-menu,
[data-elementor-id="6974"] .elementor-nav-menu > .menu-item-has-children:has(> .elementor-item:focus) > .sub-menu,
[data-elementor-id="6974"] .elementor-nav-menu > .menu-item-has-children > .sub-menu:hover,
[data-elementor-id="6974"] .elementor-nav-menu > .menu-item-has-children > .sub-menu:focus-within {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity var(--lx-dur-state) var(--lx-ease);
}

/* Each sub-menu item = landscape image-above-label card.
   Image area: 360×240 (3:2). Label below, brand-grey, uppercase. */
[data-elementor-id="6974"] .elementor-nav-menu .sub-menu > li.menu-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 360px;
    text-align: center;
    transform: none !important;
}

[data-elementor-id="6974"] .elementor-nav-menu .sub-menu .elementor-sub-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--lx-space-3) !important;
    padding: 0 !important;
    font-family: var(--lx-font-sans) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: var(--lx-ink-primary) !important;
    background: transparent !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transform: none !important;
    transition: color var(--lx-dur-state) var(--lx-ease),
                border-bottom-color var(--lx-dur-state) var(--lx-ease) !important;
}

/* Hover ON the card → text stays grey, gets underline (no color shift, no shift down) */
[data-elementor-id="6974"] .elementor-nav-menu .sub-menu .elementor-sub-item:hover,
[data-elementor-id="6974"] .elementor-nav-menu .sub-menu .menu-item:hover > .elementor-sub-item {
    color: var(--lx-ink-primary) !important;
    background: transparent !important;
    transform: none !important;
}

/* Underline only the LABEL on hover — applied via inline-block span trick */
[data-elementor-id="6974"] .elementor-nav-menu .sub-menu .elementor-sub-item:hover {
    text-decoration: none !important;
}

[data-elementor-id="6974"] .elementor-nav-menu .sub-menu .elementor-sub-item::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background-color: var(--lx-ink-primary);
    transition: width var(--lx-dur-state) var(--lx-ease);
    margin-top: 4px;
    align-self: center;
}

[data-elementor-id="6974"] .elementor-nav-menu .sub-menu .elementor-sub-item:hover::after {
    width: 60%;
}

/* Image area above each sub-item label — landscape ratio (3:2) */
[data-elementor-id="6974"] .elementor-nav-menu .sub-menu .elementor-sub-item::before {
    content: "";
    display: block;
    width: 360px;
    height: 240px;
    background-color: var(--lx-pearl);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity var(--lx-dur-state) var(--lx-ease);
}

/* Per-item imagery (placeholder for now — swap URLs as real photography lands) */
[data-elementor-id="6974"] .menu-item-6994 .elementor-sub-item::before {
    background-image: url('/wp-content/uploads/woocommerce-placeholder.webp');
}
[data-elementor-id="6974"] .menu-item-7000 .elementor-sub-item::before,
[data-elementor-id="6974"] .menu-item-6995 .elementor-sub-item::before {
    background-image: url('/wp-content/uploads/woocommerce-placeholder.webp');
}
[data-elementor-id="6974"] .menu-item-6997 .elementor-sub-item::before {
    background-image: url('/wp-content/uploads/woocommerce-placeholder.webp');
}
[data-elementor-id="6974"] .menu-item-6998 .elementor-sub-item::before {
    background-image: url('/wp-content/uploads/woocommerce-placeholder.webp');
}

[data-elementor-id="6974"] .elementor-nav-menu .sub-menu .elementor-sub-item:hover::before {
    opacity: 0.92;
}

/* Hide submenu caret arrow */
[data-elementor-id="6974"] .elementor-nav-menu .sub-arrow,
[data-elementor-id="6974"] .elementor-nav-menu .e-fas-caret-down {
    display: none !important;
}

} /* end @media (min-width: 1025px) — legacy mega-menu scope */

/* ----------------------------------------------------------------
   CART — French Bloom-style shopping bag icon. No border, no €, color
   inherits via currentColor so the icon flips with nav-text scenarios.
   The price element is at .elementor-button-text > .woocommerce-Price-amount
   (NOT .elementor-menu-cart__subtotal — that selector was wrong).
   ---------------------------------------------------------------- */
html body [data-elementor-id="6974"] .elementor-menu-cart__toggle,
html body [data-elementor-id="6974"] .elementor-menu-cart__toggle .elementor-button,
html body [data-elementor-id="6974"] .elementor-menu-cart__toggle_button,
html body [data-elementor-id="6974"] a.elementor-menu-cart__toggle_button {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 8px !important;
    transform: none !important;
    color: var(--lx-canvas) !important;
    /* Color flows to the icon via currentColor */
}

/* Hide the price text — it's in .elementor-button-text > .woocommerce-Price-amount */
html body [data-elementor-id="6974"] .elementor-menu-cart__toggle .elementor-button-text,
html body [data-elementor-id="6974"] .elementor-menu-cart__toggle .woocommerce-Price-amount,
html body [data-elementor-id="6974"] .elementor-menu-cart__toggle .amount,
html body [data-elementor-id="6974"] .elementor-menu-cart__toggle .woocommerce-Price-currencySymbol,
html body [data-elementor-id="6974"] .elementor-menu-cart__subtotal {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide the WC default cart icon SVG */
html body [data-elementor-id="6974"] .elementor-menu-cart__toggle .elementor-button-icon i,
html body [data-elementor-id="6974"] .elementor-menu-cart__toggle .elementor-button-icon > svg {
    display: none !important;
}

/* Custom French Bloom-style shopping bag — 22x26, 1.6 stroke, currentColor */
html body [data-elementor-id="6974"] .elementor-menu-cart__toggle .elementor-button-icon {
    display: inline-block !important;
    width: 22px !important;
    height: 26px !important;
    position: relative !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 8 L5 23 Q5 24 6 24 L16 24 Q17 24 17 23 L17 8 Z'/><path d='M8 8 V5 Q8 2 11 2 Q14 2 14 5 V8'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    color: inherit !important;
}

/* Quantity bubble — color matches scenario, anchored to icon via parent's
   position: relative. */
html body [data-elementor-id="6974"] .elementor-menu-cart__toggle .elementor-button-icon-qty {
    background-color: var(--lx-canvas) !important;
    color: var(--lx-ink-primary) !important;
    font-family: var(--lx-font-sans) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    min-width: 16px !important;
    padding: 1px 4px !important;
    border-radius: 100px !important; /* pill (was 8px — semantic fix v1.7; cart qty bubble is true pill) */
    line-height: 1.4 !important;
    border: none !important;
    position: absolute !important;
    top: -4px !important;
    right: -8px !important;
}

/* Color follows nav-text scenario via inherited currentColor on the link
   (above) — but the icon background uses currentColor so it picks up the
   parent's `color` value. The parent button's `color` is set per scenario: */
html body [data-elementor-id="6974"] a.elementor-menu-cart__toggle_button {
    color: var(--lx-canvas) !important; /* SCENARIO 1 — ivory */
}

/* SCENARIO 2 + 3: header hovered → bag icon turns grey */
html body header.elementor.elementor-6974:hover a.elementor-menu-cart__toggle_button,
html body header.elementor.elementor-6974:focus-within a.elementor-menu-cart__toggle_button,
html body header.elementor.elementor-6974:has(*:hover) a.elementor-menu-cart__toggle_button,
html body header[data-elementor-id="6974"]:hover a.elementor-menu-cart__toggle_button,
html body body:not(.home) [data-elementor-id="6974"] a.elementor-menu-cart__toggle_button {
    color: var(--lx-ink-primary) !important;
}

html body body:not(.home) [data-elementor-id="6974"] a.elementor-menu-cart__toggle_button {
    color: var(--lx-ink-primary) !important;
}

/* Quantity bubble flips contrast on hover too */
html body header.elementor.elementor-6974:hover .elementor-button-icon-qty,
html body header.elementor.elementor-6974:focus-within .elementor-button-icon-qty,
html body header.elementor.elementor-6974:has(*:hover) .elementor-button-icon-qty,
html body body:not(.home) [data-elementor-id="6974"] .elementor-button-icon-qty {
    background-color: var(--lx-ink-primary) !important;
    color: var(--lx-canvas) !important;
}

/* Cart utility — small, ink-primary, no Elementor button chrome */
[data-elementor-id="6974"] .elementor-menu-cart__toggle {
    background: transparent !important;
    box-shadow: none !important;
}

[data-elementor-id="6974"] .elementor-menu-cart__toggle .elementor-button {
    background: transparent !important;
    color: var(--lx-ink-primary) !important;
    box-shadow: none !important;
    padding: var(--lx-space-2) !important;
    font-family: var(--lx-font-sans) !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}

[data-elementor-id="6974"] .elementor-menu-cart__toggle .elementor-button:hover {
    color: var(--text-primary) !important;   /* §B6 — cart hover = lang-switcher active grey (client 2026-06-23) */
    transform: none !important;
}

[data-elementor-id="6974"] .elementor-menu-cart__toggle .elementor-button-icon {
    font-size: 18px !important;
}

[data-elementor-id="6974"] .elementor-menu-cart__toggle .elementor-button-icon-qty {
    background-color: var(--lx-ink-primary) !important;
    color: var(--lx-canvas) !important;
    font-family: var(--lx-font-sans) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}

/* Hide the price-amount on the cart toggle — keep only the icon + qty bubble */
[data-elementor-id="6974"] .elementor-menu-cart__toggle .elementor-menu-cart__subtotal {
    display: none !important;
}

/* ==========================================================================
   16. SHOP — Kalium uses .lb-element-woocommerce-* product loop markup
   The loop blocks define their own typography via inline <style data-lb-style>.
   We need !important to win against inline. Editorial title + remove category link.
   ========================================================================== */

/* Product card title — bigger, bolder, brand serif */
.lb-element-woocommerce-product-title,
.lb-element-woocommerce-product-title a,
.lb-element-woocommerce-product-title .woocommerce-loop-product__link {
    font-family: var(--lx-font-serif) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
    color: var(--lx-ink-primary) !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .lb-element-woocommerce-product-title,
    .lb-element-woocommerce-product-title a {
        font-size: 22px !important;
    }
}

/* Hide product category link below title — duplicates the shop section */
.lb-element-woocommerce-product-category,
.woocommerce-page ul.products li.product .lb-element-woocommerce-product-category,
.product .posted_in,
.lb-element-woocommerce-product-meta .posted_in {
    display: none !important;
}

/* Add-to-Cart on shop loop (Kalium markup) — brand styling, override blue */
.lb-element-woocommerce-product-add-to-cart .button,
.lb-element-woocommerce-product-add-to-cart a.button,
.lb-element-woocommerce-product-add-to-cart button.button,
.lb-element-woocommerce-product-add-to-cart .ajax_add_to_cart {
    background-color: var(--lx-ink-primary) !important;
    color: var(--lx-canvas) !important;
    font-family: var(--lx-font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    padding: 12px 24px !important;
    border: none !important;
    border-radius: var(--lx-radius-sharp) !important;
    text-transform: uppercase !important;
    box-shadow: var(--lx-shadow-soft) !important;
    transition: background-color var(--lx-dur-state) var(--lx-ease),
                color var(--lx-dur-state) var(--lx-ease) !important;
}

.lb-element-woocommerce-product-add-to-cart .button:hover,
.lb-element-woocommerce-product-add-to-cart a.button:hover {
    background-color: var(--lx-cashmere) !important;
    color: var(--lx-ink-primary) !important;
    transform: none !important;
}

/* Spacing before footer on shop archive */
.post-type-archive-product .site-content,
.tax-product_cat .site-content,
.woocommerce-shop .site-content {
    padding-bottom: var(--lx-space-9) !important;
}

/* Hide product description on shop loop — full description belongs on PDP */
.lb-element-woocommerce-product-description {
    display: none !important;
}

/* ==========================================================================
   17. SINGLE PRODUCT — quantity controls (centered + spacing), tabs (filled
   active), reduced sub-head→content gap, remove "ivory wrapper" page bg
   ========================================================================== */

/* Remove the ivory page background — the product info is already in a card */
.single-product .site-content {
    background-color: transparent !important;
}

/* Quantity field — center horizontally relative to ADD TO CART button.
   Kalium adds +/- pseudo-buttons via CSS that can double-bind. We restyle
   into a clean centered group. */
.single-product .quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    margin-right: var(--lx-space-3);
}

.single-product .quantity input.qty {
    width: 80px;
    padding: 12px 8px;
    text-align: center;
    border: 1px solid var(--lx-cashmere);
    border-radius: var(--lx-radius-soft);
    font-family: var(--lx-font-sans);
    font-size: 16px;
    color: var(--lx-ink-primary);
    background-color: var(--lx-canvas);
    -moz-appearance: textfield;
}

.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Kalium's +/- pseudo-elements are rendered via the input's ::before/::after
   stack OR a wrapper. Common Kalium pattern uses .quantity::before / ::after.
   Lock pointer-events away from the swap-on-hover bug, normalize the visual.
   The double-step bug is fixed via JS in §21 below. */
.single-product .quantity .plus,
.single-product .quantity .minus,
.single-product .quantity::before,
.single-product .quantity::after {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-family: var(--lx-font-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--lx-ink-primary);
    background-color: var(--lx-pearl);
    border: 1px solid var(--lx-cashmere);
    border-radius: var(--lx-radius-soft);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--lx-dur-instant) var(--lx-ease);
    transform: none !important;
}

.single-product .quantity .plus:hover,
.single-product .quantity .minus:hover {
    background-color: var(--lx-cashmere) !important;
    color: var(--lx-canvas) !important;
    /* Prevent the icon-swap bug: stop transform/scale on hover */
    transform: none !important;
    /* Lock content so + stays + and - stays - */
    content: attr(data-symbol) !important;
}

/* Center the quantity + add-to-cart row */
.single-product form.cart {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: var(--lx-space-3);
}

/* Tabs — invert: active tab is filled ink-primary with canvas text;
   inactive tabs are dark on transparent (no underline). */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: none !important;
    margin-bottom: var(--lx-space-4) !important;
    padding: 0 !important;
    display: flex;
    gap: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: 1px solid var(--lx-cashmere) !important;
    border-radius: 0 !important;
    margin: 0 -1px 0 0 !important;
    padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: var(--lx-space-3) var(--lx-space-4) !important;
    font-family: var(--lx-font-sans) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--lx-ink-primary) !important;
    background-color: transparent !important;
    border-bottom: none !important;
    transition: background-color var(--lx-dur-state) var(--lx-ease),
                color var(--lx-dur-state) var(--lx-ease) !important;
    text-decoration: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background-color: var(--lx-ink-primary) !important;
    border-color: var(--lx-ink-primary) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--lx-canvas) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
    background-color: var(--lx-pearl) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active:hover {
    background-color: var(--lx-ink-primary) !important;
}

/* Tab panels — reduce gap between sub-headers and content text */
.woocommerce div.product .woocommerce-tabs .panel {
    padding-top: var(--lx-space-3) !important;
}

.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3,
.woocommerce div.product .woocommerce-tabs .panel h4 {
    margin-top: var(--lx-space-3) !important;
    margin-bottom: var(--lx-space-2) !important;
    font-family: var(--lx-font-serif) !important;
    color: var(--lx-ink-primary) !important;
}

.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol {
    margin-bottom: var(--lx-space-2) !important;
    font-family: var(--lx-font-serif) !important;
    line-height: 1.6;
    color: var(--lx-ink-primary);
}

.woocommerce div.product .woocommerce-tabs .panel p:last-child,
.woocommerce div.product .woocommerce-tabs .panel ul:last-child {
    margin-bottom: 0 !important;
}

/* EXPRESS CHECKOUT label inserted by lennox-fixes mu-plugin */
.lx-express-checkout-label {
    font-family: var(--lx-font-sans);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--lx-helper);
    margin: var(--lx-space-3) 0 var(--lx-space-2) 0;
    text-align: left;
}

/* Belt-and-suspenders SEPA hide on product + cart pages — covers DOM elements
   that PHP filters miss (e.g. dynamically rendered SEPA buttons). */
.single-product .ppcp-sepa-button,
.single-product [data-funding-source="sepa"],
.single-product .wc_payment_method.payment_method_ppcp-sepa-gateway,
.woocommerce-cart .ppcp-sepa-button,
.woocommerce-cart [data-funding-source="sepa"] {
    display: none !important;
}

/* ==========================================================================
   18. CART — bigger, less condensed font; brand "Proceed to checkout" button
   ========================================================================== */

.woocommerce-cart table.shop_table,
.woocommerce-cart table.shop_table td,
.woocommerce-cart table.shop_table th,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals table,
.woocommerce-cart .cart-collaterals .cart_totals table td,
.woocommerce-cart .cart-collaterals .cart_totals table th {
    font-family: var(--lx-font-sans) !important;
    font-size: 16px !important;
    letter-spacing: normal !important;
    line-height: 1.5 !important;
}

.woocommerce-cart table.shop_table th {
    font-family: var(--lx-font-sans) !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.woocommerce-cart table.shop_table .product-name a {
    font-family: var(--lx-font-serif) !important;
    font-size: 19px !important;
    font-weight: 500 !important;
}

/* Cart totals rows — clearer hierarchy */
.woocommerce-cart .cart_totals h2 {
    font-family: var(--lx-font-serif) !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    margin-bottom: var(--lx-space-4) !important;
}

.woocommerce-cart .cart_totals .cart-subtotal th,
.woocommerce-cart .cart_totals .shipping th,
.woocommerce-cart .cart_totals .tax-rate th,
.woocommerce-cart .cart_totals .order-total th {
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 16px !important;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* "Proceed to Checkout" button — override the blue currently coming from
   another layer (PayPal / Stripe / WC blocks). */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .button {
    background-color: var(--lx-ink-primary) !important;
    color: var(--lx-canvas) !important;
    font-family: var(--lx-font-sans) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    padding: 18px 36px !important;
    border: none !important;
    border-radius: var(--lx-radius-sharp) !important;
    box-shadow: var(--lx-shadow-soft) !important;
    text-decoration: none !important;
    display: block !important;
    text-align: center !important;
    transition: background-color var(--lx-dur-state) var(--lx-ease) !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--lx-cashmere) !important;
    color: var(--lx-ink-primary) !important;
    transform: none !important;
}

/* ==========================================================================
   19. CHECKOUT — readable order summary, larger Buy Now button
   ========================================================================== */

.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review table,
.woocommerce-checkout #order_review table td,
.woocommerce-checkout #order_review table th {
    font-family: var(--lx-font-sans) !important;
    font-size: 16px !important;
    letter-spacing: normal !important;
    line-height: 1.5 !important;
}

.woocommerce-checkout #order_review table th {
    font-weight: 500 !important;
    text-transform: none !important;
}

.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
    font-size: 18px !important;
    font-weight: 600 !important;
}

.woocommerce-checkout #order_review .product-name {
    font-family: var(--lx-font-serif) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
}

/* Place order / Buy now button — bigger text */
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order,
.woocommerce-checkout .wc-block-checkout__actions-row button {
    background-color: var(--lx-ink-primary) !important;
    color: var(--lx-canvas) !important;
    font-family: var(--lx-font-sans) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    padding: 20px 40px !important;
    border: none !important;
    border-radius: var(--lx-radius-sharp) !important;
    box-shadow: var(--lx-shadow-soft) !important;
    width: auto !important;
    transition: background-color var(--lx-dur-state) var(--lx-ease) !important;
}

.woocommerce-checkout #place_order:hover {
    background-color: var(--lx-cashmere) !important;
    color: var(--lx-ink-primary) !important;
}

/* ==========================================================================
   20. MY ACCOUNT — Edit Account
   - "Account details" page heading bigger (was using h1 via Kalium tiny)
   - Password change fieldset background matches other my-account boxes (pearl)
   - Legend ("Password change") less indented
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-content h1,
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content > .entry-title {
    font-family: var(--lx-font-serif) !important;
    font-size: 36px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: var(--lx-ink-primary) !important;
    margin-bottom: var(--lx-space-4) !important;
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-content h1,
    .woocommerce-account .woocommerce-MyAccount-content > h2,
    .woocommerce-account .woocommerce-MyAccount-content > .entry-title {
        font-size: 28px !important;
    }
}

/* Password change fieldset — match other my-account boxes (pearl bg, same as
   sidebar nav). Legend less indented (per feedback). */
.woocommerce-account .edit-account fieldset {
    background-color: var(--lx-pearl) !important;
    border: 1px solid var(--lx-cashmere) !important;
    border-radius: var(--lx-radius-card) !important;
    padding: var(--lx-space-4) !important;
}

.woocommerce-account .edit-account fieldset legend {
    padding: 0 !important;
    margin-left: 0 !important;
    font-family: var(--lx-font-serif) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: var(--lx-ink-primary) !important;
}

/* ==========================================================================
   21. JS-FREE FIX for Kalium quantity +/- step=2 bug
   The double-increment is caused by Kalium's woocommerce.js binding a click
   handler that already exists (WC's own .quantity script). We strip Kalium's
   pseudo-button overlay via CSS by hiding ::before/::after, then enqueue our
   own clean +/- buttons via JS in functions.php (added separately).
   For now: hide Kalium's pseudo-overlay so only WC's native input remains.
   The user can use the keyboard arrows or the native spinner reliably until
   the JS replacement is loaded.
   ========================================================================== */
/* Override Kalium's hover icon swap — lock content of pseudo-elements */
.single-product .quantity::before,
.single-product .quantity::after {
    pointer-events: none;
}

/* If Kalium renders custom .plus/.minus buttons inside .quantity, lock their
   content + behavior so they don't change on hover. */
.single-product .quantity .plus::before,
.single-product .quantity .minus::before,
.single-product .quantity .plus::after,
.single-product .quantity .minus::after {
    transform: none !important;
    transition: none !important;
}

.single-product .quantity .plus {
    order: 3;
}
.single-product .quantity input.qty {
    order: 2;
    margin: 0 var(--lx-space-2);
}
.single-product .quantity .minus {
    order: 1;
}

/* ==========================================================================
   22. HEADER ROUND 4 — feedback-driven hardening
   - Sub-menu opens ONLY when hovering link element (not gap), stays open
     when cursor moves into sub-menu (handled in §15 above)
   - Sub-menu IVORY edge-to-edge (handled in §15)
   - Aggressive transform/transition removal on every interactive element
     so NOTHING moves on hover (the underline grows below the text without
     shifting baseline; cards don't translate; logo doesn't scale)
   - Wordmark image inside its slot — center it and limit max-height so it
     doesn't overflow the band
   - Tighter rules to win against Elementor / Kalium hover styles that
     translate / scale on hover
   ========================================================================== */

/* Wordmark image cell — strict center, no transform on hover (Elementor's
   default image hover-scale would otherwise re-center). */
header.elementor.elementor-6974 [data-id="7368b9e"] {
    text-align: center !important;
    min-width: 240px;
}

header.elementor.elementor-6974 [data-id="7368b9e"] .elementor-widget-image {
    width: auto;
    text-align: center;
}

header.elementor.elementor-6974 [data-id="7368b9e"] .elementor-widget-image img {
    display: inline-block;
    width: 176px !important;        /* §B3 logo −20%: 220→176 */
    max-width: 176px !important;
    height: auto !important;
    max-height: 45px !important;    /* §B3 logo −20%: 56→45 */
    object-fit: contain;
    transition: opacity var(--lx-dur-state) var(--lx-ease) !important;
    transform: none !important;
}

@media (max-width: 768px) {
    header.elementor.elementor-6974 [data-id="7368b9e"] .elementor-widget-image img {
        width: 128px !important;        /* §B3 logo −20%: 160→128 */
        max-width: 128px !important;
        max-height: 35px !important;    /* §B3 logo −20%: 44→35 */
    }
}

/* Nav items — ZERO movement on hover. Padding is constant. The underline
   appears below the text via border-bottom that swaps from transparent to
   grey. Letter-spacing/transforms locked to prevent reflow. */
header.elementor.elementor-6974 .elementor-nav-menu .elementor-item {
    transform: none !important;
    transition: color var(--lx-dur-state) var(--lx-ease),
                border-bottom-color var(--lx-dur-state) var(--lx-ease) !important;
    /* lock vertical position by ensuring border-bottom always exists (just transparent) */
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    /* prevent Elementor pointer animations from translating the link */
    position: relative !important;
}

header.elementor.elementor-6974 .elementor-nav-menu .elementor-item::before,
header.elementor.elementor-6974 .elementor-nav-menu .elementor-item::after {
    /* Disable Elementor's pointer animation pseudo-elements that would
       otherwise translate / scale on hover. Our underline uses border-bottom. */
    transform: none !important;
    transition: none !important;
    display: none !important;
}

/* Sub-menu cards — ZERO movement on hover. The animated underline below the
   label is the only thing that changes. */
header.elementor.elementor-6974 .elementor-nav-menu .sub-menu .elementor-sub-item,
header.elementor.elementor-6974 .elementor-nav-menu .sub-menu li {
    transform: none !important;
    transition: color var(--lx-dur-state) var(--lx-ease) !important;
}

header.elementor.elementor-6974 .elementor-nav-menu .sub-menu .elementor-sub-item:hover,
header.elementor.elementor-6974 .elementor-nav-menu .sub-menu li:hover {
    transform: none !important;
}

/* Sub-menu image area — also no scale on hover */
header.elementor.elementor-6974 .elementor-nav-menu .sub-menu .elementor-sub-item::before {
    transform: none !important;
    transition: opacity var(--lx-dur-state) var(--lx-ease) !important;
}

header.elementor.elementor-6974 .elementor-nav-menu .sub-menu .elementor-sub-item:hover::before {
    transform: none !important;
}

/* Hover bg → ivory must win on EVERY page (not just home), and the
   selector strength is bumped so Elementor's defaults don't beat it. */
html body header.elementor.elementor-6974:hover,
html body header.elementor.elementor-6974:focus-within,
html body header.elementor.elementor-6974:has(*:hover),
html body header[data-elementor-id="6974"]:hover,
html body header[data-elementor-id="6974"]:focus-within,
html body header[data-elementor-id="6974"]:has(*:hover) {
    background-color: var(--lx-canvas) !important;
}

/* SUBPAGES (non-home) — default state already grey on ivory; on hover of a
   nav item, the hovered item gets the underline (color stays grey). The rule
   below makes the hover trigger work even where Kalium's parent nav-menu CSS
   tries to override colors. */
body:not(.home) header.elementor.elementor-6974 .elementor-nav-menu .elementor-item:hover {
    border-bottom-color: var(--lx-ink-primary) !important;
    color: var(--lx-ink-primary) !important;
}

body:not(.home) header.elementor.elementor-6974 .elementor-nav-menu > .menu-item-has-children:has(> .elementor-item:hover) > .sub-menu,
body:not(.home) header.elementor.elementor-6974 .elementor-nav-menu > .menu-item-has-children > .sub-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Sub-menu container needs explicit ivory bg even when scoped to subpages */
body:not(.home) header.elementor.elementor-6974 .elementor-nav-menu .sub-menu {
    background-color: var(--lx-canvas) !important;
}

/* ==========================================================================
   23. POPOUT — fix vertical-jump when cursor moves from nav text to popout.
   Root cause: brief un-hover state during cursor transit triggers fade-out,
   then .sub-menu:hover triggers fade-in. To prevent perceived movement:
   - Generous transition delay on close (so brief transit doesn't trigger)
   - Hover bridge: parent menu-item-has-children::after pseudo-element
     extends a transparent strip from below the link to the top of the
     popout, so cursor never leaves a hover state during transit.
   - Position is locked: top: 100% on .sub-menu, NO transform-Y change,
     NO margin shifts on the visible/hidden state.
   ========================================================================== */

/* Hover bridge — invisible strip below each parent <li> link, sized to span
   from link bottom to where the popout starts (header bottom). Catches the
   cursor during transit so :has(> .elementor-item:hover) keeps firing. */
header.elementor.elementor-6974 .elementor-nav-menu > .menu-item-has-children > .elementor-item {
    position: relative !important;
}

header.elementor.elementor-6974 .elementor-nav-menu > .menu-item-has-children > .elementor-item::before {
    content: "";
    position: absolute;
    left: -20px;
    right: -20px;
    bottom: -28px;  /* extends down to where popout begins */
    height: 28px;
    background: transparent;
    pointer-events: auto;
    z-index: 50;
}

/* Generous close-delay — popout stays visible during cursor transit */
header.elementor.elementor-6974 .elementor-nav-menu .sub-menu {
    transition: opacity 240ms var(--lx-ease) 0ms,
                visibility 0s linear 360ms !important;
}

header.elementor.elementor-6974 .elementor-nav-menu > .menu-item-has-children:has(> .elementor-item:hover) > .sub-menu,
header.elementor.elementor-6974 .elementor-nav-menu > .menu-item-has-children > .sub-menu:hover,
header.elementor.elementor-6974 .elementor-nav-menu > .menu-item-has-children > .sub-menu:focus-within {
    transition: opacity 200ms var(--lx-ease) 0ms !important;
}

/* Lock popout position — no transform-Y, no margin-top shifts */
header.elementor.elementor-6974 .elementor-nav-menu .sub-menu,
header.elementor.elementor-6974 .elementor-nav-menu > .menu-item-has-children:has(> .elementor-item:hover) > .sub-menu,
header.elementor.elementor-6974 .elementor-nav-menu > .menu-item-has-children > .sub-menu:hover {
    transform: translateX(-50%) !important;  /* no Y component */
    margin-top: 0 !important;  /* zero gap between header bottom and popout top */
    top: 100% !important;
}

/* The 1px hairline gap between header and popout — eliminate by making the
   popout's top border merge into the header bottom (no border, no margin). */
header.elementor.elementor-6974 .elementor-nav-menu .sub-menu {
    border-top: none !important;
}

/* Ensure logo is centered horizontally on the page even if the empty
   right-column container collapses for any reason — the actual logo image
   has fixed width 220px so we use margin auto on the container as fallback. */
header.elementor.elementor-6974 [data-id="7368b9e"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   24. FOOTER (template 6120) — Optima Pro on all content links + symmetric
   left/right edge spacing.
   Kalium parent applies its own anchor styling that overrides the
   text-editor widget's Optima Pro setting. Force-override here so every
   anchor inside footer text-editors uses Optima Pro at the link level too.
   ========================================================================== */

[data-elementor-id="6120"] .elementor-widget-text-editor,
[data-elementor-id="6120"] .elementor-widget-text-editor p,
[data-elementor-id="6120"] .elementor-widget-text-editor a,
[data-elementor-id="6120"] .elementor-widget-text-editor span {
    font-family: var(--lx-font-sans) !important; /* Optima Pro */
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/* Remove Kalium's underline-on-link default — restore on hover only */
[data-elementor-id="6120"] .elementor-widget-text-editor a {
    color: var(--lx-ink-primary) !important;
    text-decoration: none !important;
    transition: color var(--lx-dur-state) var(--lx-ease) !important;
}

[data-elementor-id="6120"] .elementor-widget-text-editor a:hover {
    color: var(--lx-cashmere) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
}

/* Section headings already use Optima Pro — make sure Kalium parent doesn't
   override them either. */
[data-elementor-id="6120"] .elementor-widget-heading h1,
[data-elementor-id="6120"] .elementor-widget-heading h2,
[data-elementor-id="6120"] .elementor-widget-heading h3,
[data-elementor-id="6120"] .elementor-widget-heading h4,
[data-elementor-id="6120"] .elementor-widget-heading .elementor-heading-title {
    font-family: var(--lx-font-sans) !important; /* Optima Pro */
}

/* ==========================================================================
   25. DESIGN COMPONENTS (gap templates)
   Component classes from the 2026-05-11 design system that the 37 customized
   lx_* templates don't cover. Each Elementor section template applies a class
   from this section to its wrapper container; layout structure lives in the
   template JSON, visual styling lives here.
   ========================================================================== */

/* §25.1 — Eyebrow tag (inline uppercase; left-aligned with main headers)
   v1.7: removed ::before leading rule per client correction 2026-05-12 —
   design AI's spec had a 32px leading horizontal rule that pushed the eyebrow
   text right of the main heading's left edge below. The latest client
   examples have this fixed (left-alignment); design AI failed to update the
   shipped CSS. Brand canon: eyebrow text starts at container left, aligned
   with the H1/H2 below it. */
.lx-eyebrow-tag {
    display: inline-block;
    font-family: var(--lx-font-sans);
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* a11y (2026-06-25): the eyebrow-tag inside the dark "order" CTA container
   (#3D3935, Elementor element 219e8d9d on the Sparkling Rosé creation page 6194)
   inherits --text-secondary (#5C544C) → 1.54:1, fails WCAG AA. Cashmere lifts it
   to ~5.1:1. The Elementor element ID is WPML-stable, so this covers EN + DE. */
.elementor-element-219e8d9d .lx-eyebrow-tag { color: var(--lx-cashmere, #B5ACA3); }

/* SITEFIX SF-06 — Our Creations hero: reduce the gap before the image grid and
   keep the hero/card headers top-aligned. Elementor element IDs are stable in
   the local export and WPML clones. */
.elementor-element-d0709ff9 {
    justify-content: flex-start;
    padding-top: 128px !important;
    padding-bottom: 40px !important;
}

.elementor-element-a714e325 {
    align-items: flex-start;
    padding-top: 24px !important;
}

.elementor-element-fe0400b2,
.elementor-element-4c8130ff {
    align-self: flex-start;
    justify-content: flex-start;
}

@media (max-width: 1024px) {
    .elementor-element-d0709ff9 {
        padding-top: 96px !important;
        padding-bottom: 32px !important;
    }

    .elementor-element-a714e325 {
        padding-top: 16px !important;
    }
}

@media (max-width: 767px) {
    .elementor-element-d0709ff9 {
        padding-top: 72px !important;
        padding-bottom: 24px !important;
    }
}

/* §25.2 — Soft card (Pearl-50% bg, 12px radius, no border) */
.lx-soft {
    background: rgba(232, 227, 220, 0.5); /* Pearl @ 50% — alpha rgba per design */
    border: 0;
    border-radius: var(--r-soft-card, 12px);
    transition: background var(--dur-2) var(--ease-quiet),
                transform var(--dur-2) var(--ease-quiet),
                box-shadow var(--dur-2) var(--ease-quiet);
}
.lx-soft--inset {
    padding: var(--s-6, 32px);
}
.lx-soft--hover:hover {
    background: var(--surface-secondary);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(61, 57, 53, 0.08);
}

/* §25.3 — Format toggle (PDP single-bottle vs case row) */
.lx-format-toggle {
    display: flex;
    gap: var(--s-3, 12px);
    align-items: stretch;
}
.lx-format-toggle .elementor-button {
    flex: 1;
    padding: 10px 18px !important;
    border: 1px solid var(--text-primary) !important;
    background: transparent !important;
    color: var(--text-primary) !important;
}
.lx-format-toggle .elementor-button.selected,
.lx-format-toggle .elementor-button[aria-pressed="true"] {
    background: var(--surface-inverse) !important;
    color: var(--text-inverse) !important;
}

/* §25.4 — Recipe card (2-col grid: image left, ingredients+method right) */
.lx-recipe-card {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--s-7, 48px);
    align-items: center;
}
@media (max-width: 768px) {
    .lx-recipe-card {
        grid-template-columns: 1fr;
        gap: var(--s-5, 24px);
    }
}
.lx-recipe-card__name {
    font-family: var(--font-display, var(--lx-font-serif));
    font-weight: 600;
    font-size: 40px;
    line-height: 1.1;
    margin: 0 0 18px;
    color: var(--text-primary);
}
.lx-recipe-card__ingredients {
    list-style: none;
    padding: 18px 0 0 0;
    margin: 0 0 24px 0;
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--border-subtle);
}
.lx-recipe-card__ingredients li {
    font-family: var(--lx-font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    display: flex;
    gap: 14px;
    margin: 0;
}
.lx-recipe-card__ingredients li::before {
    content: "";
    flex: 0 0 6px;
    height: 1px;
    background: var(--border-subtle);
    margin-top: 11px;
}
.lx-recipe-card__method {
    font-family: var(--lx-font-serif);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

/* §25.5 — Editorial card (Creations hub — image top + heading) */
.lx-editorial-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-4, 16px); /* 20px in design = ~--s-4+2; close enough */
    border: 0;
    padding: 0;
    text-decoration: none;
    color: var(--text-primary);
}
.lx-editorial-card .elementor-image,
.lx-editorial-card .lx-editorial-image {
    aspect-ratio: 4 / 5;
    border-radius: var(--r-1, 2px);
    background: var(--surface-secondary); /* fallback while image loads */
    overflow: hidden;
    transition: background var(--dur-2) var(--ease-quiet);
}
.lx-editorial-card:hover h3,
.lx-editorial-card:hover .elementor-heading-title {
    color: var(--text-secondary);
    transition: color var(--dur-1) var(--ease-quiet);
}


/* §25.6 — Image-slot placeholder label (per Phase-5 critique Fix B)
   Shown as a caption under placeholder images to signal "needs photo here"
   with a description of the intended composition. Matches design's
   .placeholder-label visual treatment from the editorial-image system. */
.lx-image-slot-label {
    display: inline-block;
    font-family: var(--lx-font-sans);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(61, 57, 53, 0.45);
    text-align: center;
    padding: 12px 16px;
    max-width: 60ch;
    margin: 0 auto;
}
/* Caption rendering for labeled editorial-image widgets */
.lx-editorial-image--labeled .elementor-widget-container > figure {
    margin: 0;
}
.lx-editorial-image--labeled figcaption {
    margin-top: 12px;
    text-align: center;
}


/* §25.6.b — Image-slot label overlay variant (v1.7)
   For hero-prominence image slots, overlay the label INSIDE the image instead
   of below (figcaption). Wrap the image+caption in a container with class
   .lx-editorial-image--labeled--overlay and the caption renders centered
   inside the image area. Matches design's .placeholder-label inset pattern. */
.lx-editorial-image--labeled--overlay .elementor-widget-container {
    position: relative;
}
.lx-editorial-image--labeled--overlay figcaption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    pointer-events: none;
    padding: 24px;
}

/* §25.7 — Button modifiers (.btn--primary / --secondary / --tertiary / --block)
   v1.7: ports design's lennox.css button classes for Elementor button widgets
   that carry a _css_classes value like 'btn--primary'. Required to honor brand
   button system across all Phase 5 rebuilt pages. Specificity bumped to
   .elementor-widget-button .elementor-button.btn--X to win against Elementor
   button defaults — !important reserved for cases where Elementor inline-style
   competes (rare on these classes). */
.elementor-widget-button .elementor-button.btn--primary {
    background-color: var(--surface-inverse);  /* §1b primary FILLED (client 2026-06-23 — supersedes earlier outline) */
    color: var(--text-inverse);
    border: 1px solid var(--surface-inverse);
    border-radius: var(--r-1);
    font-family: var(--lx-font-sans);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 16px 36px;
    min-height: 48px;
    transition: background-color var(--dur-2) var(--ease-quiet),
                color var(--dur-2) var(--ease-quiet),
                transform var(--dur-2) var(--ease-quiet),
                box-shadow var(--dur-2) var(--ease-quiet);
}
.elementor-widget-button .elementor-button.btn--primary:hover {
    background-color: var(--surface-inverse);  /* §1b primary stays FILLED, lifts on hover */
    color: var(--text-inverse);
    border-color: var(--surface-inverse);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(61, 57, 53, 0.24);
}
.elementor-widget-button .elementor-button.btn--secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--text-primary);
    border-radius: var(--r-1);
    font-family: var(--lx-font-sans);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 16px 36px;
    min-height: 48px;
    transition: background-color var(--dur-2) var(--ease-quiet),
                color var(--dur-2) var(--ease-quiet),
                transform var(--dur-2) var(--ease-quiet),
                box-shadow var(--dur-2) var(--ease-quiet);
}
.elementor-widget-button .elementor-button.btn--secondary:hover {
    background-color: var(--surface-inverse);
    color: var(--text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(61, 57, 53, 0.14);
}
.elementor-widget-button .elementor-button.btn--tertiary {
    background-color: transparent;
    color: var(--text-primary);
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    padding: 8px 0;
    min-height: 0;
    font-family: var(--lx-font-sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color var(--dur-1) var(--ease-quiet),
                border-color var(--dur-1) var(--ease-quiet);
}
.elementor-widget-button .elementor-button.btn--tertiary:hover {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}
.elementor-widget-button .elementor-button.btn--block {
    width: 100%;
}
/* On-dark variant — for inverse-bg CTAs (Sparkling Rosé + Serve & Pairings CTAs) */
.elementor-widget-button .elementor-button.btn--on-dark.btn--primary {
    background-color: var(--surface-primary); /* Ivory bg on Grey section */
    color: var(--text-primary);                /* Grey text */
    border-color: var(--surface-primary);
}
.elementor-widget-button .elementor-button.btn--on-dark.btn--primary:hover {
    background-color: var(--lx-pearl);
    border-color: var(--lx-pearl);
}
.elementor-widget-button .elementor-button.btn--on-dark.btn--tertiary {
    color: var(--text-inverse);
    border-bottom-color: rgba(250, 247, 244, 0.4);
}
.elementor-widget-button .elementor-button.btn--on-dark.btn--tertiary:hover {
    color: var(--text-inverse);
    border-bottom-color: var(--text-inverse);
}

/* §25.7b — Home bordered CTAs hover-text fix (client 2026-06-23). The DISCOVER /
   EXPLORE / CONTACT buttons (element IDs shared by EN home 6029 + DE home 7394) carry
   an Elementor dark hover background (#3D3935) but Elementor does NOT emit a hover TEXT
   colour — button_hover_color (#FAF7F4) is in _elementor_data yet absent from the
   generated post-6029.css — so the rest dark text (#3D3935) bleeds into the hover state
   → dark-on-dark (illegible). Force ivory hover/focus text via !important: Elementor's rest
   colour rule (.elementor-6029 .elementor-element.elementor-element-XXX .elementor-button) is
   specificity (0,4,0) and its :hover rule emits no colour, so the rest dark colour bleeds into
   hover; a plain (0,2,1) override can't win, hence !important (Elementor's colour is not !important). */
.elementor-element-4e459bd6 .elementor-button:hover,
.elementor-element-4e459bd6 .elementor-button:focus,
.elementor-element-dfca8c45 .elementor-button:hover,
.elementor-element-dfca8c45 .elementor-button:focus,
.elementor-element-4b3210f6 .elementor-button:hover,
.elementor-element-4b3210f6 .elementor-button:focus {
    color: var(--lx-ivory) !important;
}

/* §25.8 — Section pearl (used widely on hero/intro section containers via
   _css_classes). v1.7: was previously a dead class — visual rendered because
   the page also set background_color globally. Define here so the class is
   semantically meaningful + future page authors can use it directly. */
.section--pearl {
    background-color: var(--lx-pearl);
}
/* §B18 — How-to-Serve (6366): pin sections II + IV to ivory so the page alternates
   pearl/ivory/pearl/ivory/pearl (client 2026-06-23). These two carried an Elementor
   GLOBAL pearl color ref (--e-global-color-pearl) that overrode the per-element bg, so
   a scoped !important is the reliable override; I/III/V render pearl via direct bg. */
.elementor-element-e1ff8a75,
.elementor-element-d3bda33d { background-color: #FAF7F4 !important; }

/* §25.9 — MyAccount inline-hover migration (Phase 6.A.3, 2026-05-12).
   Replaces 18 inline onmouseover/onmouseout attribute pairs in
   kalium-child/woocommerce/myaccount/{dashboard,my-address,orders,payment-methods}.php
   with CSS :hover rules. Inline-JS event handlers were an anti-pattern (no
   listener cleanup, breaks CSP). All hover behaviour preserved verbatim. This
   block is interim styling that will be subsumed by §25.18 .lx-account-grid +
   §25.19 .lx-acct-nav in Phase 6.G.2 (full design pass on My Account). */

/* Primary buttons on MyAccount (dashboard, my-address edit, payment-methods add,
   orders empty-state browse, pagination prev/next). All share same hover. */
.woocommerce-MyAccount-content .lennox-dashboard-button:hover,
.woocommerce-MyAccount-content .lennox-add-payment-button:hover,
.woocommerce-MyAccount-content .lennox-edit-button:hover,
.woocommerce-MyAccount-content .woocommerce-pagination .woocommerce-button:hover,
.woocommerce-MyAccount-content .empty-state-cta:hover {
    background-color: #B5ACA3 !important;
    color: #3D3935 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(61, 57, 53, 0.15) !important;
}

/* Order table row hover */
.woocommerce-orders-table__row:hover {
    background-color: #FAF7F4 !important;
}

/* Order-action buttons inside orders table (View / Pay / Cancel) — slightly
   lighter lift than full-size primaries */
.woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-orders-table__cell-order-actions .woocommerce-button:hover {
    background-color: #B5ACA3 !important;
    color: #3D3935 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(61, 57, 53, 0.15) !important;
}

/* Payment-method action buttons — non-destructive (set-default, edit) */
.woocommerce-MyAccount-content .lennox-action-button:hover {
    background-color: #FAF7F4 !important;
    border-color: #3D3935 !important;
}

/* Payment-method action buttons — destructive (delete) */
.woocommerce-MyAccount-content .lennox-action-button.delete:hover {
    background-color: #FFCDD2 !important;          /* light-red surface; no brand-token alias yet */
    border-color: var(--error) !important;         /* v2 #8A3D3D (was hardcoded #C62828) */
}

/* View-order card hover (lennox-order-header, -order-items, -address-card)
   — added 2026-05-12 Phase 6.A.5 alongside view-order.php inline-JS removal. */
.lennox-order-header,
.lennox-order-items,
.lennox-address-card {
    transition: all 0.3s ease;
}
.lennox-order-header:hover,
.lennox-order-items:hover,
.lennox-address-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(61, 57, 53, 0.12) !important;
    border-color: #B5ACA3 !important;
}

/* §25.10 — Neutralize KaliumIcons font on 8 WC pseudo-elements (Phase 6.B.2,
   2026-05-12). Kalium parent's woocommerce.min.css injects icon glyphs via
   `font-family: KaliumIcons; content: '\xxx'` on these selectors — off-brand
   icon font with hardcoded glyphs. CSS audit §1.6 flagged all 8. Approach:
   `content: none` removes the parent-injected glyph entirely. Phase 6.E /
   6.F / 6.G will replace these decorations with inline-SVG icons when the
   relevant WC surface gets its design pass (cart, checkout, account); until
   then the lack of icon is acceptable (no visual regression — the underlying
   button/notice text is still legible). */
.woocommerce-error:before,
.woocommerce-info:before,
.woocommerce-MyAccount-navigation-link a:before,
.woocommerce-cart-form .shop_table td.actions [name="update_cart"]:before,
.cart-collaterals .wc-proceed-to-checkout a:after,
.checkout-steps__list-entry:after,
.woocommerce-order-pay #order_review .shop_table tfoot tr:first-child td:after {
    content: none !important;
}

/* Cart remove (x) — Kalium parent uses background-image with hardcoded #222.
   Keep the SVG glyph but swap the colour-bearing token to brand grey via
   background-color. Same approach as the WC-blocks bridge below. */
.woocommerce-cart-form .shop_table .cart_item .product-remove .remove {
    background-color: var(--lx-ink-primary) !important;
}

/* §25.15..§25.17 RESERVED:
     §25.15 .lx-form-row        — Phase 6.G (2-col/3-col form-row grid)
     §25.16 .lx-qty             — Phase 6.D (quantity stepper, replaces §21)
     §25.17 .lx-tag             — Phase 6.D (PDP dietary pills + status badges)
     §25.18 .lx-disclosure      — Phase 6.D (PDP accordion <details>) */

/* §25.18 — Login card (Phase 6.G.5, 2026-05-12).
   /login/ page (post 7291) renders [woocommerce_my_account] inside a 520px
   centered narrow column. Per design spec §5.12. */
.lx-login-card-wrap .woocommerce-form-login,
.lx-login-card-wrap .woocommerce-form-register {
    background: rgba(232, 227, 220, 0.5);
    border: 0;
    border-radius: 12px;
    padding: 48px 44px;
    font-family: var(--font-serif);
}
.lx-login-card-wrap .woocommerce-form-login label,
.lx-login-card-wrap .woocommerce-form-register label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    display: block;
    margin-bottom: 6px;
}
.lx-login-card-wrap .woocommerce-form-login input[type="text"],
.lx-login-card-wrap .woocommerce-form-login input[type="email"],
.lx-login-card-wrap .woocommerce-form-login input[type="password"],
.lx-login-card-wrap .woocommerce-form-register input[type="text"],
.lx-login-card-wrap .woocommerce-form-register input[type="email"],
.lx-login-card-wrap .woocommerce-form-register input[type="password"] {
    width: 100%;
    background: var(--lx-ivory);
    border: 1px solid var(--lx-cashmere);
    border-radius: 2px;
    min-height: 48px;
    padding: 13px 14px;
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--text-primary);
    transition: border-color 280ms cubic-bezier(0.32, 0.72, 0.26, 1), box-shadow 280ms cubic-bezier(0.32, 0.72, 0.26, 1);
}
.lx-login-card-wrap .woocommerce-form-login input:focus,
.lx-login-card-wrap .woocommerce-form-register input:focus {
    outline: 2px solid var(--lx-rose-500);
    outline-offset: 0;
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(61, 57, 53, 0.1);
}
.lx-login-card-wrap .woocommerce-form-login button[type="submit"],
.lx-login-card-wrap .woocommerce-form-register button[type="submit"] {
    background: var(--lx-grey) !important;
    color: var(--lx-ivory) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border-radius: 2px !important;
    padding: 18px 36px !important;
    border: 0 !important;
    width: 100% !important;
    margin-top: 8px !important;
    text-transform: uppercase !important;   /* §1b — capitalised */
    letter-spacing: 0.06em !important;
}
.lx-login-card-wrap .woocommerce-form-login__rememberme {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-secondary);
}
.lx-login-card-wrap .lost_password a {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--lx-cashmere);
    text-decoration: none;
}

/* §25.19 — MyAccount layout (Phase 6.G.1, 2026-05-12).
   Page 58 has Elementor canvas: hero (.lx-acct-page-header) + shell (.lx-acct-shell)
   with [woocommerce_my_account] shortcode inside. Style the WC-shortcode output
   per design spec §5.2 — 2-col grid 240px sidebar + main, gap 64px, 980px canvas. */

.lx-acct-page-header {
    border-bottom: 1px solid var(--lx-cashmere);
}

/* Style the WC My Account nav links (Kalium parent provides layout via
   `.woocommerce-MyAccount-navigation-wrapper`; we only adjust visuals — NO
   layout/grid CSS to avoid the 240px-column regression we saw in M4 attempt 1
   where a broader selector squeezed nested .woocommerce profile widgets). */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 14px 18px;
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-radius: 8px;
    text-decoration: none;
    border: 0;
    transition: all 280ms cubic-bezier(0.32, 0.72, 0.26, 1);
}
body.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
    color: var(--text-primary);
    background: rgba(232, 227, 220, 0.35);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--current a {
    color: var(--text-primary) !important;
    background: rgba(232, 227, 220, 0.6) !important;
}

/* Main content area typography (no layout changes) */
body.woocommerce-account .woocommerce-MyAccount-content {
    font-family: var(--font-serif);
    color: var(--text-primary);
}
body.woocommerce-account .woocommerce-MyAccount-content h1,
body.woocommerce-account .woocommerce-MyAccount-content h2 {
    font-family: var(--font-display);
    color: var(--text-primary);
}
body.woocommerce-account .woocommerce-MyAccount-content h2 {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 24px;
}

/* Note: design spec §5.2 240px-sidebar + 1fr-main grid is deferred to GH #5
   M2.5 polish — requires careful Kalium-Builder-compatible approach since
   Kalium parent wraps .woocommerce-MyAccount-* in its own
   .woocommerce-MyAccount-wrapper + .navigation-wrapper structure that
   contains additional Kalium widgets (user-profile) that broke under our
   first naive grid attempt. */


/* §25.20 — WC-Blocks brand bridge (Path α, Phase 6.B.5, 2026-05-12).
   Beats WC-Blocks injected !important floors per CSS audit §1.4 + §1.7 + §1.8.
   These rules apply to the Cart Block + Checkout Block on pages 56 + 6947 —
   the blocks stay in post_content; brand styling acts through these selectors. */
.wc-block-components-notice-banner > .wc-block-components-button {
    color: var(--lx-ink-primary) !important;
}
.wc-block-components-notice-banner.is-success {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}
.wc-block-components-notice-banner.is-success > svg {
    flex: 0 0 24px !important;
    margin: 0 !important;
    position: static !important;
}
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-left: 0 !important;
}
.wc-block-components-form input,
.wc-block-components-form textarea,
.wc-block-components-form select {
    color: var(--lx-ink-primary) !important;
    background: var(--lx-ivory) !important;
    border-color: var(--lx-cashmere) !important;
}
.wc-block-checkout__shipping-method-container,
.wc-block-checkout__payment-method {
    border-radius: var(--lx-radius-soft) !important;
}
/* Elementor checkout-widget Order Review CSS variable defaults — set at :root
   instead of overriding per-property */
.elementor-widget-woocommerce-checkout-page .woocommerce .e-checkout__order_review-2 {
    --sections-background-color: var(--lx-ivory);
    --sections-border-color: var(--lx-cashmere);
    --sections-border-radius: 0;
}

/* §25.21 — Germanized brand bridge (Phase 6.B.5, 2026-05-12).
   Germanized injects inline CSS on .wc-gzd-checkout selectors (per CSS audit
   §1.3). Override the off-brand #EEEEEE order-summary surface with brand
   pearl. */
.wc-gzd-checkout .wc-block-components-order-summary,
.wc-gzd-checkout .wc-block-components-order-summary.is-large {
    background-color: var(--lx-pearl) !important;
    padding: var(--lx-space-4) !important;
}

/* §25.11 — Cart hero (Phase 6.E.1, 2026-05-12).
   Brand chrome injected above the WC Cart Block via `woocommerce_before_main_content`
   action in functions.php. Renders on /cart/ only.
   Per design spec §3.1. */
.lx-cart-hero {
    background: var(--lx-ivory);
    border-bottom: 0;
}
.lx-cart-hero .lx-eyebrow {
    margin: 0 0 14px 0;
}
.lx-cart-hero__title {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 14px 0;
}
.lx-cart-hero__subhead {
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
}

/* §25.12 — Checkout hero + stripped header (Phase 6.F.1+2, 2026-05-12).
   Brand chrome above the WC Checkout Block + suppress main nav/util on /checkout/
   per design spec §4.1+§4.3. Secure-checkout indicator floats top-right via
   wp_body_open injection in functions.php. */
.lx-checkout-hero {
    background: var(--lx-ivory);
}
.lx-checkout-hero__title {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 14px 0;
}
.lx-checkout-hero__subhead {
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}
.lx-checkout-hero__subhead a {
    color: var(--text-primary);
    border-bottom: 1px solid var(--lx-cashmere);
}

/* Strip main header nav + util on checkout (design spec §4.1) */
.woocommerce-checkout .site-header__main-menu,
.woocommerce-checkout #main-menu,
.woocommerce-checkout .header-utility,
.woocommerce-checkout .header-buttons {
    display: none !important;
}

/* Secure-checkout indicator (floating top-right of header on /checkout/) */
.lx-checkout-secure-indicator {
    position: absolute;
    top: 24px;
    right: 32px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.lx-checkout-secure-indicator svg {
    display: block;
}
body:not(.woocommerce-checkout) .lx-checkout-secure-indicator {
    display: none;
}

/* §25.13 — Cart help-band (Phase 6.E.3, 2026-05-12).
   3-col Pearl band below the cart block. Per design spec §3.6. */
.lx-cart-helpband {
    margin-top: 64px;
}
.lx-cart-helpband__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}
.lx-cart-helpband__col p {
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}
.lx-cart-helpband__col p.lx-eyebrow {
    margin-bottom: 12px;
}
.lx-cart-helpband__col a {
    color: var(--text-primary);
    border-bottom: 1px solid var(--lx-cashmere);
}
@media (max-width: 768px) {
    .lx-cart-helpband__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* §25.14 — WC Cart Block brand styling (Phase 6.E.2, 2026-05-12).
   Style the React-rendered cart block. Can't change layout (block is React);
   only colors, fonts, spacing. Bridge sits on top of §25.20 (general
   wc-block-* overrides).

   Container width: 1280px matches .lx-cart-hero / .lx-cart-helpband (via
   the_content filter wrappers) AND the brand spec §3.2. Force !important
   because WP's `.alignwide` rule has identical specificity + may load after
   us depending on render order. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-cart.alignfull {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
    font-family: var(--font-serif);
}
.wp-block-woocommerce-cart .wc-block-components-text-input input,
.wp-block-woocommerce-cart .wc-block-components-text-input textarea {
    font-family: var(--font-sans);
    font-size: 15px;
    background: var(--lx-ivory);
    border-color: var(--lx-cashmere);
}
.wp-block-woocommerce-cart .wc-block-cart__totals-title,
.wp-block-woocommerce-cart .wc-block-components-title {
    font-family: var(--font-display);
    color: var(--text-primary);
}
.wp-block-woocommerce-cart .wc-block-components-product-price__value,
.wp-block-woocommerce-cart .wc-block-formatted-money-amount {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.wp-block-woocommerce-cart .wc-block-components-button.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-container .wc-block-components-button {
    background: var(--lx-grey) !important;
    color: var(--lx-ivory) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border-radius: 2px !important;
    padding: 16px 36px !important;
    border: 0 !important;
    text-transform: uppercase !important;   /* §1b — capitalised */
    letter-spacing: 0.06em !important;
    transition: all 280ms cubic-bezier(0.32, 0.72, 0.26, 1) !important;
}
.wp-block-woocommerce-cart .wc-block-components-button.wc-block-cart__submit-button:hover {
    background: #2A2622 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(61, 57, 53, 0.18) !important;
}

/* Empty cart block — brand the fallback message per design spec §3.7 */
.wp-block-woocommerce-empty-cart-block .wc-block-components-title {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 600;
    color: var(--text-primary);
}
.wp-block-woocommerce-empty-cart-block p {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--text-secondary);
}

/* §25 — Checkout Block brand styling (parallel to §25.14 for cart) */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout.alignwide,
.wp-block-woocommerce-checkout.alignfull {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
    font-family: var(--font-serif);
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 600;
}
.wp-block-woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
    background: var(--lx-grey) !important;
    color: var(--lx-ivory) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border-radius: 2px !important;
    padding: 18px 36px !important;
    text-transform: uppercase !important;   /* §1b — capitalised */
    letter-spacing: 0.06em !important;
}
.wp-block-woocommerce-checkout .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
    background: #2A2622 !important;
}

/* Germanized review-checkboxes container styling (the legal-compliance checkboxes
   block — terms, downloads-waiver, age-verification (we disabled), etc.) */
.wc-gzd-checkboxes-placeholder,
.wc-gzd-blocks-checkbox-list {
    margin: 24px 0;
    padding: 24px;
    border-top: 1px solid var(--lx-cashmere);
}
.wc-gzd-checkboxes-placeholder label,
.wc-gzd-blocks-checkbox-list label {
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.55;
}

/* §25.22 — Shop archive product cards (M2.5-A v2 rewrite, 2026-05-13).
   Mirrors design-imports/.../pages/shop.html line-by-line.

   Card structure (laborator-builder content):
     .product                                      ← Outer "soft soft--hover" wrapper
       └ .lb-element-woocommerce-product-images   ← Ivory stage (560px, padding 48px/32px/56px, .bottle--lg inside)
       └ .lb-element-woocommerce-product-row      ← meta row (flex justify-between baseline)
           ├ .lb-element-woocommerce-product-column (LEFT, flex 1)
           │   ├ .lb-element-woocommerce-product-title      (.t-subhead-28)
           │   └ .lb-element-woocommerce-product-description (.t-body-15 muted italic, margin-top 8px)
           └ .lb-element-woocommerce-product-column (RIGHT, horizontal_align: end)
               └ .lb-element-woocommerce-product-price      (.t-price, white-space nowrap)

   NO compliance shortcodes on card per design (compliance is on PDP + site-wide promo banner). */
.elementor-widget-woocommerce-products .elementor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
@media (max-width: 768px) {
    .elementor-widget-woocommerce-products .elementor-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Outer .product wrapper — mirrors .soft.soft--hover (per shop.html L66) */
.elementor-widget-woocommerce-products .elementor-grid .product {
    background: rgba(232, 227, 220, 0.5);   /* Pearl @ 50% — design L264 */
    border-radius: 12px;
    padding: 18px;
    border: 0;
    text-decoration: none;
    color: var(--text-primary);
    transition: background .25s ease-out, transform .25s ease-out, box-shadow .25s ease-out;
    display: flex;
    flex-direction: column;
    list-style: none;
}
.elementor-widget-woocommerce-products .elementor-grid .product:hover {
    background: var(--surface-secondary);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(61, 57, 53, 0.08);
}

/* Ivory stage (560px tall) — mirrors shop.html L67 inline style */
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-images {
    background: var(--surface-primary);
    border-radius: 6px;
    padding: 48px 32px 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 560px;
    margin: 0;
}
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-images a {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
    border: 0;
}
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-images .image-placeholder {
    display: block;
    margin: 0 auto;
    max-width: 240px;
    background: transparent;
}
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-images img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 460px;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}
@media (max-width: 768px) {
    .elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-images {
        padding: 36px 24px 40px;
        height: 420px;
    }
    .elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-images img {
        max-height: 320px;
    }
}

/* Meta row — flex justify-between baseline, gap 24px (shop.html L68)
   Robust against long taglines: left column flexes, right column stays at fixed-content width
   so price never wraps below. */
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-row {
    margin: 0 !important;
    padding: 24px 14px 8px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 24px !important;
    width: auto !important;
}
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-column {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-column:first-of-type {
    flex: 1 1 0 !important;
    min-width: 0 !important;     /* allow text wrap; prevents flex overflow */
    max-width: none !important;
}
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-column:last-of-type {
    flex: 0 0 auto !important;
    max-width: none !important;
    text-align: right;
    align-self: baseline !important;
}

/* Title — .t-subhead-28 (28px serif 500) */
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-title {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-title a {
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
}

/* Italic tagline — .t-body-15 muted italic, margin-top 8px (shop.html L71) */
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-description {
    font-family: var(--font-serif) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: var(--text-secondary) !important;
    line-height: 1.55 !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    display: block !important;
}
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-description:empty {
    display: none !important;
}
/* Defeat Kalium's expanding-text line-clamp + show-more behavior on cards —
   the design shows the tagline as a single short italic line, no truncation. */
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-description .expanding-text,
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-description .expanding-text__content {
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    -webkit-line-clamp: unset !important;
    --k-expanding-text-lines: unset !important;
}
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-description .expanding-text__show-more,
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-description .expanding-text__more {
    display: none !important;
}

/* Price — .t-price (Garamond Display 24px 600, white-space nowrap, no rule overrides
   weight 400 from shop.html L73 inline style; we honor that for visual lightness) */
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-price {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;  /* per shop.html L73 inline override */
    line-height: 1;
    color: var(--text-primary);
    white-space: nowrap;
    margin: 0;
    padding: 0;
}
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-price .price,
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-price .amount,
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-price bdi {
    font: inherit;
    color: inherit;
}

/* Hide add-to-cart on cards (design clicks-into-PDP), Kalium hover-block, etc. */
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-add-to-cart,
.elementor-widget-woocommerce-products .elementor-grid .product .add_to_cart_button,
.elementor-widget-woocommerce-products .elementor-grid .product .ajax_add_to_cart,
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-hover-block__hover-layer {
    display: none !important;
}

/* Grundpreis (PAngV-compliant unit-price line under the card price) */
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-text {
    padding: 0;
    margin: 0;
}
.lx-card-grundpreis {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 4px;
    white-space: nowrap;
}

/* Strip Germanized's price suffix on archive cards — we render Grundpreis +
   tax notice ourselves in the dedicated .lx-card-grundpreis line so the price
   stays clean. */
.elementor-widget-woocommerce-products .elementor-grid .product .woocommerce-price-suffix,
.elementor-widget-woocommerce-products .elementor-grid .product .price .small,
.elementor-widget-woocommerce-products .elementor-grid .product .lb-element-woocommerce-product-price .woocommerce-gzd-additional-info {
    display: none !important;
}

/* Shop toolbar: count + sort styling (overrides WC default select chrome) */
.lx-shop-toolbar .woocommerce-result-count {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    margin: 0;
}
.lx-shop-toolbar .woocommerce-ordering {
    margin: 0;
}
.lx-shop-toolbar .woocommerce-ordering select {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    padding: 8px 32px 8px 12px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%233D3935' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* §25.23 SUPERSEDED — see §40.12 (M2.5-B v2 rewrite, 2026-05-13).
   The block below was the v1 attempt; left in place but neutralized so
   subsequent §25.24 etc. remain at their line numbers. The actual PDP
   styling now comes from §40.12 + the inline structure in
   kalium-child/woocommerce/content-single-product.php. */
.lx-pdp-v1-stub-DEAD-DO-NOT-USE {
/*
     - BELOW grid: full-width Pearl tasting band (lead + appearance/nose/palate/finish)
*/

/* Outer container — 1280px max with comfortable gutter */
.lx-pdp {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 32px 96px;
}

/* 2-col sticky grid */
.lx-pdp__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: flex-start;
    margin-bottom: 80px;
}
@media (max-width: 1024px) {
    .lx-pdp__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .lx-pdp { padding: 24px 24px 64px; }
}

/* Gallery (LEFT col) — Kalium's product_images renders inside */
.lx-pdp__gallery {
    width: 100%;
}
.lx-pdp__gallery .lb-element-woocommerce-product-images,
.lx-pdp__gallery .images,
.lx-pdp__gallery .woocommerce-product-gallery {
    background: var(--lx-pearl, rgba(232,227,220,0.5));
    border: 1px solid var(--lx-cashmere, #E8E3DC);
    border-radius: 4px;
    padding: 64px 48px;
    text-align: center;
}
.lx-pdp__gallery img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* Info column (RIGHT, sticky) */
.lx-pdp__info {
    position: sticky;
    top: 96px;
    align-self: flex-start;
}
@media (max-width: 1024px) {
    .lx-pdp__info { position: static; top: auto; }
}
.lx-pdp__info .summary.entry-summary {
    margin: 0;
}

/* Eyebrow above title */
.lx-pdp__eyebrow,
.lx-pdp .t-eyebrow {
    font-family: var(--font-sans, 'Optima Pro', Optima, sans-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary, #5C544C);
    margin: 0 0 14px;
    padding: 0;
}

/* Product title — Garamond Display semibold */
.lx-pdp__info .product_title,
.lx-pdp__info h1 {
    font-family: var(--font-display, var(--font-serif));
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-primary, #3D3935);
    margin: 0 0 18px;
    padding: 0;
}
@media (max-width: 1024px) {
    .lx-pdp__info .product_title { font-size: 32px; }
}

/* Double-rule price block (wraps WC price + Germanized injections) */
.lx-pdp__price-block {
    border-top: 1px solid var(--lx-cashmere, #E8E3DC);
    border-bottom: 1px solid var(--lx-cashmere, #E8E3DC);
    padding: 18px 0;
    margin: 0 0 28px;
}
.lx-pdp__price-block .price {
    font-family: var(--font-display, var(--font-serif));
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--text-primary, #3D3935);
    font-variant-numeric: tabular-nums;
    display: block;
    margin: 0;
    padding: 0;
}
.lx-pdp__price-block .price .amount,
.lx-pdp__price-block .price del,
.lx-pdp__price-block .price ins {
    font: inherit;
    color: inherit;
    text-decoration: inherit;
}
/* Germanized injections inside the price-block — smaller muted lines */
.lx-pdp__price-block .price-unit,
.lx-pdp__price-block .wc-gzd-additional-info,
.lx-pdp__price-block .small {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--text-secondary, #5C544C);
    margin-top: 8px;
    line-height: 1.5;
}

/* Short description (priority 20 — woocommerce_template_single_excerpt) */
.lx-pdp__info .woocommerce-product-details__short-description {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-primary, #3D3935);
    margin: 0 0 28px;
    max-width: 480px;
}
.lx-pdp__info .woocommerce-product-details__short-description p {
    margin: 0 0 10px;
}
.lx-pdp__info .woocommerce-product-details__short-description ul {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}
.lx-pdp__info .woocommerce-product-details__short-description li {
    padding-left: 18px;
    position: relative;
    font-size: 15px;
}
.lx-pdp__info .woocommerce-product-details__short-description li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--text-secondary);
}

/* Format toggle (Single bottle / Case of six) */
.lx-pdp__format-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 28px;
}
.lx-format-btn {
    background: transparent;
    border: 1px solid var(--lx-cashmere, #E8E3DC);
    border-radius: 4px;
    padding: 16px 18px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--text-primary);
    transition: border-color 200ms ease, background-color 200ms ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lx-format-btn:hover {
    border-color: var(--text-primary);
}
.lx-format-btn--active {
    background: var(--text-primary, #3D3935);
    color: var(--lx-ivory, #FAF7F4);
    border-color: var(--text-primary, #3D3935);
}
.lx-format-btn__label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lx-format-btn__price {
    font-family: var(--font-display, var(--font-serif));
    font-size: 18px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Add-to-cart form */
.lx-pdp__info form.cart {
    margin: 0 0 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}
.lx-pdp__info form.cart .quantity {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--lx-cashmere, #E8E3DC);
    border-radius: 4px;
    overflow: hidden;
    background: var(--lx-ivory, #FAF7F4);
    min-height: 52px;
}
.lx-pdp__info form.cart .quantity input.qty {
    background: transparent;
    border: 0;
    width: 60px;
    text-align: center;
    font-family: var(--font-display, var(--font-serif));
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    padding: 0;
    -moz-appearance: textfield;
}
.lx-pdp__info form.cart .quantity input.qty::-webkit-outer-spin-button,
.lx-pdp__info form.cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.lx-pdp__info form.cart .quantity button.minus,
.lx-pdp__info form.cart .quantity button.plus {
    background: transparent;
    border: 0;
    width: 44px;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    transition: background-color 200ms ease;
}
.lx-pdp__info form.cart .quantity button.minus:hover,
.lx-pdp__info form.cart .quantity button.plus:hover {
    background: var(--lx-cashmere, #E8E3DC);
}

.lx-pdp__info form.cart .single_add_to_cart_button,
.lx-pdp__info form.cart button[name="add-to-cart"] {
    flex: 1 1 auto;
    background: var(--text-primary, #3D3935);
    color: var(--lx-ivory, #FAF7F4);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 0;
    border-radius: 4px;
    padding: 18px 28px;
    cursor: pointer;
    transition: background-color 200ms ease, transform 200ms ease;
    min-height: 52px;
}
.lx-pdp__info form.cart .single_add_to_cart_button:hover {
    background: var(--text-primary-hover, #2B2825);
}

/* Hide stock indicator (cluttered) */
.lx-pdp__info .stock { display: none; }

/* Disclosure accordions */
.lx-pdp__disclosures {
    border-top: 1px solid var(--lx-cashmere, #E8E3DC);
    margin: 32px 0 0;
}
.lx-disclosure {
    border-bottom: 1px solid var(--lx-cashmere, #E8E3DC);
}
.lx-disclosure[open] .lx-disclosure__chevron {
    transform: rotate(180deg);
}
.lx-disclosure__summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: var(--font-sans, 'Optima Pro', Optima, sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary, #3D3935);
}
.lx-disclosure__summary::-webkit-details-marker {
    display: none;
}
.lx-disclosure__title {
    flex: 1 1 auto;
}
.lx-disclosure__chevron {
    flex: 0 0 auto;
    transition: transform 200ms ease;
    color: var(--text-secondary, #5C544C);
}
.lx-disclosure__body {
    padding: 4px 0 22px;
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-primary, #3D3935);
}
.lx-disclosure__body p {
    margin: 0 0 10px;
}
.lx-disclosure__body ul {
    margin: 8px 0;
    padding-left: 18px;
}
.lx-disclosure__body li {
    margin: 4px 0;
}
.lx-disclosure__body strong {
    font-weight: 500;
    color: var(--text-primary);
}

/* §40.12.7 — Sensory + Origin sections (per 2026-05-15 canonical PDP design).
   Rendered by content-single-product.php after the main info grid. Each section
   alternates image-left / image-right, with eyebrow + display headline + body. */
.lx-pdp__sensory {
    padding: 120px 0 80px;
}
.lx-pdp__sensory-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
    padding: 64px 0;
    border-bottom: 1px solid var(--border-subtle, rgba(60,57,53,0.08));
}
.lx-pdp__sensory-row:last-child { border-bottom: 0; }
.lx-pdp__sensory-row--img-right .lx-pdp__sensory-text  { order: 1; }
.lx-pdp__sensory-row--img-right .lx-pdp__sensory-image { order: 2; }
.lx-pdp__sensory-row--img-left  .lx-pdp__sensory-text  { order: 2; }
.lx-pdp__sensory-row--img-left  .lx-pdp__sensory-image { order: 1; }
.lx-pdp__sensory-text .t-eyebrow { display: block; margin-bottom: 16px; }
.lx-pdp__sensory-h2 {
    margin: 0 0 24px;
    line-height: 1.1;
}
.lx-pdp__sensory-body {
    color: var(--text-secondary, #5C544C);
    margin: 0;
    max-width: 52ch;
}
.lx-pdp__sensory-image {
    aspect-ratio: 4 / 5;
    background: var(--lx-pearl, rgba(232,227,220,0.55));
    display: flex;
    align-items: center;
    justify-content: center;
}
.lx-pdp__sensory-image .placeholder-label {
    color: var(--text-tertiary, #6F665D);
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
@media (max-width: 900px) {
    .lx-pdp__sensory { padding: 80px 0 56px; }
    .lx-pdp__sensory-row {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 48px 0;
    }
    .lx-pdp__sensory-row .lx-pdp__sensory-text,
    .lx-pdp__sensory-row .lx-pdp__sensory-image { order: 0; }
    .lx-pdp__sensory-h2 { font-size: 30px; }
}

/* Pearl tasting band — full-width below the 2-col grid */
.lx-pdp__tasting {
    background: var(--lx-pearl, rgba(232,227,220,0.5));
    padding: 80px 32px;
    margin: 0 calc(50% - 50vw);
    text-align: center;
}
.lx-pdp__tasting-inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.lx-pdp__tasting-eyebrow {
    color: var(--text-secondary, #5C544C);
    margin: 0 0 24px;
}
.lx-pdp__tasting-lead {
    font-family: var(--font-display, var(--font-serif));
    font-size: 28px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-primary, #3D3935);
    margin: 0 0 32px;
}
.lx-pdp__tasting-dl {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px 28px;
    margin: 0;
    text-align: left;
    max-width: 620px;
    margin: 0 auto;
}
.lx-pdp__tasting-dl dt {
    font-family: var(--font-sans, 'Optima Pro', Optima, sans-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary, #5C544C);
    margin: 0;
    padding: 0;
}
.lx-pdp__tasting-dl dd {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary, #3D3935);
    margin: 0 0 14px;
    padding: 0;
}
@media (max-width: 768px) {
    .lx-pdp__tasting { padding: 56px 24px; }
    .lx-pdp__tasting-lead { font-size: 22px; }
    .lx-pdp__tasting-dl { grid-template-columns: 1fr; gap: 4px; }
    .lx-pdp__tasting-dl dd { margin-bottom: 16px; }
}
*/
}
/* §25.23 SUPERSEDED block END */

/* §25.24 — Order Received (thankyou.php) (Phase 6.H, 2026-05-12).
   Per design spec §5.13: centered hero + .soft summary panel + 2-col meta
   + 2-button row + bordered pullquote. */
.lx-thankyou {
    background: var(--lx-ivory);
}
.lx-thankyou__title {
    font-family: var(--font-display);
    font-size: 72px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-style: italic;
    margin: 14px 0 18px;
}
@media (max-width: 768px) {
    .lx-thankyou__title { font-size: 44px; }
}
.lx-thankyou__lede {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
}

/* Overview: 4-col Order/Date/Total/Payment */
.lx-thankyou__overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0 0 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--lx-cashmere);
}
@media (max-width: 768px) {
    .lx-thankyou__overview {
        grid-template-columns: repeat(2, 1fr);
    }
}
.lx-thankyou__overview-cell dt {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 6px;
}
.lx-thankyou__overview-cell dd {
    font-family: var(--font-serif);
    font-size: 17px;
    color: var(--text-primary);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* 2-col shipping-to / estimated-delivery */
.lx-thankyou__meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (max-width: 640px) {
    .lx-thankyou__meta-grid {
        grid-template-columns: 1fr;
    }
}
.lx-thankyou__meta-cell .lx-eyebrow {
    margin: 0;
}

/* CTA row */
.lx-thankyou__cta-row .btn {
    font-family: var(--font-sans);
    font-size: 14px;
    letter-spacing: 0.02em;
    padding: 16px 36px;
    text-decoration: none;
    display: inline-block;
}

/* Embedded WC line-items table inside the .soft panel */
.lx-thankyou .lx-thankyou__items table.woocommerce-table--order-details,
.lx-thankyou .lx-thankyou__items table.shop_table {
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--text-primary);
    width: 100%;
    border-collapse: collapse;
}
.lx-thankyou .lx-thankyou__items table th,
.lx-thankyou .lx-thankyou__items table td {
    padding: 14px 0;
    border-bottom: 1px solid var(--lx-cashmere);
    text-align: left;
}
.lx-thankyou .lx-thankyou__items table th {
    font-family: var(--font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-secondary);
    font-weight: 500;
}
.lx-thankyou .lx-thankyou__items table .order-total {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
}

/* Pullquote */
.lx-thankyou__pullquote .lx-eyebrow {
    margin: 0;
}

/* Suppress the legacy WC order-details fallback (we render the same info above
   via the .soft panel) — keep markup for Germanized hook compatibility. */
.lx-thankyou__order-details-fallback {
    display: none;
}

/* §25.25 RESERVED — form/notice token re-home (Phase 6.B.1 follow-up) */

/* §25.26 — Lighthouse P0 perf+a11y fixes (2026-05-13).
   Six critical findings from launch-prep audit
   (design-imports/launch_qa/LIGHTHOUSE_AUDIT_2026-05-12.md).
   Each fix scoped to its specific selector + commented with the Lighthouse
   audit ID that flagged it. Re-run Lighthouse after deploy to verify delta. */

/* P0-1 — Checkout CLS reserve min-height on the WC Checkout Block + the
   inner sidebar-layout container so React hydration doesn't reflow.
   First attempt (1200px) reduced CLS 0.785→0.487 but still bad — the
   inner `.wc-block-components-sidebar-layout` was the actual shift source.
   Bumping outer min-height + reserving inner layout dimensions. */
.wp-block-woocommerce-checkout {
    min-height: 1800px;
    contain: layout;        /* Tells browser this block is layout-isolated;
                               improves rendering perf AND limits CLS scope */
}
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
    min-height: 1600px;
}
@media (max-width: 768px) {
    .wp-block-woocommerce-checkout {
        min-height: 2400px;
    }
    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
        min-height: 2200px;
    }
}
.wp-block-woocommerce-cart {
    min-height: 700px;
    contain: layout;
}

/* §25.27 — Elementor Site Header — D15 redesign (2026-05-20)
   Ruinart-aligned chrome. Spec: data/design/header_spec_2026-05-20.md v2.
   Targets Elementor template 6974 (Lennox Site Header).

   Structure assumptions (set by Elementor MCP, not by CSS):
     Row 1 (chrome):   [hamburger toggle (tablet/mobile)] [LOGO] [WPML | cart]
     Row 2 (nav):      [horizontal nav menu — desktop only]
   Sticky-effects state hides row 2 + swaps bg to White.
   Mobile drawer = Elementor nav-menu widget B (layout=dropdown) styled
   below into a full-screen overlay matching Ruinart Image #2.

   Brand canon enforced here:
   - Cart counter pill is Lennox Grey on Ivory (NEVER Rose — chrome rule).
   - All colors use --text-primary / --lx-* tokens, no raw hex except
     for Elementor controls that need literal hex (cart icon SVG fill). */

/* ── Base wrapper ───────────────────────────────────────────────────── */
.elementor-location-header {
    background-color: var(--lx-ivory) !important;
    border-bottom: 1px solid var(--lx-pearl);
    position: relative;
    z-index: 100;
    transition: background-color 250ms ease, border-color 250ms ease;
}

/* Sticky-effects: bg → White, border → Cashmere, hide row 2 */
.elementor-location-header .elementor-sticky--effects {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--lx-cashmere) !important;
}
.elementor-location-header .elementor-sticky--effects [data-id="80c0dcf"] {
    display: none !important;
}

/* ── Logo (single grey wordmark; spec §4.3 sizes per breakpoint) ───── */
.elementor-location-header .elementor-widget-image img {
    width: 200px;
    max-height: 60px;
    height: auto;
    object-fit: contain;
}
@media (max-width: 1024px) {
    .elementor-location-header .elementor-widget-image img { width: 144px; }  /* §B3 logo −20%: 180→144 */
}
@media (max-width: 768px) {
    .elementor-location-header .elementor-widget-image img { width: 112px; }  /* §B3 logo −20%: 140→112 */
}
/* Sticky-effects: shrink logo */
.elementor-location-header .elementor-sticky--effects .elementor-widget-image img {
    width: 128px;  /* §B3 logo −20%: 160→128 */
}
@media (max-width: 1024px) {
    .elementor-location-header .elementor-sticky--effects .elementor-widget-image img {
        width: 112px;  /* §B3 logo −20%: 140→112 */
    }
}

/* §B3 — logo −20% (client 2026-06-23). The live header wordmark renders unconstrained
   (~341×56) because the header was rebuilt — its cell id changed, so the old
   [data-id="7368b9e"] rules above are now inert. Govern the wordmark directly by image
   src: 56→45px tall (≈80%), width auto-scales (~341→~274). !important beats the
   non-important .elementor-location-header width rules; the src target leaves the other
   header images (flags, menu logos) untouched. */
header img[src*="lennox-beverages-wordmark"] {
    height: 45px !important;
    max-height: 45px !important;
    width: auto !important;
    max-width: none !important;
}

/* ── Nav menu — DESKTOP ROW 2 ONLY ──────────────────────────────────
   Scoped to desktop breakpoint so it doesn't bleed into the Off-Canvas
   drawer nav-menu (which lives inside the same .elementor-location-header
   wrapper but renders on mobile only). Without this @media gate, the
   `font-size: 13px !important` here was winning over the drawer nav-menu
   widget's own typography settings, pinning the drawer items at 13px
   Optima instead of 24px Garamond. */
@media (min-width: 1025px) {
    .elementor-location-header .elementor-nav-menu a,
    .elementor-location-header .elementor-nav-menu li a {
        color: var(--text-primary);
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        line-height: 1.0;
        transition: color 180ms ease;
    }
    .elementor-location-header .elementor-nav-menu a:hover,
    .elementor-location-header .elementor-nav-menu a:focus {
        color: var(--text-secondary);
    }
    /* Active item: 1 px Grey underline at offset 8 px */
    .elementor-location-header .elementor-nav-menu li.current-menu-item > a::after,
    .elementor-location-header .elementor-nav-menu li.current-menu-parent > a::after,
    .elementor-location-header .elementor-nav-menu li.current-menu-ancestor > a::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background-color: var(--text-primary);
        margin-top: 8px;
    }
    /* Desktop submenu dropdowns (Ivory bg, Cashmere border) */
    .elementor-location-header .sub-menu {
        background-color: var(--lx-ivory);
        border: 1px solid var(--lx-cashmere);
        border-radius: 0;
        padding: 8px 0;
        min-width: 200px;
        box-shadow: 0 6px 24px -8px rgba(58, 53, 47, 0.16);
    }
    .elementor-location-header .sub-menu a {
        padding: 8px 18px;
        font-size: 12px;
        letter-spacing: 0.10em;
    }
}

/* ── WPML language switcher cleanup ─────────────────────────────────── */
/* WPML's [wpml_language_switcher] shortcode renders extra ".wpml-ls-display"
   spans containing "(English)" / "(German)" translations. Hide them; keep
   only the native name ("English" / "Deutsch") which we stylize as EN|DE. */
.elementor-location-header .wpml-ls-display { display: none !important; }
.elementor-location-header .wpml-ls {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
}
.elementor-location-header .wpml-ls > ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.elementor-location-header .wpml-ls-item {
    padding: 0 8px;
    border-right: 1px solid var(--lx-cashmere);
}
.elementor-location-header .wpml-ls-item:last-child { border-right: 0; }
.elementor-location-header .wpml-ls-link {
    text-decoration: none !important;
    padding: 0 !important;
}
.elementor-location-header .wpml-ls-native {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--lx-cashmere);
    transition: color 180ms ease;
}
.elementor-location-header .wpml-ls-current-language .wpml-ls-native,
.elementor-location-header .wpml-ls-link:hover .wpml-ls-native {
    color: var(--text-primary);
}

/* ── Cart toggle + counter pill (Grey, never Rose — brand chrome rule) ─ */
.elementor-location-header .elementor-menu-cart__toggle .elementor-button-icon,
.elementor-location-header .elementor-menu-cart__toggle svg,
.elementor-location-header .elementor-menu-cart__toggle .eicon-cart-medium {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
    font-size: 22px !important;
}
.elementor-location-header .elementor-menu-cart__products-count,
.elementor-location-header .elementor-button-text {
    background-color: var(--text-primary) !important;  /* Lennox Grey, not Rose */
    color: var(--lx-ivory) !important;
    font-family: var(--font-sans);
    font-size: 10px !important;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 999px;
    padding: 0 5px;
    text-align: center;
}

/* ── Off-Canvas mobile drawer (2026-05-20 D15 rebuild) ────────────────
   Replaces the nav-menu-dropdown drawer that fought Elementor's runtime
   positioning. Off-Canvas widget owns the full-screen overlay, body-scroll
   lock, focus trap, and ESC-to-close natively. CSS here only governs the
   panel content + chrome-row visibility coordination. */

/* Off-Canvas root container — bump z-index above the sticky chrome
   (sticky root sets z-index:100; off-canvas must render on top of it). */
.elementor-location-header .elementor-widget-off-canvas,
.elementor-location-header .e-off-canvas {
    z-index: 10000;
}
.elementor-location-header .e-off-canvas__overlay {
    z-index: 9999;
}
.elementor-location-header .e-off-canvas__main {
    z-index: 10001;
}

/* Off-Canvas trigger button (hamburger) — tablet+mobile chrome row */
.elementor-location-header .e-off-canvas__main-toggle,
.elementor-location-header .elementor-off-canvas__toggle {
    color: var(--text-primary) !important;
    font-size: 22px;
    padding: 8px;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Panel: 100vw width on tablet+mobile (Elementor's px width setting can't
   go responsive; CSS forces full-viewport here) */
@media (max-width: 1024px) {
    .elementor-location-header .e-off-canvas__content,
    .elementor-location-header .elementor-off-canvas__panel {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* Panel content layout: flex column so the lang switcher can be pushed
   to the bottom via the spacer in-between. Solid Ivory bg so the chrome
   row sticky elements don't bleed through visually. */
.elementor-location-header .e-off-canvas__content-wrap,
.elementor-location-header .elementor-off-canvas__content,
.elementor-location-header .e-off-canvas__main {
    background-color: var(--lx-ivory) !important;
}
.elementor-location-header .e-off-canvas__content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 80px;
}

/* Nav menu inside the drawer — vertical layout + separators.
   Typography (Garamond 24px 600 uppercase) is set on the widget itself via
   Elementor's menu_typography_* controls — that generates widget-scoped CSS
   with higher specificity than any class selector, so we don't fight the
   cascade with !important here. */
.elementor-location-header .e-off-canvas__content .elementor-nav-menu {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
.elementor-location-header .e-off-canvas__content .elementor-nav-menu li {
    border-bottom: 1px solid var(--lx-pearl);
    margin: 0;
    padding: 0;
    list-style: none;
}
.elementor-location-header .e-off-canvas__content .elementor-nav-menu li:last-child {
    border-bottom: 0;
}
.elementor-location-header .e-off-canvas__content .elementor-nav-menu a.elementor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
}
/* Hide the auto-appended submenu caret SVG that Elementor inserts on
   menu items that have children (down-pointing chevron — we replace
   with our own right-chevron ::after). */
.elementor-location-header .e-off-canvas__content .elementor-nav-menu .sub-arrow,
.elementor-location-header .e-off-canvas__content .elementor-nav-menu .e-fas-caret-down {
    display: none;
}

/* Hide nested .sub-menu items in the v1 flat drawer (multi-level
   drill-down will land via HC-offcanvas-nav library in the next
   commit per data/design/header_spec_2026-05-20.md). */
.elementor-location-header .e-off-canvas__content .sub-menu {
    display: none;
}

/* Chevron-right indicator on every drawer top-level nav item (Ruinart pattern) */
.elementor-location-header .e-off-canvas__content .elementor-nav-menu > ul > li > a::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--text-primary);
    border-right: 1px solid var(--text-primary);
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-left: 12px;
}

/* Close-X button at top of drawer (HTML widget ca3a310) */
.elementor-location-header [data-id="ca3a310"] {
    align-self: flex-start;
    margin-left: 24px;
    margin-bottom: 32px;
}
.elementor-location-header [data-id="ca3a310"] .lx-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color 180ms ease;
}
.elementor-location-header [data-id="ca3a310"] .lx-drawer-close:hover {
    color: var(--text-secondary);
}
.elementor-location-header [data-id="ca3a310"] .lx-drawer-close svg {
    display: block;
}

/* WPML lang switcher inside drawer — push to bottom via auto-margin */
.elementor-location-header .e-off-canvas__content .elementor-widget-shortcode,
.elementor-location-header .elementor-off-canvas .elementor-widget-shortcode {
    margin-top: auto;
    padding: 32px 24px 48px;
}
.elementor-location-header .e-off-canvas__content .wpml-ls > ul,
.elementor-location-header .elementor-off-canvas .wpml-ls > ul {
    justify-content: center;
    gap: 12px;
}
.elementor-location-header .e-off-canvas__content .wpml-ls-native,
.elementor-location-header .elementor-off-canvas .wpml-ls-native {
    font-size: 14px;
    letter-spacing: 0.16em;
}

/* ── Logo stays centered on tablet+mobile (toggle lives in cell 1) ──── */
@media (max-width: 1024px) {
    .elementor-location-header [data-id="7368b9e"] {
        flex: 1;
    }
}

/* ── Hide chrome-row WPML lang switcher widget 0db8638 on tablet+mobile —
       lang switcher lives inside the Off-Canvas drawer on those breakpoints
       (belt-and-suspenders alongside the widget's Elementor hide_* settings) */
@media (max-width: 1024px) {
    .elementor-location-header [data-id="0db8638"] {
        display: none !important;
    }
}

/* ── Hide row 2 nav widget on tablet+mobile (Elementor hide_* fallback) ── */
@media (max-width: 1024px) {
    .elementor-location-header [data-id="80c0dcf"],
    .elementor-location-header [data-id="4ae8ef9"] {
        display: none !important;
    }
}

/* ── Hide Off-Canvas widget on desktop (the panel is tablet+mobile only) ─
   The Elementor MCP hide_desktop setting generates an unsuffixed
   `elementor-hidden` class that breaks responsive scoping, so we control
   via plain @media here. Also hide the hamburger trigger HTML widget
   (49f6af0) on desktop. */
@media (min-width: 1025px) {
    .elementor-location-header [data-id="c54d418"],
    .elementor-location-header [data-id="49f6af0"] {
        display: none !important;
    }
}

/* ── Hamburger trigger styling (HTML widget 49f6af0) ────────────────── */
.elementor-location-header [data-id="49f6af0"] .lx-mobile-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color 180ms ease;
}
.elementor-location-header [data-id="49f6af0"] .lx-mobile-trigger:hover {
    color: var(--text-secondary);
}
.elementor-location-header [data-id="49f6af0"] .lx-mobile-trigger svg {
    display: block;
}

/* ==========================================================================
   §25.28 — HC Off-Canvas Nav (mobile drawer, mu-plugin-driven) 2026-05-20
   ==========================================================================
   Brand-token overrides for HC v6.2.5 default styling. HC renders its own
   off-canvas DOM via mu-plugins/lennox-mobile-nav.php. The default theme is
   blue/white — we override to Lennox Ivory + Grey + Garamond editorial. */

/* HC root + all nested wrappers: solid Ivory bg matching brand chrome.
   HC's base rule colors .nav-container/.nav-wrapper/ul as #336ca6 blue;
   our higher-specificity selector wins on all three. */
.hc-offcanvas-nav.lx-mobile-nav .nav-container,
.hc-offcanvas-nav.lx-mobile-nav .nav-wrapper,
.hc-offcanvas-nav.lx-mobile-nav ul {
    background-color: var(--lx-ivory);
    color: var(--text-primary);
}

/* Override HC's hardcoded blue highlights */
.hc-offcanvas-nav.lx-mobile-nav .nav-wrapper-0 > .nav-content > h2,
.hc-offcanvas-nav.lx-mobile-nav h2.nav-title {
    background-color: transparent;
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    padding: 24px 24px;
    border-bottom: 1px solid var(--lx-pearl);
}

/* All nav items: Garamond editorial typography */
.hc-offcanvas-nav.lx-mobile-nav li a.nav-item-link,
.hc-offcanvas-nav.lx-mobile-nav li > .nav-item-wrapper > a {
    background-color: transparent;
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    padding: 20px 24px;
    border-bottom: 1px solid var(--lx-pearl);
    transition: color 180ms ease;
}
.hc-offcanvas-nav.lx-mobile-nav li a.nav-item-link:hover,
.hc-offcanvas-nav.lx-mobile-nav li > .nav-item-wrapper > a:hover {
    color: var(--text-secondary);
}

/* Chevron-right indicator on parent items + back-arrow on submenus.
   HC draws these as rotated border boxes (border-top + border-left)
   on <span>::before inside `.nav-next` (right-pointing) and
   `.nav-back` (left-pointing). Defaults are white #fff — override to
   Lennox Grey. */
.hc-offcanvas-nav.lx-mobile-nav .nav-next span::before,
.hc-offcanvas-nav.lx-mobile-nav .nav-back span::before {
    border-top-color: var(--text-primary) !important;
    border-left-color: var(--text-primary) !important;
}
/* Suppress HC's default blue dividers around the chevron cell + back
   button (border-left + border-bottom). Pearl is set on the parent li
   for the row separator; the chevron cell needs no divider. */
.hc-offcanvas-nav.lx-mobile-nav .nav-next,
.hc-offcanvas-nav.lx-mobile-nav .nav-back a {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Close button (top-left X): proper 22×22 X glyph, no text label.
   HC's default close-button renders two 6×6 arrowhead shapes using ::before
   and ::after (a chevron-pair like '><'). Replace with proper X via two
   crossed lines + bigger size. */
.hc-offcanvas-nav.lx-mobile-nav .nav-close {
    border-bottom: 1px solid var(--lx-pearl);
}
.hc-offcanvas-nav.lx-mobile-nav .nav-close a {
    background-color: transparent;
    color: var(--text-primary);
    text-align: left;
    padding: 18px 24px;
    font-size: 0;          /* hide the "Close menu" text label */
    line-height: 0;
    height: auto;
}
.hc-offcanvas-nav.lx-mobile-nav .nav-close-button {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-block;
}
/* Rebuild HC's close icon as a proper X (two crossed 1.5px lines) */
.hc-offcanvas-nav.lx-mobile-nav .nav-close-button span {
    display: none;        /* hide HC's default arrowhead chevrons */
}
.hc-offcanvas-nav.lx-mobile-nav .nav-close-button::before,
.hc-offcanvas-nav.lx-mobile-nav .nav-close-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 22px;
    height: 1.5px;
    background-color: var(--text-primary);
    border: 0;
    margin: 0;
    transform-origin: center;
}
.hc-offcanvas-nav.lx-mobile-nav .nav-close-button::before { transform: translateY(-50%) rotate(45deg); }
.hc-offcanvas-nav.lx-mobile-nav .nav-close-button::after  { transform: translateY(-50%) rotate(-45deg); }

/* Back button (in submenus): right-pointing arrow + uppercase label */
.hc-offcanvas-nav.lx-mobile-nav .nav-back a {
    background-color: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--lx-pearl);
}

/* Overlay scrim */
.hc-offcanvas-nav.lx-mobile-nav .nav-wrapper .nav-content {
    box-shadow: none;
}

/* WPML lang switcher inside the drawer — pinned at the bottom of level-1
   via flexbox + auto-margin */
.hc-offcanvas-nav.lx-mobile-nav .nav-wrapper-0 .nav-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* Hide HC's default 2px blue separator that appears between the <ul> and
   our injected lang switcher (HC treats the ul as 'not :last-child'). */
.hc-offcanvas-nav.lx-mobile-nav .nav-wrapper-0 > .nav-content > ul:not(:last-child) {
    border-bottom: none;
}
.hc-offcanvas-nav.lx-mobile-nav .lx-mobile-menu__lang {
    margin-top: auto;
    padding: 32px 24px 48px;
    text-align: center;
}
.hc-offcanvas-nav.lx-mobile-nav .lx-mobile-menu__lang .wpml-ls-display {
    display: none;            /* hide the "(German)" / "(English)" extras */
}
.hc-offcanvas-nav.lx-mobile-nav .lx-mobile-menu__lang .wpml-ls > ul {
    display: flex;
    justify-content: center;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.hc-offcanvas-nav.lx-mobile-nav .lx-mobile-menu__lang .wpml-ls-item {
    padding: 0 12px;
    border-right: 1px solid var(--lx-cashmere);
}
.hc-offcanvas-nav.lx-mobile-nav .lx-mobile-menu__lang .wpml-ls-item:last-child {
    border-right: 0;
}
.hc-offcanvas-nav.lx-mobile-nav .lx-mobile-menu__lang .wpml-ls-link {
    text-decoration: none;
    padding: 0;
}
.hc-offcanvas-nav.lx-mobile-nav .lx-mobile-menu__lang .wpml-ls-native {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lx-cashmere);
    transition: color 180ms ease;
}
.hc-offcanvas-nav.lx-mobile-nav .lx-mobile-menu__lang .wpml-ls-current-language .wpml-ls-native {
    color: var(--text-primary);
}
.hc-offcanvas-nav.lx-mobile-nav .lx-mobile-menu__lang .wpml-ls-link:hover .wpml-ls-native {
    color: var(--text-primary);
}

/* HC root z-index: above Elementor sticky chrome (which is 100) */
.hc-offcanvas-nav.lx-mobile-nav {
    z-index: 10000;
}

/* M3.5 follow-up (2026-05-13) — inner sub-block min-height reservations to
   chase remaining CLS 0.487 → <0.1. Each WC Checkout sub-block hydrates
   independently; reserving each prevents the ~0.05-0.15 shifts they cause. */
.wc-block-checkout__contact-information,
fieldset#contact-fields {
    min-height: 180px;
}
.wc-block-checkout__shipping-fields,
.wc-block-checkout__billing-fields,
#shipping,
#billing {
    min-height: 540px;
}
.wc-block-checkout__shipping-method,
.wc-block-checkout__shipping-method-container {
    min-height: 120px;
}
.wc-block-checkout__payment-methods,
#payment-method {
    min-height: 320px;
}
.wc-block-checkout__terms {
    min-height: 60px;
}
.wc-block-checkout__actions,
.wc-block-checkout__actions_row {
    min-height: 100px;
}
/* Cart inner reservations */
.wc-block-cart-items-block,
.wc-block-cart__items {
    min-height: 280px;
}
.wc-block-cart-totals-block,
.wc-block-cart__totals {
    min-height: 320px;
}

/* P0-4 follow-up — main landmark via JS no longer needed. The PHP
   ob_start() approach in functions.php now injects <main> tags
   server-side around the content area, ensuring Lighthouse's
   landmark-one-main audit detects them. */

/* P0-4 — Add visual focus/structure for the new <main> landmark we're
   adding in functions.php. The landmark is for screen-reader navigation;
   we don't need visual changes. But ensure no margin collapses. */
main#main-content {
    display: block;
}

/* a11y 2026-06-25 (WCAG 2.4.1 bypass-blocks) — skip-to-content link: off-screen until
   focused, then appears top-left. Targets the single <main id="main-content"> landmark. */
.lx-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100000;
    padding: 12px 20px; background: var(--lx-ink-primary); color: var(--lx-white);
    font-family: var(--lx-font-sans); font-size: 14px; letter-spacing: 0.04em;
    text-decoration: none; border-radius: 0 0 4px 0;
}
.lx-skip-link:focus { left: 0; top: 0; }

/* P0-5 — Color contrast fixes per aXe-flagged selectors:

   (a) .lx-image-slot-label — was #9b9791 / #a8a6a4 (2.27 / 2.42 ratio).
       Used in homepage editorial-slot labels (figure caption text). Move
       to --text-secondary (#5C544C → 7.5:1 on Ivory; passes AA).
*/
.lx-image-slot-label {
    color: var(--text-secondary) !important;   /* was off-brand grey-tan */
}

/* (b) Hotel-demo gold #c39a2c LEAKING onto WC Cart Block product-name link
       + Checkout Block terms links. My §1 :root --k-color-* redeclarations
       didn't reach these because Kalium-parent CSS rules use the raw hex
       directly (NOT via var()), and WC-Blocks injected `link` color via
       a different cascade path. Override with high-specificity brand grey. */
.wp-block-woocommerce-cart .wc-block-components-product-name,
.wp-block-woocommerce-cart .wc-block-components-product-name:link,
.wp-block-woocommerce-cart .wc-block-components-product-name:visited,
.wp-block-woocommerce-checkout .wc-block-checkout__terms a,
.wp-block-woocommerce-checkout .wc-block-components-checkbox__label a,
.wc-block-components-product-name {
    color: var(--text-primary) !important;     /* #3D3935 — 13:1 on white */
}
.wp-block-woocommerce-cart .wc-block-components-product-name:hover,
.wp-block-woocommerce-checkout .wc-block-checkout__terms a:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkbox__label a:hover {
    color: var(--text-secondary) !important;   /* #5C544C — 7.5:1 on white */
}

/* (c) Audit also flagged general "Background and foreground colors do not have
       a sufficient contrast ratio" on Homepage + Cart + Checkout. The two
       above selectors cover the major culprits. Re-audit after deploy to
       catch any remaining; address per-selector in §25.26 follow-ups. */

/* P0-6 — elementorFrontendConfig race condition: see functions.php for the
   wp_print_footer_scripts hook that re-injects the config object late in
   the page lifecycle. No CSS component needed here. */

/* ==========================================================================
   §29 — Footer (Kalium-native, 4 columns + bottom row) 2026-05-13
   ========================================================================== */

footer.site-footer {
    background-color: #3D3935;      /* Lennox Grey */
    color: #FAF7F4;                  /* Ivory */
    padding: 64px 0 24px;
}
footer.site-footer .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
/* Column heading */
footer.site-footer .footer-heading,
footer.site-footer h4 {
    font-family: 'Optima Pro', 'Optima', sans-serif !important; /* §1d.b — Optima, not Garamond */
    font-size: 13px !important;            /* §1d.b — smaller (block sets ~22px; !important beats it) */
    font-weight: 600 !important;           /* §1d.b — bold (Optima demibold) */
    letter-spacing: 0.1em !important;
    color: #FAF7F4;                        /* §1d.b — colour TBD per operator; kept Ivory for now */
    margin: 0 0 18px;
    padding: 0;
    text-transform: uppercase !important;  /* §1d.b — capitalised */
}
/* Link styling — Optima caps tracking. Bumped color + size for legibility on
   the dark grey footer bg (AA target 4.5:1; we aim for AAA 7:1+). */
footer.site-footer .footer-links a,
footer.site-footer a {
    font-family: 'Optima Pro', 'Optima', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #FAF7F4;                  /* Ivory — 10.72:1 contrast on Lennox Grey bg */
    text-decoration: none;
    transition: opacity 200ms ease;
    opacity: 0.85;
}
footer.site-footer .footer-links a:hover,
footer.site-footer a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
}
footer.site-footer .footer-links p {
    margin: 8px 0;
    line-height: 1.7;
}
/* Brand statement (col 1) — bumped to Ivory at 90% for warmth */
footer.site-footer .footer-brand-statement {
    font-family: 'Garamond Premier Pro', Garamond, Georgia, serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: #FAF7F4;
    opacity: 0.9;
    margin: 18px 0 18px;
    max-width: 280px;
}
/* Address block (col 1) — bumped to Ivory at 80% opacity for AA+ contrast */
footer.site-footer .footer-address {
    font-family: 'Optima Pro', 'Optima', sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: #FAF7F4;
    opacity: 0.8;
    margin: 0;
    letter-spacing: 0.02em;
}
/* Footer image (logo) */
footer.site-footer .wp-block-image img {
    filter: none;
    max-width: 160px;
    height: auto;
}
/* Bottom row */
footer.site-footer .footer-bottom {
    border-top: 1px solid rgba(220, 212, 200, 0.18);
    margin-top: 48px;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
footer.site-footer .footer-copyright {
    font-family: 'Optima Pro', 'Optima', sans-serif;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #FAF7F4;
    opacity: 0.75;
    margin: 0;
}
/* Social icons in bottom row — Kalium shortcode wraps in .kalium-social-icons */
footer.site-footer .kalium-social-icons a {
    color: #DCD4C8;
}
footer.site-footer .kalium-social-icons a:hover {
    color: #FAF7F4;
}
/* §B14 — enlarge footer social icons (client 2026-06-23). The footer uses the WP
   social-links block (not Kalium's .kalium-social-icons), so the has-large-icon-size
   block class has no stylesheet here — size the icon svg directly. */
footer.site-footer .footer-bottom .wp-block-social-links { font-size: 28px; }
footer.site-footer .footer-bottom .wp-block-social-links svg { width: 28px; height: 28px; }
/* Bottom-row payment methods strip */
footer.site-footer .footer-payment-methods {
    width: auto;          /* §1d.e — join copyright + social on one row (was width:100% -> own line) */
    text-align: center;
    margin: 0;
    font-family: 'Optima Pro', 'Optima', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: #FAF7F4;
    opacity: 0.6;
    text-transform: none;
}
/* §1d.f — kill the redundant WPML footer language switcher (the header already has one);
   it was rendering as an orphaned boxed switcher in the ivory strip below the dark footer.
   Scoped to the WPML *footer* feature class only — does NOT touch the header's switcher. */
.wpml-ls-statics-footer { display: none !important; }

/* §1d — VAT disclaimer relocated INTO the footer (Germanized's wp_footer copy suppressed in lennox-fixes.php) */
footer.site-footer .footer-vat-note {
	width: 100%;
	text-align: center;
	margin: 18px 0 0;
	font-family: 'Optima Pro', 'Optima', sans-serif;
	font-size: 11px;
	letter-spacing: 0.10em;
	color: #FAF7F4;
	opacity: 0.55;
}

/* Row gutter on small screens */
@media (max-width: 992px) {
    footer.site-footer .row {
        --k-gutter-y: 32px;
    }
    footer.site-footer .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   §30 — Elementor Pro Form (Contact + Trade) brand styling 2026-05-13
   ========================================================================== */

.elementor-form .elementor-field-group > label,
.elementor-form label.elementor-field-label {
    font-family: 'Optima Pro', 'Optima', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #5C544C;                  /* Ink Soft */
    margin-bottom: 6px;
}
.elementor-form input[type="text"],
.elementor-form input[type="email"],
.elementor-form input[type="tel"],
.elementor-form input[type="url"],
.elementor-form input[type="number"],
.elementor-form textarea,
.elementor-form select {
    font-family: 'Garamond Premier Pro', Garamond, Georgia, serif;
    font-size: 15px;
    line-height: 1.5;
    color: #3D3935;                  /* Ink primary */
    background-color: #FAF7F4;       /* Ivory */
    border: 1px solid #B5ACA3 !important;  /* Cashmere */
    border-radius: 2px;
    padding: 14px 16px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.elementor-form input:focus,
.elementor-form textarea:focus,
.elementor-form select:focus {
    border-color: #3D3935 !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(61, 57, 53, 0.08);
}
.elementor-form input::placeholder,
.elementor-form textarea::placeholder {
    color: #B5ACA3;
    opacity: 1;
}
.elementor-form textarea {
    min-height: 140px;
    resize: vertical;
}
/* Required asterisk colour — semantic state error */
.elementor-form .elementor-field-required-mark,
.elementor-mark-required .elementor-field-label::after {
    color: #8A3D3D;
}
/* Submit button: Lennox Grey primary */
.elementor-form button.elementor-button,
.elementor-form input[type="submit"].elementor-button {
    background-color: #3D3935 !important;
    color: #FAF7F4 !important;
    border: 0;
    padding: 14px 28px;
    font-family: 'Optima Pro', 'Optima', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 200ms ease;
}
.elementor-form button.elementor-button:hover,
.elementor-form input[type="submit"].elementor-button:hover {
    background-color: #5C544C !important;
}
/* §30.b — Form choice controls (select / radio / checkbox)
   Fixes: duplicate dropdown chevron (Kalium bg-image + Elementor SVG caret),
   under-styled radio buttons, hard-to-see acceptance checkbox.
   ========================================================================== */

/* SELECT — kill Kalium's background-image chevron; keep Elementor's SVG wrapper */
.elementor-form select.elementor-field-textual,
.elementor-form .elementor-select-wrapper select {
    background-image: none !important;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 44px;     /* leave room for Elementor's caret on right */
}
.elementor-form .elementor-select-wrapper {
    position: relative;
}
.elementor-form .elementor-select-wrapper .select-caret-down-wrapper {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #3D3935;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.elementor-form .elementor-select-wrapper .select-caret-down-wrapper svg {
    width: 12px;
    height: 12px;
    fill: #3D3935;
}

/* RADIO — flat circle, no gold border. Filled inner dot when checked. */
.elementor-form input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #B5ACA3;        /* Cashmere */
    background-color: #FAF7F4;          /* Ivory */
    border-radius: 50%;
    margin: 0 10px 0 0 !important;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 200ms ease;
}
.elementor-form input[type="radio"]:hover {
    border-color: #5C544C;
}
.elementor-form input[type="radio"]:checked {
    border-color: #3D3935;
}
.elementor-form input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background-color: #3D3935;          /* Lennox Grey filled dot */
}
.elementor-form .elementor-field-subgroup .elementor-field-option {
    display: flex;
    align-items: center;
    margin-right: 24px;
    margin-bottom: 8px;
    font-family: 'Garamond Premier Pro', Garamond, Georgia, serif;
    font-size: 15px;
    color: #3D3935;
}
.elementor-form .elementor-field-subgroup .elementor-field-option label {
    cursor: pointer;
    margin-bottom: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: inherit;
}

/* CHECKBOX (acceptance + any other) — bigger square, visible Ivory bg + Cashmere
   border, clean ✓ glyph when checked. Especially important for the single
   privacy-consent checkbox so it's unmissable. */
.elementor-form input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #B5ACA3;
    background-color: #FAF7F4;
    border-radius: 2px;
    margin: 0 10px 0 0 !important;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
    transition: border-color 200ms ease, background-color 200ms ease;
}
.elementor-form input[type="checkbox"]:hover {
    border-color: #5C544C;
}
.elementor-form input[type="checkbox"]:checked {
    background-color: #3D3935;
    border-color: #3D3935;
}
.elementor-form input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #FAF7F4;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Acceptance field — the privacy-policy single checkbox needs the box +
   label vertically aligned + room to breathe */
.elementor-form .elementor-field-type-acceptance .elementor-field-option {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 8px 0 0;
}
.elementor-form .elementor-field-type-acceptance input[type="checkbox"] {
    margin-top: 3px !important;
}
.elementor-form .elementor-field-type-acceptance label {
    margin-bottom: 0;
    font-family: 'Garamond Premier Pro', Garamond, Georgia, serif;
    font-size: 14px;
    line-height: 1.5;
    color: #3D3935;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.elementor-form .elementor-field-type-acceptance label a {
    color: #3D3935;
    border-bottom: 1px solid #B5ACA3;
    text-decoration: none;
}

/* Validation messages */
.elementor-message-success,
.elementor-form .elementor-message-success {
    background-color: rgba(74, 107, 78, 0.08);
    border-left: 3px solid #4A6B4E;
    color: #3D3935;
    padding: 12px 16px;
    font-family: 'Optima Pro', 'Optima', sans-serif;
    font-size: 13px;
}
.elementor-message-danger,
.elementor-form .elementor-message-danger,
.elementor-form .elementor-field-required-mark + .elementor-error-msg {
    background-color: rgba(138, 61, 61, 0.08);
    border-left: 3px solid #8A3D3D;
    color: #8A3D3D;
    padding: 12px 16px;
    font-family: 'Optima Pro', 'Optima', sans-serif;
    font-size: 13px;
}

/* ==========================================================================
   §28 — Kalium parent-theme sticky-header rescue (2026-05-13)

   Kalium's sticky-header.min.js adds these classes to <header.site-header>
   on scroll:
     - sticky-element-{hash}      (unique instance marker)
     - sticky-element-fixed       (intended position:fixed trigger)
     - sticky-element-active      (active state)
     - sticky-element-fully-active (fully-scrolled state)

   But the parent CSS rule that triggers position:fixed is
     `.sticky-element-fixed .sticky-element { position: fixed }`
   — a DESCENDANT selector requiring a child with class `.sticky-element`.
   The rendered DOM has `.sticky-element-{hash}` (compound class) on the
   header itself, NOT a separate `.sticky-element` child. So the rule
   never matches and the header scrolls away with the page.

   This rescue applies position:fixed directly to the header when the JS
   adds `.sticky-element-fixed`. Also handles the autohide pattern via
   the .sticky-element-active class toggle.
   ========================================================================== */

/* Kalium's sticky pattern uses a placeholder + inner pill split:
     <header.sticky-element-fixed>         ← flow placeholder; KEEP transparent
       <div.sticky-element>                ← actual visible sticky pill
         <div.sticky-element__content>     ← content, toggled visible by JS
   The outer <header> must NOT paint a bg when fixed — otherwise the original
   flow-height (165px) leaks as a giant white bar at top of viewport. */
header.site-header.sticky-element-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background-color: transparent !important;
    pointer-events: none;
    transition: transform 300ms ease-in-out !important;
    will-change: transform;
}
/* Logged-in admin users see the WP admin bar at top; push sticky below it */
body.admin-bar header.site-header.sticky-element-fixed {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar header.site-header.sticky-element-fixed {
        top: 46px !important;  /* WP admin bar is 46px on mobile */
    }
}

/* The actual visible sticky pill — paint bg here */
header.site-header.sticky-element-fixed > .sticky-element {
    background-color: var(--k-header-bg, #FFFFFF) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    pointer-events: auto;
}

/* Autohide mode: when .sticky-element-fixed is on but .sticky-element-active
   is OFF (i.e., scrolled past trigger but not currently revealed), slide up
   off-screen. When .sticky-element-active is added back (typically on scroll
   up), slide back down. */
header.site-header.sticky-element-fixed:not(.sticky-element-active) {
    transform: translateY(-100%) !important;
}
header.site-header.sticky-element-fixed.sticky-element-active {
    transform: translateY(0) !important;
}

/* Sticky shrink-logo + reduced padding from customizer
   (sticky_header_shrink_logo=1, sticky_header_vertical_padding=12) */
header.site-header.sticky-element-fixed .header-block {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
header.site-header.sticky-element-fixed .header-logo img {
    transition: width 200ms ease-out !important;
    max-height: 40px !important;
    width: auto !important;
}

/* Make sure the .sticky-element__content wrapper inside doesn't fight the
   fixed positioning (it lives at width 100% inside the now-fixed header) */
header.site-header.sticky-element-fixed > .sticky-element__content {
    width: 100% !important;
}

/* ==========================================================================
   §40 — LENNOX DESIGN-SYSTEM PORT (M2.5 corrective rebuild 2026-05-13)
   Source of truth: design-imports/2026-05-11_lennox_storefront_v1/
                    design_handoff_lennox_storefront/design_references/
                    ui_kits/woocommerce/lennox.css (376 lines, client-provided)
   This section ports the client's production tokens + components VERBATIM
   so PDP, shop card, cart, checkout, account share one canonical class set.
   Earlier §25.22 (shop card) + §25.23 (PDP) were heroic improvisation
   that drifted from the mockup — both are SUPERSEDED by this section.
   ========================================================================== */

/* §40.0 — Body surface (M8, 2026-05-14).
   The canonical mockup sets `body { background: var(--surface-primary) }` =
   Lennox Ivory #FAF7F4. Kalium parent does not set body bg, so the browser
   default white was rendering everywhere — making every page feel clinical
   instead of warm-editorial. This single rule restores the brand surface.
   Specificity bumped via double-class so we win over any parent body.X rule. */
html body.wp-theme-kalium { background: var(--lx-ivory) !important; }

/* §40.1 — Type tokens (mirrors lennox.css L61-71) */
.t-display-128 { font-family: var(--font-display); font-weight: 600; font-size: 128px; line-height: 0.98; letter-spacing: -0.02em; }
.t-display-96  { font-family: var(--font-display); font-weight: 600; font-size: 96px;  line-height: 1.02; letter-spacing: -0.015em; }
.t-display-72  { font-family: var(--font-display); font-weight: 600; font-size: 72px;  line-height: 1.05; letter-spacing: -0.01em; }
.t-display-56  { font-family: var(--font-display); font-weight: 600; font-size: 56px;  line-height: 1.08; letter-spacing: -0.01em; }
.t-display-40  { font-family: var(--font-display); font-weight: 600; font-size: 40px;  line-height: 1.1; }
.t-subhead-28  { font-family: var(--font-serif);   font-weight: 500; font-size: 28px;  line-height: 1.2; }
.t-subhead-22  { font-family: var(--font-serif);   font-weight: 500; font-size: 22px;  line-height: 1.25; }
.t-editorial-22{ font-family: var(--font-serif);   font-weight: 400; font-size: 22px;  line-height: 1.55; letter-spacing: 0.005em; }
.t-pullquote   { font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 48px; line-height: 1.2; letter-spacing: -0.005em; }
.t-body-18     { font-family: var(--font-serif);   font-weight: 400; font-size: 18px;  line-height: 1.55; }
.t-body-15     { font-family: var(--font-serif);   font-weight: 400; font-size: 15px;  line-height: 1.55; }
.t-ui-14       { font-family: var(--font-sans);    font-weight: 500; font-size: 14px;  line-height: 1.3; letter-spacing: 0.02em; }
.t-ui-13       { font-family: var(--font-sans);    font-weight: 400; font-size: 13px;  line-height: 1.4; }
.t-eyebrow     { font-family: var(--font-sans);    font-weight: 500; font-size: 12px;  line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); }
.t-price       { font-family: var(--font-display); font-weight: 600; font-size: 24px; }
.muted         { color: var(--text-secondary); }

/* §40.2 — Layout primitives */
.lx-container.lx-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section--pearl   { background: var(--surface-secondary); }
.section--inverse { background: var(--surface-inverse); color: var(--text-inverse); }
.section--inverse .t-eyebrow { color: rgba(250,247,244,0.7); }

/* §40.3 — Soft card (signature surface) */
.soft {
    background: rgba(232, 227, 220, 0.5);   /* Pearl @ 50% */
    border: 0;
    border-radius: 12px;
    transition: background .25s ease-out, transform .25s ease-out, box-shadow .25s ease-out;
}
.soft--inset { padding: var(--s-6); }
.soft--hover:hover {
    background: var(--surface-secondary);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(61,57,53,0.08);
}
.soft-oval {
    background: rgba(232, 227, 220, 0.5);
    border-radius: 999px / 60%;
    border: 0;
    display: flex; align-items: center; justify-content: center;
}

/* §40.4 — Breadcrumb */
.crumb { font-family: var(--font-sans); font-size: 12px; color: rgba(61,57,53,0.72); padding: var(--s-4) 0; letter-spacing: 0.04em; }
.crumb a { color: rgba(61,57,53,0.72); border: 0; text-decoration: none; }
.crumb a:hover { color: var(--text-primary); }
.crumb span.sep { margin: 0 8px; color: var(--border-subtle); }

/* §40.5 — Bottle placeholder (.bottle, .bottle--lg, .bottle-stage)
   Stand-in for real product photography. Per design README, replace with
   real bottle photo when available; the CSS placeholder stays for now. */
.bottle.bottle {
    position: relative !important;
    width: 84px !important;
    height: 280px !important;
    background: linear-gradient(180deg, #243228 0%, #1E2A24 50%, #1A241F 100%) !important;
    border-radius: 42px 42px 8px 8px !important;
    box-shadow: inset -8px 0 18px rgba(0,0,0,0.35), inset 8px 0 18px rgba(255,255,255,0.04) !important;
    margin: 0 auto !important;
    display: block !important;
}
.bottle::before {
    content: ""; position: absolute; top: -6px; left: 14px; right: 14px; height: 22px;
    background: linear-gradient(180deg,#8E754F,#6E5A3A);
    border-radius: 4px 4px 0 0;
}
.bottle::after {
    content: ""; position: absolute; left: 8px; right: 8px; top: 100px; height: 120px;
    background: var(--surface-primary);
}
.bottle__mark { position: absolute; left: 50%; top: 118px; transform: translateX(-50%); width: 24px; opacity: 0.85; z-index: 1; }
.bottle__word { position: absolute; left: 0; right: 0; top: 154px; text-align: center; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.32em; font-size: 10px; color: var(--text-primary); z-index: 1; }
.bottle__sub  { position: absolute; left: 0; right: 0; top: 174px; text-align: center; font-family: var(--font-sans); font-size: 8px; color: var(--text-secondary); letter-spacing: 0.08em; z-index: 1; }
.bottle.bottle--lg { width: 160px !important; height: 540px !important; border-radius: 80px 80px 12px 12px !important; }
.bottle.bottle--lg::before { top: -10px !important; left: 28px !important; right: 28px !important; height: 36px !important; }
.bottle.bottle--lg::after  { top: 190px !important; height: 230px !important; left: 14px !important; right: 14px !important; }
.bottle.bottle--lg .bottle__mark { top: 220px !important; width: 48px !important; }
.bottle.bottle--lg .bottle__word { top: 286px !important; font-size: 18px !important; }
.bottle.bottle--lg .bottle__sub  { top: 320px !important; font-size: 12px !important; }
.bottle-stage {
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-1);
}

/* §40.6 — Buttons (.btn / .btn--primary / .btn--secondary / .btn--tertiary)
   Scoped under .lx-pdp or .lx-shop-card to win cascade vs. Kalium parent. */
.lx-pdp .btn,
.lx-shop-card .btn,
.lx-cart .btn,
.lx-checkout .btn,
.btn.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    font-family: var(--font-sans); font-weight: 500; font-size: 14px; letter-spacing: 0.04em;
    padding: 16px 36px;
    border-radius: var(--r-1); border: 1px solid transparent;
    cursor: pointer;
    transition: background .2s ease-out, color .2s ease-out, border-color .2s ease-out, transform .2s ease-out, box-shadow .2s ease-out;
    text-decoration: none; min-height: 48px;
    line-height: 1;
}
.lx-pdp .btn--primary,
.btn.btn--primary {
    background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--surface-inverse);  /* §1b primary FILLED (client 2026-06-23 — supersedes earlier outline) */
}
.lx-pdp .btn--primary:hover,
.btn.btn--primary:hover {
    background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--surface-inverse);  /* §1b primary stays FILLED, lifts on hover */
    transform: translateY(-1px); box-shadow: 0 8px 20px rgba(61,57,53,0.24);
}
.lx-pdp .btn--secondary,
.btn.btn--secondary {
    background: transparent; color: var(--text-primary); border-color: var(--text-primary);
}
.lx-pdp .btn--secondary:hover,
.btn.btn--secondary:hover {
    background: var(--surface-inverse); color: var(--text-inverse);
    transform: translateY(-1px); box-shadow: 0 6px 18px rgba(61,57,53,0.14);
}
.lx-pdp .btn--block,
.btn.btn--block { width: 100%; }

/* §1b — Buttons UPPERCASE + Optima Pro site-wide. PRIMARY = FILLED (grey bg, ivory
   text); SECONDARY = outline-at-rest → fill+ivory-on-hover (client agreed 2026-06-23
   to primary-filled / secondary-outline — supersedes the brief all-outline call).
   Also covers the WC menu-cart drawer buttons (view-cart / checkout) which previously
   fell through to the body serif (Garamond). */
.elementor-widget-button .elementor-button,
.elementor-button--view-cart, .elementor-button--checkout,
.lx-pdp .btn--primary, .btn.btn--primary,
.lx-pdp .btn--secondary, .btn.btn--secondary {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-sans);
}

/* §40.7 — Quantity stepper (.qty) */
.lx-pdp .qty,
.qty.qty {
    display: inline-flex; align-items: center;
    border: 1px solid var(--border-subtle); border-radius: var(--r-1);
    background: var(--surface-primary);
}
.lx-pdp .qty button,
.qty.qty button {
    background: transparent; border: 0; padding: 12px 14px; cursor: pointer;
    color: var(--text-primary); font-family: var(--font-sans); font-size: 16px;
    min-width: 44px; min-height: 44px;
}
.lx-pdp .qty span,
.qty.qty span {
    min-width: 32px; text-align: center;
    font-family: var(--font-sans); font-size: 15px;
}

/* §40.8 — Disclosure / accordion (PDP fold-outs) */
.lx-pdp .disclosure,
.disclosure.disclosure { border-bottom: 1px solid var(--border-subtle); }
.lx-pdp .disclosure summary,
.disclosure.disclosure summary {
    list-style: none; cursor: pointer; padding: 18px 0;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-primary);
}
.lx-pdp .disclosure summary::-webkit-details-marker,
.disclosure.disclosure summary::-webkit-details-marker { display: none; }
.lx-pdp .disclosure summary::after,
.disclosure.disclosure summary::after {
    content: ""; width: 12px; height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D3935' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
    transition: transform .2s;
}
.lx-pdp .disclosure[open] summary::after,
.disclosure.disclosure[open] summary::after { transform: rotate(180deg); }
.lx-pdp .disclosure__body,
.disclosure__body.disclosure__body {
    padding: 0 0 24px; font-family: var(--font-serif); font-size: 16px; line-height: 1.55;
    color: var(--text-primary);
}
.lx-pdp .disclosure__body p,
.disclosure__body.disclosure__body p { margin: 0 0 10px; }
.lx-pdp .disclosure__body dl,
.disclosure__body.disclosure__body dl {
    display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; margin: 0;
}
.lx-pdp .disclosure__body dt,
.disclosure__body.disclosure__body dt {
    font-family: var(--font-sans); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-secondary);
}
.lx-pdp .disclosure__body dd,
.disclosure__body.disclosure__body dd { margin: 0; }

/* §40.9 — Express checkout buttons (.express-row / .express-btn) */
.lx-pdp .express-row,
.express-row.express-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.lx-pdp .express-btn,
.express-btn.express-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; border-radius: var(--r-1); cursor: pointer;
    font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
    border: 1px solid var(--border-subtle);
    background: var(--surface-primary); color: var(--text-primary);
    transition: background .15s, border-color .15s;
}
.lx-pdp .express-btn:hover,
.express-btn.express-btn:hover { border-color: var(--text-primary); }
.lx-pdp .express-btn--dark,
.express-btn--dark.express-btn--dark {
    background: #000; color: #fff; border-color: #000;
}
.lx-pdp .express-btn--dark:hover,
.express-btn--dark.express-btn--dark:hover { background: #1a1a1a; }
.lx-pdp .express-btn--paypal,
.express-btn--paypal.express-btn--paypal {
    background: #FFC439; color: #003087; border-color: #FFC439; font-weight: 700;
}
.lx-pdp .express-btn--paypal:hover,
.express-btn--paypal.express-btn--paypal:hover {
    background: #FFB600; border-color: #FFB600;
}
.lx-pdp .express-divider,
.express-divider.express-divider {
    display: flex; align-items: center; gap: 14px; margin: 24px 0;
    font-family: var(--font-sans); font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-secondary);
}
.lx-pdp .express-divider::before, .lx-pdp .express-divider::after,
.express-divider.express-divider::before, .express-divider.express-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--border-subtle);
}
.lx-pdp__express-gateways {
    display: grid;
    gap: 10px;
    margin-bottom: 32px;
}
.lx-pdp__express-gateways:empty { display: none; }
.lx-pdp__express-gateways #wc-stripe-express-checkout-element,
.lx-pdp__express-gateways .ppc-button-wrapper,
.lx-pdp__express-gateways .paypal-buttons,
.lx-pdp__express-gateways .paypal-buttons-context-iframe {
    width: 100% !important;
    max-width: 100% !important;
}
.lx-pdp__express-gateways #wc-stripe-express-checkout-element {
    clear: none !important;
    margin: 0 !important;
}
.lx-pdp__express-gateways wc-order-attribution-inputs {
    display: none;
}

/* §40.10 — Tag pills (.tag for dietary, .tag--soft for status) */
.lx-pdp .tag,
.tag.tag {
    display: inline-block; font-family: var(--font-sans); font-size: 11px;
    padding: 4px 10px; letter-spacing: 0.12em; text-transform: uppercase;
    border-radius: 999px; background: transparent; color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}
.lx-pdp .tag--soft,
.tag--soft.tag--soft {
    background: var(--surface-secondary); border-color: transparent;
    color: var(--text-secondary);
}

/* §40.11 — Mobile responsive (lennox.css L364-376) */
@media (max-width: 640px) {
    .t-display-72 { font-size: 44px; }
    .t-display-56 { font-size: 36px; }
    .t-display-40 { font-size: 30px; }
}

/* §40.12 — PDP page layout
   Mirrors design-imports product.html line-by-line: 1.1fr/1fr grid, 80px gap,
   sticky right column, 680px bottle stage, 4-thumb strip, double-rule price
   block, format toggle row, qty row, cart row, express row, 5 disclosures,
   Pearl tasting band.
*/
.lx-pdp-wrapper {
    background: var(--surface-primary);
}
.lx-pdp { display: block; }
.lx-pdp__section { padding: 24px 0 96px; }
.lx-pdp__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: flex-start;
}
@media (max-width: 1024px) {
    .lx-pdp__grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Gallery — LEFT */
.lx-pdp__gallery { width: 100%; }
.lx-pdp__stage { height: 680px; margin-bottom: 16px; border: 0; }
@media (max-width: 768px) {
    .lx-pdp__stage { height: 480px; }
}
.lx-pdp__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.lx-pdp__thumb {
    height: 120px;
    cursor: pointer;
    position: relative;
    border: 0; /* §7.4 — no subtle border on thumbs; .is-active keeps its indicator */
}
.lx-pdp__thumb.is-active { border: 1px solid var(--text-primary); }
.lx-pdp__thumb-label {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* §7.4b — real-image PDP gallery (WC Product image + Product gallery), rendered
   by content-single-product.php when images are set; the .bottle placeholder is
   the fallback when none are. Thumbs are <button>s now → Kalium styles
   [type=button], so scope the reset under .lx-pdp__gallery to win (no !important). */
/* Real-image stage sizes to the photo's own ratio (height:auto overrides the
   .lx-pdp__stage 680px, which is kept for the .bottle placeholder). The gallery
   mixes 4:3 (hero) + 1:1 photos, so a fixed height letterboxed every image with
   grey Pearl bands top/bottom — height:auto + the <img> natural height removes
   them for any ratio without cropping. */
.lx-pdp__stage--img { display: block; height: auto; overflow: hidden; background: var(--lx-pearl); border-radius: 4px; }
/* Imagify wraps wp_get_attachment_image in <picture> with our class on the
   WRAPPER, so constrain the inner <img> too (object-fit no-ops on <picture>). */
.lx-pdp__gallery .lx-pdp__main-img,
.lx-pdp__gallery .lx-pdp__main-img img { width: 100%; height: auto; object-fit: contain; margin: 0; display: block; }
.lx-pdp__gallery button.lx-pdp__thumb { background: none; border: 1px solid transparent; -webkit-appearance: none; appearance: none; padding: 0; overflow: hidden; border-radius: 4px; }
.lx-pdp__gallery button.lx-pdp__thumb.is-active { border: 1px solid var(--text-primary); }
.lx-pdp__gallery .lx-pdp__thumb-img,
.lx-pdp__gallery .lx-pdp__thumb-img img { width: 100%; height: 100%; object-fit: cover; margin: 0; display: block; }

/* Meta column — RIGHT, sticky */
.lx-pdp__info {
    position: sticky;
    top: 96px;
    align-self: flex-start;
}
@media (max-width: 1024px) {
    .lx-pdp__info { position: static; top: auto; }
}
.lx-pdp__title { margin: 14px 0 10px; }
.lx-pdp__tagline { font-style: italic; margin: 0 0 24px; max-width: 480px; }

/* Double-rule price block */
.lx-pdp__price-block {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 28px;
}
.lx-pdp__price { font-size: 32px; line-height: 1; }
.lx-pdp__price .woocommerce-Price-amount,
.lx-pdp__price .amount,
.lx-pdp__price bdi { font: inherit; color: inherit; }
.lx-pdp__price-meta {  }  /* uses .t-ui-13 .muted */

.lx-pdp__blurb { margin: 0 0 28px; max-width: 480px; }

/* Format + Quantity rows */
.lx-pdp__row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.lx-pdp__row + .lx-pdp__row { margin-bottom: 24px; }
.lx-pdp__row-label { min-width: 70px; }
.lx-pdp__format-btn.lx-pdp__format-btn {
    padding: 10px 18px !important;
    min-height: 0;
    border-color: var(--text-primary) !important;
    flex: 0 1 auto;
}
.lx-pdp__format-btn.is-active.is-active {
    background: var(--text-primary);
    color: var(--text-inverse);
}
.lx-pdp__qty.lx-pdp__qty { background: var(--surface-primary); }
.lx-pdp__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}
.lx-pdp__stock svg { stroke: currentColor; }

/* Cart row */
.lx-pdp__cart-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    align-items: stretch;
}
.lx-pdp__cart-form { flex: 1 1 100%; margin: 0; }
.lx-pdp__add,
.lx-pdp__checkout { width: 100%; }
.lx-pdp__wishlist {
    flex: 0 0 auto;
    padding: 0 16px !important;
    min-width: 52px;
}

/* Express row spacing */
.lx-pdp__express { margin-bottom: 32px; }

/* Disclosures */
.lx-pdp__disclosures {
    border-top: 1px solid var(--border-subtle);
    margin-top: 8px;
}

/* Tasting band */
.lx-pdp__tasting { padding: 80px 0; }
.lx-pdp__tasting-inner.lx-pdp__tasting-inner {
    max-width: 780px;
    text-align: center;
    padding: 0 var(--gutter);
}
.lx-pdp__tasting-inner .t-eyebrow { display: block; margin-bottom: 24px; }
.lx-pdp__tasting-line {
    font-style: italic;
    margin: 24px 0 16px;
    line-height: 1.25;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .lx-pdp__section { padding: 16px 0 64px; }
    .lx-pdp__price { font-size: 28px; }
    .lx-pdp__cart-row { flex-direction: column; }
    .lx-pdp__wishlist { width: 100%; }
    .lx-pdp__tasting { padding: 56px 0; }
    .lx-pdp__tasting-line { font-size: 22px; }
}

/* §40.13 — Cart page (.lx-cart-*) — M3.5 (2026-05-13).
   Mirrors design-imports/.../pages/cart.html:
     - Breadcrumb + H1 "Your cart." + subhead
     - 1.6fr / 1fr grid, 80px gap
     - LEFT: cart items as <article> rows (140px / 1fr / auto)
     - RIGHT: .soft aside summary
     - Bottom: .section--pearl 3-col help band */
.lx-cart { padding: 24px 0 96px; }
.lx-cart__header { margin-bottom: 40px; }
.lx-cart__title { margin: 0 0 6px; }
.lx-cart__subhead { margin: 0; }
.lx-cart__grid.lx-cart__grid {
    display: grid !important;
    grid-template-columns: 1.6fr 1fr !important;
    gap: 80px !important;
    align-items: start !important;
    max-width: var(--container);
    margin: 0 auto;
}
@media (max-width: 1024px) {
    .lx-cart__grid.lx-cart__grid { grid-template-columns: 1fr !important; gap: 48px !important; }
}
/* Defeat any constraining parent wrapper inherited from Kalium's page.php */
.lx-cart .lx-container { max-width: var(--container); }
.lx-cart { width: 100%; }
/* The .woocommerce wrapper that wraps shortcode content may force display:block;
   ensure my form / grid layout isn't broken */
.woocommerce-cart .lx-cart .lx-cart__form { margin: 0; }
.woocommerce-cart .lx-cart .lx-cart__items { min-width: 0; }
.woocommerce-cart .lx-cart .lx-cart__summary { min-width: 0; }

.lx-cart__list {
    border-top: 1px solid var(--border-subtle);
}
.lx-cart-item {
    display: grid !important;
    grid-template-columns: 140px 1fr auto;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-subtle);
    align-items: center;
}
@media (max-width: 640px) {
    .lx-cart-item {
        grid-template-columns: 100px 1fr;
        grid-template-rows: auto auto;
    }
    .lx-cart-item__price { grid-column: 1 / -1; text-align: left; padding-top: 8px; }
}

.lx-cart-item__thumb.soft-oval {
    width: 140px;
    height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 640px) {
    .lx-cart-item__thumb.soft-oval { width: 100px; height: 140px; }
}
.lx-cart-item__thumb img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.lx-cart-item__body { min-width: 0; }
.lx-cart-item__title { margin: 0; }
.lx-cart-item__title a { color: inherit; text-decoration: none; border-bottom: 0; }
.lx-cart-item__title a:hover { color: var(--text-secondary); }
.lx-cart-item__variation { margin: 6px 0 14px; font-style: italic; }
.lx-cart-item__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.lx-cart-item__qty.qty,
.qty.lx-cart-item__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-1);
    background: var(--surface-primary);
}
.lx-cart-item__qty .qty,
.lx-cart-item__qty input.qty {
    background: transparent;
    border: 0;
    min-height: 44px;
    width: 48px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--text-primary);
    padding: 0;
    -moz-appearance: textfield;
}
.lx-cart-item__qty input::-webkit-outer-spin-button,
.lx-cart-item__qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.lx-cart-item__remove.btn--tertiary,
.btn--tertiary.lx-cart-item__remove {
    padding: 8px 0 !important;
    min-height: 0 !important;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    color: var(--text-primary);
    background: transparent;
}
.lx-cart-item__remove:hover {
    border-bottom-color: var(--text-primary) !important;
    color: var(--text-primary);
}

.lx-cart-item__price { text-align: right; }
.lx-cart-item__price .t-price,
.lx-cart-item__price .woocommerce-Price-amount,
.lx-cart-item__price .amount { font: inherit; color: inherit; }

.lx-cart__actions-row {
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.lx-cart__continue,
.lx-cart__update {
    padding: 8px 0 !important;
    min-height: 0 !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
}
.lx-cart__continue:hover,
.lx-cart__update:hover {
    border-bottom-color: var(--text-primary) !important;
}

/* Right aside .soft summary */
.lx-cart__summary {
    padding: 32px;
    align-self: start;
    background: var(--surface-secondary); /* §10.2 — solid grey fill (was translucent .soft Pearl@50%) */
    box-shadow: 0 12px 32px rgba(61, 57, 53, 0.08); /* §10.2 — hovering card, brand elevated style (Rosé landing) */
    border-radius: var(--r-soft-card); /* §B23/B25 — soft hovering-card corners (client 2026-06-23) */
}
.lx-cart-summary__title { margin: 0 0 24px; }
.lx-cart-summary__lines {
    margin: 0;
    display: grid;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.lx-cart-summary__line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.lx-cart-summary__line dt { margin: 0; }
.lx-cart-summary__line dd { margin: 0; text-align: right; }
.lx-cart-summary__line dd ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* §10.1 — tidy cart shipping: hide the "Calculate shipping" postcode toggle (Germany-only shop) */
.lx-cart__summary .shipping-calculator-button,
.lx-cart__summary .shipping-calculator-form { display: none !important; }

.lx-cart-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 0 24px;
}
.lx-cart-summary__total-amount {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 32px;
    font-variant-numeric: tabular-nums;
}
.lx-cart-summary__total-amount .woocommerce-Price-amount,
.lx-cart-summary__total-amount .amount,
.lx-cart-summary__total-amount bdi { font: inherit; color: inherit; }

.lx-cart-summary__promo { margin-bottom: 18px; }
.lx-cart-summary__promo .label { display: block; margin-bottom: 6px; }
.lx-cart-summary__promo-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.lx-cart-summary__promo-row .input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-1);
    background: var(--surface-primary);
    font-family: var(--font-serif);
    font-size: 15px;
}
.lx-cart-summary__apply.btn--secondary,
.btn--secondary.lx-cart-summary__apply {
    flex: 0 0 auto;
    padding: 0 18px !important;
    min-height: 44px !important;
    white-space: nowrap;
}

.lx-cart-summary__checkout-btn { margin-top: 4px; }
.lx-cart-summary__note { margin: 14px 0 0; }

/* Helper band (3-col Pearl section below the cart grid) */
.lx-cart-helpband { padding: 64px 0; }
.lx-cart-helpband__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}
@media (max-width: 768px) {
    .lx-cart-helpband__grid { grid-template-columns: 1fr; gap: 24px; }
}
.lx-cart-helpband__grid p { margin-top: 10px; }
.lx-cart-helpband a { color: var(--text-primary); }
.lx-cart-helpband a:hover { color: var(--text-secondary); }

/* Empty cart hero */
.lx-cart--empty { padding: 64px 0 96px; text-align: center; }
.lx-cart-empty__hero { max-width: 560px; margin: 0 auto; text-align: center; }
.lx-cart-empty__emblem {
    width: 64px; height: auto;
    opacity: 0.5;
    margin: 0 auto 18px;
    display: block;
}
.lx-cart-empty__title { margin: 14px 0 18px; }
.lx-cart-empty__copy { margin: 0 0 24px; }
.lx-cart-empty__cta {
    padding: 8px 0 !important;
    min-height: 0 !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
}
.lx-cart-empty__cta:hover { border-bottom-color: var(--text-primary) !important; }

/* §40.14 — Checkout page (M3.5-C, 2026-05-13).
   Classic shortcode renders WC's standard checkout form. Layout sculpted to
   match design-imports/.../pages/checkout.html: 1.4fr / 1fr / gap 80px grid
   with customer-details on left, order-review on right.

   The 3 .soft.soft--inset numbered step cards (Contact / Shipping / Payment)
   from the mockup would require a full form-checkout.php template rewrite —
   deferred. For now we get the brand typography + 2-col layout + .soft aside. */
.woocommerce-checkout form.checkout {
    max-width: var(--container);
    margin: 0 auto;
    padding: 24px var(--gutter) 0;
}
.woocommerce-checkout #customer_details {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
}
.woocommerce-checkout #customer_details > .col-1,
.woocommerce-checkout #customer_details > .col-2 {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
}

/* 2-col grid: left = customer_details, right = order_review */
.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    column-gap: 80px;
    row-gap: 10px;
    align-items: start;
}
.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-element,
.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-button-separator {
    grid-column: 1;
    min-height: 0 !important;
}
.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-element {
    clear: none !important;
    margin: 0 0 8px !important;
}
.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-button-separator {
    margin: 6px 0 8px !important;
    line-height: 1.2;
}
.woocommerce-checkout form.checkout > wc-order-attribution-inputs {
    display: none !important;
}
.woocommerce-checkout form.checkout #customer_details {
    grid-column: 1;
}
.woocommerce-checkout form.checkout #order_review_heading,
.woocommerce-checkout form.checkout #order_review {
    grid-column: 2;
}
/* Fill the grid tracks. Kalium parent woocommerce.min.css @≥992 sets explicit
   widths on these same children — .checkout #customer_details{width:50%} and
   .checkout .woocommerce-checkout-review-order{width:41.6667%} — which override
   grid-stretch and shrink each column to a fraction of its 1.4fr/1fr track
   (the order-review collapse). Our (1,2,1) selectors outrank the parent's, so
   no !important. min-width:0 lets intrinsic price cells shrink, not overflow. */
.woocommerce-checkout form.checkout #customer_details,
.woocommerce-checkout form.checkout #order_review {
    width: 100%;
    max-width: none;
    min-width: 0;
    float: none;
}
.woocommerce-checkout form.checkout #order_review_heading {
    margin: 0 0 16px;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 28px;
}
.woocommerce-checkout form.checkout #order_review {
    background: rgba(232, 227, 220, 0.5);
    border-radius: 12px;
    padding: 32px;
    position: sticky;
    top: 96px;
}
@media (max-width: 1024px) {
    .woocommerce-checkout form.checkout {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 48px;
    }
    .woocommerce-checkout form.checkout #order_review_heading,
    .woocommerce-checkout form.checkout #order_review {
        grid-column: 1;
    }
    .woocommerce-checkout form.checkout #order_review { position: static; }
}

/* Headings on the left customer details */
.woocommerce-checkout #customer_details h3 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 22px;
    margin: 0 0 16px;
}
.woocommerce-checkout #customer_details .form-row label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.woocommerce-checkout #customer_details .form-row .input-text,
.woocommerce-checkout #customer_details .form-row .select2-selection,
.woocommerce-checkout #customer_details .form-row select,
.woocommerce-checkout #customer_details .form-row textarea {
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-1);
    padding: 13px 14px;
    min-height: 48px;
    font-family: var(--font-serif);
    font-size: 16px;
}
.woocommerce-checkout #customer_details .form-row .input-text:focus {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(61,57,53,0.1);
    outline: none;
}

/* Order review (right aside) */
.woocommerce-checkout #order_review .shop_table {
    width: 100%;
    border: 0;
    background: transparent;
}
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
    border: 0;
    padding: 8px 0;
    background: transparent;
    font-family: var(--font-serif);
    font-size: 15px;
}
.woocommerce-checkout #order_review .shop_table thead { display: none; }
.woocommerce-checkout #order_review .shop_table .cart_item th,
.woocommerce-checkout #order_review .shop_table .cart_item td {
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 0;
}
/* Kalium parent woocommerce.min.css forces the review product row to
   display:flex; width:200% (and .product-name--text to width:80%) — a layout
   assumption that makes the row twice the table width and overflows our column
   (CDP-verified: tr width:200% -> 651px row, name cell 80% -> 524px). Restore
   standard table-row sizing so the 3-cell row (thumb / name / total) fits the
   column; WC's word-break:break-word on .product-name keeps the name wrapping. */
.woocommerce-checkout #order_review .shop_table .cart_item {
    display: table-row;
    width: auto;
}
.woocommerce-checkout #order_review .shop_table .cart_item td.product-name--text {
    width: auto;
}
/* Loosen the order-review product row — the Germanized name/quantity/delivery/
   units stack + price column sat too tight (client + codex review). More row
   padding, a gap before the price column, looser line-height, breathing room
   above the gzd info lines, and top-aligned cells for a clean multi-line row. */
.woocommerce-checkout #order_review .shop_table .cart_item td {
    padding-top: 15px;
    padding-bottom: 15px;
    vertical-align: top;
}
.woocommerce-checkout #order_review .cart_item td.product-name--text {
    padding-right: 18px;
    line-height: 1.5;
}
.woocommerce-checkout #order_review .cart_item .product-name--text .wc-gzd-cart-info {
    margin: 6px 0 0;
}
.woocommerce-checkout #order_review .cart_item .wc-gzd-cart-info,
.woocommerce-checkout #order_review .cart_item .delivery-time-info,
.woocommerce-checkout #order_review .cart_item .product-units-wrapper {
    display: none !important;
}
.woocommerce-checkout #order_review .cart_item .product-quantity {
    margin-left: 6px;
}
.woocommerce-checkout #order_review .shipping td,
.woocommerce-checkout #order_review .shipping .woocommerce-shipping-totals td {
    text-align: right;
}
.woocommerce-checkout #order_review .shipping ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
    border-top: 1px solid var(--border-subtle);
    padding-top: 16px;
    font-weight: 500;
}
.woocommerce-checkout #order_review .order-total td {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 600;
}

/* Payment method radios */
.woocommerce-checkout #payment {
    background: transparent !important;
    border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
    border: 0;
    padding: 0;
    margin: 0 0 16px;
    display: grid;
    gap: 10px;
}
.woocommerce-checkout #payment ul.payment_methods li {
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-1);
    padding: 14px 16px;
    background: var(--surface-primary);
    list-style: none;
    margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
    border-color: var(--text-primary);
}
.woocommerce-checkout #payment ul.payment_methods li label {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0;
    cursor: pointer;
}

/* Place order button — primary CTA, full width, ensure visible.
   Some Germanized/Kalium combos hide the default WC button via JS — restore
   visibility + brand-style. */
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order,
.woocommerce-checkout .place-order button,
.woocommerce-checkout .place-order .button {
    display: block !important;
    width: 100%;
    background: var(--text-primary);
    color: var(--text-inverse);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    border: 1px solid var(--text-primary);
    border-radius: var(--r-1);
    padding: 18px 36px;
    min-height: 56px;
    cursor: pointer;
    transition: background .2s ease-out, transform .2s ease-out, box-shadow .2s ease-out;
    margin-top: 18px;
    visibility: visible !important;
    opacity: 1 !important;
}
.woocommerce-checkout #place_order:hover {
    background: #2A2622;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(61,57,53,0.18);
}
.woocommerce-checkout .place-order { width: 100%; }
.woocommerce-checkout .place-order::before,
.woocommerce-checkout .place-order::after { content: none !important; }

/* Germanized checkboxes container */
.woocommerce-checkout .wc-gzd-checkboxes-placeholder,
.woocommerce-checkout .woocommerce-checkout-payment .wc-gzd-checkbox {
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--border-subtle);
}
.woocommerce-checkout .wc-gzd-checkbox label,
.woocommerce-checkout .checkout-inline-error-message {
    font-family: var(--font-serif);
    font-size: 14px;
}

/* §40.15 — My-Account shell + sidebar nav (M4-E, 2026-05-13).
   Per pages/account.html: 2-col grid (240px sidebar + 1fr content, 64px gap)
   with sticky-top sidebar. Page header band above (eyebrow + h1 + Sign out CTA
   with border-bottom). All 6 account sub-pages inherit this shell. */
.lx-acct { padding: 24px 0 96px; }
/* M8 (2026-05-14) — the .lx-acct__header element ALSO carries .lx-container,
   which has `.lx-container.lx-container { margin: 0 auto; padding: 0 var(--gutter); }`
   at specificity (0,2,0). The shorthand `margin: 0 auto` zeros margin-bottom,
   and `padding: 0 var(--gutter)` zeros padding-bottom — overriding the values
   we set here at specificity (0,1,0). Bump to (0,2,0) via double-class to win
   the cascade. Critical for the 80px hero→content gap canonical specifies. */
.lx-acct__header.lx-acct__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 24px;
    flex-wrap: wrap;
}
.lx-acct__header-text { flex: 1 1 auto; }
.lx-acct__greeting { margin: 14px 0 0; }
.lx-acct__signout.lx-acct__signout {
    padding: 8px 0 !important;
    min-height: 0 !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    flex: 0 0 auto;
}
.lx-acct__signout:hover { border-bottom-color: var(--text-primary) !important; }

.lx-acct__shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 64px;
    align-items: flex-start;
}
@media (max-width: 1024px) {
    .lx-acct__shell { grid-template-columns: 1fr; gap: 32px; }
}

.lx-acct-nav.lx-acct-nav {
    display: grid;
    gap: 2px;
    position: sticky;
    top: 96px;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 1024px) {
    .lx-acct-nav.lx-acct-nav { position: static; top: auto; }
}
.lx-acct-nav.lx-acct-nav ul { display: none; }  /* hide WC's wrapping <ul> if any */
.lx-acct-nav__item.lx-acct-nav__item {
    border: 0 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    background: transparent !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: background-color 200ms ease, color 200ms ease;
}
.lx-acct-nav__item.lx-acct-nav__item:hover {
    background: rgba(232, 227, 220, 0.35) !important;
    color: var(--text-primary) !important;
}
.lx-acct-nav__item.is-active.is-active {
    background: rgba(232, 227, 220, 0.7) !important;  /* M8: was 0.5, bumped to 0.7 per canonical for clearer active-state read on Ivory body */
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}
.lx-acct-nav__count.lx-acct-nav__count {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--text-secondary);
}

.lx-acct__content { min-width: 0; }
/* Kalium parent's woocommerce.min.css sets `.woocommerce-MyAccount-content { grid-area: content; }`
   assuming a 4-area parent grid. Our shell uses 2-col `240px 1fr` columns without named
   areas, so `grid-area: content` poisons the track list (renders 4 phantom tracks, pushes
   content into col 4). Neutralize back to auto-placement. */
.lx-acct__content.woocommerce-MyAccount-content { grid-area: auto !important; }
/* WC's wrapping <ul><li> from its default nav — hide via the navigation.php
   override (it now renders flat <a> children). Belt-and-braces: */
.lx-acct-nav > ul,
.lx-acct-nav > li { display: contents; }

/* §40.16 — My-Account dashboard widgets (M4-E continued, 2026-05-13). */
.lx-acct-section { margin-bottom: 48px; }
.lx-acct-section__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 18px;
    gap: 16px;
    flex-wrap: wrap;
}
.lx-acct-section__header h2 { margin: 0; }
.lx-acct-section__cta.btn--tertiary,
.btn--tertiary.lx-acct-section__cta {
    padding: 8px 0 !important;
    min-height: 0 !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
}
.lx-acct-section__cta:hover { border-bottom-color: var(--text-primary) !important; }

.lx-acct-overview__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 640px) {
    .lx-acct-overview__grid { grid-template-columns: 1fr; }
}
.lx-acct-overview__card { padding: 24px; border-radius: 0 !important; } /* §11.3 — no curved edges */
.lx-acct-overview__card-body {
    margin: 10px 0 0;
    line-height: 1.55;
}
.lx-acct-link {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 1px;
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.04em;
}
.lx-acct-link:hover {
    border-bottom-color: var(--text-primary);
    color: var(--text-primary);
}

.lx-acct-orders__list {
    display: grid;
    gap: 10px;
}
.lx-acct-orders__row {
    padding: 18px 22px;
    border-radius: 0 !important; /* §11.3 — no curved edges */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.lx-acct-orders__row-main {
    display: flex;
    gap: 24px;
    align-items: center;
    flex: 1;
    flex-wrap: wrap;
}
.lx-acct-orders__number { min-width: 200px; }
.lx-acct-orders__date { font-weight: 400; }
.lx-acct-orders__items { flex: 1; }
.lx-acct-orders__status.tag {
    border-color: var(--success);
    color: var(--success);
}
.lx-acct-orders__total {
    min-width: 80px;
    text-align: right;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
}
.lx-acct-orders__empty { padding: 32px; text-align: center; border-radius: 0 !important; } /* §11.3 — no curved edges */
@media (max-width: 768px) {
    .lx-acct-orders__row { flex-direction: column; align-items: flex-start; }
    .lx-acct-orders__total { width: 100%; text-align: left; }
}

/* §40.17 — Auth-form primitives (M4-F/A, 2026-05-13).
   Ported from lennox.css L184-196 + L340-347. Used by /my-account/ login form,
   /register/ page, and (future) checkout custom fields. Scoped within .lx-auth
   to avoid colliding with WC's .form-row inside its own pipelines. */
.lx-auth .field { margin-bottom: var(--s-4); }
.lx-auth .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.lx-auth .form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.lx-auth .label,
.lx-auth label.label {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.lx-auth .input,
.lx-auth input.input,
.lx-auth input[type="text"],
.lx-auth input[type="email"],
.lx-auth input[type="password"],
.lx-auth input[type="tel"],
.lx-auth select,
.lx-auth textarea {
    width: 100%;
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--text-primary);
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-1);
    padding: 13px 14px;
    min-height: 48px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.lx-auth .input:focus,
.lx-auth input[type="text"]:focus,
.lx-auth input[type="email"]:focus,
.lx-auth input[type="password"]:focus,
.lx-auth input[type="tel"]:focus,
.lx-auth select:focus,
.lx-auth textarea:focus {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(61,57,53,0.1);
}
.lx-auth .req { color: var(--text-secondary); margin-left: 2px; }
.lx-auth .helper { font-family: var(--font-sans); font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.lx-auth .check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--text-primary);
    cursor: pointer;
}
.lx-auth .check input[type="checkbox"] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    accent-color: var(--text-primary);
    min-height: 18px;
}

/* §40.18 — Auth page layout (login + register; M4-F/A, 2026-05-13).
   Mirrors pages/login.html + register.html: centered narrow column max-width
   520px, eyebrow + h1 + caption header, .soft panel form, footer link. */
.lx-auth {
    padding: 48px 0 96px;
}
.lx-auth__container {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.lx-auth__header { text-align: center; margin-bottom: 40px; }
.lx-auth__header .t-eyebrow { display: inline-block; }
.lx-auth__header h1 { margin: 14px 0 8px; }
.lx-auth__header p { margin: 0; }
.lx-auth__panel.soft { padding: 48px 44px; }
.lx-auth__row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 12px;
    flex-wrap: wrap;
}
.lx-auth__forgot {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-primary);
    border: 0 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.lx-auth__forgot:hover { color: var(--text-primary); }
.lx-auth__footer-link {
    text-align: center;
    margin: 32px 0 0;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--text-secondary);
}
.lx-auth__footer-link a {
    color: var(--text-primary);
    border: 0 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.lx-auth__legal {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-secondary);
    margin: 18px 0 0;
    text-align: center;
    line-height: 1.6;
}
.lx-auth__legal a {
    color: var(--text-secondary);
    border: 0 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 640px) {
    .lx-auth__panel.soft { padding: 32px 24px; }
    .lx-auth { padding: 32px 0 64px; }
}

/* §40.19 — 404 page (M4-B, 2026-05-13).
   Mirrors pages/404.html: centered max-width 680px, giant italic "404" display,
   eyebrow + h1 + paragraph + 2-button row, then "You might be looking for" list. */
.lx-404 {
    padding: 120px 0 96px;
    text-align: center;
}
.lx-404__container { max-width: 680px; margin: 0 auto; padding: 0 var(--gutter); }
.lx-404__big {
    font-family: var(--font-display);
    font-size: 160px;
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text-primary);
    margin-bottom: 32px;
}
.lx-404 h1 { margin: 14px 0 18px; }
.lx-404__lede {
    margin: 0 auto 40px;
    max-width: 480px;
    color: var(--text-secondary);
}
.lx-404__actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.lx-404__suggestions {
    margin-top: 80px;
    padding-top: 48px;
    border-top: 1px solid var(--border-subtle);
    text-align: left;
}
.lx-404__suggestions ul {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: grid;
    gap: 14px;
}
.lx-404__suggestions a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid var(--border-subtle);
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    text-decoration: none;
    color: var(--text-primary);
}
.lx-404__suggestions li:last-child a { border-bottom: 0; }
.lx-404__suggestions a:hover { background: rgba(232, 227, 220, 0.35); }
.lx-404__suggestions .t-ui-13 { color: var(--text-secondary); }
@media (max-width: 768px) {
    .lx-404 { padding: 64px 0 64px; }
    .lx-404__big { font-size: 96px; }
}

/* §40.21 — Home hero (M5-B, 2026-05-13).
   Per marketing/home.html: 92vh full-bleed hero (min-height 720, max 920),
   editorial image absolute-positioned inset 0, centered H1 t-display-128
   overlaid on dark gradient. Current Elementor build has image widget pushing
   the container taller (image natural size dominates) — fix by forcing the
   first image inside .lx-home-hero to position:absolute / object-fit:cover so
   the container respects min_height:92vh + the absolute-positioned text
   container overlays correctly. */
/* Hero container is identified by data-id="dbe3e128" (Elementor's _css_classes
   field doesn't always emit to the rendered HTML). Target by attribute. */
.elementor-element-dbe3e128,
.lx-home-hero,
[data-id="dbe3e128"] {
    /* §B7 2026-06-23: SR6 slider "Lennox Home Hero" is the hero now. The old
       placeholder-image hero forced 92vh + a grey gradient bg + a dark ::after
       overlay — over the slider that left a dark band below (slider 711px) and
       dimmed the layers. Section now fits the slider; no bg/overlay/height-force. */
    position: relative !important;
    background: none !important;
}
@media (max-width: 768px) {
    .elementor-element-dbe3e128,
    .lx-home-hero,
    [data-id="dbe3e128"] {
        min-height: 0 !important;
    }
}
/* The hero contains a placeholder image (WC placeholder.webp). KEEP IT VISIBLE
   so the client knows EXACTLY where to drop the real editorial photography
   (just swap the Elementor image widget — no guesswork). Make the image fill
   the hero (object-fit:cover), positioned absolute behind the text overlay. */
.elementor-element-dbe3e128 > .e-con-inner > .elementor-widget-image,
.elementor-element-dbe3e128 > .elementor-widget-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    display: block !important;
}
.elementor-element-dbe3e128 .elementor-widget-image .elementor-widget-container,
.elementor-element-dbe3e128 .elementor-widget-image figure,
.elementor-element-dbe3e128 .elementor-widget-image picture {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: block !important;
}
.elementor-element-dbe3e128 .elementor-widget-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
/* While the image is the WC placeholder, dim it heavily so the dark gradient
   shows through + the slot label is clearly readable. When the client swaps
   in a real editorial photo (src no longer contains 'woocommerce-placeholder'),
   this selector stops matching → image renders at full opacity automatically. */
.elementor-element-dbe3e128 img[src*="woocommerce-placeholder"] {
    opacity: 0.18 !important;
    mix-blend-mode: luminosity;
}
/* KEEP the slot caption visible — the client needs to SEE the slot brief
   ("Atmospheric still · 16:9 · low evening light, linen, glass") so they know
   what kind of editorial photo to swap in. Position as dashed-border overlay
   label in the upper-left corner of the hero. */
.elementor-element-dbe3e128 .lx-image-slot-label {
    display: inline-block !important;
    position: absolute;
    top: 32px;
    left: 32px;
    z-index: 4;
    color: rgba(250, 247, 244, 0.8);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed rgba(250, 247, 244, 0.5);
    border-radius: 2px;
    backdrop-filter: blur(4px);
}
.elementor-element-dbe3e128 .lx-image-slot-label::before {
    content: "↻ Editorial slot — ";
    color: rgba(250, 247, 244, 0.55);
}
.elementor-element-dbe3e128 figcaption.widget-image-caption {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.elementor-element-dbe3e128 figcaption,
.elementor-element-dbe3e128 .widget-image-caption,
.elementor-element-dbe3e128 .lx-image-slot-label,
.lx-home-hero .lx-image-slot-label {
    display: none !important;
}
/* Subtle dark gradient at bottom over the image for text legibility */
.elementor-element-dbe3e128::after,
.lx-home-hero::after { content: none !important; }
/* Text container — Elementor sets _position: absolute, _offset_orientation_v: end.
   Make sure it lands above the image + gradient overlay. */
.elementor-element-dbe3e128 > .e-con-inner > .e-con,
.elementor-element-dbe3e128 > .elementor-element[data-element_type="container"] {
    z-index: 3 !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
}
.elementor-element-dbe3e128 .elementor-widget-heading,
.elementor-element-dbe3e128 .elementor-widget-heading * {
    color: #FAF7F4 !important;
}
.elementor-element-dbe3e128 h1.elementor-heading-title,
.elementor-element-dbe3e128 h1,
.elementor-element-dbe3e128 .elementor-widget-heading h1,
.lx-home-hero h1 {
    color: #FAF7F4 !important;
    text-align: center !important;
    max-width: 14ch;
    margin: 0 auto !important;
}
.elementor-element-dbe3e128 .elementor-widget-text-editor,
.elementor-element-dbe3e128 .elementor-widget-text-editor *,
.elementor-element-dbe3e128 p,
.lx-home-hero p {
    color: rgba(250, 247, 244, 0.85) !important;
    text-align: center !important;
}

/* §40.20 — Shop archive (M5-A, 2026-05-13).
   Per pages/shop.html: hero band (32px 0 56px) + toolbar row (border-bottom +
   margin-bottom 40px) + 2-col .soft card grid (gap 32px). Each card has Pearl
   outer (18px padding) + Ivory inner image stage (560px tall, 6px radius) +
   bottom row with h3 title + italic tagline + .t-price. */
.lx-shop { padding-bottom: 96px; }

.lx-shop-hero { padding: 32px 0 56px; }
.lx-shop-hero__h1 { margin: 14px 0 0; }
.lx-shop-hero__lede {
    margin: 18px 0 0;
    max-width: 560px;
}

.lx-shop-toolbar-section { padding-bottom: 40px; }

/* §6.1 — hide "Showing N result(s)" + sort dropdown (operator wants it OFF for now,
   reversible: delete this 2-line block to restore the toolbar). */
.lx-shop-toolbar { display: none !important; }
.lx-shop-toolbar-section { padding-bottom: 0 !important; }
.lx-shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 18px;
    flex-wrap: wrap;
    gap: 16px;
}
.lx-shop-toolbar .woocommerce-result-count {
    margin: 0 !important;
    float: none !important;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.lx-shop-toolbar__sort {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    float: none !important;
}
.lx-shop-toolbar__sort .woocommerce-ordering { margin: 0 !important; }
.lx-shop-toolbar__sort select,
.lx-shop-toolbar select.orderby,
.lx-shop-toolbar .orderby {
    min-height: auto !important;
    padding: 8px 32px 8px 12px !important;
    width: auto !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    background: var(--surface-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 2px !important;
    cursor: pointer;
}

.lx-product-grid.products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
@media (max-width: 768px) {
    .lx-product-grid.products { grid-template-columns: 1fr; gap: 24px; }
}

.lx-product-card.lx-product-card {
    list-style: none !important;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    width: auto !important;
    float: none !important;
}
.lx-product-card::before,
.lx-product-card::after {
    display: none !important;
    content: none !important;
}
.lx-product-card__link.soft.soft--hover {
    display: flex;
    flex-direction: column;
    border: 0 !important;
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.28s var(--ease-elegant), box-shadow 0.28s var(--ease-elegant);
}
.lx-product-card__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(61, 57, 53, 0.08);
}
/* The 48/32/56 ivory inner box was designed (shop.html L67) to frame a centered
   .bottle placeholder; with a real 1:1 product photo it read as a redundant white
   tile-in-a-tile. Drop the inner frame + padding and let the photo fill the .soft
   card (square to match the 1:1 featured image; cover = full fill, no crop).
   Corners are SHARP (--r-0): the photo sits inset inside the .soft card's
   canonical 12px curve, so it must not carry its own off-scale radius. The brand
   radius scale is 0 / 2px / 4px / 12px(.soft only) — 6px was off-scale. */
.lx-product-card__stage {
    background: transparent;
    border-radius: var(--r-0, 0);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.lx-product-card__stage .lx-product-card__image,
.lx-product-card__stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r-0, 0);
    display: block;
}
.lx-product-card__body {
    padding: 24px 14px 8px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    flex-wrap: nowrap;
}
.lx-product-card__text { flex: 1 1 auto; min-width: 0; }
.lx-product-card__title.lx-product-card__title {
    margin: 0 !important;
    color: var(--text-primary);
}
.lx-product-card__tagline {
    margin: 8px 0 0;
    font-style: italic;
}
.lx-product-card__price-block {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}
.lx-product-card__price { white-space: nowrap; font-weight: 400; }
.lx-product-card__price .price { font-family: inherit; color: inherit; }
.lx-product-card__price .amount {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    color: var(--text-primary);
}
.lx-product-card__unit,
.lx-product-card__tax {
    display: block;
    line-height: 1.4;
}

/* WC pagination — match Lennox aesthetic */
.lx-shop .woocommerce-pagination { margin-top: 56px; text-align: center; }
.lx-shop .woocommerce-pagination ul.page-numbers {
    display: inline-flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
}
.lx-shop .woocommerce-pagination ul.page-numbers li { border: 0; }
.lx-shop .woocommerce-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.lx-shop .woocommerce-pagination .page-numbers.current,
.lx-shop .woocommerce-pagination .page-numbers:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
    background: rgba(232, 227, 220, 0.4);
}

/* §40.22 — Footer cleanup (M6, 2026-05-13).
   1) The Lennox footer is built via Kalium's footer-builder which wraps every
      footer row in .lb-element-footer-container-row at #222 (almost black) — a
      shade off-brand from Lennox Grey #3D3935. That mismatch made a visible
      stripe between rows. Force both rows to brand grey.
   2) The .site-footer has padding-top:64px which renders as an empty Lennox
      Grey strip BEFORE the first content row (because the row's #222 begins
      at y=64). Strip that to a slim 24px.
   3) Strip duplicate underline animations on footer links — Kalium's link-style
      system + Bootstrap's a{text-decoration:underline} both fire on footer
      anchors. Force a single clean treatment: no underline at rest, subtle
      opacity transition on hover. */
.site-footer.site-footer,
footer.site-footer {
    background-color: #3D3935 !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}
.site-footer .lb-element-footer-container-row,
.site-footer .lb-element-footer-container-row.lb-element-footer-container-row,
.site-footer [class*="lb-element-footer-container-row"] {
    background-color: #3D3935 !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}
/* Footer links: strip the duplicate-underline-with-mismatched-animations
   (Kalium link-style background-image gradient + Bootstrap/WP underline
   stacked), apply ONE subtle hover treatment: dimmed ivory at rest, full
   ivory + soft-underline-from-left on hover. */
.site-footer a,
.site-footer a:where(:not(.wp-element-button)),
.site-footer .link-style a,
.site-footer .footer-links a,
.site-footer p > a,
.site-footer li:not([class]) a {
    text-decoration: none !important;
    border-bottom: 0 !important;
    background-image: none !important;
    background-color: transparent !important;
    color: rgba(250, 247, 244, 0.7) !important;
    transition: color 220ms ease, opacity 220ms ease !important;
    position: relative;
    display: inline-block;
}
.site-footer a:hover,
.site-footer .link-style a:hover,
.site-footer .footer-links a:hover,
.site-footer p > a:hover,
.site-footer li:not([class]) a:hover {
    color: rgba(250, 247, 244, 1) !important;
    opacity: 1 !important;
}
/* Subtle hover underline — single thin ivory line that animates in from
   left. Removes the OLD duplicate ::before/::after pseudo-element underlines
   first, then re-adds our own. */
.site-footer a::before,
.site-footer .link-style a::before {
    display: none !important;
    content: none !important;
}
.site-footer a::after,
.site-footer .link-style a::after {
    content: "" !important;
    position: absolute !important;
    left: 0;
    right: auto;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: rgba(250, 247, 244, 0.85) !important;
    transition: width 240ms ease !important;
    display: block !important;
    border: 0 !important;
}
.site-footer a:hover::after,
.site-footer .link-style a:hover::after {
    width: 100% !important;
}
/* Suppress on column heading anchors / logo / non-text-link elements
   (they don't need the underline). */
.site-footer .header__brand::after,
.site-footer .footer__brand a::after,
.site-footer a[class*="logo"]::after,
.site-footer .social-icons a::after,
.site-footer a:has(img)::after,
.site-footer a:has(svg)::after {
    content: none !important;
    display: none !important;
}

/* §40.23 — Header padding cleanup (M6/M7, 2026-05-13/14).
   Initial-state header is 195px tall (44 promo + 151 brand row). The brand
   row has padding:50/50 on the .header-block element creating excessive
   vertical breathing room. Reduce to 24/24 to bring header to ~99px+44=143px
   total. Also ensure promo banner top/bottom padding is symmetric on sticky. */
.site-header .sticky-element .header-block.header-block {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}
@media (max-width: 768px) {
    .site-header .sticky-element .header-block.header-block {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
}
/* Promo bar: enforce truly symmetric vertical padding + center text vertically.
   Earlier the rendered top-padding exceeded bottom because of font-line-height
   asymmetry. */
.top-header-bar.top-header-bar {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    line-height: 1.4 !important;
}
.top-header-bar > * {
    margin: 0 !important;
    padding: 0 !important;
}

/* M7 (2026-05-14) — sticky-state cleanup. Two bugs:
   1. When user scrolls and Kalium pins `.site-header` (adds .sticky-element-active),
      the promo bar (.top-header-bar) STAYED visible at 62px tall — that band has
      no purpose once the brand row is sticky. Hide it on scroll so the brand
      row docks directly under whatever is above (admin bar, or nothing).
   2. WP admin bar applies `body.admin-bar .site-header { top: 46px }` so the
      sticky header sits below it. But WP HIDES the admin bar on viewports <600px
      (display:none in WP core CSS), creating a 46px phantom gap on mobile.
      Override `top: 0` on those viewports. */
.site-header.sticky-element-active .top-header-bar,
.site-header.is-sticky.sticky-element-fixed .top-header-bar {
    display: none !important;
}
/* Beat Kalium's `body.admin-bar header.site-header.sticky-element-fixed` rule
   (specificity 0,3,2) — we need ≥0,4,2 to win. */
@media screen and (max-width: 600px) {
    body.admin-bar header.site-header.sticky-element-fixed.sticky-element-fixed {
        top: 0 !important;
    }
}

/* M7-followup (2026-05-14) — desktop scrolled gap. Kalium nests an inner
   `.sticky-element` inside `.site-header`. Both get `top: 32px` (admin-bar
   offset). Because `.site-header` has `transform`, the inner element's
   fixed positioning is relative to the outer one, so the 32px stacks twice
   → a 32px visible gap between the admin bar and the brand row. Zero the
   inner offset so the brand row docks directly under the outer's top edge. */
header.site-header.sticky-element-fixed .sticky-element {
    top: 0 !important;
}

/* §40.24 — Trade page form skin (M7, 2026-05-14).
   /trade/ (page ID 7287) renders an Elementor Pro Form. By default it uses
   stock Elementor field styling (white bg, gray border, no panel wrap), which
   visually diverges from the canonical design at
   `design-imports/.../woocommerce/pages/trade.html` where the form sits inside
   a `.soft` panel with Lennox `.input` primitives (border-subtle, Ivory bg,
   6px radius, Garamond) and the radio group "Type of business" is a 2x3
   card grid.

   We scope by `body.page-id-7287` so this doesn't bleed into other Elementor
   forms (contact form 6743 is already closer to canon and stays as-is). */
body.page-id-7287 .elementor-widget-form {
    background: var(--surface-secondary);  /* Pearl — matches `.soft` */
    padding: 36px;
    border-radius: var(--r-1, 8px);
}
@media (max-width: 768px) {
    body.page-id-7287 .elementor-widget-form {
        padding: 24px;
        border-radius: 6px;
    }
}

/* Lennox `.input` parity for every textual field + select + textarea. */
body.page-id-7287 .elementor-field-textual,
body.page-id-7287 .elementor-field-textual:focus {
    background: var(--surface-primary) !important;  /* Ivory */
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-1, 8px) !important;
    padding: 13px 14px !important;
    min-height: 48px !important;
    font-family: var(--t-serif, var(--font-serif, Garamond, Georgia, serif)) !important;
    font-size: 16px !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}
body.page-id-7287 .elementor-field-textual:focus {
    border-color: var(--text-primary) !important;
    box-shadow: 0 0 0 3px rgba(61, 57, 53, 0.1) !important;
}

/* Labels — Lennox `.label` */
body.page-id-7287 .elementor-field-label {
    font-family: var(--font-sans, "Optima Pro", "Helvetica Neue", sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    color: var(--text-primary) !important;
    margin-bottom: 6px !important;
    text-transform: none !important;
}

/* Contact form (6743) — field labels not capitalised per client §9a (override global uppercase) */
body.page-id-6743 .elementor-field-label {
    text-transform: none !important;
}

/* "Type of business" radio: render as 2-col card grid on desktop, 1-col on small */
body.page-id-7287 .elementor-field-group-business_type .elementor-field-subgroup {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}
@media (max-width: 640px) {
    body.page-id-7287 .elementor-field-group-business_type .elementor-field-subgroup {
        grid-template-columns: 1fr !important;
    }
}
body.page-id-7287 .elementor-field-group-business_type .elementor-field-option {
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-1, 8px);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    margin: 0 !important;  /* override Elementor default option spacing */
}
body.page-id-7287 .elementor-field-group-business_type .elementor-field-option:hover {
    border-color: var(--text-primary);
}
body.page-id-7287 .elementor-field-group-business_type .elementor-field-option input[type="radio"] {
    accent-color: var(--text-primary);
    margin: 0;
}
body.page-id-7287 .elementor-field-group-business_type .elementor-field-option label {
    margin: 0 !important;
    font-family: var(--t-serif, Garamond, Georgia, serif);
    font-size: 15px;
    color: var(--text-primary);
}

/* Submit button — block-width primary CTA per canonical */
body.page-id-7287 .elementor-field-type-submit .elementor-button {
    width: 100% !important;
    padding: 18px !important;
    background: var(--surface-inverse, #3D3935) !important;
    color: var(--text-inverse, #FAF7F4) !important;
    border: 0 !important;
    border-radius: var(--r-1, 8px) !important;
    font-family: var(--font-sans, "Optima Pro", sans-serif) !important;
    font-size: 13px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    min-height: 56px !important;
}
body.page-id-7287 .elementor-field-type-submit .elementor-button:hover {
    background: #2A2622 !important;
}

/* §40.99 — Suppress ALL Kalium parent WC tabs (we render accordions instead).
   Product safety is now inside the accordion (6th .disclosure item), so all
   standalone tab renderings below the tasting band are hidden.
   Note: Kalium uses .tabs.tabs--style-1 (NOT WC's .woocommerce-tabs) as the
   active tab container on this site, plus emits the product-safety panel
   directly into .lx-pdp. Cover all 3 possible containers. */
.lx-pdp .woocommerce-tabs,
.lx-pdp .woocommerce-tabs.wc-tabs-wrapper,
.lx-pdp .tabs.tabs--style-1,
.lx-pdp .tabs--style-1,
.lx-pdp .panels-stack,
.lx-pdp .tabs__panel--product_safety,
.lx-pdp .woocommerce-Tabs-panel--product_safety,
.lx-pdp .wc-gzd-product-safety-heading,
.lx-pdp .wc-gzd-product-safety-instructions-heading,
.lx-pdp .safety-instructions.wc-gzd-additional-info,
/* Belt-and-braces in case Kalium emits the panel outside any tabs wrapper */
body.single-product .tabs.tabs--style-1,
body.single-product .tabs__panel--product_safety,
body.single-product .woocommerce-Tabs-panel--product_safety {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* PDP safety accordion content styling (sub-headings within the 6th disclosure). */
.lx-pdp__safety .lx-pdp__safety-sub {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 24px 0 8px;
}
.lx-pdp__safety .lx-pdp__safety-sub:first-child {
    margin-top: 0;
}
.lx-pdp__safety .lx-pdp__safety-mfr {
    font-style: normal;
    line-height: 1.55;
    color: var(--text-primary);
}

/* ==========================================================================
   §41 — Wholesale registration form (Wholesale For WooCommerce, [wwp_registration_form])
   N2 build 2026-05-15. Plugin renders into .wwp_wholesaler_registration wrapper
   with WooCommerce form-row classes inherited. We need to:
   - Hide the plugin's duplicate "Registration" H2 (we have our own Elementor H2)
   - Constrain form width + give breathing room
   - Brand-style the submit button to match .btn--primary
   - Style the password reveal toggle to match brand
   ========================================================================== */
.wwp_wholesaler_registration > h2.wholesaler-registration {
    display: none;
}
.wwp_wholesaler_registration {
    max-width: 560px;
    margin: 0;
}
.wwp_wholesaler_registration_form {
    margin-top: 8px;
}
.wwp_wholesaler_registration_form .wwp_form_css_row {
    margin: 0 0 18px;
}
.wwp_wholesaler_registration_form .wwp_form_css_row label {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.wwp_wholesaler_registration_form .wwp_form_css_row .required {
    color: var(--text-secondary);
    margin-left: 2px;
}
.wwp_wholesaler_registration_form input[type=text],
.wwp_wholesaler_registration_form input[type=email],
.wwp_wholesaler_registration_form input[type=password] {
    width: 100%;
    padding: 12px 14px;
    background: var(--ivory);
    border: 1px solid var(--cashmere);
    border-radius: 0;
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}
.wwp_wholesaler_registration_form input[type=text]:focus,
.wwp_wholesaler_registration_form input[type=email]:focus,
.wwp_wholesaler_registration_form input[type=password]:focus {
    outline: none;
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(61, 57, 53, 0.22);   /* a11y WCAG 2.4.7 — visible focus ring */
}
.wwp-password-wrapper {
    position: relative;
    display: block;
}
.wwp-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.wwp-password-toggle:hover {
    opacity: 1;
}
.wwp_wholesaler_registration_form input[type=submit].button {
    display: inline-block;
    margin-top: 8px;
    padding: 14px 32px;
    background: var(--text-primary);
    color: var(--lx-ivory, #FAF7F4);
    border: 1px solid var(--text-primary);
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.wwp_wholesaler_registration_form input[type=submit].button:hover {
    background: transparent;
    color: var(--text-primary);
}

/* ==========================================================================
   About hero (page 6457) — text-overlay heading responsive sizing
   The hero heading uses the t-display-96 global, which renders 96px at every
   breakpoint. Over the Munich background image that reads well on desktop but
   overwhelms the hero on tablet/mobile (the long sentence wraps to ~10 lines
   and breaks mid-word). Scale the hero heading down on smaller viewports.
   Scoped to the hero heading element (b37b0f98) on the About page (EN 6457 + DE 7397).
   ========================================================================== */
@media (max-width: 1024px) {
    body.page-id-6457 .elementor-element.elementor-element-b37b0f98 .elementor-heading-title,
    body.page-id-7397 .elementor-element.elementor-element-b37b0f98 .elementor-heading-title {
        font-size: 58px;
    }
}
@media (max-width: 767px) {
    body.page-id-6457 .elementor-element.elementor-element-b37b0f98 .elementor-heading-title,
    body.page-id-7397 .elementor-element.elementor-element-b37b0f98 .elementor-heading-title {
        font-size: 34px;
        line-height: 1.14;
    }
}

/* ==========================================================================
   §41 — IT-Recht-Kanzlei legal-text output (.agb_content)
   The ITRK "Legal Texts Connector" shortcodes ([agb_terms], [agb_privacy],
   [agb_revocation], [agb_imprint]) emit raw <h2>/<h3>/<p>/<ol>/<ul> inside a
   .agb_content wrapper with ZERO plugin CSS. Without these rules the DE legal
   pages render legally-correct but visually broken (see LNX_LEGAL_SCOPE_REPORT
   §F5). This block matches the current legal-page typography: Garamond Premier
   Pro body @ 16px/400 (the value read from the pre-swap text-editor widgets),
   serif headings, brand tokens. Selector appears ONLY on ITRK legal pages →
   zero blast radius elsewhere. Added 2026-07-14 (packet lnx-legal-redesign D4).
   ========================================================================== */
.agb_content {
    font-family: var(--lx-font-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-primary);
    text-align: left;
}
.agb_content > h1:first-child,
.agb_content > h2:first-child { margin-top: 0; }
.agb_content h2 {
    font-family: var(--lx-font-serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    margin: 2em 0 0.6em;
}
.agb_content h3 {
    font-family: var(--lx-font-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 1.6em 0 0.5em;
}
.agb_content h4 {
    font-family: var(--lx-font-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    margin: 1.4em 0 0.4em;
}
.agb_content p { margin: 0 0 1em; }
.agb_content ol,
.agb_content ul { margin: 0 0 1em; padding-left: 1.5em; }
.agb_content li { margin: 0 0 0.4em; }
.agb_content a {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.agb_content a:hover { color: var(--lx-grey-soft, #5C544C); }
.agb_content strong,
.agb_content b { font-weight: 600; }
.agb_content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.2em;
    font-size: 15px;
}
.agb_content th,
.agb_content td {
    border: 1px solid var(--lx-pearl, #E8E3DC);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}
/* The plugin "Stand: DD.MM.YYYY" freshness line — quiet it. */
.agb_content .agb_date,
.agb_content p:last-child em { color: var(--lx-grey-soft, #5C544C); font-size: 14px; }
@media (max-width: 767px) {
    .agb_content h2 { font-size: 23px; }
    .agb_content h3 { font-size: 18px; }
}