/*
Theme Name: Lumière Haven — Gilded
Theme URI: https://lumiere-haven-co.local/
Author: Lumière Haven & Co.
Author URI: https://lumiere-haven-co.local/
Description: Block (Full Site Editing) theme for Lumière Haven & Co. — Gilded variation. A luxury storefront for handcrafted candles, dressed in polished gold metals, forest-green accents, and an off-white base. Playfair Display + Montserrat with Cormorant Garamond / script accents. Built to the Lumière Haven & Co "Gilded" Design System moodboard. Structurally identical to Lumière Haven Blocks; restyled palette and typography only.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lumiere-haven-gilded
*/

/* =========================================================================
   Lumière Haven & Co — storefront theme layer.
   Design tokens are mirrored from the Design System (tokens/*.css +
   website/theme.css). theme.json exposes a curated subset as WordPress
   presets; this file keeps the full token set so the component styles port
   faithfully, and bridges the prototype's classes onto block markup.
   ========================================================================= */

:root {
  /* Palette */
  /* Polished-gold metals (moodboard anchors at -300/-400 + deep golds) */
  --amber-900:#3F341E; --amber-800:#54472B; --amber-700:#6B5738;
  --amber-600:#836A3A; --amber-500:#A07E45; --amber-400:#BE9F62;
  --amber-300:#D0B580; --amber-200:#E2CB9C; --amber-100:#F3E8CF;
  --gold-700:#AA8A58; --gold-600:#BEA16D; --gold-500:#CBAE78;
  --gold-400:#D0B580; --gold-300:#E0C791;
  /* Forest greens (secondary accents) */
  --sage-600:#586D58; --sage-500:#91A68F; --sage-300:#B9C7B4; --sage-100:#EAEFE7;
  --pine:#2F412F;
  /* Functional error reds (not part of the brand palette) */
  --burgundy-900:#3A141C; --burgundy-800:#4D1A26; --burgundy-700:#641F2F; --burgundy-600:#7C2A3C;
  --blush-400:#D9A8A2; --blush-300:#E7C9C4; --blush-200:#F1DEDA;
  /* Off-white base */
  --glow:var(--wp--preset--color--glow); --ivory:var(--wp--preset--color--ivory); --linen:var(--wp--preset--color--linen);
  /* Taupe neutrals */
  --stone-300:#D2CABA; --stone-400:#B7AF9D; --stone-500:#9C9484;
  /* Onyx / charcoal darks */
  --charcoal-900:#1A1A1A; --charcoal-700:#2A2C2A; --charcoal-500:#3C3C3C; --charcoal-300:#6A675F;

  /* Semantic */
  --page:var(--ivory);
  --card:var(--wp--preset--color--card);
  --ink:#2B2B2B;
  --body:#3C3C3C;
  --muted:var(--stone-500);
  --on-dark:#EAEAEA;
  --on-gold:#FFFFFF;
  --brand:var(--amber-600);
  --line:rgba(42,44,42,0.12);
  --line-soft:rgba(42,44,42,0.08);
  --line-strong:rgba(42,44,42,0.22);
  --on-dark-line:rgba(234,234,234,0.16);

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;

  --shadow-sm:0 2px 8px rgba(30,28,24,0.07);
  --shadow-md:0 8px 24px rgba(30,28,24,0.10);
  --shadow-lg:0 18px 48px rgba(30,28,24,0.14);
  --shadow-glow:0 0 60px rgba(208,181,128,0.30);

  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --dur:280ms; --dur-slow:520ms;

  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-sans:'Montserrat','Helvetica Neue',system-ui,sans-serif;
  --font-serif:'Cormorant Garamond',Georgia,serif;
  --font-script:'Pinyon Script','Cormorant Garamond',cursive;

  --container:1240px;
  --gutter:clamp(1.25rem,4vw,4rem);
}

/* ---------- Base ---------- */
img { display:block; max-width:100%; }
::selection { background:var(--gold-300); color:var(--amber-900); }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:var(--stone-300); border-radius:999px; }
*::-webkit-scrollbar-track { background:transparent; }

/* ---------- Typography utilities ---------- */
.display { font-family:var(--font-display); font-weight:500; line-height:1.04; letter-spacing:-0.01em; color:var(--ink); }
.display.italic { font-style:italic; }
.serif { font-family:var(--font-display); }
.eyebrow {
  font-family:var(--font-sans); font-weight:500; font-size:0.72rem;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--brand);
  text-align:center;
}
.eyebrow.on-dark { color:var(--gold-500); }
.muted { color:var(--muted); }

.container { max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:clamp(3.5rem,8vw,7rem); }
/* Full-bleed sections and the topbar bands should sit flush — kill the global
   1.3rem blockGap seam between top-level flow children (in-content spacing,
   e.g. prose paragraphs, keeps its gap since those aren't direct children here). */
.lh-topbar > *, .app-main > * { margin-block-start:0; }
.rule-gold { width:64px; height:1px; background:var(--gold-500); border:none; margin:0; }
.rule-gold.center { margin-inline:auto; }

/* ---------- Section heads ---------- */
.sec-head { text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; margin-bottom:clamp(2.2rem,4vw,3.4rem); }
.sec-head h2 { font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:500; color:var(--ink); margin:0; line-height:1.05; letter-spacing:-0.01em; }
.sec-head p { max-width:46ch; color:var(--body); margin:0; font-size:1rem; }

/* ---------- Buttons (WordPress block bridge) ----------
   Core buttons are styled amber-pill via theme.json. These variants are
   applied with block classNames / styles in templates. */
.wp-block-button__link {
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wp-block-button__link:active { transform:translateY(0) scale(0.99); }
.wp-block-button:not(.is-style-outline):not(.is-style-gold):not(.is-style-outline-light) .wp-block-button__link:hover {
  box-shadow:var(--shadow-md);
}

/* Gold gradient */
.is-style-gold .wp-block-button__link {
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  color:var(--amber-900); box-shadow:var(--shadow-sm); border:none;
}
.is-style-gold .wp-block-button__link:hover { box-shadow:0 6px 22px rgba(190,161,109,0.45); transform:translateY(-1px); }

/* Outline (light bg) */
.is-style-outline .wp-block-button__link {
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-strong); border:none;
}
.is-style-outline .wp-block-button__link:hover { background:var(--ink); color:var(--glow); }

/* Outline (on dark) */
.is-style-outline-light .wp-block-button__link {
  background:transparent; color:var(--glow);
  box-shadow:inset 0 0 0 1px rgba(245,240,230,0.45); border:none;
}
.is-style-outline-light .wp-block-button__link:hover { background:rgba(245,240,230,0.10); box-shadow:inset 0 0 0 1px rgba(245,240,230,0.85); }

/* Anchor buttons (for wp:html overlay sections — hero, emotional split). */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.55em;
  font-family:var(--font-sans); font-weight:500; font-size:0.82rem;
  letter-spacing:0.12em; text-transform:uppercase; text-decoration:none;
  padding:0.95em 1.9em; border:none; border-radius:var(--radius-pill); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space:nowrap;
}
.btn:active { transform:translateY(0) scale(0.99); }
.btn-lg { padding:1.15em 2.4em; font-size:0.86rem; }
.btn-gold { background:linear-gradient(135deg,var(--gold-400),var(--gold-600)); color:var(--amber-900); box-shadow:var(--shadow-sm); }
.btn-gold:hover { box-shadow:0 6px 22px rgba(190,161,109,0.45); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-strong); }
.btn-outline:hover { background:var(--ink); color:var(--glow); }
.btn-outline-light { background:transparent; color:var(--glow); box-shadow:inset 0 0 0 1px rgba(245,240,230,0.45); }
.btn-outline-light:hover { background:rgba(245,240,230,0.10); box-shadow:inset 0 0 0 1px rgba(245,240,230,0.85); }
.lh-hero-cta, .lh-split-cta { display:flex; gap:0.9rem; flex-wrap:wrap; margin-top:0.4rem; }
.lh-hero-cta { justify-content:center; margin-top:0.6rem; }

.link-underline {
  position:relative; font-family:var(--font-sans); font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase;
  font-weight:500; color:var(--ink); padding-bottom:3px; cursor:pointer; display:inline-block;
}
.link-underline::after {
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform-origin:left; transition:transform var(--dur) var(--ease);
}
.link-underline:hover::after { transform:scaleX(0.4); }

/* ---------- Icons ---------- */
.ic { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:middle; }
.ic-sm { width:16px; height:16px; }

/* ===================================================== HEADER ===== */
.lh-topbar { position:sticky; top:0; z-index:60; }
/* On the homepage the header overlays the immersive dark hero (which runs to
   the very top), turning solid once scrolled. */
body.home .lh-topbar { position:fixed; top:0; left:0; right:0; }
.lh-topbar.is-fixed { position:fixed; left:0; right:0; }
.lh-announce {
  background:var(--charcoal-900); color:var(--gold-400);
  text-align:center; font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase;
  padding:0.6rem 1rem; font-weight:400;
}
/* Announcement bar: two phrases crossfading in place (driven by main.js) */
.lh-announce-rotator { position:relative; display:grid; place-items:center; min-height:1.1em; }
.lh-announce-text {
  grid-area:1 / 1; margin:0; opacity:0; visibility:hidden;
  transition:opacity var(--dur) var(--ease);
}
.lh-announce-text.is-active { opacity:1; visibility:visible; }
.lh-header { transition:background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.lh-header-inner {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  height:78px; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
}
/* Default = solid translucent (used on inner pages and home-after-scroll) */
.lh-header { background:color-mix(in srgb, var(--wp--preset--color--card) 90%, transparent); backdrop-filter:blur(14px) saturate(1.1); color:var(--ink); box-shadow:0 1px 0 var(--line); }
/* Transparent over the dark hero (home, top of page) until scrolled */
body.home .lh-topbar:not(.is-scrolled) .lh-header { background:transparent; color:var(--glow); box-shadow:none; }
.lh-nav { display:flex; align-items:center; gap:2.2rem; }
.lh-nav a, .lh-nav .wp-block-navigation-item__content {
  font-family:var(--font-sans); font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:500;
  color:inherit; opacity:0.86; transition:opacity var(--dur) var(--ease);
}
.lh-nav a:hover, .lh-nav .current-menu-item .wp-block-navigation-item__content { opacity:1; }
.lh-header-actions { display:flex; align-items:center; gap:0.4rem; }
.lh-icon-btn, .lh-header-actions .wp-block-navigation { color:inherit; }
.lh-icon-btn {
  display:grid; place-items:center; width:42px; height:42px; border-radius:var(--radius-pill);
  background:transparent; border:none; color:inherit; position:relative;
  transition:background var(--dur) var(--ease); cursor:pointer;
}
.lh-icon-btn:hover { background:rgba(156,148,132,0.14); }
body.home .lh-topbar:not(.is-scrolled) .lh-icon-btn:hover { background:rgba(245,240,230,0.12); }
/* Logo */
.lh-logo img, .lh-header .wp-block-site-logo img { height:68px; width:auto; }
/* Mini-cart / account inside header inherit colour */
.lh-header .wp-block-woocommerce-mini-cart__button,
.lh-header .wc-block-mini-cart__button { color:inherit; }
.lh-header .wp-block-woocommerce-customer-account { color:inherit; }
/* The WC block ships its icon with only a viewBox (no width/height); size it here
   so it doesn't collapse to 0×0 when the block stylesheet doesn't size it. */
.lh-header .wp-block-woocommerce-customer-account .wc-block-customer-account__link {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-pill);
  color:inherit; transition:background var(--dur) var(--ease);
}
.lh-header .wp-block-woocommerce-customer-account .wc-block-customer-account__link:hover {
  background:rgba(156,148,132,0.14);
}
body.home .lh-topbar:not(.is-scrolled) .wp-block-woocommerce-customer-account .wc-block-customer-account__link:hover {
  background:rgba(245,240,230,0.12);
}
.lh-header .wp-block-woocommerce-customer-account .icon { width:22px; height:22px; display:block; }

/* ===================================================== HERO ====== */
.lh-hero { position:relative; overflow:hidden; min-height:min(100svh,930px); display:flex; align-items:end; }
.lh-hero-media { position:absolute; inset:0; z-index:0; }
.lh-hero-media img, .lh-hero-media video { width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.lh-hero-scrim { position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(130% 110% at 42% 32%, rgba(20,15,11,0.30) 35%, rgba(20,15,11,0.80) 100%),
    linear-gradient(180deg, rgba(20,15,11,0.55) 0%, rgba(20,15,11,0.35) 45%, rgba(20,15,11,0.82) 100%);
}
.lh-hero-inner { position:relative; z-index:2; text-align:center; width:100%; margin-bottom: min(55svh,240px) }
.lh-hero-wordmark { height:clamp(88px,14vw,168px); width:auto; margin-inline:auto; filter:drop-shadow(0 4px 30px rgba(0,0,0,0.4)); }
.lh-hero-title {
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(2.6rem,6.5vw,5.4rem); line-height:1.02; color:var(--glow);
  margin:0;  text-shadow:0 2px 40px rgba(0,0,0,0.35); letter-spacing:-0.01em;
}
.lh-hero-sub { max-width:42ch; margin:0 auto; padding: 24px 0; font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.6; color:rgba(245,240,230,0.86); }

/* ===================================================== HOME ====== */
.lh-promise-sec .eyebrow { margin-bottom:1.4rem; }
.lh-promise-sec .rule-gold { margin-bottom:2.2rem; }
.lh-promise {
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(1.5rem,1rem + 1.9vw,2.15rem); line-height:1.34;
  letter-spacing:-0.005em; color:var(--ink); margin:0 auto; max-width:20em;
  text-wrap:balance;
}
.lh-promise + p {
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(1rem,0.92rem + 0.4vw,1.2rem); line-height:1.5;
  color:var(--amber-700); margin:1.6rem auto 0; max-width:40ch; text-wrap:balance;
}

/* Our Story slider */
.lh-story-sec .eyebrow { margin-bottom:1.8rem; }
.lh-slider { position:relative; border-radius:var(--radius-lg); overflow:hidden; max-width:min(80svw,420px); margin-inline:auto; }
.lh-slider-track {
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
}
.lh-slider-track::-webkit-scrollbar { display:none; }
.lh-slide { flex:0 0 100%; scroll-snap-align:start; }
.lh-slide img { display:block; width:100%; height:auto; aspect-ratio:3375/4219; }
.lh-slider-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; display:grid; place-items:center; padding:0;
  border:none; border-radius:var(--radius-pill); cursor:pointer;
  background:color-mix(in srgb, var(--card) 78%, transparent);
  color:var(--charcoal-900);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lh-slider-arrow .ic { width:18px; height:18px; }
.lh-slider-arrow.prev { left:0.9rem; }
.lh-slider-arrow.next { right:0.9rem; }
.lh-slider-arrow:hover { background:var(--amber-600); color:var(--glow); }
.lh-slider-arrow:focus-visible { outline:2px solid var(--amber-300); outline-offset:2px; }
.lh-slider-dots {
  position:absolute; bottom:0.9rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; gap:0.45rem;
}
.lh-slider-dot {
  width:8px; height:8px; padding:0; border:none; border-radius:var(--radius-pill);
  cursor:pointer; background:rgba(253,253,252,0.55);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lh-slider-dot:hover { background:rgba(253,253,252,0.85); }
.lh-slider-dot.is-active { background:var(--amber-300); transform:scale(1.25); }
@media (max-width:640px) {
  .lh-slider-arrow { width:30px; height:30px; }
  .lh-slider-arrow.prev { left:0.55rem; }
  .lh-slider-arrow.next { right:0.55rem; }
  .lh-slider-dots { bottom:0.6rem; }
}

/* Feature cards */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2.4vw,2.2rem); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,2.6vw,2.4rem); }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.6rem,3vw,3rem); }

.feature-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2rem 1.6rem; display:flex; flex-direction:column; gap:0.7rem; align-items:flex-start;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feature-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.feature-icon { width:48px; height:48px; border-radius:var(--radius-pill); display:grid; place-items:center; background:var(--amber-100) url(assets/img/gold-texture.jpg) center/cover no-repeat; color:var(--glow); margin-bottom:0.3rem; }
.feature-card h3 { font-family:var(--font-display); font-size:1.42rem; font-weight:500; color:var(--ink); margin:0; }
.feature-card p { font-size:0.9rem; color:var(--body); margin:0; line-height:1.55; }

/* Collection / journal image cards */
.media-card { position:relative; overflow:hidden; border-radius:var(--radius-md); display:block; cursor:pointer; }
.media-card img { width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; transition:transform var(--dur-slow) var(--ease); }
.media-card:hover img { transform:scale(1.05); }
.media-card .mc-scrim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,15,11,0) 40%, rgba(20,15,11,0.72) 100%); }
.media-card .mc-body { position:absolute; left:0; right:0; bottom:0; padding:2rem; color:var(--glow); }
.media-card .mc-body h3 { font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); margin:0 0 0.4rem; font-weight:500; color:var(--glow); }
.media-card .mc-body p { margin:0 0 1rem; opacity:0.86; max-width:34ch; font-size:0.95rem; }

/* Emotional band split */
.lh-split { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); min-height:560px; }
.lh-split-media { position:relative; min-height:420px; }
.lh-split-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lh-split-body { display:flex; flex-direction:column; justify-content:center; gap:1.4rem; padding:clamp(2.5rem,6vw,5.5rem); }
.lh-split-body h2 { font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.4rem); font-weight:500; line-height:1.08; margin:0; color:var(--glow); }
.lh-split-body p { color:rgba(245,240,230,0.82); font-size:1.08rem; max-width:46ch; margin:0; line-height:1.65; }

/* ===================================================== PRODUCT CARD ===== */
.product-card { display:flex; flex-direction:column; cursor:pointer; }
.product-card .pc-media { position:relative; overflow:hidden; border-radius:var(--radius-md); background:var(--linen); aspect-ratio:4/5; }
.product-card .pc-media img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); }
.product-card:hover .pc-media img { transform:scale(1.05); }
.pc-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(26,26,26,0.78); color:var(--gold-400); backdrop-filter:blur(4px);
  font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; font-weight:500;
  padding:0.42em 0.85em; border-radius:var(--radius-pill);
}
.pc-info { padding-top:1rem; display:flex; flex-direction:column; gap:0.25rem; }
.pc-collection { font-size:0.64rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
.pc-name { font-family:var(--font-display); font-size:1.32rem; font-weight:500; color:var(--ink); line-height:1.15; margin:0; }
.pc-tagline { font-size:0.82rem; color:var(--muted); font-style:italic; font-family:var(--font-display); }
.pc-price { font-size:0.95rem; color:var(--body); margin-top:0.2rem; }
.lh-card-notes { font-size:0.82rem; color:var(--muted); font-style:italic; font-family:var(--font-display); margin:0; }

/* WooCommerce product grid → adopt card styling */
.woocommerce-shop-grid .wc-block-product, .lh-products .wc-block-product { background:transparent; }

/* ===================================================== SCENT ===== */
.scent-notes { display:flex; gap:0.5rem; flex-wrap:wrap; }
.scent-note { font-size:0.8rem; padding:0.5em 1em; border-radius:var(--radius-pill); border:1px solid var(--line-strong); color:var(--brand); }
.on-dark .scent-note, .lh-pdp .scent-note { border-color:rgba(208,181,128,0.4); color:var(--gold-300); }
.scent-meter { display:flex; flex-direction:column; gap:0.1rem; }
.scent-row { display:flex; align-items:center; gap:1rem; margin-bottom:0.7rem; }
.scent-label { width:88px; font-size:0.78rem; letter-spacing:0.06em; color:var(--body); }
.lh-pdp .scent-label, .on-dark .scent-label { color:rgba(245,240,230,0.82); }
.scent-track { flex:1; height:4px; border-radius:999px; background:var(--linen); overflow:hidden; }
.lh-pdp .scent-track, .on-dark .scent-track { background:rgba(245,240,230,0.14); }
.scent-fill { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold-500),var(--amber-600)); }

/* ===================================================== SHOP ===== */
.lh-filter-bar { position:sticky; top:0px; z-index:30; background:rgba(245,240,230,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.lh-filter-bar .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1rem; }
.filter-group { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
.chip { font-family:var(--font-sans); font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:500;
  padding:0.6em 1.2em; border-radius:var(--radius-pill); border:1px solid var(--line-strong);
  background:transparent; color:var(--body); transition:all var(--dur) var(--ease); cursor:pointer; text-decoration:none; }
.chip:hover { border-color:var(--amber-600); color:var(--amber-700); }
.chip.active { background:var(--amber-600); border-color:var(--amber-600); color:var(--glow); }

/* ===================================================== PDP (charcoal) ===== */
.lh-pdp { background:var(--charcoal-900); color:var(--on-dark); }
.lh-pdp .lh-breadcrumb { padding-top:2rem; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(245,240,230,0.6); display:flex; gap:0.6rem; align-items:center; }
.lh-pdp .lh-breadcrumb a { color:inherit; }
.lh-pdp .lh-breadcrumb .current { color:var(--gold-400); }
.lh-pdp h1, .lh-pdp .product_title { color:var(--glow); font-family:var(--font-display); font-weight:500; }
.lh-pdp .price, .lh-pdp .woocommerce-Price-amount { color:var(--gold-400) !important; font-family:var(--font-display); font-size:2rem; }
.lh-pdp .lh-accordion { border-top:1px solid var(--on-dark-line); }
.lh-pdp .lh-acc-item { border-bottom:1px solid var(--on-dark-line); }
.lh-pdp .lh-acc-head { width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:none; color:var(--glow); padding:1.1rem 0; font-family:var(--font-display); font-size:1.3rem; text-align:left; cursor:pointer; }
.lh-pdp .lh-acc-body { color:rgba(245,240,230,0.78); margin:0 0 1.2rem; line-height:1.65; max-width:52ch; }
.lh-pdp .lh-acc-body[hidden] { display:none; }

/* ===================================================== FOOTER ===== */
/* Footer sits flush under content — cancel the root blockGap (theme.json blockGap 1.3rem,
   applied to every .wp-site-blocks child) so there's no light seam above the dark footer.
   Specificity 0,1,1 beats WP's :where(.wp-site-blocks) > * (0,0,0) — no !important needed. */
.wp-site-blocks > footer { margin-block-start:0; }
.lh-footer { background:var(--charcoal-900); color:var(--on-dark); padding-block:clamp(3rem,6vw,5rem) 2rem; }
.lh-footer a { color:var(--on-dark); opacity:0.72; transition:opacity var(--dur) var(--ease); text-decoration:none; }
.lh-footer a:hover { opacity:1; }
.lh-footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:3rem; }
.lh-footer h4 { font-family:var(--font-sans); font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-400); margin:0 0 1.2rem; font-weight:500; }
.lh-footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.7rem; font-size:0.92rem; }
.lh-footer-wordmark { height:clamp(84px,11vw,118px); width:auto; margin-bottom:1.2rem; }
.lh-footer ul .lh-subcat { padding-left:1rem; position:relative; }
.lh-footer ul .lh-subcat::before { content:""; position:absolute; left:0; top:0.62em; width:0.5rem; height:1px; background:var(--gold-400); opacity:0.5; }
.lh-footer-tagline { font-family:var(--font-script); font-size:2.5rem; font-weight:400; color:var(--gold-400); line-height:1.15; margin:0.2rem 0 0; }
.lh-footer-news { display:flex; gap:0.5rem; margin-top:1rem; max-width:340px; }
.lh-footer-news input { flex:1; background:rgba(245,240,230,0.06); border:1px solid var(--on-dark-line); color:var(--on-dark); border-radius:var(--radius-pill); padding:0.8rem 1.2rem; font-family:inherit; font-size:0.9rem; }
.lh-footer-news input::placeholder { color:rgba(245,240,230,0.5); }
.lh-footer-news input:focus { outline:none; border-color:var(--gold-500); }
.lh-footer-news .lh-foot-join { background:linear-gradient(135deg,var(--gold-400),var(--gold-600)); color:var(--amber-900); border:none; border-radius:var(--radius-pill); padding:0 1.3rem; font-family:var(--font-sans); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; cursor:pointer; transition:box-shadow var(--dur) var(--ease); }
.lh-footer-news .lh-foot-join:hover { box-shadow:0 6px 22px rgba(190,161,109,0.45); }
.lh-footer-news .lh-foot-join:disabled { opacity:0.6; cursor:default; }
.lh-footer-news .lh-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.lh-foot-msg { margin:0.7rem 0 0; min-height:1.2em; font-size:0.85rem; color:rgba(245,240,230,0.6); }
.lh-foot-msg.is-ok { color:var(--gold-400); }
.lh-foot-msg.is-error { color:var(--blush-400); }
.lh-footer-social { display:flex; gap:1rem; margin-top:0.5rem; align-items:center; }
.lh-footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid var(--on-dark-line); font-size:0.78rem; opacity:0.6; }
.lh-foot-mark { letter-spacing:0.16em; text-transform:uppercase; margin:0; }
.lh-footer-bottom p { margin:0; }

/* ===================================================== CONTENT PAGES ===== */
.lh-page-head { padding-block: clamp(2.5rem,5vw,4rem); }
.lh-page-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem,4.5vw,3.4rem); line-height: 1.05; color: var(--ink); margin: .4rem 0 0; }
.lh-page-body { padding-block: clamp(2.5rem,5vw,4rem); }
.lh-page-body h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin: 2rem 0 .8rem; }
.lh-page-body h3 { font-size: 1.4rem; margin: 1.6rem 0 .6rem; }
.lh-page-body p, .lh-page-body li { font-size: 1.05rem; line-height: 1.75; color: var(--body); }
.lh-page-body ul, .lh-page-body ol { padding-left: 1.2rem; }
.lh-page-body a:not(.wp-block-button__link) { color: var(--amber-700); text-decoration: underline; text-underline-offset: 3px; }
.lh-page-body .wp-block-button__link { text-decoration: none; }
.lh-page-body img { border-radius: var(--radius-md); }

/* ---------- News grid (Query Loop cards) ---------- */
.lh-news-grid { list-style:none; margin:0; padding:0; }
.lh-news-grid > li { margin:0; }
.lh-news-card { height:100%; }
.lh-news-card .pc-media { aspect-ratio:3/2; margin:0; }
.lh-news-card .pc-media a, .lh-news-card .pc-media img { display:block; width:100%; height:100%; object-fit:cover; }
.lh-news-card .pc-collection a { color:var(--muted); text-decoration:none; }
.lh-news-card .pc-name { font-size:1.5rem; margin:0; }
.lh-news-card .pc-name a { color:var(--ink); text-decoration:none; }
.lh-news-card .pc-name a:hover { color:var(--amber-700); }
.lh-news-excerpt { font-size:0.95rem; line-height:1.6; color:var(--body); margin:0.2rem 0 0; }
.lh-news-readmore { margin-top:0.5rem; }
.lh-news-body .wp-block-query-pagination a, .lh-news-body .wp-block-query-pagination .page-numbers { color:var(--muted); font-size:0.9rem; padding:0.3rem 0.6rem; }
.lh-news-body .wp-block-query-pagination .current { color:var(--amber); border-bottom:1px solid var(--amber); }

/* ---------- Single post (the News) ---------- */
.lh-post-head .eyebrow a { color: var(--brand); text-decoration: none; }
.lh-post-meta { margin-top: 1rem; font-family: var(--font-sans); font-size: 0.8rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lh-post-cover { margin-top: clamp(1.6rem,4vw,2.6rem); margin-bottom: 0; }
.lh-post-cover img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 16/9;
  box-shadow: 0 24px 60px rgba(30,28,24,0.12); }
.lh-post-body > p:first-of-type { font-size: 1.18rem; line-height: 1.7; color: var(--ink); }
.lh-post-body blockquote { margin: 2.2rem 0; padding: 0 0 0 1.4rem;
  border-left: 2px solid var(--gold-500); font-family: var(--font-serif);
  font-style: italic; font-size: 1.5rem; line-height: 1.4; color: var(--ink); }
.lh-post-body blockquote p { font-size: inherit; color: inherit; }
.lh-post-back { margin-top: clamp(2.5rem,5vw,3.5rem); padding-top: 1.6rem;
  border-top: 1px solid var(--line); }
.lh-post-back a { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--amber-700); text-decoration: none; }

/* ============================================== CONTACT FORM ===== */
/* WPForms (modern markup), brand-aligned. Theme via the plugin's own CSS
   variables (clean, no specificity wars), plus a warm card + gold CTA. */
.wpforms-container.wpforms-container-full.wpforms-render-modern {
  margin-top: 2.5rem; margin-bottom: 0;
  box-shadow: 0 18px 44px rgba(30,28,24,0.07);
  /* --- WPForms container tokens (consumed by the plugin's own rules) --- */
  --wpforms-background-color: var(--card);
  --wpforms-container-padding: clamp(1.6rem, 4vw, 2.75rem);
  --wpforms-container-border-radius: var(--radius-lg);
  --wpforms-container-border-style: solid;
  --wpforms-container-border-size: 1px;
  --wpforms-container-border-color: var(--line);
  /* --- WPForms field tokens --- */
  --wpforms-field-border-radius: var(--radius-md);
  --wpforms-field-background-color: var(--ivory);
  --wpforms-field-border-color: var(--line-strong);
  --wpforms-field-text-color: var(--ink);
  --wpforms-label-color: var(--ink);
  --wpforms-label-sublabel-color: var(--muted);
  --wpforms-button-border-radius: var(--radius-pill);
  --wpforms-button-text-color: var(--amber-900);
  --wpforms-button-background-color: var(--gold-500);
}
.wpforms-container input.wpforms-field-medium,
.wpforms-container textarea.wpforms-field-medium,
.wpforms-container select.wpforms-field-medium,
.wpforms-container .wpforms-field-row.wpforms-field-medium {
  max-width: 100% !important; width: 100% !important;
}
.wpforms-container .wpforms-field { padding: 0 0 1.4rem; }
.wpforms-container .wpforms-field-label,
.wpforms-container legend.wpforms-field-label {
  font-family: var(--font-sans); font-size: 0.76rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; color: var(--ink);
  margin: 0 0 0.55rem; display: block;
}
.wpforms-container .wpforms-required-label { color: var(--amber-700); }
.wpforms-container .wpforms-field-sublabel {
  font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); font-weight: 400; margin-top: 0.4rem;
}
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="url"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container textarea,
.wpforms-container select {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-sans); font-size: 1rem; color: var(--ink);
  background: var(--ivory); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); padding: 0.85rem 1rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder { color: var(--muted); opacity: 1; }
.wpforms-container.wpforms-container-full input:focus,
.wpforms-container.wpforms-container-full textarea:focus,
.wpforms-container.wpforms-container-full select:focus {
  outline: none; background: var(--glow) !important; border-color: var(--amber-600) !important;
  box-shadow: 0 0 0 3px rgba(131,106,58,0.16) !important;
}
.wpforms-container textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
/* First/Last name two-up row */
.wpforms-container .wpforms-field-row { display: flex; gap: 1rem; }
.wpforms-container .wpforms-field-row .wpforms-one-half,
.wpforms-container .wpforms-field-row .wpforms-first {
  flex: 1; width: auto !important; margin: 0 !important;
}
/* Submit = brand gold pill (mirrors .btn-gold) */
.wpforms-container .wpforms-submit-container { margin-top: 0.3rem; }
.wpforms-container button.wpforms-submit {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500;
  padding: 0.95em 2.2em; border: none; border-radius: var(--radius-pill); cursor: pointer;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: var(--amber-900);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.wpforms-container button.wpforms-submit:hover { box-shadow: 0 6px 22px rgba(190,161,109,0.45); transform: translateY(-1px); }
/* WPForms' modern CSS beats the rules above on specificity: it sets
   `box-shadow:none` at (0,2,2) and a `background` SHORTHAND on :hover at
   (0,3,2), which wipes the gold gradient and repaints the plugin's blue.
   These selectors are (0,3,1)/(0,4,1) so they win, restoring the same
   behaviour as .btn-gold: gradient holds, glow + lift on hover. 2026-07-25 */
.wpforms-container.wpforms-container-full button.wpforms-submit {
  box-shadow: var(--shadow-sm);
}
.wpforms-container.wpforms-container-full button.wpforms-submit:hover,
.wpforms-container.wpforms-container-full button.wpforms-submit:active {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--amber-900);
}
.wpforms-container.wpforms-container-full button.wpforms-submit:hover {
  box-shadow: 0 6px 22px rgba(190,161,109,0.45);
  transform: translateY(-1px);
}
.wpforms-container.wpforms-container-full button.wpforms-submit:active {
  transform: translateY(0) scale(0.99);
}
.wpforms-container button.wpforms-submit:active { transform: translateY(0) scale(0.99); }
/* Validation states */
.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error { color: var(--burgundy-600); font-size: 0.78rem; font-style: normal; margin-top: 0.4rem; }
.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error { border-color: var(--blush-400); box-shadow: 0 0 0 3px rgba(217,168,162,0.18); }
.wpforms-confirmation-container-full {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--gold-500);
  border-radius: var(--radius-md); padding: 1.1rem 1.4rem; color: var(--body); margin-top: 1rem;
}
@media (max-width: 540px) {
  .wpforms-container .wpforms-field-row { flex-direction: column; gap: 0; }
  .wpforms-container .wpforms-field-row .wpforms-one-half + .wpforms-one-half { margin-top: 1rem !important; }
}

/* ===================================================== SEARCH ===== */
.lh-search .lh-search-list { list-style:none; margin:0; padding:0; }
.lh-search .lh-search-row { padding:1.6rem 0; border-bottom:1px solid var(--line); }
.lh-search .lh-search-row:first-child { padding-top:0.5rem; }
.lh-search .lh-search-title { font-family:var(--font-display); font-weight:500; font-size:1.6rem; line-height:1.2; margin:0 0 .4rem; }
.lh-search .lh-search-title a { color:var(--ink); text-decoration:none; }
.lh-search .lh-search-title a:hover { color:var(--amber-700); }
.lh-search .lh-search-excerpt { color:var(--body); font-size:1rem; line-height:1.6; margin:0; }
.lh-search .lh-search-excerpt a { color:var(--amber-700); }
.lh-search-empty { color:var(--muted); font-family:var(--font-display); font-size:1.3rem; font-style:italic; margin:1rem 0 2rem; }
.lh-search .wp-block-query-pagination { margin-top:2.5rem; }
.lh-search .wp-block-query-pagination a, .lh-search .wp-block-query-pagination .current { color:var(--body); }

/* ============================================ SEARCH OVERLAY ===== */
/* Full-screen search layer opened from the header icon (driven by main.js).
   Mirrors the nav overlay: charcoal field, fixed inset, scroll-locked html. */
html.lh-search-open { overflow:hidden; }
/* The header's backdrop-filter would make it the containing block for the
   fixed overlay; neutralize it while open (same fix as the nav overlay). */
html.lh-search-open .lh-header { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.lh-search-overlay {
  position:fixed; inset:0; z-index:140;
  background:var(--charcoal-900); color:var(--on-dark);
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(4.5rem,12vh,8rem) var(--gutter) 2.5rem;
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.lh-search-overlay.is-open { opacity:1; }
.lh-search-overlay[hidden] { display:none; }
.lh-search-close {
  position:absolute; top:1.6rem; right:var(--gutter);
  width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:none; color:var(--on-dark); cursor:pointer;
  border-radius:var(--radius-pill); opacity:0.85; transition:opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lh-search-close:hover { opacity:1; background:rgba(245,240,230,0.10); }
.lh-search-close .ic { width:24px; height:24px; }
.lh-search-panel {
  width:100%; max-width:640px;
  transform:translateY(-8px); transition:transform var(--dur) var(--ease);
}
.lh-search-overlay.is-open .lh-search-panel { transform:translateY(0); }
.lh-search-panel .eyebrow { margin:0 0 0.8rem; }
.lh-search-form { display:flex; align-items:center; gap:0.6rem; border-bottom:1px solid var(--gold-500); padding-bottom:0.5rem; }
.lh-search-input {
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--glow); caret-color:var(--gold-400);
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.8rem,5vw,3rem); line-height:1.1; padding:0.1em 0;
}
.lh-search-input::placeholder { color:rgba(245,240,230,0.42); }
.lh-search-input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
.lh-search-submit {
  flex:none; width:48px; height:48px; display:grid; place-items:center;
  background:transparent; border:none; color:var(--gold-400); cursor:pointer;
  border-radius:var(--radius-pill); transition:color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lh-search-submit:hover { color:var(--glow); transform:translateX(2px); }
.lh-search-submit .ic { width:26px; height:26px; }
.lh-search-suggest { list-style:none; margin:1rem 0 0; padding:0; max-height:52vh; overflow-y:auto; }
.lh-search-suggest[hidden] { display:none; }
.lh-suggest-item {
  display:flex; align-items:center; gap:1rem; padding:0.65rem 0.6rem;
  border-radius:var(--radius-md); cursor:pointer; transition:background var(--dur) var(--ease);
}
.lh-suggest-item[aria-selected="true"] { background:rgba(208,181,128,0.10); }
.lh-suggest-thumb { width:52px; height:52px; flex:none; object-fit:cover; border-radius:var(--radius-md); background:rgba(245,240,230,0.06); }
.lh-suggest-thumb.is-empty { display:block; }
.lh-suggest-text { display:flex; flex-direction:column; gap:0.15rem; min-width:0; }
.lh-suggest-name { font-family:var(--font-display); font-size:1.2rem; color:var(--glow); line-height:1.2; }
.lh-suggest-price { font-family:var(--font-sans); font-size:0.85rem; letter-spacing:0.04em; color:var(--gold-400); }
.lh-search-hint { margin:1.2rem 0 0; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(245,240,230,0.5); }
@media (prefers-reduced-motion: reduce) {
  .lh-search-overlay, .lh-search-panel { transition:none; }
  .lh-search-panel { transform:none; }
}

/* ===================================================== COLLECTIONS ===== */
.lh-coll-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.4rem,2.6vw,2.4rem); }
.lh-coll-grid .media-card .mc-body h3 { font-size: clamp(1.8rem,3vw,2.6rem); }
@media (max-width: 760px) { .lh-coll-grid { grid-template-columns: 1fr; } }

/* ===================================================== 404 / EMPTY ===== */
.lh-404 { min-height: 64vh; display: grid; place-items: center; text-align: center; }
.lh-404 .lh-404-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem,6vw,4.5rem); color: var(--ink); margin: .4rem 0 1rem; line-height: 1.02; }
.lh-404 p { color: var(--body); max-width: 44ch; margin: 0 auto 1.8rem; }

/* ===================================================== UTIL / MOTION ===== */
.on-dark { color:var(--on-dark); }
@keyframes riseIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.rise { animation:riseIn var(--dur-slow) var(--ease) both; }
.lh-reveal { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.lh-reveal.is-in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  .lh-reveal { opacity:1; transform:none; }
}

/* ---------- Header nav: collapse to the WP overlay hamburger ≤980px ----------
   The 6 nav items + logo + action icons need ~920px to sit inline, so below that
   we use WordPress's own responsive overlay (it ships a working toggle script).
   Raising the collapse point here from WP's 600px default fixes both the
   "no menu at 600–760" gap and the "inline nav overflows at ~768" bug. */
@media (max-width:980px) {
  .lh-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display:flex !important; }
  .lh-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display:none !important; }
}
@media (min-width:981px) {
  .lh-header .wp-block-navigation__responsive-container-open { display:none !important; }
}
/* Brand-styled mobile overlay (the WP modal that opens on tap).
   WP's view script writes inline styles on open, so these use !important to win
   and to guarantee a full-screen charcoal panel regardless of WP's internals. */
/* The header's backdrop-filter would make it the containing block for the fixed
   overlay (trapping it to header height). Drop it while the menu is open so the
   overlay fills the viewport. WP adds .has-modal-open to <html> on open. */
html.has-modal-open .lh-header { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.lh-header .wp-block-navigation__responsive-container.is-menu-open {
  position:fixed !important; inset:0 !important; box-sizing:border-box !important;
  background:var(--charcoal-900) !important; color:var(--on-dark) !important;
  display:flex !important; flex-direction:column !important; justify-content:flex-start !important;
  padding:5.5rem var(--gutter) 2.5rem !important; z-index:120 !important; overflow-y:auto !important;
}
.lh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width:100%; align-items:flex-start;
}
.lh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction:column !important; align-items:flex-start !important; gap:0.4rem !important;
}
.lh-header .wp-block-navigation__responsive-container.is-menu-open a {
  color:var(--on-dark) !important; font-family:var(--font-display); font-size:1.9rem; padding:0.35rem 0;
}
.lh-header .wp-block-navigation__responsive-container.is-menu-open a:hover { color:var(--gold-400) !important; }
.lh-header .wp-block-navigation__responsive-container-open,
.lh-header .wp-block-navigation__responsive-container-close { color:inherit; }
.lh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color:var(--on-dark) !important; top:1.6rem; right:var(--gutter);
}

/* ---------- Responsive ---------- */
@media (max-width:1024px) {
  .lh-footer-grid { grid-template-columns:1fr 1fr; gap:2.4rem; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .lh-header-search { display:none; }
  .grid-3, .grid-2 { grid-template-columns:1fr; gap:1.6rem; }
  .grid-4 { grid-template-columns:repeat(2,1fr); gap:1rem; }
  .lh-footer-grid { grid-template-columns:1fr; gap:2rem; }
  .lh-header-inner { height:64px; }
  .lh-logo img, .lh-header .wp-block-site-logo img { height:30px; }
  .lh-filter-bar { top:64px; }
}

.lh-sound-toggle {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 50; /* Ensures it sits above everything */
    background: rgba(0, 0, 0, 0.1);
    color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.2); /* Subtle gold border */
    padding: 10px 20px;
    border-radius: 30px; /* Elegant pill shape */
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px); /* Modern frosted glass effect */
    -webkit-backdrop-filter: blur(5px);
}

.lh-sound-toggle:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(212, 175, 55, 0.5); /* Brighter gold on hover */
    transform: scale(1.02);
}