/*
Theme Name: Healio Co
Theme URI: https://healioco.com
Author: Healio Co
Description: Dark performance-luxury commerce theme for Healio Co — forged wheels and ultra-high-performance tires. Built on semantic color tokens, fluid clamp() typography, an 8pt spatial system, and a WCAG 2.2 AA contrast floor.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: healio
Tags: e-commerce, dark, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Two tiers: primitives (raw ramp) -> semantic (role-mapped).
   Components reference ONLY semantic tokens.
   ========================================================================== */

:root {
  /* --- Primitives: neutral ramp (cool-cast near-black through white) --- */
  --n-950: oklch(0.13 0.006 260);
  --n-900: oklch(0.17 0.007 260);
  --n-850: oklch(0.21 0.008 260);
  --n-800: oklch(0.26 0.009 260);
  --n-700: oklch(0.34 0.010 260);
  --n-600: oklch(0.46 0.011 260);
  --n-500: oklch(0.58 0.012 260);
  --n-400: oklch(0.70 0.010 260);
  --n-300: oklch(0.80 0.008 260);
  --n-100: oklch(0.94 0.004 260);
  --n-050: oklch(0.97 0.003 260);

  /* --- Primitives: molten copper accent ramp --- */
  --cu-700: oklch(0.48 0.105 52);
  --cu-600: oklch(0.58 0.125 55);
  --cu-500: oklch(0.67 0.135 58);
  --cu-400: oklch(0.76 0.115 62);
  --cu-300: oklch(0.84 0.080 66);

  /* --- Primitives: semantic status --- */
  --ok-500: oklch(0.72 0.150 152);
  --warn-500: oklch(0.80 0.150 85);
  --err-500: oklch(0.65 0.190 25);

  /* --- Semantic: surfaces --- */
  --color-bg: var(--n-950);
  --color-surface: var(--n-900);
  --color-surface-2: var(--n-850);
  --color-surface-3: var(--n-800);

  /* --- Semantic: foreground --- */
  --color-fg: var(--n-050);
  --color-fg-muted: var(--n-400);
  --color-fg-subtle: var(--n-500);

  /* --- Semantic: accent --- */
  --color-accent: var(--cu-600);
  --color-accent-hover: var(--cu-700);
  --color-accent-text: var(--cu-400);
  --color-on-accent: var(--n-950);

  /* --- Semantic: lines + focus --- */
  --color-border: oklch(0.30 0.008 260);
  --color-border-strong: oklch(0.42 0.010 260);
  --color-focus: var(--cu-400);

  /* --- Semantic: status --- */
  --color-success: var(--ok-500);
  --color-warning: var(--warn-500);
  --color-error: var(--err-500);

  /* --- Type families (2 max, both variable) --- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Fluid type scale, ratio 1.25, base 16px (Utopia method) --- */
  --step--2: clamp(0.694rem, 0.68rem + 0.07vw, 0.75rem);
  --step--1: clamp(0.833rem, 0.81rem + 0.12vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.14rem + 0.3vw, 1.406rem);
  --step-2:  clamp(1.44rem, 1.34rem + 0.5vw, 1.758rem);
  --step-3:  clamp(1.728rem, 1.56rem + 0.84vw, 2.197rem);
  --step-4:  clamp(2.074rem, 1.8rem + 1.37vw, 2.746rem);
  --step-5:  clamp(1.8rem, 1.4rem + 2.6vw, 3.433rem);
  --step-6:  clamp(2rem, 1.5rem + 3.6vw, 4.292rem);
  --step-7:  clamp(2.25rem, 1.6rem + 4.6vw, 5.364rem);

  /* --- 8pt spacing scale --- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* --- Section rhythm --- */
  --section-y: clamp(3rem, 2rem + 6vw, 8rem);
  --gutter: clamp(1rem, 5vw, 4rem);
  --shell: 1360px;
  --measure: 68ch;

  /* --- Radius: sharp by brand mandate --- */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 2px;
  --radius-full: 9999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 320ms;

  /* --- Elevation: on dark, elevate with surface + border, not shadow --- */
  --elev-1: 0 1px 0 0 var(--color-border);
  --elev-2: 0 2px 8px -2px oklch(0 0 0 / 0.5), 0 8px 24px -8px oklch(0 0 0 / 0.4);

  --header-h: 76px;
}

/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-4); max-width: var(--measure); text-wrap: pretty; }

a { color: var(--color-accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-fg); }

ul, ol { padding-left: var(--space-5); }

hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-7) 0; }

::selection { background: var(--color-accent); color: var(--color-on-accent); }

/* Focus: >=2px, >=3:1, never clipped */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-4);
  transform: translateY(-200%);
  z-index: 999;
  background: var(--color-accent); color: var(--color-on-accent);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Rule #15: motion is opt-out */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 880px; }
.section { padding-block: var(--section-y); }
.prose { max-width: var(--measure); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* Intrinsic auto-fit grid: reflows with zero media queries (Rule #1, intrinsic layout) */
.grid-auto {
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid-auto--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

.split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   4. TYPE UTILITIES
   ========================================================================== */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
}
.eyebrow::before {
  content: ''; width: 28px; height: 1px; background: currentColor; flex: none;
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.025em;
}

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--color-fg-muted); max-width: 58ch; }
.muted { color: var(--color-fg-muted); }
.mono-spec {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   5. BUTTONS — five states each (Rule #13)
   ========================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-fg);
  --btn-bd: var(--color-border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: oklch(1 0 0 / 0.06); color: var(--color-fg); border-color: var(--color-fg-subtle); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Primary: the only filled accent element in its section (Rule #5) */
.btn--primary {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
  --btn-bd: var(--color-accent);
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.btn--ghost { --btn-bd: oklch(1 0 0 / 0.28); }
.btn--quiet { --btn-bd: transparent; padding-inline: var(--space-3); }
.btn--quiet:hover { background: oklch(1 0 0 / 0.06); }
.btn--lg { min-height: 56px; padding-inline: var(--space-7); font-size: var(--step-0); }
.btn--block { width: 100%; }

/* ==========================================================================
   6. FORMS (Rule #19)
   ========================================================================== */

label, .form-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-muted);
  margin-bottom: var(--space-2);
}

input[type='text'], input[type='email'], input[type='tel'], input[type='url'],
input[type='number'], input[type='search'], input[type='password'], textarea, select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 1rem; /* 16px floor: stops iOS zoom */
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
input:hover, textarea:hover, select:hover { border-color: var(--color-border-strong); }
input:focus, textarea:focus, select:focus { border-color: var(--color-accent); background: var(--color-surface-2); }
input::placeholder, textarea::placeholder { color: var(--color-fg-subtle); }
input[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--color-error); }
textarea { min-height: 160px; resize: vertical; line-height: 1.6; }

.field { margin-bottom: var(--space-5); }
.field__hint { font-size: var(--step--1); color: var(--color-fg-subtle); margin-top: var(--space-2); }
.field__error {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--step--1); color: var(--color-error); margin-top: var(--space-2);
}
.field__error::before { content: '\26A0'; } /* icon + color + text: never hue alone */
/* ==========================================================================
   7. HEADER + NAVIGATION (Rule #9: predictable nav, <=7 items, sticky <=12vh)
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: oklch(0.13 0.006 260 / 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--dur) var(--ease-out);
}
.site-header__inner {
  height: 100%;
  display: flex; align-items: center; gap: var(--space-5);
}

.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-fg); flex: none; }
.brand__mark { height: 34px; width: auto; }
.brand__text {
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 112%;
  font-size: var(--step-1);
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1;
}
.brand__text em { font-style: normal; color: var(--color-accent-text); }

.nav-primary { margin-left: auto; }
.nav-primary ul { display: flex; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.nav-primary li { position: relative; }
.nav-primary a {
  display: flex; align-items: center;
  min-height: 44px; padding: 0 var(--space-3);
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--color-fg-muted); text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.nav-primary a:hover { color: var(--color-fg); }
.nav-primary .current-menu-item > a,
.nav-primary [aria-current='page'] { color: var(--color-fg); }
.nav-primary .current-menu-item > a::after,
.nav-primary [aria-current='page']::after {
  content: ''; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 14px;
  height: 2px; background: var(--color-accent);
}

/* Submenu */
.nav-primary .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 200px;
  flex-direction: column; align-items: stretch; gap: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  padding: var(--space-2); box-shadow: var(--elev-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.nav-primary li:hover > .sub-menu,
.nav-primary li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.header-actions { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 44px; min-height: 44px;
  color: var(--color-fg-muted); background: none; border: 0; cursor: pointer;
  text-decoration: none; transition: color var(--dur) var(--ease-out);
}
.icon-btn:hover { color: var(--color-fg); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--color-accent); color: var(--color-on-accent);
  border-radius: var(--radius-full);
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nav-toggle { display: none; }

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .nav-primary {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--color-bg);
    padding: var(--space-6) var(--gutter);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  }
  .nav-primary[data-open='true'] {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  .nav-primary ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-primary a {
    min-height: 56px; padding: var(--space-3) 0;
    font-size: var(--step-1); color: var(--color-fg);
    border-bottom: 1px solid var(--color-border);
  }
  .nav-primary .current-menu-item > a::after { display: none; }
  .nav-primary .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 0 var(--space-4); background: none;
  }
  .nav-primary .sub-menu a { font-size: var(--step-0); color: var(--color-fg-muted); }
}

/* ==========================================================================
   8. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: clamp(560px, 78vh, 820px);
  display: grid; align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--color-bg) 2%, oklch(0.13 0.006 260 / 0.72) 45%, oklch(0.13 0.006 260 / 0.35) 100%),
    linear-gradient(to right, oklch(0.13 0.006 260 / 0.85), transparent 65%);
}
.hero__inner { position: relative; z-index: 1; padding-block: var(--space-9) var(--space-8); }
.hero__title { font-size: var(--step-7); margin-bottom: var(--space-5); max-width: 20ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }

/* Trust strip */
.trust {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.trust__grid { display: grid; gap: var(--space-5); padding-block: var(--space-6); }
@media (min-width: 760px) { .trust__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } }
.trust__item { display: flex; gap: var(--space-4); align-items: flex-start; }
.trust__item svg { width: 24px; height: 24px; color: var(--color-accent-text); flex: none; margin-top: 2px; }
.trust__item h3 {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.09em;
  margin: 0 0 var(--space-1); font-weight: 700;
}
.trust__item p { font-size: var(--step--1); color: var(--color-fg-muted); margin: 0; line-height: 1.5; }

/* ==========================================================================
   9. SECTION HEADERS
   ========================================================================== */

.section-head { margin-bottom: var(--space-7); }
.section-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
.section-head h2 { margin-bottom: var(--space-3); }
.section-head p { margin: 0; }

/* ==========================================================================
   10. CATEGORY + CONTENT CARDS
   ========================================================================== */

.cat-card {
  position: relative; display: block;
  min-height: 380px;
  border: 1px solid var(--color-border);
  overflow: hidden; text-decoration: none; color: var(--color-fg);
  background: var(--color-surface);
  transition: border-color var(--dur) var(--ease-out);
}
.cat-card:hover { border-color: var(--color-accent); }
.cat-card__media { position: absolute; inset: 0; }
.cat-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) { .cat-card:hover .cat-card__media img { transform: scale(1.04); } }
.cat-card__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(0.13 0.006 260 / 0.95) 8%, oklch(0.13 0.006 260 / 0.25) 70%);
}
.cat-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 380px; padding: var(--space-6); }
.cat-card__count { font-size: var(--step--1); color: var(--color-accent-text); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-display); font-weight: 600; }
.cat-card h3 { font-size: var(--step-3); margin: var(--space-3) 0 var(--space-2); text-transform: uppercase; }
.cat-card p { font-size: var(--step--1); color: var(--color-fg-muted); margin: 0; max-width: 34ch; }
.cat-card__cta { margin-top: var(--space-5); font-family: var(--font-display); font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; display: inline-flex; align-items: center; gap: var(--space-2); }
.cat-card__cta::after { content: '\2192'; transition: transform var(--dur) var(--ease-out); }
.cat-card:hover .cat-card__cta::after { transform: translateX(4px); }

/* Numbered step cards */
.step { border-top: 2px solid var(--color-accent); padding-top: var(--space-5); }
.step__num {
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
  font-size: var(--step-2); color: var(--color-accent-text);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.step h3 { font-size: var(--step-1); margin: var(--space-4) 0 var(--space-2); text-transform: uppercase; }
.step p { color: var(--color-fg-muted); margin: 0; font-size: var(--step--1); }

/* Stat block */
.stat__value {
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
  font-size: var(--step-5); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--step--1); color: var(--color-fg-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: var(--space-3); }

/* Testimonial */
.quote { border-left: 2px solid var(--color-accent); padding-left: var(--space-5); }
.quote blockquote { margin: 0; font-size: var(--step-1); line-height: 1.5; }
.quote figcaption { margin-top: var(--space-4); font-size: var(--step--1); color: var(--color-fg-muted); }
.quote figcaption strong { color: var(--color-fg); display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; }

/* FAQ */
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 700;
  transition: color var(--dur) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: var(--step-2); color: var(--color-accent-text); flex: none; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq summary:hover { color: var(--color-accent-text); }
.faq details > div { padding-bottom: var(--space-5); }
.faq details p { color: var(--color-fg-muted); margin: 0; }

/* CTA band */
.cta-band {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
}
.cta-band .shell { display: flex; flex-direction: column; align-items: center; }
.cta-band h2 { font-size: var(--step-5); max-width: 24ch; }
.cta-band p { margin-inline: auto; }

/* ==========================================================================
   11. FOOTER (fat footer = sitemap, Rule #9)
   ========================================================================== */

.site-footer { border-top: 1px solid var(--color-border); background: var(--color-bg); margin-top: var(--space-9); }
.site-footer__grid { display: grid; gap: var(--space-7); padding-block: var(--space-8); }
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-fg-muted); margin-bottom: var(--space-4); font-weight: 700;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--space-3); }
.site-footer a { color: var(--color-fg-muted); text-decoration: none; font-size: var(--step--1); }
.site-footer a:hover { color: var(--color-fg); text-decoration: underline; }
.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-5);
  font-size: var(--step--2); color: var(--color-fg-subtle);
}
.site-footer__legal p { margin: 0; max-width: none; }
.site-footer__disclaimer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-5);
  font-size: var(--step--2); color: var(--color-fg-subtle); line-height: 1.6;
}
.site-footer__disclaimer p { max-width: 90ch; margin: 0; }
/* ==========================================================================
   12. WOOCOMMERCE
   ========================================================================== */

.woocommerce-breadcrumb {
  font-size: var(--step--1); color: var(--color-fg-subtle);
  padding-block: var(--space-5); margin: 0;
}
.woocommerce-breadcrumb a { color: var(--color-fg-muted); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--color-accent-text); }

.shop-head { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-6); margin-bottom: var(--space-7); }
.shop-head h1 { font-size: var(--step-5); margin-bottom: var(--space-3); }

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-info, .woocommerce-error {
  display: flex; align-items: center; gap: var(--space-3);
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-6);
  font-size: var(--step--1);
}
.woocommerce-error { border-left-color: var(--color-error); }
.woocommerce-error::before { content: '\26A0'; }
.woocommerce-message::before { content: '\2713'; color: var(--color-success); }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }

/* --- Product grid --- */
ul.products {
  display: grid; gap: clamp(1rem, 2vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  list-style: none; margin: 0; padding: 0;
}
ul.products li.product {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
ul.products li.product:hover { border-color: var(--color-border-strong); }
@media (hover: hover) { ul.products li.product:hover { transform: translateY(-2px); } }

ul.products li.product > a:first-of-type { text-decoration: none; color: inherit; display: block; }
ul.products li.product .product-thumb {
  position: relative; display: block;
  aspect-ratio: 4 / 3; /* reserve space: CLS < 0.1 */
  background: var(--color-surface-2);
  overflow: hidden;
}
ul.products li.product .product-thumb img { width: 100%; height: 100%; object-fit: cover; }
ul.products li.product .product-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; gap: var(--space-3); }

.product-brand {
  font-family: var(--font-display); font-size: var(--step--2); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent-text);
}
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display); font-size: var(--step-0); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.2;
  margin: 0; padding: 0; color: var(--color-fg);
}
.product-specs {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: 0; padding: 0; list-style: none;
}
.product-specs li {
  font-family: var(--font-body); font-size: var(--step--2);
  font-variant-numeric: tabular-nums; letter-spacing: 0.03em;
  color: var(--color-fg-muted);
  border: 1px solid var(--color-border);
  padding: 3px var(--space-2);
}
ul.products li.product .price {
  margin-top: auto;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  color: var(--color-fg); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: var(--space-2);
}
ul.products li.product .price del { color: var(--color-fg-subtle); font-size: var(--step--1); font-weight: 400; }
ul.products li.product .price ins { text-decoration: none; color: var(--color-accent-text); }
.price-unit { font-family: var(--font-body); font-size: var(--step--2); font-weight: 400; color: var(--color-fg-subtle); text-transform: uppercase; letter-spacing: 0.08em; }

ul.products li.product .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--space-3) var(--space-5);
  background: transparent; color: var(--color-fg);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
ul.products li.product .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover {
  background: oklch(1 0 0 / 0.06); border-color: var(--color-fg-subtle); color: var(--color-fg);
}
.woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit.alt, .woocommerce .single_add_to_cart_button {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent);
}
.woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
  background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-on-accent);
}
.woocommerce .button.loading { opacity: 0.6; }
.woocommerce .button[disabled], .woocommerce .button:disabled { opacity: 0.45; cursor: not-allowed; }

span.onsale, .healio-badge {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2;
  background: var(--color-accent); color: var(--color-on-accent);
  font-family: var(--font-display); font-size: var(--step--2); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-lg);
}
.healio-badge--demo { background: var(--color-surface-3); color: var(--color-fg-muted); border: 1px solid var(--color-border-strong); left: auto; right: var(--space-3); }

/* --- Sorting / result count --- */
.woocommerce-shop-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border);
}
.woocommerce-result-count { margin: 0; font-size: var(--step--1); color: var(--color-fg-subtle); }
.woocommerce-ordering select { min-width: 220px; }

/* --- Single product --- */
.single-product__layout { display: grid; gap: var(--space-7); }
@media (min-width: 900px) { .single-product__layout { grid-template-columns: 1.15fr 1fr; gap: var(--space-8); align-items: start; } }
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery img { width: 100%; background: var(--color-surface-2); }
.woocommerce-product-gallery__wrapper { margin: 0; }
.flex-control-thumbs { display: flex; gap: var(--space-2); list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.flex-control-thumbs li { width: 84px; }
.flex-control-thumbs img { border: 1px solid var(--color-border); cursor: pointer; }
.flex-control-thumbs img.flex-active { border-color: var(--color-accent); }

.summary.entry-summary .product_title { font-size: var(--step-4); text-transform: uppercase; margin-bottom: var(--space-4); }
.summary .price {
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 700;
  color: var(--color-fg); font-variant-numeric: tabular-nums;
  margin: 0 0 var(--space-5); display: block;
}
.summary .price del { color: var(--color-fg-subtle); font-size: var(--step-1); font-weight: 400; }
.summary .price ins { text-decoration: none; color: var(--color-accent-text); }
.woocommerce-product-details__short-description { color: var(--color-fg-muted); margin-bottom: var(--space-6); }

form.cart { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; margin-bottom: var(--space-6); }
form.cart .quantity input[type='number'] { width: 96px; min-height: 48px; text-align: center; }
form.cart .single_add_to_cart_button { flex: 1 1 220px; min-height: 48px; }

.product_meta { font-size: var(--step--1); color: var(--color-fg-subtle); border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.product_meta > span { display: block; margin-bottom: var(--space-2); }
.product_meta a { color: var(--color-fg-muted); }

/* Spec table */
.woocommerce-tabs { margin-top: var(--space-8); border-top: 1px solid var(--color-border); }
.woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--color-border); }
.woocommerce-tabs ul.tabs li a {
  display: block; padding: var(--space-4) var(--space-5);
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-fg-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--color-fg); border-bottom-color: var(--color-accent); }
.woocommerce-tabs .panel { padding-top: var(--space-6); }
.woocommerce-tabs h2 { font-size: var(--step-2); }

table.shop_attributes, table.shop_table, .woocommerce table {
  width: 100%; border-collapse: collapse; font-size: var(--step--1);
}
table.shop_attributes th, table.shop_table th, .woocommerce table th {
  text-align: left; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--step--2);
  color: var(--color-fg-muted); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border); vertical-align: top;
}
table.shop_attributes td, table.shop_table td, .woocommerce table td {
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
  color: var(--color-fg); vertical-align: top;
}
table.shop_attributes p { margin: 0; }
.woocommerce table.shop_table { border: 1px solid var(--color-border); }

/* Wide tables must scroll inside themselves, never the body */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Cart / Checkout --- */
.woocommerce-cart-form { margin-bottom: var(--space-7); }
.cart_totals, .woocommerce-checkout-review-order {
  background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-6);
}
.cart_totals h2, .woocommerce-checkout-review-order h3 { font-size: var(--step-2); }
.woocommerce .cart-collaterals { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .woocommerce .cart-collaterals { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; } }
.checkout.woocommerce-checkout { display: grid; gap: var(--space-7); }
@media (min-width: 1000px) { .checkout.woocommerce-checkout { grid-template-columns: 1.3fr 1fr; align-items: start; } }
#order_review_heading { grid-column: 2; }
.woocommerce form .form-row { margin-bottom: var(--space-5); }
.woocommerce form .form-row label { display: block; }
.select2-container--default .select2-selection--single {
  min-height: 48px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--color-fg); line-height: 46px; padding-left: var(--space-4); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }
.select2-dropdown { background: var(--color-surface); border-color: var(--color-border); color: var(--color-fg); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--color-accent); color: var(--color-on-accent); }

/* Pagination */
.woocommerce-pagination { margin-top: var(--space-8); }
.woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; border: 0; }
.woocommerce-pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px;
  border: 1px solid var(--color-border); color: var(--color-fg-muted); text-decoration: none;
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 600;
}
.woocommerce-pagination .page-numbers.current { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.woocommerce-pagination a.page-numbers:hover { border-color: var(--color-fg-subtle); color: var(--color-fg); }

/* Empty + loading states (Rule #14) */
.healio-empty { text-align: center; padding-block: var(--space-9); border: 1px dashed var(--color-border); }
.healio-empty h2 { font-size: var(--step-2); }
.healio-empty p { margin-inline: auto; color: var(--color-fg-muted); }
.skeleton { background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-2) 50%, var(--color-surface) 75%); background-size: 200% 100%; animation: sk 1.4s ease-in-out infinite; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Related products */
.related.products, .up-sells { margin-top: var(--space-9); border-top: 1px solid var(--color-border); padding-top: var(--space-7); }
.related.products > h2, .up-sells > h2 { font-size: var(--step-3); margin-bottom: var(--space-6); }

/* Sidebar filters */
.shop-layout { display: grid; gap: var(--space-7); }
@media (min-width: 1000px) { .shop-layout { grid-template-columns: 260px 1fr; gap: var(--space-8); align-items: start; } }
.shop-sidebar { border: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-5); }
.shop-sidebar h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-fg-muted); margin-bottom: var(--space-4); }
.shop-sidebar ul { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.shop-sidebar li + li { margin-top: var(--space-2); }
.shop-sidebar a { color: var(--color-fg-muted); text-decoration: none; font-size: var(--step--1); display: flex; justify-content: space-between; gap: var(--space-3); min-height: 32px; align-items: center; }
.shop-sidebar a:hover { color: var(--color-accent-text); }

/* WP core alignment + blocks */
.alignwide { max-width: 1100px; margin-inline: auto; }
.alignfull { width: 100%; }
.wp-block-image img { border: 1px solid var(--color-border); }
.entry-content > * { margin-bottom: var(--space-5); }
/* Demo-catalog strip + spec-plate placeholder */
.healio-demo-strip {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font-size: var(--step--2);
  line-height: 1.5;
  text-align: center;
  padding: var(--space-3) var(--gutter);
}
.healio-demo-strip span {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px var(--space-2);
  margin-right: var(--space-2);
}
.healio-plate { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hero with no photography yet: geometry + gradient carry it */
.hero--typeset {
  background:
    radial-gradient(120% 90% at 78% 8%, oklch(0.58 0.125 55 / 0.20), transparent 58%),
    radial-gradient(90% 70% at 8% 100%, oklch(0.34 0.010 260 / 0.55), transparent 60%),
    var(--color-bg);
}
.hero--typeset::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--color-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 78%);
  opacity: 0.5;
}
.healio-search { display: grid; gap: var(--space-3); max-width: 520px; }
@media (min-width: 600px) { .healio-search { grid-template-columns: 1fr auto; align-items: end; }
  .healio-search label { grid-column: 1 / -1; } }
/* Contact page */
.contact-layout { display: grid; gap: var(--space-7); }
@media (min-width: 960px) { .contact-layout { grid-template-columns: 1fr 320px; gap: var(--space-8); align-items: start; } }
.fitment-form { max-width: 560px; }
.contact-aside { border: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-6); }
.contact-aside h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-fg-muted); margin: 0 0 var(--space-3); }
.contact-aside h2 + p, .contact-aside h2 + ul { margin-top: 0; }
.contact-aside > * + h2 { margin-top: var(--space-6); }
.contact-aside p, .contact-aside li { font-size: var(--step--1); }
.contact-aside ul { list-style: none; padding: 0; margin: 0; }
.contact-aside li + li { margin-top: var(--space-2); }

/* Honeypot: hidden from people, still reachable by bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Notices */
.notice {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--step--1);
  max-width: 560px;
}
.notice--ok { border-left-color: var(--color-success); }
.notice--err { border-left-color: var(--color-error); }
/* ==========================================================================
   13. RESPONSIVE HARDENING
   Grid and flex items default to min-width:auto, so a single long word can
   push a track wider than the viewport. Pin the tracks to minmax(0, ...).
   ========================================================================== */

.hero { grid-template-columns: minmax(0, 1fr); }
.shell, .hero__inner, .split > *, .grid-auto > *, ul.products > li.product { min-width: 0; }
.display, .hero__title, h1, h2, h3 { overflow-wrap: break-word; }

/* Tap targets: WCAG 2.2 SC 2.5.8 (>=44x44, >=8px apart) */
.brand { min-height: 44px; }
ul.products li.product .woocommerce-loop-product__title a {
  display: block;
  padding-block: var(--space-1);
}
.site-footer a, .contact-aside a, .shop-sidebar a {
  display: inline-block;
  padding-block: var(--space-2);
}
.site-footer__legal a, .woocommerce-breadcrumb a { padding-block: 0; }

/* Keep the sticky header inside the 10-12% viewport-height budget on short screens */
@media (max-height: 600px) {
  :root { --header-h: 60px; }
}

/* Long spec tables scroll inside themselves, never the page */
.woocommerce-tabs .panel table.shop_attributes,
.woocommerce table.shop_table_responsive { display: block; overflow-x: auto; }
@media (min-width: 700px) {
  .woocommerce-tabs .panel table.shop_attributes,
  .woocommerce table.shop_table_responsive { display: table; }
}
/* The title link is the product's only keyboard-reachable control, so it carries
   the 44px target requirement rather than relying on the image link. */
ul.products li.product .woocommerce-loop-product__title a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-1);
}
/* Footer / sidebar nav links were landing at 37px. Lists of navigation links are
   not "inline in a sentence", so they take the full 44px target. */
.site-footer nav a, .contact-aside ul a, .shop-sidebar a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0;
}
.site-footer li + li, .contact-aside li + li { margin-top: 0; }
.contact-aside p a { display: inline-flex; align-items: center; min-height: 44px; }