/** Shopify CDN: Minification failed

Line 3243:1 Expected "}" to go with "{"

**/
/* ===================================================================
   HappyLocks — Consolidated Global Styles
   Brand rule (READ FIRST): "Copy Apple, but use Primary Orange where
   Apple uses blue." Everything below obeys ONE palette:

     • Backgrounds .... white #FFFFFF / off-white #F5F5F7
     • Text ........... near-black #1D1D1F
     • Muted/borders .. greys #6E6E73 / #D2D2D7
     • ACCENT ......... orange #F5820A (hover #D96F08)

   Orange is the *only* hue allowed in brand chrome. It behaves like
   Apple's blue: eyebrows, links/hovers, CTAs, active states, small
   highlights (badges, dots, progress, stars). No greens, reds, teals,
   purples, golds, pinks anywhere in the UI EXCEPT product swatches
   (see "PRODUCT SWATCHES" note) — those are real finish colors and
   must stay true to the physical product.

   HOW THE COLOR SYSTEM WORKS
   --------------------------
   The --hl-* tokens INHERIT from Horizon's live scheme variables
   (--color-*), so changing a color scheme in Settings → Colors
   repaints the whole site (native AND custom sections). Each token
   carries a brand-hex fallback so nothing breaks if a variable is
   missing. => To rebrand, edit the theme color schemes, NOT this file.
   IMPORTANT: every scheme's --color-primary must be your orange, or
   "orange only" silently breaks regardless of this CSS.

   FONTS
   -----
   --hl-font-head / --hl-font-body inherit from Horizon's font pickers
   (Montserrat fallback). NEVER hardcode a font-family in a new section
   — use these tokens (or Horizon's --font-* vars) and the whole theme
   stays consistent.

   NOTE ON TOKEN NAMES
   -------------------
   Some tokens are named after old colors (--hl-teal, --hl-section--teal,
   --hl-teal-mid…) but now RESOLVE to orange or near-black. The names are
   legacy; the values are on-palette. Do NOT rename them here — Liquid
   sections reference these names and renaming would break them.

   ADDING A NEW SECTION LATER — checklist
   --------------------------------------
   1. Use --hl-font-head / --hl-font-body for type.
   2. Use --hl-text / --hl-bg / --hl-warm / --hl-border for neutrals.
   3. Use --hl-accent ONLY for the eyebrow, the primary CTA, and small
      highlights. Default buttons here are black-outline (Apple style).
   4. Never introduce a new hex. If you think you need one, you don't.
   5. Avoid !important and inline styles (Horizon override rules aside).

   File order below (kept from the original 6-file consolidation):
     1) hl-global.css           — tokens, header, hero, sections, footer
     2) hl-new-sections.css     — color showcase, before/after, story…
     3) hl-cards-cart.css       — product cards, quick view, cart drawer
     4) hl-horizon-overrides.css— overrides for native Horizon elements
     5) hl-nav-overrides.css    — mega-menu / nav fixes
     6) hl-motion-polish.css    — reveal/motion polish
   =================================================================== */


/* ===================================================================
   hl-global.css
   GUIDANCE: Foundation layer. Defines every design token plus the
   header, announcement bar, hero, shared section system, product
   cards, footer and the refer-a-friend block. If a token is wrong
   here, it's wrong everywhere — this is the source of truth.
   =================================================================== */
/*
  ============================================================
  Happy Locks — Global Design System v3
  File: assets/hl-global.css

  Goal: Every element on site — native Shopify or custom —
  automatically inherits Happy Locks branding.
  ============================================================
*/

/* ─── Design Tokens ──────────────────────────────────────────────
   The --hl-* color tokens now INHERIT from Horizon's live color
   scheme variables (--color-*), which are defined per scheme in
   snippets/color-schemes.liquid and switch automatically when a
   color scheme is selected in the theme editor. Each token keeps a
   brand hex as a fallback so nothing breaks if a variable is missing.
   This is what connects the custom hl- sections to the theme's
   8 color schemes — change a scheme, the whole site follows.
   ----------------------------------------------------------------- */
:root {
  /* Brand colors — mapped to live scheme variables (fallback = brand hex) */
  /* GUIDANCE: these 4 are your Apple neutrals. Fallbacks are Apple's own
     values: white, near-black #1D1D1F, grey #6E6E73. Keep them neutral. */
  --hl-bg:           var(--color-background, #FFFFFF);
  --hl-white:        var(--color-variant-background, #FFFFFF);
  --hl-text:         var(--color-foreground, #1D1D1F);
  --hl-muted:        var(--hl-muted-setting, rgb(var(--color-foreground-rgb, 29 29 31) / var(--opacity-60, 0.6)));
  /* Primary CTA button colour — follows the active color scheme's button. */
  /* GUIDANCE: --hl-orange / --hl-accent ARE the brand orange (= Apple's
     blue). This is the ONLY accent hue. Everything orange traces back here. */
  --hl-orange:       var(--color-primary, #F5820A);
  --hl-orange-hover: var(--color-primary-hover, #D96F08);
  /* Secondary / warm surface — driven by the "Brand colors" theme setting. */
  --hl-orange-light: var(--hl-surface-alt-setting, #F5F5F7);
  /* Accent — follows the active color scheme's link/primary colour. Used for
     decorative accents (links, dividers, icons, hovers). */
  --hl-accent:       var(--color-primary, #F5820A);
  --hl-accent-hover: var(--color-primary-hover, #D96F08);
  /* Brighter accent for use on dark backgrounds — Brand colors setting. */
  --hl-accent-on-dark: var(--hl-accent-on-dark-setting, #F5820A);
  /* GUIDANCE: legacy "teal" names — all resolve to orange now. On-palette. */
  --hl-teal:         var(--color-primary, #F5820A);
  --hl-teal-hover:   var(--color-primary-hover, #D96F08);
  --hl-dark:         var(--hl-dark-setting, #1D1D1F);
  --hl-border:       var(--color-border, #D2D2D7);
  --hl-warm:         var(--hl-surface-alt-setting, #F5F5F7);
  --hl-muted-token:  var(--hl-muted-setting, #6E6E73);
  /* FIX (palette): fallback was green #2C6E49. There is no second accent in
     an Apple palette, so the fallback is now neutral near-black. If your
     theme's --hl-secondary-setting is unset, this can no longer leak green. */
  --hl-accent-2:     var(--hl-secondary-setting, #1D1D1F);

  /* On-color text tokens — readable text on coloured/dark sections. */
  --hl-on-accent:    var(--color-primary-button-text, var(--hl-white));
  --hl-on-teal:      var(--hl-white);
  --hl-on-dark:      var(--hl-on-dark-setting, #F5F5F7);

  /* Typography — hooked into Horizon theme font pickers */
  /* GUIDANCE: use these two tokens for ALL type. Never hardcode a family. */
  --hl-font-head: var(--font-heading--family, 'Montserrat', sans-serif);
  --hl-font-body: var(--font-body--family, 'Montserrat', sans-serif);

  /* Layout */
  --hl-radius:    8px;
  --hl-radius-lg: 16px;
  --hl-max-w:     1280px;
  --hl-gap:       clamp(48px, 6vw, 96px);
  --hl-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shape tokens only — color overrides removed so Horizon color
     schemes apply site-wide to native AND custom sections.
     (Previously --color-background / --color-foreground / accents were
     hardcoded here, which silently blocked every color scheme.) */
  --buttons-radius:          8px;
  --inputs-radius:           8px;
  --inputs-border-width:     1.5px;
  --inputs-border-opacity:   0.55;
}

/* Per-scheme brighter accent for dark backgrounds (from CSV "Links on dark").
   Applied via the body accent class so it follows the active site accent. */
/* Accent for dark backgrounds now follows the single "Accent on dark"
   theme setting (Brand colors), keeping every scheme clean and consistent. */
.color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4,
.color-scheme-5, .color-scheme-6, .color-scheme-7, .color-scheme-8 {
  --hl-accent-on-dark: var(--hl-accent-on-dark-setting, #F5820A);
}
/* ─── Body & Base ─────────────────────────────────────────── */
body {
  background-color: var(--hl-bg);
  font-family: var(--hl-font-body);
  color: var(--hl-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Native Shopify Button Override ──────────────────────── */
/* This ensures any Shopify-added button (apps, blocks, etc.) */
/* automatically looks like a Happy Locks button              */
/* GUIDANCE: primary buttons are Apple-style BLACK outline that fills
   black on hover — NOT orange. Orange is reserved for the buy/CTA path. */
.button, .btn,
.shopify-challenge__button,
[type="submit"]:not(.hl-footer__email-btn):not(.hl-newsletter__submit) {
  font-family: var(--hl-font-body);
  border-radius: var(--hl-radius) !important;
  font-weight: 600;
  letter-spacing: 0.04em !important;
  transition: all var(--hl-transition) !important;
}
.button--primary,
.button[data-variant="primary"] {
  background-color: transparent;
  color: var(--hl-text);
  border: 1.5px solid var(--hl-text) !important;
}
.button--primary:hover,
.button[data-variant="primary"]:hover {
  background-color: var(--hl-text);
  color: var(--hl-white);
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1) !important;
}
.button--secondary,
.button[data-variant="secondary"] {
  background: transparent;
  border: 1.5px solid var(--hl-text) !important;
  color: var(--hl-text);
}
.button--secondary:hover,
.button[data-variant="secondary"]:hover {
  background: var(--hl-text);
  color: white;
}

/* ─── Native Shopify Input Override ───────────────────────── */
/* GUIDANCE: focus ring is neutral (rgba black). Inputs stay on the
   neutral palette; only the border turns orange on focus via --hl-accent. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  font-family: var(--hl-font-body);
  border-radius: var(--hl-radius) !important;
  border: 1.5px solid var(--hl-border) !important;
  background: var(--hl-white);
  color: var(--hl-text);
  transition: border-color var(--hl-transition) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--hl-accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.1) !important;
}

/* ─── Native Shopify Link Override ────────────────────────── */
/* GUIDANCE: links inherit text color and turn orange on hover — exactly
   how Apple uses blue for links. This is intended accent usage. */
a { color: inherit; transition: color var(--hl-transition); }
a:hover { color: var(--hl-accent); }

/* ─── Announcement Bar ────────────────────────────────────── */
/* GUIDANCE: warm off-white strip. The only orange here is links and the
   countdown numbers (--hl-accent-on-dark) — small highlights, on-rule. */
.hl-announcement {
  background: var(--hl-warm);
  color: var(--hl-text);
  padding: 10px clamp(20px, 4vw, 60px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-family: var(--hl-font-body);
  letter-spacing: 0.06em;
}
.hl-announcement__left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.hl-announcement__left a,
.hl-announcement__right a {
  color: rgba(29,29,31,0.65);
  text-decoration: none;
  font-size: 11px;
  transition: color var(--hl-transition);
}
.hl-announcement__left a:hover,
.hl-announcement__right a:hover { color: var(--hl-text); }
.hl-announcement__center {
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  position: relative;
  min-height: 1.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Rotating slides stack on top of each other; only .is-active shows */
.hl-announcement__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
  white-space: nowrap;
}
.hl-announcement__slide.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
}
.hl-announcement__center a {
  color: var(--hl-accent-on-dark);
  text-decoration: none;
  font-weight: 700;
  margin-left: 6px;
}
/* Countdown */
.hl-announcement__slide--countdown { gap: 10px; }
.hl-cd__prefix { letter-spacing: 0.1em; }
.hl-cd__timer { display: inline-flex; align-items: center; gap: 8px; }
.hl-cd__unit { display: inline-flex; align-items: baseline; gap: 1px; }
.hl-cd__unit b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--hl-accent-on-dark);
  letter-spacing: 0.04em;
}
.hl-cd__unit i { font-style: normal; opacity: 0.6; font-size: 9px; }
.hl-cd__live { color: var(--hl-accent-on-dark); font-weight: 700; }
.hl-announcement__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.hl-announcement__right a {
  color: rgba(29,29,31,0.65);
  display: inline-flex;
  transition: color var(--hl-transition);
}
.hl-announcement__right a:hover { color: var(--hl-text); }
.hl-announcement__divider { color: rgba(29,29,31,0.25); }
@media (max-width: 768px) {
  .hl-announcement {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 8px 16px;
  }
  .hl-announcement__left,
  .hl-announcement__right { display: none; }
  /* Social icons are web only — keep them hidden on mobile */
  .hl-announcement__right--web-only { display: none !important; }
  .hl-announcement__center { font-size: 10px; }
}

/* ─── Header ──────────────────────────────────────────────── */
/* GUIDANCE: sticky white header. Nav links and action icons turn orange
   on hover (accent). Cart count bubble is orange. All on-rule. */
.hl-header {
  background: var(--hl-bg);
  border-bottom: 1px solid var(--hl-border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--hl-transition), background var(--hl-transition);
}
.hl-header.is-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.07); }
.hl-header__inner {
  max-width: var(--hl-max-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 60px);
  height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.hl-header__logo img { height: 36px; width: auto; display: block; }
.hl-header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0; padding: 0;
}
.hl-header__nav > li { position: relative; }
.hl-header__nav > li > a {
  font-family: var(--hl-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hl-text);
  text-decoration: none;
  padding-block: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--hl-transition);
}
.hl-header__nav > li > a:hover { color: var(--hl-accent); }
.hl-header__nav > li > a.has-dropdown::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--hl-transition);
}
.hl-header__nav > li:hover > a.has-dropdown::after {
  transform: rotate(-135deg) translateY(-2px);
}
.hl-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.hl-header__action-btn {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--hl-text);
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  transition: color var(--hl-transition);
}
.hl-header__action-btn:hover { color: var(--hl-accent); }
.hl-header__action-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.hl-cart-count {
  background: var(--hl-accent); color: white;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-left: -6px; margin-top: -12px;
}
.hl-header__mobile-toggle { display: none; }
@media (max-width: 900px) {
  .hl-header__nav { display: none; }
  .hl-header__inner { grid-template-columns: auto 1fr auto; }
  .hl-header__mobile-toggle { display: flex; }
}
@media (max-width: 640px) {
  .hl-header__inner { height: 60px; padding-inline: 16px; }
  .hl-header__logo img { height: 28px; }
}

/* Mega dropdown */
.hl-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--hl-white);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
  min-width: 560px;
  padding: 28px;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  z-index: 200;
}
.hl-header__nav > li:hover .hl-dropdown { display: grid; }
.hl-dropdown__card {
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none;
  border-radius: var(--hl-radius);
  overflow: hidden;
  transition: transform var(--hl-transition);
}
.hl-dropdown__card:hover { transform: translateY(-2px); }
.hl-dropdown__card-img { aspect-ratio: 4/5; background: var(--hl-bg); border-radius: var(--hl-radius); overflow: hidden; }
.hl-dropdown__card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.hl-dropdown__card:hover .hl-dropdown__card-img img { transform: scale(1.04); }
.hl-dropdown__card-name { font-size: 12px; font-weight: 600; color: var(--hl-text); letter-spacing: 0.04em; }
.hl-dropdown__card-sub  { font-size: 11px; color: var(--hl-muted); margin-top: -6px; }



/* ─── Hero Slider ─────────────────────────────────────────── */
/* GUIDANCE: hero eyebrow uses --hl-accent (orange) — your signature
   "eyebrow = orange" rule. Heading is white over imagery; on imageless
   ("--light") slides text/CTAs flip to dark so they stay readable. */
.hl-hero { position: relative; overflow: hidden; background: var(--hl-warm); }
.hl-hero--single .hl-hero__track { transform: none !important; }
.hl-hero--single .hl-hero__arrows,
.hl-hero--single .hl-hero__nav { display: none !important; }
.hl-hero__track { display: flex; transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1); }
.hl-hero__slide {
  min-width: 100%;
  position: relative;
  min-height: clamp(640px, 88vh, 1000px);
  display: flex;
  align-items: flex-end;
}
.hl-hero__slide-bg { position: absolute; inset: 0; }
.hl-hero__slide-bg img { width: 100%; height: 100%; object-fit: cover; }
.hl-hero__slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(28,27,26,var(--slide-overlay, 0.55)) 0%,
    rgba(28,27,26,calc(var(--slide-overlay, 0.55) * 0.5)) 55%,
    rgba(28,27,26,0.05) 100%
  );
}
.hl-hero__slide-content {
  position: relative; z-index: 2;
  max-width: var(--hl-max-w);
  margin-inline: auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 60px);
  width: 100%;
}
.hl-hero__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--hl-accent);
  margin-bottom: 16px; display: block;
}
.hl-hero__heading {
  font-family: var(--hl-font-head);
  font-size: clamp(36px, 6vw, 76px);
  font-weight: 800; color: var(--hl-white);
  line-height: 1.08; margin: 0 0 20px; max-width: 580px;
}
.hl-hero__body {
  font-size: 16px; line-height: 1.65;
  color: rgba(255,255,255,0.75);
  max-width: 420px; margin-bottom: 32px;
}
.hl-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hl-hero__nav {
  position: absolute; bottom: 32px; right: clamp(20px, 5vw, 60px);
  z-index: 10; display: flex; gap: 10px; align-items: center;
}
.hl-hero__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.4); border: none; cursor: pointer;
  transition: background var(--hl-transition), transform var(--hl-transition); padding: 0;
}
.hl-hero__dot.is-active { background: white; transform: scale(1.3); }
.hl-hero__arrow {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25); color: white;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--hl-transition);
}
.hl-hero__arrow:hover { background: rgba(255,255,255,0.25); }
.hl-hero__arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.hl-hero__arrows {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%); z-index: 10;
  display: flex; justify-content: space-between;
  padding-inline: clamp(12px, 2vw, 24px); pointer-events: none;
}
.hl-hero__arrows .hl-hero__arrow { pointer-events: all; }
@media (max-width: 540px) {
  .hl-hero__slide { min-height: clamp(380px, 85vw, 520px); align-items: flex-end; }
  .hl-hero__slide-content { padding: 32px 20px 56px; }
  .hl-hero__heading { font-size: clamp(28px, 8vw, 40px); }
  .hl-hero__body { font-size: 14px; margin-bottom: 24px; }
  .hl-hero__arrows { display: none; }
  .hl-hero__nav { bottom: 20px; right: 50%; transform: translateX(50%); }
  .hl-hero__ctas { flex-direction: column; align-items: flex-start; }
}

/* Empty/imageless hero slides render light — keep text & CTAs readable */
.hl-hero__slide--light .hl-hero__heading { color: var(--hl-text); }
.hl-hero__slide--light .hl-hero__body { color: var(--hl-muted-token); }
.hl-hero__slide--light .hl-btn--white { background: var(--hl-text); color: #fff; border: none; }
.hl-hero__slide--light .hl-btn--white:hover { background: var(--hl-dark); color: var(--hl-white); }
.hl-hero__slide--light .hl-btn--outline-white { color: var(--hl-text); border-color: var(--hl-text); }
.hl-hero__slide--light .hl-btn--outline-white:hover { background: var(--hl-text); color: #fff; }

/* ─── Buttons ─────────────────────────────────────────────── */
/* GUIDANCE: button system. ALL variants here are black/white (Apple
   style) — even .hl-btn--teal fills black. They do NOT use orange. The
   orange "buy" treatment lives on the product/quick-view ATC and the
   native Shopify primary button (which follows --color-primary = orange).
   Keep it that way: don't recolor these to orange or you'll dilute the
   single-accent look. */
.hl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  font-family: var(--hl-font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--hl-radius);
  transition: all var(--hl-transition);
  cursor: pointer; border: none; line-height: 1;
}
.hl-btn--primary  { background: transparent; color: var(--hl-text); border: 1.5px solid var(--hl-text); }
.hl-btn--primary:hover {
  background: var(--hl-text); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
}
.hl-btn--white    { background: white; color: var(--hl-text); }
.hl-btn--white:hover { background: var(--hl-bg); color: var(--hl-text); transform: translateY(-1px); }
.hl-btn--outline-white {
  background: transparent; color: white;
  border: 1.5px solid rgba(255,255,255,0.6);
}
.hl-btn--outline-white:hover { background: rgba(255, 255, 255, 0.12); border-color: white; color: white; }
.hl-btn--outline {
  background: transparent; color: var(--hl-text);
  border: 1.5px solid var(--hl-text);
}
.hl-btn--outline:hover { background: var(--hl-text); color: white; }
.hl-btn--teal     { background: transparent; color: var(--hl-text); border: 1.5px solid var(--hl-text); }
.hl-btn--teal:hover {
  background: var(--hl-text); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
}
@media (max-width: 540px) {
  .hl-btn { padding: 13px 22px; font-size: 12px; }
}

/* ─── Section Shared Styles ───────────────────────────────────────
   Each painted modifier adopts the variable set of a matching color
   scheme, so the custom sections read live scheme colors (set in the
   theme editor) instead of fixed hex. The default mapping reproduces
   the current look:
     base  → scheme-1 (warm paper)   --white → scheme-5 (white)
     --warm→ scheme-4 (orange cream) --teal  → scheme-8 (teal)
     --dark→ scheme-2 (near-black)
   Edit any scheme in Settings → Colors and these sections follow.

   GUIDANCE: --hl-section--dark now renders WARM (off-white), not dark —
   that's intentional, keeps the page light/Apple. --hl-section--teal
   paints a full ORANGE background (token = --color-primary). A whole
   orange field is a lot of accent; use it sparingly / for a single
   feature band, not as a default section background.
   ----------------------------------------------------------------- */
.hl-section { padding-block: var(--hl-gap); background: var(--color-background, var(--hl-bg)); color: var(--color-foreground, var(--hl-text)); }
.hl-section--white { background: var(--color-background, var(--hl-white)); color: var(--color-foreground, var(--hl-text)); }
.hl-section--dark  { background: var(--hl-warm); color: var(--hl-text); }
.hl-section--warm  { background: var(--color-background, var(--hl-warm)); color: var(--color-foreground, var(--hl-text)); }
.hl-section--teal  { background: var(--hl-teal); color: var(--hl-on-teal); }
/* Keep headings/subtext legible on the dark and teal painted sections */
.hl-section--dark .hl-section-heading,
.hl-section--teal .hl-section-heading { color: inherit; }
.hl-section--dark .hl-section-subtext,
.hl-section--teal .hl-section-subtext,
.hl-section--dark .hl-section-label,
.hl-section--teal .hl-section-label { color: inherit; opacity: 0.85; }
.hl-container { max-width: var(--hl-max-w); margin-inline: auto; padding-inline: clamp(20px, 5vw, 60px); }
/* GUIDANCE: section labels (eyebrows) are orange by design. */
.hl-section-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--hl-muted);
  display: block; margin-bottom: 12px;
}
.hl-divider-line { width: 36px; height: 2px; background: var(--hl-accent); border: none; margin-bottom: 20px; }
.hl-section-heading {
  font-family: var(--hl-font-head);
  font-size: clamp(26px, 3.5vw, 48px);
  font-weight: 600; line-height: 1.15;
  color: var(--hl-text); margin: 0 0 16px;
}
.hl-section-subtext { font-size: 16px; line-height: 1.7; color: var(--hl-muted); max-width: 560px; }
.hl-section-header {
  display: flex; justify-content: space-between;
  align-items: flex-end; flex-wrap: wrap;
  gap: 16px; margin-bottom: 44px;
}
@media (max-width: 540px) {
  .hl-section { padding-block: clamp(36px, 10vw, 64px); }
  .hl-section-heading { font-size: clamp(22px, 6vw, 32px); }
  .hl-section-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
}

/* ─── Marquee / Trust Bar ─────────────────────────────────── */
/* GUIDANCE: only orange here is the tiny separator dot. On-rule. */
.hl-marquee-section {
  background: var(--hl-warm); padding-block: 14px; overflow: hidden;
  border-top: 1px solid var(--hl-border);
  border-bottom: 1px solid var(--hl-border);
}
.hl-marquee-track {
  display: flex; gap: 48px;
  animation: hl-marquee 28s linear infinite; width: max-content;
}
.hl-marquee-section:hover .hl-marquee-track { animation-play-state: paused; }
.hl-marquee-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(29,29,31,0.75); white-space: nowrap;
}
.hl-marquee-dot { width: 4px; height: 4px; background: white; border-radius: 50%; flex-shrink: 0; }
@keyframes hl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 540px) { .hl-marquee-item { font-size: 10px; } .hl-marquee-track { gap: 32px; } }

/* ─── Product Cards (custom) ──────────────────────────────── */
/* GUIDANCE: sale badge is orange (.hl-product-card__badge). Note the
   NATIVE Horizon badge (.product-badges__badge, see Horizon overrides
   section) is black. They differ on purpose-or-by-accident — pick one
   for consistency if it bothers you; both are on-palette. */
.hl-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.hl-product-card {
  display: flex; flex-direction: column; text-decoration: none;
  border-radius: var(--hl-radius-lg); overflow: hidden; background: var(--hl-white);
  transition: transform var(--hl-transition), box-shadow var(--hl-transition);
}
.hl-product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.09); }
.hl-product-card__img { aspect-ratio: 4/4.5; background: var(--hl-bg); overflow: hidden; position: relative; }
.hl-product-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hl-product-card:hover .hl-product-card__img img { transform: scale(1.04); }
.hl-product-card__badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--hl-accent); color: white;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 20px;
}
.hl-product-card__body { padding: 16px 20px 20px; }
.hl-product-card__name { font-size: 15px; font-weight: 600; color: var(--hl-text); margin-bottom: 4px; }
.hl-product-card__subtitle { font-size: 12px; color: var(--hl-muted); margin-bottom: 10px; }
.hl-product-card__footer { display: flex; justify-content: space-between; align-items: center; }
.hl-product-card__price { font-size: 15px; font-weight: 700; color: var(--hl-text); }
.hl-product-card__swatches { display: flex; gap: 5px; }
/* PRODUCT SWATCHES: real finish colors — intentionally NOT on the brand
   palette. A green lock must look green. Do not neutralize these. */
.hl-product-card__swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.1); cursor: pointer;
  transition: transform var(--hl-transition);
}
.hl-product-card__swatch:hover { transform: scale(1.2); }
@media (max-width: 600px) { .hl-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ─── Lifestyle Split ─────────────────────────────────────── */
.hl-split { display: grid; grid-template-columns: 1.2fr 0.8fr; min-height: 700px; }
.hl-split--reverse { direction: rtl; }
.hl-split--reverse > * { direction: ltr; }
.hl-split__img { overflow: hidden; background: var(--hl-warm); min-height:700px; padding:40px; display:grid; }
.hl-split__img img { width: 100%; height: 100%; object-position:center center; object-fit: cover; display: block; transition: transform 0.6s ease; }
.hl-split:hover .hl-split__img img { transform: scale(1.03); }
.hl-split__content {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 72px);
  background: var(--hl-white);
}
.hl-split__content-inner{
  width:100%;
  max-width:700px;
  margin:0 auto;
}
@media (max-width: 768px) {
  .hl-split { grid-template-columns: 1fr; min-height: auto; } 
  .hl-split__img { aspect-ratio: 16/9; }
  .hl-split__content { padding: 32px 24px; }
}

/* ─── Value Props ─────────────────────────────────────────── */
/* GUIDANCE: card border + icon turn orange on hover (accent). On-rule. */
.hl-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 64px; }
.hl-value {
  display: flex; flex-direction: column; gap: 16px;
  padding: 32px 24px; border-radius: var(--hl-radius-lg);
  background: var(--hl-white); border: 1px solid var(--hl-border);
  transition: border-color var(--hl-transition), box-shadow var(--hl-transition);
}
.hl-value:hover { border-color: var(--hl-accent); box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
.hl-value__icon { width: 48px; height: 48px; background: var(--hl-warm); border-radius: var(--hl-radius); display: flex; align-items: center; justify-content: center; }
.hl-value__icon svg { width: 24px; height: 24px; stroke: var(--hl-accent); fill: none; stroke-width: 1.75; }
.hl-value__title { font-size: 15px; font-weight: 700; color: var(--hl-text); margin: 0; }
.hl-value__text  { font-size: 13px; line-height: 1.6; color: var(--hl-muted); margin: 0; }
@media (max-width: 900px) { .hl-values { grid-template-columns: repeat(2, 1fr); gap: 16px; padding-block: 48px; } }
@media (max-width: 480px) { .hl-values { grid-template-columns: 1fr; gap: 12px; padding-block: 32px; } .hl-value { padding: 24px 20px; } }

/* ─── Finish Showcase ─────────────────────────────────────── */
.hl-finishes-hero { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; height: 560px; }
.hl-finish-tile { position: relative; overflow: hidden; border-radius: var(--hl-radius-lg); cursor: pointer; text-decoration: none; }
.hl-finish-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hl-finish-tile:hover img { transform: scale(1.05); }
.hl-finish-tile__label {
  position: absolute; bottom: 20px; left: 20px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  padding: 8px 16px; border-radius: 20px;
  font-size: 12px; font-weight: 700; color: var(--hl-text); letter-spacing: 0.06em;
}
/* PRODUCT SWATCHES: the finish dot shows the actual finish color, set
   inline per tile. Functional, not brand chrome — leave it. */
.hl-finish-tile__color {
  position: absolute; top: 16px; right: 16px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
  .hl-finishes-hero { grid-template-columns: 1fr 1fr; height: auto; }
  .hl-finish-tile { aspect-ratio: 3/4; }
  .hl-finish-tile:first-child { grid-column: 1/-1; aspect-ratio: 16/9; }
}
@media (max-width: 480px) { .hl-finishes-hero { gap: 8px; } }

/* ─── Reviews ─────────────────────────────────────────────── */
/* GUIDANCE: stars and the "verified" tag are orange (accent). Card border
   turns orange on hover. Note --hl-teal here = orange, so "verified" is
   orange too — consistent. */
.hl-reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.hl-review-card {
  background: var(--hl-white); border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-lg); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color var(--hl-transition), box-shadow var(--hl-transition);
}
.hl-review-card:hover { border-color: var(--hl-accent); box-shadow: 0 8px 32px rgba(0,0,0,0.06); }
.hl-review-stars { color: var(--hl-accent); font-size: 14px; letter-spacing: 2px; }
.hl-review-text  { font-size: 14px; line-height: 1.65; color: var(--hl-text); flex: 1; }
.hl-review-author { display: flex; align-items: center; gap: 12px; }
.hl-review-author__avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--hl-bg); flex-shrink: 0; }
.hl-review-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hl-review-author__name { font-size: 13px; font-weight: 700; color: var(--hl-text); }
.hl-review-author__location { font-size: 11px; color: var(--hl-muted); }
.hl-review-verified { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--hl-teal); font-weight: 600; }
@media (max-width: 540px) { .hl-reviews-grid { grid-template-columns: 1fr; } }

/* ─── Footer ──────────────────────────────────────────────── */
.hl-footer { background: var(--hl-warm); }
.hl-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding: 64px clamp(20px, 5vw, 60px) 48px;
  max-width: var(--hl-max-w);
  margin-inline: auto;
  border-bottom: 1px solid rgba(29,29,31,0.08);
}
/* Brand column */
.hl-footer__brand { display: flex; flex-direction: column; gap: 0; min-width: 200px; max-width: 260px; }
.hl-footer__logo  { margin-bottom: 20px; line-height: 1; }
.hl-footer__logo-img { height: 36px; width: auto; display: block; opacity: 1; filter: none; }
/* NOTE: the .hl-footer__brand-colors / __brand-color rules below are nested
   inside this selector by mistake in the original (a stray opening brace on
   --hl-footer__logo-text). Nested rules are ignored by browsers, so these
   brand-color dots currently have NO styles. If you use those dots, move
   the two rules OUT to top level. Left as-is to avoid changing behavior. */
.hl-footer__logo-text {
  font-family: var(--hl-font-head);
  font-size: 20px; font-weight: 600;
  color: var(--hl-text); letter-spacing: -0.02em;
  .hl-footer__brand-colors {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.hl-footer__brand-color {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
}
.hl-footer__tagline {
  font-size: 13px; line-height: 1.7;
  color: rgba(29,29,31,0.45);
  margin-bottom: 24px; max-width: 220px;
  white-space: pre-line;
}
.hl-footer__socials { display: flex; gap: 10px; flex-wrap: wrap; }
.hl-footer__social {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(29,29,31,0.18);
  display: flex; align-items: center; justify-content: center;
  color: rgba(29,29,31,0.55); text-decoration: none;
  transition: all var(--hl-transition);
}
.hl-footer__social:hover { border-color: var(--hl-accent); color: var(--hl-accent); }
/* Link columns */
.hl-footer__col { display: flex; flex-direction: column; }
.hl-footer__col-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--hl-text);
  margin-bottom: 18px; display: block;
}
.hl-footer__col-desc {
  font-size: 13px; line-height: 1.65;
  color: rgba(29,29,31,0.4); margin-bottom: 16px;
}
.hl-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hl-footer__links a {
  font-size: 13px; color: rgba(29,29,31,0.5);
  text-decoration: none; transition: color var(--hl-transition);
}
.hl-footer__links a:hover { color: var(--hl-text); }
/* Email form */
.hl-footer__email-form { display: flex; }
.hl-footer__email-input {
  flex: 1; padding: 11px 16px;
  background: rgba(29,29,31,0.07);
  border: 1px solid rgba(29,29,31,0.15) !important;
  border-right: none !important;
  border-radius: var(--hl-radius) 0 0 var(--hl-radius) !important;
  color: var(--hl-text); font-size: 13px;
}
.hl-footer__email-input::placeholder { color: rgba(29,29,31,0.3); }
.hl-footer__email-input:focus { border-color: var(--hl-accent); box-shadow: none !important; }
.hl-footer__email-btn {
  padding: 11px 18px; background: var(--hl-dark); border: none;
  border-radius: 0 var(--hl-radius) var(--hl-radius) 0;
  color: var(--hl-white); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background var(--hl-transition);
  font-family: var(--hl-font-body); letter-spacing: 0.06em; white-space: nowrap;
}
.hl-footer__email-btn:hover { background: var(--hl-dark); }
.hl-footer__disclaimer { font-size: 11px; color: rgba(29,29,31,0.25); margin-top: 10px; line-height: 1.5; }
/* FIX (palette): was color:var(--color-success) — the theme's GREEN. The
   newsletter success message now uses the brand accent (orange), the only
   status hue allowed. */
.hl-footer__success { font-size: 14px; color: var(--hl-accent); font-weight: 600; margin: 0; padding-block: 12px; }
/* Bottom bar */
.hl-footer__bottom {
  max-width: var(--hl-max-w); margin-inline: auto;
  padding: 20px clamp(20px, 5vw, 60px);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px 24px;
}
.hl-footer__copy { font-size: 12px; color: rgba(29,29,31,0.8); margin: 0; }
.hl-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.hl-footer__legal a {
  font-size: 12px; color: rgba(29,29,31,0.6);
  text-decoration: none; transition: color var(--hl-transition);
}
.hl-footer__legal a:hover { color: rgba(29,29,31,0.95); }
/* Payment icons — Shopify provides these automatically */
.hl-footer__payments { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hl-footer__payment-icon { height: 22px; width: auto; opacity: 0.9; border-radius: 3px; }
@media (max-width: 960px) { .hl-footer__top { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 540px) {
  .hl-footer__top { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 32px; }
  .hl-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hl-footer__legal { gap: 12px 16px; }
}

/* ─── Collection Filters ──────────────────────────────────── */
/* GUIDANCE: active/hover filter pill fills BLACK (text color), not orange
   — keeps filters neutral so product imagery carries the color. */
.hl-collection-filters {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; padding-block: 24px;
  border-bottom: 1px solid var(--hl-border); margin-bottom: 32px;
}
.hl-filter-btn {
  padding: 8px 18px; border-radius: 20px;
  border: 1.5px solid var(--hl-border); background: var(--hl-white);
  font-size: 12px; font-weight: 600; color: var(--hl-muted);
  cursor: pointer; transition: all var(--hl-transition); letter-spacing: 0.04em;
}
.hl-filter-btn:hover, .hl-filter-btn.is-active {
  border-color: var(--hl-text); color: white; background: var(--hl-text);
}

/* ─── Utility ─────────────────────────────────────────────── */
.hl-text-center { text-align: center; }
.hl-text-center .hl-section-subtext,
.hl-text-center .hl-divider-line { margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ─── Mega Menu Banner (hl-mega-menu-banner.liquid) ────────── */
/*
  When a nav item has an HL banner configured, the .mega-menu gains
  .mega-menu--with-hl-banner and the layout shifts to a two-column
  arrangement: links left, banner right.
  GUIDANCE: hovering the banner turns the CTA orange (accent). On-rule.
*/
.mega-menu--with-hl-banner {
  display: flex !important;
  align-items: stretch;
  gap: 0;
}

.mega-menu--with-hl-banner .mega-menu__grid {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Banner panel ── */
.hl-mega-banner {
  flex: 0 0 260px;
  min-width: 220px;
  max-width: 300px;
  border-left: 1px solid rgba(0,0,0,0.07);
  overflow: hidden;
}

.hl-mega-banner__wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
}

a.hl-mega-banner__wrap:hover .hl-mega-banner__cta {
  background: var(--hl-accent, var(--hl-accent));
  border-color: var(--hl-accent, var(--hl-accent));
  color: white;
}

/* ── Image ── */
.hl-mega-banner__img-wrap {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 160px;
}

.hl-mega-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

a.hl-mega-banner__wrap:hover .hl-mega-banner__img {
  transform: scale(1.04);
}

.hl-mega-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--hl-banner-overlay, 0.3));
  pointer-events: none;
}

/* ── Text content ── */
.hl-mega-banner__content {
  flex: 0 0 auto;
  padding: 16px 18px 20px;
  background: var(--color-background, var(--hl-white));
}

.hl-mega-banner__heading {
  font-family: var(--hl-font-heading, var(--font-heading--family, sans-serif));
  font-size: 14px;
  font-weight: 700;
  color: var(--hl-text, var(--hl-text));
  margin: 0 0 6px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.hl-mega-banner__subtext {
  font-size: 12px;
  color: var(--hl-muted, var(--hl-muted-token));
  margin: 0 0 12px;
  line-height: 1.5;
}

.hl-mega-banner__cta {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 2px solid var(--hl-text, var(--hl-text));
  border-radius: 4px;
  color: var(--hl-text, var(--hl-text));
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ── Mobile: hide banner panel — it would stack awkwardly in the drawer ── */
@media (max-width: 749px) {
  .hl-mega-banner { display: none; }
  .mega-menu--with-hl-banner { flex-direction: column; }
}

/* ─── Global Mobile Responsiveness Pass ──────────────────── */
/* Systematic fixes for screens under 480px */
@media (max-width: 480px) {

  /* Hero */
  .hl-btn { font-size: 12px; padding: 11px 20px !important; }
  .hl-hero__ctas { gap: 8px; }

  /* Marquee strip */
  .hl-marquee-section { padding-block: 12px; }

  /* Section headings */
  .hl-section-heading { font-size: clamp(22px, 6vw, 32px); }

  /* Footer brand */
  .hl-footer__brand { max-width: 100%; }
  .hl-footer__logo-img { height: 28px; }

  /* Announcement bar */
  .hl-ann__center { font-size: 11px; }

  /* Color showcase */
  .hl-color-chips { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  /* Cart drawer */
  .hl-cart-drawer { width: 100%; max-width: 100%; }
  .hl-cart-drawer__item-img { width: 60px; height: 60px; }

  /* Quick view modal */
  .hl-qv-modal { width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; bottom: 0; top: auto; transform: translateX(0) translateY(100%); }
  .hl-qv-modal.is-open { transform: translateX(0) translateY(0); }

}

/* iPad / tablet pass — 750px–1024px */
@media (min-width: 750px) and (max-width: 1024px) {

  .hl-footer__top { grid-template-columns: 1fr 1fr; gap: 36px 48px; }
  .hl-hero__heading { font-size: clamp(32px, 5vw, 56px); }

}

/* Prevent horizontal scroll site-wide */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ─── Swatch colour variables (hl-product-card.liquid) ───── */
/* PRODUCT SWATCHES — REAL FINISH COLORS. Referenced as:
   var(--hl-swatch-{handle}, fallback). These are deliberately OFF the
   brand palette because they represent the actual physical product
   finishes (navy, green, red, gold, etc.). Changing them to orange would
   misrepresent the product and hurt conversion. DO NOT neutralize. */
:root {
  --hl-swatch-midnight-tide:  #1A1F2E;
  --hl-swatch-canopy:         #4A6741;
  --hl-swatch-crimson-edge:   #8B1A1A;
  --hl-swatch-frost:          #DDE4EC;
  --hl-swatch-adobe-dusk:     #C4724A;
  --hl-swatch-aegean:         #2E5F7A;
  --hl-swatch-dusk-vault:     #3D3347;
  --hl-swatch-solar:          #C8A000;
  --hl-swatch-petal:          #D4748C;
  --hl-swatch-warm-linen:     var(--hl-warm);
  --hl-swatch-forest-floor:   #4A5C42;
  --hl-swatch-golden-hour:    #C8A96E;
  /* Common generic colour names that might come through as variant names */
  --hl-swatch-black:          var(--hl-text);
  --hl-swatch-white:          var(--hl-bg);
  --hl-swatch-navy:           #1A1F2E;
  --hl-swatch-gold:           #C8A96E;
  --hl-swatch-green:          #4A6741;
  --hl-swatch-red:            #8B1A1A;
  --hl-swatch-teal:           #2E5F7A;
}

/* ─── Refer & Earn Section ────────────────────────────────── */
/* GUIDANCE: these "teal" aliases all resolve to brand near-black/orange,
   so the refer block is neutral surfaces + orange eyebrow/divider/amount
   and a black CTA. On-rule. */
:root {
  --hl-teal-deep:   var(--hl-dark);
  --hl-teal-mid:    var(--hl-accent);
  --hl-teal-light:  var(--hl-accent);
}

.hl-refer {
  position: relative;
  overflow: hidden;
}
.hl-refer__bg {
  position: absolute; inset: 0; z-index: 0;
}
/* Subtle texture overlay */
.hl-refer__bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 80% 50%, rgba(0,0,0,0.1) 0%, transparent 60%),
                    radial-gradient(circle at 10% 80%, rgba(0,0,0,0.08) 0%, transparent 50%);
}

.hl-refer__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding-block: clamp(64px, 8vw, 112px);
}

/* ── Left copy ── */
.hl-refer__eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hl-teal-mid);
  margin-bottom: 14px;
}

.hl-refer__divider {
  width: 36px; height: 2px;
  background: var(--hl-teal-mid);
  margin-bottom: 20px;
}

.hl-refer__heading {
  font-family: var(--hl-font-heading, var(--font-heading--family, 'Montserrat', sans-serif));
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600; line-height: 1.1;
  color: var(--hl-text);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.hl-refer__body {
  font-size: 15px; line-height: 1.75;
  color: rgba(29,29,31,0.65);
  margin: 0 0 32px;
  max-width: 440px;
}

/* Steps */
.hl-refer__steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.hl-refer__step {
  display: flex; align-items: flex-start; gap: 14px;
}
.hl-refer__step-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--hl-teal-mid);
  color: var(--hl-teal-mid);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.hl-refer__step-text {
  font-size: 14px; line-height: 1.6;
  color: rgba(29,29,31,0.75);
}

/* ── Right card ── */
.hl-refer__card {
  background: rgba(29,29,31,0.06);
  border: 1px solid rgba(29,29,31,0.12);
  border-radius: 20px;
  padding: clamp(32px, 4vw, 48px);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 28px;
}

/* Reward display */
.hl-refer__reward-display {
  display: flex; align-items: center; justify-content: center;
  gap: 20px;
}
.hl-refer__reward-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1;
  background: rgba(29,29,31,0.08);
  border-radius: 14px; padding: 24px 16px;
  border: 1px solid rgba(29,29,31,0.1);
}
.hl-refer__reward-amount {
  font-family: var(--hl-font-heading, var(--font-heading--family, 'Montserrat', sans-serif));
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 600; line-height: 1;
  color: var(--hl-teal-light);
}
.hl-refer__reward-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(29,29,31,0.5);
}
.hl-refer__reward-plus {
  font-size: 28px; font-weight: 300;
  color: rgba(29,29,31,0.3);
  flex-shrink: 0;
}

/* CTA button */
.hl-refer__cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px;
  background: var(--hl-dark);
  color: var(--hl-white); border-radius: 10px;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; text-decoration: none;
  transition: background 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
}
.hl-refer__cta-btn:hover {
  background: var(--hl-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
  color: white;
}

/* Fine print */
.hl-refer__fine-print {
  font-size: 12px; line-height: 1.6;
  color: rgba(29,29,31,0.4);
  text-align: center; margin: 0;
}

/* Mobile */
@media (max-width: 749px) {
  .hl-refer__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hl-refer__body { max-width: 100%; }
  .hl-refer__reward-amount { font-size: 36px; }
}


/* ===================================================================
   hl-new-sections.css
   GUIDANCE: Editorial/marketing sections — color showcase, before/after,
   storytelling, installation, community gallery, newsletter. Eyebrows are
   orange; everything else is neutral. Mobile-first throughout.
   =================================================================== */
/*
  ============================================================
  Happy Locks — New Sections CSS
  File: assets/hl-new-sections.css

  Covers: color showcase, before/after, storytelling,
  installation, community gallery, newsletter.
  Mobile-first throughout.
  ============================================================
*/

/* ─── Color Showcase ──────────────────────────────────────── */
/* GUIDANCE: this section literally previews PRODUCT finish colors. The
   swatch dots/washes are set inline from product data — functional color,
   not brand chrome. The active-state ring uses --hl-text (neutral). */
.hl-cs__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.hl-cs__heading {
  font-family: var(--hl-font-head);
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  color: var(--hl-text);
  margin: 0 0 20px;
  max-width: 480px;
}
.hl-cs__body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--hl-muted);
  max-width: 420px;
  margin-bottom: 32px;
  white-space: pre-line;
}
.hl-cs__active-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hl-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
  min-height: 24px;
}
.hl-cs__active-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
  transition: background var(--hl-transition);
}
.hl-cs__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.hl-cs__swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform var(--hl-transition), border-color var(--hl-transition), box-shadow var(--hl-transition);
  position: relative;
  outline: none;
}
.hl-cs__swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.hl-cs__swatch:focus-visible {
  outline: 2px solid var(--hl-accent);
  outline-offset: 3px;
}
.hl-cs__swatch.is-active {
  border-color: var(--hl-text);
  transform: scale(1.18);
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
}

/* Display panel */
.hl-cs__right {
  position: relative;
}
.hl-cs__display {
  position: relative;
  border-radius: var(--hl-radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--hl-warm);
}
.hl-cs__color-wash {
  position: absolute;
  inset: 0;
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.25;
}
.hl-cs__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hl-cs__frame.is-active {
  opacity: 1;
}
.hl-cs__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hl-cs__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.hl-cs__placeholder-label {
  font-size: 11px;
  color: var(--hl-muted-token);
  text-align: center;
  margin-top: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

@media (max-width: 860px) {
  .hl-cs__layout {
    grid-template-columns: 1fr;
  }
  .hl-cs__right {
    order: -1;
  }
  .hl-cs__display {
    aspect-ratio: 3/2;
    max-height: 340px;
  }
  .hl-cs__heading { max-width: 100%; }
  .hl-cs__body    { max-width: 100%; }
}
@media (max-width: 480px) {
  .hl-cs__swatch { width: 34px; height: 34px; }
  .hl-cs__swatches { gap: 8px; }
  .hl-cs__display { aspect-ratio: 4/3; }
}

/* ─── Before & After ──────────────────────────────────────── */
.hl-ba__header {
  margin-bottom: 48px;
}
.hl-ba__subheading {
  font-size: 16px;
  line-height: 1.7;
  color: var(--hl-muted);
  max-width: 600px;
  margin: 12px auto 0;
}
.hl-ba__wrapper {
  max-width: 900px;
  margin-inline: auto;
}

.hl-ba-tabs-heading{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
  margin-bottom:16px;
  color:rgb(var(--color-foreground));
  padding-bottom: 20px;
}

@media screen and (max-width:749px){
  .hl-ba-tabs-heading{
    display:none;
  }
}
/* FIX (palette): slider background was var(--hl-accent) (a solid orange
   block that flashes before the images load). Now var(--hl-warm) to match
   every other media placeholder and keep orange reserved for accents. */
.hl-ba__slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--hl-radius-lg);
  aspect-ratio: 16/9;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  background: var(--hl-warm);
}

.hl-ba-tabs{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:24px;
}

.hl-ba-tab{
  border:1px solid rgba(0,0,0,.12);
  background:var(--hl-white);
  padding:12px 18px;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
  transition:.2s;
}

/* FIX (syntax): the original had `var(--hl-text))` (extra paren) and
   `var(---hl-text)` (three dashes), both invalid — so the active tab never
   styled. Corrected to valid var(--hl-text). Result is black pill + white
   text = on-palette. */
.hl-ba-tab.is-active{
  background:var(--hl-text);
  color:var(--hl-white);
  border-color:var(--hl-text);
}
.hl-ba-layout{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:24px;
  
}

.hl-ba-layout__nav{
  position:sticky;
  top:20px;
}

.hl-ba-layout__content{
  min-width:0;
}
@media (max-width: 600px) {
  .hl-ba__slider { aspect-ratio: 4/3; }
}
.hl-ba__after,
.hl-ba__before {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hl-ba__after img,
.hl-ba__before img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.hl-ba__before {
  width: 100%;
  z-index: 2;
}
.hl-ba__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hl-ba__placeholder-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hl-ba__tag {
  position: absolute;
  bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  z-index: 4;
}
.hl-ba__tag--after {
  left: 16px;
}
.hl-ba__tag--before {
  right: 16px;
}
.hl-ba__handle {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: col-resize;
  outline: none;
}
.hl-ba__handle-line {
  flex: 1;
  width: 2px;
  background: white;
  opacity: 0.9;
}
.hl-ba__handle-knob {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 3px solid white;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--hl-transition);
  flex-shrink: 0;
}
.hl-ba__handle:hover .hl-ba__handle-knob,
.hl-ba__handle:focus-visible .hl-ba__handle-knob {
  transform: scale(1.1);
}
.hl-ba__handle-knob svg {
  position: absolute;
}

/* Two arrows pointing left/right */
.hl-ba__handle-knob svg:first-child  { left: 6px; }
.hl-ba__handle-knob svg:last-child   { right: 6px; }
.hl-ba__hint {
  text-align: center;
  font-size: 12px;
  color: var(--hl-muted);
  margin-top: 14px;
  letter-spacing: 0.06em;
}
.hl-ba__caption {
  margin-top: 24px;
}
.hl-ba__caption p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--hl-muted);
  max-width: 560px;
  margin-inline: auto;
}
@media (max-width: 540px) {
  .hl-ba__header { margin-bottom: 28px; }
  .hl-ba__subheading { font-size: 14px; }
}
@media screen and (max-width: 749px){

  .hl-ba-layout{
    display:block;
  }

  .hl-ba-tabs{
    display:flex;
    flex-direction:row;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:8px;
    margin-bottom:20px;
    scrollbar-width:none;
  }

  .hl-ba-tabs::-webkit-scrollbar{
    display:none;
  }

  .hl-ba-tab{
    flex:0 0 auto;
    white-space:nowrap;
  }

}

/* ─── Storytelling Block ──────────────────────────────────── */
/* GUIDANCE: full-bleed image with overlay; eyebrow is orange, heading
   white. Overlay is neutral black. On-rule. */
.hl-story {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: stretch;
}
.hl-story__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hl-story__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hl-story__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hl-story__content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 60px);
  max-width: var(--hl-max-w);
  margin-inline: auto;
}
/* Content positions */
.hl-story__content--bottom-left   { align-items: flex-end; justify-content: flex-start; }
.hl-story__content--bottom-center { align-items: flex-end; justify-content: center; }
.hl-story__content--bottom-right  { align-items: flex-end; justify-content: flex-end; }
.hl-story__content--center-left   { align-items: center;   justify-content: flex-start; }
.hl-story__content--center        { align-items: center;   justify-content: center; text-align: center; }
.hl-story__content--center-right  { align-items: center;   justify-content: flex-end; }
.hl-story__content--center .hl-story__inner { align-items: center; }
.hl-story__inner {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  gap: 0;
}
.hl-story__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hl-accent);
  margin-bottom: 12px;
  display: block;
}
.hl-story__heading {
  font-family: var(--hl-font-head);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.12;
  color: white;
  margin: 0 0 20px;
}
.hl-story__body {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
  margin-bottom: 28px;
}
@media (max-width: 540px) {
  .hl-story { min-height: 360px; }
  .hl-story__content { padding: 32px 20px; }
  .hl-story__heading { font-size: clamp(22px, 7vw, 32px); }
  .hl-story__body    { font-size: 14px; }
}

/* ─── Installation Section ────────────────────────────────── */
/* GUIDANCE: step numbers use orange dots (--hl-accent); the "badge"
   uses --hl-teal which = orange. Eyebrow orange, copy neutral. On-rule. */
.hl-install__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.hl-install__heading {
  font-family: var(--hl-font-head);
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  color: var(--hl-text);
  margin: 0 0 20px;
}
.hl-install__body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--hl-muted);
  margin-bottom: 32px;
}
.hl-install__steps {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hl-install__step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.hl-install__step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hl-accent);
  color: white;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.hl-install__step-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--hl-muted);
  padding-top: 3px;
}
.hl-install__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hl-install__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1.5px solid var(--hl-teal);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hl-teal);
  letter-spacing: 0.04em;
}

/* Media side */
.hl-install__video-wrap,
.hl-install__img-wrap {
  position: relative;
  border-radius: var(--hl-radius-lg);
  overflow: hidden;
  aspect-ratio: 9/10;
  background: var(--hl-warm);
}
.hl-install__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hl-install__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hl-install__placeholder {
  aspect-ratio: 9/10;
  border-radius: var(--hl-radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--hl-warm);
}
.hl-install__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--hl-transition), box-shadow var(--hl-transition);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.hl-install__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

@media (max-width: 860px) {
  .hl-install__layout {
    grid-template-columns: 1fr;
  }
  .hl-install__video-wrap,
  .hl-install__img-wrap,
  .hl-install__placeholder {
    aspect-ratio: 16/9;
    order: -1;
  }
}
@media (max-width: 480px) {
  .hl-install__ctas { flex-direction: column; align-items: flex-start; }
  .hl-install__badge { font-size: 11px; }
}

/* ─── Community Gallery ───────────────────────────────────── */
/* GUIDANCE: UGC grid; the prompt border + hashtag are orange (accent),
   captions white over images. On-rule. */
.hl-community__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}
.hl-community__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--hl-muted);
  max-width: 480px;
  margin-top: 8px;
}
.hl-community__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 12px;
  margin-bottom: 32px;
}
.hl-community__item {
  position: relative;
  border-radius: var(--hl-radius);
  overflow: hidden;
  background: var(--hl-warm);
}
.hl-community__item--tall {
  grid-row: span 2;
}
.hl-community__link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
}
.hl-community__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.hl-community__item:hover img {
  transform: scale(1.05);
}
.hl-community__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hl-community__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity var(--hl-transition);
  padding: 16px;
}
.hl-community__item:hover .hl-community__overlay {
  opacity: 1;
}
.hl-community__caption {
  font-size: 13px;
  font-weight: 600;
  color: white;
  text-align: center;
  line-height: 1.4;
  margin: 0;
}
/* UGC Prompt */
.hl-community__prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 28px;
  border: 1.5px solid var(--hl-accent);
  border-radius: var(--hl-radius-lg);
  background: var(--hl-warm);
}
.hl-community__prompt-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--hl-text);
  margin: 0 0 4px;
}
.hl-community__prompt-sub {
  font-size: 13px;
  color: var(--hl-muted);
  margin: 0;
}
.hl-community__hashtag {
  font-size: 18px;
  font-weight: 700;
  color: var(--hl-accent);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .hl-community__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 180px;
  }
}
@media (max-width: 640px) {
  .hl-community__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
    gap: 8px;
  }
  .hl-community__header { flex-direction: column; align-items: flex-start; }
  .hl-community__prompt { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
  .hl-community__grid { grid-auto-rows: 130px; }
}

/* ─── Newsletter ──────────────────────────────────────────── */
/* GUIDANCE: dark-image background; inputs/borders turn orange on focus
   (accent). Submit uses .hl-newsletter__submit (your CTA path). On-rule. */
.hl-newsletter {
  position: relative;
  overflow: hidden;
}
.hl-newsletter__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hl-newsletter__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hl-newsletter__bg-overlay {
  position: absolute;
  inset: 0;
}
.hl-newsletter__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.hl-newsletter__heading {
  font-family: var(--hl-font-head);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  color: white;
  margin: 0 0 16px;
}
.hl-newsletter__body {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
  margin-bottom: 28px;
}
.hl-newsletter__perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hl-newsletter__perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}
.hl-newsletter__perks svg {
  flex-shrink: 0;
}
/* Form */
.hl-newsletter__form-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hl-newsletter__field-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hl-newsletter__input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--hl-radius);
  color: white;
  font-size: 14px;
  font-family: var(--hl-font-body);
  transition: border-color var(--hl-transition);
  box-sizing: border-box;
}
.hl-newsletter__input::placeholder { color: rgba(255,255,255,0.35); }
.hl-newsletter__input:focus {
  outline: none;
  border-color: var(--hl-accent);
}
.hl-newsletter__submit {
  width: 100%;
  justify-content: center;
}
.hl-newsletter__disclaimer {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin: 0;
  line-height: 1.6;
}
.hl-newsletter__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
}
.hl-newsletter__success p {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin: 0;
}
@media (max-width: 768px) {
  .hl-newsletter__inner {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .hl-newsletter__heading { font-size: clamp(24px, 7vw, 36px); }
  .hl-newsletter__body    { font-size: 14px; margin-bottom: 20px; }
}


/* ===================================================================
   hl-cards-cart.css
   GUIDANCE: Conversion-critical UI — product cards, quick view modal,
   and cart drawer. This is where the orange "buy" treatment lives:
   the quick-view Add-to-Cart and the cart checkout hover are orange.
   Everything else stays neutral.
   =================================================================== */
/*
  ============================================================
  Happy Locks — Product Cards, Quick View & Cart Drawer
  File: assets/hl-cards-cart.css
  ============================================================
*/

/* ─── Product Card ────────────────────────────────────────── */
.hl-pcard {
  display: flex;
  flex-direction: column;
  background: var(--hl-white, var(--hl-white));
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.hl-pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.09);
}

/* Image wrap */
.hl-pcard__img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4/4.5;
  background: var(--hl-bg);
  text-decoration: none;
}
.hl-pcard__img {
  position: absolute;
  inset: 0;
  transition: opacity 0.4s ease;
}
.hl-pcard__img--secondary { opacity: 0; }
.hl-pcard:hover .hl-pcard__img--secondary { opacity: 1; }
.hl-pcard:hover .hl-pcard__img--primary   { opacity: 0; }
.hl-pcard__img-el {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.hl-pcard__img-placeholder {
  width: 100%; height: 100%;
  background: var(--hl-border);
}

/* Sale badge */
.hl-pcard__badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: var(--hl-accent); color: white;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 6px;
}

/* Low stock indicator (product cards) */
/* GUIDANCE: urgency cue uses orange dot + text (accent) with a gentle
   pulse. On-rule and CRO-friendly. */
.hl-low-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hl-accent);
  line-height: 1.2;
}
.hl-low-stock__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hl-accent);
  flex-shrink: 0;
  animation: hl-low-stock-pulse 1.6s ease-in-out infinite;
}
@keyframes hl-low-stock-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .hl-low-stock__dot { animation: none; }
}

/* Quick View */
/* GUIDANCE: the quick-view pill is BLACK and turns orange on hover. The
   eye icon SVG is inlined (white stroke). On-rule. */
.hl-pcard__quickview {
  position: absolute; bottom: 12px; left: 50%; z-index: 3;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;

  /* Pill shape — clean and readable */
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--hl-text);
  color: white; border: none; cursor: pointer;
  border-radius: 40px;
  font-family: var(--hl-font-body, sans-serif);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 10px 20px;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
/* Eye icon */
.hl-pcard__quickview::before {
  content: '';
  display: block;
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
  flex-shrink: 0;
}
.hl-pcard:hover .hl-pcard__quickview {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.hl-pcard__quickview:hover {
  background: var(--hl-accent);
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}

/* Card body */
.hl-pcard__body { padding: 14px 16px 18px; }

/* Swatches */
/* PRODUCT SWATCHES: real finish colors set inline per product. The
   active ring uses --hl-text (neutral). Do not neutralize the fills. */
.hl-pcard__swatches {
  display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.hl-pcard__swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
  padding: 0; outline: none;
}
.hl-pcard__swatch:hover { transform: scale(1.15); }
.hl-pcard__swatch.is-active {
  box-shadow: 0 0 0 2px white, 0 0 0 3.5px var(--hl-text);
  transform: scale(1.1);
}
.hl-pcard__swatch-more {
  font-size: 11px; font-weight: 600; color: var(--hl-muted-token);
  text-decoration: none; letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color 0.2s;
}
.hl-pcard__swatch-more:hover { color: var(--hl-text); }

/* Title + price */
/* GUIDANCE: sale price uses orange (--hl-accent) as the emphasis color;
   compare-at is muted strikethrough. On-rule. */
.hl-pcard__title-link { text-decoration: none; }
.hl-pcard__title {
  font-size: 14px; font-weight: 600;
  color: var(--hl-text); margin: 0 0 6px;
  line-height: 1.35;
}
.hl-pcard__price { display: flex; align-items: center; gap: 8px; }
.hl-pcard__price--regular { font-size: 15px; font-weight: 600; color: var(--hl-text); }
.hl-pcard__price--sale    { font-size: 15px; font-weight: 700; color: var(--hl-accent); }
.hl-pcard__price--compare { font-size: 13px; color: var(--hl-muted-token); text-decoration: line-through; }

/* Grid wrapper */
.hl-pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
@media (max-width: 600px) {
  .hl-pcard-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* On mobile: always show quick view pill (no hover state) */
  .hl-pcard__quickview {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    font-size: 11px;
    padding: 8px 14px;
    bottom: 10px;
  }
}
/* Quick-add "Add"/"Choose" buttons float over product images —
   keep them borderless (the global primary border shouldn't apply here). */
.button.quick-add__button {
  --button-border-width: 0;
}

/* ─── Quick View Modal ────────────────────────────────────── */
/* GUIDANCE: the Add-to-Cart button here IS orange (the buy path you
   wanted). Spec icons use orange stroke. Active swatch ring is neutral. */
.hl-qv-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
.hl-qv-overlay.is-open { opacity: 1; pointer-events: all; }

.hl-qv-modal {
  position: fixed; z-index: 401;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.96);
  width: min(860px, 94vw);
  max-height: 88vh;
  background: var(--hl-white);
  border-radius: 16px;
  overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex; flex-direction: column;
}
.hl-qv-modal.is-open {
  opacity: 1; pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}
.hl-qv-close {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--hl-bg); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--hl-text); transition: background 0.2s;
}
.hl-qv-close:hover { background: var(--hl-border); }
.hl-qv-inner { overflow-y: auto; flex: 1; padding: 32px; }

/* QV layout */
.hl-qv-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px; align-items: start;
}
@media (max-width: 640px) {
  .hl-qv-layout { grid-template-columns: 1fr; gap: 24px; }
  .hl-qv-inner  { padding: 20px; }
}

/* QV gallery */
.hl-qv-main-img {
  border-radius: 10px; overflow: hidden;
  aspect-ratio: 4/4.5; background: var(--hl-bg);
}
.hl-qv-main-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-qv-thumbs {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.hl-qv-thumb {
  width: 56px; height: 56px; border-radius: 6px;
  overflow: hidden; border: 2px solid transparent;
  cursor: pointer; padding: 0; background: none;
  transition: border-color 0.2s;
}
.hl-qv-thumb.is-active { border-color: var(--hl-text); }
.hl-qv-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* QV details */
.hl-qv-title {
  font-family: var(--hl-font-head, Georgia, serif);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 500; color: var(--hl-text);
  margin: 0 0 12px; line-height: 1.2;
}
.hl-qv-price { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.hl-qv-price--regular { font-size: 20px; font-weight: 600; color: var(--hl-text); }
.hl-qv-price--sale    { font-size: 20px; font-weight: 700; color: var(--hl-accent); }
.hl-qv-price--compare { font-size: 15px; color: var(--hl-muted-token); text-decoration: line-through; }

/* QV swatches */
/* PRODUCT SWATCHES: real finish colors. Active ring neutral. Keep fills. */
.hl-qv-swatches   { margin-bottom: 20px; }
.hl-qv-swatch-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hl-muted-token); margin-bottom: 10px; }
.hl-qv-swatch-row   { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-qv-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2.5px solid transparent; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
  transition: transform 0.18s, box-shadow 0.18s;
  padding: 0; outline: none;
}
.hl-qv-swatch:hover { transform: scale(1.12); }
.hl-qv-swatch.is-active {
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--hl-text);
  transform: scale(1.08);
}

/* QV specs */
.hl-qv-specs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.hl-qv-spec  {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--hl-muted-token); font-weight: 500;
}
.hl-qv-spec svg { stroke: var(--hl-accent); flex-shrink: 0; }

/* QV ATC — THE primary buy button: orange by design (your rule). */
.hl-qv-atc-btn {
  width: 100%; padding: 15px;
  background: var(--hl-accent); color: white; border: none;
  border-radius: 8px; font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  font-family: var(--hl-font-body, sans-serif);
  margin-bottom: 12px;
}
.hl-qv-atc-btn:hover:not(:disabled) { background: var(--hl-accent); transform: translateY(-1px); }
.hl-qv-atc-btn:disabled { background: var(--hl-border); cursor: not-allowed; }
.hl-qv-full-link {
  display: block; text-align: center;
  font-size: 13px; color: var(--hl-muted-token); text-decoration: none;
  transition: color 0.2s;
}
.hl-qv-full-link:hover { color: var(--hl-text); }

/* Loading spinner */
.hl-qv-loading, .hl-cart-drawer__loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
}
.hl-qv-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--hl-border);
  border-top-color: var(--hl-accent);
  animation: hl-spin 0.7s linear infinite;
}
@keyframes hl-spin { to { transform: rotate(360deg); } }

/* ─── Cart Drawer ─────────────────────────────────────────── */
/* GUIDANCE: free-shipping progress fill is orange (accent). Checkout
   button is black, turning orange on hover (the buy path). The "view
   cart" button is a neutral black outline. On-rule. */
.hl-cart-overlay {
  position: fixed; inset: 0; z-index: 490;
  background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.hl-cart-overlay.is-open { opacity: 1; pointer-events: all; }

.hl-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 491;
  width: min(420px, 100vw);
  background: var(--hl-white, #FFFFFF);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 40px rgba(0,0,0,0.12);
}
.hl-cart-drawer.is-open { transform: translateX(0); }

/* Header */
.hl-cart-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--hl-border);
  flex-shrink: 0;
}
.hl-cart-drawer__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 700; color: var(--hl-text);
}
.hl-cart-drawer__count {
  background: var(--hl-text); color: white;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.hl-cart-drawer__close {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--hl-bg); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--hl-text); transition: background 0.2s;
}
.hl-cart-drawer__close:hover { background: var(--hl-border); }

/* Shipping bar */
.hl-cart-drawer__shipping-bar {
  padding: 12px 24px;
  background: var(--hl-bg);
  border-bottom: 1px solid var(--hl-border);
  flex-shrink: 0;
}
.hl-cart-drawer__shipping-msg {
  font-size: 13px; color: var(--hl-text); margin-bottom: 8px; line-height: 1.4;
}
.hl-cart-drawer__shipping-track {
  height: 4px; background: var(--hl-border); border-radius: 2px; overflow: hidden;
}
.hl-cart-drawer__shipping-fill {
  height: 100%; background: var(--hl-accent); border-radius: 2px;
  transition: width 0.5s ease;
}

/* Body / items */
.hl-cart-drawer__body {
  flex: 1; overflow-y: auto; padding: 8px 0;
}
.hl-cart-drawer__items { display: flex; flex-direction: column; }
.hl-cart-drawer__item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px; align-items: start;
  padding: 16px 24px;
  border-bottom: 1px solid var(--hl-bg);
}
.hl-cart-drawer__item-img {
  display: block; border-radius: 8px; overflow: hidden;
  aspect-ratio: 1; background: var(--hl-bg);
}
.hl-cart-drawer__item-img img { width: 100%; height: 100%; object-fit: cover; }
.hl-cart-drawer__item-name {
  font-size: 14px; font-weight: 600; color: var(--hl-text);
  text-decoration: none; line-height: 1.35;
  display: block; margin-bottom: 4px;
}
.hl-cart-drawer__item-name:hover { color: var(--hl-accent); }
.hl-cart-drawer__item-variant { font-size: 12px; color: var(--hl-muted-token); margin-bottom: 4px; }
.hl-cart-drawer__item-price   { font-size: 14px; font-weight: 700; color: var(--hl-text); }
.hl-cart-drawer__item-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hl-cart-drawer__qty {
  display: flex; align-items: center;
  border: 1.5px solid var(--hl-border); border-radius: 6px; overflow: hidden;
}
.hl-cart-drawer__qty-btn {
  width: 28px; height: 28px; background: none; border: none;
  cursor: pointer; font-size: 15px; font-weight: 600; color: var(--hl-text);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.hl-cart-drawer__qty-btn:hover { background: var(--hl-bg); }
.hl-cart-drawer__qty-num {
  width: 28px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--hl-text);
}
.hl-cart-drawer__remove {
  font-size: 11px; color: var(--hl-muted-token); text-decoration: underline;
  background: none; border: none; cursor: pointer;
  transition: color 0.2s;
}
.hl-cart-drawer__remove:hover { color: var(--hl-text); }

/* Empty state */
.hl-cart-drawer__empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px;
  padding: 60px 24px; text-align: center;
}
.hl-cart-drawer__empty p { font-size: 15px; color: var(--hl-muted-token); margin: 0; }
.hl-cart-drawer__shop-link {
  font-size: 13px; font-weight: 600; color: var(--hl-accent);
  text-decoration: none;
}

/* Cross-sell */
.hl-cart-drawer__crosssell {
  border-top: 1px solid var(--hl-border);
  padding: 16px 24px; flex-shrink: 0;
}
.hl-cart-drawer__crosssell-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.hl-cart-drawer__crosssell-header span {
  font-size: 13px; font-weight: 700; color: var(--hl-text);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.hl-cart-drawer__crosssell-nav { display: flex; gap: 4px; }
.hl-cart-drawer__crosssell-prev,
.hl-cart-drawer__crosssell-next {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--hl-border); background: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s; color: var(--hl-text);
}
.hl-cart-drawer__crosssell-prev:hover,
.hl-cart-drawer__crosssell-next:hover { border-color: var(--hl-text); }
.hl-cart-drawer__crosssell-track {
  display: flex; gap: 10px; overflow: hidden;
  transition: transform 0.3s ease;
}
.hl-cart-drawer__cs-item {
  flex: 0 0 calc(50% - 5px);
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border: 1.5px solid var(--hl-border);
  border-radius: 8px; background: var(--hl-bg);
}
.hl-cart-drawer__cs-item img {
  width: 48px; height: 48px; object-fit: cover;
  border-radius: 6px; flex-shrink: 0;
}
.hl-cart-drawer__cs-info { flex: 1; min-width: 0; }
.hl-cart-drawer__cs-name  { font-size: 12px; font-weight: 600; color: var(--hl-text); margin: 0 0 2px; line-height: 1.3; }
.hl-cart-drawer__cs-price { font-size: 12px; color: var(--hl-muted-token); margin: 0; }
.hl-cart-drawer__cs-add {
  flex-shrink: 0; padding: 6px 10px;
  background: var(--hl-text); color: white; border: none;
  border-radius: 6px; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: background 0.2s; white-space: nowrap;
}
.hl-cart-drawer__cs-add:hover { background: var(--hl-accent); }

/* Footer */
.hl-cart-drawer__footer {
  border-top: 1px solid var(--hl-border);
  padding: 16px 24px 20px;
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.hl-cart-drawer__total {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 17px; font-weight: 700; color: var(--hl-text);
}
.hl-cart-drawer__tax-note { font-size: 12px; color: var(--hl-muted-token); margin: 0; }
.hl-cart-drawer__actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.hl-cart-drawer__view-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 14px; border: 1.5px solid var(--hl-text);
  border-radius: 8px; font-size: 14px; font-weight: 600;
  color: var(--hl-text); text-decoration: none;
  transition: all 0.2s;
}
.hl-cart-drawer__view-btn:hover { background: var(--hl-text); color: white; }
.hl-cart-drawer__checkout-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; background: var(--hl-text); border-radius: 8px;
  font-size: 14px; font-weight: 700; color: white;
  text-decoration: none; transition: background 0.2s;
}
.hl-cart-drawer__checkout-btn:hover { background: var(--hl-accent); color: white; }

@media (max-width: 480px) {
  .hl-cart-drawer { width: 100vw; }
  .hl-cart-drawer__item { grid-template-columns: 68px 1fr auto; gap: 10px; padding: 14px 16px; }
  .hl-cart-drawer__footer { padding: 14px 16px 16px; }
}


/* ===================================================================
   hl-horizon-overrides.css
   GUIDANCE: This file restyles NATIVE Horizon elements (product cards,
   badges, mega-menu, comparison slider, policy pages, PDP) to match the
   brand. Uses !important because it's overriding theme defaults — that's
   the one acceptable place for it. The product-swatch block here is the
   PDP variant picker: real finish colors, leave them.
   =================================================================== */
/*
  HappyLocks — Horizon Overrides v12
  v11 + JS-controlled storytelling pinning (bypasses CSS sticky entirely).
*/

::selection { background: rgba(0,0,0,0.1); }
:focus-visible { outline: 2px solid var(--hl-accent) !important; outline-offset: 2px !important; border-radius: 2px; }
html { scroll-behavior: smooth; }
.button, button[type="submit"] { letter-spacing: .04em; }
a.button, .button { border-radius: 8px; }
h1, h2, h3 { letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .product-card:hover { transform: none !important; }
  .product-card:hover .card-gallery img { transform: none !important; }
}

/* GUIDANCE: native Horizon badge is BLACK here, while the custom card
   badge (.hl-product-card__badge / .hl-pcard__badge) is orange. Both are
   on-palette; align them if you want one consistent badge style. */
.product-badges__badge {
  font-size: 10px; font-weight: 600;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  border-radius: 4px !important; padding: 4px 9px !important;
  background: var(--hl-text); color: var(--hl-white);
}
.product-card .price-item--sale, .price-item--sale { color: var(--hl-text); }
.price-item--regular.compare-at-price, .compare-at-price { color: var(--hl-muted-token); font-weight: 400; }
.hl-cart-drawer__actions { flex-wrap: wrap; }

main[data-template*="collection"] h1 { letter-spacing: -0.015em; font-weight: 500; }
main[data-template*="collection"] .collection-description,
main[data-template*="collection"] h1 + div p { max-width: 640px; font-size: 15px; line-height: 1.7; color: var(--hl-muted-token); }
.product-information__details h1 { letter-spacing: -0.015em; line-height: 1.12; }
@media screen and (min-width: 750px) {
  main[data-template="cart"] .section--page-width .cart-page:has(.cart-summary--extend) {
    grid-column: 2 !important;
    grid-template-columns: 1fr min(38vw, 420px) !important;
  }
  main[data-template="cart"] .section--page-width .cart-page {
    grid-template-columns: 1fr min(38vw, 420px) !important;
  }
  main[data-template="cart"] cart-summary,
  main[data-template="cart"] [class*="cart-summary"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  main[data-template="cart"] cart-summary [class*="total"] {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  main[data-template="cart"] cart-summary [class*="total"] > * {
    min-width: 0 !important;
    word-break: keep-all !important;
    white-space: nowrap !important;
  }
}
@media screen and (min-width: 1400px) {
  main[data-template="cart"] .section--page-width .cart-page,
  main[data-template="cart"] .section--page-width .cart-page:has(.cart-summary--extend) {
    grid-template-columns: 1fr 420px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   PARALLAX STORYTELLING (v12: JS-pinned, NO CSS sticky)
   JS sets position:relative + translateY on .hl-story-scroll__left.
   We override the inline section CSS's `position: sticky` here.
   GUIDANCE: the progress rail fill + active step number are orange
   (accent); inactive numbers are faint grey. On-rule.
   ══════════════════════════════════════════════════════════════ */
.hl-story-scroll {
  background: var(--hl-warm);
  position: relative !important;
}

/* Default: left panel sticks to the top of its grid cell. JS will take over on desktop. */
@media (min-width: 861px) {
  .hl-story-scroll__left {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: var(--hl-warm);
    overflow: hidden !important;
    align-self: start !important;
  }
  /* When JS pins the panel, it adds the .hl-js-pinned class as confirmation */
  .hl-story-scroll__left.hl-js-pinned {
    will-change: transform;
  }
  /* The grid cell on the left should NOT auto-stretch; let the panel control its height */
  .hl-story-scroll {
    align-items: start !important;
  }
}

.hl-story-scroll__left { background: var(--hl-warm); }

.hl-story-scroll__frame {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
  transform: scale(1.06) !important;
  will-change: opacity, transform !important;
  display: block !important;
}
.hl-story-scroll__frame.is-active { transform: scale(1) !important; }
.hl-story-scroll__frame .hl-kb-inner {
  position: absolute; inset: 0;
  transform: scale(1) translate3d(0, var(--hl-px-y, 0px), 0);
  will-change: transform;
  transition: transform 0.15s linear;
}
.hl-story-scroll__frame .hl-kb-inner.hl-kb-run { animation: hl-ken-burns 14s ease-out forwards; }
@keyframes hl-ken-burns {
  0%   { transform: scale(1)    translate3d(0, var(--hl-px-y, 0px), 0); }
  100% { transform: scale(1.12) translate3d(-2%, calc(var(--hl-px-y, 0px) - 3%), 0); }
}
.hl-story-scroll__frame .hl-kb-inner img,
.hl-story-scroll__frame .hl-kb-inner .hl-story-scroll__frame-fallback {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.hl-story-scroll__step {
  opacity: 0.32 !important;
  transform: translateY(24px) !important;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
  min-height: 80vh !important;
  border-bottom: none !important;
}
.hl-story-scroll__step.is-active { opacity: 1 !important; transform: translateY(0) !important; }
.hl-story-scroll__num {
  font-size: 88px;
  color: rgba(29,29,31,0.12);
  letter-spacing: -0.02em !important;
  transform-origin: left center !important;
  transition: color 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.hl-story-scroll__step.is-active .hl-story-scroll__num { color: var(--hl-accent); transform: scale(1.04) !important; }
.hl-story-scroll__step:nth-child(even).is-active .hl-story-scroll__num { color: var(--hl-accent); }
.hl-story-scroll__step-title { color: var(--hl-text); }
.hl-story-scroll__step-body  { color: var(--hl-muted-token); max-width: 480px; }
.hl-story-rail {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: rgba(29,29,31,0.10);
  z-index: 3; pointer-events: none;
}
.hl-story-rail__fill {
  position: absolute; top: 0; left: 0; width: 100%;
  background: linear-gradient(180deg, var(--hl-accent) 0%, var(--hl-accent) 100%);
  height: 0%;
  transition: height 0.2s linear;
  display: block;
}

/* Mobile: no JS pinning, panel is in normal flow under the right column */
@media (max-width: 860px) {
  .hl-story-scroll__left {
    position: relative !important;
    height: 56vw !important;
    min-height: 320px !important;
    transform: none !important;
    will-change: auto !important;
  }
  .hl-story-scroll__step { opacity: 1 !important; transform: none !important; min-height: auto !important; }
  .hl-story-rail { display: none !important; }
  .hl-story-scroll__num { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .hl-story-scroll__frame, .hl-story-scroll__step, .hl-story-scroll__num,
  .hl-story-scroll__frame .hl-kb-inner { transition: opacity 0.3s ease !important; transform: none !important; animation: none !important; }
}

/* PDP trust list — first letter rendered in orange accent */
main[data-template*="product"] .product-details ul li {
  color: var(--hl-text);
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  font-size: 14px;
  line-height: 1.9 !important;
}
main[data-template*="product"] .product-details ul li::first-letter {
  color: var(--hl-accent);
  font-weight: 700;
  font-size: 1.1em;
  margin-right: 4px !important;
}
main[data-template*="product"] .product-details ul { list-style: none !important; padding-left: 0 !important; }
.hl-section-label, .hl-eyebrow { color: var(--hl-accent); letter-spacing: .14em !important; }

/* ══ PDP VARIANT SWATCHES (real product finish colors) ══
   GUIDANCE: these paint each color variant button with the TRUE finish
   color and a matching glow when selected. They are deliberately off the
   brand palette (navy, green, red, gold, etc.) because they represent the
   physical product. DO NOT recolor to orange. Canopy uses --color-success
   and Crimson Edge uses --color-error — that's correct (a green/red product
   maps to the theme's green/red). New finishes: add a matching block here
   plus a --hl-swatch-* token above. */
.variant-option__button-label:has(input[value="Midnight Tide"]),
.variant-option__button-label:has(input[value="Canopy"]),
.variant-option__button-label:has(input[value="Frost"]),
.variant-option__button-label:has(input[value="Adobe Dusk"]),
.variant-option__button-label:has(input[value="Amethyst"]),
.variant-option__button-label:has(input[value="Lagoon"]),
.variant-option__button-label:has(input[value="Petal"]) {

.variant-option__button-label:has(input[value="Midnight Tide"]) { background:#13294B; }
.variant-option__button-label:has(input[value="Canopy"])        { background:var(--color-success); }
.variant-option__button-label:has(input[value="Crimson Edge"])  { background:var(--color-error); }
.variant-option__button-label:has(input[value="Frost"])         { background:#E8EDF0; }
.variant-option__button-label:has(input[value="Adobe Dusk"])    { background:#B86125; }
.variant-option__button-label:has(input[value="Aegean"])        { background:#00B7C7; }
.variant-option__button-label:has(input[value="Dusk Vault"])    { background:#4D2D73; }
.variant-option__button-label:has(input[value="Solar"])         { background:#FFD100; }
.variant-option__button-label:has(input[value="Petal"])         { background:#D5006D; }
.variant-option__button-label:has(input[value="Midnight Tide"]):hover,
.variant-option__button-label:has(input[value="Canopy"]):hover,
.variant-option__button-label:has(input[value="Crimson Edge"]):hover,
.variant-option__button-label:has(input[value="Frost"]):hover,
.variant-option__button-label:has(input[value="Adobe Dusk"]):hover,
.variant-option__button-label:has(input[value="Aegean"]):hover,
.variant-option__button-label:has(input[value="Dusk Vault"]):hover,
.variant-option__button-label:has(input[value="Solar"]):hover,
.variant-option__button-label:has(input[value="Petal"]):hover { transform: scale(1.10); }
.variant-option__button-label:has(input[value="Midnight Tide"]):has(:checked) {
  box-shadow: 0 0 0 2px var(--hl-white), 0 0 22px 5px rgba(15, 42, 82, 0.65) !important;
  transform: scale(1.06) !important; outline: none !important;
}
.variant-option__button-label:has(input[value="Canopy"]):has(:checked) {
  box-shadow: 0 0 0 2px var(--hl-white), 0 0 22px 5px rgba(0,107,63,0.65) !important;
  transform: scale(1.06) !important; outline: none !important;
}
.variant-option__button-label:has(input[value="Crimson Edge"]):has(:checked) {
  box-shadow: 0 0 0 2px var(--hl-white), 0 0 22px 5px rgba(218,41,28,0.65) !important;
  transform: scale(1.06) !important; outline: none !important;
}
.variant-option__button-label:has(input[value="Frost"]):has(:checked) {
  box-shadow: 0 0 0 2px var(--hl-white), 0 0 0 3px rgba(160,170,180,0.7), 0 0 18px 4px rgba(160,170,180,0.45) !important;
  transform: scale(1.06) !important; outline: none !important;
}
.variant-option__button-label:has(input[value="Adobe Dusk"]):has(:checked) {
  box-shadow: 0 0 0 2px var(--hl-white), 0 0 22px 5px rgba(184,97,37,0.65) !important;
  transform: scale(1.06) !important; outline: none !important;
}
.variant-option__button-label:has(input[value="Aegean"]):has(:checked) {
  box-shadow: 0 0 0 2px var(--hl-white), 0 0 22px 5px rgba(0,183,199,0.7) !important;
  transform: scale(1.06) !important; outline: none !important;
}
.variant-option__button-label:has(input[value="Dusk Vault"]):has(:checked) {
  box-shadow: 0 0 0 2px var(--hl-white), 0 0 22px 5px rgba(77,45,115,0.7) !important;
  transform: scale(1.06) !important; outline: none !important;
}
.variant-option__button-label:has(input[value="Solar"]):has(:checked) {
  box-shadow: 0 0 0 2px var(--hl-white), 0 0 24px 6px rgba(255,209,0,0.75) !important;
  transform: scale(1.06) !important; outline: none !important;
}
.variant-option__button-label:has(input[value="Petal"]):has(:checked) {
  box-shadow: 0 0 0 2px var(--hl-white), 0 0 22px 5px rgba(213,0,109,0.7) !important;
  transform: scale(1.06) !important; outline: none !important;
}
.variant-option__button-label:has(input[value="Midnight Tide"]):has(:checked):hover,
.variant-option__button-label:has(input[value="Canopy"]):has(:checked):hover,
.variant-option__button-label:has(input[value="Crimson Edge"]):has(:checked):hover,
.variant-option__button-label:has(input[value="Frost"]):has(:checked):hover,
.variant-option__button-label:has(input[value="Adobe Dusk"]):has(:checked):hover,
.variant-option__button-label:has(input[value="Aegean"]):has(:checked):hover,
.variant-option__button-label:has(input[value="Dusk Vault"]):has(:checked):hover,
.variant-option__button-label:has(input[value="Solar"]):has(:checked):hover,
.variant-option__button-label:has(input[value="Petal"]):has(:checked):hover { transform: scale(1.12) !important; }
.variant-option__button-label:has(input[value="Midnight Tide"]) > *:not(input),
.variant-option__button-label:has(input[value="Canopy"]) > *:not(input),
.variant-option__button-label:has(input[value="Crimson Edge"]) > *:not(input),
.variant-option__button-label:has(input[value="Frost"]) > *:not(input),
.variant-option__button-label:has(input[value="Adobe Dusk"]) > *:not(input),
.variant-option__button-label:has(input[value="Aegean"]) > *:not(input),
.variant-option__button-label:has(input[value="Dusk Vault"]) > *:not(input),
.variant-option__button-label:has(input[value="Solar"]) > *:not(input),
.variant-option__button-label:has(input[value="Petal"]) > *:not(input) {
  display: none !important;
}
.variant-option__button-label:has(input[value="Midnight Tide"])::before,
.variant-option__button-label:has(input[value="Midnight Tide"])::after,
.variant-option__button-label:has(input[value="Canopy"])::before,
.variant-option__button-label:has(input[value="Canopy"])::after,
.variant-option__button-label:has(input[value="Crimson Edge"])::before,
.variant-option__button-label:has(input[value="Crimson Edge"])::after,
.variant-option__button-label:has(input[value="Frost"])::before,
.variant-option__button-label:has(input[value="Frost"])::after,
.variant-option__button-label:has(input[value="Adobe Dusk"])::before,
.variant-option__button-label:has(input[value="Adobe Dusk"])::after,
.variant-option__button-label:has(input[value="Aegean"])::before,
.variant-option__button-label:has(input[value="Aegean"])::after,
.variant-option__button-label:has(input[value="Dusk Vault"])::before,
.variant-option__button-label:has(input[value="Dusk Vault"])::after,
.variant-option__button-label:has(input[value="Solar"])::before,
.variant-option__button-label:has(input[value="Solar"])::after,
.variant-option__button-label:has(input[value="Petal"])::before,
.variant-option__button-label:has(input[value="Petal"])::after {
  display: none !important;
  content: none !important;
}
.variant-option__button-label:has(input[value="Midnight Tide"]) > input,
/* Every swatch radio input fills its label so the full circle renders and is
   clickable — color-agnostic so new finishes never break (was previously a
   hardcoded list of color names that missed Lagoon and Amethyst). */
.variant-option--swatches .variant-option__button-label > input,
.variant-option__button-label--has-swatch > input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.variant-option--swatches overflow-list::part(list),
fieldset.variant-option ul, fieldset.variant-option .variant-option__values { flex-wrap: wrap !important; gap: 14px !important; align-items: center !important; padding: 4px 0 !important; }
.variant-option legend { font-size: 12px; font-weight: 600; color: var(--hl-text); margin-bottom: 8px !important; }
.variant-option__swatch-value { font-size: 12px; color: var(--hl-muted-token); font-weight: 500; }
.product-card .variant-option legend { display: none !important; }

/* PRODUCT CARDS (native Horizon) */
.product-card { background:var(--hl-white); border-radius:12px !important; border:1px solid rgba(0,0,0,0.04) !important; overflow:hidden !important; box-shadow:0 4px 20px rgba(0,0,0,0.06) !important; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; display:flex !important; flex-direction:column !important; }
.product-card:hover { transform:translateY(-4px) !important; box-shadow:0 20px 50px rgba(0,0,0,0.12) !important; border-color:transparent !important; }
.product-card .card-gallery { background:var(--hl-warm); overflow:hidden !important; position:relative !important; aspect-ratio:3/4 !important; min-height:200px !important; }
.product-card .card-gallery img { width:100% !important; height:100% !important; object-fit:cover !important; transition:transform .5s ease !important; }
.product-card:hover .card-gallery img { transform:scale(1.04) !important; }
.product-card .slideshow-control, .product-card .card-gallery slideshow-component>button { display:none !important; }
.product-card .text-block { padding:12px 14px 2px !important; }
.product-card .text-block a, .product-card .text-block p { font-size:.875rem; font-weight:600; color:var(--hl-text); line-height:1.4 !important; text-decoration:none !important; }
.product-card product-price { padding:3px 14px 0 !important; display:block !important; }
.product-card .price__regular .price, .product-card .price-item:not(.compare-at-price) { font-size:1.0625rem; font-weight:700; color:var(--hl-text); }
.product-card .price-item--regular.compare-at-price { font-size:.8125rem; text-decoration:line-through !important; }
.product-card .variant-picker { padding:8px 14px 14px !important; margin-top:auto !important; }

/* MEGA MENU — accent top border + orange hover/active link. On-rule. */
.menu-list__submenu { border-top:none !important; border-radius:0 !important; box-shadow:none !important; }
.menu-list__submenu-inner { border-top:2px solid var(--hl-accent) !important; box-shadow:0 24px 60px rgba(0,0,0,.10) !important; }
.menu-list__link { font-size:.8125rem; letter-spacing:.06em !important; font-weight:600; }
.menu-list__link--active, .menu-list__link:hover { color:var(--hl-accent); }

/* COMPARISON SLIDER — orange handle, neutral white divider line. */
.cs-slider__handle { background: #1c1b1ad3; border:3px solid var(--hl-white) !important; box-shadow:0 4px 20px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,.2) !important; width:48px !important; height:48px !important; padding:0 !important; gap:0 !important; }
.cs-slider__chevron { display:none !important; }
.cs-slider__handle::before, .cs-slider__handle::after { content:'' !important; position:absolute !important; width:9px !important; height:9px !important; border-top:2.5px solid var(--hl-white) !important; border-right:2.5px solid var(--hl-white) !important; top:50% !important; margin-top:-5px !important; }
.cs-slider__handle::before { transform:rotate(-135deg) !important; left:13px !important; }
.cs-slider__handle::after  { transform:rotate(45deg) !important; right:13px !important; }
.comparison-slider__media-wrapper:hover .cs-slider__handle, .comparison-slider__media-wrapper:active .cs-slider__handle { transform:translate(-50%,-50%) scale(1.1) !important; box-shadow:0 6px 28px rgba(0,0,0,0.1) !important; }
.comparison-slider__media-wrapper[data-orientation='horizontal']::after { background:rgba(255,255,255,.85); width:2px !important; }
.comparison-slider__media-wrapper[data-orientation='vertical']::after   { background:rgba(255,255,255,.85); height:2px !important; }
.comparison-slider__text .h6, .comparison-slider__text>div { font-size:11px; font-weight:700; letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--hl-white); background:rgba(28,27,26,.55); padding:5px 12px !important; border-radius:20px !important; backdrop-filter:blur(4px) !important; }

/* Slideshow pagination — active dot stretches into an orange pill. */
.section-slideshow { position:relative; }
.section-slideshow slideshow-pagination button[aria-current="true"],
.section-slideshow slideshow-pagination button[aria-selected="true"] { background:var(--hl-accent); width:24px !important; border-radius:4px !important; }

/* Policy pages — section headings underlined in orange. */
.shopify-policy__container { max-width:800px !important; margin-inline:auto !important; padding-block:clamp(48px,6vw,96px) !important; padding-inline:clamp(24px,5vw,48px) !important; }
.shopify-policy__title { font-size:clamp(28px,4vw,44px); font-weight:400; color:var(--hl-text); }
.shopify-policy__body { font-size:15px; line-height:1.8 !important; color:var(--hl-dark); }
.shopify-policy__body h2 { border-bottom:2px solid var(--hl-accent) !important; padding-bottom:10px !important; margin-top:48px !important; }
.shopify-policy__body a { color:var(--hl-accent); }
body:has(.shopify-policy__container) { background:var(--hl-bg); }

@media (max-width:600px) {
  .product-card .text-block a, .product-card .text-block p { font-size:.8125rem; }
  .product-card .card-gallery { min-height:160px !important; }
  .variant-option__button-label:has(input[value="Midnight Tide"]),
  .variant-option__button-label:has(input[value="Canopy"]),
  .variant-option__button-label:has(input[value="Crimson Edge"]),
  .variant-option__button-label:has(input[value="Frost"]),
  .variant-option__button-label:has(input[value="Adobe Dusk"]),
  .variant-option__button-label:has(input[value="Aegean"]),
  .variant-option__button-label:has(input[value="Dusk Vault"]),
  .variant-option__button-label:has(input[value="Solar"]),
  .variant-option__button-label:has(input[value="Petal"]) {
    width:38px !important; height:38px !important; flex-basis:38px !important;
  }
}


/* ===================================================================
   hl-nav-overrides.css
   GUIDANCE: Targeted fixes for Horizon's mega menu — flicker, z-index,
   padding, and casing. Category headers render uppercase/muted; child
   links sentence-case and turn orange on hover. On-rule.
   =================================================================== */
/* HappyLocks nav overrides v5
   Based on exact Horizon Liquid structure from blocks/_header-menu.liquid
   Fixes: flickering, caps, padding, z-index, slider arrows
*/

/* ============================================================
   FIX 1: FLICKERING
   The previous version hid .header__underlay-closed which
   Horizon uses as a pointer-event bridge between the nav link
   and the submenu panel. Removing display:none restores hover.
   We must NOT touch underlay visibility.
============================================================ */

/* ============================================================
   FIX 2: Z-INDEX
   Do NOT override Horizon's own layer variables.
   Only fix the hero slider arrows sitting above the nav.
============================================================ */
.hl-hero__arrows,
.hl-hero__arrow {
  z-index: 2 !important;
}

/* Horizon uses --layer-header-menu for the submenu z-index.
   We only need to ensure the hero section itself is below the header. */
.shopify-section:has(.hl-hero) {
  z-index: 0 !important;
  position: relative;
}

/* ============================================================
   FIX 3: LEFT PADDING ON MEGA MENU
   Horizon sets padding via --section-padding-inline on
   .menu-list__submenu-inner. We override that variable.
============================================================ */
.menu-list__submenu-inner {
  --section-padding-inline: clamp(20px, 4vw, 60px) !important;
}

/* ============================================================
   FIX 4: CATEGORY HEADERS IN ALL CAPS
   The 3 group parent links render as .mega-menu__link--parent
   These are "By product type", "By room", "Browse"
============================================================ */
.mega-menu__link--parent {
  text-transform: uppercase !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em !important;
  color: var(--hl-muted-token);
  pointer-events: none !important;
  cursor: default !important;
  padding-bottom: 6px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid var(--hl-border) !important;
  display: block !important;
  width: 100% !important;
}

/* ============================================================
   FIX 5: CHILD LINKS — SENTENCE CASE
   Child links under the group headers use .mega-menu__link
   (without --parent modifier)
============================================================ */
.mega-menu__link:not(.mega-menu__link--parent) {
  text-transform: none !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em !important;
  color: var(--hl-text);
  padding-block: 4px !important;
}

.mega-menu__link:not(.mega-menu__link--parent):hover {
  color: var(--hl-accent);
}

/* Top-level nav links stay uppercase via theme CSS variable — no override needed */


/* ===================================================================
   hl-motion-polish.css
   GUIDANCE: Site-wide motion only (reveal-on-scroll, button lift, cart
   "pop", slider nudge). No colors here — purely behavior. All animations
   are disabled under prefers-reduced-motion for accessibility.
   =================================================================== */
/* hl-motion-polish.css v2 — motion + polish. Trust-row text REMOVED from drawer per request. */

.hl-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.hl-reveal.hl-in { opacity: 1; transform: none; }

@keyframes hl-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.hl-pop { animation: hl-pop .35s ease; }

a.button, .button, .hl-btn { transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; }
a.button:hover, .button:hover, .hl-btn:hover { transform: translateY(-1px); }
.hl-btn--primary:hover, .hl-btn--teal:hover, .hl-btn--outline:hover, .button--primary:hover, .button--secondary:hover { color: var(--hl-white) !important; }
a.button:active, .button:active, .hl-btn:active { transform: translateY(0); }

@keyframes hl-nudge { 0%, 100% { margin-left: 0; } 30% { margin-left: -7px; } 70% { margin-left: 7px; } }
.cs-slider__handle { animation: hl-nudge 1.6s ease 1.2s 2; transition: box-shadow .2s ease !important; }

/* Trust row text intentionally removed — no ::after content on cart actions */

@media (prefers-reduced-motion: reduce) {
  .hl-reveal { opacity: 1; transform: none; transition: none; }
  .hl-pop { animation: none; }
  .cs-slider__handle { animation: none !important; }
  a.button:hover, .button:hover, .hl-btn:hover { transform: none; }
}

/* Purchase buttons (Buy it now + Checkout) → orange, via Horizon's own vars */
.cart__checkout-button,
.shopify-payment-button__button--unbranded {
  --color-primary-button-background: var(--color-primary, #f5820a);
  --color-primary-button-border: var(--color-primary, #f5820a);
  --color-primary-button-text: #fff;
  --color-primary-button-hover-background: var(--color-primary-hover, #d96f08);
  --color-primary-button-hover-border: var(--color-primary-hover, #d96f08);
  --color-primary-button-hover-text: #fff;
}