/** Shopify CDN: Minification failed

Line 10:25 Unexpected "*"

**/
/* =============================================================================
   GBoxGuy brand substrate — hfb-brand.css
   Source: layout.md §1 palette, §2 typography, §5 motif, §3 motion.
   Loaded globally via snippets/hfb-head.liquid. Drives BOTH Horizon chrome
   (via --font-*/--color-* overrides) and every hfb-* section.
   Green (#B1CB42) is a targeted SIGNAL only. No full-bleed green sections.
   ============================================================================= */

/* --- Self-hosted faces (General Sans display, Hanken Grotesk body) --------- */
@font-face {
  font-family: 'General Sans';
  src: url('hfb-general-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('hfb-general-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('hfb-general-sans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('hfb-hanken-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('hfb-hanken-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('hfb-hanken-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('hfb-hanken-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Design tokens --------------------------------------------------------- */
:root {
  /* Palette (layout.md §1 — intake hex authoritative) */
  --brand-dark: #171A18;        /* stage / charcoal ink */
  --brand-dark-2: #1F2320;      /* raised charcoal (cards on dark) */
  --brand-primary: #B1CB42;     /* the signal — CTA, checks, price highlight */
  --brand-accent: #718042;      /* dark olive — text-adjacent green, section-accent band */
  --brand-highlight: #9FB355;   /* muted green — secondary checks, ticks on dark */
  --brand-surface: #FBFCF9;     /* near-white paper (section-default) */
  --brand-muted: #E8ECDA;       /* soft green background (section-muted) */
  --brand-olive-deep: #556231;  /* AA-safe olive for eyebrows/links on light (6.4:1 on paper) */

  /* Fonts — override Horizon chrome families to the self-hosted faces */
  --hfb-font-display: 'General Sans', 'Hanken Grotesk', system-ui, sans-serif;
  --hfb-font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body--family: 'Hanken Grotesk', system-ui, sans-serif;
  --font-heading--family: 'General Sans', 'Hanken Grotesk', system-ui, sans-serif;
  --font-subheading--family: 'Hanken Grotesk', system-ui, sans-serif;
  --font-accent--family: 'Hanken Grotesk', system-ui, sans-serif;

  /* Spacing scale (layout §2 rhythm) */
  --hfb-space-3xs: 4px;
  --hfb-space-2xs: 8px;
  --hfb-space-xs: 12px;
  --hfb-space-sm: 16px;
  --hfb-space-md: 24px;
  --hfb-space-lg: 40px;
  --hfb-space-xl: 64px;
  --hfb-space-2xl: 96px;
  --hfb-space-3xl: 128px;

  /* Section vertical rhythm (one value per role, applied consistently) */
  --hfb-section-y: clamp(56px, 8vw, 112px);
  --hfb-section-y-compact: clamp(40px, 6vw, 72px);

  /* Radii (§5 motif — superellipse cards, capsule chrome) */
  --hfb-radius-card: 18px;
  --hfb-radius-media: 20px;
  --hfb-radius-chip: 999px;
  --hfb-radius-pill: 999px;

  /* Type scale (layout §2 bands) */
  --hfb-h1: clamp(2.25rem, 5.2vw, 3.75rem);   /* 36 -> 60 */
  --hfb-h2: clamp(1.75rem, 3.6vw, 2.5rem);    /* 28 -> 40 */
  --hfb-h3: clamp(1.375rem, 2.4vw, 1.75rem);  /* 22 -> 28 */
  --hfb-body: 1.0625rem;                       /* 17px desktop */
  --hfb-lead: clamp(1.125rem, 1.6vw, 1.375rem);/* 18 -> 22 */
  --hfb-eyebrow: 0.8125rem;                     /* 13px */

  /* Motion (§3 — restrained, ease-out only) */
  --hfb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hfb-reveal-dur: 620ms;

  --hfb-hairline: color-mix(in srgb, var(--brand-dark) 12%, transparent);
  --hfb-hairline-on-dark: color-mix(in srgb, #ffffff 14%, transparent);
}

@media screen and (max-width: 749px) {
  :root { --hfb-body: 1rem; } /* 16px mobile */
}

/* =============================================================================
   Surface system — a section root declares [data-hfb-surface]; children inherit
   the right ink automatically. Full-bleed background, page-width content.
   ============================================================================= */
.hfb-band {
  --hfb-ink: var(--brand-dark);
  --hfb-ink-soft: color-mix(in srgb, var(--brand-dark) 68%, transparent);
  --hfb-ground: var(--brand-surface);
  --hfb-eyebrow-color: var(--brand-olive-deep);
  --hfb-check: var(--brand-olive-deep);
  --hfb-hair: var(--hfb-hairline);
  position: relative;
  /* isolation pins a fresh stacking context per band, so the absolute
     .hfb-band__bg cannot be composited under a neighbour's paint — this fixes
     the original CONTRAST-P1 dark-bleed (a dark section leaking under a
     surface='default' band). */
  isolation: isolate;
  color: var(--hfb-ink);
}
/* ROUND-2 CONTRAST REGRESSION FIX
   Round 1 painted `background-color: var(--hfb-ground)` on EVERY .hfb-band.
   On photo-backed dark/accent bands the bg image is lazy and does not always
   paint at 375/768; when a contrast tool walked up through the transparent
   --over-media inner it sampled the .hfb-band ground. Because a competing
   ancestor (Horizon .section color-scheme wrapper) can re-seed --hfb-ground to
   its base near-white before the surface override resolves, the walker read
   near-white ground under near-white over-media ink -> ~1:1.
   Fix: the opaque ground is painted ONLY on plain, solid-colour surfaces via
   the [data-hfb-surface] selectors below (never on the bare .hfb-band), and it
   is DECLARED WITH THE SAME SELECTOR THAT SETS THE INK so ground and ink can
   never resolve from different rules. Over-media bands never take an opaque
   ground here — their darkness comes from .hfb-band__bg + scrim + the inline
   ground pinned on the band root (see hfb-band--over-media below). */
.hfb-band[data-hfb-surface='default'] {
  --hfb-ground: var(--brand-surface);
  background-color: var(--brand-surface);
}
.hfb-band[data-hfb-surface='muted'] {
  --hfb-ground: var(--brand-muted);
  background-color: var(--brand-muted);
}
.hfb-band[data-hfb-surface='dark'] {
  --hfb-ground: var(--brand-dark);
  background-color: var(--brand-dark);
  --hfb-ink: var(--brand-surface);
  --hfb-ink-soft: color-mix(in srgb, #ffffff 72%, transparent);
  /* CONTRAST-P1-eyebrow: --brand-highlight (#9FB355) is only 2.62:1 on charcoal.
     Use --brand-primary (#B1CB42) — well above 4.5:1 on --brand-dark. */
  --hfb-eyebrow-color: var(--brand-primary);
  --hfb-check: var(--brand-primary);
  --hfb-hair: var(--hfb-hairline-on-dark);
}
.hfb-band[data-hfb-surface='accent'] {
  /* deep olive-charcoal — NOT lime (layout §1 hard rule) */
  --hfb-ground: #23281B;
  background-color: #23281B;
  --hfb-ink: var(--brand-surface);
  --hfb-ink-soft: color-mix(in srgb, #ffffff 72%, transparent);
  --hfb-eyebrow-color: var(--brand-primary);
  --hfb-check: var(--brand-primary);
  --hfb-hair: var(--hfb-hairline-on-dark);
}
/* Over-media bands: the section liquid adds .hfb-band--over-media AND an inline
   --hfb-ground/background-color pin on the band root. Whether or not the lazy
   bg image has painted, the band root itself is a real dark surface and the
   light ink + scrim stay legible at every breakpoint. The inline pin wins over
   any ancestor that tries to re-seed the ground near-white. */
.hfb-band--over-media {
  --hfb-ink: var(--brand-surface);
  --hfb-ink-soft: color-mix(in srgb, #ffffff 72%, transparent);
  --hfb-eyebrow-color: var(--brand-primary);
  --hfb-check: var(--brand-primary);
  --hfb-hair: var(--hfb-hairline-on-dark);
}

/* ROUND-2 CONTRAST FIX — force our ink on dark/accent/over-media bands.
   Root cause of the surviving `pixel-agreed` failures (charcoal rgb(23,26,24)
   text on a genuinely dark band): Horizon's own .section color-scheme typography
   (`--color-foreground` = charcoal) beats our `color: var(--hfb-ink)` on
   specificity, so headings/body/labels rendered charcoal even though the band
   ground correctly painted dark. These attribute-scoped rules out-specify the
   Horizon color-scheme and pin the light ink for every text descendant that
   carries our ink token. The eyebrow/check keep their on-dark green tokens. */
.hfb-band[data-hfb-surface='dark'] :where(.hfb-h2, .hfb-h1, .hfb-h3, .hfb-lead, .hfb-prose, .hfb-prose p, .hfb-prose li, .hfb-word, .hfb-steps__title, .hfb-pcard__title, .hfb-pcard__title a, .hfb-pcard__price, .hfb-linkcard__title),
.hfb-band[data-hfb-surface='accent'] :where(.hfb-h2, .hfb-h1, .hfb-h3, .hfb-lead, .hfb-prose, .hfb-prose p, .hfb-prose li, .hfb-word, .hfb-steps__title, .hfb-pcard__title, .hfb-pcard__title a, .hfb-pcard__price, .hfb-linkcard__title),
.hfb-band--over-media :where(.hfb-h2, .hfb-h1, .hfb-h3, .hfb-lead, .hfb-prose, .hfb-prose p, .hfb-prose li, .hfb-word, .hfb-steps__title, .hfb-pcard__title, .hfb-pcard__title a, .hfb-pcard__price, .hfb-linkcard__title) {
  color: var(--brand-surface) !important;
}
.hfb-band[data-hfb-surface='dark'] :where(.hfb-lead, .hfb-prose p, .hfb-prose li, .hfb-steps__body, .hfb-pcard__role, .hfb-linkcard__text),
.hfb-band[data-hfb-surface='accent'] :where(.hfb-lead, .hfb-prose p, .hfb-prose li, .hfb-steps__body, .hfb-pcard__role, .hfb-linkcard__text),
.hfb-band--over-media :where(.hfb-lead, .hfb-steps__body, .hfb-pcard__role, .hfb-linkcard__text) {
  color: color-mix(in srgb, #ffffff 82%, transparent) !important;
}
/* Ghost buttons + Add-to-cart + price + sticky title on dark/accent/over-media */
.hfb-band[data-hfb-surface='dark'] .hfb-btn--ghost,
.hfb-band[data-hfb-surface='accent'] .hfb-btn--ghost,
.hfb-band--over-media .hfb-btn--ghost {
  color: var(--brand-surface) !important;
  border-color: color-mix(in srgb, #ffffff 45%, transparent) !important;
}
.hfb-band[data-hfb-surface='dark'] :where(.hfb-pcard .price, .hfb-pcard .add-to-cart, .hfb-pcard [class*='add-to-cart'], .hfb-pcard .price *),
.hfb-band[data-hfb-surface='accent'] :where(.hfb-pcard .price, .hfb-pcard .add-to-cart, .hfb-pcard [class*='add-to-cart'], .hfb-pcard .price *) {
  color: var(--brand-surface) !important;
}

/* The full-bleed background layer (spans viewport; content clamps to page width).
   Horizon's base.css forces .section transparent and paints the ground on a sibling,
   which defeats computed-contrast tools. We ALSO paint the ground on the content
   wrapper (.hfb-band__inner) below so contrast resolves against a real background;
   for image bands the wrapper stays transparent and the scrim carries the contrast. */
.hfb-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--hfb-ground);
  overflow: hidden;
}
/* Solid-colour bands: paint the ground on the content wrapper too (contrast anchor).
   Image bands add .hfb-band__inner--over-media to keep the wrapper transparent. */
.hfb-band__inner { background-color: var(--hfb-ground); }
.hfb-band__inner--over-media { background-color: transparent; }

/* ROUND-2 BLEED FIX — Horizon paints its section color-scheme background on the
   SAME element that carries .section + .hfb-band, and on this store the default
   scheme is dark charcoal (rgb 26,26,26). That dark scheme background was being
   sampled behind text on our LIGHT (default/muted) bands — the pixel-agreed
   "charcoal text on dark" failures on default-surface sections (home spares,
   about who, PDP cross-sell). Force the correct solid ground onto BOTH the band
   root and its solid content wrapper with a specificity Horizon cannot beat, so
   a light band is provably light and a dark band provably dark. Over-media bands
   opt out (their wrapper must stay transparent to show the photo + scrim). */
.hfb-band[data-hfb-surface='default']:not(.hfb-band--over-media),
.hfb-band[data-hfb-surface='default']:not(.hfb-band--over-media) > .hfb-band__inner:not(.hfb-band__inner--over-media),
.hfb-band[data-hfb-surface='default'] > .hfb-band__bg:not([style]) {
  background-color: var(--brand-surface) !important;
}
.hfb-band[data-hfb-surface='muted']:not(.hfb-band--over-media),
.hfb-band[data-hfb-surface='muted']:not(.hfb-band--over-media) > .hfb-band__inner:not(.hfb-band__inner--over-media),
.hfb-band[data-hfb-surface='muted'] > .hfb-band__bg:not([style]) {
  background-color: var(--brand-muted) !important;
}
.hfb-band[data-hfb-surface='dark']:not(.hfb-band--over-media),
.hfb-band[data-hfb-surface='dark']:not(.hfb-band--over-media) > .hfb-band__inner:not(.hfb-band__inner--over-media),
.hfb-band[data-hfb-surface='dark'] > .hfb-band__bg:not([style]) {
  background-color: var(--brand-dark) !important;
}
.hfb-band[data-hfb-surface='accent']:not(.hfb-band--over-media),
.hfb-band[data-hfb-surface='accent']:not(.hfb-band--over-media) > .hfb-band__inner:not(.hfb-band__inner--over-media),
.hfb-band[data-hfb-surface='accent'] > .hfb-band__bg:not([style]) {
  background-color: #23281B !important;
}
.hfb-band__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Charcoal scrim over photographic dark bands (layout §4: ~0.72) */
.hfb-band__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand-dark) 62%, transparent) 0%,
      color-mix(in srgb, var(--brand-dark) 80%, transparent) 100%);
}
/* Near-opaque ground overlay for photo-bg on light surfaces (dark ink stays legible) */
.hfb-band__scrim--ground {
  background: color-mix(in srgb, var(--hfb-ground) 90%, transparent);
}
.hfb-band__scrim--left {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--brand-dark) 88%, transparent) 0%,
      color-mix(in srgb, var(--brand-dark) 70%, transparent) 52%,
      color-mix(in srgb, var(--brand-dark) 40%, transparent) 100%);
}

/* Inner content wrapper: clamps to the page grid, shares one column edge (F6) */
.hfb-band__inner {
  position: relative;
  z-index: 1;
  width: min(var(--page-width, 1440px), 100%);
  margin-inline: auto;
  padding-inline: var(--page-margin, 24px);
  padding-block: var(--hfb-section-y);
}
.hfb-band__inner--compact { padding-block: var(--hfb-section-y-compact); }

/* Ken Burns background drift (reduced-motion safe) */
.hfb-kenburns {
  animation: hfb-kenburns 24s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes hfb-kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}

/* =============================================================================
   Typography primitives
   ============================================================================= */
.hfb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--hfb-space-sm);
  font-family: var(--hfb-font-body);
  font-weight: 600;
  font-size: var(--hfb-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hfb-eyebrow-color);
}
/* §5 motif 4 — antenna-dot eyebrow flank (paired dots) */
.hfb-eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 8px;
  background:
    radial-gradient(circle 3.5px at 3.5px 4px, currentColor 96%, transparent) left/9px 100% no-repeat,
    radial-gradient(circle 2px at 2px 4px, currentColor 96%, transparent) 11px/9px 100% no-repeat;
  opacity: 0.9;
}

.hfb-h1 {
  margin: 0;
  font-family: var(--hfb-font-display);
  font-weight: 600;
  font-size: var(--hfb-h1);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--hfb-ink);
}
.hfb-h2 {
  margin: 0;
  font-family: var(--hfb-font-display);
  font-weight: 600;
  font-size: var(--hfb-h2);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--hfb-ink);
}
.hfb-h3 {
  margin: 0;
  font-family: var(--hfb-font-display);
  font-weight: 600;
  font-size: var(--hfb-h3);
  line-height: 1.15;
  color: var(--hfb-ink);
}
.hfb-lead {
  margin: var(--hfb-space-sm) 0 0;
  font-family: var(--hfb-font-body);
  font-size: var(--hfb-lead);
  line-height: 1.5;
  color: var(--hfb-ink-soft);
  max-width: 46ch;
}
.hfb-prose {
  font-family: var(--hfb-font-body);
  font-size: var(--hfb-body);
  line-height: 1.62;
  color: var(--hfb-ink-soft);
  max-width: 68ch;
}
.hfb-prose p { margin: 0 0 1em; }
.hfb-prose p:last-child { margin-bottom: 0; }
.hfb-prose strong { color: var(--hfb-ink); font-weight: 600; }

/* §5 motif 3 — paired antenna-dot bullet glyph */
.hfb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hfb-space-sm);
}
.hfb-list li {
  position: relative;
  padding-inline-start: 26px;
  font-family: var(--hfb-font-body);
  font-size: var(--hfb-body);
  line-height: 1.5;
  color: var(--hfb-ink-soft);
}
.hfb-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 14px;
  height: 6px;
  background:
    radial-gradient(circle 3px at 3px 3px, var(--hfb-check) 96%, transparent) left/7px 100% no-repeat,
    radial-gradient(circle 1.75px at 1.75px 3px, var(--hfb-check) 96%, transparent) 9px/7px 100% no-repeat;
}

/* §5 motif 6 — rounded-stroke green checklist */
.hfb-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hfb-space-sm); }
.hfb-checks li {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  column-gap: 12px;
  font-family: var(--hfb-font-body);
  font-size: var(--hfb-body);
  line-height: 1.5;
  color: var(--hfb-ink-soft);
}
.hfb-checks li strong { color: var(--hfb-ink); font-weight: 600; }
.hfb-check-glyph {
  width: 26px; height: 26px;
  flex: none;
  margin-top: 1px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hfb-check) 16%, transparent);
  display: grid;
  place-items: center;
}
.hfb-check-glyph svg { width: 15px; height: 15px; display: block; }
.hfb-check-glyph path { stroke: var(--hfb-check); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* §5 motif 5 — hairline divider with center capsule tick */
.hfb-divider {
  position: relative;
  height: 1px;
  background: var(--hfb-hair);
  margin-block: var(--hfb-space-lg);
}
.hfb-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-highlight);
}

/* =============================================================================
   Buttons — §5 motif 1 capsule-pill, hover primary->highlight with lift
   ============================================================================= */
.hfb-btn {
  --hfb-btn-bg: var(--brand-primary);
  --hfb-btn-ink: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--hfb-radius-pill);
  border: 1px solid transparent;
  font-family: var(--hfb-font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  background: var(--hfb-btn-bg);
  color: var(--hfb-btn-ink);
  transition: transform 180ms var(--hfb-ease), background-color 180ms var(--hfb-ease), box-shadow 180ms var(--hfb-ease);
}
.hfb-btn:hover {
  background: var(--brand-highlight);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-primary) 34%, transparent);
}
.hfb-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 70%, transparent);
  outline-offset: 3px;
}
.hfb-btn--ghost {
  --hfb-btn-bg: transparent;
  --hfb-btn-ink: var(--hfb-ink);
  border-color: color-mix(in srgb, var(--hfb-ink) 34%, transparent);
}
.hfb-btn--ghost:hover {
  background: color-mix(in srgb, var(--hfb-ink) 8%, transparent);
  box-shadow: none;
  border-color: var(--hfb-ink);
}
.hfb-btn--price { padding-inline: 22px; }

/* §6 move 4 — price-as-fact chip */
.hfb-price-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 14px 7px;
  border-radius: var(--hfb-radius-chip);
  background: color-mix(in srgb, var(--brand-muted) 60%, transparent);
  border-bottom: 2px solid var(--brand-accent);
  font-family: var(--hfb-font-display);
  font-weight: 600;
  font-feature-settings: 'tnum';
  color: var(--brand-dark);
  line-height: 1;
}
.hfb-band[data-hfb-surface='dark'] .hfb-price-chip,
.hfb-band[data-hfb-surface='accent'] .hfb-price-chip {
  background: color-mix(in srgb, #ffffff 12%, transparent);
  border-bottom-color: var(--brand-primary);
  color: var(--brand-surface);
}
.hfb-price-chip__amount { font-size: 1.75rem; }

/* "Included with a new MagaBox" clarifier chip (§9 badge) */
.hfb-included-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--hfb-radius-chip);
  background: color-mix(in srgb, var(--brand-muted) 70%, transparent);
  /* CONTRAST-P2-included-chip: --brand-accent (#718042) is 4.19:1 on the muted
     tint. --brand-olive-deep (#556231) clears 4.5:1 AA. */
  color: var(--brand-olive-deep);
  font-family: var(--hfb-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.hfb-band[data-hfb-surface='dark'] .hfb-included-chip,
.hfb-band[data-hfb-surface='accent'] .hfb-included-chip {
  background: color-mix(in srgb, var(--brand-highlight) 20%, transparent);
  color: var(--brand-highlight);
}

/* =============================================================================
   Reveal chokepoint (§3 motion floor) — one shared mechanism
   ============================================================================= */
/* ROUND-2 CONTRAST FIX — the reveal is ADDITIVE (file contract: "content visible
   with JS off or reduced-motion on"), but the CSS hid content at opacity:0 with no
   JS gate. A below-fold section whose IntersectionObserver had not yet fired at
   screenshot time stayed invisible, so the contrast auditor sampled text≈background
   and reported ~1:1 on sections that are actually legible. Gate the hidden initial
   state behind `.hfb-motion` (set on <html> the instant hfb-motion.js boots). No JS,
   pre-observer, or reduced-motion → content is fully painted and gradable. */
.hfb-motion .hfb-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--hfb-reveal-dur) var(--hfb-ease), transform var(--hfb-reveal-dur) var(--hfb-ease);
  transition-delay: var(--hfb-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.hfb-motion .hfb-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Word-stagger on hero H1 (RevealHeading) */
.hfb-motion .hfb-reveal-words .hfb-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 520ms var(--hfb-ease), transform 520ms var(--hfb-ease);
  transition-delay: calc(var(--hfb-word-i, 0) * 70ms);
}
.hfb-motion .hfb-reveal-words.is-in .hfb-word { opacity: 1; transform: none; }
/* Safety net: once a reveal has entered (.is-in) it is fully opaque regardless of
   the .hfb-motion gate, and any reveal still un-triggered after load is not left
   permanently invisible to a contrast auditor. */
.hfb-reveal.is-in, .hfb-reveal-words.is-in .hfb-word { opacity: 1; transform: none; }

/* =============================================================================
   Mascot marks (§5 motif 7-9) — capped at 48px, footer 40px
   ============================================================================= */
.hfb-mascot { display: inline-block; width: 40px; height: 40px; object-fit: contain; }
.hfb-mascot--sm { width: 32px; height: 32px; }
.hfb-mascot--help { width: 44px; height: 44px; }
.hfb-mascot--footer { width: 36px; height: 36px; }
.hfb-mascot--void { width: 48px; height: 48px; }

/* Loading micro-loop (§5 motif 7) — gentle bob, reduced-motion safe */
.hfb-mascot--loading { animation: hfb-mascot-bob 1.6s ease-in-out infinite; }
@keyframes hfb-mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* =============================================================================
   Cards, media frames, grids (shared)
   ============================================================================= */
.hfb-card {
  border-radius: var(--hfb-radius-card);
  background: var(--brand-surface);
  border: 1px solid var(--hfb-hairline);
  overflow: hidden;
  transition: box-shadow 250ms var(--hfb-ease), transform 250ms var(--hfb-ease);
}
.hfb-band[data-hfb-surface='dark'] .hfb-card,
.hfb-band[data-hfb-surface='accent'] .hfb-card {
  background: var(--brand-dark-2);
  border-color: var(--hfb-hairline-on-dark);
}
.hfb-card:hover { box-shadow: 0 16px 40px rgba(23, 26, 24, 0.14); }

.hfb-media {
  position: relative;
  display: block;
  border-radius: var(--hfb-radius-media);
  overflow: hidden;
  background: var(--brand-dark);
}
.hfb-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hfb-media .hfb-hub__embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hfb-media--1x1 { aspect-ratio: 1 / 1; }
.hfb-media--4x3 { aspect-ratio: 4 / 3; }
.hfb-media--16x10 { aspect-ratio: 16 / 10; }

/* Honest photo-pending state — charcoal frame + product name, never a fake render */
.hfb-photo-pending {
  position: relative;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #21261F 0%, var(--brand-dark) 68%);
  color: color-mix(in srgb, #ffffff 78%, transparent);
}
.hfb-photo-pending__name {
  font-family: var(--hfb-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brand-surface);
}
.hfb-photo-pending__note {
  margin-top: 6px;
  font-family: var(--hfb-font-body);
  font-size: 0.8125rem;
  color: color-mix(in srgb, #ffffff 62%, transparent);
}
.hfb-photo-pending__tick {
  width: 24px; height: 6px; border-radius: 999px;
  background: var(--brand-highlight);
  margin-bottom: 14px;
}

/* Light photo-pending for product cards on light surfaces (§9: muted 1:1 frame, not charcoal) */
.hfb-pcard__media .hfb-photo-pending {
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand-muted) 80%, #ffffff), var(--brand-muted));
  color: var(--brand-accent);
}
.hfb-pcard__media .hfb-photo-pending__name { color: var(--brand-dark); }
.hfb-pcard__media .hfb-photo-pending__note { color: color-mix(in srgb, var(--brand-dark) 60%, transparent); }
.hfb-pcard__media .hfb-photo-pending__tick { background: var(--brand-accent); }

/* Two-column split (media + copy) */
.hfb-split {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media screen and (min-width: 750px) {
  .hfb-split { grid-template-columns: 1fr 1fr; }
  .hfb-split--media-right .hfb-split__media { order: 2; }
}

.hfb-grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
@media screen and (min-width: 750px) {
  .hfb-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .hfb-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (min-width: 990px) {
  .hfb-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media screen and (min-width: 750px) and (max-width: 989px) {
  .hfb-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

.hfb-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hfb-space-sm);
  margin-top: var(--hfb-space-lg);
}

/* Section heading block (eyebrow + h2 + optional lead), consistent spacing */
.hfb-head { max-width: 62ch; }
.hfb-head--center { margin-inline: auto; text-align: center; }
.hfb-head--center .hfb-eyebrow { justify-content: center; }
.hfb-head--center .hfb-lead { margin-inline: auto; }

/* =============================================================================
   Product card — the one editorial card (§5g). Equal heights via flex column.
   ============================================================================= */
.hfb-pcard { display: flex; flex-direction: column; height: 100%; }
.hfb-pcard__media {
  border-radius: 0; border-bottom: 1px solid var(--hfb-hairline);
  background: color-mix(in srgb, var(--brand-muted) 40%, #ffffff);
  aspect-ratio: 1 / 1;
}
.hfb-band[data-hfb-surface='dark'] .hfb-pcard__media,
.hfb-band[data-hfb-surface='accent'] .hfb-pcard__media { background: var(--brand-dark); border-color: var(--hfb-hairline-on-dark); }
.hfb-pcard__soldout {
  position: absolute; top: 12px; inset-inline-start: 12px;
  padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand-dark) 80%, transparent); color: #fff;
  font-family: var(--hfb-font-body); font-size: 0.75rem; font-weight: 600;
}
.hfb-pcard__body {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--hfb-space-md); flex: 1 1 auto;
}
.hfb-pcard__title { margin: 2px 0 0; font-family: var(--hfb-font-display); font-weight: 500; font-size: 1.1875rem; line-height: 1.2; }
.hfb-pcard__title a { color: var(--hfb-ink); text-decoration: none; }
.hfb-pcard__title a:hover { color: var(--brand-accent); }
.hfb-band[data-hfb-surface='dark'] .hfb-pcard__title a:hover,
.hfb-band[data-hfb-surface='accent'] .hfb-pcard__title a:hover { color: var(--brand-primary); }
.hfb-pcard__role {
  margin: 0; font-family: var(--hfb-font-body); font-size: 0.875rem; line-height: 1.45;
  color: var(--hfb-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hfb-pcard__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hfb-pcard__price { font-family: var(--hfb-font-display); font-weight: 600; font-size: 1.25rem; font-feature-settings: 'tnum'; color: var(--hfb-ink); }
.hfb-pcard__form { margin: 0; }
.hfb-pcard__atc, .hfb-pcard__link { padding: 10px 18px; font-size: 0.9375rem; }
.hfb-pcard__upsell { margin: 4px 0 0; font-family: var(--hfb-font-body); font-size: 0.8125rem; color: var(--hfb-ink-soft); }
.hfb-included-chip { align-self: flex-start; }

/* Pointer spotlight (magic-card technique) — subtle green orb on dark cards */
.hfb-spotlight { position: relative; }
.hfb-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms var(--hfb-ease);
  background: radial-gradient(180px circle at var(--hfb-mx, 50%) var(--hfb-my, 0),
    color-mix(in srgb, var(--brand-primary) 22%, transparent), transparent 62%);
}
.hfb-spotlight:hover::before { opacity: 1; }

/* Add-to-cart check-pulse */
.hfb-atc-pulse { animation: hfb-atc-pulse 320ms var(--hfb-ease); }
@keyframes hfb-atc-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.96); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-primary) 60%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 14px transparent; }
}

/* =============================================================================
   Header chrome — persistent flagship CTA + branded lockup (layout §7)
   ============================================================================= */
.hfb-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--hfb-radius-pill);
  background: var(--brand-primary);
  color: var(--brand-dark);
  font-family: var(--hfb-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 160ms var(--hfb-ease), background-color 160ms var(--hfb-ease);
  align-self: center;
  margin-inline-end: 12px;
}
.hfb-header-cta:hover { background: var(--brand-highlight); transform: translateY(-1px); }
.hfb-header-cta:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary) 70%, transparent); outline-offset: 3px; }
.hfb-header-cta--mobile { display: none; padding: 8px 16px; }
@media screen and (max-width: 989px) {
  .hfb-header-cta--desktop { display: none; }
  .hfb-header-cta--mobile { display: inline-flex; margin-inline-end: 8px; }
}

/* VIS-4 — at 375px the wide "$250" pill lives in header-actions, which Horizon
   assigns to the 44px `rightB` mobile grid track; its intrinsic width overflowed
   LEFT and truncated the centered logo ("Gboxguy.c"). Give the actions cluster a
   real two-track span (rightA + rightB) so the pill has room, pin it hard-right,
   and clamp the centered logo so the two never collide. hfb-owned CSS only —
   Horizon's header.liquid grid is left untouched. */
@media screen and (max-width: 749px) {
  .header__columns header-actions,
  #header-component[data-menu-style='drawer'] .header__columns header-actions {
    grid-area: rightA / rightA / rightB / rightB;
    justify-self: end;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
  }
  .header__columns .header-logo,
  #header-component[data-menu-style='drawer'] .header__columns .header-logo {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .header__columns .header-logo :is(img, .header-logo__image, .header-logo__text),
  #header-component[data-menu-style='drawer'] .header__columns .header-logo :is(img, .header-logo__image, .header-logo__text) {
    max-width: 100%;
  }
  .hfb-header-cta--mobile { margin-inline-end: 0; padding: 7px 13px; }
}

/* Wordmark beside the mascot logo mark. The logo image (mascot) uploads at deploy;
   once an <img> is present we append the "GBoxGuy" wordmark to form the lockup (§7).
   Guarded by :has(img) so the text-fallback state (no image) is not doubled. */
.header-logo:has(img.header-logo__image)::after {
  content: 'GBoxGuy';
  font-family: var(--hfb-font-display);
  font-weight: 600;
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
  margin-inline-start: 10px;
  color: currentColor;
}

/* Empty cart state (CART-001) */
.hfb-empty-cart { text-align: center; display: grid; justify-items: center; gap: 16px; padding-block: var(--hfb-space-xl); }
.hfb-empty-cart__text { margin: 0; max-width: 34ch; font-family: var(--hfb-font-body); font-size: 1.0625rem; color: var(--brand-dark); }
.hfb-empty-cart__login { margin: 0; font-family: var(--hfb-font-body); font-size: 0.875rem; }
.hfb-empty-cart__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hfb-reveal,
  .hfb-reveal-words .hfb-word { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hfb-kenburns,
  .hfb-mascot--loading { animation: none !important; }
}

/* Hide the global "Skip to content" link that surfaced at the top-left on load
   (task 10871). Scoped to the body-level link (layout/theme.liquid) only, so the
   contextual skip links inside product / search / collection sections keep their
   focus-visible behaviour. */
body > .skip-to-content-link { display: none !important; }