/* ============================================================================
   CFCA site-v2.css
   ----------------------------------------------------------------------------
   Vanilla CSS foundation for the Canada Flashlights .ca redesign sandbox.
   No Bootstrap. No frameworks. Layered: reset → tokens → base → utilities →
   components. Typography uses a system font stack via --font-* tokens, easy to
   swap once typography is confirmed.
   ============================================================================ */

/* -------- 0. Webfonts (self-hosted Open Sans, latin subset, v44) --------- */
/* Variable woff2 — covers 400/600/700 from a single file via wght axis. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/open-sans-v44-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/open-sans-v44-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------- 1. Reset (minimal, modern) ------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

/* -------- 2. Tokens ------------------------------------------------------ */

:root {
  /* Type — Open Sans (LV-merged 2026-05-12; was system stack) */
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-display: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Type rhythm (LV-merged) */
  --lh-display: 1.0;
  --lh-heading: 1.2;
  --lh-sub:     1.3;
  --lh-body:    1.4;

  /* Color (LV-merged: ink near-black, line lighter, page wash + sale + cta tokens) */
  --c-ink:        #0a0e13;
  --c-ink-soft:   #4a4a4a;
  --c-muted:      #707070;
  --c-line:       #d4d7dc;
  --c-line-soft:  #e8eaee;
  --c-bg:         #ffffff;
  --c-bg-alt:     #f7f8fa;
  --c-bg-deep:    #131a23;
  --c-page-wash:  #eef0f2;
  --c-brand:      #1f2a36;
  --c-brand-ink:  #ffffff;
  --c-accent:     #E17E1A;
  --c-link:       #005F85;
  --c-success:    #307B52;
  --c-cta:        #307B52;
  --c-cta-ink:    #ffffff;
  --c-sale:       #E62129;
  --c-danger:     #E62129;

  /* Spacing scale — tighter, catalog-density */
  --space-2xs: 0.2rem;
  --space-xs:  0.4rem;
  --space-sm:  0.6rem;
  --space-md:  0.85rem;
  --space-lg:  1.1rem;
  --space-xl:  1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 2.75rem;

  /* Layout */
  --page-max: 1320px;   /* canonical site rail (was --wrap-max) */
  --wrap-pad: clamp(0.75rem, 2vw, 1.25rem);

  --radius-sm: 4px;
  --radius-md: 8px;

  /* Shared form-control height (accessible 44px tap target). Header search,
     footer newsletter, and the compare bar all key off this so the site's
     interactive fields stay one size. */
  --field-h: 44px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.06);
  --shadow-md: 0 4px 14px rgba(20, 30, 50, 0.08);
  --shadow-lg: 0 18px 40px rgba(20, 30, 50, 0.10);

  --transition: 160ms ease;

  /* Button height scale (audit 2026-05-13 §A5). Roles:
     - sm: nav, header utility, ghost defaults
     - md: most page CTAs, form submits, hub tiles minimum hit
     - lg: commit-to-purchase (Add to cart) */
  --btn-h-sm: 36px;
  --btn-h-md: 44px;
  --btn-h-lg: 52px;
}

/* -------- 3. Base elements ------------------------------------------------ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-page-wash);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.005em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { color: var(--c-ink-soft); line-height: var(--lh-body); }

/* Catalog density override — slightly more leading inside dense product sections / hero */
.c-section p, .c-hero p { line-height: 1.5; }

a:hover, a:focus-visible { color: var(--c-link); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--c-link);
  outline-offset: 2px;
  border-radius: 2px;
}

input[type="search"], input[type="email"], input[type="text"] {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
}
input::placeholder { color: var(--c-muted); }

/* -------- 4. Utilities (small, additive) --------------------------------- */

.u-visually-hidden {
  position: absolute !important;
  clip: rect(0 0 0 0); width: 1px; height: 1px;
  overflow: hidden; white-space: nowrap; border: 0; padding: 0;
}

.c-skiplink {
  position: absolute; top: -100px; left: var(--space-md);
  background: var(--c-bg-deep); color: var(--c-brand-ink);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 1000;
}
.c-skiplink:focus { top: var(--space-md); }

/* -------- 5. Components --------------------------------------------------- */

/* Page wrap helper — every component uses .c-*__wrap to constrain content. */
.c-header__wrap, .c-footer__wrap, .c-hero__wrap, .c-section__wrap, .c-trust__wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}

.c-main { display: block; }

/* ---- Header ---- */

.c-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.c-header__pinned {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
/* Spacer so page content doesn't slide under the fixed pinned rows. JS sets exact value. */
body { padding-top: var(--c-header-pinned-h, 5.5rem); }
.c-header__utility {
  background: var(--c-bg-deep);
  color: var(--c-brand-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}
.c-header__utility-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  padding-block: var(--space-xs);
  min-height: 1.6em;
}
.c-header__utility-msg {
  grid-column: 1; grid-row: 1;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.c-header__utility-msg.is-active {
  opacity: 1;
  pointer-events: auto;
}

.c-header__main { background: var(--c-bg); position: relative; }
.c-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-xs);
}

.c-header__brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
  line-height: 1.1;
  transform: translateY(1px);
}
@media (min-width: 1024px) {
  .c-header__brand { transform: none; }
}
.c-header__brand-flag {
  height: 1.4em;
  width: auto;
  flex: none;
  display: block;
}
.c-header__brand-logo {
  height: 2.6em;
  width: 2.6em;
  flex: none;
  display: block;
}
.c-header__brand-name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-xl);
  color: var(--c-ink);
  letter-spacing: -0.01em;
}

/* ---- Primary nav + mega-dropdowns (mobile-first: hidden by default) ---- */
.c-nav {
  display: none;
  align-items: stretch;
  gap: 0;
  font-weight: var(--fw-semibold);
}
@media (min-width: 1024px) {
  /* margin-top (not transform) for the 4px optical nudge: a transform on
     .c-nav makes it the containing block for the absolutely-positioned mega
     panels inside it, trapping their width to the nav row (~900px) and
     defeating the panel's own max-width:page-max + margin-inline:auto. With
     margin the panels resolve against the header and span the full page. */
  .c-nav { display: flex; margin-top: 4px; }
}
.c-nav__item { position: static; display: flex; align-items: stretch; }
.c-nav__link, .c-nav__toggle {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: var(--space-sm) var(--space-md);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  background: none; border: 0;
  font: inherit; color: inherit; cursor: pointer;
}
/* Gradient accent rule — matches .c-section__rule under featured H1.
   Hidden by default; reveals on hover and while a mega-menu is open. */
.c-nav__link::after, .c-nav__toggle::after {
  content: "";
  position: absolute;
  left: var(--space-md);
  bottom: 6px;
  /* Spans full text width of the link (link width minus its horizontal padding),
     matching the featured H1 rule which now follows its text length. */
  width: calc(100% - 2 * var(--space-md));
  height: 3px;
  background: linear-gradient(90deg, var(--c-accent) 0%, rgba(225, 126, 26, 0.1) 100%);
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.c-nav__link:hover, .c-nav__toggle:hover,
.c-nav__item.is-open .c-nav__toggle {
  background: var(--c-bg-alt);
  text-decoration: none;
}
.c-nav__link:hover::after, .c-nav__toggle:hover::after,
.c-nav__item.is-open .c-nav__toggle::after {
  opacity: 1;
}
/* Brand wordmark — no hover underline (the global a:hover underline reads as
   a stray black line at a different height than the nav rule). */
.c-header__brand:hover, .c-header__brand:focus-visible { text-decoration: none; }
.c-nav__caret { font-size: 0.7em; opacity: 0.6; transition: transform var(--transition); }
.c-nav__item.is-open .c-nav__caret { transform: rotate(180deg); }

.c-nav__menu {
  position: absolute;
  left: 0; right: 0; top: 100%;
  display: none;
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  /* Asymmetric drop-shadow — visible separation from page body, no halo above the panel */
  box-shadow: 0 10px 16px -4px rgba(20, 30, 50, 0.40), 0 24px 40px -8px rgba(20, 30, 50, 0.32), 0 48px 80px -16px rgba(20, 30, 50, 0.24);
  z-index: 50;
}
.c-nav__item.is-open .c-nav__menu { display: block; }
.c-nav__menu--mega {
  padding-block: var(--space-md);
  /* Cool off-white tint (deeper than --c-bg-alt) + brand top accent so the
     panel reads as a layer ABOVE the white page, not flush with it. Border +
     shadow alone left it visually flat against the body. */
  background: #eef1f6;
  border-top: 2px solid var(--c-link);
}
.c-nav__item.is-open .c-nav__menu--mega {
  display: grid;
  /* 175px min keeps the widest menu (5-col "Shop by features") on one row
     all the way down to the 1024px mobile-nav breakpoint — at 200px the 5th
     column wrapped around ~1110px. Labels still fit one line at this track. */
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: var(--space-lg);
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}
.c-nav__col { display: flex; flex-direction: column; gap: 0.25rem; }
/* Heads = section labels (small uppercase), distinct in KIND from items so the
   eye reads "group → members", not one flat list. Hierarchy by treatment, not
   just weight (heads + items were both --fs-sm before — indistinguishable). */
.c-nav__col-head {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink);
  padding-block: var(--space-2xs);
  border-bottom: 2px solid var(--c-line);
  margin-bottom: var(--space-xs);
}
a.c-nav__col-head:hover { color: var(--c-link); }
.c-nav__col-head--later { margin-top: var(--space-md); }
.c-nav__sub { display: flex; flex-direction: column; gap: 0.1rem; }
/* Items are the primary tap targets: larger, darker, medium weight (was small,
   thin, soft-grey = invisible). Leading dot gives each row a discrete list
   affordance (reviewer: "no bullets, hard to focus"). */
.c-nav__sub li a {
  display: block;
  position: relative;
  padding: 0.3rem 0 0.3rem 0.9rem;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  line-height: 1.3;
}
.c-nav__sub li a::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-line);
}
.c-nav__sub li a:hover { color: var(--c-link); text-decoration: underline; }
.c-nav__sub li a:hover::before { background: var(--c-link); }

/* Compact dropdown (Gear & power) — anchored under its own toggle, not the
   full-width mega panel. Reuses the .c-nav__menu shell (border, shadow,
   z-index, is-open display) and overrides width + positioning. The item is
   position:relative (mega items are static) so the menu pins to its toggle. */
.c-nav__item--compact { position: relative; }
.c-nav__menu--simple {
  left: 0; right: auto;
  min-width: 12rem;
  padding-block: var(--space-2xs);
}
.c-nav__menu--simple a {
  display: block;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  white-space: nowrap;
}
.c-nav__menu--simple a:hover {
  background: var(--c-bg-alt);
  color: var(--c-link);
  text-decoration: none;
}

.c-header__tools { display: flex; align-items: center; gap: var(--space-sm); }

/* ---- Row 3 search ---- */
.c-header__search-row {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.c-header__search-row .c-header__wrap { padding-block: var(--space-xs); }
.c-header__search { display: flex; align-items: stretch; gap: 1rem; max-width: 720px; margin-inline: auto; }
/* Input + button share font / line-height / vertical padding so the two
   halves render at the same height regardless of flex stretch behavior.
   Font-size sticks at 16px (--fs-md) — iOS Safari auto-zooms anything
   smaller on focus. */
.c-header__search input,
.c-header__search button {
  font-size: var(--fs-md);
  font-family: inherit;
  line-height: 1.4;
  min-height: var(--field-h);
  padding-block: var(--space-xs);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  margin: 0;
}
.c-header__search input {
  flex: 1; min-width: 0;
  padding-inline: var(--space-sm);
  background: var(--c-bg);
  color: var(--c-ink);
}
.c-header__search input::placeholder { color: var(--c-ink-soft); }
.c-header__search input:focus {
  outline: none;
  border-color: var(--c-brand);
}
/* Secondary (outline) treatment: the search submit is a utility paired with
   its input, not a primary action — so it stays quieter than the solid hero
   CTA. White fill + brand text/border; fills brand on hover for feedback. */
.c-header__search button {
  padding-inline: var(--space-md);
  background: var(--c-bg);
  color: var(--c-brand);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.c-header__search button:hover {
  background: var(--c-brand);
  color: var(--c-brand-ink);
  border-color: var(--c-brand);
}

/* USP grid (FT top-right idea) — hidden on mobile; ≥768 sits left half
   of the search row as a 2×2, search takes the right half (50/50). */
.c-header__usp { display: none; }

@media (min-width: 768px) {
  .c-header__search-bar {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }
  .c-header__usp {
    flex: 1 1 50%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xs) var(--space-md);
  }
  .c-header__usp-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-width: 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--c-ink-soft);
    white-space: nowrap;
  }
  .c-header__usp-icon {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--c-accent);
    flex-shrink: 0;
  }
  .c-header__search-bar .c-header__search {
    flex: 1 1 50%;
    min-width: 0;
    margin-inline: 0;
    max-width: none;
  }
}

.c-header__cart {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: var(--field-h);
  padding: var(--space-xs) var(--space-sm);
  font-weight: var(--fw-semibold);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}
.c-header__cart:hover {
  background: var(--c-brand);
  color: var(--c-brand-ink);
  border-color: var(--c-brand);
  text-decoration: none;
}
.c-header__cart-icon { font-size: 1.1em; }
.c-header__cart-label { font-size: var(--fs-sm); }
.c-header__cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4em; height: 1.4em;
  padding-inline: 0.4em;
  background: var(--c-accent);
  color: var(--c-brand-ink);
  border-radius: 999px;
  font-size: var(--fs-xs);
}

/* Mobile drawer — <details> pattern, no JS. Mobile-first: visible by default. */
.c-header__drawer { position: relative; display: inline-block; }
@media (min-width: 1024px) {
  .c-header__drawer { display: none; }
}
.c-header__drawer-toggle {
  list-style: none;
  display: inline-flex; flex-direction: column; gap: 4px;
  padding: var(--space-xs);
  cursor: pointer;
  transform: translateY(-4px);
}
.c-header__drawer-toggle::-webkit-details-marker { display: none; }
.c-header__drawer-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--c-ink);
  border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}
.c-header__drawer[open] .c-header__drawer-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.c-header__drawer[open] .c-header__drawer-toggle span:nth-child(2) { opacity: 0; }
.c-header__drawer[open] .c-header__drawer-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
/* Off-canvas panel — slides under the fixed header, fills the viewport below
   it, and scrolls. Holds the full nested menu tree (was a 14rem dropdown that
   could not). Opens via the parent <details>, no JS. */
.c-header__drawer-nav {
  position: fixed;
  left: 0;
  top: var(--c-header-pinned-h, 5.5rem);
  bottom: 0;
  width: min(22rem, 90vw);
  z-index: 60;
  background: var(--c-bg);
  border-right: 1px solid var(--c-line);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  padding: var(--space-sm);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.c-drawer__link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.c-drawer__link:hover { background: var(--c-bg-alt); text-decoration: none; }

/* Accordion group — one per "Shop by ___" megamenu axis. */
.c-drawer__group { border-top: 1px solid var(--c-line); }
.c-drawer__group:first-of-type { border-top: none; }
.c-drawer__group-toggle {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  cursor: pointer;
}
.c-drawer__group-toggle::-webkit-details-marker { display: none; }
.c-drawer__caret { transition: transform var(--transition); font-size: 0.8em; }
.c-drawer__group[open] .c-drawer__caret { transform: rotate(180deg); }
.c-drawer__group-body { padding: 0 var(--space-sm) var(--space-sm); }

/* Section / hub head inside a group (links where one exists). */
.c-drawer__head {
  display: block;
  padding: var(--space-xs) var(--space-md);
  margin-top: var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}
a.c-drawer__head:hover { color: var(--c-link); }
.c-drawer__head--plain { cursor: default; }

.c-drawer__sub { list-style: none; margin: 0 0 var(--space-xs); padding: 0; }
.c-drawer__sub li a {
  display: block;
  padding: var(--space-xs) var(--space-md);
  padding-left: var(--space-lg);
  border-radius: var(--radius-sm);
  color: var(--c-ink-soft, var(--c-ink));
}
.c-drawer__sub li a:hover { background: var(--c-bg-alt); color: var(--c-link); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .c-drawer__caret { transition: none; }
}

/* ---- Hero ---- */

.c-hero { background: var(--c-bg); }
.c-hero__wrap {
  padding-block: var(--space-lg) var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 768px) {
  .c-hero__wrap {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    padding-block: var(--space-lg) var(--space-lg);
    align-items: stretch;
  }
  .c-hero__copy {
    grid-column: 1;
    display: flex;
    flex-direction: column;
  }
  .c-hero__ctas { margin-top: auto; }
  .c-hero__featured {
    grid-column: 2;
    justify-self: stretch;
    padding-left: 15px;
    padding-right: 0;
    margin-left: 0;
    justify-content: space-between;
  }
  .c-hero__featured-media { max-width: none; }
}
.c-hero__copy { max-width: 56ch; }
.c-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--c-accent);
  margin-bottom: var(--space-xs);
}
.c-hero__eyebrow-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(225, 126, 26, 0.18);
  flex-shrink: 0;
}
.c-hero__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
@media (min-width: 768px) {
  .c-hero__title { font-size: var(--fs-display); }
}
.c-hero__lede {
  margin-top: var(--space-sm);
  font-size: var(--fs-lg);
  color: var(--c-ink-soft);
}
.c-hero__ctas { margin-top: var(--space-md); display: flex; gap: var(--space-xs); flex-wrap: wrap; }
@media (min-width: 768px) {
  /* On desktop the copy column is a flex column; push CTAs to the bottom so
     the "How to choose?" button bottom-aligns with the featured caption on
     the right. Re-asserted here because the global rule above (with
     margin-top: var(--space-md)) wins source-order over the earlier @media
     rule. */
  .c-hero__ctas { margin-top: auto; }
}
/* Tertiary CTA: quiet text link with nudging arrow. Tap target kept at button
   height so it lines up with the buttons beside it on the same row. */
.c-hero__textlink {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--btn-h-md); padding: 0 var(--space-2xs);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--c-link); text-decoration: none;
}
.c-hero__textlink:hover { text-decoration: underline; }
.c-hero__textlink span { transition: transform var(--transition); }
.c-hero__textlink:hover span { transform: translateX(3px); }

/* Featured cutout — hidden on mobile, shown at tablet+ */
.c-hero__featured { display: none; }
@media (min-width: 768px) {
  .c-hero__featured {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
    color: inherit;
    position: relative;
  }
}
.c-hero__featured-media {
  position: relative;
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 0;
  transform: scale(1);
  transform-origin: center;
}
/* Halo is a pre-baked PNG/WebP placed as a sibling layer so it never
   clips the flashlight image. Image is generated by tmp/halo-gen/make-halo.py
   and matches the previous CSS radial-gradient spec (ellipse 65% 48% at
   50% 56%, rgba(150,178,208) 0.85 to 0). Crisp at any DPI; no rectangular
   bounding box can be revealed at edges since the alpha is baked into
   the image itself. */
.c-hero__featured-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("https://s3.ca-central-1.amazonaws.com/fenixtactical.io/images/site/halo-hero.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.c-hero__featured-media img {
  position: relative;
  z-index: 1;
  transform-origin: center center;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
/* Transparent hit-zone covering the central 75% of the media box. Sits above
   the image so it captures pointer events; image scale fires only when this
   inner area is hovered (or the parent link is keyboard-focused). Hovering
   the white halo edges does nothing. */
.c-hero__featured-hit {
  position: absolute;
  inset: 10%;
  z-index: 4;
  cursor: pointer;
}
.c-hero__featured-hit:hover ~ img,
.c-hero__featured:focus-within .c-hero__featured-media img {
  transform: scale(1.15);
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  .c-hero__featured-media img { transition: none; }
  .c-hero__featured-hit:hover ~ img,
  .c-hero__featured:focus-within .c-hero__featured-media img { transform: none; }
}
@media (min-width: 1100px) {
  .c-hero__featured-media { transform: scale(1.12); }
  .c-hero__featured {
    padding-right: 0;
    padding-left: 0;
    margin-left: -60px;
  }
}
.c-hero__featured-media img {
  width: 100%; height: 100%; object-fit: contain;
}
.c-hero__featured-badge {
  position: absolute;
  top: calc(var(--space-md) * 2 + 4px);
  right: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--c-ink);
  border: 1px solid var(--c-ink);
  border-radius: 2px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 2px 6px rgba(31, 42, 54, 0.18);
}
.c-hero__featured-badge-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(225, 126, 26, 0.18);
  flex-shrink: 0;
}
.c-hero__featured-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  text-align: right;
  font-size: var(--fs-md);
  width: 100%;
}
.c-hero__featured-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.c-hero__featured-spec {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.c-hero__featured-cta {
  margin-top: 0.25rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
  white-space: nowrap;
}
.c-hero__featured:hover .c-hero__featured-name { color: var(--c-link); text-decoration: underline; }
.c-hero__featured:hover .c-hero__featured-cta { text-decoration: underline; }

/* ---- Buttons ---- */

.c-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--btn-h-md);
  padding: 0 var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  border: 1.5px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.c-button--sm { min-height: var(--btn-h-sm); padding: 0 var(--space-md); font-size: var(--fs-sm); }
.c-button--lg { min-height: var(--btn-h-lg); padding: 0 var(--space-xl); font-size: var(--fs-lg); }
.c-button:hover { transform: translateY(-1px); text-decoration: none; }
.c-button--primary { background: var(--c-brand); color: var(--c-brand-ink); }
.c-button--primary:hover { background: #2c3a4d; color: var(--c-brand-ink); }
.c-button--ghost { border-color: var(--c-ink); color: var(--c-ink); }
.c-button--ghost:hover { background: var(--c-brand); color: var(--c-brand-ink); border-color: var(--c-brand); }
/* Secondary button: lighter outline than --ghost so it reads below a solid
   primary. Hierarchy is by weight (fill > outline > text link), never hue —
   brand auxiliary colors stay accent-only. */
.c-button--ghost-soft { border-color: #c4cad1; color: var(--c-brand); background: transparent; }
.c-button--ghost-soft:hover { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-brand-ink); }

/* ---- Icon button (dismiss / remove) ----
   One control for "remove from a collection": cart line ×, compare column ×,
   future filter-chip ×. Visual box stays compact; an invisible ::before pseudo
   expands the pointer/touch target to the 44px site standard without bloating
   layout. Destructive intent — neutral at rest, red on hover. Keyboard focus
   ring inherited from the global `button:focus-visible` rule. */
.c-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--c-line-soft);
  color: var(--c-muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.c-icon-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(44px, 100%);
  height: max(44px, 100%);
}
.c-icon-btn:hover { background: var(--c-stock-out); color: #fff; }
.c-icon-btn--on-media { background: rgba(0, 0, 0, 0.5); color: #fff; }
.c-icon-btn--on-media:hover { background: var(--c-stock-out); }

/* Explore variant: a ghost button that reads as a playful discovery tool, not
   a third "Shop" CTA. Same outline weight (stays below the primary), but a
   small orange accent icon (accent-tier only — never a fill) catches the eye,
   and the icon's bars dance on hover like a live comparison. Motion is opt-out
   via prefers-reduced-motion. */
.c-button--explore { gap: var(--space-2xs); }
.c-button__ico { flex: none; color: var(--c-accent); fill: currentColor; }
.c-button__ico rect { transform-box: fill-box; transform-origin: bottom; }
.c-button--explore:hover .c-button__ico rect {
  animation: c-explore-bars 0.9s ease-in-out infinite;
}
.c-button--explore:hover .c-button__ico rect:nth-child(2) { animation-delay: 0.15s; }
.c-button--explore:hover .c-button__ico rect:nth-child(3) { animation-delay: 0.3s; }
@keyframes c-explore-bars {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .c-button--explore:hover .c-button__ico rect { animation: none; }
}

/* ---- Section + Cards ---- */

.c-section { padding-block: var(--space-xl); background: var(--c-bg); }
.c-section--alt { background: var(--c-bg-alt); }
.c-section--activities { background: var(--c-bg); }
/* Flat variant: dropped .c-section__wrap rail; lighter vertical padding.
   Used when the parent already supplies the page rail + outer spacing
   (e.g. cart empty-state bestsellers inside .c-cart__empty, PDP inline
   sections inside .c-pdp__wrap). */
.c-section--flat { padding-block: var(--space-md); }
.c-section--pdp { padding-block: 0; margin-top: var(--space-xl); margin-bottom: var(--space-md); }
.c-section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: var(--space-2xs);
}
.c-section__head-text {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  min-width: 0;
}
.c-section__title { font-size: var(--fs-xl); font-weight: var(--fw-black); letter-spacing: -0.005em; }
.c-section__head {
  border-bottom: 0;
  padding-bottom: 0;
}
.c-section__head .c-section__title {
  width: fit-content;
  max-width: 100%;
  position: relative;
  padding-bottom: calc(var(--space-2xs) + 4px);
  font-size: var(--fs-2xl);
  line-height: 1.15;
}
.c-section__head .c-section__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-accent) 0%, rgba(225, 126, 26, 0.1) 100%);
  border-radius: 2px;
}
.c-section__more { font-weight: var(--fw-semibold); color: var(--c-link); white-space: nowrap; }
.c-section__more:hover { text-decoration: underline; }

/* mobile-first: 2-up by default, 4-up at tablet+ */
.c-cards {
  display: grid;
  /* minmax(0, 1fr) prevents tracks from expanding to content min-width when a
     card has long inline content (long product name, wide image natural size).
     repeat(N, 1fr) without this defaults to minmax(auto, 1fr), which lets the
     widest cell in column 1 push the entire column wider than its siblings. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
@media (min-width: 768px) {
  .c-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
}
.c-card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  overflow: visible;
  position: relative;
  transform-origin: center center;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform 200ms ease-out;
}
.c-card:hover,
.c-card:focus-within {
  border-color: var(--c-ink-soft);
  background: var(--c-bg-alt);
  box-shadow: var(--shadow-sm);
}
.c-card__link { display: flex; flex-direction: column; height: 100%; }
.c-card__link:hover, .c-card__link:focus-visible { text-decoration: none; }
.c-card__media {
  aspect-ratio: 4 / 3;
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-line-soft);
  overflow: hidden;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-sm);
}
.c-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 10% horizontal / 7.5% vertical padding via box-sizing — same effective
     inset as the prior flex layout, but without making the image a flow
     child of the media box. */
  padding-inline: 10%;
  padding-block: 7.5%;
  box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
  .c-card { transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); }
  .c-card:hover,
  .c-card:focus-within { transform: none; }
}
.c-card__body { padding: var(--space-xs) var(--space-sm) var(--space-sm); display: flex; flex-direction: column; gap: 0.15rem; }
.c-card__name { font-size: var(--fs-md); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-card__spec { font-size: var(--fs-xs); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.c-card__price {
  margin-top: auto; padding-top: var(--space-2xs);
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 0.3rem;
}
.c-card__currency { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-muted); }
.c-card__price-strike { font-weight: var(--fw-regular); color: var(--c-muted); text-decoration: line-through; }
/* Active sale price (sibling-of-strike) — distinct from primary CTA color */
.c-card__price-strike + span { color: var(--c-sale); font-weight: var(--fw-bold); }

/* Package-only card: small inline pill, sized like price text. */
.c-card__view-options {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-bg-alt);
  color: var(--c-link);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold, 600);
  line-height: 1.4;
}
.c-card__link:hover .c-card__view-options { border-color: var(--c-link); }

/* Out-of-stock pill, inline below price. */
.c-card__availability {
  margin: var(--space-2xs) 0 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Tiles (activity entry points) ---- */

.c-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}
@media (min-width: 768px) {
  .c-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
}
.c-tile {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: var(--space-sm) var(--space-md);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  overflow: visible;
  position: relative;
  transform-origin: center center;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform 200ms ease-out;
}
.c-tile:hover,
.c-tile:focus-within {
  border-color: var(--c-ink-soft);
  background: var(--c-bg-alt);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  z-index: 5;
  transform: scale(1.05);
}
.c-tile__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1376 / 768;
  background: var(--c-line);
  border-radius: calc(var(--radius-sm) - 1px);
  margin-bottom: var(--space-xs);
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .c-tile { transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); }
  .c-tile:hover,
  .c-tile:focus-within { transform: none; }
}
.c-tile__title { font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--c-ink); line-height: 1.3; min-height: 2.6em; }
.c-tile__lede {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* ---- Editorial feature band ---- */

.c-feature {
  background: var(--c-bg);
  border-top: 3px solid var(--c-accent);
  border-bottom: 3px solid var(--c-accent);
  padding-block: var(--space-lg);
  margin-block: var(--space-md);
}
.c-feature__wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 768px) {
  .c-feature__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); }
}
.c-feature__copy { display: flex; flex-direction: column; gap: var(--space-sm); }
.c-feature__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--c-accent);
}
.c-feature__eyebrow-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(225, 126, 26, 0.18);
  flex-shrink: 0;
}
.c-feature__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .c-feature__title { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.4rem); }
}
.c-feature__lede {
  color: var(--c-ink-soft);
  font-size: var(--fs-md);
  line-height: 1.5;
  max-width: 56ch;
}
.c-feature__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-2xs); }

.c-feature__visual {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--space-lg);
  padding-inline: var(--space-md);
  background: radial-gradient(ellipse at center, rgba(225, 126, 26, 0.12) 0%, rgba(225, 126, 26, 0) 65%);
  border-radius: var(--radius-md);
  min-height: 12rem;
}
.c-feature__visual--photo {
  overflow: hidden;
  padding-block: var(--space-xl);
  min-height: 18rem;
  background: var(--c-ink);
}
.c-feature__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.c-feature__visual--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 1;
}
.c-feature__visual--photo .c-feature__visual-mark,
.c-feature__visual--photo .c-feature__visual-sub {
  position: relative;
  z-index: 2;
}
.c-feature__visual--photo .c-feature__visual-mark {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.c-feature__visual--photo .c-feature__visual-sub {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.c-feature__visual-mark {
  display: block;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.c-feature__visual-sub {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
  letter-spacing: 0.02em;
}

/* ---- Trust strip ---- */

.c-trust {
  background: var(--c-bg-deep);
  color: var(--c-brand-ink);
  padding-block: var(--space-md) var(--space-lg);
  border-top: 3px solid var(--c-accent);
  margin-top: var(--space-md);
}
.c-trust__wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}
.c-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.c-trust__icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--c-accent);
  flex-shrink: 0;
}
.c-trust__text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.c-trust__text strong { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.c-trust__text span,
.c-trust__text a { font-size: var(--fs-xs); opacity: 0.85; color: var(--c-brand-ink); }
.c-trust__text a:hover { opacity: 1; text-decoration: underline; }

/* ---- Footer ---- */

.c-footer { background: var(--c-bg-deep); color: var(--c-brand-ink); }
.c-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-lg);
  padding-block: var(--space-lg);
}
.c-footer__heading {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-xs);
  color: var(--c-brand-ink);
}
.c-footer__heading--sub {
  /* space-2xs (current gap) + 1.5rem (one footer-list row pitch ≈ 24px) so the
     address block reads as one "blank row" lower than the link list above. */
  margin-top: calc(var(--space-2xs) + 1.5rem);
  opacity: 0.85;
}
.c-footer__col-address {
  font-style: normal;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.78);
  /* Match the list row pitch (~24px = li line-height 21 + .c-footer__list
     gap 3.2px). 24 / 15px font-size ≈ 1.6. */
  line-height: 1.6;
}
.c-footer__list { display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--fs-sm); }
.c-footer__list a { color: rgba(255, 255, 255, 0.78); }
.c-footer__list a:hover { color: var(--c-brand-ink); text-decoration: underline; }
.c-footer__lede { color: rgba(255, 255, 255, 0.65); margin-bottom: var(--space-sm); font-size: var(--fs-sm); }
.c-footer__newsletter { display: flex; gap: var(--space-2xs); }
.c-footer__newsletter input {
  flex: 1; min-width: 0;
  min-height: var(--field-h);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--c-brand-ink);
}
.c-footer__newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--fs-sm);
}
.c-footer__newsletter button {
  padding: 0 var(--space-md);
  min-height: var(--field-h);
  border-radius: var(--radius-sm);
  background: var(--c-brand);
  color: var(--c-brand-ink);
  font-weight: var(--fw-semibold);
  border: 1px solid var(--c-brand);
}
.c-footer__newsletter button:hover { background: #2c3a4d; border-color: #2c3a4d; }
.c-footer__newsletter button[disabled] { opacity: 0.6; cursor: wait; }
.c-footer__newsletter-msg {
  margin-top: var(--space-sm);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-sm);
}

.c-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-sm);
  color: #fff;
}
.c-footer__bottom p { color: #fff; }
.c-footer__bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  flex-wrap: wrap;
}
.c-footer__contact { display: flex; gap: var(--space-xs); align-items: center; }
.c-footer__contact a:hover { color: var(--c-brand-ink); }

/* -------- 6. Responsive -------------------------------------------------- */

/* Mobile-first responsive enhancements ----------------------------------- */
/* Cart label + brand tagline hidden on narrow; show on desktop. */
.c-header__cart-label { display: none; }
@media (min-width: 1024px) {
  .c-header__cart-label { display: inline; }
}

/* Tablet-landscape band (1024–1199): the desktop nav activates at 1024 but
   brand + 5 nowrap nav items + cart overflow the row, pushing Cart off-screen.
   ≥1200 has room, so only this band tightens: smaller grid gap, smaller brand
   wordmark, and trimmed nav-link padding (accent underline inset matched). */
@media (min-width: 1024px) and (max-width: 1199px) {
  .c-header__inner { gap: var(--space-sm); }
  .c-header__brand-name { font-size: var(--fs-lg); }
  .c-nav__link, .c-nav__toggle { padding-inline: 0.5rem; }
  .c-nav__link::after, .c-nav__toggle::after {
    left: 0.5rem;
    width: calc(100% - 1rem);
  }
}

/* -------- 7. Products page (filter + sort grid) ------------------------- */

.c-section__lede { color: var(--c-ink-soft); max-width: 64ch; font-size: var(--fs-md); }

.c-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--c-accent);
  text-transform: none;
}
.c-section__eyebrow-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(225, 126, 26, 0.18);
  flex-shrink: 0;
}
.c-section__rule {
  display: block;
  width: 112px;
  height: 3px;
  margin-top: var(--space-2xs);
  background: linear-gradient(90deg, var(--c-accent) 0%, rgba(225, 126, 26, 0.1) 100%);
  border-radius: 2px;
}
.c-filters {
  margin-block: var(--space-md);
  padding: var(--space-sm);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}
.c-filters__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs) var(--space-sm);
}
@media (min-width: 600px) {
  .c-filters__row { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .c-filters__row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md); }
  .c-filter--sort { margin-left: auto; }
}

.c-filter {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.c-filter__label { color: var(--c-ink-soft); font-weight: var(--fw-medium); }
.c-filter__select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-sm);
  font-size: 16px; /* prevents iOS zoom on focus */
  font-family: inherit;
  color: var(--c-ink);
  min-width: 0;
  width: 100%;
}
.c-filter__select:focus { outline: 2px solid var(--c-link); outline-offset: 1px; }

.c-filter--check {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2xs);
  align-self: end;
  padding-block: var(--space-2xs);
}
.c-filter--check input[type="checkbox"] { width: 1.1em; height: 1.1em; }
.c-filter--check .c-filter__label { color: var(--c-ink); font-weight: var(--fw-medium); }

.c-filter--sort .c-filter__select { min-width: 14rem; }

/* Disabled checkbox filter — greys label + checkbox + cursor.
   Browser greys the disabled <option> entries inside selects natively. */
.c-filter--disabled { cursor: not-allowed; opacity: 0.55; }
.c-filter--disabled input { cursor: not-allowed; }
/* Strike-through is a Chrome/Edge bonus — Firefox is partial, Safari
   ignores option styling entirely. The "(0)" suffix in the label carries
   the meaning everywhere; the strike is visual polish where supported. */
.c-filter__select option:disabled {
  color: var(--c-ink-soft);
  text-decoration: line-through;
}

.c-filters__status {
  display: flex; align-items: center; gap: var(--space-sm);
}
.c-filters__status:has(> :not([hidden])) {
  margin-top: var(--space-sm);
  min-height: 1.4em;
}
.c-filters__count { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.c-filters__clear {
  background: none; border: 0; padding: 0;
  color: var(--c-link); font: inherit; cursor: pointer;
  text-decoration: underline;
}
.c-filters__clear:hover { color: var(--c-ink); }

/* Card action sits below link area — keep card itself a flex column. */
.c-card { display: flex; flex-direction: column; }
/* `display: flex` above defeats the browser default for `[hidden]` (which is
   `display: none`); the filter script sets `card.hidden = true` to hide
   non-matching cards, so we need to re-assert `display: none` here. */
.c-card[hidden] { display: none; }
.c-card__link { flex: 1 1 auto; }
.c-card__action {
  padding: 0 var(--space-sm) var(--space-sm);
  display: flex; flex-direction: column; gap: var(--space-2xs);
}
.c-card__badge {
  display: inline-block;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--c-bg-alt);
  color: var(--c-ink-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  text-align: center;
}

.c-button--block { display: block; width: 100%; text-align: center; }

.c-empty {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  text-align: center;
  color: var(--c-ink-soft);
  font-size: var(--fs-md);
}
.c-empty__clear {
  background: none; border: 0; padding: 0;
  color: var(--c-link); font: inherit; cursor: pointer;
  text-decoration: underline;
}
.c-empty__clear:hover { color: var(--c-ink); }

/* Slightly denser grid on the products page (more cards per row on desktop). */
@media (min-width: 1280px) {
  .c-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─── Page shell — unified rail for all non-PDP/cart pages ────────────── */
.c-page {
  max-width: var(--page-max);
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--wrap-pad);
}

.c-page__head { margin: var(--space-sm) 0 var(--space-lg); }

.c-page__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.04em; color: var(--c-ink-soft);
  margin-bottom: var(--space-2xs);
}
.c-page__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent);
}

.c-page__title {
  width: fit-content; max-width: 100%; position: relative;
  padding-bottom: calc(var(--space-2xs) + 4px);
  font-size: var(--fs-2xl); font-weight: var(--fw-black);
  line-height: 1.15; letter-spacing: -0.005em;
  margin: 0 0 var(--space-sm); color: var(--c-ink);
}
.c-page__title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--c-accent) 0%, rgba(225,126,26,0.1) 100%);
  border-radius: 2px;
}

.c-page__lede {
  font-size: var(--fs-lg); color: var(--c-ink-soft);
  max-width: 64ch; line-height: 1.5; margin: 0;
}

.c-page__stat-strip {
  margin-top: var(--space-md);
  background: var(--c-bg);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
}

/* Featured variant — used on collection / "moment" pages where the head should
   feel like an arrival rather than a utility list. Triggered by pageFeatured. */
.c-page__head--featured { margin-bottom: var(--space-xl); gap: var(--space-xs); }
.c-page__head--featured .c-page__title {
  font-size: var(--fs-3xl); line-height: 1.08; letter-spacing: -0.015em;
  padding-bottom: calc(var(--space-2xs) + 5px);
}
.c-page__head--featured .c-page__title::after { height: 3px; }
.c-page__head--featured .c-page__lede { max-width: 70ch; margin-top: var(--space-2xs); }
@media (min-width: 768px) {
  .c-page__head--featured .c-page__title { padding-bottom: calc(var(--space-2xs) + 6px); }
  .c-page__head--featured .c-page__title::after { height: 4px; }
}

/* Utility pages render content on a white panel matching PDP top + home
   c-section rhythm. Catalog listings opt out (filter row + grid need
   the page-wash directly for the card-on-tray look). */
.c-page__body {
  background: var(--c-bg);
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-md);
}
.c-page--catalog .c-page__body,
.c-page--bare .c-page__body {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.c-page--with-aside .c-page__body,
.c-page--with-toc .c-page__body {
  /* Aside/TOC grids keep the panel — wider padding so toc + article breathe. */
}
.c-page__aside {
  margin-top: var(--space-xl); display: flex; flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 1024px) {
  .c-page--with-aside .c-page__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-xl);
    align-items: start;
  }
  .c-page--with-aside .c-page__aside {
    margin-top: 0;
    position: sticky;
    top: calc(var(--c-header-pinned-h, 72px) + var(--space-md));
  }
}

/* ---- Right-rail aside cards (about / authenticity / business) ---------
   Uniform card chrome for the with-aside sidebar. Content differs by page
   intent (facts list, link list, contact) but the card form is shared so
   the pages read as a family. Additive — does not touch the legacy tile
   aside that .c-page--with-aside was first built for. */
.c-aside-card {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.c-aside-card__title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--space-sm);
}
.c-aside-card ul { list-style: none; margin: 0; padding: 0; }
.c-aside-card li { margin-bottom: var(--space-xs); color: var(--c-ink-soft); }
.c-aside-card li:last-child { margin-bottom: 0; }
.c-aside-card a { color: var(--c-link); text-decoration: none; }
.c-aside-card a:hover { text-decoration: underline; }
.c-aside-card__note { color: var(--c-muted); }
/* "At a glance" facts list — label left, value right, soft rule between. */
.c-aside-facts { margin: 0; }
.c-aside-facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.c-aside-facts > div:last-child { border-bottom: 0; }
.c-aside-facts dt { color: var(--c-muted); }
.c-aside-facts dd { margin: 0; color: var(--c-ink); font-weight: var(--fw-semibold); text-align: right; }

/* PDP-only crumb-rail wrapper. PDP keeps own c-pdp shell; only the
   crumb gets the unified gutter so it visually aligns with site rail. */
.c-page__crumbs-only {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

/* ─── Breadcrumbs ─────────────────────────────────────────────────────── */
.c-breadcrumbs {
  margin: var(--space-md) 0 var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
}
.c-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.c-breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-2xs);
  color: var(--c-line);
}
.c-breadcrumbs a { color: var(--c-link); text-decoration: none; }
.c-breadcrumbs a:hover { text-decoration: underline; }
.c-breadcrumbs li[aria-current="page"] { color: var(--c-ink); }

/* ─── Prose body — long-form static pages ─────────────────────────────── */
.c-prose {
  max-width: 720px;
  margin: 0 0 var(--space-2xl, 3rem);
  color: var(--c-ink);
  font-size: var(--fs-md);
  line-height: 1.65;
}
/* Drop the reading-measure cap so a prose body can host a full-width 2-col
   grid (e.g. /by-use.html reusing .c-collection-body__cols). */
.c-prose--wide { max-width: none; }
/* by-use image cards: activity photo on top + guidance copy below, inside the
   c-collection-body__cols 2-col grid. height:auto pairs with the HTML width/
   height attrs + aspect-ratio to avoid CLS. */
.c-use-card { margin-bottom: var(--space-lg); }
.c-use-card > a { display: block; border-radius: var(--radius-md); overflow: hidden; }
.c-use-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 800 / 447; object-fit: cover;
  border-radius: var(--radius-md);
  transition: opacity var(--transition);
}
.c-use-card > a:hover img { opacity: 0.9; }
.c-use-card > h2 { margin-top: var(--space-sm); }
/* Guide-article byline — first body element, directly under the page-shell
   header (which renders identically to /about.html). */
.c-guide-byline {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
}
.c-guide-byline a { color: inherit; text-decoration: underline; }

/* Guide-article hero image — sits below the byline, the one element that
   distinguishes a guide from a standard content page like /about.html.
   1376/768 proportion (same source as the home Shop-by-activity tiles);
   height:auto + aspect-ratio avoid CLS. */
.c-guide-figure {
  margin: 0 0 var(--space-xl);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-line);
}
.c-guide-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1376 / 768;
  object-fit: cover;
}
.c-prose h2 {
  font-size: var(--fs-xl, 1.5rem);
  margin: var(--space-xl, 2rem) 0 var(--space-sm);
  color: var(--c-ink);
}
.c-prose h2:first-child { margin-top: 0; }
.c-prose h3 {
  font-size: var(--fs-lg, 1.125rem);
  margin: var(--space-lg) 0 var(--space-xs);
  color: var(--c-ink);
}
.c-prose p { margin: 0 0 var(--space-md); }
.c-prose ul,
.c-prose ol { margin: 0 0 var(--space-md); padding-left: 1.5rem; }
/* Restore markers: the global reset (ul,ol { list-style:none }) strips them,
   so .c-prose lists were indented but bulletless. Mirrors .c-columns ul. */
.c-prose ul { list-style: disc; }
.c-prose ol { list-style: decimal; }
.c-prose li { margin-bottom: var(--space-2xs); }
.c-prose a { color: var(--c-link); }
.c-prose strong { color: var(--c-ink); font-weight: 600; }
.c-prose hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--space-xl, 2rem) 0;
}
.c-prose dl { margin: 0 0 var(--space-md); }
.c-prose dt { font-weight: 600; color: var(--c-ink); margin-top: var(--space-sm); }
.c-prose dd { margin: 0 0 var(--space-xs); }

.c-tile-info {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md, 8px);
  background: var(--c-bg-alt);
  padding: var(--space-md);
}
.c-tile-info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  margin-bottom: var(--space-xs);
  color: var(--c-link);
}
.c-tile-info-icon svg { width: 100%; height: 100%; }
.c-tile-info-title {
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0 0 var(--space-2xs);
  color: var(--c-ink);
}
.c-tile-info-text {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.5;
}
.c-tile-contact {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md, 8px);
  background: var(--c-bg);
  padding: var(--space-md);
}
.c-tile-contact-title {
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0 0 var(--space-xs);
  color: var(--c-ink);
}
.c-tile-contact dl {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.c-tile-contact dt {
  font-weight: 600;
  color: var(--c-ink-soft);
  margin-top: var(--space-xs);
}
.c-tile-contact dt:first-child { margin-top: 0; }
.c-tile-contact dd { margin: 0; color: var(--c-ink); }
.c-tile-contact a { color: var(--c-link); text-decoration: none; }
.c-tile-contact a:hover { text-decoration: underline; }

/* Callout — for important constraints inside prose. */
.c-callout {
  border-left: 3px solid var(--c-accent);
  background: var(--c-bg-alt);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.c-callout p { margin: 0; }
.c-callout p + p { margin-top: var(--space-xs); }

/* Anchor TOC moved to §9 utility primitives (2026-05-13 unification).
   Old card-style box + 2-column layout replaced by slim left-border list.
   See: root/docs/2026-05-13-utility-pages-unification.md */

/* Small muted line — "last updated" stamps, doc metadata. */
.c-meta {
  margin-top: var(--space-lg);
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
  font-style: italic;
}

/* 404 page hero — large code, headline, lede, CTAs. */
.c-notfound {
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
}
.c-notfound__wrap {
  max-width: 640px;
  margin: 0 auto;
}
.c-notfound__wrap .c-pill {
  margin: 0 auto var(--space-sm);
}
.c-notfound__title {
  font-size: var(--fs-xl);
  font-weight: 600;
  margin: 0 0 var(--space-sm);
  color: var(--c-ink);
}
.c-notfound__lede {
  font-size: var(--fs-md);
  color: var(--c-ink-soft);
  margin: 0 0 var(--space-lg);
  line-height: 1.55;
}
.c-notfound__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* Spec tables (shipping rates, warranty periods, etc.). */
.c-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-md);
  font-size: var(--fs-sm);
}
.c-table th,
.c-table td {
  border: 1px solid var(--c-line);
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  vertical-align: top;
}
.c-table th {
  background: var(--c-bg-alt);
  color: var(--c-ink);
  font-weight: 600;
}

/* Two-col list (provinces, etc.). */
.c-columns { column-count: 2; column-gap: var(--space-lg); }
.c-columns ul { list-style: disc; margin: 0; padding-left: 1.25rem; }
.c-columns li { break-inside: avoid; margin-bottom: var(--space-2xs); }

/* Hub grid (support page, etc.) — clickable link cards. */
.c-hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: 0 0 var(--space-xl, 2rem);
}
.c-hub-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md, 8px);
  background: var(--c-bg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.c-hub-card:hover {
  border-color: var(--c-link);
  transform: translateY(-1px);
}
.c-hub-card-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  color: var(--c-link);
  margin-top: 2px;
}
.c-hub-card-icon svg { width: 100%; height: 100%; }
.c-hub-card-body { flex: 1; min-width: 0; }
.c-hub-card-title {
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0 0 var(--space-2xs);
  color: var(--c-ink);
}
.c-hub-card-text {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.5;
}
.c-hub-card-arrow {
  flex: 0 0 16px;
  color: var(--c-ink-soft);
  margin-top: 4px;
}

@media (min-width: 600px) {
  .c-hub { grid-template-columns: 1fr 1fr; }
}


/* ─── FAQ — accordion-free question/answer list ───────────────────────── */
.c-faq {
  max-width: 720px;
  margin: 0 auto var(--space-2xl, 3rem);
  padding: 0 var(--space-md);
}
.c-faq__item {
  border-top: 1px solid var(--c-line);
  padding: var(--space-md) 0;
}
.c-faq__item:last-child { border-bottom: 1px solid var(--c-line); }
.c-faq__q {
  font-size: var(--fs-lg, 1.125rem);
  font-weight: 600;
  margin: 0 0 var(--space-xs);
  color: var(--c-ink);
}
.c-faq__a { margin: 0; color: var(--c-ink); line-height: 1.65; }
.c-faq__a + .c-faq__a { margin-top: var(--space-xs); }

/* Home variant — sits inside .c-section__wrap, which already supplies the
   outer padding + max-width. Drop .c-faq's own padding to avoid doubling.
   Mobile-first: single column fills the rail. ≥768px: 2-col grid so the body
   matches the rail width set by the section header above. Container owns the
   bottom rule so the visual closes cleanly regardless of column count or
   parity of items. */
.c-faq--home {
  padding: 0;
  margin: 0;
  max-width: none;
  border-bottom: 1px solid var(--c-line);
}
.c-faq--home .c-faq__item:last-child { border-bottom: 0; }

@media (min-width: 768px) {
  .c-faq--home {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-xl);
    row-gap: 0;
  }
}

/* Inline links inside answers — global `a` is `color: inherit; text-decoration: none`,
   so links would be invisible without this. Standalone /faq.html sidesteps the issue
   by wrapping in .c-prose; home FAQ needs its own rule. */
.c-faq__a a { color: var(--c-link); }
.c-faq__a a:hover { text-decoration: underline; }

/* ─── Forms — used by /contact.html ────────────────────────────────────── */
.c-form {
  display: grid;
  gap: 1rem;
  max-width: 38rem;
  margin: 0 0 2rem;
}

.c-form__field { display: grid; gap: 0.4rem; }

.c-form__label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--c-ink);
}

.c-form__opt {
  font-weight: 400;
  color: var(--c-muted);
  font-size: 0.9em;
}

.c-form__input,
.c-form__textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem; /* >= 16px to avoid iOS zoom-on-focus */
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  color: var(--c-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.c-form__textarea {
  resize: vertical;
  min-height: 8rem;
}

.c-form__input:focus-visible,
.c-form__textarea:focus-visible {
  outline: 2px solid var(--c-link);
  outline-offset: 2px;
  border-color: var(--c-line);
}

.c-form__error {
  margin: 0;
  color: var(--c-danger);
  font-size: 0.9rem;
}

.c-form__alert {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--c-danger);
  background: rgba(177, 58, 58, 0.06);
  color: var(--c-ink);
}

.c-form__alert > div + div { margin-top: 0.25rem; }

.c-form__success {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--c-success);
  background: rgba(46, 125, 79, 0.06);
}

.c-form__success p { margin: 0 0 0.75rem; color: var(--c-ink); }
.c-form__success .c-button { margin-top: 0.25rem; }

@media (min-width: 48em) {
  .c-form { gap: 1.25rem; }
}

/* ============================================================================
   8. Shared design primitives (Phase 1 of PDP unification)
   ----------------------------------------------------------------------------
   Reusable components consumed by PDP rebuild (Phase 2) and later promoted to
   cart / order / collection hero / static prose. No template touches this
   primitive until its phase ships — adding these classes is a no-op for
   existing pages.
   See: sites/canadaflashlights.ca/root/docs/2026-05-13-pdp-design-unification.md
   ============================================================================ */

:root {
  /* Display sizing for stat-strip + price headline. Clamps chosen from
     preview v4 signoff (CFS LR60R pill scale). */
  --fs-stat-num:      clamp(1rem,    .9rem  + .35vw, 1.25rem);
  --fs-price-display: clamp(1.375rem, 1.15rem + .85vw, 1.875rem);

  /* Stock state semantics. Aliases for --c-success / --c-danger so PDP
     and cart can read intent-named tokens instead of color names. */
  --c-stock-in:  var(--c-success);
  --c-stock-out: var(--c-danger);

  /* Data-table row stripe — slightly stronger than --c-bg-alt so a long
     run of striped rows reads as zebra not as a flat panel. */
  --c-stripe: #edf0f4;
}

/* ---- Eyebrow (canonical primitive; legacy variants alias to this) ------- */

.c-eyebrow,
.c-hero__eyebrow,
.c-section__eyebrow,
.c-page__eyebrow,
.c-feature__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
}
.c-eyebrow::before,
.c-hero__eyebrow .c-hero__eyebrow-dot,
.c-section__eyebrow .c-section__eyebrow-dot,
.c-page__eyebrow .c-page__eyebrow-dot,
.c-feature__eyebrow .c-feature__eyebrow-dot {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(225, 126, 26, 0.18);
  flex-shrink: 0;
  display: inline-block;
}

/* ---- Pill (solid loud status / flag chip) ------------------------------- */

.c-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--c-ink);
  border: 1px solid var(--c-ink);
  width: fit-content;
}
.c-pill--success {
  background: var(--c-stock-in);
  border-color: var(--c-stock-in);
}
.c-pill--danger {
  background: var(--c-stock-out);
  border-color: var(--c-stock-out);
}
.c-pill--sale {
  background: var(--c-sale);
  border-color: var(--c-sale);
}
/* Calm informational variant (e.g. payment cancelled — not an error). Light
   slate fill, dark text, normal case so it reads as a gentle hint, not a loud
   red danger flag. */
.c-pill--info {
  background: #eef1f6;
  border-color: var(--c-line);
  color: var(--c-ink-soft);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--fw-medium);
}

/* ---- Stat strip (4-up hero specs, plain bg + divider rules) ------------- */

.c-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
}
.c-stat {
  padding: 6px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  border-right: 1px solid var(--c-line-soft);
}
.c-stat:last-child { border-right: 0; }
.c-stat__num {
  font-size: var(--fs-stat-num);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--c-ink);
}
.c-stat__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* ---- Price headline (cur + amount + strike + save) ---------------------- */

.c-price-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.c-price-headline__cur {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: var(--fw-semibold);
  align-self: flex-start;
  padding-top: 0.35em;
}
.c-price-headline__amount {
  font-size: var(--fs-price-display);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--c-ink);
}
.c-price-headline__strike {
  font-size: var(--fs-md);
  color: var(--c-muted);
  text-decoration: line-through;
}
.c-price-headline__save {
  font-size: var(--fs-sm);
  color: var(--c-sale);
  font-weight: var(--fw-bold);
}

/* ---- CTA block (tall full-width purchase commit) ------------------------ */

.c-cta--block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: var(--space-sm) var(--space-md);
  background: var(--c-cta);
  color: var(--c-cta-ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  border: 0;
  border-radius: var(--radius-md);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.c-cta--block:hover {
  background: #245d3d;
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--c-cta-ink);
}
.c-cta--block:focus-visible {
  outline: 2px solid var(--c-link);
  outline-offset: 2px;
}
.c-cta--block:disabled,
.c-cta--block[aria-disabled="true"] {
  background: var(--c-muted);
  cursor: not-allowed;
  transform: none;
}

/* ---- CTA block secondary tier (navy nav/info; not commit-to-buy) -------- */

.c-cta--block.c-cta--secondary {
  background: var(--c-brand);
  color: var(--c-brand-ink);
}
.c-cta--block.c-cta--secondary:hover {
  background: var(--c-brand-deep, #08233d);
  color: var(--c-brand-ink);
}

/* ---- Def-list (dense k/v rows with alternating wash) -------------------- */

.c-def-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--c-bg);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.c-def-list__row {
  display: grid;
  grid-template-columns: minmax(120px, 28%) 1fr;
  gap: var(--space-sm);
  padding: 6px var(--space-sm);
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.c-def-list__row:nth-child(even) { background: var(--c-bg-alt); }
.c-def-list__row:last-child { border-bottom: 0; }
.c-def-list__k {
  color: var(--c-ink-soft);
  font-weight: var(--fw-semibold);
}
.c-def-list__v {
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

/* ---- Data table (dense zebra, tabular, mobile collapse via data-label) - */

.c-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  background: var(--c-bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.c-data-table__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line-soft);
}
.c-data-table thead th {
  background: var(--c-bg-deep);
  color: var(--c-brand-ink);
  text-align: right;
  padding: 7px 10px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.c-data-table thead th:first-child { text-align: left; }
.c-data-table tbody td {
  padding: 6px 10px;
  text-align: right;
  line-height: 1.35;
}
.c-data-table tbody tr:nth-child(odd)  { background: var(--c-bg); }
.c-data-table tbody tr:nth-child(even) { background: var(--c-stripe); }
.c-data-table tbody td:first-child {
  text-align: left;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  letter-spacing: 0.01em;
}
.c-data-table tbody td.muted { color: var(--c-muted); }

@media (max-width: 640px) {
  .c-data-table thead { display: none; }
  .c-data-table,
  .c-data-table tbody,
  .c-data-table tr,
  .c-data-table td { display: block; width: 100%; }
  .c-data-table tr {
    background: var(--c-bg);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    padding: 6px 10px;
  }
  .c-data-table tr:nth-child(even) { background: var(--c-bg); }
  .c-data-table td {
    text-align: right;
    border: 0;
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
  }
  .c-data-table td:first-child {
    border-bottom: 1px solid var(--c-line-soft);
    padding-bottom: 6px;
    margin-bottom: 4px;
    font-size: var(--fs-md);
  }
  .c-data-table td[data-label]::before {
    content: attr(data-label);
    font-weight: var(--fw-semibold);
    color: var(--c-muted);
    text-transform: uppercase;
    font-size: var(--fs-2xs);
    letter-spacing: 0.04em;
    margin-right: 8px;
  }
}

/* ---- Card flags (sale / new badge overlays on product cards) ----------- */

.c-card__flags {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.c-pdp__flags {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

/* ---- Feature list (bordered dense list with accent bullets) ------------- */

.c-feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--c-bg);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 0;
}
.c-feature-list li {
  padding: 6px var(--space-sm);
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--fs-sm);
  line-height: 1.45;
  display: flex;
  gap: 8px;
}
.c-feature-list li:last-child { border-bottom: 0; }
.c-feature-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--c-accent);
  border-radius: 50%;
  margin-top: 8px;
  flex: none;
}

/* ============================================================================
   9. Utility-page primitives (Phase 1 of utility-pages unification, 2026-05-13)
   ----------------------------------------------------------------------------
   Reusable components for static info / hub / long-form pages. Consumed by
   Phase 2 template rewrites. See:
   sites/canadaflashlights.ca/root/docs/2026-05-13-utility-pages-unification.md
   ============================================================================ */

/* ---- Article + TOC grid (long-form guides) ----------------------------- */

.c-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 1024px) {
  .c-article-grid {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: var(--space-2xl);
    align-items: start;
  }
}

/* ---- TOC (slim functional anchor list) --------------------------------- */

.c-toc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  border-left: 2px solid var(--c-line);
  padding-left: var(--space-md);
}
/* Sticky positioning is intentionally scoped to the TOC-grid sidebar
   (.c-page--with-toc .c-toc, below). A standalone .c-toc inside ordinary
   single-column content (e.g. /guides articles) must NOT stick, or it
   floats over the body text on scroll. */
.c-toc__title,
.c-toc-title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--space-xs);
}
.c-toc ol,
.c-toc ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.c-toc li { margin-bottom: 6px; }
.c-toc a {
  color: var(--c-ink-soft);
  text-decoration: none;
}
.c-toc a:hover {
  color: var(--c-link);
  text-decoration: underline;
}
.c-toc a[aria-current="true"] {
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
}

/* ---- Collection SEO copy block (below grid) ---------------------------- */

.c-collection-prose {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  max-width: 76ch;
}
.c-collection-prose p { margin: 0; }

/* Enriched category SEO content (e.g. /outdoor.html): full-size prose body
   + FAQ rendered after the grid. Unlike the quiet .c-collection-prose lede,
   these read as real article copy — full ink colour and standard prose size
   (inherited from .c-prose), separated from the grid by a soft rule. */
.c-collection-body,
.c-collection-faq {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--c-line-soft);
  /* Fill the full catalog content width (1280px) rather than the 720px prose
     cap, so the bottom section reads as part of the page, not a stuck-left
     column. The FAQ's two-column grid (.c-faq--home) absorbs the extra width;
     body prose runs full-width to match. */
  max-width: none;
}
.c-collection-faq { margin-top: var(--space-xl); }
/* Body prose "lead + pair": the first H2 section runs full-width as a lead;
   the remaining sections sit in .c-collection-body__cols as a two-column grid
   at ≥768px (single column on mobile). Each column's leading H2 drops its
   .c-prose top margin so the two columns start flush. */
.c-collection-body__cols { margin-top: var(--space-2xl); }
.c-collection-body__cols > div > h2:first-child { margin-top: 0; }
@media (min-width: 768px) {
  .c-collection-body__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-xl);
  }
}
/* Reuse the home two-column FAQ grid (.c-faq--home) below the catalog. Left-
   aligned (c-faq--home zeroes the auto margin); full content width here so it
   spans the grid above rather than centring like the home section. */
.c-collection-faq__title {
  font-size: var(--fs-xl, 1.5rem);
  margin: 0 0 var(--space-md);
  color: var(--c-ink);
}

/* ---- Hub grid (navigation tile grid for hub pages) --------------------- */

.c-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 600px) {
  .c-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .c-hub-grid { grid-template-columns: repeat(3, 1fr); }
}

.c-hub-tile {
  display: block;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.c-hub-tile:hover,
.c-hub-tile:focus-visible {
  border-color: var(--c-ink-soft);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.c-hub-tile__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  margin-bottom: 4px;
}
.c-hub-tile__lede {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: 1.45;
}

/* ---- Utility-page TOC layout modifier on c-page ------------------------ */

@media (min-width: 1024px) {
  .c-page--with-toc .c-page__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: var(--space-2xl);
    align-items: start;
  }
  /* TOC pinned right column regardless of DOM order (templates emit TOC first). */
  .c-page--with-toc .c-page__body > .c-toc { order: 2; grid-column: 2; }
  .c-page--with-toc .c-page__body > article,
  .c-page--with-toc .c-page__body > .c-prose { order: 1; grid-column: 1; }
  .c-page--with-toc .c-toc {
    position: sticky;
    top: calc(var(--c-header-pinned-h, 72px) + var(--space-md));
    margin-top: 0;
  }
}

/* ────────────────────────────────────────────────────────────────────────
 * Cart-v2 composition (Layout B) — site-local glue, not a primitive
 * ──────────────────────────────────────────────────────────────────────── */
.c-cart {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .c-cart { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); }
  .c-cart__rail {
    position: sticky;
    top: calc(var(--c-header-pinned-h, 72px) + var(--space-md));
    align-self: start;
  }
  .c-cart__rail.c-cart__rail--static { position: static; }
}
.c-cart__rail > #cart-rail-content > * + * { margin-top: var(--space-md); }
.c-cart__item-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: inherit;
  text-decoration: none;
}
.c-cart__item-name:hover { color: var(--c-brand); }
.c-cart__item-thumb {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line-soft);
}
.c-cart__item-options {
  display: block;
  color: var(--c-muted);
  font-size: var(--fs-xs);
}
.c-cart__qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.c-cart__qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  line-height: 1;
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition);
}
.c-cart__qty-btn:hover {
  background: var(--c-line-soft);
  border-color: var(--c-muted);
}
.c-cart__qty-val {
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.c-cart__hint {
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: 1.4;
}
.c-cart__hint strong { color: var(--c-ink); font-weight: var(--fw-semibold); }
.c-cart__price-strike {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-decoration: line-through;
  margin-right: 6px;
}
.c-cart__coupon {
  display: flex;
  gap: 4px;
  margin-top: var(--space-md);
}
.c-cart__coupon-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-size: 16px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
}
.c-cart__coupon-btn {
  padding: 6px 14px;
  background: var(--c-brand);
  color: var(--c-brand-ink);
  border: 0;
  border-radius: 4px;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-weight: 600;
}
.c-cart__coupon-error {
  color: var(--c-stock-out);
  font-size: var(--fs-xs);
  margin: 4px 0 0;
  min-height: 1em;
}
.c-cart__coupon-clear {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 6px;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  text-decoration: underline;
  cursor: pointer;
}
.c-cart__coupon-clear:hover,
.c-cart__coupon-clear:focus-visible { color: var(--c-stock-out); }
.c-cart__totals .c-def-list__v { text-align: right; }
.c-cart__totals .c-def-list__row { grid-template-columns: auto 1fr; }
.c-cart__coupon-savings .c-def-list__v { color: var(--c-sale); font-weight: var(--fw-semibold); }
.c-cart__express-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs, .25rem);
  cursor: pointer;
  white-space: nowrap;
}
.c-cart__express-label input { margin: 0; }
.c-cart__express-label input[disabled] { cursor: not-allowed; }
.c-cart__coupon-savings code {
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: var(--fw-regular);
}
.c-cart__paypal {
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-line-soft);
}
/* PayPal caps its button graphic at ~750px inside the iframe. In the wide
   single-column cart (<1024px) the container is wider than that, so the
   buttons render under-width and left-aligned with dead space on the right.
   Cap the container to PayPal's max and centre it. No effect on the narrow
   desktop rail (≥1024, ~360px) where buttons already fill the column. */
#paypal-button-container { max-width: 750px; margin-inline: auto; }
.c-cart__paypal-spinner {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 8px;
  font-size: var(--fs-sm);
}
/* Click acknowledgement for the "Debit or Credit Card" button: PayPal's card
   form loads inside its iframe over ~2-3s with no page-side "ready" event, so
   this spinner fills the gap. Calm/muted — it is a wait hint, not an error. */
.c-cart__paypal-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 8px;
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
}
/* Lightweight spinner — CFCA v2 has no Bootstrap, so .spinner-border is unstyled.
   Sized in em so it tracks the surrounding font-size. */
.c-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid var(--c-line);
  border-top-color: var(--c-ink-soft);
  border-radius: 50%;
  animation: c-spin 0.6s linear infinite;
  flex: none;
}
@keyframes c-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .c-spinner { animation-duration: 1.6s; }
}
.c-cart__empty {
  text-align: center;
  padding: var(--space-lg) 0;
}
.c-cart__empty-text {
  font-size: var(--fs-lg);
  color: var(--c-muted);
  margin: 0 0 var(--space-md);
}
.c-cart__continue {
  max-width: 280px;
  margin: 0 auto var(--space-lg);
}
.c-cart__items thead th:first-child { text-align: left; }
.c-cart__items thead th:last-child  { width: 40px; }

/* ---- Cart state flag (html.cart-empty) --------------------------------- *
 * Single flag set pre-paint in cart-v2.hbs and re-set from the validated
 * count in footer-v2.hbs. Covers two concerns off one signal:
 *   1. Empty cart: drop the rail entirely, collapse to a single full-width
 *      column, and centre the empty-state message.
 *   2. Pre-hydration guard (cart has items but socket hasn't painted yet):
 *      hide the server's seeded empty-state + cross-sell band so they never
 *      flash before the real line items arrive. */
html.cart-empty .c-cart__rail { display: none; }
@media (min-width: 1024px) {
  html.cart-empty .c-cart { grid-template-columns: 1fr; }
}
html.cart-empty .c-cart__empty { padding: var(--space-2xl) 0; }
html:not(.cart-empty) .c-cart__empty,
html:not(.cart-empty) #cart-bestsellers-row { display: none; }

/* Status-dependent lede: show the empty variant only under html.cart-empty. */
.c-cart__lede--empty { display: none; }
html.cart-empty .c-cart__lede--items { display: none; }
html.cart-empty .c-cart__lede--empty { display: inline; }

/* ---- Order-v2 confirmation page ---------------------------------------- */

/* Primitives still used by other templates */
.c-section__sub-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: var(--space-lg) 0 var(--space-sm); }
.c-data-table__num { text-align: right; white-space: nowrap; }
.c-def-list__row--grand { background: var(--c-bg-alt); font-weight: var(--fw-semibold); }
.mb-5 { margin-bottom: var(--space-lg); }
.text-center { text-align: center; }

/* ── Hero card ─────────────────────────────────────────────────────────── */
.c-order__hero {
  position: relative; overflow: hidden;
  background: var(--c-bg); border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  margin: var(--space-md) 0 var(--space-lg);
}
.c-order__hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--c-success) 0%, var(--c-accent) 100%);
}
.c-order__hero-row { display: flex; align-items: flex-start; gap: var(--space-md); flex-wrap: wrap; }
.c-order__hero-badge {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-success); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 0 0 4px rgba(46,125,79,.12);
}
.c-order__hero-badge svg { width: 24px; height: 24px; }
.c-order__hero-head { flex: 1 1 320px; min-width: 0; }
.c-order__hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-success); margin-bottom: 4px;
}
.c-order__hero-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-success);
}
.c-order__hero-title {
  font-size: var(--fs-xl); font-weight: var(--fw-black);
  line-height: 1.15; letter-spacing: -0.005em; color: var(--c-ink);
  margin-bottom: var(--space-xs);
}
.c-order__hero-lede { color: var(--c-ink-soft); max-width: 64ch; line-height: 1.5; }
.c-order__hero-lede strong { color: var(--c-ink); }
.c-order__hero-order-row {
  margin-top: var(--space-md);
  display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center;
  font-size: var(--fs-sm); color: var(--c-ink-soft);
}
.c-order__hero-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink);
  background: var(--c-bg-alt); border: 1px solid var(--c-line-soft);
  padding: 3px 8px; border-radius: var(--radius-sm);
}
.c-order__hero-dot { color: var(--c-line); }

@media (min-width: 768px) {
  .c-order__hero { padding: var(--space-2xl) var(--space-xl); }
  .c-order__hero-row { gap: var(--space-lg); }
  .c-order__hero-badge { width: 56px; height: 56px; }
  .c-order__hero-badge svg { width: 30px; height: 30px; }
  .c-order__hero-title { font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: -0.01em; }
}
@media (min-width: 1024px) {
  .c-order__hero-title { font-size: var(--fs-3xl); line-height: 1.05; letter-spacing: -0.015em; }
}

/* ── Body grid ─────────────────────────────────────────────────────────── */
.c-order__body { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 1024px) {
  .c-order__body { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

/* Card primitive (items + totals) */
.c-order__card {
  background: var(--c-bg); border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.c-order__card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-md); padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--c-line-soft);
}
.c-order__card-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.c-order__card-hint {
  font-size: var(--fs-xs); color: var(--c-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* Items table */
.c-order__items {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.c-order__items thead th {
  text-align: right; padding: 6px 8px;
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-muted); border-bottom: 1px solid var(--c-line);
}
.c-order__items thead th:first-child { text-align: left; }
.c-order__items tbody td {
  padding: 12px 8px; text-align: right; vertical-align: top;
  border-bottom: 1px solid var(--c-line-soft);
}
.c-order__items tbody tr:last-child td { border-bottom: 0; }
.c-order__items tbody td:first-child { text-align: left; }
.c-order__items-name { font-weight: 700; color: var(--c-ink); line-height: 1.3; }
.c-order__items-sku {
  display: block; color: var(--c-muted); font-size: var(--fs-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin-top: 2px;
}
@media (max-width: 640px) {
  .c-order__items thead { display: none; }
  .c-order__items,
  .c-order__items tbody,
  .c-order__items tr,
  .c-order__items td { display: block; width: 100%; }
  .c-order__items tr { padding: 10px 0; border-bottom: 1px solid var(--c-line-soft); }
  .c-order__items tr:last-child { border-bottom: 0; }
  .c-order__items td { padding: 4px 0; text-align: left; border: 0; }
  .c-order__items td[data-label]::before {
    content: attr(data-label);
    display: inline-block; width: 70px;
    font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--c-muted);
  }
  .c-order__items td:first-child::before { display: none; }
}

/* Totals rail */
.c-order__rail { display: flex; flex-direction: column; gap: var(--space-md); }
.c-order__totals { display: grid; gap: 0; font-size: var(--fs-sm); }
.c-order__totals-row {
  display: grid; grid-template-columns: 1fr auto;
  padding: 6px 0; gap: var(--space-md);
}
.c-order__totals-row + .c-order__totals-row { border-top: 1px solid var(--c-line-soft); }
.c-order__totals-k { color: var(--c-ink-soft); }
.c-order__totals-v { font-variant-numeric: tabular-nums; color: var(--c-ink); }
.c-order__totals-row--grand {
  margin-top: var(--space-sm); padding-top: var(--space-md);
  border-top: 2px solid var(--c-brand);
  align-items: baseline;
}
.c-order__totals-row--grand .c-order__totals-k {
  font-size: var(--fs-md); font-weight: 700; color: var(--c-ink);
}
.c-order__grand { display: flex; align-items: baseline; gap: 6px; }
.c-order__grand-cur { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600; }
.c-order__grand-amt {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; color: var(--c-ink);
}

/* ── What happens next ─────────────────────────────────────────────────── */
.c-order__next {
  background: var(--c-bg); border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-md); padding: var(--space-lg);
  margin-top: var(--space-lg);
}
.c-order__next-title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-bottom: var(--space-md);
}
.c-order__next-steps {
  display: grid; grid-template-columns: 1fr; gap: var(--space-md);
  counter-reset: step; list-style: none; padding: 0; margin: 0;
}
@media (min-width: 768px) { .c-order__next-steps { grid-template-columns: repeat(3, 1fr); } }
.c-order__next-step {
  display: flex; gap: var(--space-md); padding: var(--space-md);
  background: var(--c-bg-alt); border-radius: var(--radius-sm);
  border-left: 3px solid var(--c-accent);
}
.c-order__next-num {
  counter-increment: step;
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-brand); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: var(--fs-sm);
}
.c-order__next-num::before { content: counter(step); }
.c-order__next-body h4 {
  font-size: var(--fs-sm); font-weight: 700; margin: 0 0 2px;
  color: var(--c-ink); text-transform: uppercase; letter-spacing: 0.04em;
}
.c-order__next-body p { font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0; }

/* ── Trust strip ───────────────────────────────────────────────────────── */
.c-order__trust {
  margin-top: var(--space-lg);
  background: var(--c-bg-deep); color: #fff;
  border-radius: var(--radius-md); padding: var(--space-lg);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
}
@media (min-width: 768px) { .c-order__trust { grid-template-columns: repeat(4, 1fr); } }
.c-order__trust-item { display: flex; gap: 10px; align-items: flex-start; }
.c-order__trust-icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(225, 126, 26, 0.18); color: var(--c-accent);
  display: grid; place-items: center;
}
.c-order__trust-icon svg { width: 16px; height: 16px; }
.c-order__trust-k {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: 2px;
}
.c-order__trust-v { font-size: var(--fs-sm); color: #e6e8eb; line-height: 1.35; }

/* ── Help block ────────────────────────────────────────────────────────── */
.c-order__help {
  margin-top: var(--space-lg);
  display: grid; grid-template-columns: 1fr; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--c-bg); border: 1px dashed var(--c-line);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm); color: var(--c-ink-soft);
}
@media (min-width: 768px) {
  .c-order__help { grid-template-columns: 1fr auto; align-items: center; }
}
.c-order__help strong { color: var(--c-ink); }
.c-order__help a { color: var(--c-link); font-weight: 600; }
.c-order__help-links { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.c-order__help-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--c-bg-alt); border: 1px solid var(--c-line-soft);
  padding: 1px 6px; border-radius: var(--radius-sm); color: var(--c-ink);
}

/* ── Action bar ────────────────────────────────────────────────────────── */
.c-order__actions {
  margin-top: var(--space-lg);
  display: grid; gap: var(--space-sm); grid-template-columns: 1fr;
}
@media (min-width: 640px) { .c-order__actions { grid-template-columns: 1fr 1fr; } }
.c-order__cta {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 52px; padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-lg); font-weight: 700; border: 0;
  border-radius: var(--radius-md);
  background: var(--c-cta); color: var(--c-cta-ink); gap: 8px;
  text-decoration: none; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.c-order__cta:hover {
  background: #245d3d; color: var(--c-cta-ink);
  transform: translateY(-1px); text-decoration: none;
}
.c-order__cta:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; }
.c-order__cta--secondary {
  background: transparent; color: var(--c-brand);
  border: 2px solid var(--c-brand);
}
.c-order__cta--secondary:hover {
  background: var(--c-brand); color: var(--c-brand-ink); transform: translateY(-1px);
}
.c-order__cta svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ── Print-only receipt ────────────────────────────────────────────────── */
.c-receipt { display: none; }

.c-receipt__letterhead {
  display: grid; grid-template-columns: 1fr; gap: 0;
  padding-bottom: 14px; border-bottom: 2px solid #111;
  align-items: flex-end;
}
.c-receipt__brand { display: flex; align-items: center; gap: 12px; }
.c-receipt__mark {
  width: 48px; height: 48px; display: block; flex: 0 0 auto;
}
.c-receipt__name {
  font-family: "Open Sans", sans-serif;
  font-size: 18px; font-weight: 800; letter-spacing: 0.01em; color: #111;
}
.c-receipt__tagline {
  font-family: "Open Sans", sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #555;
}
.c-receipt__doc-title {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 18px 0 14px; gap: 12px;
}
.c-receipt__doc-title h2 {
  font-family: "Open Sans", sans-serif;
  font-size: 16px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: #111;
}
.c-receipt__doc-num {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; color: #111;
  padding: 4px 8px; border: 1px solid #111; border-radius: 2px;
}
.c-receipt__meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin: 14px 0 18px;
}
.c-receipt__meta-block { border-top: 1px solid #111; padding-top: 6px; }
.c-receipt__meta-label {
  font-family: "Open Sans", sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #555; margin-bottom: 4px;
}
.c-receipt__meta-row {
  display: grid; grid-template-columns: 92px 1fr; gap: 8px;
  padding: 2px 0; font-size: 11px;
}
.c-receipt__meta-row > span:first-child { color: #555; }
.c-receipt__meta-row > span:last-child { color: #111; font-variant-numeric: tabular-nums; }
.c-receipt__mono { font-family: ui-monospace, Consolas, monospace; }
.c-receipt__items {
  width: 100%; border-collapse: collapse;
  font-size: 11px; font-variant-numeric: tabular-nums;
  margin: 8px 0 0;
}
.c-receipt__items thead th {
  font-family: "Open Sans", sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-align: right; padding: 6px 8px;
  border-top: 2px solid #111; border-bottom: 1px solid #111; color: #111;
}
.c-receipt__items thead th:first-child { text-align: left; }
.c-receipt__items tbody td {
  padding: 8px; text-align: right;
  border-bottom: 1px solid #d8d8d8; vertical-align: top;
}
.c-receipt__items tbody td:first-child { text-align: left; }
.c-receipt__items-name { font-weight: 700; color: #111; }
.c-receipt__items-sku {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10px; color: #555; display: block; margin-top: 2px;
}
.c-receipt__totals {
  margin-top: 0; display: grid; grid-template-columns: 1fr 220px;
}
.c-receipt__notes { font-size: 10.5px; color: #333; padding: 12px 14px 0 0; }
.c-receipt__notes h3 {
  font-family: "Open Sans", sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #555; margin-bottom: 4px;
}
.c-receipt__notes p { margin: 0 0 4px; }
.c-receipt__totals-table {
  width: 100%; font-size: 11px;
  font-variant-numeric: tabular-nums; border-collapse: collapse;
}
.c-receipt__totals-table td { padding: 4px 0; }
.c-receipt__totals-table td:last-child { text-align: right; }
.c-receipt__totals-table tr.sub td:first-child { color: #555; }
.c-receipt__totals-table tr.grand td {
  font-family: "Open Sans", sans-serif;
  font-size: 13px; font-weight: 800; color: #111;
  padding-top: 8px; border-top: 2px solid #111;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.c-receipt__totals-table tr.paid td {
  font-family: "Open Sans", sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #2e7d4f; padding-top: 4px;
}
.c-receipt__stamp {
  position: absolute; top: 165px; right: 30px;
  font-family: "Open Sans", sans-serif;
  font-size: 22px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #2e7d4f; border: 2.5px solid #2e7d4f;
  padding: 4px 12px; transform: rotate(-10deg);
  opacity: 0.78; border-radius: 4px;
  pointer-events: none;
}
.c-receipt__footer {
  margin-top: 22px; padding-top: 12px; border-top: 1px solid #111;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: 10.5px; color: #111; letter-spacing: 0.02em;
}

@media print {
  @page { margin: 14mm 12mm; }
  body { background: #fff !important; }
  .c-order__hero,
  .c-order__body,
  .c-order__next,
  .c-order__trust,
  .c-order__help,
  .c-order__actions,
  .d-print-none { display: none !important; }
  .c-page { margin: 0; padding: 0; max-width: none; }
  .c-receipt {
    display: block; position: relative;
    width: 100%; max-width: 820px; margin: 0 auto;
    background: #fff; color: #111;
    padding: 24px 28px 18px;
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
    font-size: 12px; line-height: 1.4;
  }
  .c-receipt * { font-variant-ligatures: none; }
}

/* Utilities — Bootstrap-style helpers (CFCA has no Bootstrap CSS). */
.d-none { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Warranty-repair service-fee payment (sending-flashlight-for-repair-v2)
   Mobile-first: base = narrow column; widens at 48em.
   ========================================================================== */
.c-repair-pay {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-bg-alt);
  max-width: 32rem;
}

.c-repair-pay__fee {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--c-line);
}

.c-repair-pay__label { color: var(--c-ink-soft); font-weight: 600; }
.c-repair-pay__amount { color: var(--c-ink); font-weight: 700; font-size: 1.25rem; }

.c-repair-pay__spinner {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  color: var(--c-ink-soft);
}

.c-prose__hint { color: var(--c-muted); font-size: 0.9rem; margin: 0; }

.c-repair-address {
  font-weight: 600;
  line-height: var(--lh-body);
  margin: 0;
}

/* ============================================================================
   Serial-number / warranty check widget (support hub + reused anywhere)
   Mobile-first: input + button stack; row layout from 32em.
   ========================================================================== */
.c-serial-check {
  margin: 0 0 var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-bg-alt);
}

.c-serial-check__title { margin: 0 0 var(--space-2xs); }
.c-serial-check__lede { margin: 0 0 var(--space-md); color: var(--c-ink-soft); max-width: 46rem; }

.c-serial-check__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 32rem;
}

.c-serial-check__result { margin-top: var(--space-md); }
.c-serial-check__cta { margin: 0.75rem 0 0; }

@media (min-width: 32em) {
  .c-serial-check__form { flex-direction: row; align-items: stretch; }
  .c-serial-check__form .c-form__input { flex: 1 1 auto; }
  .c-serial-check__form .c-button { flex: 0 0 auto; }
}