/* ============================================================
   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.2rem; width: auto; }
@media (min-width: 990px) { .header__logo img { height: 2.6rem; } }
.header__nav { display: none; 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: 0;
  height: 1.5px;
  background: rgb(var(--c-fg));
  transition: width var(--dur) var(--ease);
}
.header__nav a:hover::after { width: 100%; }
.header__nav a[aria-current="page"]::after { width: 100%; }   /* 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__burger { display: grid; }

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

/* 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__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: 16ch; margin-bottom: 2.4rem; color: rgb(var(--c-on-dark)); }

/* ---- 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)); }
.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);
}
.card { position: relative; display: flex; flex-direction: column; }
.card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: rgb(var(--c-surface));
  overflow: hidden;
}
/* both images stack in the same box; primary visible, secondary fades in on hover */
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  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 */
.card:hover .card__media img:not(.card__media-alt) { opacity: 0; }  /* primary fades out */
.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; }

@media (min-width: 750px) { .cards { grid-template-columns: repeat(4, 1fr); gap: var(--space-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; filter: grayscale(100%) brightness(0.6); }
.video-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.25) 0%, transparent 35%, rgb(0 0 0 / 0.75) 100%);
}
.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; } }

/* ---- 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 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)); }
.footer__social { display: flex; gap: var(--tile-gap); margin-block: 2.2rem; }
.footer__social a { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; background: var(--on-dark-10); }
.footer__social svg { width: 1.8rem; height: 1.8rem; fill: rgb(var(--c-on-dark)); }
.footer__copy { font-size: var(--text-base); color: var(--on-dark-55); }

@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 */
}

/* ---- Mobile drawer ---- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: rgb(var(--c-bg));
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease);
}
.drawer.open { transform: none; }
.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 nav { display: flex; flex-direction: column; padding: var(--space-5) var(--pad-inline); }
.drawer nav a {
  padding-block: var(--space-3);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  border-bottom: var(--hairline) solid rgb(var(--c-fg) / 0.06);
}
body.no-scroll { overflow: hidden; }

/* ============================================================
   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; }
.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); }

/* ---- 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;
  aspect-ratio: 4 / 3;       /* mobile: media keeps a ratio */
  overflow: hidden;
  background: rgb(var(--c-surface));
}
/* image fills the whole media cell at any height (absolute so it never leaves gaps) */
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.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); }
/* 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 { aspect-ratio: auto; height: 100%; }   /* fills the row height */
}

/* ---- 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)); }
.locator__list { display: flex; flex-direction: column; max-height: 56rem; overflow-y: auto; border-top: var(--hairline) solid var(--line); }
.store { padding: var(--space-5) 0; border-bottom: var(--hairline) solid var(--line); }
.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 {
  margin: var(--space-7) 0;
  padding-left: var(--space-5);
  border-left: 3px solid rgb(var(--c-accent));
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: rgb(var(--c-fg));
}

/* 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: 3 / 4; background: rgb(var(--c-surface)); overflow: hidden; }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tile-gap); margin-top: var(--tile-gap); }
.pdp__thumb { 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)); }

/* 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__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; gap: var(--space-3); }
.pdp__swatch { width: 3.4rem; height: 3.4rem; padding: 0; border-radius: 50%; background: var(--sw); border: var(--hairline) solid var(--line-strong); cursor: pointer; box-shadow: inset 0 0 0 2px rgb(var(--c-bg)); transition: box-shadow var(--dur-fast) var(--ease); }
.pdp__swatch.is-active { box-shadow: inset 0 0 0 2px rgb(var(--c-bg)), 0 0 0 1.5px 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); } }

.pdp__actions { display: flex; gap: var(--tile-gap); margin-top: var(--space-6); }
.pdp__buy { flex: 1; }
.pdp__wish { flex: 0 0 auto; gap: var(--space-2); }
.pdp__wish svg { width: 1.8rem; height: 1.8rem; }
.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) {
  .pdp__grid { grid-template-columns: 1fr 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); }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease); }
.accordion__panel > :first-child { padding-bottom: var(--space-5); color: var(--fg-60); }
/* no-JS fallback — show all panel content */
html:not(.js) .accordion__panel { max-height: none; }

.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; }

/* ---- 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); }

.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-4); margin-top: var(--space-5); }
.quote-form__submit { margin-top: var(--space-2); }
.quote-form__note { font-size: var(--text-base); color: var(--fg-55); }
.field__opt { 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; } }

/* ============================================================
   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)); }

/* 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; }
}