/* ============================================================
   VITE — v2 stylesheet
   Light editorial theme, faithful to the reference (Shopify Dawn).
   Base: 1rem = 10px (html font-size 62.5%).

   Structure
     1. Design tokens
     2. Reset & base elements
     3. Layout primitives (page-width, sections, full-bleed)
     4. Typography scale
     5. Components
          .button   .header   .hero   .section-head
          .promo    .card     .collection / .category
          .video-band   .riders   .posts   .trust   .footer
          .drawer
     6. Utilities & motion
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* --- Color (RGB triplets so they compose with rgb()/alpha) --- */
  --c-bg:        255 255 255;
  --c-fg:        18 18 18;
  --c-surface:   244 244 245;          /* card image backdrop  */
  --c-surface-2: 245 245 245;          /* subtle hover fill     */
  --c-dark:      17 17 17;             /* dark tile fallback bg */
  --c-footer:    33 33 36;             /* footer bg — dark grey, distinct from black band */
  --c-accent:    255 77 0;             /* VITE signal orange    */
  --c-on-dark:   255 255 255;

  /* Alpha helpers built on the palette */
  --line:        rgb(var(--c-fg) / 0.08);
  --line-strong: rgb(var(--c-fg) / 0.15);
  --fg-60:       rgb(var(--c-fg) / 0.78);   /* body copy — darkened for readability */
  --fg-55:       rgb(var(--c-fg) / 0.72);
  --fg-50:       rgb(var(--c-fg) / 0.6);
  --on-dark-80:  rgb(var(--c-on-dark) / 0.8);
  --on-dark-75:  rgb(var(--c-on-dark) / 0.75);
  --on-dark-60:  rgb(var(--c-on-dark) / 0.6);
  --on-dark-55:  rgb(var(--c-on-dark) / 0.55);
  --on-dark-10:  rgb(var(--c-on-dark) / 0.1);

  /* --- Typography --- */
  --font-sans:  "Inter", -apple-system, system-ui, sans-serif;
  --fw-light:   300;
  --fw-medium:  500;
  --fw-bold:    600;

  --text-xs:   1.1rem;
  --text-sm:   1.2rem;
  --text-base: 1.3rem;
  --text-md:   1.4rem;
  --text-lg:   1.5rem;
  --text-xl:   1.8rem;
  --text-2xl:  2rem;
  --text-3xl:  2.2rem;
  --text-4xl:  2.8rem;
  --display:   3.4rem;                 /* hero, mobile  */
  --display-lg: 5.2rem;                /* hero, desktop */

  /* --- Spacing scale (rem) --- */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;
  --space-9: 6rem;
  --space-section: 7.2rem;             /* vertical rhythm between sections */

  /* --- Layout --- */
  --pad-inline: 1.5rem;                /* page gutter — scales up at breakpoints */
  --tile-gap: 1rem;                    /* product/riders grid gap */

  /* --- Borders & radius --- */
  --radius: 4px;
  --hairline: 1px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 0.2s;
  --dur: 0.3s;
  --dur-slow: 1s;
  --dur-image: 1.2s;

  /* --- Elevation (z-index scale) --- */
  --z-overlay: 2;
  --z-header: 40;
  --z-drawer: 60;
}

@media (min-width: 750px) { :root { --pad-inline: 3rem; } }
@media (min-width: 990px) { :root { --pad-inline: 4rem; } }
@media (min-width: 1400px){ :root { --pad-inline: 5rem; } }

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 62.5%;                    /* 1rem = 10px */
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;                  /* regular — light (300) was too thin to read */
  font-size: var(--text-lg);
  line-height: 1.65;
  color: rgb(var(--c-fg));
  background: rgb(var(--c-bg));
}

img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

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

/* Centred content column with responsive gutter. */
.page-width {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

/* Padded section — owns its own top/bottom rhythm (no margin collapse).
   Stacked sections collapse the inner edge so the gap stays single. */
.section { padding-block: var(--space-section); }
.section + .section { padding-top: 0; }
/* tinted section — sets it apart from the white default */
.section--surface { background: rgb(var(--c-surface)); }
.section + .section--surface { padding-top: var(--space-section); } /* tinted band keeps its own top padding */
.section--surface + .section { padding-top: var(--space-section); } /* restore gap after a tinted block */

/* Full-bleed band — edge-to-edge, flush against neighbours. */
.bleed { width: 100%; }

/* ============================================================
   4. TYPOGRAPHY SCALE
   ============================================================ */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.h0 { font-size: var(--display); line-height: 1.1; }
.h1 { font-size: 2.6rem; }
.h2 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
.h3 { font-size: 1.7rem; }

@media (min-width: 750px) {
  .h0 { font-size: var(--display-lg); }
  .h1 { font-size: 4rem; }
  .h2 { font-size: 2.4rem; }
}

.eyebrow {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
}

/* ============================================================
   5. COMPONENTS
   ============================================================ */

/* ---- Button ---- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 4.5rem;
  padding-inline: var(--space-6);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: rgb(var(--c-on-dark));
  background: rgb(var(--c-fg));
  border: var(--hairline) solid rgb(var(--c-fg));
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.button:hover { opacity: 0.82; }

.button--secondary { color: rgb(var(--c-fg)); background: rgb(var(--c-bg)); }
.button--secondary:hover { color: rgb(var(--c-on-dark)); background: rgb(var(--c-fg)); opacity: 1; }

.button--inverse { color: rgb(var(--c-fg)); background: rgb(var(--c-bg)); border-color: rgb(var(--c-bg)); }

.button--outline-light { color: rgb(var(--c-on-dark)); background: transparent; border-color: rgb(var(--c-on-dark) / 0.7); }
.button--outline-light:hover { color: rgb(var(--c-fg)); background: rgb(var(--c-bg)); opacity: 1; }

.button--sm { min-height: 4rem; padding-inline: 2.2rem; font-size: var(--text-base); }

/* ---- Header ---- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgb(var(--c-bg));
  border-bottom: var(--hairline) solid var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 7rem;
}
.header__logo {
  display: flex;
  align-items: center;
}
.header__logo img { display: block; height: 2.42rem; width: auto; }
@media (min-width: 990px) { .header__logo img { height: 2.86rem; } }
.header__nav { display: none; align-items: center; gap: 3.2rem; }
.header__nav a {
  position: relative;
  padding-block: 0.6rem;
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
}
.header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: rgb(var(--c-fg));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.header__nav a:hover::after { transform: scaleX(1); }
.header__nav a[aria-current="page"]::after { transform: scaleX(1); }   /* active page underline */
.header__actions { display: flex; align-items: center; gap: var(--space-1); }
.header__cur {
  display: flex;
  align-items: center;
  margin-left: 0.6rem;
  white-space: nowrap;
}
.header__cur select {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: rgb(var(--c-fg));
  background: none;
  border: 0;
  padding: 0.4rem 0.4rem;
  cursor: pointer;
}
.header__cur select:focus { outline: none; }
.header__cur select:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; }
.header__burger { display: grid; }

/* ---- Header search panel (slides down under the header bar) ---- */
.header__search {
  position: fixed;
  left: 0;
  right: 0;
  top: 7rem;                        /* header height (mobile) */
  z-index: var(--z-drawer);
}
@media (min-width: 990px) { .header__search { top: 8rem; } }  /* header height (desktop) */
.header__search[hidden] { display: none; }
.header__search-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.4);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.header__search.open .header__search-overlay { opacity: 1; }
.header__search-form {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
  background: rgb(var(--c-bg));
  border-bottom: var(--hairline) solid var(--line);
  transform: translateY(-100%);
  transition: transform var(--dur) var(--ease);
}
.header__search.open .header__search-form { transform: translateY(0); }
.header__search-icon { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; color: rgb(var(--c-fg) / 0.55); }
.header__search-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  color: rgb(var(--c-fg));
  background: none;
  border: 0;
  padding: var(--space-2) 0;
}
.header__search-input::placeholder { color: rgb(var(--c-fg) / 0.45); }
.header__search-input:focus { outline: none; }
.header__search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.header__search-submit { flex: 0 0 auto; }
.header__search-cancel { flex: 0 0 auto; }

/* Global keyboard-focus indicator + skip link (a11y) */
:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; }
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -4rem;
  z-index: var(--z-drawer);
  padding: var(--space-2) var(--space-4);
  background: rgb(var(--c-fg));
  color: rgb(var(--c-bg));
  border-radius: 4px;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-3); }

@media (min-width: 990px) {
  .header__inner { height: 8rem; }
  .header__nav { display: flex; }
  .header__cur { margin-left: var(--space-3); }
  .header__burger { display: none; }
}

/* ---- Desktop mega dropdown (Products) ---- */
.nav-has-mega { position: relative; display: flex; align-items: center; }
.nav-mega__link { display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-mega__caret {
  width: 1.4rem;
  height: 1.4rem;
  transition: transform var(--dur) var(--ease);
}
.nav-has-mega:hover .nav-mega__caret,
.nav-has-mega:focus-within .nav-mega__caret { transform: rotate(180deg); }
/* transparent bridge so the cursor can cross the gap into the panel without losing :hover */
.nav-has-mega::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 12rem;
  height: 2rem;
}
.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0.6rem);
  display: flex;
  gap: var(--space-7);
  margin-top: 1.8rem;
  padding: var(--space-6);
  background: rgb(var(--c-bg));
  border: var(--hairline) solid var(--line);
  box-shadow: 0 24px 60px rgb(var(--c-fg) / 0.10);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
  z-index: var(--z-header);
}
.nav-has-mega:hover .mega,
.nav-has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mega__group { display: flex; flex-direction: column; min-width: 14rem; }
.mega__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.mega__title:hover { text-decoration: underline; }
.mega__item {
  padding-block: 0.5rem;
  font-size: var(--text-base);
  color: rgb(var(--c-fg) / 0.7);
  transition: color var(--dur) var(--ease);
}
.mega__item:hover { color: rgb(var(--c-fg)); }

/* Icon button (shared: header actions, sec-nav) */
.iconbtn {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  color: rgb(var(--c-fg));
  background: none;
  border: 0;
  cursor: pointer;
}
.iconbtn svg { width: 2rem; height: 2rem; }

/* ---- Hero ---- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 86vh;
  min-height: 56rem;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.05); }

/* ---- Hero slideshow (crossfade + Ken Burns) ---- */
.hero__slideshow { overflow: hidden; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.5s var(--ease);
  will-change: opacity, transform;
}
.hero__slide.is-active {
  opacity: 1;
  animation: hero-kenburns 2.5s linear forwards;
}
@keyframes hero-kenburns {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.16) translate(-2%, -1.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; transform: none; }
  .hero__slide.is-active { animation: none; transform: none; }
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.1) 0%, transparent 40%, rgb(0 0 0 / 0.55) 100%);
}
.hero__content {
  position: relative;
  z-index: var(--z-overlay);
  width: 100%;
  padding-bottom: var(--space-8);
  color: rgb(var(--c-on-dark));
}
.hero__eyebrow { margin-bottom: var(--space-3); opacity: 0.9; }
.hero__title { max-width: none; margin-bottom: 0; color: rgb(var(--c-on-dark)); white-space: nowrap; }
.hero__seo {
  margin-top: var(--space-4);
  font-size: clamp(1.8rem, 1.6rem + 0.6vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--on-dark-80);
}
@media (max-width: 749px) { .hero__seo { white-space: normal; } }
@media (max-width: 749px) {
  .hero__title { white-space: normal; }
  .hero__title br { display: none; }
}

/* ---- Section head (title + carousel nav) ---- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.section-nav { display: flex; gap: 0.6rem; }
.section-nav button {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  background: rgb(var(--c-bg));
  border: var(--hairline) solid var(--line-strong);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.section-nav button:hover { background: rgb(var(--c-surface-2)); }
/* Disabled at the ends of a carousel — still visible, but clearly inert. */
.section-nav button:disabled { opacity: 0.35; cursor: default; }
.section-nav button:disabled:hover { background: rgb(var(--c-bg)); }
.section-nav svg { width: 1.6rem; height: 1.6rem; }

/* ---- Overlay-tile content (shared by promo / collection / category) ----
   Image fills the tile; text sits bottom-left, padding matches the page gutter
   so it aligns with hero content. */
.tile__body {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: var(--pad-inline);
  color: rgb(var(--c-on-dark));
  text-align: left;
}
.tile__label { font-size: var(--text-sm); font-weight: var(--fw-medium); letter-spacing: 0.06em; opacity: 0.9; }
.tile__title { font-weight: var(--fw-bold); margin-top: var(--space-1); }
.tile__cta { margin-top: var(--space-4); align-self: flex-start; }

/* ---- Promo (2-up, full-bleed, zero gap) ---- */
.promo-grid { display: grid; grid-template-columns: 1fr; }
.promo { position: relative; aspect-ratio: 16 / 12; overflow: hidden; }
.promo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-image) var(--ease); }
.promo:hover img { transform: scale(1.04); }
.promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.35) 0%, transparent 45%, rgb(0 0 0 / 0.25) 100%);
}
.promo .tile__title { font-size: var(--text-3xl); }
@media (min-width: 750px) {
  .promo-grid { grid-template-columns: 1fr 1fr; }
  .promo { aspect-ratio: 3 / 4; }
}

/* ---- Product card (flat) ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tile-gap);
}

/* Carousel variant: same cards, but laid out in a single scrolling row driven
   by the .section-nav arrows (main.js). Columns become fixed-width tracks so
   the row can overflow; scroll-snap makes a drag land on a card edge. */
.cards--carousel {
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--tile-gap)) / 2);
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Room for the card's focus ring, which would otherwise be clipped by
     overflow; the negative margin keeps the row visually flush. */
  padding-block: 2px;
  margin-block: -2px;
}
.cards--carousel::-webkit-scrollbar { display: none; }
.cards--carousel > .card { scroll-snap-align: start; }
.card { position: relative; display: flex; flex-direction: column; }
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: rgb(var(--c-surface));
  overflow: hidden;
}
/* both images stack in the same box; primary visible, secondary fades in on hover.
   contain keeps landscape product shots fully in view (no crop) */
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: opacity var(--dur) var(--ease), transform var(--dur-image) var(--ease);
}
.card__media-alt { opacity: 0; }
.card:hover .card__media-alt { opacity: 1; }                 /* secondary fades in */
/* primary only fades out when there's a secondary to replace it — wishlist
   cards render a single image, so without this guard they'd blank on hover */
.card:hover .card__media:has(.card__media-alt) img:not(.card__media-alt) { opacity: 0; }
.card:hover .card__media img { transform: scale(1.04); }
.card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-overlay);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--c-fg));
  background: rgb(var(--c-bg));
  border: var(--hairline) solid rgb(var(--c-fg));
  border-radius: var(--radius);
}
.card__badge--accent { color: rgb(var(--c-on-dark)); background: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); }
.card__fav {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  color: rgb(var(--c-fg));
  background: none;
  border: 0;
  cursor: pointer;
}
.card__fav svg {
  width: 2rem;
  height: 2rem;
  transition: fill var(--dur-fast) var(--ease);
}
.card__fav:hover svg { fill: rgb(var(--c-fg)); }
.card__info { padding: var(--space-4) 0.2rem 0; }
.card__name { font-size: var(--text-lg); font-weight: var(--fw-medium); letter-spacing: -0.01em; }
.card__sub { margin-top: 0.2rem; font-size: var(--text-base); color: var(--fg-55); }
.card__price { margin-top: var(--space-2); font-size: var(--text-lg); font-weight: var(--fw-bold); }

.cards-footer { margin-top: var(--space-6); text-align: center; }

/* ---- Long-form content pages (Shipping, Returns, Warranty) ----
   Measure-constrained column; the body is admin-authored HTML, so the styles
   target bare tags rather than expecting the author to add classes. */
.page-width--narrow { max-width: 76rem; }
.prose { margin-top: var(--space-5); }
.prose > * + * { margin-top: var(--space-4); }
.prose p,
.prose li { font-size: var(--text-lg); line-height: 1.7; }
.prose h2 { font-size: var(--text-2xl); font-weight: var(--fw-bold); margin-top: var(--space-6); }
.prose h3 { font-size: var(--text-xl); font-weight: var(--fw-bold); margin-top: var(--space-5); }
.prose ul,
.prose ol { padding-left: 2.2rem; }
.prose li + li { margin-top: var(--space-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: rgb(var(--c-fg)); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: rgb(var(--c-accent)); }
.prose table { width: 100%; border-collapse: collapse; }
.prose th,
.prose td { padding: var(--space-3); border-bottom: var(--hairline) solid var(--line); text-align: left; }

/* ---- Category filter bar (products listing) ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.filter-bar__link {
  padding: 0.7rem 1.6rem;
  border: var(--hairline) solid var(--line-strong);
  font-size: var(--text-base);
  color: rgb(var(--c-fg));
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.filter-bar__link:hover,
.filter-bar__link:focus-visible { background: rgb(var(--c-surface-2)); }
.filter-bar__link.is-active {
  background: rgb(var(--c-fg));
  color: rgb(var(--c-bg));
  border-color: rgb(var(--c-fg));
}

@media (min-width: 750px) {
  .cards { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
  /* 4 across, so a 5th card is what makes the row scrollable. */
  .cards--carousel {
    grid-template-columns: none;
    grid-auto-columns: calc((100% - (var(--space-4) * 3)) / 4);
  }
}

/* ---- Collection / Category tiles (full-bleed, zero gap) ---- */
.tile-grid { display: grid; grid-template-columns: 1fr; }
.tile { position: relative; overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-image) var(--ease); }
.tile:hover img { transform: scale(1.05); }
.tile::after { content: ""; position: absolute; inset: 0; }

.collection-grid { grid-template-columns: 1fr; }
.collection { aspect-ratio: 4 / 5; }
.collection img { filter: grayscale(40%); transition: transform var(--dur-image) var(--ease), filter var(--dur) var(--ease); }
.collection:hover img { filter: grayscale(0%); }
.collection::after { background: linear-gradient(180deg, rgb(0 0 0 / 0.2) 0%, transparent 40%, rgb(0 0 0 / 0.45) 100%); }
.collection .tile__title { font-size: var(--text-4xl); }

.category-grid { grid-template-columns: repeat(2, 1fr); }
.category { aspect-ratio: 3 / 4; background: rgb(var(--c-dark)); }
.category::after { background: linear-gradient(180deg, rgb(0 0 0 / 0.1) 0%, transparent 35%, rgb(0 0 0 / 0.7) 100%); }
.category .tile__label { font-size: var(--text-xs); letter-spacing: 0.05em; opacity: 0.8; }
.category .tile__title { font-size: var(--text-2xl); margin-top: 0.2rem; }

@media (min-width: 750px) {
  .collection-grid { grid-template-columns: repeat(3, 1fr); }
  .category-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Video band (We are VITE) ---- */
.video-band {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 70rem;
  color: rgb(var(--c-on-dark));
  overflow: hidden;
}
.video-band__media { position: absolute; inset: 0; }
.video-band__media img,
.video-band__media video { width: 100%; height: 100%; object-fit: cover; }
.video-band__inner {
  position: relative;
  z-index: var(--z-overlay);
  width: 100%;
  padding-block: var(--space-9);
}
.video-band__title { font-size: 3rem; color: rgb(var(--c-on-dark)); }
.video-band__title b { font-style: italic; }
/* inline official logo, sized to sit on the heading baseline */
.video-band__logo { display: inline-block; height: 0.78em; width: auto; vertical-align: baseline; margin-left: 0.15em; }
.video-band__sub { max-width: 46ch; margin-top: var(--space-3); font-size: var(--text-lg); color: var(--on-dark-80); }
.video-band__cta { display: flex; flex-wrap: wrap; gap: var(--tile-gap); margin-top: 2.8rem; }
@media (min-width: 750px) { .video-band { min-height: 82rem; } }
/* Mobile: same problem as the hero — a 70rem tall box over a landscape frame
   makes `cover` zoom right into the middle. Let the band take an image-shaped
   box instead, and bias the crop upward so the rider stays in frame. */
@media (max-width: 749px) {
  .video-band {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  .video-band__media img,
  .video-band__media video { object-position: 50% 40%; }
}

/* ---- Riders (instagram, 3-up) ---- */
.riders { display: grid; grid-template-columns: 1fr; gap: var(--tile-gap); }
.rider { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.rider img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.rider:hover img { transform: scale(1.05); }
.rider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgb(0 0 0 / 0.55));
}
.rider__meta { position: absolute; left: var(--space-4); bottom: var(--space-3); z-index: var(--z-overlay); color: rgb(var(--c-on-dark)); }
.rider__handle { font-size: var(--text-md); font-weight: var(--fw-bold); }
.rider__likes { font-size: var(--text-sm); opacity: 0.85; }
@media (min-width: 750px) { .riders { grid-template-columns: repeat(3, 1fr); } }

/* ---- Blog (3-up) ---- */
.posts { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
.post { display: flex; flex-direction: column; }
.post__media { aspect-ratio: 1 / 1; background: rgb(var(--c-surface)); overflow: hidden; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.post:hover .post__media img { transform: scale(1.04); }
.post__date { margin-top: var(--space-4); font-size: var(--text-sm); letter-spacing: 0.03em; color: var(--fg-50); }
.post__title { margin-top: 0.6rem; font-size: var(--text-xl); font-weight: var(--fw-bold); }
.post__excerpt { margin-top: var(--space-2); font-size: var(--text-md); color: var(--fg-60); }
.post__more {
  display: inline-block;
  margin-top: var(--space-3);
  padding-bottom: 0.2rem;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  border-bottom: var(--hairline) solid rgb(var(--c-fg));
}
@media (min-width: 750px) { .posts { grid-template-columns: repeat(3, 1fr); } }

/* ---- Trust bar + distributor band ---- */
/* keeps the top section gap but sits flush against the footer (protband is full-bleed) */
.trust.section { padding-bottom: 0; }
.trust { border-top: var(--hairline) solid rgb(var(--c-fg) / 0.1); }
.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--tile-gap);
  padding-block: var(--space-8);
  text-align: center;
}
.trust__item svg { display: block; width: 2.6rem; height: 2.6rem; margin: 0 auto var(--space-3); stroke: rgb(var(--c-fg)); }
.trust__item b { display: block; font-size: var(--text-md); font-weight: var(--fw-bold); }
@media (min-width: 750px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }

.protband {
  padding: 2.2rem;
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-align: center;
  color: rgb(var(--c-on-dark));
  background: rgb(var(--c-fg));
}
.protband a { font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Footer ---- */
.footer { padding: var(--space-9) 0 var(--space-6); color: rgb(var(--c-on-dark)); background: rgb(var(--c-footer)); }
/* mobile: newsletter full-width on top, Shop hidden, Help + VITE side by side */
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-5); }
.footer__grid > :first-child { grid-column: 1 / -1; }
.footer__col--shop { display: none; }
.footer h4 { margin-bottom: var(--space-4); font-size: var(--text-base); font-weight: var(--fw-bold); letter-spacing: 0.04em; }
.footer__logo { display: inline-block; margin-bottom: var(--space-5); }
.footer__logo img { display: block; height: 2.8rem; width: auto; }
.footer__lead { margin-bottom: var(--space-2); font-size: var(--text-lg); font-weight: var(--fw-bold); }
.footer__note { max-width: 48ch; margin-bottom: var(--space-4); font-size: var(--text-base); color: var(--on-dark-60); }
.footer__sub { display: flex; max-width: 42rem; }
.footer__sub input {
  flex: 1;
  height: 4.6rem;
  padding-inline: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: rgb(var(--c-fg));
  background: rgb(var(--c-bg));
  border: 0;
}
.footer__sub input::placeholder { color: rgb(var(--c-fg) / 0.5); }
.footer__sub button {
  height: 4.6rem;
  padding-inline: 2.4rem;
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  background: rgb(var(--c-bg));
  border: 0;
  border-left: var(--hairline) solid rgb(var(--c-fg) / 0.15);
  cursor: pointer;
}
.footer__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.footer__sub-msg { margin-top: var(--space-3); font-size: var(--text-base); color: var(--on-dark-75); }
.footer__sub-msg.is-error { color: rgb(var(--c-accent)); }
.footer ul li { margin-bottom: var(--space-3); }
.footer ul a { font-size: var(--text-md); color: var(--on-dark-75); transition: color var(--dur-fast) var(--ease); }
.footer ul a:hover { color: rgb(var(--c-on-dark)); }
/* icons only now — the trademark note moved to the bottom legal row */
.footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tile-gap); margin-block: 2.2rem; }
/* Trademark notice sits under the signup form, above the social icons.
   Same size/tone as .footer__copy so the small print reads as one voice. */
.footer__tm { margin-top: var(--space-3); font-size: var(--text-base); line-height: 1.5; color: var(--on-dark-55); }
.footer__social a { display: grid; place-items: center; width: 4rem; height: 4rem; background: var(--on-dark-10); }
.footer__social svg { width: 2rem; height: 2rem; fill: rgb(var(--c-on-dark)); }
/* Outlined glyphs (Instagram) opt out of the blanket fill so the lens ring and
   camera body stay visible instead of flooding into one solid shape. */
.footer__social svg[fill="none"] { fill: none; color: rgb(var(--c-on-dark)); }
.footer__copy { font-size: var(--text-base); color: var(--on-dark-55); }
/* Legal links sit inline in the copyright line — same muted tone as the
   surrounding text, brightening on hover like the other footer links. */
.footer__copy a { color: inherit; text-decoration: none; }
.footer__copy a:hover,
.footer__copy a:focus-visible { color: rgb(var(--c-bg)); text-decoration: underline; }

@media (min-width: 750px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
  .footer__grid > :first-child { grid-column: auto; }   /* newsletter back to 1 col */
  .footer__col--shop { display: block; }                 /* restore Shop on desktop */
  /* drop the link columns so their headings line up with the newsletter lead */
  .footer__col { padding-top: 7.3rem; }
}

/* ---- Mobile drawer ---- */
/* NOTE: `.drawer` is the shared base for three things — the mobile nav
   (#drawer), the quote drawer (.drawer--quote) and the size guide
   (.drawer--sizeguide). Rules that must NOT reach the variants are scoped to
   `#drawer` on purpose. Do not lift them onto `.drawer`. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: rgb(var(--c-bg));
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s var(--dur);
}
.drawer.open { transform: none; visibility: visible; transition: transform var(--dur) var(--ease); }

/* Nav drawer only — longer, softer slide than the utility drawers. */
#drawer {
  overflow: hidden;
  overscroll-behavior: contain;
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.42s;
}
#drawer.open {
  transition:
    transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}
@supports (height: 100dvh) { #drawer { height: 100dvh; } }

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 7rem;
  padding-inline: var(--pad-inline);
  border-bottom: var(--hairline) solid var(--line);
}
#drawer .drawer__top { flex: none; }

/* The scroll container. Without min-height:0 a flex child refuses to shrink
   and the menu overflows instead of scrolling on short screens.
   The gutter is deliberately wider than --pad-inline (1.5rem): at page-gutter
   width the display-size rows hug the screen edge and read as cramped. */
#drawer nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--space-6) var(--space-5)
           calc(var(--space-7) + env(safe-area-inset-bottom, 0px));
}
#drawer .drawer__top { padding-inline: var(--space-5); }

/* Primary rows — the display voice of the menu. */
#drawer nav > a,
.drawer-acc__toggle {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding-block: var(--space-4);
  font-family: inherit;
  font-size: clamp(3.2rem, 11vw, 4.4rem);
  font-weight: var(--fw-bold);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: rgb(var(--c-fg));
  background: none;
  border: 0;
  border-bottom: var(--hairline) solid rgb(var(--c-fg) / 0.08);
  text-align: left;
  cursor: pointer;
}
.drawer-acc { border-bottom: 0; }
.drawer-acc__toggle { justify-content: space-between; }
.drawer-acc.open .drawer-acc__toggle { border-bottom-color: transparent; }

/* Active page — accent rule, not a colour swap. */
#drawer nav > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 3.2rem;
  height: 2px;
  background: rgb(var(--c-accent));
}

/* Staggered entrance for the primary rows. */
#drawer nav > a,
#drawer nav > .drawer-acc {
  opacity: 0;
  transform: translateY(1.4rem);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#drawer.open nav > a,
#drawer.open nav > .drawer-acc { opacity: 1; transform: none; }
#drawer.open nav > :nth-child(1) { transition-delay: 0.08s; }
#drawer.open nav > :nth-child(2) { transition-delay: 0.13s; }
#drawer.open nav > :nth-child(3) { transition-delay: 0.18s; }
#drawer.open nav > :nth-child(4) { transition-delay: 0.23s; }
#drawer.open nav > :nth-child(5) { transition-delay: 0.28s; }
#drawer.open nav > :nth-child(6) { transition-delay: 0.33s; }

body.no-scroll { overflow: hidden; }

/* ---- Drawer accordion (Products sub-menu) ---- */
.drawer-acc__toggle svg {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  color: rgb(var(--c-fg) / 0.45);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    color var(--dur) var(--ease);
}
.drawer-acc.open .drawer-acc__toggle svg {
  transform: rotate(180deg);
  color: rgb(var(--c-accent));
}

/* grid-template-rows animates height without a magic max-height and without
   the layout thrash of animating height directly.
   The panel keeps the row's bottom rule, but only while open — a collapsed
   panel is 0 tall yet its border still paints, which doubled the line under
   the toggle. Ownership of the rule hands over between the two. */
.drawer-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  border-bottom: var(--hairline) solid transparent;
  transition: grid-template-rows 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-acc.open .drawer-acc__panel {
  grid-template-rows: 1fr;
  border-bottom-color: rgb(var(--c-fg) / 0.08);
}
.drawer-acc__panel > * { overflow: hidden; min-height: 0; }
/* Sub-menu block sits 10px in from the parent rows, so the level reads as
   nested instead of continuing the parent's line. */
.drawer-acc__inner { padding: 0 0 0 10px; }
.drawer-acc__inner > :last-child { padding-bottom: var(--space-5); }

/* Group heading — small and tracked out. The counterweight that makes the
   display rows above read as hierarchy rather than a flat list. */
.drawer-acc__title {
  display: block;
  padding-top: var(--space-5);
  padding-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--c-fg) / 0.42);
}
.drawer-acc__title:first-child { padding-top: var(--space-4); }
.drawer-acc__item {
  display: block;
  padding-block: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  color: rgb(var(--c-fg) / 0.82);
  transition: color var(--dur-fast) var(--ease);
}
.drawer-acc__item:hover,
.drawer-acc__item:active { color: rgb(var(--c-accent)); }

/* Utility row at the foot of the nav drawer.
   NOT `.drawer__foot` — that class belongs to the quote drawer. */
.drawer__util {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid rgb(var(--c-fg) / 0.08);
}
.drawer__util a {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--c-fg) / 0.55);
}

/* Short screens — keep the character, shrink the frame. */
@media (max-height: 700px) {
  #drawer .drawer__top { height: 5.6rem; }
  #drawer nav { padding-top: var(--space-4); }
  #drawer nav > a,
  .drawer-acc__toggle {
    padding-block: var(--space-3);
    font-size: clamp(2.6rem, 8vw, 3.2rem);
  }
  .drawer-acc__item { font-size: var(--text-lg); }
}

@media (prefers-reduced-motion: reduce) {
  #drawer,
  #drawer nav > a,
  #drawer nav > .drawer-acc,
  .drawer-acc__panel,
  .drawer-acc__toggle svg { transition-duration: 0.01ms; }
  #drawer nav > a,
  #drawer nav > .drawer-acc { opacity: 1; transform: none; }
}

/* ============================================================
   5b. SUB-PAGE COMPONENTS (Technology / About / Store Locator)
   ============================================================ */

/* ---- Page hero (compact sub-page banner) ---- */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 38rem;
  overflow: hidden;
  color: rgb(var(--c-on-dark));
}
.page-hero--tall { min-height: 50rem; }
/* Matches the .split row height so the hero and the first content section line
   up as one block. Only on desktop — below 850px the split row is auto-height,
   so the hero keeps its normal size. */
@media (min-width: 850px) {
  .page-hero--split { min-height: 60rem; }
}
/* Opt out of the default grayscale treatment — keeps the shot's real colour. */
.page-hero--colour .page-hero__media img { filter: none; }
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.05); }
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.25) 0%, transparent 40%, rgb(0 0 0 / 0.75) 100%);
}
.page-hero__inner { position: relative; z-index: var(--z-overlay); width: 100%; padding-block: var(--space-8); }
.page-hero__title { color: rgb(var(--c-on-dark)); max-width: 18ch; }
.page-hero__lead { max-width: 52ch; margin-top: var(--space-4); font-size: var(--text-lg); color: var(--on-dark-80); }

/* Wide variant (About Us): the client's headline must hold one line and the
   lead must not exceed three. Desktop only — on phones the narrow measure
   wins and both are allowed to wrap naturally. */
@media (min-width: 990px) {
  .page-hero--wide .page-hero__title { max-width: none; white-space: nowrap; }
  .page-hero--wide .page-hero__lead { max-width: 74ch; }
}

/* ---- Breadcrumb ---- */
.breadcrumb { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--text-sm); letter-spacing: 0.03em; color: var(--on-dark-60); }
.breadcrumb a:hover { color: rgb(var(--c-on-dark)); }
.breadcrumb span { opacity: 0.5; }

/* ---- Editorial split (image + text, alternating) ----
   Both columns stretch to equal height; media is a cover background. */
.split { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; }
.split__media {
  position: relative;
  overflow: hidden;
  background: rgb(var(--c-surface));
}
/* Mobile: plain static image — the image itself gives the cell its height (same as
   the hero <img>, which renders fine on iPhone). Avoids the aspect-ratio + absolute
   image combo that collapses to 0 height on iOS Safari and hides the image. */
.split__media img { display: block; width: 100%; height: auto; }
.split__body { display: flex; flex-direction: column; justify-content: center; padding: var(--space-7) var(--pad-inline); }
.split__index { font-size: var(--text-base); font-weight: var(--fw-bold); letter-spacing: 0.12em; color: rgb(var(--c-accent)); margin-bottom: var(--space-3); }
.split__title { margin-bottom: var(--space-4); }
@media (max-width: 749px) { .split__title-br { display: none; } }

/* ---- Contact Us page ----
   Two columns: the copy (heading, addresses) beside the supporting photo,
   matching the layout the client supplied. Single column below 900px so the
   photo sits under the copy rather than being squeezed beside it. */
.contact-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
.contact-copy__title { margin-bottom: var(--space-5); }
.contact-copy__lead { font-size: var(--text-lg); line-height: 1.6; }
/* Mobile: natural height — the image gives the cell its size. Desktop (below)
   it stretches to match the copy column instead. */
.contact-media img { display: block; width: 100%; height: auto; }

/* Address blocks. Deliberately flat — a rule, not a card — to match the
   editorial tone of the rest of the site. */
.contact-card { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 2px solid rgb(var(--c-fg)); }
.contact-card__title { font-size: var(--text-xl); font-weight: var(--fw-bold); }
.contact-card__text { margin-top: var(--space-2); font-size: var(--text-md); color: var(--fg-60); }
.contact-card__mail {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: rgb(var(--c-accent));
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-card__mail:hover { text-decoration-thickness: 2px; }
.contact-note { margin-top: var(--space-7); font-size: var(--text-md); color: var(--fg-55); }
.contact-note a { color: rgb(var(--c-fg)); text-decoration: underline; text-underline-offset: 3px; }
.contact-note a:hover { color: rgb(var(--c-accent)); }
@media (min-width: 900px) {
  /* align-items defaults to stretch, so the media cell is as tall as the copy
     column; the image covers it rather than letterboxing. */
  .contact-layout { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  .contact-media img { height: 100%; object-fit: cover; }
}
/* ---- Kickstart CTA band (full-width, dark) ---- */
.kickstart {
  position: relative;
  padding: 80px var(--pad-inline);
  background: rgb(var(--c-fg)) url("../lifestyle/kickstart.webp") center / cover no-repeat;
  color: rgb(var(--c-on-dark));
  overflow: hidden;
}
/* dark overlay so the copy stays legible over the photo */
.kickstart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--c-fg) / 0.72), rgb(var(--c-fg) / 0.82));
  pointer-events: none;
}
.kickstart__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
}
.kickstart__index {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--c-accent));
  margin-bottom: var(--space-4);
}
.kickstart__title { color: rgb(var(--c-on-dark)); margin: 0 0 200px; }
.kickstart__ride {
  display: flex;
  align-items: center;
  gap: 0.28em;
  font-size: 2.6rem;               /* mobile: match the .h1 title size */
  font-weight: var(--fw-bold);
  color: rgb(var(--c-on-dark));
  margin-bottom: var(--space-5);
}
.kickstart__ride-mark { color: rgb(var(--c-accent)); }
.kickstart__ride-logo { display: inline-block; height: 0.82em; width: auto; }
.kickstart__body { display: flex; flex-direction: column; align-items: flex-start; }
.kickstart__text { color: var(--on-dark-75); width: 100%; }
.kickstart__text + .kickstart__text { margin-top: var(--space-4); }
.kickstart__cta { margin-top: var(--space-6); align-self: flex-start; }
@media (min-width: 990px) {
  .kickstart { padding: 100px clamp(4rem, 6vw, 9rem); }
  .kickstart__ride { font-size: 40px; }
  .kickstart__title { margin-bottom: 0; }
  .kickstart__inner {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(4rem, 6vw, 9rem);
    row-gap: var(--space-6);
    align-items: start;              /* both columns start from the top → Ride with VITE lines up with the title */
  }
}
/* inline image inside the content body (03–05: image under the title) */
.split__img { margin-bottom: var(--space-5); overflow: hidden; }
.split__img img { display: block; width: 100%; height: auto; }
.split__text { color: var(--fg-60); }
.split__text + .split__text { margin-top: var(--space-3); }
.split__list { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.split__list li { position: relative; padding-left: 2.4rem; color: var(--fg-60); }
.split__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.9rem;
  width: 1.2rem; height: var(--hairline);
  background: rgb(var(--c-accent));
}
@media (min-width: 850px) {
  /* every split row is the same height (≥60rem) for a consistent scroll rhythm */
  .split { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(60rem, auto); }
  .split--reverse .split__media { order: 2; }
  .split__body,
  .split__panel { padding: var(--space-9) clamp(4rem, 6vw, 9rem); }
  .split__media { height: 100%; }   /* fills the row height */
  /* desktop: image absolute-fills the tall row (container has a real height here) */
  .split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* ---- Stats row ---- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-5); text-align: center; }
.stat__num { font-size: var(--display); font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.03em; }
.stat__num span { color: rgb(var(--c-accent)); }
.stat__label { margin-top: var(--space-3); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-55); }
@media (min-width: 750px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* ---- Split colour panel (solid dark side instead of an image) ----
   Used in the About story row — same layout as The Mission, but bg colour. */
.split__panel {
  display: flex;
  align-items: center;
  padding: var(--space-7) var(--pad-inline);
  background: rgb(var(--c-fg));
  color: rgb(var(--c-on-dark));
}
@media (min-width: 850px) {
  .split__panel { padding: var(--space-9) clamp(4rem, 6vw, 9rem); }   /* identical to .split__body */
}
.split__panel .stats {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-7) var(--space-6);
  text-align: left;
  width: 100%;
}
.split__panel .stat__num { font-size: 4rem; color: rgb(var(--c-on-dark)); }
.split__panel .stat__num span { color: rgb(var(--c-accent)); }
.split__panel .stat__label { color: var(--on-dark-60); }

/* ---- Generic section intro (centered title block) ---- */
.intro { max-width: 60ch; }
.intro--center { max-width: none; margin-inline: auto; text-align: center; }
@media (min-width: 600px) { .intro--center .h1 { white-space: nowrap; } }
.intro__eyebrow { font-size: var(--text-base); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--c-accent)); margin-bottom: var(--space-4); }
.intro__text { margin-top: var(--space-4); color: var(--fg-60); }

/* ---- Store locator ---- */
.locator { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.locator__panel { display: flex; flex-direction: column; }
.locator__search { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.locator__search input {
  flex: 1;
  height: 4.8rem;
  padding-inline: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: rgb(var(--c-fg));
  background: rgb(var(--c-bg));
  border: var(--hairline) solid var(--line-strong);
}
.locator__search input:focus { outline: none; border-color: rgb(var(--c-fg)); }
/* padding-top, not a margin on the first group: the list has a border-top, and
   without it the first country label sits flush against that rule while every
   later one gets the .store-group + .store-group gap. */
.locator__list { display: flex; flex-direction: column; max-height: 56rem; overflow-y: auto; padding-top: var(--space-5); border-top: var(--hairline) solid var(--line); }
.store-group + .store-group { margin-top: var(--space-5); }
.store { padding: var(--space-5); margin-bottom: var(--space-3); border: var(--hairline) solid var(--line); border-radius: var(--radius); }
.store__country { font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--c-accent)); margin-bottom: var(--space-3); }
.store__name { font-size: var(--text-lg); font-weight: var(--fw-medium); }
.store__addr { margin-top: 0.4rem; font-size: var(--text-md); color: var(--fg-55); }
.store__links { display: flex; gap: var(--space-4); margin-top: var(--space-3); }
.store__links a { font-size: var(--text-base); font-weight: var(--fw-bold); border-bottom: var(--hairline) solid rgb(var(--c-fg)); padding-bottom: 0.2rem; }
.locator__map {
  position: relative;
  min-height: 42rem;
  background: rgb(var(--c-surface));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.locator__map img { width: 100%; height: 100%; object-fit: cover; }
.locator__note { margin-top: var(--space-5); padding: var(--space-6); background: rgb(var(--c-surface)); }
.locator__note p { font-size: var(--text-lg); font-weight: var(--fw-medium); }
.locator__note p + p { margin-top: var(--space-2); }
.locator__note a { color: rgb(var(--c-accent)); font-weight: var(--fw-bold); }
@media (min-width: 990px) {
  .locator { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); align-items: start; }
}

/* ============================================================
   5e. BECOME A DISTRIBUTOR
   ============================================================ */

/* ---- Steps (numbered process) ---- */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-8); counter-reset: step; }
.step { padding-top: var(--space-5); border-top: 2px solid rgb(var(--c-fg)); }
.step__num { display: block; font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: rgb(var(--c-accent)); }
.step__title { margin-top: var(--space-3); font-size: var(--text-xl); font-weight: var(--fw-bold); }
.step__text { margin-top: var(--space-2); font-size: var(--text-md); color: var(--fg-60); }
@media (min-width: 750px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }

/* ---- Apply form layout ---- */
.apply { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
.apply__intro .intro__text { max-width: 44ch; }
.apply__intro a { font-weight: var(--fw-bold); }
.apply__form { display: grid; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.field label { font-size: var(--text-base); font-weight: var(--fw-medium); letter-spacing: 0.02em; color: var(--fg-60); }
.field input, .field select, .field textarea {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: rgb(var(--c-fg));
  background: rgb(var(--c-bg));
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.2rem var(--space-4);
}
.field input, .field select { min-height: 4.8rem; }
.field textarea { resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: rgb(var(--c-fg) / 0.45); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgb(var(--c-fg)); }
.apply__submit { margin-top: var(--space-2); justify-self: start; }
.apply__note { font-size: var(--text-base); color: var(--fg-55); }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 990px) {
  .apply { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-9); align-items: start; }
}

/* ============================================================
   5f. STORIES (article + listing)
   ============================================================ */

/* ---- Article header (centered) ---- */
.article__header { padding-top: var(--space-8); text-align: center; }
.article__crumb { justify-content: center; color: var(--fg-50); }
.article__crumb a:hover { color: rgb(var(--c-fg)); }
.article__eyebrow { font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--c-accent)); margin-bottom: var(--space-3); }
.article__title { max-width: 30ch; margin-inline: auto; font-size: var(--text-4xl); line-height: 1.12; }
.article__standfirst { max-width: 56ch; margin-top: var(--space-4); margin-inline: auto; font-size: var(--text-xl); line-height: 1.5; color: var(--fg-60); }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); font-size: var(--text-base); color: var(--fg-55); }
.article__author { font-weight: var(--fw-bold); color: rgb(var(--c-fg)); }
.article__dot { opacity: 0.5; }
@media (min-width: 750px) { .article__title { font-size: 4.4rem; } }

/* ---- Hero image ---- */
.article__hero { margin-top: var(--space-7); }
.article__hero img { width: 100%; max-height: 64rem; object-fit: cover; }
.article__hero figcaption { padding: var(--space-3) var(--pad-inline) 0; font-size: var(--text-sm); color: var(--fg-50); text-align: center; }

/* ---- Article body — readable measure ---- */
.article__body { max-width: 72rem; padding-top: var(--space-8); padding-bottom: var(--space-8); }
.article__body p { font-size: 1.8rem; line-height: 1.75; color: rgb(var(--c-fg) / 0.88); }
.article__body p + p { margin-top: var(--space-5); }
.article__lead { font-size: 2rem !important; line-height: 1.6 !important; color: rgb(var(--c-fg)) !important; }
.article__body h2 { margin-top: var(--space-8); margin-bottom: var(--space-4); font-size: var(--text-3xl); }
.article__body a:not(.button) { color: rgb(var(--c-fg)); font-weight: var(--fw-medium); border-bottom: 1.5px solid rgb(var(--c-accent)); }
.article__body a:not(.button):hover { color: rgb(var(--c-accent)); }
.article__list { margin: var(--space-5) 0; display: grid; gap: var(--space-3); }
.article__list li { position: relative; padding-left: 2.6rem; font-size: 1.8rem; line-height: 1.6; color: rgb(var(--c-fg) / 0.88); }
.article__list li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: 1.4rem; height: 2px; background: rgb(var(--c-accent)); }

.article__quote {
  position: relative;
  margin: var(--space-7) 0;
  padding-left: var(--space-5);
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: rgb(var(--c-fg));
}
.article__quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 2.8rem;
  height: 2px;
  background: rgb(var(--c-accent));
}

/* inline CTA + share */
.article__cta { margin-top: var(--space-8); padding: var(--space-7); background: rgb(var(--c-surface)); border-radius: var(--radius); }
.article__cta h3 { font-size: var(--text-xl); font-weight: var(--fw-bold); }
.article__cta p { font-size: var(--text-md) !important; line-height: 1.6 !important; margin: var(--space-3) 0 var(--space-5) !important; color: var(--fg-60) !important; }
.article__share { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--hairline) solid var(--line); }
.article__share span { font-size: var(--text-base); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-55); }
.article__share a { display: grid; place-items: center; width: 4rem; height: 4rem; border: var(--hairline) solid var(--line-strong); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.article__share a:hover { background: rgb(var(--c-surface)); border-color: rgb(var(--c-fg)); }
.article__share svg { width: 1.8rem; height: 1.8rem; fill: rgb(var(--c-fg)); }
.article__share svg[stroke] { fill: none; stroke: rgb(var(--c-fg)); }

/* ---- Featured post (listing top) ---- */
.feature-post { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.feature-post__media { aspect-ratio: 16 / 10; overflow: hidden; background: rgb(var(--c-surface)); }
.feature-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-image) var(--ease); }
.feature-post:hover .feature-post__media img { transform: scale(1.03); }
.feature-post__body { display: flex; flex-direction: column; justify-content: center; }
.feature-post__tag { font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--c-accent)); }
.feature-post__title { margin-top: var(--space-3); }
.feature-post__excerpt { margin-top: var(--space-4); max-width: 52ch; font-size: var(--text-lg); color: var(--fg-60); }
.feature-post__meta { margin-top: var(--space-4); font-size: var(--text-base); color: var(--fg-55); }
@media (min-width: 850px) {
  .feature-post { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items: stretch; }
  .feature-post__media { aspect-ratio: auto; height: 100%; min-height: 36rem; }
}

/* listing reuses .posts but allows 3 rows; keep section gaps tight between the two .section blocks */
.posts--archive { row-gap: var(--space-7); }
@media (min-width: 750px) { .posts--archive { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   5c. SINGLE PRODUCT (PDP)
   ============================================================ */
.pdp__crumb { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); font-size: var(--text-sm); letter-spacing: 0.03em; color: var(--fg-50); }
.pdp__crumb a:hover { color: rgb(var(--c-fg)); }
.pdp__crumb span { opacity: 0.5; }
.pdp__crumb-current { color: rgb(var(--c-fg)); }

.pdp__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }

/* Gallery */
.pdp__main { position: relative; aspect-ratio: 4 / 3; background: rgb(var(--c-surface)); overflow: hidden; }
.pdp__main img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pdp__main .vplayer { width: 100%; height: 100%; }

/* Clean video player — no native controls, one centred play button.
   .is-playing (set by product.js) hides the button while the clip runs. */
.vplayer { position: relative; width: 100%; height: 100%; }
.vplayer video { width: 100%; height: 100%; object-fit: contain; display: block; background: rgb(var(--c-surface)); }
.vplayer__btn {
  position: absolute; inset: 0; margin: auto;
  width: 6.4rem; height: 6.4rem; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(var(--c-bg) / 0.92); color: rgb(var(--c-fg));
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.28);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.vplayer__btn svg { width: 2.8rem; height: 2.8rem; margin-left: 0.3rem; }
.vplayer__btn:hover { transform: scale(1.06); background: rgb(var(--c-bg)); }
.vplayer.is-playing .vplayer__btn { opacity: 0; pointer-events: none; }
/* Hover-to-reveal only on real-mouse devices — on touch, the tap that starts
   playback leaves a sticky :hover, which would keep the button covering the clip
   until you tap elsewhere. (hover: hover) excludes touch, so it stays hidden. */
@media (hover: hover) and (pointer: fine) {
  .vplayer.is-playing:hover .vplayer__btn { opacity: 1; pointer-events: auto; }
}
/* ---- Gallery prev/next + autoplay progress ----
   The controls are siblings of .pdp__main, not children: renderMain() clears
   #pdpMain when swapping image↔video and would delete them. They are therefore
   positioned against .pdp__gallery and offset by the thumb strip's height, so
   they still centre on the image. JS-only — hidden for single-slide variants. */
/* .pdp__stage wraps only the viewer, so absolute controls centre on the image
   rather than on the gallery (whose height includes the thumb strip). */
.pdp__stage { position: relative; }
.pdp__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: grid; place-items: center;
  width: 4rem; height: 4rem; padding: 0;
  color: rgb(var(--c-fg));
  background: rgb(var(--c-bg) / 0.82);
  border: var(--hairline) solid rgb(var(--c-fg) / 0.12);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pdp__nav svg { width: 2rem; height: 2rem; }
.pdp__nav--prev { left: var(--space-3); }
.pdp__nav--next { right: var(--space-3); }
.pdp__nav:hover { background: rgb(var(--c-bg)); }
/* Revealed on hover for mouse users; always visible on touch, where there is
   no hover to reveal them with. */
.pdp__stage:hover .pdp__nav,
.pdp__nav:focus-visible { opacity: 1; }
@media (hover: none) {
  .pdp__nav { opacity: 1; }
}

/* Autoplay progress — a hairline that fills over the slide duration. Width is
   driven by product.js; transition keeps it smooth without a per-frame timer. */
.pdp__progress {
  /* Foot of the viewer — .pdp__stage ends where the image does. */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 2px; background: rgb(var(--c-fg) / 0.10);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.pdp__progress.is-running { opacity: 1; }
.pdp__progress span { display: block; width: 0; height: 100%; background: rgb(var(--c-accent)); }

@media (prefers-reduced-motion: reduce) {
  .pdp__progress { display: none; }
}

.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tile-gap); margin-top: var(--tile-gap); }
.pdp__thumb { position: relative; padding: 0; aspect-ratio: 1 / 1; background: rgb(var(--c-surface)); border: var(--hairline) solid transparent; cursor: pointer; overflow: hidden; transition: border-color var(--dur-fast) var(--ease); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.pdp__thumb:hover { border-color: var(--line-strong); }
.pdp__thumb.is-active { border-color: rgb(var(--c-fg)); }
/* Video thumbnail: product poster + a clear circular play button on top. */
.pdp__thumb--video::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.12); }
.pdp__playbadge { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; }
.pdp__playbadge::before { content: ""; position: absolute; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgb(var(--c-bg) / 0.92); box-shadow: 0 2px 8px rgb(0 0 0 / 0.35); }
.pdp__playbadge svg { position: relative; width: 1.6rem; height: 1.6rem; margin-left: 0.2rem; color: rgb(var(--c-fg)); }
.pdp__thumb--video:hover .pdp__playbadge::before { background: rgb(var(--c-bg)); }

/* Info column */
.pdp__eyebrow { font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--c-accent)); }
.pdp__title { margin-top: var(--space-3); }
.pdp__sku { margin-top: var(--space-2); font-size: var(--text-sm); letter-spacing: 0.04em; color: var(--fg-55); }
.pdp__rating { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); font-size: var(--text-base); }
.pdp__stars { color: rgb(var(--c-accent)); letter-spacing: 0.1em; }
.pdp__reviews { color: var(--fg-55); }
.pdp__price { margin-top: var(--space-4); font-size: var(--text-3xl); font-weight: var(--fw-bold); }
.pdp__lead { margin-top: var(--space-4); color: var(--fg-60); }

.pdp__option { margin-top: var(--space-6); }
.pdp__option-head { display: flex; align-items: baseline; justify-content: space-between; }
.pdp__option-label { display: block; margin-bottom: var(--space-3); font-size: var(--text-base); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-55); }
.pdp__option-label b { color: rgb(var(--c-fg)); }
.pdp__sizeguide { font-size: var(--text-base); font-weight: var(--fw-bold); color: rgb(var(--c-fg)); background: none; border: 0; border-bottom: var(--hairline) solid rgb(var(--c-fg)); padding: 0 0 0.1rem; cursor: pointer; }
.pdp__sizeguide:hover { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); }

.pdp__swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pdp__swatch { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; width: auto; padding: 0; background: none; border: 0; cursor: pointer; }
.pdp__swatch-dot { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--sw); border: var(--hairline) solid var(--line-strong); box-shadow: inset 0 0 0 2px rgb(var(--c-bg)); transition: box-shadow var(--dur-fast) var(--ease); }
.pdp__swatch.is-active .pdp__swatch-dot { box-shadow: inset 0 0 0 2px rgb(var(--c-bg)), 0 0 0 1.5px rgb(var(--c-fg)); }

/* Variant caption — shown inline so the colour name is readable without hovering. */
.pdp__chip-label { max-width: 8rem; font-size: var(--text-xs); line-height: 1.25; text-align: center; color: rgb(var(--c-fg) / 0.65); transition: color var(--dur-fast) var(--ease); }
.pdp__swatch.is-active .pdp__chip-label,
.pdp__imgchip.is-active .pdp__chip-label { color: rgb(var(--c-fg)); font-weight: var(--fw-medium); }
.pdp__swatch:hover .pdp__chip-label,
.pdp__imgchip:hover .pdp__chip-label { color: rgb(var(--c-fg)); }

.pdp__sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.pdp__size { min-height: 4.6rem; font-size: var(--text-md); font-weight: var(--fw-medium); color: rgb(var(--c-fg)); background: rgb(var(--c-bg)); border: var(--hairline) solid var(--line-strong); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pdp__size:hover { border-color: rgb(var(--c-fg)); }
.pdp__size.is-active { color: rgb(var(--c-on-dark)); background: rgb(var(--c-fg)); border-color: rgb(var(--c-fg)); }
.pdp__size.is-oos { color: var(--fg-50); background: rgb(var(--c-surface)); cursor: not-allowed; text-decoration: line-through; opacity: 0.6; }
@media (min-width: 480px) { .pdp__sizes { grid-template-columns: repeat(8, 1fr); } }

/* Image colour-variant chips — click swaps the main gallery to that variant. */
.pdp__imgchips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pdp__imgchip { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; width: 6.4rem; padding: 0; background: none; border: 0; cursor: pointer; }
.pdp__imgchip-thumb { width: 6.4rem; height: 6.4rem; overflow: hidden; background: rgb(var(--c-surface)); border: var(--hairline) solid var(--line-strong); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.pdp__imgchip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__imgchip:hover .pdp__imgchip-thumb { border-color: rgb(var(--c-fg)); }
.pdp__imgchip.is-active .pdp__imgchip-thumb { border-color: rgb(var(--c-fg)); box-shadow: 0 0 0 1.5px rgb(var(--c-fg)); }
.pdp__imgchip.is-oos { opacity: 0.55; }

/* Standard gallery — full-width lifestyle/detail shots below the PDP.
   Tight grid, same page-width gutter as the sections above/below. Trims the
   default section rhythm so the images sit close to the PDP, not floating. */
.pdp-gallery { padding-top: 0; padding-bottom: var(--space-6); }
.pdp-gallery__grid { display: grid; grid-template-columns: 1fr; gap: var(--tile-gap); }
.pdp-gallery__item { margin: 0; overflow: hidden; background: rgb(var(--c-surface)); }
.pdp-gallery__item img { width: 100%; height: auto; display: block; }
/* video cells match the row height of their image neighbours */
.pdp-gallery__item--video { aspect-ratio: 4 / 3; }
.pdp-gallery__item--video .vplayer { width: 100%; height: 100%; }
.pdp-gallery__item--video .vplayer video { object-fit: cover; }
@media (min-width: 750px) {
  .pdp-gallery__grid { grid-template-columns: 1fr 1fr; }
  /* A lone item (e.g. the pants 360° video) spans both columns rather than
     leaving an empty cell beside it. */
  .pdp-gallery__item:only-child { grid-column: 1 / -1; }
}

.pdp__actions { display: flex; gap: var(--tile-gap); margin-top: var(--space-6); }
.pdp__buy { flex: 1; }
/* Stacked variant: Add to cart + Find in store full-width on their own rows,
   wishlist heart tucked inline on the first row. */
.pdp__actions--stack { flex-wrap: wrap; }
.pdp__actions--stack #addToCart { flex: 1 1 auto; }
.pdp__actions--stack .pdp__wish { order: 1; }
.pdp__actions--stack > a.pdp__buy { flex: 1 0 100%; order: 2; }
.pdp__note { margin-top: var(--space-3); font-size: var(--text-base); color: var(--fg-55); }
.pdp__note a { color: rgb(var(--c-accent)); font-weight: var(--fw-bold); }

.pdp__quick { display: grid; gap: var(--space-3); margin-top: var(--space-6); padding-block: var(--space-6); border-block: var(--hairline) solid var(--line); }
.pdp__quick li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-md); }
.pdp__quick svg { width: 2rem; height: 2rem; stroke: rgb(var(--c-accent)); flex: 0 0 auto; }

@media (min-width: 850px) {
  /* gallery-heavy split (~65/35) so product photos show without hard cropping.
     fr units divide the space AFTER the gap, so neither column hugs the edge. */
  .pdp__grid { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  /* info column sticks while the gallery scrolls */
  .pdp__info { position: sticky; top: 10rem; }
}

/* ---- Accordion (PDP details) ---- */
.accordion { margin-top: var(--space-6); }
.accordion__item { border-bottom: var(--hairline) solid var(--line); }
.accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-5) 0;
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-align: left;
  color: rgb(var(--c-fg));
  background: none;
  border: 0;
  cursor: pointer;
}
.accordion__icon { width: 2rem; height: 2rem; flex: 0 0 auto; transition: transform var(--dur) var(--ease); }
.accordion__head[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); }
/* grid-template-rows animates height with no magic max-height and no layout
   thrash. JS only toggles aria-expanded; the CSS owns the animation. */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.accordion__head[aria-expanded="true"] + .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > * { overflow: hidden; min-height: 0; }
.accordion__inner > * { color: var(--fg-60); }
.accordion__inner > :last-child { padding-bottom: var(--space-5); }
/* no-JS fallback — show all panel content */
html:not(.js) .accordion__panel { grid-template-rows: 1fr; }

.spec-list { display: grid; gap: var(--space-3); padding-bottom: var(--space-5); }
.spec-list li { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-md); border-bottom: var(--hairline) solid var(--line); padding-bottom: var(--space-3); }
.spec-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.spec-list span { color: var(--fg-55); }
.spec-list b { font-weight: var(--fw-bold); text-align: right; }

/* Accordion body: admin-authored bullet lists + ALL-CAPS sub-headings. */
.acc-list { display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: disc; }
.acc-list li { font-size: var(--text-md); line-height: 1.55; color: var(--fg-60); }
.acc-list li::marker { color: rgb(var(--c-accent)); }
.acc-subhead { margin-top: var(--space-4); font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--c-fg)); }
.acc-subhead:first-child { margin-top: 0; }

/* ---- Modal (size guide) ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.modal.open { opacity: 1; visibility: visible; }
.modal__overlay { position: absolute; inset: 0; background: rgb(0 0 0 / 0.55); }
.modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 64rem;
  max-height: 88vh;
  overflow-y: auto;
  background: rgb(var(--c-bg));
  transform: translateY(2.4rem);
  transition: transform var(--dur) var(--ease);
}
.modal.open .modal__dialog { transform: none; }
.modal__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: rgb(var(--c-bg));
  border-bottom: var(--hairline) solid var(--line);
}
.modal__title { font-size: var(--text-xl); font-weight: var(--fw-bold); }
.modal__close { display: grid; place-items: center; width: 4rem; height: 4rem; color: rgb(var(--c-fg)); background: none; border: 0; cursor: pointer; }
.modal__close svg { width: 2rem; height: 2rem; }
.modal__body { padding: var(--space-6); }
.modal__body > p { color: var(--fg-60); font-size: var(--text-md); }

/* ---- Shop-closed modal (Add to cart → distributors only) ---- */
.shopclosed { max-width: 48rem; }
.shopclosed__msg { color: rgb(var(--c-fg)); font-size: var(--text-lg); line-height: 1.5; }
.shopclosed__actions { margin-top: var(--space-6); }

.size-table { width: 100%; border-collapse: collapse; margin-top: var(--space-5); }
.size-table th, .size-table td { padding: var(--space-3) var(--space-2); font-size: var(--text-md); text-align: center; border-bottom: var(--hairline) solid var(--line); }
.size-table thead th { font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--text-sm); color: var(--fg-55); }
.size-table tbody th { font-weight: var(--fw-bold); }
.size-table tbody tr:hover { background: rgb(var(--c-surface)); }

.size-howto { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--hairline) solid var(--line); }
.size-howto h4 { margin-bottom: var(--space-3); font-size: var(--text-md); font-weight: var(--fw-bold); }
.size-howto p { font-size: var(--text-base); color: var(--fg-60); }

@media (min-width: 600px) {
  .modal { align-items: center; padding: var(--space-5); }
  .modal__dialog { border-radius: var(--radius); }
}

/* ---- Request a quote modal ---- */
.quote-summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: var(--hairline) solid var(--line);
}
.quote-summary__media { flex: 0 0 auto; width: 7.2rem; aspect-ratio: 3 / 4; background: rgb(var(--c-surface)); overflow: hidden; }
.quote-summary__media img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.quote-summary__name { font-size: var(--text-lg); font-weight: var(--fw-bold); }
.quote-summary__meta { margin-top: 0.2rem; font-size: var(--text-base); color: var(--fg-55); }
.quote-summary__price { margin-top: var(--space-2); font-size: var(--text-md); font-weight: var(--fw-bold); }

.quote-form { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.quote-form .field-row { gap: var(--space-5); }
.quote-form__submit { margin-top: var(--space-3); }
.quote-form__note { font-size: var(--text-base); color: var(--fg-55); margin-top: var(--space-2); }
/* The email fallback in the note reads as muted grey otherwise — accent makes
   it legible as a real link without shouting louder than the submit button. */
.quote-form__note a { color: rgb(var(--c-accent)); text-decoration: underline; text-underline-offset: 3px; }
.quote-form__note a:hover { text-decoration-thickness: 2px; }
.field__opt { font-weight: 400; color: var(--fg-50); }
/* Required-field asterisk. aria-hidden in markup — the input's own `required`
   is what assistive tech announces, so this is purely a visual cue. */
.field__req { font-weight: 400; color: var(--fg-50); }
/* 3-up row (colour / size / qty) on wider screens */
@media (min-width: 600px) { .field-row--3 { grid-template-columns: 1fr 1fr 1fr; } }

/* The two-step modal wraps its fields in .quote-step, which would otherwise
   break the parent .quote-form grid gap — give it its own matching rhythm so
   every field/row is evenly spaced. */
.quote-step { display: grid; gap: var(--space-5); }
.quote-step[hidden] { display: none; } /* attribute must win over the grid display */
.quote-step > p { margin: 0; color: var(--fg-60); }

/* Inline field — label and input on one row (used by the spam-check captcha
   to save vertical space). Falls back to stacked on narrow screens. */
.field--inline { flex-direction: row; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.field--inline label { flex: 0 0 auto; margin: 0; }
.field--inline input { flex: 0 0 8rem; min-width: 8rem; }
@media (max-width: 480px) { .field--inline { flex-direction: column; align-items: stretch; } .field--inline input { flex: 1 1 auto; } }

/* Review-step action buttons — equal size, sit side by side. */
.quote-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.quote-actions .button { flex: 1 1 0; justify-content: center; }

/* Read-only review pane (modal step 2). */
.quote-review { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
.quote-review dt { font-weight: var(--fw-medium); color: var(--fg-60); }
.quote-review dd { margin: 0; }
.quote-summary__variations { margin-top: var(--space-2); font-size: var(--text-base); color: var(--fg-60); }

/* ============================================================
   5d. CATEGORY ARCHIVE
   ============================================================ */
.archive-bar {
  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-5);
  border-bottom: var(--hairline) solid var(--line);
}
.archive-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  min-height: 3.8rem;
  padding-inline: var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: rgb(var(--c-fg));
  background: rgb(var(--c-bg));
  border: var(--hairline) solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: rgb(var(--c-fg)); }
.chip.is-active { color: rgb(var(--c-on-dark)); background: rgb(var(--c-fg)); border-color: rgb(var(--c-fg)); }
.archive-meta { display: flex; align-items: center; gap: var(--space-5); }
.archive-count { font-size: var(--text-base); color: var(--fg-55); }
.archive-sort { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); color: var(--fg-55); }
.archive-sort select {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: rgb(var(--c-fg));
  background: rgb(var(--c-bg));
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  cursor: pointer;
}

/* Full-bleed lifestyle break inside the product grid (spans 2 cols on desktop). */
.archive-feature { position: relative; overflow: hidden; }
.archive-feature__media { position: absolute; inset: 0; }
.archive-feature__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%); transition: transform var(--dur-image) var(--ease), filter var(--dur) var(--ease); }
.archive-feature:hover .archive-feature__media img { transform: scale(1.04); filter: grayscale(0%); }
.archive-feature__body {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--pad-inline);
  color: rgb(var(--c-on-dark));
  background: linear-gradient(180deg, rgb(0 0 0 / 0.15) 0%, transparent 40%, rgb(0 0 0 / 0.6) 100%);
}
.archive-feature .tile__label { font-size: var(--text-sm); font-weight: var(--fw-medium); letter-spacing: 0.06em; opacity: 0.9; }
.archive-feature .tile__title { color: rgb(var(--c-on-dark)); }
/* feature tile has no fixed product ratio — it fills its grid row */
.archive-feature { aspect-ratio: 3 / 4; }
@media (min-width: 750px) {
  .archive-feature { grid-column: span 2; aspect-ratio: auto; }
}

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); }
.pagination__num {
  display: grid;
  place-items: center;
  min-width: 4.4rem;
  height: 4.4rem;
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  border: var(--hairline) solid var(--line-strong);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pagination__num:hover { border-color: rgb(var(--c-fg)); }
.pagination__num.is-active { color: rgb(var(--c-on-dark)); background: rgb(var(--c-fg)); border-color: rgb(var(--c-fg)); }
.pagination__next { display: inline-flex; align-items: center; gap: var(--space-2); height: 4.4rem; padding-inline: var(--space-4); margin-left: var(--space-3); font-size: var(--text-md); font-weight: var(--fw-bold); }
.pagination__next svg { width: 1.6rem; height: 1.6rem; }
.pagination__next:hover { color: rgb(var(--c-accent)); }

/* SEO copy — editorial two-column (heading left, body right) so it fills the width */
.seo-copy { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.seo-copy__head h2 { margin-top: var(--space-3); max-width: 16ch; }
.seo-copy__body { display: grid; gap: var(--space-4); }
.seo-copy__body .intro__text { margin-top: 0; }
@media (min-width: 850px) {
  .seo-copy { grid-template-columns: 1fr 1.4fr; gap: clamp(4rem, 8vw, 12rem); align-items: start; }
  .seo-copy__body { grid-template-columns: 1fr 1fr; }   /* two text columns balance the right side */
}

/* ============================================================
   6. UTILITIES & MOTION
   ============================================================ */
.u-accent { color: rgb(var(--c-accent)); }

/* Screen-reader-only text (e.g. the gallery's live region). Stays in the a11y
   tree — display:none would silence it. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Scroll reveal — progressive enhancement (only hides once JS adds .js) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ===== CMS additions: flash alerts + utilities ===== */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius, 8px);
  margin-bottom: var(--space-5);
  font-size: var(--text-md);
  border: 1px solid transparent;
}
.alert--success {
  background: rgb(34 160 90 / 0.10);
  border-color: rgb(34 160 90 / 0.35);
  color: rgb(20 110 60);
}
.alert--error {
  background: rgb(var(--c-accent) / 0.10);
  border-color: rgb(var(--c-accent) / 0.40);
  color: rgb(170 50 0);
}
.u-muted  { color: rgb(var(--c-fg) / 0.55); }
.u-accent { color: rgb(var(--c-accent)); }

/* ===== CMS additions: icon badges, quote drawer, wishlist heart ===== */
/* Icon badges */
.iconbtn--badged { position: relative; }
.iconbtn__badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: rgb(var(--c-accent)); color: #fff;
  font-size: 10px; line-height: 16px; font-weight: 600; text-align: center;
}
/* Quote drawer (slides from the right) — scoped so it never touches the mobile nav .drawer.
   transform:none resets the base .drawer translateX(-100%) so the panel's own slide shows. */
.drawer--quote { position: fixed; inset: 0; z-index: 200; pointer-events: none; transform: none; }
.drawer--quote[hidden] { display: none; }
.drawer--quote .drawer__overlay {
  position: absolute; inset: 0; background: rgb(0 0 0 / 0.4);
  opacity: 0; transition: opacity var(--dur-2, .3s) ease;
}
.drawer--quote .drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 90vw);
  background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur-2, .3s) ease;
  box-shadow: -8px 0 40px rgb(0 0 0 / 0.12);
}
.drawer--quote.open { pointer-events: auto; }
.drawer--quote.open .drawer__overlay { opacity: 1; }
.drawer--quote.open .drawer__panel { transform: translateX(0); }
/* .drawer__top already exists for the mobile nav (height:7rem); scope the quote variant
   so the mobile nav header is untouched. */
.drawer--quote .drawer__top { display: flex; align-items: center; justify-content: space-between; height: auto; padding: 16px; border-bottom: 1px solid rgb(0 0 0 / 0.1); }
.drawer__title { font-weight: 600; }
.drawer__body { flex: 1; overflow-y: auto; padding: 16px; }
.drawer__foot { padding: 16px; border-top: 1px solid rgb(0 0 0 / 0.1); }
.button--full { width: 100%; text-align: center; }

/* ── Size guide: PDP trigger button (sits right of the Size label) ── */
.pdp__sizeguide {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; font-size: var(--text-sm); color: var(--fg-55);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}
.pdp__sizeguide:hover, .pdp__sizeguide:focus-visible { color: rgb(var(--c-accent)); }
.pdp__sizeguide svg { width: 18px; height: 18px; }

/* ── Size guide drawer: reuses .drawer--quote slide mechanics ── */
/* RebelHorn-style overlay: frosted blur that keeps the page faintly visible,
   not a dark scrim. Scoped to --sizeguide so the quote drawer keeps its scrim. */
/* The base .drawer sets an opaque background; left un-reset it becomes the
   surface backdrop-filter samples (so the blur just shows white). Clear it so
   the actual page content sits behind the overlay and blurs through. */
.drawer--sizeguide { background: transparent; }
.drawer--sizeguide .drawer__overlay {
  background: rgb(255 255 255 / 0.25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.drawer--sizeguide .drawer__panel { width: min(560px, 96vw); }
.sizeguide__tabs { display: flex; gap: 24px; padding: 12px 16px 0; border-bottom: 1px solid rgb(0 0 0 / 0.1); }
.sizeguide__tab {
  background: none; border: 0; cursor: pointer; padding: 8px 0 12px;
  font: inherit; font-weight: 600; color: rgb(0 0 0 / 0.45);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sizeguide__tab.is-active { color: rgb(var(--c-fg)); border-bottom-color: rgb(var(--c-fg)); }
.sizeguide__pane { display: none; }
.sizeguide__pane.is-active { display: block; }

/* mm / in pill toggle */
.sizeguide__unit { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.sizeguide__unit { background: rgb(0 0 0 / 0.06); border-radius: 999px; padding: 3px; width: max-content; margin-left: auto; }
.unit-toggle__btn {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--text-sm);
  padding: 5px 14px; border-radius: 999px; color: rgb(0 0 0 / 0.55);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.unit-toggle__btn.is-active { background: rgb(var(--c-fg)); color: #fff; }

/* table */
.sizeguide-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sizeguide-table th {
  text-align: left; padding: 12px 14px; background: rgb(0 0 0 / 0.05);
  font-weight: 600; color: rgb(var(--c-fg));
}
.sizeguide-table td { padding: 12px 14px; border-bottom: 1px solid rgb(0 0 0 / 0.06); }
.sizeguide-table tbody tr:nth-child(even) { background: rgb(0 0 0 / 0.02); }
.region-toggle {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  cursor: pointer; font: inherit; font-weight: 600; color: rgb(var(--c-fg)); padding: 0;
}
.region-toggle svg:first-child { width: 16px; height: 16px; }
.region-toggle svg:last-child { width: 14px; height: 14px; opacity: 0.6; }

/* How to Measure */
.sizeguide__measure { white-space: pre-line; line-height: 1.6; color: rgb(var(--c-fg) / 0.85); }
.sizeguide__tip {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 20px;
  background: rgb(0 0 0 / 0.05); border-radius: var(--radius); padding: 14px 16px;
  font-size: var(--text-sm); line-height: 1.5;
}
.sizeguide__tip svg { width: 20px; height: 20px; flex: 0 0 20px; color: rgb(var(--c-accent)); margin-top: 1px; }
/* Quote rows (drawer + page) */
.qrow { display: grid; grid-template-columns: 56px 1fr 64px 28px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgb(0 0 0 / 0.06); }
.qrow__img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #f3f3f3; }
.qrow__name { font-weight: 600; font-size: .9rem; }
.qrow__meta { color: rgb(0 0 0 / 0.55); font-size: .8rem; }
.qrow__qty { width: 100%; padding: 6px; border: 1px solid rgb(0 0 0 / 0.15); border-radius: 6px; }
.qrow__rm { border: 0; background: none; font-size: 20px; cursor: pointer; color: rgb(0 0 0 / 0.5); }
.qrow__rm:hover { color: rgb(var(--c-accent)); }

/* Wishlist heart — filled active state on the existing card heart */
.card__fav.is-active svg { fill: rgb(var(--c-accent)); }
.card__fav.is-active { color: rgb(var(--c-accent)); }
/* PDP "Save" wishlist button */
.pdp__wish {
  flex: 0 0 auto;
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid rgb(0 0 0 / 0.15); border-radius: 8px; background: #fff;
  cursor: pointer; color: rgb(0 0 0 / 0.6);
  transition: color .15s ease, border-color .15s ease;
}
.pdp__wish svg { width: 20px; height: 20px; }
.pdp__wish:hover { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); }
.pdp__wish.is-active { color: rgb(var(--c-accent)); }
.pdp__wish.is-active svg { fill: rgb(var(--c-accent)); }

/* ===== Quote page: line-item list ===== */
.quote-items { margin: 20px 0; }
.card--wish { display: flex; flex-direction: column; }
/* actions align edge-to-edge with the card image; gap separates price from button */
.card--wish .card__actions { display: flex; gap: 8px; margin-top: var(--space-4); padding: 0; }
.card--wish .card__actions .button { flex: 1; }
.store{cursor:pointer;transition:border-color var(--dur-fast,.15s) ease,background var(--dur-fast,.15s) ease}
.store:hover{border-color:rgb(var(--c-fg) / .35)}
.store--active,.store--active:hover{border-color:rgb(var(--c-accent));background:rgb(var(--c-accent) / .04)}

/* ---- Error pages (404 / 500 / generic) ---- */
.errpage { display: flex; align-items: center; min-height: calc(100dvh - 7rem - 6rem); }
@media (min-width: 990px) { .errpage { min-height: calc(100dvh - 8rem - 6rem); } }

.errpage__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 750px) {
  .errpage__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); }
}

/* The status code as a typographic statement, not a decorative graphic. */
.errpage__code {
  font-size: clamp(9rem, 26vw, 22rem);
  font-weight: var(--fw-bold);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: rgb(var(--c-fg));
  /* hairline "cut" through the numerals in signal orange */
  background-image: linear-gradient(rgb(var(--c-accent)), rgb(var(--c-accent)));
  background-size: 100% 0.5rem;
  background-position: 0 62%;
  background-repeat: no-repeat;
  padding-bottom: 0.1em;
}

.errpage__body { max-width: 52ch; }
.errpage__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--c-accent));
  margin-bottom: var(--space-3);
}
.errpage__title { font-size: clamp(2.4rem, 3.4vw, 3.4rem); line-height: 1.1; letter-spacing: -0.02em; }
/* Keep the headline on one line once there's room for it. */
@media (min-width: 990px) { .errpage__title { white-space: nowrap; } }
.errpage__lead { margin-top: var(--space-4); font-size: var(--text-lg); color: var(--fg-60); }

.errpage__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
/* the layout's outline-light variant is tuned for dark hero; on the light error
   page, re-tint it to the foreground so it reads as a proper ghost button. */
.errpage__ghost { color: rgb(var(--c-fg)); border-color: var(--line-strong); }
.errpage__ghost:hover { color: rgb(var(--c-on-dark)); background: rgb(var(--c-fg)); border-color: rgb(var(--c-fg)); opacity: 1; }

.errpage__links { margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--hairline) solid var(--line); }
.errpage__links-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-55);
  margin-bottom: var(--space-3);
}
.errpage__links ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.errpage__links a {
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: rgb(var(--c-fg));
  padding-bottom: 0.2rem;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.errpage__links a:hover { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); }

/* Quiet entrance — GPU-only, honours reduced-motion. */
.errpage__code, .errpage__body > * { animation: errpage-in 0.6s var(--ease) both; }
.errpage__eyebrow { animation-delay: 0.05s; }
.errpage__title   { animation-delay: 0.1s;  }
.errpage__lead    { animation-delay: 0.15s; }
.errpage__actions { animation-delay: 0.2s;  }
.errpage__links   { animation-delay: 0.25s; }
@keyframes errpage-in {
  from { opacity: 0; transform: translateY(1.2rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .errpage__code, .errpage__body > * { animation: none; }
}

/* ============================================================
   HOMEPAGE (client markup 10.8.26)

   The redesigned homepage. Content is CMS-managed from
   /secure/homepage; this section only styles the rows it added.

   The client tagged rows 1, 2, 3, 5, 6 and 7 "COLOURED" — those
   are exactly the rows the theme used to desaturate, so the
   grayscale treatment is switched off for them below. Other
   pages keep their black-and-white art direction.
   ============================================================ */

/* ---- Bahnschrift (client-supplied, self-hosted) ----
   Variable face: wght 300-700, wdth 75-100. One file covers every
   weight the hero and tagline need. Subset to Latin-1 + the marks
   the copy uses, 315 KB TTF -> 47 KB.

   swap: the headline is above the fold, so it paints in the
   fallback immediately rather than holding the hero blank. */
@font-face {
  font-family: "Bahnschrift";
  src: url("/assets/fonts/bahnschrift-variable.woff2") format("woff2-variations"),
       url("/assets/fonts/bahnschrift-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* The client supplied Bahnschrift for the new visual direction. Use it on
   public-page headings globally so content pages and homepage sections sync. */
:root { --font-display-alt: "Bahnschrift", "DIN Alternate", "Segoe UI", var(--font-sans); }

h1,
h2,
h3,
.h1,
.h2,
.h3,
.page-hero__title,
.section-head .h2,
.feature__title,
.video-band__title,
.tile__title,
.card__name {
  font-family: var(--font-display-alt);
}

/* Homepage-specific heading tuning. Font family is global for public headings
   above; these weights/spacing preserve the approved homepage composition. */
.page-home h1,
.page-home h2,
.page-home .h2,
.page-home .section-head .h2,
.page-home .feature__title,
.page-home .video-band__title,
.page-home .tile__title,
.page-home .card__name {
  font-family: var(--font-display-alt);
}
/* Bahnschrift runs narrower and lighter than Inter at the same nominal weight,
   so headings need a touch more weight and tighter tracking to hold the same
   visual presence the design has. */
.page-home h2,
.page-home .h2,
.page-home .feature__title,
.page-home .video-band__title,
.page-home .tile__title {
  font-weight: 700;
  letter-spacing: 0.005em;
}

/* ---- Full colour on the homepage rows ---- */
.hero__media img { filter: none; }
.video-band__media video,
.video-band__media img { filter: none; }   /* client wants the video clear — no dimming, no overlay */
/* no overlay now, so lean on text-shadow for legibility */
.video-band__title,
.video-band__sub { text-shadow: 0 1px 12px rgb(0 0 0 / 0.55); }
.collection img,
.collection:hover img { filter: none; }

/* ---- Row 1: hero ---- */
/* Own scrim: the base .hero__media::after gradient is tuned for the old
   centred headline, this one carries a bottom-left copy stack. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.25) 38%, rgb(0 0 0 / 0) 68%);
}
.hero__content { z-index: 2; }

.hero-kicker {
  margin: 0;
  font-family: var(--font-display-alt);
  /* Client mockup is Bahnschrift condensed, but not ultra-condensed: keep it
     slimmer than default while preserving readability. */
  font-weight: 600;
  font-stretch: 85%;
  font-variation-settings: "wght" 600, "wdth" 85;
  font-style: oblique 6deg;
  font-size: clamp(3.2rem, 6.4vw, 6.4rem);
  line-height: 0.97;
  letter-spacing: -0.012em;
  color: rgb(var(--c-on-dark));
  text-transform: uppercase;
}
.hero-kicker .slash { color: rgb(var(--c-accent)); margin-right: 0.2em; }

.hero-sub {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-3) 0 0;
  font-family: var(--font-display-alt);
  font-weight: 600;
  font-stretch: 85%;
  font-variation-settings: "wght" 600, "wdth" 85;
  color: rgb(var(--c-on-dark));
  font-size: 1.6rem;   /* 16px — client-set */
  line-height: 1;
  letter-spacing: -0.004em;
}
.hero-sub__logo { height: 1.6em; width: auto; display: block; }
.hero-founded {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display-alt);
  font-weight: 600;
  font-stretch: 85%;
  font-variation-settings: "wght" 600, "wdth" 85;
  color: rgb(var(--c-on-dark) / 0.88);
  font-size: clamp(1.45rem, 1.8vw, 1.9rem);
  line-height: 1;
  letter-spacing: 0;
}

/* Slide dots */
.hero__dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--space-5);
  display: flex;
  gap: var(--space-2);
}
.hero__dots button {
  width: 2.4rem;
  height: 0.3rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: rgb(var(--c-on-dark) / 0.4);
  transition: background var(--dur) var(--ease);
}
.hero__dots button.is-active { background: rgb(var(--c-on-dark)); }

/* Mobile: the slides are landscape crops, so a tall viewport-height hero forces
   `cover` to zoom hard into the middle of the bike. Shorten the box and ease the
   Ken Burns so more of the frame stays visible. */
@media (max-width: 749px) {
  .hero {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .hero__slide { transform: scale(1.01); }
  .hero__slide.is-active { animation: hero-kenburns-sm 2.5s linear forwards; }
  .hero__media img { object-position: 50% 45%; }
}
@keyframes hero-kenburns-sm {
  from { transform: scale(1.01) translate(0, 0); }
  to   { transform: scale(1.06) translate(-1%, -0.75%); }
}

/* ---- Row 2: three-up promo ---- */
/* .promo-grid is the original 2-up; this variant is the client's 3-up. */
.promo-grid--3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tile-gap);
  /* The markup floats this row clear of the hero above and the banner below,
     matching the gap between its own tiles. */
  margin-block: var(--tile-gap);
}
@media (min-width: 750px) { .promo-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* The new shoe shots are studio cut-outs on a near-white backdrop, so this
   variant runs light-on-dark-text, unlike the photographic 2-up. */
.promo-grid--3 .promo {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: rgb(var(--c-surface));
  overflow: hidden;
}
.promo-grid--3 .promo img {
  display: block;
  width: 100%;
  height: 100%;
  /* Source art is already composed with the full product in-frame. Keep the
     tile square so the image fills the card without cutting the shoe off. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  padding: 0;
  transition: transform var(--dur-image) var(--ease);
}
.promo-grid--3 .promo:hover img { transform: none; }
.promo-grid--3 .tile__body {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  /* Matches .feature__body so Row 2 and Row 3 share one optical margin. */
  padding: var(--space-7) var(--pad-inline);
}
@media (max-width: 749px) {
  .promo-grid--3 .tile__body { padding: var(--space-5) var(--pad-inline); }
}
.promo-grid--3 .tile__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-55);
}
.promo-grid--3 .tile__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: rgb(var(--c-fg));
}
.promo-grid--3 .tile__cta {
  margin-top: var(--space-2);
  border-color: rgb(var(--c-fg) / 0.4);
  color: rgb(var(--c-fg));
}
.promo-grid--3 .promo:hover .tile__cta {
  background: rgb(var(--c-fg));
  color: rgb(var(--c-on-dark));
  border-color: rgb(var(--c-fg));
}

/* ---- Rows 3 & 5: full-bleed feature banners ---- */
.feature {
  position: relative;
  display: block;
  overflow: hidden;
  background: rgb(var(--c-dark));
  text-decoration: none;
}
.feature__img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  transition: transform var(--dur-image) var(--ease);
}
.feature:hover .feature__img { transform: scale(1.02); }
.feature--tall .feature__img { aspect-ratio: 16 / 9; }
@media (max-width: 749px) {
  /* Portrait crop on phones — a 21:9 letterbox loses the subject entirely. */
  .feature__img,
  .feature--tall .feature__img { aspect-ratio: 4 / 5; }
}
.feature__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0.15) 45%, rgb(0 0 0 / 0) 75%);
}
/* Row 5's photo is already dark at the base and needs less help. */
.feature__scrim--soft {
  background: linear-gradient(to top, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0) 60%);
}
.feature__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-block: var(--space-7);
  color: rgb(var(--c-on-dark));
}
@media (max-width: 749px) { .feature__body { padding-block: var(--space-5); } }
.feature__label {
  display: block;
  font-size: var(--text-md);
  color: var(--on-dark-80);
  margin-bottom: var(--space-1);
}
.feature__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(2rem, 2.8vw, 3.2rem);
  font-weight: var(--fw-bold);
  line-height: 1.22;
  color: rgb(var(--c-on-dark));
  /* Row 3's client copy should break into 2 lines. Wider than the mockup
     draft so the explicit newline controls the break, not an early wrap. */
  max-width: 34ch;
}

/* ---- Row 7b: tagline strip ---- */
.tagline {
  /* Same grey as the footer it sits on top of, so the two read as one dark
     block instead of a visible seam between #111 and #212124. */
  background: rgb(var(--c-footer));
  padding-block: var(--space-6);
  text-align: center;
}
.tagline__text {
  margin: 0;
  font-family: var(--font-display-alt);
  font-size: clamp(2.1rem, 3vw, 3.2rem);
  font-weight: var(--fw-bold);
  font-style: oblique 6deg;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgb(var(--c-on-dark));
}
.tagline__text .slash { color: rgb(var(--c-accent)); margin-right: 0.35em; }

/* ====================================================================
   About page: bare video band + mission pillars
   ==================================================================== */

/* Video band with no copy — the film *is* the section, so it needs neither
   the flex-end alignment nor the tall min-height the homepage band uses to
   make room for a headline. Aspect ratio keeps the frame honest instead. */
.video-band--bare {
  display: block;
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.video-band--bare .video-band__media { position: absolute; inset: 0; }
@media (max-width: 749px) {
  .video-band--bare { aspect-ratio: 4 / 3; min-height: 0; }
}

/* ---- Mission pillars (the four "additional points") ----
   Rule-topped columns, same editorial language as .steps, so the block reads
   as a continuation of The Mission rather than a marketing card grid. */
.pillars { padding-block: var(--space-section); background: rgb(var(--c-surface)); }
.pillars__head { max-width: 46ch; margin-bottom: var(--space-7); }
.pillars__title { margin: 0; }
.pillars__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-5);
}
.pillar { padding-top: var(--space-5); border-top: 2px solid rgb(var(--c-fg)); }
.pillar__icon {
  width: 4.8rem;
  height: 4.8rem;
  object-fit: contain;
  margin-bottom: var(--space-4);
}
.pillar__title { margin: 0 0 var(--space-2); font-size: var(--text-xl); font-weight: var(--fw-bold); }
.pillar__text { font-size: var(--text-md); line-height: 1.65; color: var(--fg-60); }
@media (min-width: 750px)  { .pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pillars__grid { grid-template-columns: repeat(4, 1fr); } }