/*
Theme Name: LillysHair
Theme URI: http://localhost/lilly-hair
Author: LillysHair Studio
Description: Premium Remy human-hair storefront theme for WooCommerce. Ported from the lillyshair.com redesign prototype — editorial layout, sidebar mega-menu, AJAX cart drawer, quick view, search overlay, wishlist and multi-currency display. House-of-CB pink palette (wine + blush).
Version: 3.15.3
Requires at least: 6.0
Requires PHP: 7.4
WC requires at least: 7.0
WC tested up to: 10.9
Text Domain: lilly-hair
*/

/* =====================================================================
   LillysHair — Storefront stylesheet
   Palette, type, components. Mobile-first; breakpoints at 620 / 1100px.
   Palette: House-of-CB pink — wine #82203e accent, wineDark #492929 text,
   cotton/pink pales for surfaces, blush for accents on dark. All tones are
   defined once in :root below and cascade via the --gold / --onyx / … names.
   ===================================================================== */

/* ---- self-hosted brand fonts (House of CB match) ----
   Chemre → display headings & titles; JJannon Display (italic) → body + script
   accents. Files live in assets/js/fonts/ (paths are relative to this stylesheet).
   Both JJannon faces point at the same italic source, so upright body text shows
   the italic glyphs with no synthetic slant, and an explicit font-style:italic
   still resolves to a real face rather than double-slanting. */
/* Chemre now ships BOTH cuts: the upright face is the default everywhere, and the
   true italic cut is used only where CSS sets font-style:italic (headings stay
   upright; italic accents get a real italic face, not a synthetic slant). */
@font-face{
  font-family:'Chemre';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/js/fonts/Chemre.otf') format('opentype'),
      url('assets/js/fonts/Chemre.ttf') format('truetype');
}
@font-face{
  font-family:'Chemre';
  font-style:italic; font-weight:400; font-display:swap;
  src:url('assets/js/fonts/Chemre%20Italic.otf') format('opentype'),
      url('assets/js/fonts/Chemre%20Italic.ttf') format('truetype');
}
@font-face{
  font-family:'JJannon Display';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/js/fonts/JJannonDisplay-Italic.b16e4e98.woff2') format('woff2'),
      url('assets/js/fonts/JJannonDisplay-Italic.494a304c.woff') format('woff'),
      url('assets/js/fonts/JJannonDisplay-Italic.02398fe2.ttf') format('truetype');
}
@font-face{
  font-family:'JJannon Display';
  font-style:italic; font-weight:400; font-display:swap;
  src:url('assets/js/fonts/JJannonDisplay-Italic.b16e4e98.woff2') format('woff2'),
      url('assets/js/fonts/JJannonDisplay-Italic.494a304c.woff') format('woff'),
      url('assets/js/fonts/JJannonDisplay-Italic.02398fe2.ttf') format('truetype');
}
/* STRAIGHT (upright) JJannon kept as its own family — the body default is the
   slanted cut, so apply font-family:'jjannons-straing' wherever an upright JJannon
   is needed. Uses the JJannon Book files; both styles map to Book so it never
   slants. (No separate "jjannon-block" file exists — "block" = JJannon Book.) */
@font-face{
  font-family:'jjannons-straing';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/js/fonts/Web%20Fonts/2b2a0e640a6c016b18b8ff6574a4c75b.woff2') format('woff2'),
      url('assets/js/fonts/Web%20Fonts/2b2a0e640a6c016b18b8ff6574a4c75b.woff') format('woff'),
      url('assets/js/fonts/JJannon%20Book.ttf') format('truetype');
}
@font-face{
  font-family:'jjannons-straing';
  font-style:italic; font-weight:400; font-display:swap;
  src:url('assets/js/fonts/Web%20Fonts/2b2a0e640a6c016b18b8ff6574a4c75b.woff2') format('woff2'),
      url('assets/js/fonts/Web%20Fonts/2b2a0e640a6c016b18b8ff6574a4c75b.woff') format('woff'),
      url('assets/js/fonts/JJannon%20Book.ttf') format('truetype');
}
/* Gotham (Medium) — used on selected header controls (menu / search / currency). */
@font-face{
  font-family:'Gotham';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/js/fonts/Gotham-Medium.otf') format('opentype');
}

:root{
  /* ---- House-of-CB pink palette, mapped onto Lilly's original roles.
     Variable names are kept (--gold, --onyx, --ivory…) so the whole
     stylesheet re-tints from this one block. Source tones taken from
     houseofcb.com: wine #82203e, wineDark #492929, cotton/pink pales. ---- */
  --onyx:#492929;        /* wineDark — primary text + dark panels (was near-black) */
  --ember:#3a2020;       /* deeper wine-brown — deep editorial panel */
  --gold:#82203e;        /* wine — primary accent: links, buttons, prices, eyebrows */
  --gold-soft:#e3b8c3;   /* soft blush — accent on dark panels / over imagery */
  --bone:#f1e2e6;        /* pink-cream — light text on dark */
  --ivory:#fcf4f5;       /* cotton — pale-pink section background */
  --sand:#f3dde2;        /* pale pink — image placeholder bg */
  --stone:#6f4a52;       /* muted plum-brown — body text */
  --muted:#a2848b;       /* dusty mauve — labels / meta */
  --line:rgba(73,41,41,0.10);
  --line-2:rgba(73,41,41,0.16);
  --maxw:1320px;
  --pad:48px;
  --serif:'Chemre', 'Bodoni Moda', Georgia, serif;          /* display headings + titles */
  --sans:'JJannon Display', 'Jost', system-ui, sans-serif;  /* body / normal text — HoCB italic vibe */
  --script:'JJannon Display', 'Bodoni Moda', Georgia, serif; /* italic script accents (within Chemre headings) */
  --poppins:'Poppins', 'Jost', system-ui, sans-serif;        /* plain body copy — PDP description + delivery list */
  /* out of stock — a muted warm grey, so an unavailable buy button reads as
     inert next to the wine one without shouting like an error */
  --oos-bg:#e7e2e3;
  --oos-fg:#8d8285;
  --oos-line:#d8d1d3;
  /* House-of-CB pink chrome — announce bar / header / footer / sidebar menu */
  --champ:#f8e3e7;       /* soft pink — announce bar / solid header / footer */
  --champ-2:#f6dadf;     /* pinkPale — sidebar menu panel (a touch deeper) */
  --hdr-h:92px;          /* header band height (used to tuck the hero behind it) */
  /* extra House-of-CB tones available for accents */
  --wine-hover:#751c37;  /* plum — wine hover */
  --pink-dark:#e4c6cc;   /* deeper pink — dividers/borders on pink surfaces */
  --gold-bridal:#a89067; /* bridal gold — secondary accent */
  --sage:#81896a;        /* fabric olive — occasional cool accent */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:#fff; color:var(--onyx);
  font-family:var(--sans); font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ color:var(--gold); }
img{ display:block; max-width:100%; }
input,button,textarea,select{ font-family:var(--sans); }
::selection{ background:var(--gold); color:#fff; }

/* ---------- type helpers ---------- */
.serif{ font-family:var(--serif); font-weight:400; }
.eyebrow{
  font-size:11px; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--gold);
}
.section-title{ font-family:var(--serif); font-weight:400; font-size:40px; line-height:1.05; }

/* ---------- layout ---------- */
.container{ max-width:var(--maxw); margin:0 auto; }
.pad{ padding-left:var(--pad); padding-right:var(--pad); }
.section{ padding-top:104px; padding-bottom:88px; }
.section--tight{ padding-top:60px; padding-bottom:60px; }
.center{ text-align:center; }
.section-head{ text-align:center; margin-bottom:54px; }
.section-head .eyebrow{ display:block; margin-bottom:16px; }

.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.split{ display:grid; grid-template-columns:1.1fr 1fr; }

/* ---------- links ---------- */
.ulink{ position:relative; cursor:pointer; }
.ulink::after{
  content:''; position:absolute; left:0; bottom:-5px; width:0; height:1px;
  background:var(--gold); transition:width .35s ease;
}
.ulink:hover::after{ width:100%; }
.text-link{
  display:inline-block; font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  border-bottom:1px solid var(--gold); padding-bottom:5px; cursor:pointer;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; cursor:pointer; border:none; text-align:center;
  font-size:12.5px; letter-spacing:0.24em; text-transform:uppercase;
  padding:16px 38px; transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.btn-primary{ background:var(--gold); color:#fff; }
.btn-primary:hover{ background:var(--onyx); color:#fff; }
.btn-outline{ background:transparent; color:var(--onyx); border:1px solid var(--line-2); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); }
.btn-block{ display:block; width:100%; }
.btn-dark{ background:var(--onyx); color:#fff; }
.btn-dark:hover{ background:var(--gold); }

/* ---------- announcement bar (static, centred) ---------- */
.announce{
  background:var(--champ); color:var(--onyx);
  text-align:center; padding:11px 20px;
  font-family:var(--serif); font-size:14px; letter-spacing:0.01em;
}
.announce-inner{ display:inline; transition:opacity .45s ease; }
.announce-inner.is-fading{ opacity:0; }
.announce-msg{ color:var(--stone); }
.announce-link{ color:var(--onyx); text-decoration:underline; text-underline-offset:3px; }
.announce-link:hover{ color:var(--gold); }

/* ---------- header (transparent, adaptive, sticky) ----------
   The whole chrome wrapper (announcement bar + header) is sticky, so BOTH stay
   pinned to the top on scroll — the announcement bar no longer scrolls away.
   The hero can still tuck up behind the transparent bar. The mode
   (.nav-light / .nav-solid) is toggled per section by initAdaptiveHeader(). */
#site-header{ position:sticky; top:0; z-index:55; }
.site-header{
  position:relative; z-index:55;
  background:var(--champ); color:var(--onyx);
  border-bottom:1px solid var(--line);
  transition:background .45s ease, color .3s ease, border-color .45s ease, box-shadow .45s ease;
}
/* pre-JS homepage: transparent over the hero until initAdaptiveHeader() resolves
   the mode (scoped with :not() so the resolved .nav-* classes win afterwards). */
body.home .site-header:not(.nav-light):not(.nav-solid){ background:transparent; color:#fff; border-bottom-color:transparent; }
.site-header.nav-light{ background:transparent; color:#fff; border-bottom-color:transparent; box-shadow:none; text-shadow:0 1px 16px rgba(20,16,10,0.28); }
.site-header.nav-solid{ background:transparent; color:var(--gold); border-bottom:none; box-shadow:none; text-shadow:none; }
/* Product page only: at rest (scroll position 0) the bar sits on the ivory
   page ground — left transparent it picks up the white behind it and reads as
   a different colour from the ivory gallery below. Once the page moves, the
   .nav-* modes take over again. `.at-top` is toggled by initAdaptiveHeader()
   in ui.js and is emitted on every page, so the scope lives here. */
body.single-product .site-header.at-top{ background:var(--ivory); border-bottom-color:transparent; }
/* Inner pages (everything but the homepage): the bar rides transparent over the
   page ground while the page is at rest, then drops to a solid cotton plate the
   moment it moves, so content scrolling underneath never shows through it.
   Ivory rather than white so the scrolled bar matches the page ground it sits
   on (shop, PDP and the category bands are all --ivory) instead of reading as a
   brighter strip. The homepage keeps its adaptive transparent modes.
   Keyed off `.at-top` (toggled in ui.js) so it flips on the very first pixel. */
body:not(.home) .site-header:not(.at-top){
  background:var(--ivory); border-bottom-color:transparent;
  box-shadow:0 1px 14px rgba(20,16,10,0.06);
}
/* Collection chrome: AT REST the shop archive and the product-category archives
   sit on the cotton ground the sub-nav band uses, so their bar is ivory rather
   than transparent. Scrolled is deliberately NOT covered here — every non-home
   page goes white the moment it moves (rule above), collection pages included. */
body.woocommerce-shop .site-header.at-top,
body.tax-product_cat .site-header.at-top{
  background:var(--ivory); border-bottom-color:transparent; box-shadow:none;
}
/* Inner pages have no adaptive light/solid bands to cross-fade between, so the
   inherited .45s background fade only makes the flip feel laggy — snap it. */
body:not(.home) .site-header{ transition:color .3s ease; }
/* Home: never show the header border in ANY state — with the transparent
   header, a border appearing/disappearing between modes reads as a glitch. */
body.home .site-header{ border-bottom:none; }

.header-grid{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:20px; padding:0 var(--pad); min-height:var(--hdr-h);
}
.header-left{ display:flex; align-items:center; gap:30px; }
.hutil{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:none; border:none; color:inherit; font-weight:inherit;
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase; white-space:nowrap;
}
.hutil-ico{ display:inline-flex; }
.hutil-ico .util-svg{ width:16px; height:16px; }
.menu-trigger .bars{ display:none; flex-direction:column; gap:4px; }
.menu-trigger .bars span{ width:20px; height:1.4px; background:currentColor; display:block; }
/* Gotham (Medium) on the menu toggle, search button + currency switcher. */
.menu-trigger,
.header-search,
.cur-switch{ font-family:'Gotham', var(--sans); }

/* centred wordmark + tagline */
.logo{ display:flex; flex-direction:column; align-items:center; gap:1px; color:inherit; padding-top:15px; }
.logo-word{ font-family:var(--serif); font-weight:400; font-size:32px; letter-spacing:0.24em; white-space:nowrap; }
.logo-tag{ font-size:13px; letter-spacing:0.44em; text-transform:uppercase; opacity:0.82; margin-top:-3px; }
.logo-img{ display:block; max-height:34px; width:auto; max-width:min(60vw,240px); object-fit:contain; }
.site-header.nav-solid .logo-word{ color:var(--gold); }

/* right utilities: Currency · Sign In · Wishlist · Bag (icon-only + tooltip) */
.utils{ display:flex; justify-content:flex-end; align-items:center; gap:13px; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; }
.util{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; background:none; border:none; color:inherit; font:inherit; letter-spacing:inherit; text-transform:uppercase; white-space:nowrap; }
.util-txt{ display:none; }
.util-svg{ width:18px; height:18px; display:block; }
.util-ico{ display:inline-flex; align-items:center; }
.util-ct{ font-family:'jjannons-straing'; letter-spacing:0.04em; font-size:10px; }
.util-ct::before{ content:"("; }
.util-ct::after{ content:")"; }
.util-search-m{ display:none; } /* mobile-only search (shown in the utils on small screens) */
.util-sep{ width:1px; height:14px; background:currentColor; opacity:0.32; }

/* currency switcher (chip + dropdown) */
.cur-switch{ position:relative; display:inline-flex; }
.cur-chip .code{ font-size:11px; letter-spacing:0.14em; }
.cur-menu{ position:absolute; top:calc(100% + 12px); left:0; min-width:134px; display:none; flex-direction:column; padding:6px; background:#fff; color:var(--onyx); border:1px solid var(--line-2); box-shadow:0 16px 34px -16px rgba(28,25,22,0.42); z-index:200; }
.cur-switch.is-open .cur-menu{ display:flex; }
.cur-menu button{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 12px; border:none; background:transparent; color:inherit; cursor:pointer; font:inherit; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; }
.cur-menu button:hover{ background:var(--ivory); }
.cur-menu button.is-on{ background-color:var(--gold); color:#fff; }
.cur-menu button.is-on .csym{ color:#fff; }
.cur-menu .csym{ color:var(--stone); }
.cur-menu button.is-on .csym{ color:var(--gold); color:#fff; }

/* ---------- product card ---------- */
.card{ display:block; position:relative; }
.card-media{
  position:relative; overflow:hidden; background:var(--sand);
  aspect-ratio:3/4;
}
.card-img{
  position:absolute; inset:0; width:100%; height:100% !important; object-fit:cover;
  transition:transform .8s ease;
}
.card:hover .card-img{ transform:scale(1.05); }
.badge{
  position:absolute; top:13px; left:13px; z-index:2;
  border:1px solid var(--gold); color:var(--gold);
  background:rgba(255,255,255,0.82); backdrop-filter:blur(3px);
  font-size:9px; letter-spacing:0.24em; text-transform:uppercase; padding:6px 10px;
}
.wish-btn{
  position:absolute; top:11px; right:11px; z-index:3;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-2); background:rgba(255,255,255,0.94); color:var(--onyx);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 12px -6px rgba(28,25,22,0.4);
  opacity:0; transform:translateY(-6px); transition:all .3s ease;
}
.card:hover .wish-btn{ opacity:1; transform:translateY(0); }
.wish-btn .wish-heart{ width:22px; height:22px; display:block; }
.wish-btn:hover{ border-color:var(--gold); color:var(--gold); }
.wish-btn.is-on{ background:var(--gold); border-color:var(--gold); color:#fff; }
.wish-btn.is-on:hover{ background:var(--onyx); border-color:var(--onyx); }
.quick-btn{
  position:absolute; left:13px; right:13px; bottom:13px; z-index:3;
  background:rgba(73,41,41,0.92); color:#fff; border:none; cursor:pointer;
  text-align:center; padding:12px 0;
  font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:all .4s ease;
}
.card:hover .quick-btn{ opacity:1; transform:translateY(0); }
.card-body{ margin-top:16px; }
.card-name{ font-family:var(--serif); font-size:17px; }
.card-meta{ font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
.price-row{ margin-top:10px; display:flex; gap:9px; align-items:baseline; font-size:13px; }
.price-now{ color:var(--gold); }
.price-was{ color:var(--muted); text-decoration:line-through; font-size:12px; }

/* ---------- category tile ---------- */
.cat{ display:block; }
.cat-media{ aspect-ratio:4/5; overflow:hidden; position:relative; background:var(--sand); }
.cat-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.cat:hover .cat-img{ transform:scale(1.05); }
.cat-cap{ text-align:center; margin-top:22px; }
.cat-name{ font-family:var(--serif); font-size:23px; margin-bottom:11px; }
.cat-cta{
  font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  border-bottom:1px solid var(--line-2); padding-bottom:5px; transition:all .35s ease;
}
.cat:hover .cat-cta{ color:var(--gold); border-color:var(--gold); }

/* ---------- hero ---------- */
.hero{ position:relative; height:88vh; min-height:600px; background:var(--sand); }
.hero-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-inner{ position:absolute; inset:0; display:flex; align-items:center; padding:0 48px; }
.hero-panel{
  background:rgba(255,255,255,0.93); backdrop-filter:blur(4px);
  padding:52px 54px 56px; max-width:500px;
}
.hero-panel h1{ font-family:var(--serif); font-weight:400; font-size:68px; line-height:0.98; margin:22px 0 24px; }
.hero-panel p{ font-size:15.5px; line-height:1.8; color:var(--stone); max-width:390px; margin-bottom:34px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

/* full-bleed editorial band */
.band{ position:relative; height:86vh; min-height:580px; }
.band-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.band-scrim{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(28,25,22,0.05),rgba(28,25,22,0.35)); }
.band-card{
  position:absolute; right:48px; top:50%; transform:translateY(-50%); width:350px;
  background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); padding:44px 40px;
}

/* dark editorial split */
.split-dark{ background:var(--ember); color:var(--bone); display:flex; flex-direction:column; justify-content:center; padding:84px 64px; }
.split-dark .eyebrow{ color:var(--gold-soft); margin-bottom:24px; }
.split-dark h2{ font-family:var(--serif); font-weight:400; font-size:42px; line-height:1.1; margin-bottom:26px; }
.split-dark p{ font-size:14.5px; line-height:1.9; color:#cbb0b6; max-width:430px; margin-bottom:34px; }
.split-img{ width:100%; height:100%; min-height:420px; object-fit:cover; }

/* ---------- footer (House-of-CB layout, Lilly's palette) ---------- */
.site-footer{ background:var(--bone); color:var(--onyx); padding:66px var(--pad) 34px; background:#fcf4f5; }
.foot-inner{ margin:0 auto; }
.foot-wordmark{ text-align:center; font-family:var(--serif); font-weight:400; font-size:clamp(30px,4vw,52px); letter-spacing:0.02em; padding:6px 0 58px; color:var(--foot-wordmark-color, #fff); color:var(--foot-wordmark-em-color); }
.foot-wordmark em{ font-family:var(--script); font-style:italic; color:var(--foot-wordmark-em-color, var(--gold-soft)); }
/* newsletter-column identity lockup — brand logo (image or wordmark) + location subheading, replaces the "Newsletter" heading */
.foot-logo{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; color:var(--gold-soft); margin-bottom:20px; }
.foot-logo-img{ display:block; max-height:46px; width:auto; max-width:min(60vw,260px); object-fit:contain; }
.foot-logo-word{ font-family:var(--serif); font-weight:400; font-size:27px; letter-spacing:0.16em; line-height:1; color:var(--gold-soft); }
.foot-logo-sub{ font-size:11px; letter-spacing:0.4em; text-transform:uppercase; color:var(--gold-soft); }
.foot-main{ display:grid; grid-template-columns:1fr 1.9fr; gap:48px; align-items:start; padding-bottom:44px; }
.foot-h{ font-family:var(--serif); font-weight:400; font-size:16px; letter-spacing:0.05em; text-transform:uppercase; color:var(--foot-h-color, var(--gold-soft)); margin-bottom:18px; }
.foot-news-col{ max-width:360px; }
.foot-news-p{ font-size:13px; line-height:1.75; color:var(--foot-news-color, var(--gold-soft)); margin-bottom:20px; }
.foot-news-field{ display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line-2); }
.foot-news-ico{ color:var(--foot-news-field-color, var(--gold-soft)); display:inline-flex; }
.foot-news-ico .util-svg{ width:18px; height:18px; }
.foot-news-field input{ flex:1; text-align: center; min-width:0; background:transparent !important; border:none !important; outline:none !important; color:var(--foot-news-field-color, var(--gold-soft)); font-family:var(--script); font-style:italic; font-size:14px; padding:12px 0; }
.foot-news-field input::placeholder{ color:var(--foot-news-field-color, var(--gold-soft)); }
.foot-news-field button{ background:transparent; border:none; color:var(--foot-news-btn-color, var(--gold-soft)); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; cursor:pointer; padding:12px 0 12px 16px; white-space:nowrap; }
.foot-news-field button:hover{ color:var(--foot-news-btn-hover-color, var(--foot-news-btn-color, var(--gold-soft))); }
.foot-social{ display:flex; gap:20px; margin-top:26px; }
.foot-social-link{ color:var(--foot-social-color, var(--gold-soft)); display:inline-flex; }
.foot-social-link:hover{ color:var(--foot-social-hover-color, var(--onyx)); }
.soc-svg{ width:20px; height:20px; display:block; }
.foot-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 30px; }
.foot-col .foot-h{ font-size:15px; margin-bottom:15px; }
.foot-link{ display:block; font-family:var(--script); font-style:italic; font-size:14px; color:var(--foot-link-color, var(--gold-soft)); margin-bottom:11px; }
.foot-link:hover{ color:var(--foot-link-hover-color, #fff); }
.foot-link:hover{ color:#49061b; }
/* bottom-left circular brand mark */
.foot-badge{ display:block; width:120px; height:120px; margin:16px 0 4px; }
.foot-badge img{ width:100%; height:100%; object-fit:contain; display:block; mix-blend-mode:multiply; }
.foot-base{ padding-top:28px; border-top:1px solid var(--line); text-align:center; }
.foot-copy{ text-align:center; font-size:11.5px; letter-spacing:0.05em; color:var(--foot-copy-color, var(--gold-soft)); padding:16px 0; }

/* ---------- overlays / drawers ---------- */
.backdrop{ position:fixed; inset:0; background:rgba(28,25,22,0.45); z-index:90; }
.is-hidden{ display:none !important; }

/* House-of-CB style: pink panel + campaign feature image, sliding together. */
.menu-wrap{
  position:fixed; top:0; left:0; height:100%; z-index:95; max-width:100%;
  display:flex; animation:slideL .5s cubic-bezier(.2,.7,.2,1);
}
.menu-panel{
  width:min(34vw,440px); min-width:340px; height:100%;
  background:var(--menu-bg-color, var(--bone)); color:var(--onyx);
  display:flex; flex-direction:column; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--menu-scroll-color, var(--gold-soft)) transparent; /* Firefox */
}
.menu-panel::-webkit-scrollbar{ width:5px; }
.menu-panel::-webkit-scrollbar-track{ background:transparent; }
.menu-panel::-webkit-scrollbar-thumb{ background:var(--menu-scroll-color, var(--gold-soft)); border-radius:3px; }
.menu-panel::-webkit-scrollbar-thumb:hover{ background:var(--menu-scroll-color, var(--gold-soft)); }
.menu-top{ padding:26px 40px 6px; }
.menu-close{ background:none; border:none; cursor:pointer; color:var(--menu-close-color, var(--onyx)); display:inline-flex; align-items:center; gap:9px; font-size:10px; letter-spacing:0.26em; text-transform:uppercase; font-family: 'Gotham'; }
.menu-close .x{ font-size:17px; line-height:1; display:none; }
.menu-close:hover{ color:var(--menu-close-hover-color, var(--gold)); }

/* Compact so the whole menu (items + currency/language foot) fits with no scroll. */
.menu-main{ padding:14px 40px 2px; }
.menu-row-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:6px 0; cursor:pointer; }
.menu-row-head .label{ font-family:var(--serif); font-size:19px; letter-spacing:0.05em; text-transform:none; line-height:1.15; transition:color .25s ease; color:var(--menu-label-color, var(--gold-soft)); }
.menu-row-head:hover .label{ color:var(--menu-label-hover-color, #fff); }
.menu-row.is-accent .menu-row-head .label{ color:var(--menu-accent-color, var(--gold-soft)); }
.menu-row-head .plus{ color:var(--menu-plus-color, var(--gold)); font-size:16px; flex:none; }
.menu-sub{ display:flex; flex-direction:column; gap:0; padding:0 0 8px 2px; }
.menu-sub a{ font-size:10.5px; letter-spacing:0.2em; text-transform:none; color:var(--menu-sub-color, var(--gold-soft)); padding:5px 0; align-self:flex-start; }
.menu-sub a:hover{ color:var(--menu-sub-hover-color, #fff); }

.menu-feature-links{ padding:12px 40px 2px; display:flex; flex-direction:column; gap:7px; margin-bottom: 8px;}
.menu-feat-link{ font-family:var(--script); font-style:italic; font-size:15px; color:var(--menu-feat-color, var(--gold-soft)); display:inline-flex; align-items:center; gap:10px; align-self:flex-start; }
.menu-feat-link:hover{ color:var(--menu-feat-hover-color, var(--onyx)); }
.menu-feat-mono{ width:24px; height:auto; display:inline-block; object-fit:contain; flex:0 0 auto; }

.menu-secondary{ padding:14px 40px 6px; margin-top:8px; border-top:1.5px solid var(--line); display:flex; flex-direction:column; gap:0; border-top-color: #82203eb0 !important; margin-top: auto;}
.menu-secondary{ padding: 25px 40px 25px; }
.menu-secondary a{ font-family:'Gotham'; font-weight:600; opacity:0.8; font-size:11.5px; letter-spacing:0.22em; letter-spacing:0; text-transform:none; color:var(--menu-secondary-color, var(--gold-soft)); padding:5px 0; align-self:flex-start; }
.menu-secondary a:hover{ color:var(--menu-secondary-hover-color, var(--gold)); }

.menu-foot{ margin-top:auto; padding:14px 40px 22px; border-top:1.5px solid var(--line); display:flex; flex-direction:column; gap:11px; border-top-color: #82203eb0 }
.menu-foot{ margin-top: 0; padding:20px 40px 20px;}
.menu-foot-row{ display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--menu-foot-color, var(--gold-soft)); cursor:pointer; }
.menu-foot-row .ico{ color:var(--menu-foot-color, var(--gold-soft)); display:inline-flex; align-items:center; }
.menu-foot-row .ico .util-svg{ width:16px; height:16px; }
.menu-foot-row .ico-cur{ font-size:14px; }
.menu-foot-row .val{ color:var(--menu-foot-color, var(--gold-soft)); }
.foot-lang{ margin-left:auto; color:var(--stone); text-transform:none; letter-spacing:0.04em; }
.cur-mini{ display:flex; gap:6px; margin-left:auto; }
.cur-mini button{ font-size:10px; letter-spacing:0.06em; padding:6px 9px; border:1px solid var(--line-2); background:transparent; color:var(--menu-foot-color, var(--gold-soft)); cursor:pointer; }
.cur-mini button.is-on{ border-color:var(--menu-foot-color, var(--gold-soft)); background:var(--menu-foot-color, var(--gold-soft)); color:#fff; }

/* feature campaign panel beside the menu */
.menu-feature{ position:relative; width:min(28vw,480px); height:100%; overflow:hidden; background:var(--sand); }
.menu-feature .menu-feature-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* parent-qualified: see .hcard-media .hcard-img */
.menu-feature-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,25,22,0) 42%,rgba(28,25,22,0.64) 100%); }
.menu-feature-cap{ position:absolute; left:0; right:0; bottom:8%; padding:0 42px; text-align:center; color:#fff; }
.menu-feature-text{ font-family:var(--script); font-style:italic; font-size:18px; line-height:1.5; margin-bottom:18px; }
.menu-feature-cta{ font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:#fff; border-bottom:1px solid rgba(255,255,255,0.7); padding-bottom:5px; display:inline-block; }
.menu-feature-cta:hover{ color:var(--gold-soft); border-color:var(--gold-soft); }

.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:420px; max-width:100%;
  background:#fff; z-index:91; display:flex; flex-direction:column;
  animation:slideR .42s cubic-bezier(.2,.7,.2,1);
}
.drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:24px 28px; border-bottom:1px solid var(--line); }
.drawer-head .ttl{ font-size:12px; letter-spacing:0.24em; text-transform:uppercase; }
.drawer-close{ background:none; border:none; cursor:pointer; font-size:20px; }
.cart-body{ flex:1; overflow-y:auto; padding:8px 28px; }
.cart-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:40px; text-align:center; }
.cart-empty p{ font-size:14px; color:var(--muted); }
.cart-item{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid rgba(28,25,22,0.08); }
.cart-item .cart-thumb{ width:72px; height:90px; flex:none; object-fit:cover; background:var(--sand); } /* parent-qualified: see .hcard-media .hcard-img */
.cart-item-main{ flex:1; }
.cart-item-top{ display:flex; justify-content:space-between; gap:8px; }
.cart-item-name{ font-family:var(--serif); font-size:16px; }
.cart-item-x{ background:none; border:none; cursor:pointer; color:var(--muted); font-size:14px; }
.cart-item-meta{ font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.cart-item-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
.qty{ display:flex; align-items:center; border:1px solid var(--line-2); }
.qty button{ width:30px; height:30px; background:none; border:none; cursor:pointer; font-size:15px; }
.qty .n{ width:28px; text-align:center; font-size:12px; }
.cart-foot{ padding:22px 28px; border-top:1px solid var(--line); }
.cart-foot .row{ display:flex; justify-content:space-between; font-size:13px; color:var(--stone); margin-bottom:8px; }
.cart-foot .row.muted{ font-size:12px; color:var(--muted); margin-bottom:18px; }

/* The panel is fixed, so anything past the bottom of the viewport used to be
   simply unreachable — a search with 100 hits showed the first 8 and no way to
   see the rest. Cap it to the viewport and let it scroll instead. */
.search-drop{
  position:fixed; top:0; left:0; right:0; background:#fff; z-index:91;
  max-height:100vh;
  max-height:100dvh;              /* mobile: excludes the browser chrome */
  overflow-y:auto;
  overscroll-behavior:contain;    /* don't scroll the page behind at the ends */
  -webkit-overflow-scrolling:touch;
  animation:dropD .38s cubic-bezier(.2,.7,.2,1);
}
/* padding lives on the inner wrapper so the search bar can stick to the very
   top of the scroll area */
.search-inner{ max-width:900px; margin:0 auto; padding:0 48px 40px; }
.search-bar{
  position:sticky; top:0; z-index:2; background:#fff; padding-top:34px;
  display:flex; align-items:center; gap:18px; border-bottom:1px solid var(--line-2); padding-bottom:14px;
}
.search-bar .lbl{ font-family:var(--serif); font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); }
.search-bar input{ flex:1; border:none; outline:none; font-family:var(--serif); font-size:26px; background:transparent; }
.search-bar input::placeholder{ text-transform:capitalize; }
.search-bar .x{ background:none; border:none; cursor:pointer; font-size:22px; }
.search-results{ margin-top:22px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.search-meta{ font-family:'Gotham', var(--sans); font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); margin:22px 0 18px; }
.chips{ display:flex; gap:12px; flex-wrap:wrap; }
.chip{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; border:1px solid var(--line-2); background:transparent; padding:9px 16px; cursor:pointer; }
.chip.is-on{ border-color:var(--gold); color:var(--gold); }

.quick-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:760px; max-width:94vw; max-height:90vh; overflow-y:auto;
  background:#fff; z-index:93; display:grid; grid-template-columns:1fr 1fr;
  animation:pop .34s cubic-bezier(.2,.7,.2,1);
}
.quick-modal .qv-media{ aspect-ratio:4/5; object-fit:cover; background:var(--sand); width:100%; height:100%; }
.qv-body{ padding:40px 36px; }
.qv-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.qv-body h2{ font-family:var(--serif); font-weight:400; font-size:32px; margin-top:12px; }
.qv-price{ margin-top:12px; display:flex; gap:10px; align-items:baseline; font-size:18px; }
.qv-desc{ font-size:13px; line-height:1.8; color:var(--stone); margin-top:18px; }
.qv-actions{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }

.floating-bubble{
  position:fixed; bottom:22px; right:22px; z-index:80;
  width:56px; height:56px; border-radius:50%; background:var(--gold); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 8px 24px -8px rgba(28,25,22,0.55); transition:background .3s ease;
  font-size:21px; border:none;
  background: var(--gold-soft);
}
.floating-bubble:hover{ background:var(--onyx); }
.floating-bubble svg{ display:block; }

/* inline button spinner (newsletter submit, etc.) */
.btn-spin{ display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-1px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:lh-spin .6s linear infinite; }
@keyframes lh-spin{ to{ transform:rotate(360deg); } }

/* toast */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--onyx); color:#fff; padding:14px 26px; z-index:120;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  opacity:0; transition:all .35s ease; pointer-events:none;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* =====================================================================
   COLLECTION / SHOP — House of CB category page
   Full-bleed five-per-row grid on 2px hairline gutters (two-up on phones),
   a slim "Filter & Sort" / "View" bar, and an off-canvas filter drawer.
   Metrics are taken 1:1 from app.houseofcb.com/category: grid gap 2px,
   card media 2:3, body px 20 / pt 12 / pb 20 with a 25px gap before the
   price row, badges 26px tall at 10px Chemre, drawer 605px wide.
   ===================================================================== */
.shopx{ width:100%; background: var(--ivory); }
/* House of CB shows no visible collection heading — kept for SEO / a11y. */
.sr-only,
.shopx-h1{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.shopx-bar{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:20px; color:var(--gold);
}
.shopx-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:none; padding:0; cursor:pointer; color:inherit;
  font-family:var(--script); font-size:14px; letter-spacing:0.56px; line-height:18px;
}
.shopx-filter{ font-style:italic; }
.shopx-btn:hover{ color:var(--wine-hover); }
.shopx-ico{ display:inline-flex; }
.shopx-ico svg{ width:17px; height:17px; display:block; }
.shopx-empty{ padding:90px 20px; text-align:center; color:var(--muted); font-size:13px; }
.shopx-empty .ulink{ background:none; border:none; cursor:pointer; color:var(--gold); font:inherit; }

/* ---- collection sub-nav ("shop by style") ----------------------------
   A row of sibling collections under the (visually hidden) title, set on a
   cotton band: JJannon italic in wine, Title Case, no letterspacing — the
   same voice as "Filter & Sort" below it. The leading "All" reset sits in a
   rounded outline box; whichever link you are on is underlined.
   It lives in the page; ui.js clones it into .catnav-dock inside the sticky
   header and fades the clone in once the original scrolls away, so the set
   stays reachable all the way down a long grid. Both copies share these. */
.catnav{ width:100%; background:var(--ivory); }
.catnav-track{
  display:flex; align-items:center; gap:34px;
  padding:20px; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
}
.catnav-track::-webkit-scrollbar{ display:none; }
.catnav-chip{
  flex:0 0 auto; color:var(--gold); white-space:nowrap; text-decoration:none;
  font-family:var(--script); font-style:italic; font-weight:400;
  font-size:15px; line-height:1.2; letter-spacing:0.01em;
  text-underline-offset:4px; text-decoration-thickness:1px;
  transition:color .2s ease, border-color .2s ease;
}
.catnav-chip:hover,
.catnav-chip.is-on{ text-decoration:underline; }
.catnav-chip:hover{ color:var(--wine-hover); }
/* "All" — the reset. Boxed in every state so it reads as a control rather
   than one more collection; the box just firms up when it is the live one. */
.catnav-chip--all{
  padding:8px 14px; border:1px solid var(--line-2); border-radius:7px;
}
.catnav-chip--all:hover{ border-color:var(--gold); text-decoration:none; }
.catnav-chip--all.is-on{ border-color:var(--gold); text-decoration:none; }

/* Docked copy. Absolutely positioned so filling it never changes the sticky
   header's flow height — in flow it would shove the grid down by a row height
   at the moment docking fires (and on the way back up again). It only ever shows
   while scrolled, so it carries the same plate as the scrolled bar (--ivory),
   not the cotton band the in-page copy sits on. */
.catnav-dock{
  position:absolute; top:100%; left:0; right:0;
  background:var(--ivory); border-bottom:1px solid var(--line);
  display:grid; grid-template-rows:0fr;
  opacity:0; pointer-events:none; visibility:hidden;
  transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1), opacity .22s ease, visibility 0s linear .34s;
}
.catnav-dock > *{ overflow:hidden; min-height:0; }
.site-header.has-catnav.is-docked .catnav-dock{
  grid-template-rows:1fr; opacity:1; pointer-events:auto; visibility:visible;
  transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1), opacity .22s ease .06s, visibility 0s;
}
.catnav-dock .catnav{ background:transparent; }
.catnav-dock .catnav-track{ padding:13px 20px; }

/* ---- product grid: 5 across, full width, 2px gutters ---- */
.hgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; width:100%; }
.hgrid--dense{ grid-template-columns:repeat(3,1fr); }

/* ---- pagination (server-rendered, then re-rendered by page-shop.js) ---- */
.shop-pager{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:14px; padding:54px 20px 84px; color:var(--gold);
  font-family:'Gotham', var(--sans); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
}
.shop-pager:empty{ display:none; }
.pager-nums{ display:flex; align-items:center; gap:4px; }
.pager-num,
.pager-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 8px; color:inherit;
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.pager-num:hover,
.pager-arrow:hover{ color:var(--wine-hover); border-bottom-color:currentColor; }
.pager-num.is-on{ border-bottom-color:var(--gold); font-weight:500; }
.pager-arrow.is-off{ color:var(--muted); pointer-events:none; }
.pager-gap{ padding:0 2px; color:var(--muted); }

/* ---- House-of-CB product card ---- */
.hcard{ display:flex; flex-direction:column; background:var(--ivory); }
.hcard-media{ position:relative; aspect-ratio:2/3; overflow:hidden; background:var(--sand); }
.hcard-link{ position:absolute; inset:0; display:block; }
/* Qualified with the parent: WooCommerce ships `.woocommerce img{ height:auto }`
   (0,1,1), which outranks a bare `.hcard-img` (0,1,0) on shop/product pages —
   the image then keeps its natural ratio inside the 2:3 box and a short main
   image leaves the rollover image showing beneath it. */
.hcard-media .hcard-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:opacity .3s ease-in-out;
}
.hcard-img--roll{ z-index:0; }
.hcard-img--main{ z-index:1; opacity:1; }
.hcard:hover .hcard-img--main{ opacity:0; }
/* Wishlist heart is ours, not House of CB's — it only fades in on hover so
   the resting card matches theirs exactly. */
.hcard-wish{
  position:absolute; top:12px; right:12px; z-index:2;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--gold);
  opacity:0; transition:opacity .25s ease;
}
.hcard-wish .wish-heart{ width:18px; height:18px; }
.hcard:hover .hcard-wish, .hcard-wish.is-on, .hcard-wish:focus-visible{ opacity:1; }
.hcard-body{ display:flex; flex-direction:column; flex:1; padding:12px 20px 20px; background:var(--ivory); }
.hcard-dots{ display:flex; flex-wrap:wrap; align-items:center; min-height:24px; }
.hdot{ width:24px; height:24px; display:flex; align-items:center; justify-content:flex-start; }
.hdot i{ display:block; width:10px; height:10px; border-radius:50%; border:1px solid var(--gold); }
.hcard-title{ display:flex; flex-direction:column; gap:2px; color:var(--gold); }
.hcard-name{ font-family:var(--serif); font-size:13px; line-height:18px; letter-spacing:0.52px; text-transform:uppercase; }
.hcard-sub{ font-family:var(--script); font-style:italic; font-size:14px; line-height:18px; letter-spacing:0.56px; }
.hcard-foot{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-top:25px; }
.hcard-price{
  font-family:'Gotham', var(--sans); font-size:10px; line-height:12px;
  letter-spacing:0.4px; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.hcard-price .is-sale{ color:var(--gold); }
.hcard-was{ text-decoration:line-through; opacity:0.55; }
.hcard-badges{ display:flex; align-items:flex-start; gap:2px; flex-shrink:0; }
.hbadge{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:26px; padding:6px 12px; background:var(--champ); color:var(--gold);
  font-family:var(--serif); font-size:10px; line-height:12.74px; letter-spacing:0.4px; text-transform:uppercase;
}

/* ---- filter drawer ("Filter & Sort") ---- */
body.lh-noscroll{ overflow:hidden; }
.fdrawer{
  position:fixed; inset:0; z-index:120;
  opacity:0; pointer-events:none; transition:opacity .4s ease-in-out;
}
.fdrawer.is-open{ opacity:1; pointer-events:auto; }
.fdrawer-scrim{ position:absolute; inset:0; background:rgba(0,0,0,0.5); }
.fdrawer-panel{
  position:relative; display:flex; flex-direction:column; height:100%;
  width:100%; max-width:605px; background:var(--ivory); color:var(--gold);
  transform:translateX(-100%); transition:transform .4s ease-in-out;
}
.fdrawer.is-open .fdrawer-panel{ transform:none; }
.fdrawer-head{ padding:40px 32px 0; }
.fdrawer-close{
  display:inline-flex; align-items:center; gap:9px;
  background:none; border:none; padding:0; cursor:pointer; color:inherit;
  font-family:'Gotham', var(--sans); font-size:10px; line-height:11px; letter-spacing:0.4px; text-transform:uppercase;
}
.fdrawer-x svg{ width:12px; height:12px; display:block; }
.fdrawer-body{
  flex:1; overflow-y:auto; padding:28px 32px 40px;
  display:flex; flex-direction:column; gap:30px;
}
.fgroup{ display:flex; flex-direction:column; border:0; padding:0; margin:0; min-width:0; }
.flegend{ font-family:'Gotham', var(--sans); font-size:10px; line-height:11px; letter-spacing:0.4px; text-transform:uppercase; }
.fchips{ display:flex; flex-wrap:wrap; gap:10px 5px; padding:8px 0 0; max-width:95%; }
.fchip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--gold); border-radius:4px; background:transparent; color:var(--gold);
  cursor:pointer; padding:5px 8px; min-height:26px;
  font-family:var(--script); font-style:italic; font-size:14px; line-height:15px; letter-spacing:0.42px;
  transition:background .12s ease-in-out, border-color .12s ease-in-out, color .12s ease-in-out;
}
.fchip:hover{ background:var(--champ-2); border-color:var(--champ-2); }
.fchip.is-on{ background:var(--gold); border-color:var(--gold); color:var(--ivory); }
.fchip-dot{ display:block; width:10px; height:10px; border-radius:50%; border:1px solid currentColor; }
.fdrawer-foot{
  display:flex; align-items:flex-end; gap:10px;
  padding:28px 20px; border-top:1px solid var(--gold); background:var(--ivory);
}
.fbtn{
  flex:1; height:50px; cursor:pointer; border:1px solid var(--gold);
  font-family:'Gotham', var(--sans); font-size:10px; line-height:11px; letter-spacing:0.4px; text-transform:uppercase;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.fbtn-solid{ background:var(--gold); color:var(--ivory); }
.fbtn-solid:hover{ background:var(--wine-hover); border-color:var(--wine-hover); }
.fbtn-ghost{ background:transparent; color:var(--gold); }
.fbtn-ghost:hover{ background:var(--gold); color:var(--ivory); }

/* ---------- PDP ---------- */
.breadcrumb{ font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.breadcrumb a{ cursor:pointer; }
.breadcrumb .here{ color:var(--onyx); }
.pdp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:1240px; margin:0 auto; }
.gallery-main{ aspect-ratio:4/5; position:relative; overflow:hidden; background:var(--sand); }
.gallery-main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.gallery-thumbs img{ aspect-ratio:1; object-fit:cover; background:var(--sand); cursor:pointer; width:100%; }
.pdp-cat{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.pdp-name{ font-family:var(--serif); font-weight:400; font-size:46px; line-height:1; }
.pdp-price{ margin-top:18px; display:flex; gap:12px; align-items:baseline; }
.pdp-price .now{ font-size:22px; }
.pdp-price .now.sale{ color:var(--gold); }
.pdp-price .was{ font-size:16px; color:var(--muted); text-decoration:line-through; }
.pdp-desc{ font-size:14.5px; line-height:1.85; color:var(--stone); margin-top:24px; max-width:480px; }

/* =====================================================================
   PDP Layout 02 — House of CB product page
   Left two thirds: images two-per-row on 1px gutters, running to the page
   edge (a full-bleed swipe carousel on phones). Right third: a sticky
   details column — centred name lockup + wishlist, "GBP £0.00" price,
   Colour and Length rows on hairline rules, a 50px ADD TO BAG, the
   free-delivery line, open content sections and Delivery & Returns.
   ===================================================================== */
.pdpx{ width:100%; background:var(--ivory); color:var(--gold); }
.pdpx-wrap{ display:flex; align-items:flex-start; width:100%; }
.pdpx-media{ position:relative; width:66.6667%; padding-right:3.418vw; }
.pdpx-panel{
  width:33.3333%; padding:70px 3.418vw 0 0;
  position:sticky; top:calc(var(--hdr-h) + 58px); align-self:flex-start;
}
@media(min-width:1600px){
  .pdpx-media{ padding-right:4.63vw; }
  .pdpx-panel{ padding-right:4.63vw; }
}
/* Sale / New badges sit over the first image, not on the card. */
.pdp-badges{ position:absolute; z-index:2; top:22px; left:22px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }

/* ---- details panel ---- */
.pdpx-head{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-bottom:20px; }
.pdpx-titleline{ display:flex; align-items:center; gap:10px; padding-bottom:10px; }
.pdpx-name{ font-family:var(--serif); font-weight:400; font-size:18px; line-height:18px; letter-spacing:0.72px; text-transform:uppercase; color:var(--gold); }
.pdpx-wish{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--gold); }
.pdpx-wish svg{ width:19px; height:19px; display:block; }
.pdpx-sub{ font-family:var(--script); font-style:italic; font-size:18px; line-height:28px; letter-spacing:0.72px; }
.pdpx-price{ margin-top:20px; display:flex; align-items:baseline; gap:10px; font-family:'Gotham', var(--sans); font-size:12px; letter-spacing:0.48px; text-transform:uppercase; }
.pdpx-was{ text-decoration:line-through; opacity:0.55; }
.pdpx-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 0; border-bottom:1px solid var(--gold); }
.pdpx-lbl{ font-family:'Gotham', var(--sans); font-size:10px; line-height:10px; letter-spacing:0.4px; text-transform:uppercase; white-space:nowrap; }
.pdpx-lblwrap{ display:flex; align-items:center; gap:19px; min-width:0; }
.pdpx-guide{ font-family:'Gotham', var(--sans); font-size:11px; line-height:20px; letter-spacing:0.4px; text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }
.pdpx-guide:hover{ color:var(--wine-hover); }
.pdpx-swatches{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pdpx-swatch{ width:17px; height:17px; padding:0; border-radius:50%; border:1px solid var(--gold); cursor:pointer; }
.pdpx-swatch.is-on{ box-shadow:0 0 0 2px var(--ivory), 0 0 0 3px var(--gold); }
.pdpx-sizes{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; flex-shrink:0; }
.pdpx-size{
  min-width:26px; height:26px; padding:0 6px; border:1px solid var(--gold); border-radius:4px;
  background:transparent; color:var(--gold); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--script); font-style:italic; font-size:14px; letter-spacing:0.42px; line-height:1;
  transition:background .1s ease-in-out, border-color .1s ease-in-out, color .1s ease-in-out;
}
.pdpx-size:hover{ background:var(--champ-2); border-color:var(--champ-2); }
.pdpx-size.is-on{ background:var(--gold); border-color:var(--gold); color:var(--ivory); }
.pdpx-size.is-oos{ opacity:0.38; text-decoration:line-through; }
.pdpx-stock{ padding-top:14px; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; }
.pdpx-stock.low{ color:var(--gold); }
.pdpx-stock.oos{ color:#b0453c; }
.pdpx-add{
  width:100%; height:50px; margin-top:20px; border:none; cursor:pointer;
  background:var(--gold); color:var(--ivory);
  font-family:var(--serif); font-size:16px; line-height:18px; letter-spacing:0.64px; text-transform:uppercase;
  transition:background .2s ease-in-out;
}
.pdpx-add:hover{ background:var(--wine-hover); }
/* out of stock — grey, inert, and it must not light up on hover */
.pdpx-add[disabled],
.pdpx-add.is-oos{
  background:var(--oos-bg); color:var(--oos-fg); cursor:not-allowed;
  border:1px solid var(--oos-line);
}
.pdpx-add[disabled]:hover,
.pdpx-add.is-oos:hover{ background:var(--oos-bg); color:var(--oos-fg); }
.pdpx-ship{
  text-align:center; padding:20px 0; border-bottom:1px solid var(--gold);
  font-family:'Gotham', var(--sans); font-size:12px; letter-spacing:0.04em; text-transform:uppercase;
}
.pdpx-sections{ display:flex; flex-direction:column; gap:30px; padding-top:40px; }
.pdpx-sec-h{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Gotham', var(--sans) !important; font-size:10px; line-height:11px; letter-spacing:0.56px;
  text-transform:uppercase; color:var(--gold); padding-bottom:5px; margin-bottom:20px;
}
.pdpx-sec-h .sign{ display:none; }              /* desktop: sections stay open */
/* Description + delivery copy runs in Poppins; only the section headings
   (.pdpx-sec-h, above) stay on Gotham. */
.pdpx-sec-b{ font-size:13px; line-height:1.75; color:var(--stone); font-family:var(--poppins); }

/* ---- PDP content cards: Delivery & Returns (with the per-country cost
   calculator) and Signature Packaging. Hairline-boxed and centred, the way
   House of CB stacks them under the description. Rendered by
   lh_render_pdp_blocks() (PHP) and blocksHTML() (page-product.js), so both
   layouts and both render paths share this one block of CSS. ---- */
.pdp-blocks{ display:flex; flex-direction:column; gap:20px; padding:40px 0 70px; }
.pdp-block{
  border:1px solid var(--gold); padding:32px 24px 28px;
  text-align:center; color:var(--gold);
}
.pdp-block .pdp-block-mark{ width:56px; height:auto; margin:0 auto 20px; object-fit:contain; }
.pdp-block-h{
  font-family:var(--serif); font-weight:400; font-size:16px; line-height:18px;
  letter-spacing:0.64px; text-transform:uppercase; color:var(--gold);
}
.pdp-block-lines{
  list-style:none; margin-top:18px;
  font-family:var(--poppins); font-size:13px; line-height:1.75; color:var(--gold);
}
.pdp-block-lines li::before{ content:'• '; }
.pdp-block-copy{
  margin-top:18px; font-family:var(--poppins); font-size:13px; line-height:1.75; color:var(--stone);
}
/* Optional reading measure for the copy (Theme Options → Product Page →
   “Content max width”). --pdp-block-maxw is set inline on .pdp-blocks; unset
   it falls back to `none`, i.e. the full card width. */
.pdp-block-lines,
.pdp-block-copy,
.pdp-ship-note{ max-width:var(--pdp-block-maxw, none); margin-left:auto; margin-right:auto; }

/* delivery calculator */
.pdp-ship{ margin-top:22px; }
.pdp-ship-field{ position:relative; }
.pdp-ship-field select{
  width:100%; height:52px; padding:0 46px 0 18px;
  border:1px solid var(--pink-dark); background:#fff; color:var(--stone);
  font-family:var(--poppins); font-size:13px; text-align:left; cursor:pointer;
  border-radius:0; outline:none;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
.pdp-ship-field select:focus-visible{ border-color:var(--gold); }
.pdp-ship-caret{
  position:absolute; right:20px; top:50%; width:9px; height:9px; pointer-events:none;
  border-right:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);
}
.pdp-ship-out{ display:flex; justify-content:center; gap:46px; padding:22px 0 0; }
.pdp-ship-cell{ display:flex; flex-direction:column; gap:6px; }
.pdp-ship-k{
  font-family:'Gotham', var(--sans); font-weight:500; font-size:12px;
  letter-spacing:0.24px; color:var(--gold);
}
.pdp-ship-v{ font-family:var(--poppins); font-size:13px; line-height:1.5; color:var(--stone); }
.pdp-ship-v.is-free{ color:var(--gold); }
.pdp-ship-note{ padding-top:14px; font-family:var(--poppins); font-size:12px; line-height:1.6; color:var(--muted); }

/* packaging card — image runs to the card's own hairline */
.pdp-block--pack{ padding:32px 0 28px; overflow:hidden; }
.pdp-block--pack .pdp-block-fig{ margin:-32px 0 24px; background:var(--sand); }
.pdp-block--pack .pdp-block-fig img{ width:100%; height:auto; display:block; }
.pdp-block--pack .pdp-block-h,
.pdp-block--pack .pdp-block-copy,
.pdp-block--pack .pdp-block-lines{ padding-left:24px; padding-right:24px; }

/* ---- "You might also like" ---- */
.pdpx-also{ padding-bottom:90px; }
.pdpx-also-h{
  text-align:center; padding:24px 20px 24px; margin-top: 30px;
  font-size:40px; line-height:1.15; letter-spacing:0.56px; text-transform:uppercase; color:var(--gold);
}

/* ---- gallery grid + phone carousel ---- */
.pdp-gallery-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; }
.pdp-gcell{ position:relative; overflow:hidden; aspect-ratio:2/3; background:var(--sand); cursor:zoom-in; }
.pdp-slider{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.pdp-slider::-webkit-scrollbar{ display:none; }
.pdp-slide{ position:relative; flex:0 0 100%; scroll-snap-align:start; aspect-ratio:2/3; background:var(--sand); overflow:hidden; }
.pdp-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pdp-slider-count{
  position:absolute; left:24px; bottom:32px; z-index:2;
  font-family:var(--script); font-style:italic; font-size:14px; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,0.4);
}
.pdp-gcell img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .12s ease-out; will-change:transform; }
.pdp-gcell--video{ cursor:default; }
.pdp-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; background:#000; }
.pdp-video-wrap{ position:absolute; inset:0; }
.pdp-video-wrap .pdp-video{ cursor:pointer; }
/* Centre play button (hidden while playing) */
.pdp-video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; border:1px solid rgba(255,255,255,0.85);
  background:rgba(20,16,14,0.34); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:opacity .3s ease, transform .25s ease, background .3s ease; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.pdp-video-play:hover{ background:rgba(20,16,14,0.52); transform:translate(-50%,-50%) scale(1.06); }
.pdp-play-tri{ width:0; height:0; margin-left:5px; border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff; }
.pdp-video-wrap.is-playing .pdp-video-play{ opacity:0; pointer-events:none; }
/* Picture-in-picture button, bottom-right */
.pdp-video-pip{
  position:absolute; right:12px; bottom:12px; width:36px; height:36px; border-radius:9px;
  border:1px solid rgba(255,255,255,0.7); background:rgba(20,16,14,0.42); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .3s ease, transform .25s ease;
}
.pdp-video-pip:hover{ background:rgba(20,16,14,0.66); transform:scale(1.06); }
.pdp-video-pip svg{ width:18px; height:18px; }
/* ---- House-of-CB PDP + shop, tablet & phone ----
   ≤1024px is House of CB's own `lg` breakpoint: the PDP stacks (gallery
   carousel above the details, which stop being sticky) and the category grid
   drops from five-up to two-up. */
@media(max-width:1024px){
  .hgrid{ grid-template-columns:repeat(2,1fr); }
  .hgrid--dense{ grid-template-columns:1fr; }
  .pdpx-wrap{ flex-direction:column; }
  .pdpx-media{ width:100%; padding-right:0; }
  .pdpx-panel{ width:100%; position:static; padding:0 20px; }
  .pdpx-head{ padding-top:20px; }
  .pdpx-sections{ padding-top:30px; gap:0; }
  /* Phones collapse the content sections back into tap-to-open accordions. */
  .pdpx-sec{ border-bottom:1px solid var(--line-2); }
  .pdpx-sec-h{ cursor:pointer; padding:20px 0; margin:0; }
  .pdpx-sec-h .sign{ display:block; font-size:15px; }
  .pdpx-sec-b{ display:none; padding-bottom:20px; }
  .pdpx-sec.is-open .pdpx-sec-b{ display:block; }
  .pdp-blocks{ padding:30px 0 60px; }
  .pdp-ship-out{ gap:34px; }
  .pdpx-also{ padding-bottom:60px; }
  .pdpx-also-h{ font-size:32px; }
  .pdp-gcell{ cursor:default; }
  .fdrawer-head{ padding:20px 20px 0; }
  .fdrawer-body{ padding:20px 20px 40px; }
}
@media(max-width:620px){
  /* Phones: the row is a swipeable pill strip. Tighter chips, edge padding
     that lets the first/last chip sit flush with the grid gutter, and a
     shorter docked band so it doesn't eat the viewport. */
  .catnav-track{ gap:22px; padding:16px 14px; }
  .catnav-chip{ font-size:14px; }
  .catnav-chip--all{ padding:7px 12px; }
  .catnav-dock .catnav-track{ padding:11px 14px; }
  .hcard-body{ padding:12px 12px 16px; }
  .hcard-foot{ margin-top:18px; flex-direction:column; align-items:flex-start; gap:8px; }
  .pdp-badges{ top:14px; left:14px; }
  .pdpx-also-h{ font-size:24px; padding:18px 20px; margin-top:20px; }
}
.opt{ margin-top:30px; }
.opt-label{ font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; margin-bottom:14px; font-family: 'Gotham'; }
.opt-label .muted{ color:var(--muted); }
.swatches{ display:flex; gap:12px; flex-wrap:wrap; }
.swatch{ width:34px; height:34px; border-radius:50%; cursor:pointer; box-shadow:0 0 0 1.5px var(--line-2); transition:box-shadow .2s ease; border:none; }
.swatch.is-on{ box-shadow:0 0 0 1.5px var(--gold), 0 0 0 4px rgba(130,32,62,0.22); }
.lengths{ display:flex; gap:10px; flex-wrap:wrap; }
.length-btn{ font-size:12px; letter-spacing:0.08em; padding:11px 16px; cursor:pointer; border:1px solid var(--line-2); background:transparent; color:var(--onyx); transition:all .2s ease; }
.length-btn.is-on{ border-color:var(--gold); background:var(--gold); color:#fff; }
.length-btn.is-oos{ opacity:.4; text-decoration:line-through; }
.pdp-stock{ margin-top:20px; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; }
.pdp-stock.in{ color:var(--stone); }
.pdp-stock.low{ color:var(--gold); }
.pdp-stock.oos{ color:#b0453c; }
/* out of stock — same grey treatment as the Layout 02 button */
.add-btn[disabled],
.add-btn.is-oos,
.qv-actions .btn-primary[disabled],
.qv-actions .btn-primary.is-oos{
  background:var(--oos-bg); color:var(--oos-fg); border:1px solid var(--oos-line); cursor:not-allowed;
}
.add-btn[disabled]:hover,
.add-btn.is-oos:hover,
.qv-actions .btn-primary[disabled]:hover,
.qv-actions .btn-primary.is-oos:hover{ background:var(--oos-bg); color:var(--oos-fg); }
.buy-row{ margin-top:34px; display:flex; gap:14px; align-items:stretch; flex-wrap:wrap; }
.qty-lg{ display:flex; align-items:center; border:1px solid var(--line-2); }
.qty-lg button{ width:46px; height:54px; background:none; border:none; cursor:pointer; font-size:18px; }
.qty-lg .n{ width:40px; text-align:center; font-size:14px; }
.add-btn{ flex:1; min-width:200px; background:var(--gold); color:#fff; border:none; font-size:12.5px; letter-spacing:0.24em; text-transform:uppercase; cursor:pointer; padding:0 30px; transition:background .35s ease; }
.add-btn:hover{ background:var(--onyx); }
.pdp-wish{ width:54px; background:none; border:1px solid var(--line-2); cursor:pointer; font-size:16px; color:var(--onyx); }
.pdp-wish.is-on{ color:var(--gold); }
.pdp-trust{ margin-top:30px; display:flex; flex-direction:column; gap:11px; }
.pdp-trust div{ display:flex; gap:12px; align-items:center; font-size:12.5px; color:var(--stone); }
.pdp-trust .tick{ color:var(--gold); }
.accordion{ margin-top:30px; border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 0; cursor:pointer; font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; }
.acc-head .sign{ color:var(--gold); font-size:16px; }
.acc-body{ font-size:13px; line-height:1.8; color:var(--stone); padding-bottom:18px; max-width:460px; }

/* ---------- forms ---------- */
.field, .select, .textarea{
  width:100%; background:var(--ivory); border:1px solid var(--line-2);
  padding:15px 16px; font-size:13px; outline:none;
}
.textarea{ resize:none; }
.form-stack{ display:flex; flex-direction:column; gap:14px; }
.auth-wrap{ max-width:520px; margin:0 auto; }

/* ---------- account / auth (theme-styled WC login/register/reset) ---------- */
.auth-card{ position:relative; border:1px solid var(--line-2); background:#fff; border-radius:16px; padding:34px 30px 30px; box-shadow:0 24px 60px -42px rgba(28,25,22,0.55); }
.auth-card::before{ content:""; position:absolute; top:-7px; left:16px; right:16px; height:18px; border:2px solid var(--onyx); border-bottom:none; border-radius:16px 16px 0 0; z-index:-1; }
/* segmented Sign In / Create Account toggle */
.auth-seg{ position:relative; display:grid; grid-template-columns:1fr 1fr; background:var(--champ); border:1px solid var(--line-2); border-radius:999px; padding:5px; margin-bottom:26px; }
.auth-seg-thumb{ position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); background:var(--gold); border-radius:999px; transition:transform .28s cubic-bezier(.4,0,.2,1); }
.auth-seg.reg .auth-seg-thumb{ transform:translateX(100%); }
.auth-seg-btn{ position:relative; z-index:1; background:none; border:none; cursor:pointer; padding:12px 10px; font-size:13px; font-weight:500; letter-spacing:0.02em; color:var(--stone); border-radius:999px; transition:color .25s; font-family:inherit; }
.auth-seg-btn.is-on{ color:#fff; }
.auth-form{ display:flex; flex-direction:column; gap:16px; }
.auth-form.is-hidden{ display:none; }
.auth-2col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.auth-field{ display:flex; flex-direction:column; gap:7px; }
.auth-field label{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; color:var(--onyx); }
.auth-input{ width:100%; background:#fff !important; border:1px solid var(--line-2) !important; border-radius:10px !important; padding:14px 15px !important; font-size:14px !important; color:var(--onyx); outline:none !important; transition:border-color .2s, box-shadow .2s; }
.auth-input:focus{ border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(130,32,62,0.12) !important; }
.auth-pass{ position:relative; }
.auth-pass .auth-input{ padding-right:46px; }
.auth-eye{ position:absolute; top:50%; right:8px; transform:translateY(-50%); width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--stone); padding:0; }
.auth-eye svg{ width:19px; height:19px; }
.auth-eye:hover, .auth-eye.is-on{ color:var(--gold); }
.auth-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.auth-check{ font-size:13px; color:var(--onyx); display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.auth-check input{ width:17px; height:17px; accent-color:var(--onyx); }
.auth-link{ background:none; border:none; cursor:pointer; color:var(--gold); font-size:13px; font-weight:500; padding:0; text-decoration:none; font-family:inherit; }
.auth-link:hover{ text-decoration:underline; }
.auth-intro{ font-size:13.5px; line-height:1.7; color:var(--stone); }
.auth-fine{ font-size:11.5px; line-height:1.7; color:var(--stone); text-align:center; }
.auth-fine a{ color:var(--gold); }
.auth-switch{ text-align:center; font-size:13px; color:var(--stone); margin-top:2px; }
.auth-submit{ width:100%; background:var(--gold); color:#fff; border:none; border-radius:999px; padding:17px 24px; font-size:14px; font-weight:500; letter-spacing:0.02em; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:background .25s; font-family:inherit; }
.auth-submit:hover{ background:var(--onyx); }
.auth-submit:disabled{ opacity:0.6; cursor:default; }
.auth-arrow{ font-size:15px; }
.auth-msg{ font-size:12.5px; padding:11px 13px; border:1px solid transparent; border-radius:8px; }
.auth-msg.is-err{ color:#9a2b2b; background:rgba(154,43,43,0.06); border-color:rgba(154,43,43,0.2); }
.auth-msg.is-ok{ color:#1f7a3d; background:rgba(31,122,61,0.06); border-color:rgba(31,122,61,0.2); }
@media(max-width:620px){ .auth-2col{ grid-template-columns:1fr; } }

/* ---------- size chart ---------- */
.sc-h{ font-family:var(--serif); font-size:24px; letter-spacing:0.02em; margin-bottom:10px; text-align:center; }
.sc-sub{ font-size:13px; line-height:1.75; color:var(--stone); max-width:640px; margin:0 auto 26px; text-align:center; }
.sc-points{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 40px; max-width:860px; margin:26px auto 0; }
.sc-point{ display:flex; gap:16px; align-items:flex-start; }
.sc-num{ flex:0 0 auto; width:34px; height:34px; border:1px solid var(--gold); color:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:15px; }
.sc-point h4{ font-size:13px; letter-spacing:0.03em; margin-bottom:5px; }
.sc-point p{ font-size:12.5px; line-height:1.7; color:var(--stone); }
.sc-table-wrap{ max-width:760px; margin:8px auto 0; overflow-x:auto; }
.sc-table{ width:100%; border-collapse:collapse; font-size:13px; }
.sc-table th, .sc-table td{ border:1px solid var(--line-2); padding:13px 16px; text-align:left; }
.sc-table thead th{ background:var(--champ); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--onyx); }
.sc-table td:first-child{ color:var(--stone); }
.sc-cta{ text-align:center; margin-top:56px; }
.sc-cta p{ font-size:13.5px; color:var(--stone); margin-bottom:18px; }

/* ---------- services ---------- */
.serv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:8px; }
@media(max-width:900px){ .serv-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .serv-grid{ grid-template-columns:1fr; } }
.serv-card{ border:1px solid var(--line-2); background:var(--ivory); padding:30px 28px; display:flex; flex-direction:column; }
.serv-name{ font-family:var(--serif); font-size:22px; letter-spacing:0.01em; margin-bottom:10px; color:var(--gold); }
.serv-price{ font-size:12px; letter-spacing:0.03em; color:var(--gold); margin-bottom:16px; line-height:1.6; }
.serv-desc{ font-size:13px; line-height:1.75; color:var(--stone); margin-bottom:18px; flex:1; }
.serv-turn{ font-size:12px; color:var(--stone); border-top:1px solid var(--line); padding-top:14px; margin-bottom:16px; }
.serv-turn span{ display:block; font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.serv-cta{ font-size:12px; letter-spacing:0.06em; color:var(--gold); align-self:flex-start; }
.serv-note{ margin-top:52px; border:1px solid var(--line); background:var(--champ); padding:34px 32px; text-align:center; max-width:820px; margin-left:auto; margin-right:auto; }
.serv-note h4{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--onyx); margin-bottom:12px; }
.serv-note p{ font-size:13px; line-height:1.8; color:var(--stone); max-width:640px; margin:0 auto 20px; }

/* ---------- In My Lilly’s Hair — customer-photo gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
@media(max-width:900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }
@media(max-width:520px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-cell{ margin:0; }
.gallery-media{ position:relative; display:block; overflow:hidden; background:var(--ivory); aspect-ratio:4/5; }
.gallery-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
a.gallery-media:hover .gallery-img{ transform:scale(1.04); }
.gallery-cap{ position:absolute; left:0; right:0; bottom:0; padding:22px 16px 12px; font-size:12px; letter-spacing:0.04em; color:#fff; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); opacity:0; transition:opacity .3s ease; }
.gallery-media:hover .gallery-cap, .gallery-cell:hover .gallery-cap{ opacity:1; }
.gallery-foot{ margin-top:52px; text-align:center; }
.gallery-foot p{ font-size:13px; letter-spacing:0.02em; color:var(--stone); margin-bottom:6px; }

/* ---------- legal / policy prose ---------- */
.legal-updated{ text-align:center; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:40px; }
.legal-prose{ max-width:760px; margin:0 auto; }
.legal-prose h2{ font-family:var(--serif); font-size:22px; letter-spacing:0.01em; margin:34px 0 12px; }
.legal-prose h3{ font-size:14px; letter-spacing:0.04em; margin:24px 0 10px; }
.legal-prose p, .legal-prose li{ font-size:13.5px; line-height:1.9; color:var(--stone); }
.legal-prose p{ margin-bottom:16px; }
.legal-prose ul, .legal-prose ol{ margin:0 0 16px 20px; }
.legal-prose li{ margin-bottom:8px; }
.legal-prose a{ color:var(--gold); }
.legal-prose strong{ color:var(--onyx); }

/* ---------- consultation booking ---------- */
.consult-hero{ position:relative; min-height:56vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.consult-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.consult-hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,25,22,0.32) 0%, rgba(28,25,22,0.58) 100%); }
.consult-hero-copy{ position:relative; z-index:2; max-width:640px; padding:96px 24px; display:flex; flex-direction:column; align-items:center; color:#fff; }
.consult-hero-copy .eyebrow{ color:var(--gold-soft); margin-bottom:18px; }
.consult-hero-copy h1{ color:#fff; font-size:clamp(34px,5vw,50px); line-height:1.06; margin-bottom:18px; }
.consult-intro{ font-size:15px; line-height:1.85; color:rgba(255,255,255,0.9); max-width:520px; margin:0; }
.consult-form-wrap{ padding-top:56px; padding-bottom:100px; }

/* inline booking calendar */
.consult-calendar{ border:1px solid var(--line-2); background:var(--ivory); padding:16px; max-width:340px; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-title{ font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--onyx); }
.cal-nav{ width:30px; height:30px; border:1px solid var(--line-2); background:#fff; color:var(--onyx); cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.cal-nav:hover:not(:disabled){ border-color:var(--gold); color:var(--gold); }
.cal-nav:disabled{ opacity:0.3; cursor:not-allowed; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-dow{ margin-bottom:6px; }
.cal-dow span{ text-align:center; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); padding:4px 0; }
.cal-day{ aspect-ratio:1; border:1px solid transparent; background:#fff; color:var(--onyx); cursor:pointer; font-size:12.5px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.cal-day:hover:not(:disabled){ border-color:var(--gold); color:var(--gold); }
.cal-day.is-selected{ background:var(--gold); color:#fff; border-color:var(--gold); }
.cal-day.is-selected:hover{color:#fff !important; }
.cal-day:disabled{ cursor:not-allowed; color:var(--line-2); background:transparent; text-decoration:line-through; }
.cal-day.is-closed:disabled{ color:#b9776f; background:rgba(154,43,43,0.05); text-decoration:none; }
.cal-empty{ aspect-ratio:1; }
.cal-legend{ display:flex; gap:16px; margin-top:12px; font-size:10.5px; color:var(--stone); }
.cal-legend .dot{ display:inline-block; width:9px; height:9px; margin-right:5px; vertical-align:middle; }
.cal-legend .dot-closed{ background:rgba(154,43,43,0.18); }
.cal-legend .dot-open{ background:#fff; border:1px solid var(--line-2); }
.consult-form{ max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:34px; }
.consult-block{ border:none; margin:0; padding:0; }
.consult-label{ display:block; font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--onyx); margin-bottom:14px; line-height:1.5; }
.consult-label .req{ color:var(--gold); }
.consult-2col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.consult-sub{ display:flex; flex-direction:column; gap:6px; }
.consult-sub span{ font-size:11px; color:var(--stone); letter-spacing:0.04em; }
.consult-modes, .consult-locations{ display:flex; flex-direction:column; gap:12px; }
.consult-radio{ display:block; cursor:pointer; }
.consult-radio input{ position:absolute; opacity:0; width:0; height:0; }
.consult-radio-body{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:1px solid var(--line-2); background:var(--ivory); padding:16px 18px; transition:border-color .2s, box-shadow .2s; }
.consult-radio-body::before{ content:""; width:15px; height:15px; border:1px solid var(--line-2); border-radius:50%; flex:0 0 auto; margin-right:2px; transition:border-color .2s; }
.consult-radio input:checked + .consult-radio-body{ border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.consult-radio input:checked + .consult-radio-body::before{ border-color:var(--gold); border-width:5px; }
.consult-radio input:focus-visible + .consult-radio-body{ outline:2px solid var(--gold); outline-offset:2px; }
.consult-radio-title{ font-size:13px; flex:1; }
.consult-radio-price{ font-size:13px; color:var(--gold); font-weight:500; }
.consult-date{ max-width:260px; }
.consult-slots{ display:flex; flex-wrap:wrap; gap:10px; }
.consult-slot{ border:1px solid var(--line-2); background:var(--ivory); color:var(--onyx);
  padding:12px 18px; font-size:12.5px; letter-spacing:0.03em; cursor:pointer; transition:all .2s; }
.consult-slot:hover:not(:disabled){ border-color:var(--gold); color:var(--gold); }
.consult-slot.is-on{ background:var(--gold); border-color:var(--gold); color:#fff; }
.consult-slot.is-on:hover{ color:#fff !important; }
.consult-slot:disabled{ opacity:0.35; cursor:not-allowed; text-decoration:line-through; }
.consult-phone{ display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:14px; }
.consult-total{ display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:20px 0; }
.consult-total span{ font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--stone); }
.consult-total strong{ font-size:24px; color:var(--gold); font-weight:500; }
.consult-note{ font-size:12.5px; color:var(--stone); }
.consult-fineprint{ font-size:11.5px; color:var(--stone); text-align:center; }
.consult-error{ font-size:13px; color:#9a2b2b; background:rgba(154,43,43,0.06); border:1px solid rgba(154,43,43,0.2); padding:12px 14px; }
@media (max-width:860px){
  .consult-hero{ grid-template-columns:1fr; }
  .consult-hero-copy{ padding:48px 24px; }
  .consult-2col{ grid-template-columns:1fr; }
  .consult-phone{ grid-template-columns:1fr; }
}

/* ---------- faq ---------- */
.faq-grid{ display:grid; grid-template-columns:300px 1fr; gap:48px; max-width:1100px; margin:0 auto; }
.faq-cat{ display:flex; align-items:center; gap:12px; padding:16px 18px; border:1px solid var(--line); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; }
.faq-cat .dot{ color:var(--gold); font-size:9px; }
.faq-list{ border-top:1px solid var(--line); }
.faq-q{ font-family:var(--serif); font-size:19px; }

/* ---------- checkout ---------- */
.co-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:64px; max-width:1180px; margin:0 auto; }
.co-block .lbl{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; margin-bottom:16px; }
.co-summary{ background:var(--ivory); padding:34px 30px; align-self:start; }
.co-line{ display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.co-line img{ width:54px; height:68px; object-fit:cover; background:var(--sand); flex:none; }
.co-line .nm{ font-family:var(--serif); font-size:14px; }
.co-line .mt{ font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.co-totals{ border-top:1px solid var(--line); padding-top:18px; display:flex; flex-direction:column; gap:10px; font-size:13px; color:var(--stone); }
.co-totals .grand{ display:flex; justify-content:space-between; font-size:16px; color:var(--onyx); font-family:var(--serif); border-top:1px solid var(--line); padding-top:14px; margin-top:4px; }

/* as seen on */
.seen-row{ display:flex; justify-content:center; gap:56px; flex-wrap:wrap; font-family:var(--serif); font-size:24px; color:var(--muted); }
.seen-row span{ font-family:var(--script); font-style:italic; }

/* trust strip */
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; max-width:1080px; margin:0 auto; text-align:center; }
.trust-grid .k{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:11px; }
.trust-grid .t{ font-size:12.5px; line-height:1.7; color:var(--stone); }

.lookrow{ display:flex; flex-direction:column; gap:15px; margin-bottom:30px; }
.lookrow .li{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:12px; }
.lookrow .li .nm{ font-size:13.5px; }
.lookrow .li .pr{ font-size:13px; color:var(--gold); }

/* ---------- animations ---------- */
.fade{ animation:fade .3s ease; }
@keyframes fade{ from{opacity:0.4} to{opacity:1} }
@keyframes slideL{ from{transform:translateX(-100%)} to{transform:none} }
@keyframes slideR{ from{transform:translateX(100%)} to{transform:none} }
@keyframes dropD{ from{transform:translateY(-100%)} to{transform:none} }
@keyframes pop{ from{opacity:0; transform:translate(-50%,-50%) scale(.985)} to{opacity:1; transform:translate(-50%,-50%) scale(1)} }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media(max-width:1100px){
  :root{ --hdr-h:80px; }
  .header-grid{ padding:0 24px; gap:12px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .pdp-grid{ grid-template-columns:1fr; gap:36px; }
  .split{ grid-template-columns:1fr; }
  .co-grid{ grid-template-columns:1fr; gap:36px; }
  .faq-grid{ grid-template-columns:1fr; }
  .foot-main{ grid-template-columns:1fr; gap:38px; }
  .foot-cols{ grid-template-columns:repeat(3,1fr); }
  .quick-modal{ grid-template-columns:1fr; }
  .quick-modal .qv-media{ aspect-ratio:16/10; }
  .search-results{ grid-template-columns:repeat(3,1fr); }
  .util-hide{ display:none; }
  /* menu: hide the campaign panel, widen the nav panel */
  .menu-feature{ display:none; }
  .menu-panel{ width:min(82vw,460px); min-width:0; }
}
@media(max-width:620px){
  :root{ --pad:18px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:1fr; }
  .section{ padding-top:64px; padding-bottom:56px; }
  .hero-panel{ padding:34px 26px 38px; }
  .hero-panel h1{ font-size:46px; }
  .band-card{ right:18px; left:18px; width:auto; }
  /* ---- footer → House-of-CB mobile layout ----
     Centred wordmark + newsletter, then the six link groups collapsed into
     full-width tap-to-open rows separated by edge-to-edge hairlines, then the
     social row, the copyright and finally the emblem. Colours all still come
     from the Theme Options vars; only the layout changes, and only here —
     desktop and tablet keep the two-column grid untouched.
     .foot-news-col goes display:contents so its children become flex items of
     .foot-main, which is what lets the social row be ordered BELOW .foot-cols
     even though it sits inside the newsletter column in the markup. */
  .foot-inner{ display:flex; flex-direction:column; }
  .foot-wordmark{ padding-bottom:26px; font-size:clamp(25px,7.2vw,34px); }
  /* gap:0 clears the 38px the ≤1100px block sets for the grid layout */
  .foot-main{ display:flex; flex-direction:column; gap:0; padding-bottom:0; text-align:center; }
  .foot-news-col{ display:contents; }
  .foot-news-col > .foot-h{ display:none; }   /* HoCB leads with the copy, no "Newsletter" label */
  .foot-news-p{ order:1; max-width:330px; margin:0 auto 16px; font-size:13px; }
  .foot-news-field{ order:2; width: 100%; max-width: 85%; margin: 0 auto; }
  .foot-news-field input{ text-align:center; padding-left:50px; }
  .foot-cols{ order:3; display:block; margin:26px calc(-1 * var(--pad)) 0; margin-left: 0; width: 100%; }
  .foot-social{ order:4; justify-content:center; gap:26px; margin:26px 0 0; width:100%; }
  .foot-social .soc-svg{ width:28px; height:28px; }
/*   .foot-social .soc-svg{ width:32px; height:32px; } */
  .soc-svg{ width:26px !important; height:26px !important; }

  /* collapsed group: centred label row, links revealed by .is-open (ui.js) */
  .foot-col{ border-top:1px solid var(--line); border-color: #82203e !important; }
  .foot-col:first-child{ border-top:0; }
  .foot-col:last-child{ border-bottom:1px solid var(--line); }
  .foot-col .foot-h{ margin:0; padding:17px var(--pad); text-align:center; font-size:15px; cursor:pointer; -webkit-user-select:none; user-select:none; }
  /* visibility (not just max-height) so collapsed links leave the tab order */
  .foot-col-links{ overflow:hidden; max-height:0; opacity:0; visibility:hidden;
    transition:max-height .38s ease, opacity .26s ease, visibility 0s linear .38s; }
  .foot-col.is-open .foot-col-links{ max-height:460px; opacity:1; visibility:visible; transition-delay:0s; }
  .foot-link{ margin:0; padding:9px var(--pad); text-align:center; font-size:14px; }
  .foot-col-links .foot-link:last-child{ padding-bottom:18px; }

  .foot-base{ order:1; border-top:0; padding-top:4px; }
  .foot-copy{ padding:18px 0 0; line-height:1.75; }
  .foot-badge{ order:2; width:104px; height:104px; margin:18px auto 0; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .search-results{ grid-template-columns:repeat(2,1fr); }
  .pdp-name{ font-size:36px; }
  .menu-panel{ width:100%; min-width:0; }
}
@keyframes lh-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =====================================================================
   WooCommerce native page integration (cart / checkout / account)
   Styled to match the LillysHair aesthetic.
   ===================================================================== */
.lh-wc-page{ padding-top:56px; padding-bottom:110px; min-height:60vh; }
.lh-wc-page .section-head{ margin-bottom:44px; }
.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner{
  border-left:3px solid var(--gold) !important; background:var(--ivory); color:var(--onyx);
  font-size:13px; padding:16px 18px; list-style:none; margin-bottom:20px;
}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,
.wc-block-components-button{
  background:var(--gold) !important; color:#fff !important; border:none !important; border-radius:0 !important;
  font-size:12.5px !important; letter-spacing:0.18em !important; text-transform:uppercase !important;
  padding:15px 32px !important; font-weight:400 !important; transition:background .35s ease !important;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.wc-block-components-button:hover{
  background:var(--onyx) !important;
}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce .select2-container,.woocommerce-page input[type=text],
.woocommerce-page input[type=email],.woocommerce-page input[type=password],
.woocommerce-page input[type=tel],.woocommerce-page select,.wc-block-components-text-input input{
  background:var(--ivory); border:1px solid var(--line-2); border-radius:0; padding:13px 15px; font-size:13px;
}
.woocommerce table.shop_table{ border-radius:0; border:1px solid var(--line); }
.woocommerce-cart table.cart img{ width:64px; }
.woocommerce .cart-collaterals .cart_totals,.woocommerce-checkout #order_review{ background:var(--ivory); padding:8px 22px; }
.woocommerce h2,.woocommerce h3,.woocommerce-account h2,.woocommerce-checkout h3{ font-family:var(--serif); font-weight:400; }
.woocommerce-MyAccount-navigation ul{ list-style:none; border:1px solid var(--line); }
.woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--line); }
.woocommerce-MyAccount-navigation li a{ display:block; padding:14px 18px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; }
.woocommerce-MyAccount-navigation li.is-active a{ color:var(--gold); }
.woocommerce-price-amount,.woocommerce-Price-amount{ color:var(--onyx); }
.lh-account-intro{ max-width:1100px; margin:0 auto 40px; }
.woocommerce-account .woocommerce,.woocommerce-cart .woocommerce,.woocommerce-checkout .woocommerce{ max-width:1180px; margin:0 auto; }

/* =====================================================================
   HOMEPAGE — editorial redesign (House-of-CB layout, Lilly's palette)
   ===================================================================== */

/* ---- shared helpers ---- */
.serif-i{ font-family:var(--script); font-style:italic; font-weight:400; color:var(--gold); }
.hp-on-dark{ color:var(--gold-soft) !important; }
.hp-on-dark-link{ color:var(--bone) !important; border-color:var(--gold-soft) !important; }
.btn-light{ background:rgba(255,255,255,0.94); color:var(--onyx); }
.btn-light:hover{ background:var(--gold); color:#fff; }

/* full-bleed helper so sections escape any centered wrapper */
.hp{ overflow:hidden; }
.hp-sec{ padding:100px var(--pad); }
.hp-sec--ivory{ background:var(--ivory); }
/* Mobile-only product slider (shown via the mobile media query below). */
.hp-mstd-section{ display:none; }
.hp-trio-price{ margin-top:6px; font-size:13px; letter-spacing:0.02em; color:var(--gold); display:flex; gap:8px; align-items:baseline; justify-content:center; }
.hp-trio-price .now.sale{ color:var(--gold); }
.hp-trio-price .was{ color:var(--muted); text-decoration:line-through; font-size:12px; }
.hp-sec > .section-head{ margin-bottom:52px; }

/* ---- hero slider ---- */
/* Tuck the homepage up behind the transparent header so the chrome floats over
   the hero. Applied to .hp (not .hp-hero) because .hp has overflow:hidden and
   would otherwise clip a negative margin on its first child. */
body.home .hp{ margin-top:calc(-1 * var(--hdr-h)); }
.hp-hero{ position:relative; height:100vh; min-height:640px; background:var(--sand); overflow:hidden; }
.hp-hero-track{ position:absolute; inset:0; }
.hp-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.1s ease; }
.hp-slide.is-active{ opacity:1; visibility:visible; }
.hp-slide-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hp-slide-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,25,22,0.12) 0%,rgba(28,25,22,0.05) 42%,rgba(28,25,22,0.62) 100%); }
.hp-slide-inner{
  position:absolute; inset:var(--hdr-h) 24px 0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center;
  padding-bottom:4%; color:#fff;
}
.hp-slide.is-active .hp-slide-inner{ animation:hpRise 1s ease both; }
.hp-slide-eyebrow{ color:var(--gold-soft); margin-bottom:20px; }
/* Hero slider eyebrow uses the straight (upright) JJannon, not the italic body. */
body.home .hp-slide-eyebrow{ font-family:'jjannons-straing', var(--sans); }
.hp-slide-title{ font-family:var(--serif); font-weight:400; font-size:clamp(42px,6vw,78px); line-height:1; margin-bottom:20px; }
.hp-slide-title em{ font-family:var(--script); font-style:italic; color:var(--gold-soft); }
.hp-slide-text{ font-size:15.5px; line-height:1.7; max-width:440px; margin-bottom:30px; color:rgba(255,255,255,0.92); }
.hp-hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,0.5);
  background:rgba(28,25,22,0.22); backdrop-filter:blur(4px); color:#fff; cursor:pointer;
  font-size:24px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, border-color .3s ease;
}
.hp-hero-arrow:hover{ background:var(--gold); border-color:var(--gold); }
.hp-hero-arrow.prev{ left:26px; }
.hp-hero-arrow.next{ right:26px; }
.hp-hero-dots{ position:absolute; bottom:28px; left:0; right:0; z-index:4; display:flex; justify-content:center; gap:11px; }
.hp-dot{ width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,0.8); background:transparent; cursor:pointer; padding:0; transition:background .3s ease; }
.hp-dot.is-active{ background:var(--gold-soft); border-color:var(--gold-soft); }
@keyframes hpRise{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }

/* ---- New In rail ---- */
.hp-rail-section{ padding:96px 0 90px; }
.hp-sec-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:40px; }
.hp-sec-head .eyebrow{ display:block; margin-bottom:14px; }
.hp-rail-wrap{ position:relative; }
.hp-rail{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px var(--pad) 22px; scrollbar-width:none; -ms-overflow-style:none;
}
.hp-rail::-webkit-scrollbar{ display:none; }
.hp-rail .card{ flex:0 0 clamp(230px,25vw,290px); scroll-snap-align:start; }
.hp-rail-arrow{
  position:absolute; top:38%; z-index:5; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line-2); background:rgba(255,255,255,0.94); color:var(--onyx);
  cursor:pointer; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px -10px rgba(28,25,22,0.5); transition:background .3s ease, color .3s ease;
}
.hp-rail-arrow:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.hp-rail-arrow.prev{ left:14px; }
.hp-rail-arrow.next{ right:14px; }

/* ---- product showcase (full-width grid, hairline 1px gaps, hover swap) ---- */
.hp-showcase-section{ width:100%; border-top:1px solid var(--line); }
.hp-showcase{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0px;
  width:100%; list-style:none; margin:0; padding:0;
}
.hp-sc-item{ list-style:none; background:#fff; display:flex; flex-direction:column; }
/* 1px separator lives ONLY on the image (border-left), never in the caption area */
.hp-sc-media{ position:relative; display:block; width:100%; aspect-ratio:2/3; overflow:hidden; background:var(--ivory); border-left:1px solid var(--line); }
.hp-showcase .hp-sc-item:nth-child(4n+1) .hp-sc-media{ border-left-color:transparent; }
.hp-sc-front, .hp-sc-back{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hp-sc-back{ z-index:0; }
.hp-sc-front{ z-index:1; transition:opacity .55s ease; }
.hp-sc-media:hover .hp-sc-front{ opacity:0; }
.hp-sc-body{ display:flex; flex-direction:column; gap:11px; padding:16px 22px 24px; flex:1; }
.hp-sc-swatches{ display:flex; align-items:center; gap:7px; min-height:13px; }
.hp-sc-swatch{ width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 1px var(--line-2); }
.hp-sc-text{ display:flex; flex-direction:column; gap:4px; }
.hp-sc-name{ font-family:'jjannons-straing'; font-weight:700; font-size:13px; margin-bottom:5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-soft); }
.hp-sc-desc{ font-family:var(--script); font-style:italic; font-size:14.5px; line-height:1.3; color:var(--gold-soft); }
.hp-sc-price{ font-family:'jjannons-straing'; font-weight:bold; margin-top:2px; display:flex; gap:8px; align-items:baseline; font-size:12px; letter-spacing:0.04em; color:var(--gold-soft); }
.hp-sc-price .price-now{ color:var(--gold-soft); }
.hp-sc-price .price-was{ color:var(--gold-soft); text-decoration:line-through; font-size:11px; }



.hp-showcase-section{ width:100%; border-top:1px solid var(--line); }
.hp-showcase{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0px;
  width:100%; list-style:none; margin:0; padding:0;
}
.hp-sc-item{ list-style:none; background:#fff; display:flex; flex-direction:column; }
/* 1px separator lives ONLY on the image (border-left), never in the caption area */
.hp-sc-media{ position:relative; display:block; width:100%; aspect-ratio:2/3; overflow:hidden; background:var(--ivory); border-left:1px solid var(--line); }
.hp-showcase .hp-sc-item:nth-child(4n+1) .hp-sc-media{ border-left-color:transparent; }
.hp-sc-front, .hp-sc-back{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hp-sc-back{ z-index:0; }
.hp-sc-front{ z-index:1; transition:opacity .55s ease; }
.hp-sc-media:hover .hp-sc-front{ opacity:0; }
.hp-sc-body{ display:flex; flex-direction:column; gap:11px; padding:16px 22px 24px; flex:1; }
.hp-sc-swatches{ display:flex; align-items:center; gap:7px; min-height:13px; }
.hp-sc-swatch{ width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 1px var(--line-2); }
.hp-sc-text{ display:flex; flex-direction:column; gap:4px; }
.hp-sc-name{ font-family:'jjannons-straing'; font-weight:700; font-size:13px; margin-bottom:5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--onyx); color:var(--gold-soft); }
.hp-sc-desc{ font-family:var(--script); font-style:italic; font-size:14.5px; line-height:1.3; color:var(--stone); color:var(--gold-soft); }
.hp-sc-price{ font-family:'jjannons-straing'; font-weight:bold; margin-top:2px; display:flex; gap:8px; align-items:baseline; font-size:12px; letter-spacing:0.04em; color:var(--onyx); color:var(--gold-soft); }
.hp-sc-price .price-now{ color:var(--gold-soft); }
.hp-sc-price .price-was{ color:var(--muted); color:var(--gold-soft); text-decoration:line-through; font-size:11px; }



/* ---- full-bleed banner (centred, full height) ---- */
.hp-banner{ position:relative; height:100vh; min-height:640px; overflow:hidden; }
.hp-banner-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hp-banner-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,25,22,0.30) 0%,rgba(28,25,22,0.12) 45%,rgba(28,25,22,0.45) 100%); }
.hp-banner-inner{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px; max-width:none; color:#fff; }
.hp-banner-title{ font-family:var(--serif); font-weight:400; font-size:clamp(40px,5.5vw,74px); line-height:1.02; margin:18px 0 20px; }
.hp-banner-text{ font-size:15.5px; line-height:1.8; color:rgba(255,255,255,0.92); margin-bottom:30px; max-width:440px; }

/* ---- full-bleed editorial band (HoCB "Our classic" — centred spaced serif) ---- */
.hp-editorial{ position:relative; height:100vh; min-height:640px; margin:2px 0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hp-editorial-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hp-editorial-scrim{ position:absolute; inset:0; background:rgba(20,17,12,0.34); }
.hp-editorial-inner{ position:relative; z-index:2; max-width:1040px; padding:0 40px; text-align:center; color:#fff; }
.hp-editorial-text{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,3.1vw,44px); line-height:1.55; letter-spacing:0.16em; text-transform:uppercase; }
.hp-editorial-text .serif-i{ text-transform:none; letter-spacing:0.01em; font-size:1.04em; color:var(--gold-soft); }
.hp-editorial-cta{ margin-top:34px; }

/* ---- diptych: two full-height category links (HoCB section-5 / 7) ---- */
.hp-diptych{ display:grid; grid-template-columns:1fr 1fr; gap:2px; column-gap: 0; height:100vh; min-height:640px; }
.hp-dip-item{ position:relative; overflow:hidden; display:block; background:var(--sand); }
.hp-dip-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s ease; }
.hp-dip-item:hover img{ transform:scale(1.05); }
.hp-dip-item::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,25,22,0.10) 0%,rgba(28,25,22,0.02) 45%,rgba(28,25,22,0.34) 100%); }
.hp-dip-cap{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; padding:0 20px; text-shadow:0 1px 22px rgba(20,16,10,0.45); }
.hp-dip-name{ font-family:var(--serif); font-size:clamp(22px,2vw,34px); letter-spacing:0.08em; text-transform:uppercase; }
.hp-dip-sub{ display:block; font-family:var(--script); font-style:italic; font-size:15px; margin-top:11px; color:rgba(255,255,255,0.92); }

/* ---- triptych ---- */
.hp-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5px; margin:0 auto;  max-width:var(--maxw);  max-width:100%; }
.hp-trio-item{ display:block; }
.hp-trio-media{ position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--sand); }
.hp-trio--square .hp-trio-media{ aspect-ratio:1/1; }
/* Trio slider pagination — a LINE, not bullets (House of CB): the segments butt
   together with no gap so they read as one hairline rule, and the active slide's
   segment thickens and takes the accent colour. Each segment is still a real
   button (16px tall, line drawn by ::before) so it stays tappable and labelled.
   Mobile only — the container is shown in the media query below. */
.hp-mdots{ display:none; }
.hp-mdot{
  flex:1 1 0; height:16px; padding:0; border:0; border-radius:0; background:transparent;
  cursor:pointer; display:flex; align-items:center;
}
.hp-mdot::before{
  content:''; display:block; width:100%; height:1px; background:var(--line-2);
  transition:background .3s ease, height .3s ease;
}
.hp-mdot.is-on::before{ height:2px; background:var(--gold); }
.hp-trio-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s ease; }
.hp-trio-item:hover .hp-trio-media img{ transform:scale(1.05); }
.hp-trio-cap{ text-align:center; margin-top:22px; }
.hp-trio-cap .eyebrow{ display:block; margin-bottom:10px; }
.hp-trio-name{ font-family:var(--serif); font-size:23px; margin-bottom:12px; color:var(--gold-soft); }
.hp-trio-sub{ font-size:12px; letter-spacing:0.04em; color:var(--gold-soft); margin-bottom:2px; text-transform:capitalize; }

/* ---- split (image + dark panel) ---- */
.hp-split{ display:grid; grid-template-columns:1.05fr 1fr; min-height:600px; }
.hp-split-media{ position:relative; overflow:hidden; background:var(--sand); }
.hp-split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hp-split-panel{ background:var(--ember); color:var(--bone); display:flex; flex-direction:column; justify-content:center; padding:90px 72px; }
.hp-split-panel .eyebrow{ margin-bottom:22px; color:var(--gold-soft); }
.hp-split-panel h2{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.4vw,44px); line-height:1.08; margin-bottom:24px; }
.hp-split-panel p{ font-size:14.5px; line-height:1.9; color:#cbb0b6; max-width:430px; margin-bottom:32px; }

/* ---- quote band (full height, centred) ---- */
.hp-quote{ position:relative; height:100vh; min-height:640px; margin:2px 0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hp-quote-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hp-quote-scrim{ position:absolute; inset:0; background:rgba(22,20,15,0.5); }
.hp-quote-inner{ position:relative; z-index:2; max-width:1000px; padding:80px 40px; text-align:center; }
.hp-quote-text{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.8vw,52px); line-height:1.32; color:#fff; }
.hp-quote .serif-i{ color:var(--gold-soft); }

/* ---- duo (two images + caption) ---- */
.hp-duo{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0; }
.hp-duo-imgs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:14px; }
.hp-duo-media{ position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--sand); }
.hp-duo-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s ease; }
.hp-duo-media:hover img{ transform:scale(1.04); }
.hp-duo-cap{ padding:60px 8% 60px 4%; }
.hp-duo-cap .eyebrow{ display:block; margin-bottom:16px; }
.hp-duo-cap h2{ margin-bottom:20px; }

/* ================= Standardised section-heading lockup =================
   Every section heading uses the category-tile ("logo-style") treatment:
   Line 1 — straight serif, ALL-CAPS section name (always DOM-first).
   Line 2 — thin slanted script, Title-Case descriptor (always DOM-second).
   Case is enforced in CSS, so the stored text can be any case. Applies to the
   section heads (New In / The Edit / Luminous Details / Memorable Moments) and
   the trio + diptych tile captions. The full-bleed editorial titles
   (hp-banner / hp-promo / hp-quote) are left as deliberate exceptions. */
.section-head .section-title,
.hp-sec-head .section-title,
.hp-duo-cap .section-title,
.hp-trio-cap .hp-trio-name{
  font-family:var(--serif); font-weight:400; font-style:normal;
  letter-spacing:0.07em; margin-bottom:9px;
  /* text-transform:uppercase; */
}
.section-head .section-title .serif-i,
.hp-sec-head .section-title .serif-i,
.hp-duo-cap .section-title .serif-i{ font-style:normal; letter-spacing:inherit; }

.section-head .eyebrow,
.hp-sec-head .eyebrow,
.hp-duo-cap .eyebrow,
.hp-trio-cap .eyebrow{
  font-family:var(--script); font-weight:400; font-style:italic;
  text-transform:capitalize; letter-spacing:0.02em; font-size:15px; margin:0;
}
.hp-duo-cap .eyebrow{ margin-bottom:22px; }   /* keep the gap before the paragraph */

/* Slanted Title-Case descriptor on the tile captions too */
.hp-trio-sub{ font-family:var(--script); font-style:italic; font-size:14px; letter-spacing:0.02em; }
.hp-dip-sub{ text-transform:capitalize; }
.hp-duo-cap p{ font-size:14.5px; line-height:1.85; color:var(--stone); max-width:400px; margin-bottom:30px; }

/* ---- promo band ---- */
.hp-promo{ position:relative; height:78vh; min-height:520px; overflow:hidden; }
.hp-promo-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hp-promo-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,25,22,0.15),rgba(28,25,22,0.55)); }
.hp-promo-inner{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; padding:0 24px; }
.hp-promo-title{ font-family:var(--serif); font-weight:400; font-size:clamp(52px,9vw,120px); line-height:0.95; letter-spacing:0.02em; margin:14px 0 18px; }
.hp-promo-text{ font-size:15px; line-height:1.7; max-width:420px; margin-bottom:28px; color:rgba(255,255,255,0.92); }

/* ---- newsletter ---- */
.hp-news{ background:var(--ivory); padding:104px var(--pad); text-align:center; }
.hp-news-inner{ max-width:640px; margin:0 auto; }
.hp-news-inner .eyebrow{ display:block; margin-bottom:16px; }
.hp-news-inner .section-title{ margin-bottom:18px; }
.hp-news-inner p{ font-size:14.5px; line-height:1.8; color:var(--stone); margin-bottom:30px; }
.hp-news-form{ display:flex; gap:12px; max-width:480px; margin:0 auto; }
.hp-news-form input{ flex:1; background:#fff; border:1px solid var(--line-2); padding:15px 16px; font-size:13px; outline:none; }
.hp-news-form input:focus{ border-color:var(--gold); }
.hp-news-form .btn{ flex:none; }

/* ---- bottom category grid (edge-to-edge tiles, overlaid captions) ---- */
.hp-catgrid-section{ width:100%; }
.hp-catgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5px; width:100%; }
.hp-cat{ position:relative; display:block; overflow:hidden; aspect-ratio:3/4; background:var(--sand); }
.hp-cat-media{ position:absolute; inset:0; }
.hp-cat-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s ease; }
.hp-cat::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,25,22,0.14) 0%,rgba(28,25,22,0.02) 42%,rgba(28,25,22,0.24) 100%); }
.hp-cat:hover .hp-cat-media img{ transform:scale(1.05); }
.hp-cat-cap{
  position:absolute; inset:0; z-index:2; padding:0 18px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  color:#fff; text-shadow:0 1px 22px rgba(20,16,10,0.42);
}
.hp-cat-name{ font-family:var(--serif); font-size:clamp(19px,1.5vw,26px); letter-spacing:0.07em; text-transform:uppercase; }
.hp-cat-sub{ font-family:var(--script); font-style:italic; font-size:13.5px; margin-top:10px; color:rgba(255,255,255,0.92); }

/* ---- closing wordmark band ---- */
.hp-wordmark{ background:var(--onyx); color:var(--bone); text-align:center; padding:88px 24px;border-bottom: 1px solid rgba(237, 232, 221, 0.14); }
.hp-wordmark .eyebrow{ display:block; margin-bottom:22px; color:var(--gold-soft); }
.hp-wordmark-text{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,5.5vw,72px); line-height:1.05; }
.hp-wordmark .serif-i{ color:var(--gold-soft); }

/* (footer emblem styles superseded by the House-of-CB footer block above) */

/* Homepage over-image CTAs → transparent ghost buttons: white text,
   white border, and NO background fill (default or hover). */
body.home .btn-light{
  background:transparent !important;
  color:#fff !important;
  border:1px solid #fff !important;
}
body.home .btn-light:hover{
  background:transparent !important;
  color:#fff !important;
}

/* Homepage per-section text tints (client request) */
/* Banner "Glamour" accent → soft gold (was wine) */
body.home .hp-banner-title .serif-i{ color:var(--gold-soft) !important; }
/* The Edit + Memorable Moments — eyebrow, title, trio captions → soft gold */
body.home .hp-sec .eyebrow,
body.home .hp-sec .section-title,
body.home .hp-sec .section-title .serif-i,
body.home .hp-trio-cap .eyebrow,
body.home .hp-trio-cap .cat-cta{ color:var(--gold-soft) !important; }
/* Newsletter — each piece of copy takes its colour from Theme Options →
   Newsletter (lh_news_colors_css), falling back to soft gold when unset.
   Submit stays a transparent outline button that follows the button colour. */
body.home .hp-news .eyebrow{ color:var(--news-eyebrow-color, var(--gold-soft)) !important; }
body.home .hp-news .section-title{ color:var(--news-title-color, var(--gold-soft)) !important; }
/* …its italic serif-i words take their own colour, falling back to the heading colour. */
body.home .hp-news .section-title .serif-i{ color:var(--news-title-accent-color, var(--news-title-color, var(--gold-soft))) !important; }
body.home .hp-news-inner p{ color:var(--news-text-color, var(--gold-soft)) !important; }
body.home .hp-news-form input{ color:var(--news-input-color, var(--gold-soft)) !important; }
body.home .hp-news-form input::placeholder{ color:var(--news-input-color, var(--gold-soft)) !important; }
body.home .hp-news .btn-primary{ background:transparent !important; color:var(--news-btn-color, var(--gold-soft)) !important; border:1px solid var(--news-btn-color, var(--gold-soft)) !important; }
body.home .hp-news .btn-primary:hover{ background:transparent !important; color:var(--news-btn-color, var(--gold-soft)) !important; }

/* ---------- homepage responsive ---------- */
@media(max-width:1100px){
  .hp-split{ grid-template-columns:1fr; }
  .hp-split-media{ min-height:440px; }
  .hp-split-panel{ padding:60px 40px; }
  .hp-duo{ grid-template-columns:1fr; }
  .hp-duo-cap{ padding:44px var(--pad) 60px; text-align:center; }
  .hp-duo-cap p{ margin-left:auto; margin-right:auto; }
  .hp-catgrid{ grid-template-columns:repeat(2,1fr); }
  .hp-showcase{ grid-template-columns:repeat(2,1fr); }
  .hp-showcase .hp-sc-item .hp-sc-media{ border-left-color:var(--line); }
  .hp-showcase .hp-sc-item:nth-child(2n+1) .hp-sc-media{ border-left-color:transparent; }
}
@media(max-width:620px){
  .hp-sec{ padding:64px var(--pad); }
  .hp-hero{ height:86vh; min-height:520px; }
  .hp-hero-arrow{ display:none; }
  .hp-slide-inner{ padding-bottom:12%; }
  .hp-rail-section{ padding:64px 0 60px; }
  .hp-sec-head{ padding-left:var(--pad); padding-right:var(--pad); }
  .hp-rail-arrow{ display:none; }
  /* cards flush to the left edge; fix the snap offset (no phantom scroll) */
  .hp-rail{ padding-left:0; padding-right:var(--pad); scroll-padding-left:0; gap:14px; }
  .hp-rail .card{ flex:0 0 82vw; }
  /* full-height centred bands stay 100vh; soften the scrim on small screens */
  .hp-banner{ min-height:560px; }
  .hp-banner-scrim{ background:linear-gradient(180deg,rgba(28,25,22,0.25),rgba(28,25,22,0.5)); }
  .hp-banner-inner{ padding:0 var(--pad); }
  .hp-editorial,.hp-quote{ min-height:560px; }
  .hp-editorial-inner{ padding:0 24px; }
  /* diptych stacks into two rows on mobile */
  .hp-diptych{ grid-template-columns:1fr; height:auto; min-height:0; }
  .hp-dip-item{ height:62vh; min-height:380px; }

  /* ---- Diptych #1 · Layout 02 (Theme Options → 7 · Diptych #1) ----
     Phones only. The right tile stops being a full-bleed photo and becomes a
     framed print: black keyline, white mount, pale panel, caption underneath.
     Every rule is scoped to .hp-diptych--m2 AND lives inside this media query,
     so desktop is byte-for-byte the same whichever layout is selected. */
  .hp-diptych--m2 .hp-dip-item--framed{
    height:auto; min-height:0; overflow:visible;   /* overflow:visible or the mount's box-shadow is clipped */
    background:var(--ivory);
    background:#FFF;
    display:flex; flex-direction:column; align-items:center;
    padding:38px 32px 40px;
  }
  /* the scrim exists to keep white text legible over a photo — there is no
     text over the photo here, and it would tint the pale panel */
  .hp-diptych--m2 .hp-dip-item--framed::after{ content:none; }
  /* Framed print: photo → white mat (padding) → thin keyline (border), sitting
     on the pale panel with a soft drop shadow. width:90% + margin-top per spec;
     aspect-ratio:unset so the photo keeps its natural proportions (no crop). */
  .hp-diptych--m2 .hp-dip-item--framed img{
    position:static; aspect-ratio:unset; width:90%; height:auto; margin-top:30px;
    background:#fff; padding:14px;                    /* white mat */
    border:1px solid rgba(73,41,41,0.35);             /* thin frame keyline */
    border:1px solid rgba(0,0,0,0.85);             /* thin frame keyline */
    box-shadow:0 12px 28px -16px rgba(73,41,41,0.45); /* print depth */
  }
  .hp-diptych--m2 .hp-dip-item--framed:hover img{ transform:none; }
  /* caption drops out of the overlay and sits below the mount */
  .hp-diptych--m2 .hp-dip-item--framed .hp-dip-cap{
    position:static; padding:0; margin-top:40px; text-shadow:none; display:block;
  }
  .hp-diptych--m2 .hp-dip-item--framed .hp-dip-name{ font-size:22px; }
  .hp-diptych--m2 .hp-dip-item--framed .hp-dip-sub{ margin-top:9px; }
  .hp-trio{ grid-template-columns:1fr; gap:34px; }
  .hp-mstd-section{ display:block; }   /* mobile-only product slider becomes visible */
  /* The Edit + Memorable Moments → swipe sliders: 0.9 tiles per view so the
     next slide peeks in, + the line pagination built by initTrioSliders in
     page-home.js. Both trios carry .hp-trio--slider; --square only sets the
     1:1 media ratio Moments uses. */
  .hp-sec--ivory .section-title{ font-size:28px; }
  .hp-sec--ivory .section-title{ font-size:24px; }
  .hp-sec--ivory .hp-trio-name{ font-size:18px; }
  /* Full-bleed track: cancel the section's side padding with negative margins,
     then re-add it as the track's own padding so the inset lives ONLY on the
     first slide (padding-left) and last slide (padding-right); the slides in
     between sit close together (just the gap). scroll-padding keeps snap aligned. */
  .hp-trio--slider{ display:flex; grid-template-columns:none; gap:3px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    max-width:none; margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad));
    padding-left:var(--pad); padding-right:var(--pad); scroll-padding-left:var(--pad);
    padding-left:10px; padding-right:10px;
  padding-left:4px; padding-right:4px; }
  .hp-trio--slider::-webkit-scrollbar{ display:none; }
  .hp-trio--slider .hp-trio-item{ flex:0 0 90%; scroll-snap-align:start;}
  .hp-trio--slider .hp-trio-item:last-child{ margin-right:0; }
  /* the peeking next slide sits mostly off-screen, so the scroll-reveal
     observer never fires for it — keep every slide visible in the slider */
  .hp-trio--slider .hp-trio-item.reveal{ opacity:1; transform:none; }
  .hp-trio--slider .hp-trio-cap{ margin-top:16px; padding:0 var(--pad); }
  /* pagination rule: centred, capped so it reads as a short line rather than
     stretching the full width of the section */
  .hp-mdots{ display:flex; justify-content:center; gap:0; margin:22px auto 0; max-width:min(300px,64vw); max-width:min(300px,50vw); }
  .hp-duo-imgs{ gap:10px; padding:10px; }
  .hp-promo{ height:70vh; min-height:440px; }
  /* Newsletter — House-of-CB mobile proportions.
     The heading drops from the 40px desktop size to a two/three-line block,
     and the sign-up stays a SINGLE underlined bar (field on the left, inline
     SIGN UP on the right) instead of stacking the button under the field. */
  .hp-news{ padding:64px 30px; }
  .hp-news-inner .eyebrow{ margin-bottom:12px; }
  .hp-news-inner .section-title{ font-size:26px; line-height:1.2; margin-bottom:16px; }
  .hp-news-inner p{ font-size:13.5px; line-height:1.75; margin-bottom:28px; }
  .hp-news-form{
    flex-direction:row; align-items:center; gap:10px;
    max-width:100%; border-bottom:1px solid var(--line-2);
  }
  /* borderless field so the form's own underline reads as the bar */
  .hp-news-form input{ min-width:0; background:transparent; border:0; padding:12px 0; font-size:14px; }
  .hp-news-form input:focus{ border:0; }
  /* text-only submit (the outline/box would eat the field's width at 320px) */
  .hp-news-form .btn{ padding:12px 0; font-size:11px; letter-spacing:0.16em; white-space:nowrap; }
  body.home .hp-news-form .btn-primary{ border:0 !important; }
  .hp-catgrid{ grid-template-columns:repeat(2,1fr); }
  /* Product showcase → swipe slider instead of a 2x2 grid. Cards keep the
     exact width they had in the grid (50% of the track = 2 in view) and every
     other style is untouched, so nothing about their appearance changes —
     the remaining two are reached by swiping rather than by wrapping. */
  .hp-showcase{
    display:flex; grid-template-columns:none; flex-wrap:nowrap;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .hp-showcase::-webkit-scrollbar{ display:none; }
  .hp-showcase .hp-sc-item{ flex:0 0 50%; scroll-snap-align:start; }
  /* one row now, so only the very first card sits flush against the edge;
     the nth-child(2n+1) rule from the tablet block would blank card 3's rule */
  .hp-showcase .hp-sc-item .hp-sc-media{ border-left-color:var(--line); }
  .hp-showcase .hp-sc-item:first-child .hp-sc-media{ border-left-color:transparent; }
  .hp-sc-body{ padding:12px 14px 18px; }
  .hp-sc-desc{ font-size:13px; }
  /* Memorable Moments keeps the portrait 3/4 crop on phones (the 1/1 base rule
     is a desktop treatment) so it matches The Edit's tiles in the slider */
  .hp-trio--square .hp-trio-media{ aspect-ratio:3/4; }

  .site-footer{
    padding-left:0;
    padding-right: 0;
  }
}

/* ---------- mobile header + sidebar menu ----------
   Placed last so it overrides the component base rules (source order). */
@media(max-width:620px){
  :root{ --hdr-h:68px; }
  /* Menu + Currency + Search on the LEFT, account/wishlist/bag on the RIGHT,
     logo absolutely centred so uneven side clusters can't push it off-centre */
  .header-grid{ display:flex; align-items:center; justify-content:space-between; position:relative; gap:8px; padding:0 16px; }
  .header-left{ gap:12px; padding-right:0; }
  .menu-trigger .bars{ display:flex; }
  .menu-trigger .hutil-txt, .header-search .hutil-txt{ display:none; } /* icon-only on mobile */
  .header-left .header-search{ display:inline-flex; } /* search back on the left (icon only) */
  .util-search-m{ display:none; }                      /* not needed in the right utils on mobile */
  .header-left .cur-chip .util-ico{ display:none; }    /* trim the currency chip to just the code */
  .hutil{ gap:0; }
  .logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); align-items:center; padding-top:0; }
  .logo-word{ font-size:17px; letter-spacing:0.14em; }
  .logo-tag{ font-size:7px; letter-spacing:0.34em; }
  .utils{ gap:13px; }
  .util-txt{ display:none; }
  .util-sep{ display:none; }
  /* counts become a compact bubble on the top-right of each icon */
  .util-wish, .util-bag{ position:relative; }
  .util-ct{ position:absolute; top:-5px; right:-7px; margin:0; min-width:14px; height:14px; padding:0 3px;
    display:flex; align-items:center; justify-content:center; box-sizing:border-box;
    background:var(--gold); color:#fff; border-radius:8px; font-size:9px; line-height:1; letter-spacing:0; }
  .util-ct::before, .util-ct::after{ content:none; }

  /* announcement — compact single line */
  .announce{ padding:9px 14px; font-size:12px; }

  /* full-width slide-out menu: 60% nav panel + 40% feature image (kept on mobile) */
  .menu-wrap{ width:100vw; max-width:100vw; }
  .menu-panel{ width:60%; min-width:0; }
  .menu-feature{ display:block; width:40%; min-width:0; }
  .menu-feature-cap{ padding:0 16px; bottom:6%; }
  .menu-feature-text{ font-size:13.5px; line-height:1.45; margin-bottom:12px; }
  .menu-feature-cta{ font-size:9px; letter-spacing:0.14em; }
  /* sidebar menu — tighter padding + type for the narrower half-width panel */
  .menu-top{ padding:18px 16px 4px; }
  .menu-main{ padding:10px 16px 2px; }
  .menu-feature-links,
  .menu-secondary,
  .menu-foot{ padding-left:16px; padding-right:16px; }
  .menu-row-head{ padding:6px 0; }
  .menu-row-head .label{ font-size:16px; letter-spacing:0.03em; color:var(--menu-label-color, var(--gold-soft)); }
  .menu-feat-link{ font-size:14px; }
  .menu-secondary a, .menu-sub a{ font-size:10px; }
}

/* =====================================================================
   PAGE LOADER
   Full-screen brand overlay shown until the page is ready (House-of-CB
   style: pale surface, centred wordmark). Markup: header.php →
   lh_loader_html(); behaviour: assets/js/loader.js; the --loader-* values
   come from Theme Options → Page Loader via lh_loader_css().
   ===================================================================== */
.lh-loader{
  position:fixed; inset:0; z-index:9990;
  display:flex; align-items:center; justify-content:center;
  background:var(--loader-bg, #fcf4f5);
  opacity:1; transition:opacity .6s ease;
}
.lh-loader.is-done{ opacity:0; pointer-events:none; }
.lh-loader.is-gone{ display:none; }
body.lh-loading{ overflow:hidden; }

/* `perspective` on the parent is what makes the mark read as a coin turning in
   space rather than a flat image being squashed — the near edge grows as it
   swings toward the viewer. Without it, rotateY only foreshortens. */
.lh-loader-inner{ display:flex; flex-direction:column; align-items:center; perspective:900px; }

.lh-loader-mark{
  display:block; width:var(--loader-w, 180px); max-width:56vw; height:auto;
  transform-style:preserve-3d; will-change:transform;
  animation:lh-loader-flip 2.2s ease-in-out infinite;
}
/* fallback when no image is set — the wordmark as type */
.lh-loader-text{
  width:auto; font-family:var(--serif); font-size:26px; letter-spacing:0.24em;
  color:var(--loader-accent, var(--gold));
}
/* Coin flip about the vertical axis, spinning right-to-left (positive rotateY
   swings the right edge away). Each half turn eases to a brief stop, so it
   lands like a flipped coin instead of whirring continuously. The back of the
   turn shows the mark mirrored — same as House of CB. */
@keyframes lh-loader-flip{
  0%       { transform:rotateY(0deg); }
  42%, 50% { transform:rotateY(180deg); }
  92%,100% { transform:rotateY(360deg); }
}

/* style: bar — hairline sweep under the mark */
.lh-loader-bar{
  position:relative; display:block; overflow:hidden;
  width:var(--loader-w, 180px); max-width:56vw; height:1px; margin-top:26px;
  background:rgba(130,32,62,0.18); /* fallback for no color-mix() */
  background:color-mix(in srgb, var(--loader-accent, #82203e) 18%, transparent);
}
.lh-loader-bar i{
  position:absolute; top:0; bottom:0; left:0; width:38%;
  background:var(--loader-accent, #82203e);
  animation:lh-loader-sweep 1.3s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes lh-loader-sweep{
  0%  { transform:translateX(-110%); }
  100%{ transform:translateX(370%); }
}

/* style: ring — thin spinner under the mark */
.lh-loader-ring{
  display:block; width:30px; height:30px; margin-top:28px; border-radius:50%;
  border:1px solid rgba(130,32,62,0.20); /* fallback for no color-mix() */
  border:1px solid color-mix(in srgb, var(--loader-accent, #82203e) 20%, transparent);
  border-top-color:var(--loader-accent, #82203e);
  animation:lh-loader-spin .9s linear infinite;
}
@keyframes lh-loader-spin{ to{ transform:rotate(360deg); } }

/* the mark holds still when the visitor asks for less motion */
@media (prefers-reduced-motion: reduce){
  .catnav-dock,
  .site-header.has-catnav.is-docked .catnav-dock{ transition:none; }
  .lh-loader-mark{ animation:none; opacity:1; transform:none; }
  .lh-loader-inner{ perspective:none; }
  .lh-loader-bar i, .lh-loader-ring{ animation-duration:2.4s; }
}
@media(max-width:620px){
  .lh-loader-mark{ max-width:62vw; }
  .lh-loader-bar{ max-width:62vw; }
}