/** Shopify CDN: Minification failed

Line 16:3 Unexpected "-"

**/
/* ============================================================
   HOMEGROUND OVERRIDES
   Applied AFTER Horizon's base.css. Replaces visual/brand styles
   while preserving Horizon's structural layout, grid, flexbox,
   and JavaScript-driven component behavior.

   Rules:
   - Only target visual properties (color, font, border-radius, etc.)
   - Never override display, position, flex/grid, z-index, overflow
   - Use /* Homeground override */ comment on changed values
   - Prefer variable overrides over direct !important
   ============================================================ */

/* ============================================================
   GOOGLE FONTS — Safety net if Shopify font picker doesn't load
   (Primary loading handled by snippets/fonts.liquid via settings_data.json)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ============================================================
   CSS VARIABLE OVERRIDES (Root Level)
   These override Horizon's generated font variables.
   Colors are handled in settings_data.json (more reliable).
   ============================================================ */
:root {
  /* Font family fallbacks — overrides theme-styles-variables.liquid output */
  --font-body--family: var(--hg-font-body);           /* Homeground override */
  --font-subheading--family: var(--hg-font-body);     /* Homeground override */
  --font-heading--family: var(--hg-font-heading);     /* Homeground override */
  --font-accent--family: var(--hg-font-heading);      /* Homeground override */
}

/* ============================================================
   HORIZON BUTTON CSS VARIABLE OVERRIDES
   color-schemes.liquid and theme-styles-variables.liquid render
   as inline <style> blocks AFTER this external stylesheet
   (theme.liquid line 36 vs line 32). !important on custom property
   declarations wins the cascade regardless of source order,
   overriding every color scheme definition.
   ============================================================ */
:root,
.color-scheme-1,
.color-scheme-2,
.color-scheme-3,
.color-scheme-4,
.color-scheme-5 {
  --color-primary-button-background: var(--hg-accent-gold) !important;
  --color-primary-button-text: #ffffff !important;
  --color-primary-button-border: var(--hg-accent-gold) !important;
  --color-primary-button-hover-background: var(--hg-color-cta-hover-bg) !important;
  --color-primary-button-hover-text: #ffffff !important;
  --color-primary-button-hover-border: var(--hg-color-cta-hover-bg) !important;
  --style-border-radius-buttons-primary: 999px !important;
  --button-text-case-primary: none !important;
}

/* ============================================================
   BODY — Base typographic defaults
   ============================================================ */
body {
  font-family: var(--hg-font-body);     /* Homeground override */
  font-weight: 400;                      /* Homeground override — Poppins Regular */
  line-height: 1.7;                      /* Homeground override */
  letter-spacing: 0.01em;               /* Homeground override */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   HEADINGS — Playfair Display with Homeground sizing scale
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--hg-font-heading); /* Homeground override */
  letter-spacing: -0.02em;             /* Homeground override */
  line-height: 1.2;                    /* Homeground override */
}

/* Homeground heading size scale */
h1, .h1 { font-size: 4rem;   font-weight: 800; line-height: 1.1; } /* Homeground override */
h2, .h2 { font-size: 3rem;   font-weight: 700; }                    /* Homeground override */
h3, .h3 { font-size: 2rem;   font-weight: 600; }                    /* Homeground override */
h4, .h4 { font-size: 1.5rem; font-weight: 600; }                    /* Homeground override */
h5, .h5 { font-size: 1.1rem; font-weight: 600; }                    /* Homeground override */
h6, .h6 { font-size: 1rem;   font-weight: 600; }                    /* Homeground override */

/* Responsive heading scale */
@media screen and (max-width: 749px) {
  h1, .h1 { font-size: 2.5rem; } /* Homeground override */
  h2, .h2 { font-size: 2rem;   } /* Homeground override */
  h3, .h3 { font-size: 1.5rem; } /* Homeground override */

  /* Task 5: give mobile nav icons breathing room from screen edges */
  .header__columns {
    padding-inline: 8px 16px !important; /* Homeground override — right side was flush to edge */
  }
}

/* Heading em — italic accent, echoes the logo script (hero use only) */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.hg-heading-em {
  font-style: italic;
  font-weight: inherit;
}

/* Eyebrows — italic Playfair to rhyme with the logo wordmark */
.hg-story-split__eyebrow,
.hg-story__eyebrow,
.hg-wib__panel-eyebrow,
.hg-bc-section__eyebrow,
.founders__eyebrow {
  font-family: var(--hg-font-heading);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.9375rem;
}

/* Testimonial quotes — italic for literary feel */
.hg-testimonials__quote-text {
  font-style: italic;
}

/* ============================================================
   PARAGRAPH & BODY TEXT
   ============================================================ */
p {
  line-height: 1.8;   /* Homeground override */
  font-weight: 400;   /* Homeground override */
}

/* ============================================================
   BUTTONS — Homeground behavioral styles
   Colors handled by settings_data.json color schemes.
   Shape/text properties set here.
   ============================================================ */
.button,
.btn,
button.shopify-payment-button__button,
button.product-form__submit {
  font-family: var(--hg-font-body);  /* Homeground override */
  letter-spacing: 0.1em;             /* Homeground override */
  text-transform: uppercase;         /* Homeground override */
  font-weight: 500;                  /* Homeground override */
  font-size: 0.95rem;                /* Homeground override */
  border-radius: 0;                  /* Homeground override — sharp buttons */
  transition: var(--hg-transition);  /* Homeground override */
}

.button:hover,
.btn:hover {
  transform: translateY(-2px);   /* Homeground override */
}

/* Secondary/outline button style */
.button--secondary,
.btn-secondary {
  letter-spacing: 0.1em;        /* Homeground override */
  text-transform: uppercase;    /* Homeground override */
}

/* ============================================================
   LINKS
   ============================================================ */
a {
  transition: var(--hg-transition-fast); /* Homeground override */
}

/* ============================================================
   INPUTS & FORMS — Minimal rounding, Homeground style
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
  border-radius: var(--hg-radius-sm); /* Homeground override — 4px */
  font-family: var(--hg-font-body);   /* Homeground override */
  font-weight: 300;                   /* Homeground override */
}

/* ============================================================
   CARDS — Homeground card style
   ============================================================ */
.product-card,
.collection-card,
.resource-card,
.card {
  border-radius: var(--hg-radius-md); /* Homeground override — 8px */
  box-shadow: var(--hg-shadow-sm);    /* Homeground override */
  transition: var(--hg-transition);   /* Homeground override */
}

.product-card:hover,
.collection-card:hover,
.resource-card:hover {
  box-shadow: var(--hg-shadow-lg);    /* Homeground override */
}

/* ============================================================
   PRICE — Use Playfair Display for price display (Homeground feel)
   ============================================================ */
.price,
.price__regular,
.price__sale {
  font-family: var(--hg-font-heading); /* Homeground override */
}

/* ============================================================
   SECTION BACKGROUNDS — Homeground alternating pattern
   Applied when Horizon's color scheme classes use light tones
   ============================================================ */

/* Scheme-2 (cream) sections */
.color-scheme-2,
[class*="color-scheme-2"] {
  background-color: var(--hg-cream) !important; /* Homeground override */
}

/* Scheme-3 (sandy beige) sections */
.color-scheme-3,
[class*="color-scheme-3"] {
  background-color: var(--hg-sandy-beige) !important; /* Homeground override */
}

/* Scheme-4 (light blue) sections */
.color-scheme-4,
[class*="color-scheme-4"] {
  background-color: var(--hg-light-blue) !important; /* Homeground override */
}

/* Scheme-5 (dark / deep blue) sections */
.color-scheme-5,
[class*="color-scheme-5"] {
  background-color: var(--hg-deep-blue) !important; /* Homeground override */
}

/* Scheme-6 (forest green) sections */
.color-scheme-6,
[class*="color-scheme-6"] {
  background-color: var(--hg-forest-green) !important; /* Homeground override */
}

/* ============================================================
   BADGES — Homeground style (rounded, gold accent)
   ============================================================ */
.badge,
.badge--sale {
  font-family: var(--hg-font-body); /* Homeground override */
  font-weight: 600;                 /* Homeground override */
  letter-spacing: 0.05em;          /* Homeground override */
}

/* ============================================================
   PAGINATION & UI ELEMENTS — Consistent Homeground typography
   ============================================================ */
.pagination__item,
.breadcrumbs__item {
  font-family: var(--hg-font-body);  /* Homeground override */
  font-size: 0.9rem;                 /* Homeground override */
}

/* ============================================================
   FOOTER — Reinforce Homeground fonts
   ============================================================ */
footer,
.footer {
  font-family: var(--hg-font-body); /* Homeground override */
}

footer h1, footer h2, footer h3,
footer h4, footer h5, footer h6,
.footer h1, .footer h2, .footer h3,
.footer h4, .footer h5, .footer h6 {
  font-family: var(--hg-font-heading); /* Homeground override */
}

/* ============================================================
   HEADER — Homeground nav font
   ============================================================ */
header,
.header,
.site-header {
  font-family: var(--hg-font-body); /* Homeground override */
}

.header__menu-item,
.header__menu-item a,
nav a {
  font-family: var(--hg-font-body); /* Homeground override */
  font-weight: 500;                  /* Homeground override */
  letter-spacing: 0.05em;           /* Homeground override */
}

/* ============================================================
   LOGO VARIANT SWITCHING
   Logo setup: settings.logo = light/white version (hero use),
               settings.logo_inverse = dark version (white header use).
   Horizon default (no CSS variable): original (light) shows, inverse hides.
   Horizon transparent state: original hides, inverse (dark) shows — we override this.

   Rules:
   1. Non-transparent pages: force dark (inverse) logo on white header.
   2. Homepage transparent non-sticky: force light (original) logo over hero,
      blocking Horizon's hover rule from switching to dark.
   3. Homepage transparent sticky/scrolled: force dark (inverse) on filled header.
   ============================================================ */

/* 1. Non-transparent (all pages with filled white header): dark logo */
#header-component:not([transparent]) .header-logo__image-container--original {
  display: none !important;  /* Homeground override — hide light logo */
}
#header-component:not([transparent]) .header-logo__image-container--inverse {
  display: flex !important;  /* Homeground override — show dark logo */
}

/* 2. Homepage transparent non-sticky: light logo over hero.
   Uses CSS variables to override Horizon's transparent default (which shows dark)
   and blocks Horizon's hover rule (which would also switch to dark). */
#header-component[transparent]:not([data-sticky-state='active']) {
  --header-logo-display: block !important;        /* Homeground override — show light original */
  --header-logo-inverse-display: none !important; /* Homeground override — hide dark inverse */
}

/* 3. Homepage transparent sticky (scrolled): dark logo on filled header */
#header-component[transparent][data-sticky-state='active'] .header-logo__image-container--original {
  display: none !important;  /* Homeground override — hide light logo */
}
#header-component[transparent][data-sticky-state='active'] .header-logo__image-container--inverse {
  display: flex !important;  /* Homeground override — show dark logo */
}

/* Homepage only: pin foreground color to scheme-6 white on the header-component so that
   Horizon's hover rule (--color-foreground: inherit) inherits white instead of scheme-1 dark.
   Scoped to non-sticky only so scrolled/filled state still gets dark text. */
body.template-index #header-component[transparent]:not([data-sticky-state='active']),
#header-component[transparent]:not([data-sticky-state='active']) {
  --color-foreground: #ffffff !important;         /* Homeground override — scheme-6 white */
  --color-foreground-rgb: 255 255 255 !important; /* Homeground override */
  --color-border: #ffffff !important;             /* Homeground override */
  --color-border-rgb: 255 255 255 !important;     /* Homeground override */
}

/* Homepage: force nav link color to white in transparent non-sticky state. */
#header-component[transparent]:not([data-sticky-state='active']) .menu-list__link {
  color: #ffffff !important; /* Homeground override — scheme-6 white */
}

/* Homepage headings — upright Playfair, italic only via <em> */
body.template-index h1,
body.template-index h2,
body.template-index h3 {
  font-style: normal;
}

/* ============================================================
   SUBMENU — Compact floating bubble (desktop only)
   Architecture:
     - Each .menu-list__list-item is position:relative (anchor)
     - .menu-list__submenu is position:absolute; top:100% (under item)
     - Show/hide driven by li:hover (propagates to all DOM descendants
       including absolutely-positioned ones — no gap artefacts)
     - visibility transition: snap visible instantly on show,
       delay hidden until after fade-out (fixes the artefact where
       visibility:hidden fired mid-fade making card non-interactive)
   Mobile drawer untouched (entire block scoped to ≥990px).
   ============================================================ */

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

  /* Allow submenus to overflow the overflow-list shadow part
     (overflow-list.css sets [part='list'] { overflow-y: hidden }) */
  .overflow-menu::part(list) {
    overflow: visible !important;
  }

  /* Kill the full-width background underlay */
  #header-component[data-menu-style='menu'] .header__underlay-open {
    background: transparent !important;
    box-shadow: none !important;
    height: 0 !important;
    transition: none !important;
  }

  /* Prevent transparent header from filling in white on non-submenu link hover.
     Horizon's header.liquid line 470 sets --closed-underlay-height: 100% when
     hovering a link without aria-haspopup (no submenu). On desktop our floating
     card replaces the mega menu so we keep the header transparent consistently. */
  #header-component[data-menu-style='menu'][transparent]:not([data-sticky-state='active']):has(.menu-list__link:not([aria-haspopup]):hover) {
    --closed-underlay-height: 0px;
  }

  /* Each nav item becomes the positioning anchor for its own card */
  #header-component[data-menu-style='menu'] .menu-list__list-item:not([slot='overflow']) {
    position: relative !important;
  }

  /* ── HIDDEN STATE ──────────────────────────────────────────────
     'visibility 0s linear 0.15s' = snap to hidden only AFTER the
     opacity fade finishes. Prevents the card becoming non-interactive
     while still visually fading out (the previous artefact cause).
     F4: padding-top creates an invisible hover-bridge above the card
     so li:hover stays true while the pointer traverses the gap
     between the nav link's bottom edge and the card face.
     F6: max-width prevents excessively wide cards on long link text.
     F7: left:0 / right:auto handles most items; last item flipped below.
     F8: fallback z-index value in case --layer-header-menu is unset.  */
  #header-component[data-menu-style='menu'] .menu-list__list-item:not([slot='overflow']) > .menu-list__submenu {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    margin-top: -1px !important;
    padding-top: 8px !important; /* F4: hover bridge above card */
    width: max-content !important;
    min-width: 200px !important;
    max-width: min(320px, 90vw) !important; /* F6: prevent runaway width */
    background: transparent !important;
    clip-path: none !important;
    z-index: var(--layer-header-menu, 200) !important; /* F8: fallback 200 */

    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s !important;
  }

  /* F7: Flip last nav item's card to right-anchor so it doesn't
     overflow the viewport on narrower desktop widths.            */
  #header-component[data-menu-style='menu'] .menu-list__list-item:not([slot='overflow']):last-child > .menu-list__submenu {
    left: auto !important;
    right: 0 !important;
  }

  /* ── SHOWN STATE ───────────────────────────────────────────────
     Primary: li:hover — CSS :hover propagates to ALL descendants,
     including position:absolute ones outside the li's layout box.
     The card stays open even when the mouse is on the wider right
     portion of the card that overflows the nav link's width.
     The padding-top hover bridge (above) also participates: once
     the submenu is visible, its transparent padding area keeps
     li:hover true as the pointer descends from the nav link.
     Fallback: aria-expanded='true' for keyboard/focus users.
     'visibility 0s linear 0s' = snap visible instantly so the card
     is always interactive the moment it becomes visible.           */
  #header-component[data-menu-style='menu'] .menu-list__list-item:not([slot='overflow']):hover > .menu-list__submenu,
  #header-component[data-menu-style='menu'] .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.15s ease, visibility 0s linear 0s !important;
  }

  /* ── CARD INNER ────────────────────────────────────────────────
     Kill Horizon's opacity/transform animation on the inner —
     the parent submenu element owns show/hide now.
     F14: #ffffff is intentional — Homeground uses a stark white
     dropdown card regardless of color scheme (brand decision).    */
  #header-component[data-menu-style='menu'] .menu-list__list-item:not([slot='overflow']) .menu-list__submenu-inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    padding: 0.5rem 0 !important;
    max-height: none !important;
    overflow: visible !important;

    background: #ffffff !important; /* F14: intentional brand white */
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }

  /* ── CONTENT LAYOUT ────────────────────────────────────────────
     Flatten Horizon's responsive mega-menu grid into a plain
     vertical list suited to the compact card format.
     F10: display:block on the grid/list works correctly for
     menu_style='text' (current config). For featured-products or
     featured-collections menus the subgrid layout would need to be
     preserved — revisit if those menu types are ever activated.    */
  #header-component[data-menu-style='menu'] .menu-list__submenu .mega-menu,
  #header-component[data-menu-style='menu'] .menu-list__submenu .section {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }

  #header-component[data-menu-style='menu'] .menu-list__submenu .mega-menu__grid,
  #header-component[data-menu-style='menu'] .menu-list__submenu .mega-menu__list,
  #header-component[data-menu-style='menu'] .menu-list__submenu .mega-menu__column {
    display: block !important;
    width: auto !important;
  }

  #header-component[data-menu-style='menu'] .menu-list__submenu .mega-menu__link {
    display: block !important;
    padding: 0.45rem 1.25rem !important;
    white-space: nowrap !important;
  }

  /* F5: Gold underline on submenu link hover — scoped to desktop
     to prevent hover state sticking on touch devices in the drawer */
  .mega-menu__link:hover .wrap-text,
  .mega-menu__link--parent:hover .wrap-text {
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: var(--hg-accent-gold) !important;
    text-decoration-thickness: 1.5px !important;
  }
}

/* ============================================================
   PREDICTIVE SEARCH — Consistent font
   ============================================================ */
.predictive-search__item,
.predictive-search__heading {
  font-family: var(--hg-font-body); /* Homeground override */
}

/* ============================================================
   SWATCHES & VARIANT PICKERS — Homeground radius
   ============================================================ */
.swatch,
.variant-button {
  border-radius: var(--hg-radius-sm); /* Homeground override */
}

/* ============================================================
   MODALS & DRAWERS — Homeground border radius
   ============================================================ */
.cart-drawer,
.quick-add-modal,
.search-modal,
dialog {
  border-radius: var(--hg-radius-md); /* Homeground override */
}

/* ============================================================
   STAR RATINGS — Gold accent
   ============================================================ */
.rating,
.rating__star,
.product-card__rating {
  color: var(--hg-accent-gold); /* Homeground override */
}

/* ============================================================
   HG BUTTON SYSTEM
   BEM: .hg-btn (base) + .hg-btn--{variant} + .hg-btn--{size}
   All colour values via --hg-* tokens only.
   ============================================================ */

/* --- Base --- */
.hg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hg-space-2);
  padding: 0.875rem 2rem;
  font-family: var(--hg-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--hg-radius-pill);
  cursor: pointer;
  transition: var(--hg-transition-fast);
  /* Preserve width when spinner is shown */
  min-width: 8rem;
  min-height: 44px; /* WCAG 2.5.5 touch target */
}

.hg-btn:focus-visible {
  outline: 3px solid var(--hg-color-focus);
  outline-offset: 2px;
}

.hg-btn:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.hg-btn:disabled,
.hg-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading state — spinner via ::after, text kept for width */
.hg-btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.hg-btn--loading::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: hg-spin 0.6s linear infinite;
}

@keyframes hg-spin {
  to { transform: rotate(360deg); }
}

/* --- Primary (Gold) --- */
.hg-btn--primary {
  background-color: var(--hg-color-cta-bg);
  color: var(--hg-color-cta-text);
  border-color: var(--hg-color-cta-bg);
}

.hg-btn--primary:hover:not(:disabled):not([aria-disabled="true"]):not(.hg-btn--loading) {
  background-color: var(--hg-color-cta-hover-bg);
  border-color: var(--hg-color-cta-hover-bg);
  box-shadow: var(--hg-shadow-md);
  transform: translateY(-1px);
}

.hg-btn--primary.hg-btn--loading::after {
  border-color: var(--hg-color-cta-text);
  border-top-color: transparent;
}

/* --- Secondary (Lake Blue) --- */
.hg-btn--secondary {
  background-color: var(--hg-color-action-bg);
  color: var(--hg-color-action-text);
  border-color: var(--hg-color-action-bg);
}

.hg-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]):not(.hg-btn--loading) {
  background-color: var(--hg-color-action-hover-bg);
  border-color: var(--hg-color-action-hover-bg);
  box-shadow: var(--hg-shadow-md);
  transform: translateY(-1px);
}

.hg-btn--secondary.hg-btn--loading::after {
  border-color: var(--hg-color-action-text);
  border-top-color: transparent;
}

/* --- Ghost (Outlined Gold) --- */
.hg-btn--ghost {
  background-color: transparent;
  color: var(--hg-color-cta-bg);
  border-color: var(--hg-color-cta-bg);
}

.hg-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]):not(.hg-btn--loading) {
  background-color: var(--hg-color-cta-bg);
  color: var(--hg-color-cta-text);
  box-shadow: var(--hg-shadow-md);
  transform: translateY(-1px);
}

.hg-btn--ghost.hg-btn--loading::after {
  border-color: var(--hg-color-cta-bg);
  border-top-color: transparent;
}

/* --- Link (Text only) --- */
.hg-btn--link {
  background-color: transparent;
  color: var(--hg-lake-blue);
  border-color: transparent;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

.hg-btn--link:hover:not(:disabled):not([aria-disabled="true"]):not(.hg-btn--loading) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hg-btn--link:active {
  box-shadow: none !important;
}

/* --- Size: Small --- */
.hg-btn--sm {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  min-width: 6rem;
  min-height: 44px; /* WCAG 2.5.5 touch target */
}

/* --- Size: Large --- */
.hg-btn--lg {
  padding: 1.125rem 2.5rem;
  font-size: 1rem;
  min-width: 10rem;
  min-height: 44px; /* WCAG 2.5.5 touch target */
}

/* ============================================================
   HEADER — Account icon link (logged-out state)
   ============================================================ */
.hg-account-icon-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  padding: 0.25rem;
}

.hg-account-icon-link:hover {
  opacity: 0.75;
}

/* ============================================================
   ACCOUNT PAGES — Register & Login
   Branded layout for /account/register and /account/login
   ============================================================ */
.hg-account-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 60vh;
  padding: 4rem 1.5rem;
  background-color: var(--hg-cream);
}

.hg-account-page__container {
  width: 100%;
  max-width: 480px;
}

.hg-account-page__heading {
  font-family: var(--hg-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  font-style: normal;
  color: var(--color-foreground);
  margin-bottom: 2rem;
  text-align: center;
  letter-spacing: -0.01em;
}

.hg-account-page__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

.hg-account-page__label {
  font-family: var(--hg-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-foreground);
  opacity: 0.75;
}

.hg-account-page__input {
  font-family: var(--hg-font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--color-foreground);
  background-color: var(--color-background);
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.2);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
}

.hg-account-page__input:focus {
  border-color: var(--hg-accent-gold);
  box-shadow: 0 0 0 3px rgb(184 147 95 / 0.15);
}

.hg-account-page__submit {
  display: block;
  width: 100%;
  margin-top: 1.75rem;
  padding: 0.875rem 1.5rem;
  font-family: var(--hg-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--hg-accent-gold);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.hg-account-page__submit:hover {
  background-color: #a07840;
}

.hg-account-page__submit:active {
  transform: scale(0.98);
}

.hg-account-page__alt-link {
  font-family: var(--hg-font-body);
  font-size: 0.875rem;
  font-weight: 300;
  text-align: center;
  margin-top: 1.25rem;
  color: var(--color-foreground);
  opacity: 0.75;
}

.hg-account-page__alt-link a {
  color: var(--hg-accent-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.hg-account-page__alt-link a:hover {
  opacity: 0.8;
}

.hg-account-page__forgot {
  font-family: var(--hg-font-body);
  font-size: 0.875rem;
  font-weight: 300;
  margin-top: 1rem;
  color: var(--color-foreground);
  opacity: 0.65;
}

.hg-account-page__forgot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hg-account-page__new-customer {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
}

.hg-account-page__new-customer-heading {
  font-family: var(--hg-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: normal;
  color: var(--color-foreground);
  margin-bottom: 0.5rem;
}

.hg-account-page__new-customer-body {
  font-family: var(--hg-font-body);
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--color-foreground);
  opacity: 0.75;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.hg-account-page__register-btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  font-family: var(--hg-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-foreground);
  border: 2px solid var(--color-foreground);
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hg-account-page__register-btn:hover {
  background-color: var(--color-foreground);
  color: var(--color-background);
}

.hg-account-page__divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  color: var(--color-foreground);
  opacity: 0.4;
  font-family: var(--hg-font-body);
  font-size: 0.8125rem;
}

.hg-account-page__divider::before,
.hg-account-page__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: currentColor;
}

/* Form errors */
.hg-account-page .errors {
  background-color: rgb(220 38 38 / 0.06);
  border: 1px solid rgb(220 38 38 / 0.3);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-family: var(--hg-font-body);
  font-size: 0.875rem;
  color: #dc2626;
}

.hg-account-page .errors ul {
  margin: 0;
  padding-left: 1.25rem;
}

/* ============================================================
   RECHARGE — Affinity customer portal design tokens
   Recharge injects its own CSS via JS after page load, which
   overrides equal-specificity rules. !important on custom
   properties forces our values to win regardless of load order.
   ============================================================ */

.recharge-theme {

  /* Brand (gold scale) */
  --recharge-color-brand:       #b8935f !important;  /* --hg-accent-gold */
  --recharge-color-brand-120:   #a07d50 !important;  /* gold -15% */
  --recharge-color-brand-20:    #c6a97f !important;
  --recharge-color-brand-40:    #d4be9f !important;
  --recharge-color-brand-60:    #e3d4bf !important;
  --recharge-color-brand-75:    #ede4d7 !important;
  --recharge-color-brand-85:    #f4efe7 !important;

  /* Neutrals */
  --recharge-color-neutral:     #1a1a1a !important;  /* --hg-dark */
  --recharge-color-neutral-80:  #2d2d2d !important;  /* --hg-text-dark */
  --recharge-color-neutral-70:  #5a5a5a !important;  /* --hg-text-gray */
  --recharge-color-neutral-40:  #9da1a2 !important;
  --recharge-color-neutral-10:  #e8e6e1 !important;  /* --hg-light-gray */

  /* Status: Positive */
  --recharge-color-positive120: hsl(148, 100%, 27%) !important;
  --recharge-color-positive:    hsl(148, 100%, 33%) !important;
  --recharge-color-positive80:  hsl(148,  57%, 46%) !important;
  --recharge-color-positive60:  hsl(148,  49%, 60%) !important;
  --recharge-color-positive40:  hsl(148,  49%, 73%) !important;
  --recharge-color-positive20:  hsl(148,  50%, 87%) !important;
  --recharge-color-positive10:  hsl(148,  49%, 93%) !important;

  /* Status: Caution */
  --recharge-color-caution120:  hsl(43, 100%, 40%) !important;
  --recharge-color-caution:     hsl(43, 100%, 50%) !important;
  --recharge-color-caution80:   hsl(43, 100%, 60%) !important;
  --recharge-color-caution60:   hsl(43, 100%, 70%) !important;
  --recharge-color-caution40:   hsl(43, 100%, 80%) !important;
  --recharge-color-caution20:   hsl(43, 100%, 90%) !important;
  --recharge-color-caution10:   hsl(43, 100%, 95%) !important;

  /* Status: Critical */
  --recharge-color-critical120: hsl(12, 87%, 40%) !important;
  --recharge-color-critical:    hsl(12, 87%, 50%) !important;
  --recharge-color-critical80:  hsl(12, 86%, 70%) !important;
  --recharge-color-critical60:  hsl(12, 85%, 80%) !important;
  --recharge-color-critical40:  hsl(12, 85%, 80%) !important;
  --recharge-color-critical20:  hsl(12, 85%, 90%) !important;
  --recharge-color-critical10:  hsl(12, 85%, 95%) !important;

  /* App layout */
  --recharge-app-background:       #faf8f5 !important;  /* --hg-off-white */
  --recharge-app-container:        1144px !important;
  --recharge-app-vertical-padding: 2.5rem !important;
  --recharge-app-zIndex:           9999999 !important;
  --recharge-views-background:     #faf8f5 !important;  /* --hg-off-white */
  --recharge-view-container:       720px !important;

  /* Images / carousel */
  --recharge-images-ratio:             1 !important;
  --recharge-carousel-thumbnail-size:  124px !important;

  /* Corners */
  --recharge-corners-radius: 8px !important;  /* --hg-radius-md */

  /* Cards */
  --recharge-cards-background:   #ffffff !important;   /* --hg-white */
  --recharge-cards-border-color: #e8e6e1 !important;  /* --hg-light-gray */

  /* Typography */
  --recharge-typography-heading-font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  --recharge-typography-heading-font-weight: 700 !important;
  --recharge-typography-body-font-family:    'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  --recharge-typography-body-font-weight:    400 !important;
  --recharge-typography-light:               #ffffff !important;
  --recharge-typography-primary:             #2d2d2d !important;  /* --hg-text-dark */
  --recharge-typography-secondary:           #5a5a5a !important;  /* --hg-text-gray */
  --recharge-typography-scale:               16px !important;
  --recharge-typography-size-1: calc(2     * var(--recharge-typography-scale)) !important;  /* 32px — was 48px */
  --recharge-typography-size-2: calc(1.5   * var(--recharge-typography-scale)) !important;  /* 24px — was 36px */
  --recharge-typography-size-3: calc(1.0625 * var(--recharge-typography-scale)) !important; /* 17px — was 26px (status card text) */
  --recharge-typography-size-4: calc(0.9375 * var(--recharge-typography-scale)) !important; /* 15px — was 20px */
  --recharge-typography-size-5: calc(1     * var(--recharge-typography-scale)) !important;
  --recharge-typography-size-6: calc(0.875 * var(--recharge-typography-scale)) !important;
  --recharge-typography-size-7: calc(0.75  * var(--recharge-typography-scale)) !important;

  /* Buttons */
  --recharge-button-brand:         #b8935f !important;  /* --hg-accent-gold */
  --recharge-button-color:         #ffffff !important;
  --recharge-button-border-radius: 999px !important;    /* pill — matches Homeground CTAs */
  --recharge-button-font-family:   'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ============================================================
   RECHARGE — Affinity portal UI refinements
   Breathing room, pricing hierarchy, cohesive typography.
   Selectors use .recharge- prefix per Recharge's documented
   safe-class convention. Verify against live DOM if needed.
   ============================================================ */

/* ── Breathing room ─────────────────────────────────────── */

/* Extra vertical padding around the portal shell */
.recharge-theme {
  padding-block: 1rem !important;
}

/* Space between stacked cards/sections */
.recharge-card + .recharge-card,
.recharge-theme [class*="recharge-card"] + [class*="recharge-card"] {
  margin-top: 1.25rem !important;
}

/* Card internal padding — more room inside each panel */
.recharge-card,
.recharge-theme [class*="recharge-card"] {
  padding: 1.75rem 2rem !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(13, 59, 82, 0.06) !important;
}

/* ── Links — gold to stay on brand ─────────────────────── */
.recharge-theme a:not([class*="button"]) {
  color: #b8935f !important;  /* --hg-accent-gold */
  font-weight: 500 !important;
}
.recharge-theme a:not([class*="button"]):hover {
  color: #a07d50 !important;
  text-decoration: underline !important;
}

/* ── Order summary: consistent pricing rows ─────────────── */

/* All price rows: consistent size + spacing */
.recharge-theme [class*="order-summary"] [class*="row"],
.recharge-theme [class*="summary"] [class*="row"],
.recharge-theme [class*="price-row"] {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-block: 0.3125rem !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.9375rem !important;
  color: #2d2d2d !important;  /* --hg-text-dark */
}

/* Subtotal + Shipping: slightly muted */
.recharge-theme [class*="subtotal"],
.recharge-theme [class*="shipping"] {
  color: #5a5a5a !important;  /* --hg-text-gray */
}

/* Total row: prominent — separator, heavier weight */
.recharge-theme [class*="order-total"],
.recharge-theme [class*="total-row"],
.recharge-theme [class*="summary"] [class*="total"]:not([class*="subtotal"]) {
  border-top: 1px solid #e8e6e1 !important;  /* --hg-light-gray */
  margin-top: 0.5rem !important;
  padding-top: 0.75rem !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #1a1a1a !important;  /* --hg-dark */
}

/* ── Navigation tabs ────────────────────────────────────── */
.recharge-theme [class*="tabs"] button,
.recharge-theme [class*="nav"] button,
.recharge-theme [class*="tab-item"] {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* ── Section headings ───────────────────────────────────── */
.recharge-theme h1, .recharge-theme h2,
.recharge-theme h3, .recharge-theme h4 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #1a1a1a !important;
  letter-spacing: -0.01em !important;
}

/* ── Body copy ──────────────────────────────────────────── */
.recharge-theme p,
.recharge-theme span:not([class*="badge"]):not([class*="tag"]) {
  font-family: 'Poppins', sans-serif !important;
  line-height: 1.6 !important;
}

/* ============================================================
   RECHARGE CART DRAWER — Brand alignment
   Targets Recharge's injected cart drawer overlay.
   Verified selectors: inspect live DOM at homegroundbox.com
   and search for any marked TODO if classes differ.

   Recharge injects a Shadow DOM or open DOM cart drawer when
   the Shopify native cart drawer is disabled (our config).
   Common class patterns below are based on Recharge v3/v4 portal.
   TODO: confirm each selector against live DOM before pushing.
   ============================================================ */

/* Drawer container background */
[id='rc-cart-drawer'],
.rc-cart-drawer,
.rca-cart-drawer {                               /* TODO: verify selector */
  background-color: var(--hg-cream) !important;
  font-family: var(--hg-font-body) !important;
  color: var(--hg-text-dark) !important;
}

/* Header bar */
[id='rc-cart-drawer'] .rc-cart__header,
.rc-cart-drawer__header,
.rca-cart-drawer__header {                       /* TODO: verify selector */
  background-color: var(--hg-deep-blue) !important;
  color: var(--hg-white) !important;
  font-family: var(--hg-font-heading) !important;
  border-bottom: none !important;
}

/* Header title text */
[id='rc-cart-drawer'] .rc-cart__title,
.rc-cart-drawer__title,
.rca-cart-drawer__title {                        /* TODO: verify selector */
  font-family: var(--hg-font-heading) !important;
  font-style: italic !important;
  color: var(--hg-white) !important;
}

/* Line item product title */
[id='rc-cart-drawer'] .rc-cart-item__title,
.rc-cart-drawer__item-title {                    /* TODO: verify selector */
  font-family: var(--hg-font-body) !important;
  font-weight: 500 !important;
  color: var(--hg-text-dark) !important;
}

/* Line item price */
[id='rc-cart-drawer'] .rc-cart-item__price,
.rc-cart-drawer__item-price {                    /* TODO: verify selector */
  font-family: var(--hg-font-body) !important;
  color: var(--hg-text-dark) !important;
}

/* Subtotal / order summary row */
[id='rc-cart-drawer'] .rc-cart__subtotal,
.rc-cart-drawer__subtotal {                      /* TODO: verify selector */
  font-family: var(--hg-font-body) !important;
  color: var(--hg-text-dark) !important;
  border-top: 1px solid var(--hg-light-gray) !important;
}

/* Primary checkout button */
[id='rc-cart-drawer'] .rc-cart__checkout-btn,
[id='rc-cart-drawer'] button[data-testid='checkout-btn'],
.rc-cart-drawer__checkout-btn {                  /* TODO: verify selector */
  background-color: var(--hg-accent-gold) !important;
  color: var(--hg-white) !important;
  font-family: var(--hg-font-body) !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: var(--hg-radius-sm) !important;
}

[id='rc-cart-drawer'] .rc-cart__checkout-btn:hover,
.rc-cart-drawer__checkout-btn:hover {            /* TODO: verify selector */
  background-color: #a07d50 !important; /* gold darkened 12% */
}

/* Secondary / continue shopping link */
[id='rc-cart-drawer'] .rc-cart__continue,
.rc-cart-drawer__continue {                      /* TODO: verify selector */
  font-family: var(--hg-font-body) !important;
  color: var(--hg-lake-blue) !important;
}

/* ============================================================
   RECHARGE — Suppress "Deliver Every" frequency selector.
   The Signature Membership has a fixed quarterly cadence so
   the selling_plan select adds no value and clutters the cart.
   Confirmed selector: <select name="selling_plan-*"> with
   Recharge storefront-drawer Tailwind classes (open DOM).
   The :has() rule also hides the parent wrapper + label.
   ============================================================ */

/* The select itself */
select[name="selling_plan"],
select[name^="selling_plan-"] {
  display: none !important;
}

/* Parent wrapper div (contains the label + select) */
div:has(> select[name="selling_plan"]),
div:has(> select[name^="selling_plan-"]) {
  display: none !important;
}

/* ============================================================
   PRODUCT PAGE — Sticky add-to-cart popover (C3)
   Override Horizon native 600px fixed width so the bar does not
   cause horizontal scroll on viewports narrower than 640px.
   ============================================================ */
.sticky-add-to-cart__bar {
  width: clamp(280px, 90vw, 600px) !important;
}

/* ============================================================
   HOMEPAGE HERO — image focal point left, content right
   Weights the background image to show the family on the left
   while the text column sits in the gradient-darkened right half.
   ============================================================ */
#shopify-section-hero_jVaWmY .hero__media {
  object-position: 25% center !important;
}

/* Pull the content column to the right with a comfortable margin */
#shopify-section-hero_jVaWmY .layout-panel-flex {
  padding-right: clamp(2rem, 6vw, 8rem) !important;
  padding-left: clamp(1rem, 3vw, 4rem) !important;
}

/* ============================================================
   SECTION STYLES — migrated from inline <style> blocks (N7)
   All section-ID selectors (#hg-foo-{{ section.id }}) converted
   to class selectors (.hg-foo) for static stylesheet compatibility.
   ============================================================ */

/* ── trust-strip.liquid ─────────────────────────────────── */
.hg-trust-strip {
  background: var(--hg-color-surface-warm);
  border-top: 1px solid var(--hg-color-border);
  border-bottom: 1px solid var(--hg-color-border);
  padding: 1.25rem var(--hg-space-8);
}
.hg-trust-strip--light { background: var(--hg-color-surface-page); }
.hg-trust-strip--dark {
  background: var(--hg-color-surface-dark);
  border-color: rgba(255,255,255,0.1);
}
.hg-trust-strip__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: var(--hg-space-8);
}
.hg-trust-strip__item {
  display: flex; align-items: center; gap: var(--hg-space-2);
  font-family: var(--hg-font-body); font-size: 0.9375rem;
  color: var(--hg-color-text-secondary); white-space: nowrap;
}
.hg-trust-strip--dark .hg-trust-strip__item { color: var(--hg-color-text-on-dark); }
.hg-trust-strip__emoji { font-size: 1.125rem; line-height: 1; }
@media (max-width: 600px) {
  .hg-trust-strip__list { gap: var(--hg-space-4); }
  .hg-trust-strip__item { font-size: 0.875rem; }
}

/* ── legal-content.liquid ───────────────────────────────── */
.legal-content-wrapper {
  max-width: 760px; margin: 0 auto; padding: 60px 24px 80px;
}
.legal-content-wrapper h2 {
  font-family: var(--font-heading--family); font-size: 1.25rem;
  font-weight: 600; color: var(--color-foreground-heading);
  margin-top: 48px; margin-bottom: 12px;
}
.legal-content-wrapper p {
  font-family: var(--font-body--family); font-size: 1rem;
  line-height: 1.75; color: var(--color-foreground); margin-bottom: 16px;
}
.legal-content-wrapper ul { padding-left: 1.5rem; margin-bottom: 16px; }
.legal-content-wrapper li {
  font-family: var(--font-body--family); font-size: 1rem;
  line-height: 1.75; color: var(--color-foreground); margin-bottom: 8px;
}
.legal-content-wrapper a {
  color: var(--color-foreground-heading); text-underline-offset: 3px;
}
.legal-content-wrapper a:hover { opacity: 0.75; }

/* ── contrast-columns.liquid ────────────────────────────── */
.hg-contrast-cols { padding: var(--hg-section-padding); }
.hg-contrast-cols--dark { background: var(--hg-color-surface-dark); }
.hg-contrast-cols--warm { background: var(--hg-color-surface-warm); }
.hg-contrast-cols--light { background: var(--hg-color-surface-page); }
.hg-contrast-cols__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--hg-space-8); }
.hg-contrast-cols__heading {
  font-family: var(--hg-font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700; text-align: center; margin: 0 0 var(--hg-space-12); line-height: 1.2;
}
.hg-contrast-cols--dark .hg-contrast-cols__heading { color: var(--hg-color-text-on-dark); }
.hg-contrast-cols--warm .hg-contrast-cols__heading,
.hg-contrast-cols--light .hg-contrast-cols__heading { color: var(--hg-color-text-heading); }
.hg-contrast-cols__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--hg-space-8);
  max-width: 860px; margin: 0 auto;
}
@media (min-width: 700px) { .hg-contrast-cols__grid { grid-template-columns: 1fr 1fr; } }
.hg-contrast-cols__col { border-radius: var(--hg-radius-md); padding: var(--hg-card-padding); }
.hg-contrast-cols__col--negative { background: rgba(255,255,255,0.06); }
.hg-contrast-cols--warm .hg-contrast-cols__col--negative,
.hg-contrast-cols--light .hg-contrast-cols__col--negative {
  background: rgba(0,0,0,0.04); border: 1px solid var(--hg-color-border);
}
.hg-contrast-cols__col--positive {
  background: rgba(184,147,95,0.15); border: 1px solid var(--hg-accent-gold);
}
.hg-contrast-cols--warm .hg-contrast-cols__col--positive,
.hg-contrast-cols--light .hg-contrast-cols__col--positive {
  background: rgba(184,147,95,0.12); border: 1px solid var(--hg-accent-gold);
}
.hg-contrast-cols__col-heading {
  font-family: var(--hg-font-body); font-size: 0.9375rem;
  font-weight: 600; margin: 0 0 var(--hg-space-4); line-height: 1.4;
}
.hg-contrast-cols__col--negative .hg-contrast-cols__col-heading { color: var(--hg-text-gray); }
.hg-contrast-cols--dark .hg-contrast-cols__col--negative .hg-contrast-cols__col-heading { color: var(--hg-sand); }
.hg-contrast-cols__col--positive .hg-contrast-cols__col-heading { color: var(--hg-accent-gold); }
.hg-contrast-cols__col-body {
  font-family: var(--hg-font-body); font-size: 0.9375rem; line-height: 1.7; margin: 0;
}
.hg-contrast-cols--dark .hg-contrast-cols__col-body { color: var(--hg-sand); }
.hg-contrast-cols--warm .hg-contrast-cols__col-body,
.hg-contrast-cols--light .hg-contrast-cols__col-body { color: var(--hg-color-text-secondary); }

/* ── cta-banner.liquid ──────────────────────────────────── */
/* Default tokens */
.hg-cta-banner {
  --hg-cb-bg:                       var(--hg-color-cta-bg);
  --hg-cb-text:                     var(--hg-white);
  --hg-cb-heading:                  var(--hg-white);
  --hg-cb-subhead:                  rgba(255,255,255,0.85);
  --hg-cb-btn-primary-bg:           var(--hg-white);
  --hg-cb-btn-primary-text:         var(--hg-accent-gold);
  --hg-cb-btn-primary-hover-bg:     var(--hg-off-white);
  --hg-cb-btn-ghost-border:         rgba(255,255,255,0.6);
  --hg-cb-btn-ghost-text:           var(--hg-white);
  --hg-cb-btn-ghost-hover-bg:       rgba(255,255,255,0.12);
  --hg-cb-btn-outline-border:       var(--hg-white);
  --hg-cb-btn-outline-text:         var(--hg-white);
  --hg-cb-btn-outline-hover-bg:     var(--hg-white);
  --hg-cb-btn-outline-hover-text:   var(--hg-accent-gold);
  background-color: var(--hg-cb-bg);
  color: var(--hg-cb-text);
  padding: var(--hg-space-12) var(--hg-space-8);
  width: 100%;
}
.hg-cta-banner--bg-gold { --hg-cb-bg: var(--hg-accent-gold); }
.hg-cta-banner--bg-dark {
  --hg-cb-bg:                  var(--hg-color-surface-dark);
  --hg-cb-btn-primary-bg:      var(--hg-accent-gold);
  --hg-cb-btn-primary-text:    var(--hg-white);
  --hg-cb-btn-primary-hover-bg: var(--hg-color-cta-hover-bg);
  --hg-cb-subhead:             var(--hg-sand);
  --hg-cb-heading:             var(--hg-color-text-on-dark);
}
.hg-cta-banner--bg-warm {
  --hg-cb-bg:                   var(--hg-color-surface-warm);
  --hg-cb-text:                 var(--hg-color-text-primary);
  --hg-cb-heading:              var(--hg-color-text-heading);
  --hg-cb-subhead:              var(--hg-color-text-secondary);
  --hg-cb-btn-primary-bg:       var(--hg-accent-gold);
  --hg-cb-btn-primary-text:     var(--hg-white);
  --hg-cb-btn-primary-hover-bg: var(--hg-color-cta-hover-bg);
  --hg-cb-btn-ghost-border:     var(--hg-color-text-primary);
  --hg-cb-btn-ghost-text:       var(--hg-color-text-primary);
  --hg-cb-btn-ghost-hover-bg:   var(--hg-color-text-primary);
  --hg-cb-btn-outline-border:   var(--hg-accent-gold);
  --hg-cb-btn-outline-text:     var(--hg-accent-gold);
  --hg-cb-btn-outline-hover-bg:   var(--hg-accent-gold);
  --hg-cb-btn-outline-hover-text: var(--hg-white);
}
.hg-cta-banner--bg-light {
  --hg-cb-bg:                   var(--hg-color-surface-page);
  --hg-cb-text:                 var(--hg-color-text-primary);
  --hg-cb-heading:              var(--hg-color-text-heading);
  --hg-cb-subhead:              var(--hg-color-text-secondary);
  --hg-cb-btn-primary-bg:       var(--hg-accent-gold);
  --hg-cb-btn-primary-text:     var(--hg-white);
  --hg-cb-btn-primary-hover-bg: var(--hg-color-cta-hover-bg);
  --hg-cb-btn-ghost-border:     var(--hg-color-text-primary);
  --hg-cb-btn-ghost-text:       var(--hg-color-text-primary);
  --hg-cb-btn-ghost-hover-bg:   rgba(0,0,0,0.06);
  --hg-cb-btn-outline-border:   var(--hg-accent-gold);
  --hg-cb-btn-outline-text:     var(--hg-accent-gold);
  --hg-cb-btn-outline-hover-bg:   var(--hg-accent-gold);
  --hg-cb-btn-outline-hover-text: var(--hg-white);
}
.hg-cta-banner__inner {
  max-width: 700px; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--hg-space-6);
}
.hg-cta-banner__heading {
  font-family: var(--hg-font-heading); font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--hg-cb-heading); margin: 0;
}
.hg-cta-banner__subheading {
  font-family: var(--hg-font-body); font-size: 1.0625rem;
  font-weight: 400; line-height: 1.7; color: var(--hg-cb-subhead);
  margin: 0; max-width: 560px;
}
.hg-cta-banner__buttons {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: var(--hg-space-4); margin-top: var(--hg-space-2);
}
.hg-cta-banner__btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--hg-font-body); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.02em; line-height: 1.3; white-space: nowrap;
  text-decoration: none; border-radius: var(--hg-radius-pill);
  padding: 0.8125rem 2.25rem; cursor: pointer;
  transition: var(--hg-transition-fast); border: 2px solid transparent;
}
.hg-cta-banner__btn:focus-visible { outline: 3px solid var(--hg-color-focus); outline-offset: 3px; }
.hg-cta-banner__btn--primary {
  background-color: var(--hg-cb-btn-primary-bg);
  color: var(--hg-cb-btn-primary-text); border-color: transparent;
}
.hg-cta-banner__btn--primary:hover {
  background-color: var(--hg-cb-btn-primary-hover-bg);
  transform: translateY(-1px); box-shadow: var(--hg-shadow-sm);
}
.hg-cta-banner__btn--ghost {
  background-color: transparent; color: var(--hg-cb-btn-ghost-text);
  border-color: var(--hg-cb-btn-ghost-border);
}
.hg-cta-banner__btn--ghost:hover {
  background-color: var(--hg-cb-btn-ghost-hover-bg); transform: translateY(-1px);
}
.hg-cta-banner__btn--outline {
  background-color: transparent; color: var(--hg-cb-btn-outline-text);
  border-color: var(--hg-cb-btn-outline-border);
}
.hg-cta-banner__btn--outline:hover {
  background-color: var(--hg-cb-btn-outline-hover-bg);
  color: var(--hg-cb-btn-outline-hover-text); transform: translateY(-1px);
}
@media (max-width: 749px) {
  .hg-cta-banner { padding: 2rem 1.25rem; }
  .hg-cta-banner__inner { gap: var(--hg-space-4); }
  .hg-cta-banner__heading { font-size: clamp(1.375rem, 5vw, 1.75rem); }
  .hg-cta-banner__subheading { font-size: 0.9375rem; }
  .hg-cta-banner__buttons { flex-direction: column; width: 100%; gap: var(--hg-space-3); }
  .hg-cta-banner__btn { width: 100%; max-width: 320px; padding: 0.75rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hg-cta-banner__btn { transition: none; }
  .hg-cta-banner__btn:hover { transform: none; }
}

/* ── faq-accordion.liquid ───────────────────────────────── */
.hg-faq {
  --hg-faq-bg:          var(--hg-color-surface-page);
  --hg-faq-text:        var(--hg-color-text-primary);
  --hg-faq-heading-col: var(--hg-color-text-heading);
  --hg-faq-subhead-col: var(--hg-color-text-secondary);
  --hg-faq-q-col:       var(--hg-color-text-heading);
  --hg-faq-a-col:       var(--hg-color-text-primary);
  --hg-faq-border:      var(--hg-color-border);
  --hg-faq-group-col:   var(--hg-accent-gold);
  --hg-faq-chevron-col: var(--hg-accent-gold);
  --hg-faq-item-hover:  var(--hg-color-surface-warm);
  background-color: var(--hg-faq-bg);
  padding: var(--hg-section-padding);
}
.hg-faq--scheme-warm { --hg-faq-bg: var(--hg-color-surface-warm); --hg-faq-item-hover: var(--hg-sandy-beige); }
.hg-faq--scheme-dark {
  --hg-faq-bg:          var(--hg-color-surface-dark);
  --hg-faq-text:        var(--hg-color-text-on-dark);
  --hg-faq-heading-col: var(--hg-color-text-on-dark);
  --hg-faq-subhead-col: var(--hg-sand);
  --hg-faq-q-col:       var(--hg-color-text-on-dark);
  --hg-faq-a-col:       var(--hg-sand);
  --hg-faq-border:      rgba(255,255,255,0.12);
  --hg-faq-item-hover:  rgba(255,255,255,0.05);
}
.hg-faq__container { max-width: 800px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); }
.hg-faq__header { text-align: center; margin-bottom: var(--hg-space-12); }
.hg-faq__heading {
  font-family: var(--hg-font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -0.02em;
  color: var(--hg-faq-heading-col); margin: 0 0 var(--hg-space-4);
}
.hg-faq__subheading {
  font-family: var(--hg-font-body); font-size: 1.0625rem;
  font-weight: 400; line-height: 1.7; color: var(--hg-faq-subhead-col); margin: 0;
}
.hg-faq__group-header { padding: var(--hg-space-8) 0 var(--hg-space-2); }
.hg-faq__group-header:first-child { padding-top: 0; }
.hg-faq__group-label {
  font-family: var(--hg-font-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hg-faq-group-col); margin: 0; line-height: 1.4;
}
.hg-faq__item { border-bottom: 1px solid var(--hg-faq-border); }
.hg-faq__item:first-child { border-top: 1px solid var(--hg-faq-border); }
.hg-faq__details { width: 100%; }
.hg-faq__summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--hg-space-4); padding: var(--hg-space-6) 0;
  cursor: pointer; list-style: none; user-select: none;
  border-radius: var(--hg-radius-sm); transition: background-color var(--hg-transition-fast);
}
.hg-faq__summary::-webkit-details-marker { display: none; }
.hg-faq__summary::marker { content: ''; }
.hg-faq__summary:hover {
  background-color: var(--hg-faq-item-hover);
  padding-left: var(--hg-space-3); padding-right: var(--hg-space-3);
  margin-left: calc(-1 * var(--hg-space-3)); margin-right: calc(-1 * var(--hg-space-3));
}
.hg-faq__summary:focus-visible { outline: 3px solid var(--hg-color-focus); outline-offset: 2px; }
.hg-faq__question {
  font-family: var(--hg-font-heading); font-size: 1.0625rem;
  font-weight: 500; line-height: 1.4; color: var(--hg-faq-q-col); flex: 1;
}
.hg-faq__chevron {
  flex-shrink: 0; width: 1.25rem; height: 1.25rem;
  color: var(--hg-faq-chevron-col); transition: transform 0.3s ease;
}
.hg-faq__details[open] .hg-faq__chevron { transform: rotate(180deg); }
.hg-faq__answer-wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease; overflow: hidden;
}
.hg-faq__details[open] .hg-faq__answer-wrap { grid-template-rows: 1fr; }
.hg-faq__answer {
  overflow: hidden; padding-bottom: var(--hg-space-6);
  font-family: var(--hg-font-body); font-size: 1rem;
  font-weight: 400; line-height: 1.75; color: var(--hg-faq-a-col);
}
.hg-faq__answer p { margin: 0 0 var(--hg-space-4); }
.hg-faq__answer p:last-child { margin-bottom: 0; }
.hg-faq__answer strong { font-weight: 600; }
.hg-faq__answer a { color: var(--hg-color-focus); text-decoration: underline; text-underline-offset: 2px; }
.hg-faq__answer a:hover { opacity: 0.8; }
.hg-faq__empty {
  font-family: var(--hg-font-body); font-size: 0.875rem;
  color: var(--hg-faq-subhead-col); text-align: center;
  padding: var(--hg-space-12) 0; margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hg-faq__answer-wrap { transition: none; }
  .hg-faq__chevron { transition: none; }
}
@media (max-width: 749px) {
  .hg-faq { padding: var(--hg-space-16) 0; }
  .hg-faq__heading { font-size: clamp(1.5rem, 5vw, 1.875rem); }
}

/* ── feature-list.liquid ────────────────────────────────── */
.hg-feature-list {
  --hg-fl-bg:             var(--hg-off-white);
  --hg-fl-text-heading:   var(--hg-color-text-heading);
  --hg-fl-text-primary:   var(--hg-color-text-primary);
  --hg-fl-text-secondary: var(--hg-color-text-secondary);
  --hg-fl-icon-color:     var(--hg-deep-blue, #0d3b52);
  --hg-fl-item-bg:        var(--hg-color-surface-card);
  --hg-fl-item-border:    var(--hg-color-border);
  --hg-fl-cols:           3;
  background-color: var(--hg-fl-bg);
  padding: var(--hg-space-24) var(--hg-space-8);
  transition: background-color var(--hg-transition);
}
.hg-feature-list--bg-off-white { --hg-fl-bg: var(--hg-off-white); --hg-fl-item-bg: var(--hg-color-surface-card); }
.hg-feature-list--bg-cream     { --hg-fl-bg: var(--hg-cream); --hg-fl-item-bg: var(--hg-white); }
.hg-feature-list--bg-dark {
  --hg-fl-bg:             var(--hg-color-surface-dark);
  --hg-fl-text-heading:   var(--hg-color-text-on-dark);
  --hg-fl-text-primary:   var(--hg-color-text-on-dark);
  --hg-fl-text-secondary: var(--hg-sand);
  --hg-fl-icon-color:     var(--hg-deep-blue, #0d3b52);
  --hg-fl-item-bg:        rgba(255,255,255,0.05);
  --hg-fl-item-border:    var(--hg-color-border-warm);
}
.hg-feature-list__grid--cols-2 { --hg-fl-cols: 2; }
.hg-feature-list__grid--cols-3 { --hg-fl-cols: 3; }
.hg-feature-list__inner { max-width: 1200px; margin-inline: auto; padding-inline: var(--hg-space-6); }
.hg-feature-list__header {
  text-align: center; margin-bottom: var(--hg-space-12);
  max-width: 680px; margin-inline: auto; margin-block-end: var(--hg-space-12);
}
.hg-feature-list__headline {
  font-family: var(--hg-font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -0.02em;
  color: var(--hg-fl-text-heading); margin: 0 0 var(--hg-space-4);
}
.hg-feature-list__subheadline {
  font-family: var(--hg-font-body); font-size: 1.125rem;
  font-weight: 400; line-height: 1.7; color: var(--hg-fl-text-secondary); margin: 0;
}
.hg-feature-list__grid {
  display: grid; grid-template-columns: repeat(var(--hg-fl-cols), 1fr);
  gap: var(--hg-space-8); list-style: none; margin: 0; padding: 0;
}
.hg-feature-list__item {
  background-color: transparent; border: none; border-radius: 0;
  padding: var(--hg-space-6); display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: var(--hg-space-3);
}
.hg-feature-list__item:hover { box-shadow: none; transform: none; }
.hg-feature-list__icon-wrap {
  width: 140px; height: 130px; flex-shrink: 0; position: relative;
  color: var(--hg-fl-icon-color); margin-bottom: var(--hg-space-4);
}
.hg-feature-list__icon-wrap::after { display: none; }
.hg-feature-list__icon { display: block; width: 140px; height: 130px; object-fit: contain; }
.hg-feature-list__icon-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 140px; height: 130px; color: var(--hg-fl-icon-color);
}
.hg-feature-list__icon-placeholder svg { width: 140px; height: 130px; }
.hg-feature-list__heading {
  font-family: var(--hg-font-body); font-size: 1.125rem; font-weight: 600;
  line-height: 1.4; letter-spacing: 0; color: var(--hg-fl-text-heading); margin: 0;
}
.hg-feature-list__body {
  font-family: var(--hg-font-body); font-size: 1rem; font-weight: 400;
  line-height: 1.65; color: var(--hg-fl-text-secondary); margin: 0;
}
@media screen and (max-width: 1023px) {
  .hg-feature-list__grid--cols-3 { --hg-fl-cols: 2; }
  .hg-feature-list { padding-block: var(--hg-space-16); }
}
@media screen and (max-width: 749px) {
  .hg-feature-list__grid--cols-2,
  .hg-feature-list__grid--cols-3 { --hg-fl-cols: 1; }
  .hg-feature-list { padding-block: var(--hg-space-8); padding-inline: var(--hg-space-4); }
  .hg-feature-list__inner { padding-inline: var(--hg-space-2); }
  .hg-feature-list__header { margin-block-end: var(--hg-space-6); }
  .hg-feature-list__headline { font-size: clamp(1.375rem, 5vw, 1.625rem); }
  .hg-feature-list__icon-wrap,
  .hg-feature-list__icon,
  .hg-feature-list__icon-placeholder { width: 90px; height: 80px; }
  .hg-feature-list__icon-placeholder svg { width: 90px; height: 80px; }
  .hg-feature-list__body { -webkit-line-clamp: unset; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .hg-feature-list__item { transition: none; }
  .hg-feature-list__item:hover { transform: none; }
}

/* ── manage-subscription.liquid ────────────────────────── */
.hg-manage-sub {
  --hg-ms-bg:               var(--hg-color-surface-page);
  --hg-ms-text:             var(--hg-color-text-primary);
  --hg-ms-heading:          var(--hg-color-text-heading);
  --hg-ms-subhead:          var(--hg-color-text-secondary);
  --hg-ms-border:           var(--hg-color-border);
  --hg-ms-card-bg:          var(--hg-color-surface-card);
  --hg-ms-placeholder-bg:   var(--hg-sandy-beige);
  --hg-ms-placeholder-text: var(--hg-color-text-secondary);
  --hg-ms-placeholder-icon: var(--hg-accent-gold);
  --hg-ms-capability-icon:  var(--hg-accent-gold);
  --hg-ms-link:             var(--hg-color-focus);
  --hg-ms-policy-bg:        var(--hg-color-surface-warm);
  --hg-ms-policy-border:    var(--hg-accent-gold);
  background-color: var(--hg-ms-bg);
  padding: var(--hg-space-16) 0 var(--hg-space-24);
}
.hg-manage-sub--scheme-warm {
  --hg-ms-bg:              var(--hg-color-surface-warm);
  --hg-ms-card-bg:         var(--hg-white);
  --hg-ms-placeholder-bg:  var(--hg-cream);
}
.hg-manage-sub__container {
  max-width: 900px; margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
  display: flex; flex-direction: column; gap: var(--hg-space-12);
}
.hg-manage-sub__header {
  text-align: center; padding-bottom: var(--hg-space-6);
  border-bottom: 1px solid var(--hg-ms-border);
}
.hg-manage-sub__h1 {
  font-family: var(--hg-font-heading); font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--hg-ms-heading); margin: 0 0 var(--hg-space-4);
}
.hg-manage-sub__subheading {
  font-family: var(--hg-font-body); font-size: 1.0625rem;
  font-weight: 400; line-height: 1.7; color: var(--hg-ms-subhead);
  margin: 0; max-width: 600px; margin-inline: auto;
}
.hg-manage-sub__portal-area { width: 100%; }
.hg-manage-sub__portal-card {
  background-color: var(--hg-ms-card-bg); border: 1px solid var(--hg-ms-border);
  border-radius: var(--hg-radius-md); padding: var(--hg-space-8);
  display: flex; align-items: center; gap: var(--hg-space-6);
}
.hg-manage-sub__portal-icon {
  flex-shrink: 0; width: 3rem; height: 3rem;
  background-color: rgba(184,147,95,0.12); border-radius: var(--hg-radius-sm);
  display: flex; align-items: center; justify-content: center; color: var(--hg-accent-gold);
}
.hg-manage-sub__portal-text { flex: 1; display: flex; flex-direction: column; gap: var(--hg-space-1); }
.hg-manage-sub__portal-title {
  font-family: var(--hg-font-heading); font-size: 1.125rem;
  font-weight: 600; color: var(--hg-ms-heading); margin: 0;
}
.hg-manage-sub__portal-desc {
  font-family: var(--hg-font-body); font-size: 0.9375rem;
  line-height: 1.6; color: var(--hg-ms-subhead); margin: 0;
}
.hg-manage-sub__portal-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--hg-space-2);
  font-family: var(--hg-font-body); font-size: 0.9375rem; font-weight: 600;
  color: var(--hg-color-cta-text); background-color: var(--hg-color-cta-bg);
  border-radius: var(--hg-radius-pill); padding: 0.75rem 1.5rem;
  text-decoration: none; transition: var(--hg-transition-fast); white-space: nowrap;
}
.hg-manage-sub__portal-btn:hover { background-color: var(--hg-color-cta-hover-bg); transform: translateY(-1px); }
.hg-manage-sub__portal-btn:focus-visible { outline: 3px solid var(--hg-color-focus); outline-offset: 3px; }
@media (max-width: 640px) {
  .hg-manage-sub__portal-card { flex-direction: column; align-items: flex-start; }
  .hg-manage-sub__portal-btn { width: 100%; justify-content: center; }
}
.hg-manage-sub__help {
  background-color: var(--hg-ms-card-bg); border: 1px solid var(--hg-ms-border);
  border-radius: var(--hg-radius-md); padding: var(--hg-space-8);
}
.hg-manage-sub__help-heading {
  font-family: var(--hg-font-heading); font-size: 1.25rem;
  font-weight: 600; color: var(--hg-ms-heading); margin: 0 0 var(--hg-space-4);
}
.hg-manage-sub__help-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--hg-space-3);
}
.hg-manage-sub__help-link {
  display: inline-flex; align-items: center; gap: var(--hg-space-2);
  font-family: var(--hg-font-body); font-size: 0.9375rem; font-weight: 600;
  color: var(--hg-ms-link); text-decoration: underline; text-underline-offset: 2px;
  transition: var(--hg-transition-fast);
}
.hg-manage-sub__help-link:hover { opacity: 0.75; }
.hg-manage-sub__help-link-icon { flex-shrink: 0; display: flex; align-items: center; }
.hg-manage-sub__capabilities {
  background-color: var(--hg-ms-card-bg); border: 1px solid var(--hg-ms-border);
  border-radius: var(--hg-radius-md); padding: var(--hg-space-8);
}
.hg-manage-sub__capabilities-heading {
  font-family: var(--hg-font-heading); font-size: 1.25rem;
  font-weight: 600; color: var(--hg-ms-heading); margin: 0 0 var(--hg-space-6);
}
.hg-manage-sub__capability-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--hg-space-6);
}
@media (min-width: 640px) { .hg-manage-sub__capability-list { grid-template-columns: 1fr 1fr; } }
.hg-manage-sub__capability-item { display: flex; align-items: flex-start; gap: var(--hg-space-4); }
.hg-manage-sub__capability-icon {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem;
  background-color: rgba(184,147,95,0.12); border-radius: var(--hg-radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--hg-ms-capability-icon); margin-top: 2px;
}
.hg-manage-sub__capability-content { display: flex; flex-direction: column; gap: var(--hg-space-1); }
.hg-manage-sub__capability-title {
  font-family: var(--hg-font-body); font-size: 0.9375rem;
  font-weight: 600; color: var(--hg-ms-heading); margin: 0;
}
.hg-manage-sub__capability-desc {
  font-family: var(--hg-font-body); font-size: 0.875rem;
  font-weight: 400; line-height: 1.65; color: var(--hg-ms-subhead); margin: 0;
}
.hg-manage-sub__policy {
  background-color: var(--hg-ms-policy-bg);
  border-left: 4px solid var(--hg-ms-policy-border);
  border-radius: var(--hg-radius-sm); padding: var(--hg-space-6) var(--hg-space-8);
}
.hg-manage-sub__policy-heading {
  font-family: var(--hg-font-body); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hg-accent-gold); margin: 0 0 var(--hg-space-4);
}
.hg-manage-sub__policy-body {
  font-family: var(--hg-font-body); font-size: 0.9375rem;
  font-weight: 400; line-height: 1.75; color: var(--hg-ms-text);
}
.hg-manage-sub__policy-body p { margin: 0 0 var(--hg-space-3); }
.hg-manage-sub__policy-body p:last-child { margin-bottom: 0; }
.hg-manage-sub__policy-body a { color: var(--hg-ms-link); text-decoration: underline; text-underline-offset: 2px; }
.hg-manage-sub__policy-body strong { font-weight: 600; }
@media (max-width: 749px) {
  .hg-manage-sub { padding: var(--hg-space-10) 0 var(--hg-space-16); }
  .hg-manage-sub__container { gap: var(--hg-space-8); }
}

/* ── shipping-timeline.liquid ───────────────────────────── */
.hg-st-section {
  --hg-st-bg:               var(--hg-color-surface-warm);
  --hg-st-heading-color:    var(--hg-color-text-heading);
  --hg-st-subheading-color: var(--hg-color-text-secondary);
  --hg-st-step-bg:          var(--hg-color-surface-card);
  --hg-st-step-border:      var(--hg-color-border);
  --hg-st-number-bg:        var(--hg-accent-gold);
  --hg-st-number-text:      var(--hg-white);
  --hg-st-number-bg-inactive:   var(--hg-color-border);
  --hg-st-number-text-inactive: var(--hg-color-text-secondary);
  --hg-st-connector-color:  var(--hg-color-border);
  --hg-st-connector-active: var(--hg-accent-gold);
  --hg-st-title-color:      var(--hg-color-text-heading);
  --hg-st-desc-color:       var(--hg-color-text-primary);
  --hg-st-date-color:       var(--hg-accent-gold);
  --hg-st-radius:           var(--hg-radius-md);
  background-color: var(--hg-st-bg);
  padding: var(--hg-section-padding);
}
.hg-st-section__inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--hg-space-8); }
.hg-st-section__header { text-align: center; margin-bottom: var(--hg-space-12); }
.hg-st-section__headline {
  font-family: var(--hg-font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700; color: var(--hg-st-heading-color); margin: 0 0 var(--hg-space-4); line-height: 1.2;
}
.hg-st-section__subheadline {
  font-family: var(--hg-font-body); font-size: 1.0625rem;
  color: var(--hg-st-subheading-color); max-width: 560px; margin: 0 auto; line-height: 1.7;
}
.hg-st-timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
@media (min-width: 768px) { .hg-st-timeline { flex-direction: row; align-items: flex-start; } }
.hg-st-step {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; position: relative; padding-bottom: var(--hg-space-8);
}
.hg-st-step:not(:last-child)::after {
  content: ''; position: absolute; left: calc(50% - 1px);
  top: 40px; width: 2px; bottom: 0;
  background-color: var(--hg-st-connector-color); z-index: 0;
}
.hg-st-step--active:not(:last-child)::after { background-color: var(--hg-st-connector-active); }
@media (min-width: 768px) {
  .hg-st-step { padding-bottom: 0; }
  .hg-st-step::after { content: none; }
  .hg-st-step:not(:last-child) .hg-st-step__connector { display: block; }
}
.hg-st-step__number-wrap {
  position: relative; z-index: 1; margin-bottom: var(--hg-space-4);
  display: flex; align-items: center; justify-content: center; width: 100%;
}
.hg-st-step__number {
  width: 44px; height: 44px; border-radius: 50%;
  background-color: var(--hg-st-number-bg-inactive);
  color: var(--hg-st-number-text-inactive);
  font-family: var(--hg-font-body); font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: var(--hg-transition-fast); position: relative; z-index: 2;
}
.hg-st-step--active .hg-st-step__number {
  background-color: var(--hg-st-number-bg); color: var(--hg-st-number-text);
  box-shadow: 0 0 0 4px rgba(184,147,95,0.2);
}
.hg-st-step__connector {
  display: none; position: absolute; top: 50%;
  left: calc(50% + 22px); right: 0; height: 2px;
  background-color: var(--hg-st-connector-color); transform: translateY(-50%); z-index: 1;
}
@media (min-width: 768px) {
  .hg-st-step:not(:last-child) .hg-st-step__connector { display: block; }
  .hg-st-step--active:not(:last-child) .hg-st-step__connector { background-color: var(--hg-st-connector-active); }
}
@media (max-width: 767px) {
  .hg-st-step { flex-direction: row; text-align: left; align-items: flex-start; gap: var(--hg-space-6); padding-bottom: var(--hg-space-8); }
  .hg-st-step__number-wrap { width: auto; flex-direction: column; flex-shrink: 0; margin-bottom: 0; }
  .hg-st-step:not(:last-child) .hg-st-step__number-wrap::after {
    content: ''; flex: 1; width: 2px; min-height: 40px;
    background-color: var(--hg-st-connector-color); margin-top: var(--hg-space-2);
  }
  .hg-st-step--active:not(:last-child) .hg-st-step__number-wrap::after { background-color: var(--hg-st-connector-active); }
}
.hg-st-step__content { display: flex; flex-direction: column; gap: var(--hg-space-2); flex: 1; }
@media (min-width: 768px) { .hg-st-step__content { padding: 0 var(--hg-space-4); align-items: center; } }
.hg-st-step__title {
  font-family: var(--hg-font-body); font-size: 1.125rem; font-weight: 600;
  color: var(--hg-st-title-color); margin: 0; line-height: 1.4;
}
.hg-st-step__description { font-family: var(--hg-font-body); font-size: 0.9rem; color: var(--hg-st-desc-color); line-height: 1.65; margin: 0; }
.hg-st-step__date { font-family: var(--hg-font-body); font-size: 0.8125rem; font-weight: 600; color: var(--hg-st-date-color); margin: 0; }
@media (prefers-reduced-motion: reduce) { .hg-st-step__number { transition: none; } }

/* ── roaster-spotlight.liquid ───────────────────────────── */
.hg-story {
  --hg-story-bg:          var(--hg-color-surface-dark);
  --hg-story-media-bg:    rgba(255,255,255,0.04);
  --hg-story-placeholder: rgba(255,255,255,0.45);
  --hg-story-eyebrow:     var(--hg-accent-gold);
  --hg-story-heading:     var(--hg-color-text-on-dark);
  --hg-story-body:        var(--hg-sand, #e8dcc8);
  --hg-story-pill-bg:     rgba(255,255,255,0.08);
  --hg-story-pill-border: rgba(255,255,255,0.16);
  --hg-story-pill-text:   var(--hg-sand, #e8dcc8);
  background-color: var(--hg-story-bg);
  display: grid; grid-template-columns: 1fr 1fr; min-height: 480px;
}
.hg-story--bg-off-white {
  --hg-story-bg:          var(--hg-off-white);
  --hg-story-media-bg:    var(--hg-cream);
  --hg-story-placeholder: var(--hg-color-text-secondary, #6b5e4e);
  --hg-story-heading:     var(--hg-color-text-heading);
  --hg-story-body:        var(--hg-color-text-secondary);
  --hg-story-pill-bg:     var(--hg-cream);
  --hg-story-pill-border: var(--hg-color-border);
  --hg-story-pill-text:   var(--hg-color-text-secondary);
}
.hg-story--bg-cream {
  --hg-story-bg:          var(--hg-cream);
  --hg-story-media-bg:    var(--hg-off-white);
  --hg-story-placeholder: var(--hg-color-text-secondary, #6b5e4e);
  --hg-story-heading:     var(--hg-color-text-heading);
  --hg-story-body:        var(--hg-color-text-secondary);
  --hg-story-pill-bg:     var(--hg-off-white);
  --hg-story-pill-border: var(--hg-color-border);
  --hg-story-pill-text:   var(--hg-color-text-secondary);
}
.hg-story--bg-sandy-beige {
  --hg-story-bg:          var(--hg-sandy-beige, #e8dcc8);
  --hg-story-media-bg:    var(--hg-cream);
  --hg-story-placeholder: var(--hg-color-text-secondary, #6b5e4e);
  --hg-story-heading:     var(--hg-color-text-heading);
  --hg-story-body:        var(--hg-color-text-secondary);
  --hg-story-pill-bg:     var(--hg-cream);
  --hg-story-pill-border: var(--hg-color-border);
  --hg-story-pill-text:   var(--hg-color-text-secondary);
}
.hg-story--img-right .hg-story__media  { order: 2; }
.hg-story--img-right .hg-story__content { order: 1; }
.hg-story__media { position: relative; background-color: var(--hg-story-media-bg); overflow: hidden; min-height: 360px; }
.hg-story__img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hg-story__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--hg-story-placeholder); }
.hg-story__placeholder svg { width: min(240px, 55%); height: auto; }
.hg-story__content {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--hg-space-5, 1.25rem); padding: var(--hg-space-16, 4rem) var(--hg-space-16, 4rem);
}
.hg-story__eyebrow {
  font-family: var(--hg-font-body); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--hg-story-eyebrow); margin: 0; line-height: 1;
}
.hg-story__heading {
  font-family: var(--hg-font-heading); font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--hg-story-heading); margin: 0;
}
.hg-story__body { font-family: var(--hg-font-body); font-size: 1rem; font-weight: 400; line-height: 1.75; color: var(--hg-story-body); }
.hg-story__body p { margin: 0 0 var(--hg-space-4, 1rem); }
.hg-story__body p:last-child { margin-bottom: 0; }
.hg-story__pills { display: flex; flex-direction: column; gap: var(--hg-space-3, 0.75rem); }
.hg-story__pills-label {
  font-family: var(--hg-font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--hg-story-eyebrow); margin: 0;
}
.hg-story__pill-list { display: flex; flex-wrap: wrap; gap: var(--hg-space-2, 0.5rem); list-style: none; margin: 0; padding: 0; }
.hg-story__pill {
  font-family: var(--hg-font-body); font-size: 0.8125rem; font-weight: 500;
  color: var(--hg-story-pill-text); background-color: var(--hg-story-pill-bg);
  border: 1px solid var(--hg-story-pill-border); border-radius: var(--hg-radius-pill, 9999px);
  padding: 0.25rem 0.875rem; line-height: 1.5;
}
@media screen and (max-width: 1023px) { .hg-story__content { padding: var(--hg-space-12, 3rem) var(--hg-space-10, 2.5rem); } }
@media screen and (max-width: 749px) {
  .hg-story { grid-template-columns: 1fr; min-height: unset; }
  .hg-story__media  { order: 1 !important; min-height: 260px; }
  .hg-story__content { order: 2 !important; padding: var(--hg-space-10, 2.5rem) var(--hg-space-6, 1.5rem); }
}

/* ── story-split.liquid ─────────────────────────────────── */
.hg-story-split {
  --hg-ss-bg:              var(--hg-color-surface-page);
  --hg-ss-text:            var(--hg-color-text-primary);
  --hg-ss-heading:         var(--hg-color-text-heading);
  --hg-ss-eyebrow:         var(--hg-accent-gold);
  --hg-ss-body:            var(--hg-color-text-primary);
  --hg-ss-img-placeholder: var(--hg-color-text-secondary);
  background-color: var(--hg-ss-bg);
  color: var(--hg-ss-text);
}
.hg-story-split--scheme-warm { --hg-ss-bg: var(--hg-color-surface-warm); }
.hg-story-split--scheme-dark {
  --hg-ss-bg:      var(--hg-color-surface-dark);
  --hg-ss-text:    var(--hg-color-text-on-dark);
  --hg-ss-heading: var(--hg-color-text-on-dark);
  --hg-ss-body:    var(--hg-color-text-on-dark);
  --hg-ss-img-placeholder: var(--hg-sand);
}
.hg-story-split__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.hg-story-split__image-col { position: relative; overflow: hidden; width: 100%; height: 240px; }
.hg-story-split__image-col--square    { height: 240px; }
.hg-story-split__image-col--landscape { height: 200px; }
.hg-story-split__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hg-story-split__image-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--hg-ss-img-placeholder); min-height: 320px; background-color: var(--hg-light-gray);
}
.hg-story-split__image-placeholder svg { width: 100%; max-width: 300px; height: auto; }
.hg-story-split__text-col { display: flex; align-items: center; padding: var(--hg-space-12) var(--hg-space-8); }
.hg-story-split__text-inner { max-width: 100%; width: 100%; display: flex; flex-direction: column; gap: var(--hg-space-6); }
.hg-story-split__eyebrow {
  font-family: var(--hg-font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--hg-ss-eyebrow); margin: 0; line-height: 1.4;
}
.hg-story-split__heading {
  font-family: var(--hg-font-heading); font-size: clamp(1.625rem, 3vw, 2.5rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--hg-ss-heading); margin: 0;
}
.hg-story-split__body { font-family: var(--hg-font-body); font-size: 1rem; font-weight: 400; line-height: 1.75; color: var(--hg-ss-body); }
.hg-story-split__body p { margin: 0 0 var(--hg-space-4); }
.hg-story-split__body p:last-child { margin-bottom: 0; }
.hg-story-split__body strong, .hg-story-split__body b { font-weight: 600; }
.hg-story-split__body em, .hg-story-split__body i { font-style: italic; }
.hg-story-split__cta-wrap { margin-top: var(--hg-space-2); }
.hg-story-split__cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--hg-font-body); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.02em; border-radius: var(--hg-radius-pill); padding: 0.75rem 2rem;
  text-decoration: none; transition: var(--hg-transition-fast); cursor: pointer; line-height: 1.3; white-space: nowrap;
}
.hg-story-split__cta--primary { background-color: var(--hg-color-cta-bg); color: var(--hg-color-cta-text); border: 2px solid transparent; }
.hg-story-split__cta--primary:hover { background-color: var(--hg-color-cta-hover-bg); transform: translateY(-1px); box-shadow: var(--hg-shadow-sm); }
.hg-story-split__cta--secondary { background-color: var(--hg-color-action-bg); color: var(--hg-color-action-text); border: 2px solid transparent; }
.hg-story-split__cta--secondary:hover { background-color: var(--hg-lake-blue); transform: translateY(-1px); box-shadow: var(--hg-shadow-sm); }
.hg-story-split__cta--ghost { background-color: transparent; color: var(--hg-ss-heading); border: 2px solid var(--hg-ss-heading); }
.hg-story-split__cta--ghost:hover { background-color: var(--hg-ss-heading); color: var(--hg-ss-bg); transform: translateY(-1px); }
.hg-story-split--scheme-dark .hg-story-split__cta--ghost { color: var(--hg-color-text-on-dark); border-color: var(--hg-color-text-on-dark); }
.hg-story-split--scheme-dark .hg-story-split__cta--ghost:hover { background-color: var(--hg-color-text-on-dark); color: var(--hg-color-surface-dark); }
.hg-story-split__cta:focus-visible { outline: 3px solid var(--hg-color-focus); outline-offset: 3px; }
@media (min-width: 900px) {
  .hg-story-split__grid { grid-template-columns: 1fr 1fr; gap: var(--hg-space-16); min-height: 480px; }
  .hg-story-split--reversed .hg-story-split__image-col { order: 2; }
  .hg-story-split--reversed .hg-story-split__text-col  { order: 1; }
  .hg-story-split__image-col { min-height: 480px; height: 100%; aspect-ratio: unset; }
  .hg-story-split__image-col--portrait, .hg-story-split__image-col--square, .hg-story-split__image-col--landscape { aspect-ratio: unset; height: 100%; }
  .hg-story-split__text-col { padding: var(--hg-space-16) var(--hg-space-12); }
  .hg-story-split--reversed .hg-story-split__text-col { padding-left: var(--hg-space-16); padding-right: var(--hg-space-8); }
}
@media (prefers-reduced-motion: reduce) {
  .hg-story-split__cta { transition: none; }
  .hg-story-split__cta:hover { transform: none; }
}

/* ── subscribe-hero.liquid ──────────────────────────────── */
.hg-sub-hero {
  --hg-sh-bg:         var(--hg-color-surface-warm);
  --hg-sh-heading:    var(--hg-color-text-heading);
  --hg-sh-body:       var(--hg-color-text-primary);
  --hg-sh-cta-border: var(--hg-color-text-heading);
  --hg-sh-cta-text:   var(--hg-color-text-heading);
  --hg-sh-frame:      var(--hg-color-text-heading);
  background-color: var(--hg-sh-bg);
}
.hg-sub-hero--scheme-dark {
  --hg-sh-bg:         var(--hg-color-surface-dark);
  --hg-sh-heading:    var(--hg-color-text-on-dark);
  --hg-sh-body:       var(--hg-color-text-on-dark);
  --hg-sh-cta-border: var(--hg-color-text-on-dark);
  --hg-sh-cta-text:   var(--hg-color-text-on-dark);
  --hg-sh-frame:      rgba(255,255,255,0.25);
}
.hg-sub-hero--scheme-light {
  --hg-sh-bg:         var(--hg-color-surface-page);
  --hg-sh-heading:    var(--hg-color-text-heading);
  --hg-sh-body:       var(--hg-color-text-primary);
  --hg-sh-cta-border: var(--hg-color-text-heading);
  --hg-sh-cta-text:   var(--hg-color-text-heading);
  --hg-sh-frame:      var(--hg-color-text-heading);
}
.hg-sub-hero__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--hg-space-8);
  max-width: 1280px; margin: 0 auto; padding: var(--hg-space-12) var(--hg-space-8); align-items: start;
}
.hg-sub-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hg-space-4); }
.hg-sub-hero__heading {
  font-family: var(--hg-font-heading); font-size: clamp(1.75rem, 3vw, 2.875rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--hg-sh-heading); margin: 0;
}
.hg-sub-hero__body { font-family: var(--hg-font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--hg-sh-body); max-width: 480px; }
.hg-sub-hero__body p { margin: 0; }
.hg-sub-hero__cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--hg-font-body); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--hg-sh-cta-text); border: 1.5px solid var(--hg-sh-cta-border);
  border-radius: var(--hg-radius-pill); padding: 0.875rem 2.25rem;
  transition: var(--hg-transition-fast); margin-top: var(--hg-space-3);
}
.hg-sub-hero__cta:hover { background-color: var(--hg-sh-cta-border); color: var(--hg-sh-bg); transform: translateY(-1px); }
.hg-sub-hero__cta:focus-visible { outline: 3px solid var(--hg-color-focus); outline-offset: 3px; }
.hg-sub-hero__image-wrap { position: relative; border: 1.5px solid var(--hg-sh-frame); border-radius: 4px; overflow: hidden; line-height: 0; }
.hg-sub-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; aspect-ratio: 4 / 3; }
.hg-sub-hero__placeholder { width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: var(--hg-sh-frame); }
@media (min-width: 900px) {
  .hg-sub-hero__inner { grid-template-columns: 1fr 1fr; gap: var(--hg-space-12); padding: var(--hg-space-16) var(--hg-space-12); align-items: center; }
  .hg-sub-hero__image { aspect-ratio: unset; min-height: 380px; }
}
@media (max-width: 749px) {
  .hg-sub-hero__inner { padding: var(--hg-space-8) var(--hg-space-6); gap: var(--hg-space-6); }
  .hg-sub-hero__heading { font-size: clamp(1.5rem, 6vw, 1.875rem); }
  .hg-sub-hero__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hg-sub-hero__cta { transition: none; }
  .hg-sub-hero__cta:hover { transform: none; }
}

/* ── subscription-plans.liquid ──────────────────────────── */
.hg-plan-section {
  --hg-sp-bg:               var(--hg-color-surface-page);
  --hg-sp-card-bg:          var(--hg-color-surface-card);
  --hg-sp-card-bg-featured: var(--hg-light-blue);
  --hg-sp-card-border:      var(--hg-color-border);
  --hg-sp-card-border-featured: var(--hg-accent-gold);
  --hg-sp-badge-bg:         var(--hg-accent-gold);
  --hg-sp-badge-text:       var(--hg-white);
  --hg-sp-price-color:      var(--hg-accent-gold);
  --hg-sp-check-color:      var(--hg-accent-gold);
  --hg-sp-heading-color:    var(--hg-color-text-heading);
  --hg-sp-subheading-color: var(--hg-color-text-secondary);
  --hg-sp-body-color:       var(--hg-color-text-primary);
  --hg-sp-divider:          var(--hg-color-border);
  --hg-sp-shadow-featured:  var(--hg-shadow-lg);
  --hg-sp-shadow:           var(--hg-shadow-sm);
  --hg-sp-radius:           var(--hg-radius-md);
  --hg-sp-gap:              var(--hg-space-8);
  background-color: var(--hg-sp-bg);
  padding: var(--hg-section-padding);
}
.hg-plan-section__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--hg-space-8); }
.hg-plan-section__header { text-align: center; margin-bottom: var(--hg-space-12); }
.hg-plan-section__headline {
  font-family: var(--hg-font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700; color: var(--hg-sp-heading-color); margin: 0 0 var(--hg-space-4); line-height: 1.2;
}
.hg-plan-section__subheadline {
  font-family: var(--hg-font-body); font-size: 1.125rem; color: var(--hg-sp-subheading-color);
  max-width: 600px; margin: 0 auto; line-height: 1.7;
}
.hg-plan-grid { display: grid; grid-template-columns: 1fr; gap: var(--hg-sp-gap); align-items: start; }
@media (min-width: 750px) {
  .hg-plan-grid { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin: 0 auto; align-items: stretch; }
}
.hg-plan-card {
  position: relative; background-color: var(--hg-sp-card-bg);
  border: 2px solid var(--hg-sp-card-border); border-radius: var(--hg-sp-radius);
  box-shadow: var(--hg-sp-shadow); padding: 1.25rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; transition: var(--hg-transition-fast);
  overflow: hidden;
}
.hg-plan-card:hover { box-shadow: var(--hg-shadow-md); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .hg-plan-card:hover { transform: none; } }
@media (max-width: 749px) {
  .hg-plan-section__inner { padding: 0 var(--hg-space-3); }
  .hg-plan-grid { padding-top: var(--hg-space-4); gap: var(--hg-space-4); }
  .hg-plan-section__headline { font-size: clamp(1.375rem, 5vw, 1.75rem); }
}
.hg-plan-card--featured {
  background-color: var(--hg-sp-card-bg-featured);
  border-color: var(--hg-sp-card-border-featured);
  box-shadow: var(--hg-sp-shadow-featured);
}
.hg-plan-card-outer { position: relative; display: flex; flex-direction: column; padding-top: calc(var(--hg-space-4) + 4px); }
.hg-plan-card-outer--featured { padding-top: calc(var(--hg-space-4) + 4px); }
.hg-plan-card-outer .hg-plan-card { flex: 1; }
.hg-plan-card__badge {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background-color: var(--hg-sp-badge-bg); color: var(--hg-sp-badge-text);
  font-family: var(--hg-font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--hg-space-1) var(--hg-space-4); border-radius: var(--hg-radius-pill);
  white-space: nowrap; z-index: 3;
}
.hg-plan-card__name {
  font-family: var(--hg-font-heading); font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 600; color: var(--hg-sp-heading-color); margin: 0 0 0.25rem; line-height: 1.3; padding-top: 0.5rem;
}
.hg-plan-card__price {
  font-family: var(--hg-font-heading); font-size: clamp(1.375rem, 2.25vw, 1.75rem);
  font-weight: 700; color: var(--hg-sp-price-color); margin: 0 0 0.25rem; line-height: 1.1;
}
.hg-plan-card__billing-note { font-family: var(--hg-font-body); font-size: 0.8125rem; color: var(--hg-sp-subheading-color); margin: 0 0 0.75rem; line-height: 1.5; }
.hg-plan-card__divider { border: none; border-top: 1px solid var(--hg-sp-divider); margin: 0 0 0.75rem; }
.hg-plan-card__features { list-style: none; margin: 0 0 0.75rem; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.hg-plan-card__feature { display: flex; align-items: flex-start; gap: 0.4rem; font-family: var(--hg-font-body); font-size: 0.8125rem; color: var(--hg-sp-body-color); line-height: 1.4; }
.hg-plan-card__feature-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--hg-sp-check-color); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hg-plan-card__cta { display: block; width: 100%; text-align: center; padding: var(--hg-space-4) var(--hg-space-6); border-radius: var(--hg-radius-pill); font-family: var(--hg-font-body); font-size: 1rem; font-weight: 600; text-decoration: none; transition: var(--hg-transition-fast); cursor: pointer; border: 2px solid transparent; }
.hg-plan-card__cta:focus-visible { outline: 3px solid var(--hg-color-focus); outline-offset: 3px; }
.hg-plan-card--featured .hg-plan-card__cta { background-color: var(--hg-color-cta-bg); color: var(--hg-color-cta-text); border-color: var(--hg-color-cta-bg); }
.hg-plan-card--featured .hg-plan-card__cta:hover { background-color: var(--hg-color-cta-hover-bg); border-color: var(--hg-color-cta-hover-bg); }
.hg-plan-card:not(.hg-plan-card--featured) .hg-plan-card__cta { background-color: transparent; color: var(--hg-color-cta-bg); border-color: var(--hg-color-cta-bg); }
.hg-plan-card:not(.hg-plan-card--featured) .hg-plan-card__cta:hover { background-color: var(--hg-color-cta-bg); color: var(--hg-color-cta-text); border-color: var(--hg-color-cta-bg); }
.hg-plan-card product-form-component,
.hg-plan-card add-to-cart-component { display: block; width: 100%; }
.hg-plan-card product-form-component,
.hg-plan-card > a.hg-plan-card__cta { margin-top: auto; }
.hg-plan-card__shipping-badge {
  position: absolute; top: 28px; right: -38px; width: 155px; text-align: center;
  transform: rotate(45deg); background-color: var(--hg-accent-gold, #c8973a); color: #fff;
  font-family: var(--hg-font-body); font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0; white-space: nowrap; pointer-events: none;
}
.hg-grind-selector { margin-bottom: 0.75rem; min-width: 0; }
.hg-grind-selector__label { display: block; font-family: var(--hg-font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hg-sp-heading-color); margin-bottom: var(--hg-space-2); opacity: 0.75; }
.hg-grind-selector__wrap { position: relative; }
.hg-grind-selector__select { appearance: none; -webkit-appearance: none; display: block; width: 100%; font-family: var(--hg-font-body); font-size: 0.875rem; color: var(--hg-sp-heading-color); background-color: transparent; border: 1px solid rgb(var(--color-foreground-rgb) / 0.2); border-radius: var(--hg-radius-sm); padding: 0.5rem 2.25rem 0.5rem 0.75rem; cursor: pointer; transition: border-color var(--hg-transition-fast), box-shadow var(--hg-transition-fast); }
.hg-grind-selector__select:hover { border-color: var(--hg-accent-gold, #b8935f); }
.hg-grind-selector__select:focus { outline: none; border-color: var(--hg-accent-gold, #b8935f); box-shadow: 0 0 0 3px rgb(184 147 95 / 0.18); }
.hg-grind-selector__chevron { position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--hg-sp-heading-color); opacity: 0.6; pointer-events: none; }
.hg-plan-conflict-error { display: none; margin-top: var(--hg-space-3); padding: var(--hg-space-2) var(--hg-space-4); background-color: rgba(197,73,73,0.08); border: 1px solid rgba(197,73,73,0.35); border-radius: var(--hg-radius-md); font-family: var(--hg-font-body); font-size: 0.8125rem; color: #c54949; line-height: 1.5; }
.hg-plan-conflict-error[data-visible="true"] { display: block; }

/* ── box-contents.liquid ────────────────────────────────── */
.hg-bc-section {
  --hg-bc-bg:            var(--hg-color-surface-page);
  --hg-bc-header-bg:     var(--hg-color-surface-warm);
  --hg-bc-card-bg:       var(--hg-color-surface-card);
  --hg-bc-card-border:   var(--hg-color-border);
  --hg-bc-label-color:   var(--hg-accent-gold);
  --hg-bc-heading-color: var(--hg-color-text-heading);
  --hg-bc-body-color:    var(--hg-color-text-primary);
  --hg-bc-meta-color:    var(--hg-color-text-secondary);
  --hg-bc-badge-bg:      var(--hg-light-blue);
  --hg-bc-badge-text:    var(--hg-lake-blue);
  --hg-bc-pill-bg:       var(--hg-sandy-beige);
  --hg-bc-pill-text:     var(--hg-color-text-primary);
  --hg-bc-radius:        var(--hg-radius-md);
  --hg-bc-shadow:        var(--hg-shadow-sm);
  background-color: var(--hg-bc-bg);
  padding: var(--hg-section-padding);
}
.hg-bc-section__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--hg-space-8); }
.hg-bc-section__header { text-align: center; margin-bottom: var(--hg-space-12); }
.hg-bc-section__eyebrow { font-family: var(--hg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hg-bc-label-color); margin: 0 0 var(--hg-space-3); }
.hg-bc-section__headline { font-family: var(--hg-font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--hg-bc-heading-color); margin: 0 0 var(--hg-space-4); line-height: 1.2; }
.hg-bc-section__description { font-family: var(--hg-font-body); font-size: 1.0625rem; color: var(--hg-bc-meta-color); max-width: 640px; margin: 0 auto var(--hg-space-4); line-height: 1.7; }
.hg-bc-section__curator { font-family: var(--hg-font-body); font-size: 0.875rem; font-style: italic; color: var(--hg-bc-meta-color); margin: 0; }
.hg-bc-books-grid { display: grid; grid-template-columns: 1fr; gap: var(--hg-space-8); margin-bottom: var(--hg-space-8); }
@media (min-width: 640px) { .hg-bc-books-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .hg-bc-books-grid { grid-template-columns: repeat(3, 1fr); } }
.hg-bc-extras-grid { display: grid; grid-template-columns: 1fr; gap: var(--hg-space-8); }
@media (min-width: 768px) { .hg-bc-extras-grid { grid-template-columns: repeat(2, 1fr); } }
.hg-bc-card { background-color: var(--hg-bc-card-bg); border: 1px solid var(--hg-bc-card-border); border-radius: var(--hg-bc-radius); box-shadow: var(--hg-bc-shadow); overflow: hidden; display: flex; flex-direction: column; transition: var(--hg-transition-fast); }
.hg-bc-card:hover { box-shadow: var(--hg-shadow-md); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .hg-bc-card:hover { transform: none; } }
.hg-bc-card__image-wrap { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background-color: var(--hg-bc-badge-bg); }
.hg-bc-card__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--hg-transition); }
.hg-bc-card:hover .hg-bc-card__image { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .hg-bc-card:hover .hg-bc-card__image { transform: none; } }
.hg-bc-card__image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--hg-bc-badge-bg); color: var(--hg-bc-label-color); opacity: 0.4; }
.hg-bc-card__image-placeholder svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hg-bc-card__body { padding: var(--hg-space-6); flex: 1; display: flex; flex-direction: column; gap: var(--hg-space-3); }
.hg-bc-card__type-label { font-family: var(--hg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hg-bc-label-color); margin: 0; }
.hg-bc-card__title { font-family: var(--hg-font-heading); font-size: clamp(1.1rem, 1.5vw, 1.375rem); font-weight: 600; color: var(--hg-bc-heading-color); margin: 0; line-height: 1.3; }
.hg-bc-card__author { font-family: var(--hg-font-body); font-size: 0.9rem; color: var(--hg-bc-meta-color); margin: 0; }
.hg-bc-card__age-badge, .hg-bc-card__genre-badge, .hg-bc-card__roast-badge { display: inline-flex; align-items: center; padding: var(--hg-space-1) var(--hg-space-3); background-color: var(--hg-bc-badge-bg); color: var(--hg-bc-badge-text); font-family: var(--hg-font-body); font-size: 0.75rem; font-weight: 600; border-radius: var(--hg-radius-pill); align-self: flex-start; }
.hg-bc-card__synopsis { font-family: var(--hg-font-body); font-size: 0.9rem; color: var(--hg-bc-body-color); line-height: 1.65; margin: 0; flex: 1; }
.hg-bc-card--coffee .hg-bc-card__image-wrap { aspect-ratio: 4 / 3; }
.hg-bc-card__location { display: flex; align-items: center; gap: var(--hg-space-2); font-family: var(--hg-font-body); font-size: 0.875rem; color: var(--hg-bc-meta-color); margin: 0; }
.hg-bc-card__location-icon { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; color: var(--hg-bc-label-color); }
.hg-bc-card__origin { font-family: var(--hg-font-body); font-size: 0.875rem; color: var(--hg-bc-meta-color); margin: 0; }
.hg-bc-card__brew-methods { display: flex; flex-wrap: wrap; gap: var(--hg-space-2); list-style: none; margin: 0; padding: 0; }
.hg-bc-card__brew-pill { padding: var(--hg-space-1) var(--hg-space-3); background-color: var(--hg-bc-pill-bg); color: var(--hg-bc-pill-text); font-family: var(--hg-font-body); font-size: 0.75rem; font-weight: 500; border-radius: var(--hg-radius-pill); border: 1px solid var(--hg-color-border-warm); }
.hg-bc-card__flavor-notes { font-family: var(--hg-font-body); font-size: 0.875rem; color: var(--hg-bc-meta-color); font-style: italic; margin: 0; }
.hg-bc-section__divider { border: none; border-top: 1px solid var(--hg-color-border); margin: var(--hg-space-12) 0; }
.hg-bc-section__subsection-label { font-family: var(--hg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hg-bc-meta-color); margin: 0 0 var(--hg-space-8); text-align: center; }

/* ── seasonal-box-card.liquid ───────────────────────────── */
.hg-sbc-section {
  --hg-sbc-bg:            var(--hg-color-surface-warm);
  --hg-sbc-card-bg:       var(--hg-color-surface-card);
  --hg-sbc-card-border:   var(--hg-color-border);
  --hg-sbc-season-color:  var(--hg-accent-gold);
  --hg-sbc-heading-color: var(--hg-color-text-heading);
  --hg-sbc-body-color:    var(--hg-color-text-primary);
  --hg-sbc-meta-color:    var(--hg-color-text-secondary);
  --hg-sbc-teaser-bg:     var(--hg-light-blue);
  --hg-sbc-radius:        var(--hg-radius-lg);
  --hg-sbc-shadow:        var(--hg-shadow-md);
  background-color: var(--hg-sbc-bg);
  padding: var(--hg-section-padding);
}
.hg-sbc-section__inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--hg-space-8); }
.hg-sbc-card { background-color: var(--hg-sbc-card-bg); border: 1px solid var(--hg-sbc-card-border); border-radius: var(--hg-sbc-radius); box-shadow: var(--hg-sbc-shadow); overflow: hidden; display: grid; grid-template-columns: 1fr; }
@media (max-width: 767px) {
  .hg-sbc-section__inner { padding-inline: var(--hg-space-4); }
  .hg-sbc-card__image-pane { min-height: 220px; }
  .hg-sbc-card__content { padding: var(--hg-space-6); gap: var(--hg-space-3); }
  .hg-sbc-card__box-name { font-size: clamp(1.5rem, 6vw, 2rem); }
  .hg-sbc-card__cta { align-self: stretch; justify-content: center; }
}
@media (min-width: 768px) { .hg-sbc-card { grid-template-columns: 1fr 1fr; } }
.hg-sbc-card__image-pane { position: relative; background-color: var(--hg-sbc-teaser-bg); min-height: 280px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hg-sbc-card__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--hg-transition); }
.hg-sbc-card:hover .hg-sbc-card__image { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .hg-sbc-card:hover .hg-sbc-card__image { transform: none; } }
.hg-sbc-card__teaser-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--hg-space-4); padding: var(--hg-space-8); text-align: center; width: 100%; height: 100%; min-height: 280px; }
.hg-sbc-card__teaser-icon { width: 64px; height: 64px; color: var(--hg-sbc-season-color); opacity: 0.5; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hg-sbc-card__teaser-label { font-family: var(--hg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hg-sbc-meta-color); }
.hg-sbc-card__content { padding: var(--hg-card-padding); display: flex; flex-direction: column; justify-content: center; gap: var(--hg-space-4); }
.hg-sbc-card__season-label { font-family: var(--hg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hg-sbc-season-color); margin: 0; }
.hg-sbc-card__box-name { font-family: var(--hg-font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--hg-sbc-heading-color); line-height: 1.2; margin: 0; }
.hg-sbc-card__ship-date { display: flex; align-items: center; gap: var(--hg-space-2); font-family: var(--hg-font-body); font-size: 0.875rem; color: var(--hg-sbc-meta-color); margin: 0; }
.hg-sbc-card__ship-icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; color: var(--hg-sbc-season-color); }
.hg-sbc-card__teaser-copy { font-family: var(--hg-font-body); font-size: 1rem; color: var(--hg-sbc-body-color); line-height: 1.7; margin: 0; }
.hg-sbc-card__cta { display: inline-flex; align-items: center; gap: var(--hg-space-2); padding: var(--hg-space-3) var(--hg-space-8); background-color: var(--hg-color-cta-bg); color: var(--hg-color-cta-text); font-family: var(--hg-font-body); font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: var(--hg-radius-pill); transition: var(--hg-transition-fast); align-self: flex-start; border: 2px solid transparent; margin-top: var(--hg-space-2); }
.hg-sbc-card__cta:hover { background-color: var(--hg-color-cta-hover-bg); }
.hg-sbc-card__cta:focus-visible { outline: 3px solid var(--hg-color-focus); outline-offset: 3px; }
.hg-sbc-card__state-badge { display: inline-flex; align-items: center; padding: var(--hg-space-1) var(--hg-space-3); background-color: var(--hg-sbc-season-color); color: var(--hg-white); font-family: var(--hg-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--hg-radius-pill); align-self: flex-start; }

/* ── product-box-hero.liquid ────────────────────────────── */
.hg-product-hero {
  --hg-ph-bg:            var(--hg-color-surface-page);
  --hg-ph-text:          var(--hg-color-text-primary);
  --hg-ph-heading:       var(--hg-color-text-heading);
  --hg-ph-subtext:       var(--hg-color-text-secondary);
  --hg-ph-border:        var(--hg-color-border);
  --hg-ph-thumb-border:  var(--hg-color-border);
  --hg-ph-thumb-active:  var(--hg-accent-gold);
  --hg-ph-price:         var(--hg-color-text-heading);
  --hg-ph-sale:          var(--hg-accent-gold);
  --hg-ph-tagline:       var(--hg-color-text-secondary);
  --hg-ph-trust-icon:    var(--hg-accent-gold);
  --hg-ph-upsell-bg:     var(--hg-color-surface-warm);
  --hg-ph-upsell-border: var(--hg-accent-gold);
  --hg-ph-gift-bg:       var(--hg-color-surface-warm);
  --hg-ph-placeholder-col: var(--hg-color-text-secondary);
  background-color: var(--hg-ph-bg);
  padding: var(--hg-space-10) 0 var(--hg-space-16);
}
.hg-product-hero--scheme-warm { --hg-ph-bg: var(--hg-color-surface-warm); --hg-ph-upsell-bg: var(--hg-cream); --hg-ph-gift-bg: var(--hg-cream); }
.hg-product-hero__container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2rem); display: grid; grid-template-columns: 1fr; gap: var(--hg-space-10); }
@media (min-width: 900px) { .hg-product-hero__container { grid-template-columns: 1fr 1fr; gap: var(--hg-space-16); align-items: start; } }
.hg-product-hero__gallery { display: flex; flex-direction: column; gap: var(--hg-space-4); }
.hg-product-hero__main-image-wrap { position: relative; overflow: hidden; border-radius: var(--hg-radius-md); background-color: var(--hg-color-surface-warm); aspect-ratio: 4 / 5; }
.hg-product-hero__main-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--hg-radius-md); }
.hg-product-hero__image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--hg-ph-placeholder-col); }
.hg-product-hero__image-placeholder svg { width: 100%; height: auto; }
.hg-product-hero__thumbnails { display: flex; gap: var(--hg-space-2); flex-wrap: wrap; }
.hg-product-hero__thumb-btn { width: 5rem; height: 5rem; overflow: hidden; border-radius: var(--hg-radius-sm); border: 2px solid var(--hg-ph-thumb-border); background: none; padding: 0; cursor: pointer; transition: border-color var(--hg-transition-fast); flex-shrink: 0; }
.hg-product-hero__thumb-btn--active, .hg-product-hero__thumb-btn:hover { border-color: var(--hg-ph-thumb-active); }
.hg-product-hero__thumb-btn:focus-visible { outline: 3px solid var(--hg-color-focus); outline-offset: 2px; }
.hg-product-hero__thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.hg-product-hero__details { display: flex; flex-direction: column; gap: var(--hg-space-5); }
@media (min-width: 900px) { .hg-product-hero__details { position: sticky; top: var(--hg-space-6); } }
.hg-product-hero__breadcrumb { font-family: var(--hg-font-body); }
.hg-product-hero__breadcrumb-list { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--hg-space-1); font-size: 0.8125rem; color: var(--hg-ph-subtext); }
.hg-product-hero__breadcrumb-link { color: var(--hg-ph-subtext); text-decoration: underline; text-underline-offset: 2px; }
.hg-product-hero__breadcrumb-link:hover { color: var(--hg-ph-heading); }
.hg-product-hero__breadcrumb-sep { color: var(--hg-ph-subtext); opacity: 0.5; }
.hg-product-hero__breadcrumb-current { color: var(--hg-ph-text); font-weight: 500; }
.hg-product-hero__title { font-family: var(--hg-font-heading); font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--hg-ph-heading); margin: 0; }
.hg-product-hero__price { display: flex; align-items: baseline; gap: var(--hg-space-3); }
.hg-product-hero__price-current, .hg-product-hero__price-sale { font-family: var(--hg-font-body); font-size: 1.5rem; font-weight: 700; color: var(--hg-ph-price); }
.hg-product-hero__price-sale { color: var(--hg-ph-sale); }
.hg-product-hero__price-compare { font-family: var(--hg-font-body); font-size: 1rem; color: var(--hg-ph-subtext); }
.hg-product-hero__tagline { font-family: var(--hg-font-body); font-size: 1rem; font-style: italic; color: var(--hg-ph-tagline); margin: 0; line-height: 1.6; }
.hg-product-hero__desc { font-family: var(--hg-font-body); font-size: 1rem; line-height: 1.75; color: var(--hg-ph-text); }
.hg-product-hero__form { display: flex; flex-direction: column; gap: var(--hg-space-4); }
.hg-product-hero__variants { display: flex; flex-wrap: wrap; gap: var(--hg-space-2); }
.hg-product-hero__variant-btn { padding: var(--hg-space-2) var(--hg-space-4); border: 2px solid var(--hg-ph-border); border-radius: var(--hg-radius-pill); background-color: var(--hg-white); font-family: var(--hg-font-body); font-size: 0.875rem; font-weight: 500; color: var(--hg-ph-text); cursor: pointer; transition: var(--hg-transition-fast); }
.hg-product-hero__variant-btn:hover:not([aria-disabled="true"]) { border-color: var(--hg-accent-gold); color: var(--hg-accent-gold); }
.hg-product-hero__variant-btn--active { border-color: var(--hg-accent-gold); background-color: var(--hg-accent-gold); color: var(--hg-white); }
.hg-product-hero__variant-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.hg-product-hero__variant-btn:focus-visible { outline: 3px solid var(--hg-color-focus); outline-offset: 2px; }
.hg-product-hero__qty-row { display: flex; align-items: center; gap: var(--hg-space-4); }
.hg-product-hero__qty-label { font-family: var(--hg-font-body); font-size: 0.875rem; font-weight: 600; color: var(--hg-ph-text); white-space: nowrap; }
.hg-product-hero__qty-input { width: 5rem; padding: 0.5rem 0.75rem; border: 2px solid var(--hg-ph-border); border-radius: var(--hg-radius-sm); font-family: var(--hg-font-body); font-size: 1rem; color: var(--hg-ph-text); background-color: var(--hg-white); text-align: center; appearance: textfield; -moz-appearance: textfield; }
.hg-product-hero__qty-input:focus { outline: 3px solid var(--hg-color-focus); outline-offset: 2px; border-color: var(--hg-color-focus); }
.hg-product-hero__add-to-cart { display: flex; align-items: center; justify-content: center; width: 100%; padding: 1rem 2rem; background-color: var(--hg-color-cta-bg); color: var(--hg-color-cta-text); font-family: var(--hg-font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; border: none; border-radius: var(--hg-radius-pill); cursor: pointer; transition: var(--hg-transition-fast); }
.hg-product-hero__add-to-cart:hover:not(:disabled) { background-color: var(--hg-color-cta-hover-bg); transform: translateY(-1px); box-shadow: var(--hg-shadow-sm); }
.hg-product-hero__add-to-cart:disabled { opacity: 0.5; cursor: not-allowed; }
.hg-product-hero__add-to-cart:focus-visible { outline: 3px solid var(--hg-color-focus); outline-offset: 3px; }
.hg-product-hero__shipping-note { display: flex; align-items: center; gap: var(--hg-space-2); font-family: var(--hg-font-body); font-size: 0.8125rem; color: var(--hg-ph-subtext); margin: 0; line-height: 1.5; }
.hg-product-hero__trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--hg-space-4); padding-top: var(--hg-space-2); padding-bottom: var(--hg-space-2); border-top: 1px solid var(--hg-ph-border); border-bottom: 1px solid var(--hg-ph-border); }
.hg-product-hero__trust-item { display: flex; align-items: center; gap: var(--hg-space-2); font-family: var(--hg-font-body); font-size: 0.8125rem; font-weight: 500; color: var(--hg-ph-subtext); }
.hg-product-hero__trust-item svg { color: var(--hg-ph-trust-icon); flex-shrink: 0; }
.hg-product-hero__upsell { background-color: var(--hg-ph-upsell-bg); border: 1px solid var(--hg-ph-upsell-border); border-radius: var(--hg-radius-sm); padding: var(--hg-space-4) var(--hg-space-5); }
.hg-product-hero__upsell-text { font-family: var(--hg-font-body); font-size: 0.9375rem; color: var(--hg-ph-text); margin: 0; line-height: 1.6; }
.hg-product-hero__upsell-link { color: var(--hg-color-focus); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.hg-product-hero__upsell-link:hover { opacity: 0.8; }
.hg-product-hero__gift-note { padding-top: var(--hg-space-1); }
.hg-product-hero__gift-label { display: flex; align-items: center; gap: var(--hg-space-3); font-family: var(--hg-font-body); font-size: 0.875rem; color: var(--hg-ph-text); cursor: pointer; user-select: none; }
.hg-product-hero__gift-check { width: 1.1rem; height: 1.1rem; accent-color: var(--hg-accent-gold); cursor: pointer; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .hg-product-hero__add-to-cart, .hg-product-hero__thumb-btn { transition: none; }
  .hg-product-hero__add-to-cart:hover { transform: none; }
}
@media (max-width: 899px) { .hg-product-hero { padding: var(--hg-space-6) 0 var(--hg-space-12); } }

/* ── style-guide.liquid ─────────────────────────────────── */
.hg-sg { font-family: var(--hg-font-body); color: var(--hg-color-text-primary); }
.hg-sg__container { max-width: 1100px; margin: 0 auto; padding: 0 var(--hg-space-8); }
.hg-sg__header { background: var(--hg-color-surface-dark); padding: var(--hg-space-16) 0 var(--hg-space-12); }
.hg-sg__eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hg-accent-gold); margin: 0 0 var(--hg-space-2); }
.hg-sg__title { font-family: var(--hg-font-heading); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; color: var(--hg-color-text-on-dark); margin: 0 0 var(--hg-space-3); }
.hg-sg__meta { font-size: 0.875rem; color: var(--hg-sage); margin: 0 0 var(--hg-space-8); }
.hg-sg__nav { display: flex; flex-wrap: wrap; gap: var(--hg-space-4); }
.hg-sg__nav a { color: var(--hg-sand); font-size: 0.875rem; text-decoration: none; border-bottom: 1px solid rgba(218,200,173,0.3); padding-bottom: 2px; transition: var(--hg-transition-fast); }
.hg-sg__nav a:hover { color: var(--hg-accent-gold); border-bottom-color: var(--hg-accent-gold); }
.hg-sg__section { padding: var(--hg-space-16) 0; }
.hg-sg__section--warm { background: var(--hg-color-surface-warm); }
.hg-sg__section--dark { background: var(--hg-color-surface-dark); }
.hg-sg__section-title { font-family: var(--hg-font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; margin: 0 0 var(--hg-space-3); }
.hg-sg__section--dark .hg-sg__section-title { color: var(--hg-color-text-on-dark); }
.hg-sg__section-desc { font-size: 1rem; color: var(--hg-color-text-secondary); max-width: 680px; margin: 0 0 var(--hg-space-12); line-height: 1.65; }
.hg-sg__group-title { font-family: var(--hg-font-body); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hg-accent-gold); margin: var(--hg-space-8) 0 var(--hg-space-4); }
.hg-sg__swatches { display: flex; flex-wrap: wrap; gap: var(--hg-space-3); margin-bottom: var(--hg-space-4); }
.hg-sg__swatch { width: 140px; height: 90px; border-radius: var(--hg-radius-md); display: flex; align-items: flex-end; padding: var(--hg-space-2); position: relative; }
.hg-sg__swatch--bordered { border: 1px solid var(--hg-color-border); }
.hg-sg__swatch-label { font-size: 0.7rem; line-height: 1.4; color: var(--hg-text-dark); font-family: monospace; }
.hg-sg__swatch-label--light { color: rgba(255,255,255,0.9); }
.hg-sg__token-table { display: flex; flex-direction: column; gap: var(--hg-space-2); margin-top: var(--hg-space-4); }
.hg-sg__token-row { display: flex; align-items: center; gap: var(--hg-space-4); padding: var(--hg-space-2) var(--hg-space-3); background: var(--hg-color-surface-card); border-radius: var(--hg-radius-sm); border: 1px solid var(--hg-color-border); font-size: 0.875rem; }
.hg-sg__token-swatch { width: 28px; height: 28px; border-radius: var(--hg-radius-sm); flex-shrink: 0; }
.hg-sg__token-swatch--bordered { border: 1px solid var(--hg-color-border); }
.hg-sg__token-row code { min-width: 260px; font-size: 0.8rem; color: var(--hg-lake-blue); }
.hg-sg__token-row span { color: var(--hg-color-text-secondary); font-size: 0.825rem; }
.hg-sg__type-stack { display: flex; flex-direction: column; gap: 0; }
.hg-sg__type-row { padding: var(--hg-space-6) 0; border-bottom: 1px solid var(--hg-color-border); }
.hg-sg__type-meta { display: block; font-size: 0.7rem; color: var(--hg-color-text-secondary); font-family: monospace; margin-bottom: var(--hg-space-2); }
.hg-sg__type-display { font-family: var(--hg-font-heading); font-size: clamp(3rem, 6vw, 5rem); font-weight: 700; line-height: 1.1; margin: 0; color: var(--hg-color-text-heading); }
.hg-sg__type-h1 { font-family: var(--hg-font-heading); font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.15; margin: 0; color: var(--hg-color-text-heading); }
.hg-sg__type-h2 { font-family: var(--hg-font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.2; margin: 0; color: var(--hg-color-text-heading); }
.hg-sg__type-h3 { font-family: var(--hg-font-heading); font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.3; margin: 0; color: var(--hg-color-text-heading); }
.hg-sg__type-h4 { font-family: var(--hg-font-body); font-size: 1.125rem; font-weight: 600; line-height: 1.4; margin: 0; color: var(--hg-color-text-heading); }
.hg-sg__type-body-lg { font-size: 1.125rem; line-height: 1.7; margin: 0; }
.hg-sg__type-body { font-size: 1rem; line-height: 1.65; margin: 0; }
.hg-sg__type-small { font-size: 0.875rem; line-height: 1.5; color: var(--hg-color-text-secondary); margin: 0; }
.hg-sg__type-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hg-accent-gold); margin: 0; }
.hg-sg__type-italic { font-family: var(--hg-font-heading); font-style: italic; font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--hg-color-text-heading); margin: 0; }
.hg-sg__spacing-stack { display: flex; flex-direction: column; gap: var(--hg-space-3); }
.hg-sg__spacing-row { display: flex; align-items: center; gap: var(--hg-space-6); }
.hg-sg__spacing-name { min-width: 160px; font-size: 0.8rem; color: var(--hg-lake-blue); }
.hg-sg__spacing-val { font-size: 0.8rem; color: var(--hg-color-text-secondary); min-width: 40px; }
.hg-sg__btn-row { display: flex; flex-wrap: wrap; gap: var(--hg-space-8); margin-bottom: var(--hg-space-6); }
.hg-sg__btn-item { display: flex; flex-direction: column; gap: var(--hg-space-2); }
.hg-sg__btn-item code { font-size: 0.75rem; color: var(--hg-lake-blue); }
.hg-sg__btn-item span { font-size: 0.75rem; color: var(--hg-color-text-secondary); max-width: 180px; }
.hg-sg__dark-preview { background: var(--hg-color-surface-dark); padding: var(--hg-space-8); border-radius: var(--hg-radius-lg); display: flex; gap: var(--hg-space-4); flex-wrap: wrap; }
.hg-sg__card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--hg-space-6); margin-bottom: var(--hg-space-12); }
.hg-sg__quote-card { background: var(--hg-color-surface-card); border: 1px solid var(--hg-color-border); border-radius: var(--hg-radius-lg); box-shadow: var(--hg-shadow-sm); padding: var(--hg-card-padding); display: flex; flex-direction: column; gap: var(--hg-space-4); }
.hg-sg__quote-mark { font-family: var(--hg-font-heading); font-style: italic; font-size: 4rem; line-height: 1; color: var(--hg-accent-gold); opacity: 0.4; display: block; margin-bottom: calc(-1 * var(--hg-space-4)); }
.hg-sg__quote-text { font-family: var(--hg-font-heading); font-style: italic; font-size: 1.0625rem; line-height: 1.6; margin: 0; color: var(--hg-color-text-primary); }
.hg-sg__quote-stars { display: flex; gap: 2px; }
.hg-sg__quote-attr { display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; }
.hg-sg__quote-attr strong { color: var(--hg-color-text-heading); }
.hg-sg__quote-attr span { color: var(--hg-color-text-secondary); }
.hg-sg__quote-badge { display: inline-block; width: fit-content; font-size: 0.7rem; font-weight: 600; color: var(--hg-accent-gold); border: 1px solid var(--hg-color-border-warm); border-radius: var(--hg-radius-pill); padding: 2px 10px; margin-top: var(--hg-space-1); }
.hg-sg__radius-row { display: flex; flex-wrap: wrap; gap: var(--hg-space-6); margin-bottom: var(--hg-space-12); }
.hg-sg__radius-item { width: 120px; height: 80px; background: var(--hg-color-surface-warm); border: 2px solid var(--hg-color-border-warm); display: flex; align-items: center; justify-content: center; text-align: center; }
.hg-sg__radius-item code { font-size: 0.7rem; color: var(--hg-lake-blue); line-height: 1.4; }
.hg-sg__shadow-row { display: flex; flex-wrap: wrap; gap: var(--hg-space-6); }
.hg-sg__shadow-item { width: 160px; height: 80px; background: var(--hg-color-surface-card); border-radius: var(--hg-radius-md); display: flex; align-items: center; justify-content: center; }
.hg-sg__shadow-item code { font-size: 0.7rem; color: var(--hg-lake-blue); }
.hg-sg__form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--hg-space-12); }
.hg-sg__form-group { display: flex; flex-direction: column; gap: var(--hg-space-2); margin-bottom: var(--hg-space-6); }
.hg-sg__label { font-size: 0.875rem; font-weight: 600; color: var(--hg-color-text-heading); }
.hg-sg__input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--hg-color-border); border-radius: var(--hg-radius-md); font-family: var(--hg-font-body); font-size: 1rem; background: var(--hg-color-surface-card); color: var(--hg-color-text-primary); transition: var(--hg-transition-fast); box-sizing: border-box; }
.hg-sg__input:focus { outline: 3px solid var(--hg-color-focus); outline-offset: 2px; border-color: var(--hg-color-focus); }
.hg-sg__input--error { border-color: #c0392b; }
.hg-sg__input--error:focus { outline-color: #c0392b; }
.hg-sg__textarea { resize: vertical; }
.hg-sg__input-hint { font-size: 0.8rem; color: var(--hg-color-text-secondary); }
.hg-sg__input-error { font-size: 0.8rem; color: #c0392b; }
.hg-sg__email-capture { background: var(--hg-color-surface-card); border-radius: var(--hg-radius-lg); padding: var(--hg-space-8); box-shadow: var(--hg-shadow-sm); }
.hg-sg__email-capture p { margin: 0 0 var(--hg-space-4); }
.hg-sg__signup-row { display: flex; gap: var(--hg-space-3); flex-wrap: wrap; }
.hg-sg__signup-row .hg-sg__input { flex: 1; min-width: 200px; }
.hg-sg__inventory { display: flex; flex-direction: column; gap: var(--hg-space-2); }
.hg-sg__inv-row { display: flex; align-items: center; gap: var(--hg-space-4); padding: var(--hg-space-3) var(--hg-space-4); background: var(--hg-color-surface-card); border-radius: var(--hg-radius-sm); border: 1px solid var(--hg-color-border); font-size: 0.875rem; flex-wrap: wrap; }
.hg-sg__inv-badge { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: var(--hg-radius-pill); min-width: 64px; text-align: center; }
.hg-sg__inv-badge--complete { background: #d1fae5; color: #065f46; }
.hg-sg__inv-badge--new { background: #dbeafe; color: #1e40af; }
.hg-sg__inv-badge--partial { background: #fef3c7; color: #92400e; }
.hg-sg__inv-row code { font-size: 0.75rem; color: var(--hg-lake-blue); }
.hg-sg__inv-desc { font-size: 0.8rem; color: var(--hg-color-text-secondary); }
.hg-sg__checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--hg-space-3); }
.hg-sg__checklist li { color: var(--hg-sand); font-size: 0.9375rem; padding-left: var(--hg-space-6); position: relative; line-height: 1.5; }
.hg-sg__checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--hg-accent-gold); font-weight: 700; }
.hg-sg__checklist code { background: rgba(255,255,255,0.1); padding: 1px 6px; border-radius: 3px; font-size: 0.85em; color: var(--hg-sand); }
@media (max-width: 749px) {
  .hg-sg__container { padding: 0 var(--hg-space-4); }
  .hg-sg__token-row code { min-width: unset; }
  .hg-sg__inv-row { flex-direction: column; align-items: flex-start; gap: var(--hg-space-2); }
  .hg-sg__signup-row { flex-direction: column; }
  .hg-sg__signup-row .hg-sg__input { min-width: unset; }
}

/* ============================================================
   FOOTER — Hide Shopify auto-generated policy popover button
   The footer-policy-list block is driven by shop.policies in
   Shopify admin and may persist even when removed from JSON.
   Explicit legal links are in the footer_legal_links text block.
   ============================================================ */
.policy-list-trigger { display: none !important; }

/* ============================================================
   CART DRAWER — Homeground brand alignment
   Targets Horizon's native cart drawer (not Recharge).
   Selectors confirmed from snippets/header-actions.liquid.
   ============================================================ */

/* Heading: "Your cart (0)" and "Your cart is empty!" */
.cart-drawer__heading {
  font-family: var(--hg-font-heading) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Primary checkout button */
.cart__checkout-button {
  background-color: var(--hg-color-cta-bg) !important;
  color: var(--hg-color-cta-text) !important;
  border-color: var(--hg-color-cta-bg) !important;
  border-radius: var(--hg-radius-pill) !important;
  font-family: var(--hg-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

.cart__checkout-button:hover:not(:disabled) {
  background-color: var(--hg-color-cta-hover-bg) !important;
  border-color: var(--hg-color-cta-hover-bg) !important;
}

/* "Continue shopping" button in empty cart state */
.cart-items__empty-button {
  background-color: var(--hg-color-cta-bg) !important;
  color: var(--hg-color-cta-text) !important;
  border-color: var(--hg-color-cta-bg) !important;
  border-radius: var(--hg-radius-pill) !important;
  font-family: var(--hg-font-body) !important;
  font-weight: 600 !important;
}

.cart-items__empty-button:hover {
  background-color: var(--hg-color-cta-hover-bg) !important;
  border-color: var(--hg-color-cta-hover-bg) !important;
}

/* Cart item titles and prices — body font */
.cart-items .cart-item__title,
.cart-item__info .price {
  font-family: var(--hg-font-body) !important;
}

/* ============================================================
   MOBILE NAV — Logo left, icons right (Apple-style, sticky)
   ============================================================ */
@media screen and (max-width: 749px) {
  .header__columns,
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: auto 1fr auto auto auto !important;
    grid-template-areas: 'logo . search cart menu' !important;
    padding-inline: var(--padding-sm) var(--padding-xs) !important;
    column-gap: var(--gap-sm) !important;
  }

  .header__columns .header-logo,
  #header-component[data-menu-style='drawer'] .header__columns .header-logo {
    grid-area: logo !important;
  }

  .header__columns .search-action,
  #header-component[data-menu-style='drawer'] .header__columns .search-action {
    grid-area: search !important;
  }

  .header__columns header-actions,
  #header-component[data-menu-style='drawer'] .header__columns header-actions {
    grid-area: cart !important;
  }

  /* .header__drawer is the actual grid item wrapping the hamburger */
  .header__columns .header__drawer,
  #header-component[data-menu-style='drawer'] .header__columns .header__drawer {
    grid-area: menu !important;
  }
}

/* ============================================================
   MOBILE DRAWER — Apple-style animation
   ============================================================ */
@media screen and (max-width: 749px) {

  /* ── Drawer slide down / up ─────────────────────────────────
     CSS *animations* (not transitions) so Horizon's getAnimations()
     waits for them before resetting the <details> [open] attribute.
     Animated properties (transform, visibility) carry no !important —
     !important beats keyframes in the cascade and would freeze the
     animation — they win over Horizon by selector specificity.
     Close state matches [open]:not(.menu-open) — the window between
     menu-open removal and Horizon's reset() call.                  */

  @keyframes hg-drawer-slide-down {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
  }

  @keyframes hg-drawer-slide-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-100%); }
  }

  .menu-drawer-container .menu-drawer {
    transform: translateY(-100%);
    visibility: hidden;
    /* display:flex prevents UA <details>:not([open]) from collapsing
       the drawer before our close animation finishes.              */
    display: flex !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    border-right: none !important;
    box-shadow: none !important;
    background-color: rgba(26, 26, 26, 0.97) !important;
    backdrop-filter: blur(20px);
    overflow-y: auto !important;
    /* Kill Horizon's transform/visibility transition — keyframes only */
    transition: none !important;
  }

  /* Open — slides down, 700ms */
  .menu-drawer-container.menu-open > .menu-drawer {
    animation: hg-drawer-slide-down 0.7s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
  }

  /* Close — slides up, 500ms */
  .menu-drawer-container[open]:not(.menu-open) > .menu-drawer {
    animation: hg-drawer-slide-up 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
    visibility: visible;
  }

  /* Disable the native dim backdrop */
  .menu-drawer__backdrop {
    display: none !important;
  }

  /* ── Hamburger → X morph ────────────────────────────────────
     icon-menu.svg is two horizontal bars (y=3.5 / y=10.5 in a
     14×14 viewBox), inlined into the DOM — so the bars themselves
     can rotate and converge into an X. The summary stays visible
     above the overlay (sibling of .menu-drawer inside <details>;
     z-index 20 vs the drawer's 18) and acts as the close button —
     Horizon's on:click="/toggle" already handles the tap.          */

  .menu-drawer-container .header__icon--summary {
    position: relative !important;
    z-index: calc(var(--layer-menu-drawer) + 2) !important;
    transition: color 0.4s ease !important;
  }

  /* Never swap to the separate close icon — the bars morph instead */
  .menu-drawer-container .header__icon--summary .header-drawer-icon--close {
    display: none !important;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: flex !important;
  }

  .header__icon--summary .header-drawer-icon--open svg path {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s ease;
  }

  details.menu-open .header__icon--summary .header-drawer-icon--open svg path:first-of-type {
    transform: translateY(3.5px) rotate(45deg);
  }

  details.menu-open .header__icon--summary .header-drawer-icon--open svg path:last-of-type {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  /* X must read white against the dark overlay */
  details.menu-open .header__icon--summary {
    color: #ffffff !important;
  }

  /* The morphed hamburger IS the close button — hide the duplicate */
  .menu-drawer > .menu-drawer__close-button {
    display: none !important;
  }

  /* ── Staggered item cascade ─────────────────────────────────
     600ms per item, 250ms base delay, 70ms stagger.             */

  @keyframes hg-item-cascade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation-name: hg-item-cascade-in !important;
    animation-duration: 0.6s !important;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    animation-delay: calc(0.25s + (var(--menu-drawer-animation-index, 1) - 1) * 0.07s) !important;
    animation-fill-mode: backwards !important;
  }

  /* ── Typography & spacing ───────────────────────────────── */

  .menu-drawer__menu-item--mainlist {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    font-weight: 700 !important;
    font-family: var(--hg-font-heading) !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    min-height: auto !important;
    padding-block: 0.1em !important;
  }

  .menu-drawer__menu-item--mainlist:hover {
    color: rgba(255, 255, 255, 0.6) !important;
  }

  /* Caret arrow padding drives item height — collapse it */
  .menu-drawer .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-2xs) !important;
  }

  /* Top padding: all menus share inline padding; only the root
     has-submenu list gets the 6.5rem to clear the header zone
     where the morphing X sits.                                  */
  .menu-drawer__menu {
    padding-inline: var(--padding-xl) !important;
    padding-block-start: 0 !important;
    margin-block-end: 0 !important;
  }

  .menu-drawer__menu.has-submenu {
    padding-block-start: 6.5rem !important;
  }

  /* Child lists sit flush under their parent heading */
  .menu-drawer__menu--childlist {
    padding-inline: 0 !important;
    padding-block: 0.25rem 0.5rem !important;
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    min-height: auto !important;
  }

  .menu-drawer__list-item--divider {
    border-block-end: none !important;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat,
  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: 0 !important;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist {
    margin-block-end: 0 !important;
  }

  /* White icons throughout the overlay */
  .menu-drawer .header-drawer-icon svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
  }

  .menu-drawer__menu-item--child {
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    padding-block: 0.2em !important;
  }
}

/* ── backdrop-filter unsupported: solid dark fade instead ── */
@media screen and (max-width: 749px) {
  @supports not (backdrop-filter: blur(20px)) {
    .menu-drawer {
      background-color: #1a1a1a !important;
    }
  }
}

/* ── Reduced motion: plain crossfade, no slide/stagger ── */
@media screen and (max-width: 749px) and (prefers-reduced-motion: reduce) {
  .menu-drawer-container .menu-drawer {
    transform: none !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease !important;
  }
  .menu-drawer-container.menu-open > .menu-drawer {
    animation: none !important;
    opacity: 1;
    visibility: visible;
  }
  .menu-drawer-container[open]:not(.menu-open) > .menu-drawer {
    animation: none !important;
    opacity: 0;
    visibility: hidden;
  }
  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation-duration: 0.15s !important;
    animation-delay: 0s !important;
  }
  /* No bar rotation — instant icon state change, color crossfade only */
  .header__icon--summary .header-drawer-icon--open svg path {
    transition: none !important;
  }
}