/* ============================================================
   SITE-WIDE CHROME 2026 — universal scope
   Loaded by every page after reviews.css + glow-system.css.
   Overrides legacy masthead, nav, footer chrome.
   Cache-bust: bump ?v= in the link tag site-wide.
   ============================================================ */

html, body { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* ============================================================
   SITEWIDE ASPECT-RATIO TOKEN SYSTEM (added 2026-06-04)
   Per PHOTO-TREATMENT-AUDIT.md fix #1: one ratio per section,
   consistent across categories. Magazine standard.
   Usage: <img class="ag-img ag-img--portrait" style="--op: 50% 30%">
   ============================================================ */
:root {
  --ar-hero: 16 / 10;
  --ar-portrait: 4 / 5;
  --ar-card: 1 / 1;
  --ar-tile: 3 / 4;
  --ar-banner: 21 / 9;
}

.ag-img { display: block; width: 100%; height: auto; }
.ag-img--hero { aspect-ratio: var(--ar-hero); object-fit: cover; object-position: var(--op, center); }
.ag-img--portrait { aspect-ratio: var(--ar-portrait); object-fit: cover; object-position: var(--op, center); }
.ag-img--card { aspect-ratio: var(--ar-card); object-fit: cover; object-position: var(--op, center); }
.ag-img--tile { aspect-ratio: var(--ar-tile); object-fit: cover; object-position: var(--op, center); }
.ag-img--banner { aspect-ratio: var(--ar-banner); object-fit: cover; object-position: var(--op, center); }

/* KILL JS-INJECTED CRUFT site-wide */
.al-substrip,
.al-mega,
.al-mega-backdrop,
.al-search-btn { display: none !important; }

/* TRUST BAR — 26px */
.utility-bar {
  background: #000000 !important;
  color: rgba(255,255,255,0.78) !important;
  padding: 6px 0 !important;
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  border-bottom: 0 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
}
.utility-bar .wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}
.utility-bar .util-trust { color: rgba(255,255,255,0.88) !important; }
.utility-bar .util-right { display: flex !important; gap: 1.25rem !important; }
.utility-bar a {
  color: rgba(255,255,255,0.78) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  padding-bottom: 1px !important;
  transition: color 200ms ease, border-color 200ms ease !important;
}
.utility-bar a:hover {
  color: #9a6a4b !important;
  border-bottom-color: #9a6a4b !important;
}
@media (max-width: 520px) {
  .utility-bar { font-size: 11px !important; }
  .utility-bar .util-right { gap: 0.85rem !important; }
}

/* MASTHEAD — dark, 76px, tiny logo (inline-styled in HTML wins specificity) */
.masthead {
  background: #0E0B09 !important;
  color: #fff !important;
  padding: 12px 0 !important;
  border-bottom: 0 !important;
  text-align: center !important;
  min-height: 0 !important;
}
.masthead .wrap {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}
/* FLEX + absolute positioning so the logo is ALWAYS dead-centred,
   regardless of whether burger/search/legacy spans exist.
   The 1fr-grid approach kept letting hidden children push the logo. */
.masthead .masthead-grid {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  min-height: 52px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  gap: 0 !important;
}

/* Burger pinned RIGHT, search pinned left — out of logo flow */
.masthead .masthead-grid > .masthead-burger {
  position: absolute !important;
  right: 1rem !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.masthead .masthead-grid > .masthead-search-btn {
  position: absolute !important;
  left: 1rem !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Logo always centred via flex parent — works for all pages */
.masthead .masthead-grid > a,
.masthead .masthead-grid > .brand-lockup {
  margin: 0 auto !important;
}

/* Legacy: hide vol/issue, dek, and wordmark-rule everywhere */
.masthead .vol,
.masthead .dek,
.masthead .wordmark-rule { display: none !important; }

/* Legacy wordmark span: if the page hasn't been migrated to inline-style logo,
   shrink it down so the page still looks reasonable. */
.masthead .brand-lockup .wordmark {
  font-family: 'Playfair Display', 'Bodoni Moda', Didot, Georgia, serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: 0.005em !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.4em !important;
}
.masthead .brand-lockup .wordmark .the {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
  align-self: center !important;
  margin-bottom: 0 !important;
}
.masthead .brand-lockup .wordmark .glow {
  font-style: normal !important;
  font-weight: 500 !important;
  color: #fff !important;
}
.masthead .brand-lockup .wordmark .dot {
  color: #9a6a4b !important;
}
.masthead .brand-lockup {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-self: center !important;
  gap: 0 !important;
}

/* Burger + search buttons */
.masthead-burger,
.masthead-search-btn {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0.35rem !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
}
/* Legacy 3-span burger — neutralised. JS replaces inner with SVG icon. */
.masthead-burger span { display: none !important; }
.masthead-burger__icon {
  width: 22px !important;
  height: 22px !important;
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
  display: block !important;
  transition: opacity 180ms ease !important;
}
.masthead-burger:hover .masthead-burger__icon { opacity: 0.75 !important; }
@media (min-width: 760px) {
  .masthead-burger { display: none !important; }
}

/* PRIMARY NAV — 38px tall, dark, IDENTICAL to homepage on every page.
   Uses extra-specific selectors to defeat legacy reviews.css rules at
   lines 3477+3498 that injected 1.25rem 1.1rem padding + 56px min-height
   on each <a>, which made the nav balloon way wider than the homepage. */
.review-nav,
body .review-nav {
  background: #0E0B09 !important;
  color: #fff !important;
  padding: 8px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 0 !important;
  position: static !important;
  min-height: 0 !important;
}
.review-nav .wrap,
body .review-nav .wrap {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}
.review-nav .nav-links,
body .review-nav .nav-links {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.4rem !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 0 1rem !important;
  margin: 0 auto !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  min-height: 0 !important;
}
.review-nav .nav-links::-webkit-scrollbar,
body .review-nav .nav-links::-webkit-scrollbar { display: none !important; }
.review-nav .nav-links a,
body .review-nav .nav-links a {
  color: rgba(255,255,255,0.85) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  padding: 0.2rem 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  text-decoration: none !important;
  border: 0 !important;
  background: none !important;
  display: inline-block !important;
}
.review-nav .nav-links a:hover,
body .review-nav .nav-links a:hover { color: #9a6a4b !important; }
.review-nav .nav-links a[aria-current="page"],
body .review-nav .nav-links a[aria-current="page"] { color: #9a6a4b !important; }
.review-nav .nav-links a:first-child,
body .review-nav .nav-links a:first-child { color: rgba(255,255,255,0.85) !important; }
/* Kill the legacy "current page" underline from reviews.css */
.review-nav .nav-links a::after,
.review-nav .nav-links a::before,
body .review-nav .nav-links a::after,
body .review-nav .nav-links a::before { content: none !important; display: none !important; }

/* Kill any pseudo-element separators (dots, slashes, etc.) that legacy
   CSS may inject between nav items */
.review-nav a::before,
.review-nav a::after,
.review-nav .nav-links a::before,
.review-nav .nav-links a::after,
.review-nav .nav-links > *::before,
.review-nav .nav-links > *::after {
  content: none !important;
  display: none !important;
}

/* SECONDARY EDITORIAL NAV — 38px, dark variant */
.glow-subnav {
  background: #221A16 !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(229,201,169,0.12) !important;
  padding: 8px 0 !important;
}
.glow-subnav .wrap { max-width: 1280px !important; margin: 0 auto !important; padding: 0 1rem !important; }
.glow-subnav__links {
  display: flex !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.glow-subnav__links::-webkit-scrollbar { display: none !important; }
.glow-subnav__links a {
  color: rgba(229,201,169,0.78) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  padding: 0.15rem 0 !important;
  border-bottom: 1px solid transparent !important;
  text-decoration: none !important;
}
.glow-subnav__links a:hover {
  color: #fff !important;
  border-bottom-color: #9a6a4b !important;
}
.glow-subnav__lead {
  color: #9a6a4b !important;
  font-weight: 500 !important;
}

@media (max-width: 760px) {
  .review-nav .nav-links,
  .glow-subnav__links { justify-content: flex-start !important; padding: 0 1rem !important; }
}

/* HIDE LEGACY top-chrome / disclosure-bar if a page still has them
   (the migration script removes them, this is a safety net) */
.top-chrome,
.disclosure-bar { display: none !important; }

/* ====================================================================
   MOBILE MENU (2026) — single burger inside masthead; off-canvas drawer
   ==================================================================== */

/* Burger button visible on mobile, hidden above 760px (matches static rule
   above for .masthead-burger). Force a large hit target. */
.masthead-burger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  z-index: 2 !important;
}
@media (min-width: 760px) {
  .masthead-burger { display: none !important; }
}

/* KILL the legacy floating .gl-burger — we use the static masthead-burger
   now. Any orphan rendering of .gl-burger from old CSS must be hidden. */
.gl-burger {
  display: none !important;
}

/* ============================================================
   ELITE DRAWER — full-bleed editorial off-canvas (2026)
   Dark canvas. Canela Light nav. Hairline cream dividers.
   Big tap targets. Magazine-quality typography.
   ============================================================ */

.gl-drawer.gl-drawer-2026 {
  background: #0E0B09 !important;
  color: #fff !important;
  width: 100% !important;
  max-width: 420px !important;
  box-shadow: -24px 0 60px rgba(0,0,0,0.6) !important;
  overscroll-behavior: contain !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Sticky branded head — bigger logo, finer close */
.gl-drawer.gl-drawer-2026 .gl-drawer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(229,201,169,0.12) !important;
  background: #0E0B09 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}
.gl-drawer.gl-drawer-2026 .gl-drawer-close {
  color: rgba(255,255,255,0.7) !important;
  background: transparent !important;
  border: 0 !important;
  width: 44px !important;
  height: 44px !important;
  margin-right: -10px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 200ms ease !important;
}
.gl-drawer.gl-drawer-2026 .gl-drawer-close svg { width: 22px !important; height: 22px !important; }
.gl-drawer.gl-drawer-2026 .gl-drawer-close:hover { color: #9a6a4b !important; }

/* Section eyebrow — small caps + hairline rule, used in nav + utility */
.gl-drawer.gl-drawer-2026 .gl-drawer-eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(229,201,169,0.78) !important;
  margin: 26px 24px 16px !important;
}
.gl-drawer.gl-drawer-2026 .gl-drawer-eyebrow-line {
  display: block !important;
  width: 24px !important;
  height: 1px !important;
  background: rgba(229,201,169,0.45) !important;
}

/* Primary nav — Canela Light, big serif editorial links */
.gl-drawer.gl-drawer-2026 .gl-drawer-primary {
  padding: 0 0 8px !important;
  background: #0E0B09 !important;
  border: 0 !important;
}
.gl-drawer.gl-drawer-2026 .gl-flat-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 24px !important;
  min-height: 60px !important;
  font-family: var(--font-display, 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 1.65rem !important;
  letter-spacing: -0.005em !important;
  line-height: 1.1 !important;
  color: #fff !important;
  text-decoration: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(229,201,169,0.10) !important;
  background: transparent !important;
  transition: color 220ms ease, padding-left 280ms cubic-bezier(.2,.6,.2,1) !important;
}
.gl-drawer.gl-drawer-2026 .gl-flat-link:first-of-type { border-top: 1px solid rgba(229,201,169,0.10) !important; }
.gl-drawer.gl-drawer-2026 .gl-flat-link:last-child { border-bottom: 0 !important; }
.gl-drawer.gl-drawer-2026 .gl-flat-link:hover,
.gl-drawer.gl-drawer-2026 .gl-flat-link:focus-visible {
  color: #9a6a4b !important;
  padding-left: 30px !important;
}
.gl-drawer.gl-drawer-2026 .gl-flat-link:focus-visible {
  outline: 2px solid #9a6a4b !important;
  outline-offset: 2px !important;
}
.gl-drawer.gl-drawer-2026 .gl-flat-link:hover .arrow,
.gl-drawer.gl-drawer-2026 .gl-flat-link:focus-visible .arrow {
  color: #9a6a4b !important;
  opacity: 1 !important;
  transform: translateX(4px) !important;
}
.gl-drawer.gl-drawer-2026 .gl-flat-link:active { background: rgba(255,255,255,0.04) !important; }
.gl-drawer.gl-drawer-2026 .gl-flat-link[aria-current="page"] {
  color: #9a6a4b !important;
  font-style: italic !important;
}
.gl-drawer.gl-drawer-2026 .gl-flat-link .arrow {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.35) !important;
  opacity: 0.7 !important;
  font-style: normal !important;
  transition: color 220ms ease, transform 220ms ease, opacity 220ms ease !important;
}

/* Utility / standard section — at the bottom, calm */
.gl-drawer.gl-drawer-2026 .gl-drawer-utility {
  margin-top: auto !important;
  padding: 0 24px 28px !important;
  background: #0E0B09 !important;
  border-top: 1px solid rgba(229,201,169,0.10) !important;
}
.gl-drawer.gl-drawer-2026 .gl-drawer-utility .gl-drawer-eyebrow { margin: 22px 0 14px !important; }
.gl-drawer.gl-drawer-2026 .gl-drawer-utility .row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 18px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
}
.gl-drawer.gl-drawer-2026 .gl-drawer-utility a {
  color: rgba(255,255,255,0.78) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  padding-bottom: 1px !important;
  width: max-content !important;
  transition: color 200ms ease, border-color 200ms ease !important;
}
.gl-drawer.gl-drawer-2026 .gl-drawer-utility a:hover,
.gl-drawer.gl-drawer-2026 .gl-drawer-utility a:active {
  color: #9a6a4b !important;
  border-bottom-color: #9a6a4b !important;
}

/* Trust line — quiet authority footer */
.gl-drawer.gl-drawer-2026 .gl-drawer-trust {
  font-family: var(--font-display, 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.55) !important;
  margin: 22px 0 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(229,201,169,0.08) !important;
  max-width: 28ch !important;
}

/* Backdrop a touch darker over the new dark chrome */
.gl-drawer-open .gl-backdrop { background: rgba(0,0,0,0.6) !important; }

/* Lock body scroll while drawer open (iOS-safe) */
body.gl-drawer-open { position: fixed !important; width: 100% !important; overflow: hidden !important; }

/* ====================================================================
   MOBILE OVERRIDES (≤760px) — brutal stripping. Less is more.
   ==================================================================== */

@media (max-width: 760px) {

  /* 1. UTILITY BAR — kill entirely on mobile. The trust message is real
        estate noise on a small screen. Repeat it inside the drawer footer
        instead if needed. */
  .utility-bar { display: none !important; }

  /* 2. MASTHEAD — only burger + logo. No search icon (search is a desktop
        nicety; on mobile users tap into the category they want). */
  .masthead { padding: 10px 0 !important; }
  .masthead .masthead-grid { min-height: 48px !important; padding: 0 0.5rem !important; }
  .masthead-burger { right: 0.5rem !important; left: auto !important; }
  .masthead-search-btn { display: none !important; }

  /* 3. KILL desktop nav rows on mobile — the burger drawer IS the nav.
        Two scrollable horizontal rows of pill-text on mobile is the worst
        of both worlds. Hide them. */
  .review-nav,
  .glow-subnav { display: none !important; }
}

/* ====================================================================
   DRAWER MOBILE-SPECIFIC POLISH — clean list, big tap targets
   ==================================================================== */

@media (max-width: 760px) {
  .gl-drawer.gl-drawer-2026 { max-width: 88vw !important; }
  .gl-drawer.gl-drawer-2026 .gl-drawer-head {
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .gl-drawer.gl-drawer-2026 .gl-flat-link {
    padding: 18px 20px !important;
    min-height: 60px !important;
    font-size: 1.25rem !important;
  }
  .gl-drawer.gl-drawer-2026 .gl-drawer-primary { padding: 4px 0 8px !important; }
  /* On mobile, hide the editorial section in the drawer — the categories
     are the priority. Less to scroll, faster to a destination. */
  .gl-drawer.gl-drawer-2026 .gl-drawer-section { display: none !important; }
  .gl-drawer.gl-drawer-2026 .gl-drawer-utility { padding: 18px 20px !important; }
  .gl-drawer.gl-drawer-2026 .gl-drawer-utility .row { gap: 8px 16px !important; }
}

/* ====================================================================
   GLOW NAV 2026 (rebuild · 28 May 2026)
   Five-item top nav (Beauty / Wellness / Places / Brands / Awards)
   ELLE-pattern full-screen mobile drawer with accordions
   Built per /_strategy/navigation-rebuild.md
   Tokens: --gb-porcelain #ffffff, --gb-charcoal #171514,
           --gb-near-black #0D0D0D, --gb-plum #5B2634,
           --gb-divider #DDD7CF
   ==================================================================== */

:root {
  --gb-porcelain: #ffffff;
  --gb-stone:     #f4f4f5;
  --gb-divider:   #DDD7CF;
  --gb-charcoal:  #171514;
  --gb-near-black:#0D0D0D;
  --gb-plum:      #5B2634;
  --gb-blush:     #E8DDE1;
}

/* --------------------------------------------------------------------
   DESKTOP NAV (.gnav-*) — replaces the inner content of .review-nav
   on >= 980px. Inherits the dark background bar from .review-nav.
   The legacy .nav-links is removed from the DOM entirely by site.js,
   so the dual-row glitch can never happen.
   -------------------------------------------------------------------- */

@media (min-width: 980px) {
  body .review-nav { position: relative !important; }
  body .review-nav .nav-links { display: none !important; }
  body .review-nav .gnav { display: flex !important; }
}

.gnav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 40px);
  position: relative;
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
}

.gnav__item {
  position: static; /* megapanel anchors to .review-nav, not the item */
}

.gnav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 0;
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border: 0;
  background: transparent;
  white-space: nowrap;
  position: relative;
  transition: color 200ms ease;
}
.gnav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 6px;
  height: 1px;
  background: var(--gb-plum, #5B2634);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 240ms cubic-bezier(0.22,0.61,0.36,1);
}
.gnav__link:hover,
.gnav__link:focus-visible,
.gnav__item.is-open > .gnav__link,
.gnav__link[aria-current="page"] {
  color: #fff;
}
.gnav__link:focus-visible {
  outline: 2px solid #9a6a4b;
  outline-offset: 3px;
  border-radius: 2px;
}
.gnav__link:hover::after,
.gnav__link:focus-visible::after,
.gnav__item.is-open > .gnav__link::after,
.gnav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Places gets a quiet 4px plum dot suffix — editorial flag, not a badge */
.gnav__link--places::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gb-plum, #5B2634);
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ------------------------------------------------------------------
   MEGAPANEL — single full-width strip beneath the nav row (Allure pattern).
   Lives inside .review-nav as a sibling of .wrap. Spans full viewport
   width. Content populated by JS on hover/focus, reused per item.
   ------------------------------------------------------------------ */
.gnav__megapanel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--gb-near-black, #0D0D0D);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 32px -18px rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms;
  z-index: 50;
}
.gnav__megapanel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 200ms ease-out 60ms, transform 220ms cubic-bezier(0.22,0.61,0.36,1) 60ms, visibility 0s linear 0s;
}
.gnav__megapanel-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(40px, 4.5vw, 56px) clamp(28px, 4vw, 48px);
}

.gnav__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
  gap: 36px 72px;
  justify-content: flex-start;
}
.gnav__cols--single {
  grid-template-columns: minmax(260px, max-content);
}

.gnav__col {
  min-width: 220px;
}

/* Column header — bold UPPERCASE with hairline under (Allure-style) */
.gnav__col-label {
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.gnav__sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gnav__sub-list li { margin: 0; }
.gnav__sub-list a {
  display: block;
  padding: 11px 0;
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  border: 0;
  background: transparent;
  transition: color 180ms ease, padding-left 220ms ease;
}
.gnav__sub-list a:hover,
.gnav__sub-list a:focus-visible {
  color: #fff;
  padding-left: 6px;
}
.gnav__sub-list a:focus-visible {
  outline: 2px solid #9a6a4b;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------
   BRANDS MEGAPANEL — left: primary + A-Z grid · right: editorial cards
   ------------------------------------------------------------------ */
.gnav__megapanel-inner--brands {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(36px, 4vw, 48px) clamp(28px, 4vw, 40px);
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: clamp(48px, 5vw, 80px);
  align-items: start;
}
.gnav__brands-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
@media (max-width: 1080px) {
  .gnav__megapanel-inner--brands { grid-template-columns: 1fr; gap: 32px; max-width: 720px; }
}

/* Primary links (All Brands A-Z, Featured Brands) */
.gnav__brands-primary {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gnav__brands-primary li {
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.gnav__brands-primary li:last-child { border-bottom: 0; }
.gnav__brands-primary a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-family: 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.005em;
  color: #fff;
  text-decoration: none;
  border: 0;
  background: transparent;
  transition: color 200ms ease, padding-left 220ms ease;
}
.gnav__brands-primary a:hover,
.gnav__brands-primary a:focus-visible {
  color: var(--gb-blush, #E8DDE1);
  padding-left: 6px;
}
.gnav__brands-primary a:focus-visible {
  outline: 2px solid #9a6a4b;
  outline-offset: 2px;
  border-radius: 2px;
}
.gnav__brands-arrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  font-style: normal;
  color: rgba(255,255,255,0.35);
  transition: color 200ms ease, transform 220ms ease;
}
.gnav__brands-primary a:hover .gnav__brands-arrow {
  color: #fff;
  transform: translateX(6px);
}

/* "Browse by letter" eyebrow */
.gnav__brands-alpha-label {
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 4px 0 -8px;
  padding-bottom: 0;
  border-bottom: 0;
  text-align: center;
}

/* A-Z + # letter grid — generous, balanced, ELLE-grade */
.gnav__brands-alpha {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
  justify-items: stretch;
}
.gnav__brands-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 4px;
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  border: 0;
  background: transparent;
  border-radius: 2px;
  transition: color 180ms ease, background 180ms ease;
}
.gnav__brands-letter:hover,
.gnav__brands-letter:focus-visible {
  color: #fff;
  background: rgba(255,255,255,0.08);
}
.gnav__brands-letter:focus-visible {
  outline: 2px solid #9a6a4b;
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 760px) {
  .gnav__brands-alpha { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* Featured category cards — editorial pattern matching homepage Index */
.gnav__brands-featured {
  min-width: 0;
}
.gnav__brands-featured-label {
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 18px;
}
.gnav__brands-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 20px;
}
@media (max-width: 1080px) {
  .gnav__brands-cards { grid-template-columns: repeat(3, 1fr); gap: 18px 14px; }
}
@media (max-width: 720px) {
  .gnav__brands-cards { grid-template-columns: repeat(2, 1fr); }
}
.gnav__brands-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  border: 0;
  background: transparent;
}
.gnav__brands-card-img {
  display: block;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.05);
  background-repeat: no-repeat;
  width: 100%;
  transition: opacity 220ms ease;
}
.gnav__brands-card:hover .gnav__brands-card-img,
.gnav__brands-card:focus-visible .gnav__brands-card-img {
  opacity: 0.85;
}
.gnav__brands-card-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.gnav__brands-card-num {
  font-family: 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}
.gnav__brands-card-name {
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  transition: color 180ms ease;
}
.gnav__brands-card:hover .gnav__brands-card-name {
  color: var(--gb-blush, #E8DDE1);
}

/* ------------------------------------------------------------------
   PLACES MEGAPANEL — 4-column premium discovery menu
   Columns: Browse by type / Popular treatments / Popular cities / Featured
   Hierarchy: eyebrow caps → primary list (italic-serif) → utility block
   ------------------------------------------------------------------ */
.gnav__megapanel-inner--places-mega {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(40px, 4.5vw, 56px) clamp(28px, 4vw, 48px) clamp(28px, 3vw, 36px);
}

.gnav__pm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.25fr;
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}
.gnav__pm-grid > .gnav__pm-col + .gnav__pm-col {
  padding-left: clamp(20px, 2vw, 32px);
  border-left: 1px solid rgba(255,255,255,0.08);
}

@media (max-width: 1080px) {
  .gnav__pm-grid { grid-template-columns: 1fr 1fr; gap: 32px 36px; }
  .gnav__pm-grid > .gnav__pm-col + .gnav__pm-col { padding-left: 0; border-left: 0; }
  .gnav__pm-col--featured { grid-column: 1 / -1; }
}

.gnav__pm-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ---------- Column eyebrow ---------- */
.gnav__pm-eyebrow {
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 4px;
}
.gnav__pm-eyebrow--quiet {
  color: rgba(255,255,255,0.4);
}

/* ---------- Primary link list ---------- */
.gnav__pm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.gnav__pm-list li { margin: 0; }
.gnav__pm-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  border: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: padding-left 220ms cubic-bezier(0.22,0.61,0.36,1);
}
.gnav__pm-list a:hover,
.gnav__pm-list a:focus-visible {
  padding-left: 4px;
}
.gnav__pm-list a:focus-visible {
  outline: 2px solid #9a6a4b;
  outline-offset: 2px;
  border-radius: 2px;
}
.gnav__pm-list li:last-child a { border-bottom: 0; }

/* Match Beauty / Wellness dropdown link style — Inter Sans UPPERCASE small caps */
.gnav__pm-link {
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.76rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  transition: color 200ms ease;
}
.gnav__pm-list a:hover .gnav__pm-link,
.gnav__pm-list a:focus-visible .gnav__pm-link {
  color: #fff;
}

.gnav__pm-arrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.25);
  transition: color 200ms ease, transform 220ms ease;
  flex-shrink: 0;
}
.gnav__pm-list a:hover .gnav__pm-arrow,
.gnav__pm-list a:focus-visible .gnav__pm-arrow {
  color: #fff;
  transform: translateX(4px);
}

/* ---------- Utility block (Explore near you / Popular searches) ---------- */
.gnav__pm-util {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  color: rgba(255,255,255,0.78);
  transition: color 180ms ease, padding-left 200ms ease;
}
.gnav__pm-util:hover,
.gnav__pm-util:focus-visible {
  color: #fff;
  padding-left: 4px;
}
.gnav__pm-util:focus-visible {
  outline: 2px solid #9a6a4b;
  outline-offset: 2px;
  border-radius: 2px;
}
.gnav__pm-util-title {
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.gnav__pm-util:hover .gnav__pm-util-title { color: #fff; }
.gnav__pm-util-sub {
  font-family: 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.55);
}

/* ---------- Featured column ---------- */
.gnav__pm-col--featured { gap: 18px; }
.gnav__pm-feature {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: #fff;
  border: 0;
  background: transparent;
  transition: color 180ms ease;
}
.gnav__pm-feature-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,0.04);
  transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1), opacity 220ms ease;
  will-change: transform;
}
.gnav__pm-feature {
  overflow: hidden;
}
.gnav__pm-feature:hover .gnav__pm-feature-img,
.gnav__pm-feature:focus-visible .gnav__pm-feature-img {
  transform: scale(1.025);
}
.gnav__pm-feature-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 2px;
}
.gnav__pm-feature-title {
  font-family: 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: #fff;
}
.gnav__pm-feature-body-text {
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  max-width: 36ch;
}
.gnav__pm-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  width: max-content;
  transition: border-color 200ms ease, gap 220ms ease;
}
.gnav__pm-feature:hover .gnav__pm-feature-cta,
.gnav__pm-feature:focus-visible .gnav__pm-feature-cta {
  border-bottom-color: #fff;
  gap: 10px;
}

/* ---------- Partners pathway ---------- */
.gnav__pm-partners {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gnav__pm-partners-title {
  font-family: 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.78);
  margin: 0;
}
.gnav__pm-partners-cta {
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  width: max-content;
  margin-top: 4px;
  transition: border-color 200ms ease, gap 220ms ease;
}
.gnav__pm-partners-cta:hover,
.gnav__pm-partners-cta:focus-visible {
  border-bottom-color: #fff;
  gap: 10px;
}
.gnav__pm-partners-cta:focus-visible {
  outline: 2px solid #9a6a4b;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Tagline strip ---------- */
.gnav__pm-tagline {
  text-align: center;
  margin: clamp(28px, 3vw, 40px) auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.55);
  max-width: 720px;
  letter-spacing: -0.005em;
}

@media (max-width: 720px) {
  .gnav__pm-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ====================================================================
   MOBILE DRAWER — sophistication pass v2
   ==================================================================== */

/* Tagline under the wordmark in the top band */
.gdrawer__tagline {
  display: block;
  font-family: 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
  margin-top: 2px;
  text-align: center;
}

/* Section eyebrow used above utility / region / legal blocks */
.gdrawer__eyebrow {
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(23,21,20,0.42);
  margin: 16px 22px 8px;
  padding: 0;
  border: 0;
}

/* Quiet plum left-accent on hover/open for accordion summaries */
.gdrawer__row > summary {
  position: relative;
  padding-left: 22px;
}
.gdrawer__row > summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px;
  height: 22px;
  background: var(--gb-plum, #5B2634);
  transform-origin: center;
  transition: transform 240ms cubic-bezier(0.22,0.61,0.36,1);
}
.gdrawer__row > summary:hover::before,
.gdrawer__row[open] > summary::before {
  transform: translateY(-50%) scaleY(1);
}
.gdrawer__row--places::before { display: none; } /* the existing Places bar handles this row */

/* Finer dividers everywhere */
.gdrawer__row,
.gdrawer__util li,
.gdrawer__region {
  border-color: rgba(221,215,202,0.55) !important;
}

/* Subtle accordion expand animation — slightly smoother */
.gdrawer__sub {
  animation: gdrawerSubFade 280ms cubic-bezier(0.22,0.61,0.36,1);
}
@keyframes gdrawerSubFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bottom band — tighter still */
.gdrawer__bottom { padding: 12px 22px 16px; gap: 8px; }
.gdrawer__social a { width: 28px; height: 28px; }
.gdrawer__social svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------
   ELLE-PATTERN MOBILE DRAWER (.gdrawer-*)
   Full-screen, black header band, white body, accordion rows.
   Replaces the existing .gl-drawer.gl-drawer-2026 markup.
   Visible only when body has .gdrawer-open class.
   -------------------------------------------------------------------- */

.gdrawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13,13,13,0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 9998;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
body.gdrawer-open .gdrawer-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms ease, visibility 0s linear 0s;
}

.gdrawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  max-width: 380px;
  background: #fff;
  color: var(--gb-charcoal);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.55,0,0.45,1);
  display: block;            /* was flex column */
  overflow-y: auto;          /* whole drawer scrolls */
  -webkit-overflow-scrolling: touch;
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
}
/* Header sticks while the rest scrolls underneath */
.gdrawer__top { position: sticky !important; top: 0 !important; z-index: 5; }
/* Signature + bottom band flow naturally with content (no longer pinned) */
.gdrawer__signature,
.gdrawer__bottom { flex-shrink: 1 !important; margin-top: 0 !important; }
.gdrawer__signature { margin-top: 1.5rem !important; }
.gdrawer__bottom { padding-top: 1rem !important; padding-bottom: 2.5rem !important; }
body.gdrawer-open .gdrawer {
  transform: translateX(0);
  transition: transform 320ms cubic-bezier(0.22,0.61,0.36,1);
}

/* Top band — slim black header: close X (left), wordmark (centre), search (right) */
.gdrawer__top {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  background: var(--gb-near-black);
  color: #fff;
  padding: 10px 14px;
  min-height: 48px;
  flex-shrink: 0;
}
.gdrawer__close,
.gdrawer__top-search {
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: 0;
  transition: color 180ms ease;
}
.gdrawer__close:hover,
.gdrawer__top-search:hover { color: #fff; }
.gdrawer__close svg,
.gdrawer__top-search svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.25; }
.gdrawer__wordmark {
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}
.gdrawer__wordmark img { height: 22px; width: auto; display: block; }
.gdrawer__wordmark-text {
  font-family: 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: #fff;
}

/* Scrollable body */
.gdrawer__body {
  flex: 1;
  overflow-y: auto;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

/* Search row — tighter, more refined */
.gdrawer__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--gb-porcelain);
  border-bottom: 1px solid var(--gb-divider);
}
.gdrawer__search-icon {
  width: 15px; height: 15px;
  color: rgba(23,21,20,0.5);
  flex-shrink: 0;
}
.gdrawer__search input {
  flex: 1;
  background: transparent;
  border: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--gb-charcoal);
  padding: 4px 0;
  min-height: 32px;
}
.gdrawer__search input:focus-visible {
  outline: 2px solid var(--gb-plum, #5B2634);
  outline-offset: 2px;
  border-radius: 2px;
}
.gdrawer__search input::placeholder {
  color: rgba(23,21,20,0.42);
  font-style: normal;
}

/* Accordion rows — compact, editorial */
.gdrawer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
}
.gdrawer__row {
  border-bottom: 1px solid var(--gb-divider);
  position: relative;
}
.gdrawer__row--places::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--gb-plum);
}
.gdrawer__row > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  min-height: 48px;
  cursor: pointer;
  user-select: none;
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--gb-charcoal);
  transition: background 180ms ease, color 180ms ease;
}
.gdrawer__row > summary::-webkit-details-marker { display: none; }
.gdrawer__row > summary:hover,
.gdrawer__row > summary:focus-visible {
  background: var(--gb-porcelain);
}
.gdrawer__row > summary:focus-visible {
  outline: 2px solid var(--gb-plum, #5B2634);
  outline-offset: -2px;
  border-radius: 2px;
}
.gdrawer__chev {
  width: 12px; height: 12px;
  color: rgba(23,21,20,0.35);
  transition: transform 280ms cubic-bezier(0.22,0.61,0.36,1), color 200ms ease;
  flex-shrink: 0;
  stroke-width: 1.6;
}
.gdrawer__row[open] > summary {
  color: var(--gb-plum);
}
.gdrawer__row[open] > summary .gdrawer__chev {
  transform: rotate(180deg);
  color: var(--gb-plum);
}
.gdrawer__sub {
  list-style: none;
  margin: 0;
  padding: 4px 22px 12px 34px;
  background: var(--gb-porcelain);
  border-top: 1px solid var(--gb-divider);
}
.gdrawer__sub li { margin: 0; }
.gdrawer__sub a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(23,21,20,0.78);
  text-decoration: none;
  border: 0;
  transition: color 180ms ease, padding-left 200ms ease;
}
.gdrawer__sub a:hover,
.gdrawer__sub a:focus-visible {
  color: var(--gb-plum);
  padding-left: 4px;
}
.gdrawer__sub a:focus-visible {
  outline: 2px solid var(--gb-plum, #5B2634);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Utility rows — quieter, smaller */
.gdrawer__util {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border-top: 1px solid var(--gb-divider);
}
.gdrawer__util li { border-bottom: 1px solid var(--gb-divider); }
.gdrawer__util li:last-child { border-bottom: 0; }
.gdrawer__util a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  min-height: 40px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gb-charcoal);
  text-decoration: none;
  border: 0;
  transition: color 180ms ease;
}
.gdrawer__util a:hover { color: var(--gb-plum); }
.gdrawer__util svg {
  width: 14px; height: 14px;
  color: rgba(23,21,20,0.45);
  flex-shrink: 0;
  stroke-width: 1.4;
}

/* Region selector — tight, fine */
.gdrawer__region {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  min-height: 40px;
  background: #fff;
  border-top: 1px solid var(--gb-divider);
  border-bottom: 1px solid var(--gb-divider);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(23,21,20,0.55);
}
.gdrawer__region svg {
  width: 13px; height: 13px;
  color: rgba(23,21,20,0.45);
  stroke-width: 1.4;
}
.gdrawer__region-opts { display: inline-flex; gap: 10px; margin-left: auto; }
.gdrawer__region-opts button {
  background: transparent;
  border: 0;
  padding: 4px 2px;
  font: inherit;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: rgba(23,21,20,0.5);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.gdrawer__region-opts button[aria-pressed="true"] {
  color: var(--gb-plum);
  border-bottom-color: var(--gb-plum);
}

/* Bottom band — slim porcelain footer */
.gdrawer__bottom {
  background: var(--gb-porcelain);
  padding: 14px 22px 18px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--gb-divider);
}
.gdrawer__social {
  display: flex;
  gap: 14px;
  align-items: center;
}
.gdrawer__social a {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(23,21,20,0.7);
  border: 0;
  text-decoration: none;
  transition: color 180ms ease;
}
.gdrawer__social a:hover { color: var(--gb-plum); }
.gdrawer__social svg { width: 15px; height: 15px; stroke-width: 1.4; }
.gdrawer__legal {
  display: flex;
  gap: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gdrawer__legal a {
  color: rgba(23,21,20,0.5);
  text-decoration: none;
  border: 0;
  transition: color 180ms ease;
}
.gdrawer__legal a:hover { color: var(--gb-plum); }

/* Lock body scroll while drawer is open */
body.gdrawer-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .gdrawer,
  .gdrawer-backdrop,
  .gnav__link::after,
  .gnav__panel,
  .gdrawer__chev,
  .gdrawer__sub a {
    transition: none !important;
  }
}

/* Hide the legacy gl-drawer-2026 when the new gdrawer is in play */
body.has-gdrawer .gl-drawer.gl-drawer-2026,
body.has-gdrawer .gl-backdrop { display: none !important; }

/* ====================================================================
   GDRAWER FEATURED CARD — top-of-drawer Rhode profile hero
   Added 29 May 2026 per Jackson — sits above the search row.
   ==================================================================== */
.gdrawer__feature {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--gb-near-black, #0D0D0D);
  border: 0;
}
.gdrawer__feature-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 700ms cubic-bezier(0.22,0.61,0.36,1);
  will-change: transform;
}
.gdrawer__feature:hover .gdrawer__feature-img,
.gdrawer__feature:active .gdrawer__feature-img {
  transform: scale(1.03);
}
.gdrawer__feature-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0)    52%,
    rgba(0,0,0,0.22) 78%,
    rgba(0,0,0,0.5)  100%);
}
.gdrawer__feature-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #fff;
}
.gdrawer__feature-label {
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.gdrawer__feature-name {
  font-family: 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.2rem, 9vw, 3rem);
  line-height: 0.94;
  letter-spacing: -0.018em;
  color: #fff;
  text-shadow: 0 1px 20px rgba(0,0,0,0.18);
  margin: 0;
}
.gdrawer__feature-line {
  font-family: 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.3;
  color: rgba(255,255,255,0.85);
  margin: 2px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .gdrawer__feature-img { transition: none !important; }
}

/* =====================================================================
   MOBILE DRAWER — SOPHISTICATION + MOTION PASS · 28 May 2026
   Premium polish over the existing .gdrawer base. Layered, not destructive.
   ===================================================================== */

/* Ease + variables */
.gdrawer {
  --gd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gd-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gd-stagger: 36ms;
}

/* Smoother backdrop blur + deeper darken */
.gdrawer-backdrop,
.gl-backdrop {
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  background: rgba(13,13,13,0.42) !important;
}

/* Drawer entry feels lighter — slight scale + opacity */
.gdrawer {
  transform: translateX(100%) scale(0.985);
  opacity: 0;
  transition:
    transform 460ms var(--gd-ease),
    opacity 320ms var(--gd-ease);
}
body.gdrawer-open .gdrawer {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* Top header — refined */
.gdrawer__top {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Wordmark gets a tiny entry pulse */
@keyframes gdrawer-wordmark-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.gdrawer-open .gdrawer__wordmark {
  animation: gdrawer-wordmark-in 540ms var(--gd-ease) 80ms both;
}

/* Body content cascade on open — each row slides in */
body.gdrawer-open .gdrawer__feature,
body.gdrawer-open .gdrawer__search,
body.gdrawer-open .gdrawer__nav > .gdrawer__row,
body.gdrawer-open .gdrawer__util > li,
body.gdrawer-open .gdrawer__region,
body.gdrawer-open .gdrawer__bottom {
  animation: gdrawer-row-in 540ms var(--gd-ease) both;
}
body.gdrawer-open .gdrawer__feature        { animation-delay: 120ms; }
body.gdrawer-open .gdrawer__search         { animation-delay: 180ms; }
body.gdrawer-open .gdrawer__nav > .gdrawer__row:nth-child(1) { animation-delay: 220ms; }
body.gdrawer-open .gdrawer__nav > .gdrawer__row:nth-child(2) { animation-delay: 260ms; }
body.gdrawer-open .gdrawer__nav > .gdrawer__row:nth-child(3) { animation-delay: 300ms; }
body.gdrawer-open .gdrawer__nav > .gdrawer__row:nth-child(4) { animation-delay: 340ms; }
body.gdrawer-open .gdrawer__nav > .gdrawer__row:nth-child(5) { animation-delay: 380ms; }
body.gdrawer-open .gdrawer__util > li:nth-child(1) { animation-delay: 440ms; }
body.gdrawer-open .gdrawer__util > li:nth-child(2) { animation-delay: 480ms; }
body.gdrawer-open .gdrawer__util > li:nth-child(3) { animation-delay: 520ms; }
body.gdrawer-open .gdrawer__region                 { animation-delay: 560ms; }
body.gdrawer-open .gdrawer__bottom                 { animation-delay: 600ms; }
@keyframes gdrawer-row-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Eyebrow / section heading refined */
.gdrawer__eyebrow {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(23,21,20,0.4) !important;
  font-weight: 500 !important;
  padding: 18px 22px 8px !important;
  position: relative !important;
}
.gdrawer__eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: rgba(23,21,20,0.25);
  vertical-align: middle;
  margin-right: 10px;
  transform: translateY(-1px);
}

/* Primary rows — bigger touch targets + serif italic eyebrow accent on open */
.gdrawer__row > summary {
  min-height: 56px !important;
  padding: 16px 22px !important;
  position: relative;
  transition: background 220ms var(--gd-ease), color 220ms var(--gd-ease), padding 280ms var(--gd-ease) !important;
}
.gdrawer__row > summary:active {
  background: rgba(23,21,20,0.04);
  transform: scale(0.998);
}

/* Active row — left vertical bar accent (replaces flat plum-text-only state) */
.gdrawer__row[open] > summary {
  background: linear-gradient(90deg, rgba(91,38,52,0.04) 0%, transparent 60%);
  padding-left: 28px !important;
}
.gdrawer__row[open] > summary::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 32px;
  background: var(--gb-plum, #5B2634);
  border-radius: 0 2px 2px 0;
  animation: gdrawer-bar-in 420ms var(--gd-spring) both;
}
@keyframes gdrawer-bar-in {
  from { height: 0; opacity: 0; }
  to   { height: 32px; opacity: 1; }
}

/* Chevron — refined hover */
.gdrawer__chev {
  transition: transform 380ms var(--gd-ease), color 220ms ease !important;
}
.gdrawer__row[open] > summary .gdrawer__chev {
  transform: rotate(180deg) scale(1.08) !important;
}

/* Submenu — smooth slide reveal + staggered sub-items */
.gdrawer__sub {
  background: linear-gradient(180deg, rgba(248,246,242,0.95) 0%, rgba(248,246,242,0.7) 100%) !important;
  border-top: 1px solid rgba(23,21,20,0.04) !important;
  padding: 8px 22px 14px 28px !important;
  overflow: hidden;
}
.gdrawer__row[open] > .gdrawer__sub {
  animation: gdrawer-sub-in 460ms var(--gd-ease) both;
}
@keyframes gdrawer-sub-in {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; padding-top: 0; padding-bottom: 0; }
  60%  { opacity: 1; max-height: 800px; }
  to   { opacity: 1; transform: translateY(0); max-height: 800px; }
}

/* Each sub-item slides in with cascade */
.gdrawer__row[open] > .gdrawer__sub li {
  animation: gdrawer-li-in 420ms var(--gd-ease) both;
}
.gdrawer__row[open] > .gdrawer__sub li:nth-child(1)  { animation-delay: calc(var(--gd-stagger) * 1); }
.gdrawer__row[open] > .gdrawer__sub li:nth-child(2)  { animation-delay: calc(var(--gd-stagger) * 2); }
.gdrawer__row[open] > .gdrawer__sub li:nth-child(3)  { animation-delay: calc(var(--gd-stagger) * 3); }
.gdrawer__row[open] > .gdrawer__sub li:nth-child(4)  { animation-delay: calc(var(--gd-stagger) * 4); }
.gdrawer__row[open] > .gdrawer__sub li:nth-child(5)  { animation-delay: calc(var(--gd-stagger) * 5); }
.gdrawer__row[open] > .gdrawer__sub li:nth-child(6)  { animation-delay: calc(var(--gd-stagger) * 6); }
.gdrawer__row[open] > .gdrawer__sub li:nth-child(7)  { animation-delay: calc(var(--gd-stagger) * 7); }
.gdrawer__row[open] > .gdrawer__sub li:nth-child(8)  { animation-delay: calc(var(--gd-stagger) * 8); }
.gdrawer__row[open] > .gdrawer__sub li:nth-child(9)  { animation-delay: calc(var(--gd-stagger) * 9); }
.gdrawer__row[open] > .gdrawer__sub li:nth-child(10) { animation-delay: calc(var(--gd-stagger) * 10); }
@keyframes gdrawer-li-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Sub-item link polish — subtle bullet + larger touch target */
.gdrawer__sub a {
  min-height: 42px !important;
  padding: 10px 0 10px 16px !important;
  font-size: 0.86rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
  color: rgba(23,21,20,0.78) !important;
  position: relative;
  transition: color 220ms var(--gd-ease), padding-left 280ms var(--gd-ease), transform 220ms var(--gd-ease) !important;
}
.gdrawer__sub a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 1px;
  background: rgba(23,21,20,0.25);
  transition: width 280ms var(--gd-ease), background 220ms var(--gd-ease);
}
.gdrawer__sub a:hover,
.gdrawer__sub a:focus-visible,
.gdrawer__sub a:active {
  color: var(--gb-plum, #5B2634) !important;
  padding-left: 22px !important;
}
.gdrawer__sub a:hover::before,
.gdrawer__sub a:focus-visible::before,
.gdrawer__sub a:active::before {
  width: 12px;
  background: var(--gb-plum, #5B2634);
}

/* Utility rows — quieter, more spacious */
.gdrawer__util a {
  min-height: 48px !important;
  padding: 13px 22px !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  transition: color 220ms var(--gd-ease), background 220ms var(--gd-ease), padding-left 240ms var(--gd-ease) !important;
}
.gdrawer__util a:hover,
.gdrawer__util a:active {
  color: var(--gb-plum, #5B2634);
  background: rgba(91,38,52,0.03);
  padding-left: 28px !important;
}
.gdrawer__util a svg,
.gdrawer__util a .icon {
  opacity: 0.5;
  transition: opacity 220ms ease, transform 240ms var(--gd-ease);
  flex-shrink: 0;
}
.gdrawer__util a:hover svg,
.gdrawer__util a:active svg {
  opacity: 1;
  transform: translateX(2px);
}

/* Region selector — segmented control feel */
.gdrawer__region {
  padding: 14px 22px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--gb-divider, #E8E3DC);
}
.gdrawer__region-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.66rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(23,21,20,0.5) !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gdrawer__region-opts {
  display: inline-flex;
  gap: 0;
  border: 1px solid rgba(23,21,20,0.08);
  border-radius: 999px;
  padding: 3px;
  background: rgba(248,246,242,0.6);
}
.gdrawer__region-opt {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 7px 12px !important;
  border-radius: 999px;
  color: rgba(23,21,20,0.5);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 220ms ease, background 220ms ease;
}
.gdrawer__region-opt.is-active,
.gdrawer__region-opt[aria-current="true"] {
  background: var(--gb-plum, #5B2634);
  color: #fff;
}
.gdrawer__region-opt:hover:not(.is-active):not([aria-current="true"]) {
  color: var(--gb-charcoal, #171514);
  background: rgba(255,255,255,0.6);
}

/* Search field — softer, more inviting */
.gdrawer__search {
  margin: 16px 22px 4px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(23,21,20,0.1) !important;
  padding: 0 16px !important;
  transition: border-color 240ms var(--gd-ease), box-shadow 240ms var(--gd-ease);
}
.gdrawer__search:focus-within {
  border-color: var(--gb-charcoal, #171514) !important;
  box-shadow: 0 0 0 3px rgba(23,21,20,0.05);
}
.gdrawer__search input {
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  padding: 13px 6px !important;
}
.gdrawer__search-icon {
  opacity: 0.4;
  transition: opacity 220ms ease, transform 280ms var(--gd-ease);
}
.gdrawer__search:focus-within .gdrawer__search-icon {
  opacity: 1;
  transform: rotate(-8deg);
}

/* Feature (Rhode-style top card) — bigger, more cinematic */
.gdrawer__feature {
  margin: 14px 16px 6px !important;
  border-radius: 8px !important;
  transition: transform 380ms var(--gd-ease), box-shadow 380ms var(--gd-ease) !important;
}
.gdrawer__feature:hover,
.gdrawer__feature:active {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -16px rgba(13,13,13,0.35);
}
.gdrawer__feature-img {
  transition: transform 920ms var(--gd-ease) !important;
}
.gdrawer__feature:hover .gdrawer__feature-img,
.gdrawer__feature:active .gdrawer__feature-img {
  transform: scale(1.04);
}

/* Close button — refined press */
.gdrawer__close {
  transition: color 220ms ease, transform 220ms var(--gd-spring) !important;
}
.gdrawer__close:active {
  transform: scale(0.92);
}

/* Bottom block subtle separator */
.gdrawer__bottom {
  border-top: 1px solid var(--gb-divider, #E8E3DC);
  padding: 16px 22px 22px !important;
}

/* Accessibility — respect reduced motion across the entire drawer system */
@media (prefers-reduced-motion: reduce) {
  .gdrawer,
  .gdrawer__feature,
  .gdrawer__wordmark,
  .gdrawer__nav > .gdrawer__row,
  .gdrawer__util > li,
  .gdrawer__sub,
  .gdrawer__sub li,
  .gdrawer__search,
  .gdrawer__region,
  .gdrawer__bottom {
    animation: none !important;
    transition: none !important;
  }
  body.gdrawer-open .gdrawer {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* =====================================================================
   NAV RESTRUCTURE · 28 May 2026 — moved editorial sub-nav into Glow Edit mega
   ===================================================================== */
/* Kill the editorial sub-nav strip site-wide. Content now lives in The Glow
   Edit mega menu. Pages remain crawlable via the new nav + sitemap. */
.glow-subnav { display: none !important; }

/* =====================================================================
   THE GLOW EDIT — calm centered editorial dropdown (3 cols, max 12 links)
   Matches the Wellness/standard dropdown style: white bg, dark text, no chrome.
   ===================================================================== */

.gnav__megapanel.gnav__megapanel--edit {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(0) !important;
  width: min(1040px, calc(100vw - 48px)) !important;
  max-width: 1040px !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: 0 18px 48px -16px rgba(13,13,13,0.18), 0 4px 12px -4px rgba(13,13,13,0.08) !important;
  border: 1px solid rgba(13,13,13,0.06) !important;
  margin-top: 8px;
}
.gnav__megapanel.gnav__megapanel--edit[hidden],
.gnav__megapanel.gnav__megapanel--edit[aria-hidden="true"] {
  transform: translateX(-50%) translateY(-8px) !important;
}

.gnav__edit-inner {
  padding: clamp(28px, 3vw, 44px) clamp(32px, 4vw, 56px);
  color: var(--gb-charcoal, #171514);
}

.gnav__edit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: flex-start;
}

/* Subtle vertical dividers between columns */
.gnav__edit-col + .gnav__edit-col {
  position: relative;
  padding-left: clamp(24px, 4vw, 56px);
  margin-left: 0;
}
.gnav__edit-col + .gnav__edit-col::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(13,13,13,0.06);
}

/* Column heading — same uppercase tracked style as Wellness column labels */
.gnav__edit-eyebrow {
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(23,21,20,0.46);
  font-weight: 500;
  margin: 0 0 18px;
}

/* Link rows — match the Wellness dropdown row style: Inter, uppercase, tracked */
.gnav__edit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gnav__edit-list li { margin: 0; }

.gnav__edit-link {
  display: block;
  padding: 11px 0;
  font-family: 'Inter', 'Instrument Sans', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--gb-charcoal, #171514);
  text-decoration: none;
  border-bottom: 1px solid rgba(13,13,13,0.04);
  transition: color 220ms cubic-bezier(0.22,0.61,0.36,1), padding-left 240ms cubic-bezier(0.22,0.61,0.36,1);
}
.gnav__edit-list li:last-child .gnav__edit-link { border-bottom: 0; }
.gnav__edit-link:hover,
.gnav__edit-link:focus-visible {
  color: var(--gb-plum, #5B2634);
  padding-left: 6px;
}
.gnav__edit-link:focus-visible {
  outline: 2px solid var(--gb-plum, #5B2634);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Mobile — fall back to drawer accordion */
@media (max-width: 899px) {
  .gnav__megapanel.gnav__megapanel--edit {
    display: none !important;
  }
}

/* =====================================================================
   MOBILE DRAWER — SOPHISTICATION PASS v2 · 28 May 2026
   Editorial numbered rows, italic serif accent, refined press states.
   ===================================================================== */

/* Numbered counters on primary nav rows — magazine TOC feel */
.gdrawer__nav { counter-reset: gdr-num; }
.gdrawer__nav > .gdrawer__row-li {
  counter-increment: gdr-num;
}
.gdrawer__row > summary {
  position: relative;
}
.gdrawer__row > summary::after {
  content: counter(gdr-num, decimal-leading-zero);
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Instrument Serif', 'Canela', Georgia, serif !important;
  font-style: italic !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  color: rgba(23,21,20,0.22);
  text-transform: none !important;
  font-weight: 400 !important;
  transition: color 240ms cubic-bezier(0.22,0.61,0.36,1), transform 320ms cubic-bezier(0.22,0.61,0.36,1);
  pointer-events: none;
}
.gdrawer__row[open] > summary::after,
.gdrawer__row > summary:hover::after,
.gdrawer__row > summary:focus-visible::after {
  color: var(--gb-plum, #5B2634);
  transform: translateY(-50%) translateX(-2px);
}

/* Italic serif accent — small editorial line above the nav rows */
.gdrawer__nav-eyebrow {
  font-family: 'Instrument Serif', 'Canela', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: rgba(23,21,20,0.55);
  padding: 18px 22px 4px;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.gdrawer__nav-eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: rgba(23,21,20,0.3);
  transform: translateY(-4px);
}
.gdrawer__nav-eyebrow span {
  color: var(--gb-charcoal, #171514);
}

/* Refine row label — keep Inter uppercase but pair with italic counter */
.gdrawer__row > summary > span {
  display: inline-flex;
  align-items: baseline;
}

/* Editorial drawer footer signature */
.gdrawer__signature {
  padding: 16px 22px 20px;
  border-top: 1px solid rgba(23,21,20,0.05);
  background: linear-gradient(180deg, transparent, rgba(248,246,242,0.6));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: 'Instrument Serif', 'Canela', Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
  color: rgba(23,21,20,0.5);
}
.gdrawer__signature-mark {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(23,21,20,0.32);
}

/* "Now reading" pill — appears on the active section per current URL */
.gdrawer__row.is-current > summary {
  background: linear-gradient(90deg, rgba(91,38,52,0.04) 0%, transparent 60%);
}
.gdrawer__row.is-current > summary > span::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gb-plum, #5B2634);
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-1px);
  animation: gdrawer-pulse 2s cubic-bezier(0.22,0.61,0.36,1) infinite;
}
@keyframes gdrawer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91,38,52,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(91,38,52,0); }
}

/* Bigger, more tactile featured card at the top */
.gdrawer__feature {
  border-radius: 6px !important;
  position: relative;
  isolation: isolate;
}
.gdrawer__feature::after {
  content: 'Today on The Glow';
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  font-family: 'Inter', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  background: rgba(13,13,13,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
}

/* Region — refined pill with rotating star */
.gdrawer__region-label::before {
  content: '✦';
  display: inline-block;
  font-size: 0.7rem;
  color: rgba(23,21,20,0.32);
  animation: gdrawer-star 16s linear infinite;
}
@keyframes gdrawer-star {
  to { transform: rotate(360deg); }
}

/* Util row icons get a subtle plum tint on active */
.gdrawer__util a:hover svg {
  color: var(--gb-plum, #5B2634);
}

/* Reduce uppercase tracking on link rows in sub-items for breathing room */
.gdrawer__sub a,
.gdrawer__nested-list a {
  letter-spacing: 0.005em !important;
}

@media (prefers-reduced-motion: reduce) {
  .gdrawer__row.is-current > summary > span::before { animation: none !important; }
  .gdrawer__region-label::before { animation: none !important; }
  .gdrawer__row > summary::after { transition: none !important; }
}

/* Mobile: nested accordion inside the Glow Edit row */
.gdrawer__sub--nested {
  padding: 0 !important;
  background: var(--gb-porcelain, #ffffff) !important;
}
.gdrawer__nested {
  border-top: 1px solid rgba(23,21,20,0.06);
  background: transparent;
}
.gdrawer__nested:first-of-type { border-top: 0; }
.gdrawer__nested > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px 13px 34px;
  min-height: 48px;
  cursor: pointer;
  user-select: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(23,21,20,0.72);
  transition: background 220ms var(--gd-ease, ease), color 220ms var(--gd-ease, ease);
}
.gdrawer__nested > summary::-webkit-details-marker { display: none; }
.gdrawer__nested[open] > summary {
  color: var(--gb-plum, #5B2634);
  background: rgba(255,255,255,0.6);
}
.gdrawer__nested[open] > summary .gdrawer__chev {
  transform: rotate(180deg);
  color: var(--gb-plum, #5B2634);
}
.gdrawer__nested-list {
  list-style: none;
  margin: 0;
  padding: 4px 22px 12px 46px;
  background: rgba(255,255,255,0.55);
}
.gdrawer__nested[open] > .gdrawer__nested-list {
  animation: gdrawer-sub-in 380ms var(--gd-ease, ease) both;
}
.gdrawer__nested-list li {
  animation: gdrawer-li-in 360ms var(--gd-ease, ease) both;
}
.gdrawer__nested-list li:nth-child(1) { animation-delay: 30ms; }
.gdrawer__nested-list li:nth-child(2) { animation-delay: 60ms; }
.gdrawer__nested-list li:nth-child(3) { animation-delay: 90ms; }
.gdrawer__nested-list li:nth-child(4) { animation-delay: 120ms; }
.gdrawer__nested-list li:nth-child(5) { animation-delay: 150ms; }
.gdrawer__nested-list li:nth-child(6) { animation-delay: 180ms; }
.gdrawer__nested-list li:nth-child(7) { animation-delay: 210ms; }
.gdrawer__nested-list a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 0 7px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: rgba(23,21,20,0.76);
  text-decoration: none;
  position: relative;
  transition: color 220ms var(--gd-ease, ease), padding-left 240ms var(--gd-ease, ease);
}
.gdrawer__nested-list a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 1px;
  background: rgba(23,21,20,0.22);
  transition: width 260ms var(--gd-ease, ease), background 220ms var(--gd-ease, ease);
}
.gdrawer__nested-list a:hover,
.gdrawer__nested-list a:active {
  color: var(--gb-plum, #5B2634);
  padding-left: 20px;
}
.gdrawer__nested-list a:hover::before,
.gdrawer__nested-list a:active::before {
  width: 10px;
  background: var(--gb-plum, #5B2634);
}
/* Featured CTA at bottom of nested accordion */
.gdrawer__nested-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 22px;
  padding: 14px 18px;
  border-radius: 4px;
  background: var(--gb-charcoal, #171514);
  color: #fff;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background 220ms ease, transform 220ms ease;
}
.gdrawer__nested-cta:hover,
.gdrawer__nested-cta:active {
  background: var(--gb-plum, #5B2634);
  transform: translateY(-1px);
}


/* ============================================================
   EDITORIAL FACE RESTORED (2026-06-15)
   ----------------------------------------------------------------
   The previous "KILL EDITORIAL FACE" block (added May 30 2026)
   force-overrode every element to Inter and stripped Canela +
   italics site-wide. That fought the brand's intended type system
   defined in fonts.css (Canela display headings via --font-display,
   Inter body via --font-body). It has been removed so headings
   render in Canela again. Body/UI/nav remain Inter via the explicit
   --font-body rules in fonts.css.
   ============================================================ */
:root {
  --site-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;
}

/* ============================================================
   STANDARDISED IMAGE CONTAINER ASPECT RATIOS (added 2026-06-04)
   Per PHOTO-TREATMENT-AUDIT.md fix #1: apply the 4-ratio token
   system to known component classes that live in per-page inline
   <style> blocks. Cascades from site-chrome-2026.css so every
   page picks up the new ratios. Appends only — does not break
   layout, since these set object-fit:cover which most rules
   were already declaring.
   ============================================================ */

/* PORTRAIT 4/5 — editorial product/ranking cards */
.agv7-card__img,
.agv7-card__media,
.agv7-pick__img,
.agv7-pick__media,
.bow__card-image,
.gv3-grid__item img {
  aspect-ratio: var(--ar-portrait);
  object-fit: cover;
  object-position: var(--op, center);
}

/* HERO 16/10 — top-of-page editorial hero strips */
.agv7-hero__img,
.agv7-hero__image {
  aspect-ratio: var(--ar-hero);
  object-fit: cover;
  object-position: var(--op, center);
}

/* TILE 3/4 — directory/clinic card grids */
.mel-card img,
.gcd-clinic-card__media img {
  aspect-ratio: var(--ar-tile);
  object-fit: cover;
  object-position: var(--op, center);
}

/* ============================================================
   RESPONSIVE TABLES — horizontal scroll on small screens
   Targets agv7-compare (review/best), ph2-table (compare/guide)
   and any bare <table> inside a section. Desktop unaffected.
   ============================================================ */
@media (max-width: 600px) {
  table.agv7-compare,
  table.ph2-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
}


/* ===== GLOW PREMIUM POLISH (2026-06-17) ===== */
/* Intentional placeholder so lazy images never flash cold grey before paint */
/* Placeholder tone for lazy PHOTOS only — never logos/transparent PNGs/SVGs */
img[loading="lazy"]:not([src*=".png"]):not([src*=".svg"]):not([class*="wordmark"]):not([class*="logo"]){ background-color:#f4f2f0; background-image:linear-gradient(180deg,#f6f4f2,#efece9); }
img{ -webkit-backface-visibility:hidden; }
/* Refined, on-brand focus ring (accessibility + feels considered) */
a:focus-visible, button:focus-visible{ outline:2px solid #9A6A4B; outline-offset:3px; border-radius:2px; }

/* Crisper type rendering site-wide — the single biggest 'feels expensive' typography lever */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
/* Branded text selection */
::selection{ background:rgba(90,42,53,0.14); color:inherit; }
::-moz-selection{ background:rgba(90,42,53,0.14); color:inherit; }


/* Secondary (services) nav links — de-emphasised against product-led primary nav */
.review-nav .nav-links__svc{ opacity:.55; }
.review-nav .nav-links__svc:hover{ opacity:1; }

/* ===== GLOBAL NAV — Gallery White / Editorial Black reskin (2026-06-18) ===== */
.utility-bar{display:none !important;}
.glow-subnav{display:none !important;}
.masthead{background:#050505 !important;padding:13px 0 9px !important;border:0 !important;}
.masthead .wrap{max-width:1220px;margin:0 auto;}
.masthead-grid{display:flex;justify-content:center;align-items:center;}
.masthead .glow-wordmark-img{height:24px !important;width:auto !important;}
.review-nav{background:#050505 !important;padding:0 0 13px !important;border-bottom:1px solid #1c1c1c !important;}
.review-nav .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.7vw,26px) !important;margin:0 auto;}
.review-nav .nav-links a{color:rgba(255,255,255,.8) !important;text-transform:uppercase;font-size:.72rem !important;letter-spacing:.16em !important;font-weight:500 !important;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;transition:color .16s ease,border-color .16s ease;}
.review-nav .nav-links a:hover{color:#fff !important;border-bottom-color:rgba(255,255,255,.55) !important;}

/* sticky header */
.masthead{position:sticky;top:0;z-index:1001;min-height:46px;}
.review-nav{position:sticky;top:46px;z-index:1000;}

/* ===== EDITORIAL HERO RESKIN — Gallery White top sections across all ranking/guide templates (2026-06-18) =====
   CSS-only. No markup/copy/schema touched. Excludes homepage gh2026 hero. */
.gv3-hero,.review-hero,.agv7-hero,.gg-hero,.blc-hero,.cond-hero,.m-hero,.sp26-hero,.gbp-hero,.rlt-hero,.bestof-hero{
  background:#FFFFFF !important;background-image:none !important;border-bottom:1px solid #E1E1E1 !important;
  padding-top:clamp(30px,4vw,56px) !important;padding-bottom:clamp(30px,4vw,52px) !important;color:#111 !important;}
.gv3-hero h1,.review-hero h1,.agv7-hero h1,.gg-hero h1,.blc-hero h1,.cond-hero h1,.m-hero h1,.sp26-hero h1,
.gbp-hero h1,.rlt-hero h1,.bestof-hero h1,.agv7-hero__h1{
  font-family:'Lexend Deca','Inter',sans-serif !important;font-weight:600 !important;color:#111111 !important;
  font-size:clamp(2.2rem,4.6vw,3.8rem) !important;line-height:1.05 !important;letter-spacing:-.02em !important;font-style:normal !important;}
.gv3-hero h1 em,.review-hero h1 em,.agv7-hero__h1 em,.bestof-hero h1 em{font-style:normal !important;color:#6B6B6B !important;}
.gv3-eyebrow,.agv7-eyebrow,.gg-eyebrow,.bestof-eyebrow,.review-hero .eyebrow,.sp26-eyebrow,.m-eyebrow{
  color:#6B6B6B !important;letter-spacing:.2em !important;text-transform:uppercase !important;font-weight:600 !important;font-family:'Inter',sans-serif !important;}
.gv3-lede,.agv7-hero__dek,.gg-lede,.bestof-lede,.review-hero__lede,.review-hero .lede,.sp26-lede,.m-lede,.gv3-sub{
  color:#6B6B6B !important;font-family:'Inter',sans-serif !important;}
.gv3-hero .breadcrumb,.agv7-hero__crumb,.gg-hero .breadcrumb,.bestof-hero .breadcrumb,.gbp-hero__crumb{color:#6B6B6B !important;}
.gv3-hero .breadcrumb a,.agv7-hero__crumb a,.gg-hero .breadcrumb a,.bestof-hero .breadcrumb a{color:#6B6B6B !important;border:0 !important;}
.gv3-hero-stats .stat strong{color:#111111 !important;}
.gv3-hero-stats .stat{color:#6B6B6B !important;}
