/* ── Fonts ──────────────────────────────────────────── */
@font-face {
  font-family: 'DrukWideBold';
  src: url('../assets/fonts/DrukWideBold.ttf') format('truetype');
  font-weight: bold; font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brooklyn';
  src: url('../assets/fonts/Brooklyn/Brooklyn Normal 1.ttf') format('truetype');
  font-weight: normal; font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brooklyn SemiBold';
  src: url('../assets/fonts/Brooklyn/Brooklyn SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brooklyn';
  src: url('../assets/fonts/Brooklyn/Brooklyn Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Brooklyn';
  src: url('../assets/fonts/Brooklyn/Brooklyn Bold 1.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Brooklyn';
  src: url('../assets/fonts/Brooklyn/Brooklyn BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Display serif — EB Garamond (self-hosted). The editorial luxury voice. */
@font-face {
  font-family: 'EB Garamond';
  src: url('../assets/fonts/EBGaramond/EBGaramond-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../assets/fonts/EBGaramond/EBGaramond-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../assets/fonts/EBGaramond/EBGaramond-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../assets/fonts/EBGaramond/EBGaramond-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Display grotesque — Akzentica (Akzidenz-Grotesk lineage). The Jacquemus
   editorial voice on the shop page: bold, large, uppercase. */
@font-face {
  font-family: 'Akzentica';
  src: url('../assets/fonts/Akzentica/fonnts.com-Akzentica_4F-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Akzentica';
  src: url('../assets/fonts/Akzentica/fonnts.com-Akzentica_4F-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Akzentica';
  src: url('../assets/fonts/Akzentica/fonnts.com-Akzentica_4F-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Akzentica';
  src: url('../assets/fonts/Akzentica/fonnts.com-Akzentica_4F-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Weight-locked alias for section titles — mirrors the 'Brooklyn SemiBold'
   pattern so --font-title renders SemiBold regardless of any CSS font-weight. */
@font-face {
  font-family: 'Akzentica SemiBold';
  src: url('../assets/fonts/Akzentica/fonnts.com-Akzentica_4F-SemiBold.otf') format('opentype');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ─────────────────────────────────────────── */
:root {
  --ink:         #060C1F;
  --ink-60:      rgba(6,12,31,0.6);
  --ink-30:      rgba(6,12,31,0.3);
  --ink-10:      rgba(6,12,31,0.08);
  --cream:       #F5F6FA;
  --blue:        #06038D;
  --blue-deep:   #050275;
  --blue-darker: #03014E;
  --muted:       #5E729A;
  --border:      rgba(6,12,31,0.09);

  --volt:        #1A1AFF;  /* quirk accent — deliberate moments only, never base chrome */

  --font-display: 'Brooklyn', sans-serif;            /* headlines — Brooklyn, site-wide */
  --font-title:  'Brooklyn SemiBold', sans-serif;    /* section titles — weight-locked semibold */
  --font-body:   'Brooklyn', sans-serif;             /* body, nav, labels, buttons */
  --font-grotesque: 'Brooklyn', sans-serif;          /* shop cards/captions — Brooklyn too */

  --nav-h:   72px;
  --max-w:   1280px;
  --gutter:  clamp(24px, 5vw, 80px);
  --radius:  2px;
  /* Soft radius, used only by the SPLYNTERS block — its panel, its tiles and
     its button. That section is deliberately the one place softer than the
     rest of the site; keeping the value here means those three can never
     drift apart. Everything else stays on --radius. */
  --radius-soft: 14px;

  /* Spacing scale (4/8 rhythm) */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
}

/* ── Base ───────────────────────────────────────────── */
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400; /* Brooklyn Normal is the body default */
  color: var(--ink);
  background: #fff;
  min-height: 100vh;
  display: flex; flex-direction: column;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Utility ─────────────────────────────────────────── */
.label {
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
}
.title {
  font-family: var(--font-title);
  text-transform: uppercase; line-height: 1.0;
  letter-spacing: 0.01em;
}
/* Editorial display — large Brooklyn headlines, mixed case. */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: none;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.display-italic { font-style: italic; }
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 15px 36px; cursor: pointer; border: none;
  transition: opacity 0.15s ease, transform 0.1s ease;
  position: relative; overflow: hidden;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { opacity: 0.85; }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--cream); }
/* Light grey fill, for a button that should be there without competing with a
   primary action — the empty-bag prompt is a way out, not a purchase. */
.btn-muted { background: var(--cream); color: var(--ink); }
.btn-muted:hover { background: var(--ink-10); }
.btn-muted:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Nav ────────────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, border-bottom-color 0.3s ease, transform 0.35s ease;
}
/* Auto-hide: slide the nav up on scroll-down, back down on scroll-up (driven by js/nav.js) */
.site-nav.nav-hidden { transform: translateY(-100%); }

/* Transparent state — floats over hero image */
.site-nav.nav-transparent {
  background: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent;
}

.nav-inner {
  position: relative;
  height: 100%; max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav-logo {
  grid-column: 2;
  display: flex; align-items: center; justify-content: center;
}
.nav-logo .logo-dark,
.nav-logo .logo-light { height: 20px; transition: opacity 0.3s ease; }
.nav-logo .logo-light { position: absolute; opacity: 0; }

/* Show white logo and links when nav is transparent over hero */
.site-nav.nav-transparent .logo-dark  { opacity: 0; }
.site-nav.nav-transparent .logo-light { opacity: 1; }
.site-nav.nav-transparent .nav-links a { color: #fff; opacity: 0.75; }
.site-nav.nav-transparent .nav-links a:hover,
.site-nav.nav-transparent .nav-links a.active { opacity: 1; color: #fff; }


.nav-logo-wrap { position: relative; height: 20px; display: flex; align-items: center; }

.nav-links {
  display: flex; align-items: center; gap: 32px;
  list-style: none;
}
.nav-links-left  { justify-content: flex-start; }
.nav-links-right { justify-content: flex-end; }

.nav-links a {
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink); opacity: 0.45;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.nav-links a:hover { opacity: 1; }
.nav-links a.active { opacity: 1; color: var(--blue); }

/* Collection name beside "Shop". A slash in front so it reads as a breadcrumb
   off the active item rather than as another nav link. Injected by nav.js and
   hidden unless a ?c= view is open. */
.nav-current {
  margin-left: 9px;
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.nav-current::before { content: '/'; margin-right: 9px; color: var(--ink-30); }
.nav-current[hidden] { display: none; }
.site-nav.nav-transparent .nav-current { color: rgba(255,255,255,0.7); }
.site-nav.nav-transparent .nav-current::before { color: rgba(255,255,255,0.4); }

/* Current entry in the dropdown and the mobile menu. */
.dropdown-categories a.active,
.mm-list a.active { color: var(--blue); }

/* Dropdown */
.nav-item-dropdown { position: relative; }

.nav-dropdown {
  position: absolute; top: 100%; left: -32px;
  width: 280px;
  background: #fff;
  border-top: 2px solid var(--blue);
  box-shadow: 0 16px 48px rgba(6,12,31,0.10), 0 2px 8px rgba(6,12,31,0.06);
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 200;
  overflow: hidden;
}
.nav-item-dropdown:hover .nav-dropdown {
  opacity: 1; pointer-events: all; transform: translateY(0);
}

/* Category list — full-width blocks that slide on hover */
.dropdown-categories { padding: 6px 0; }

.dropdown-categories a {
  display: block;
  padding: 13px 28px;
  font-family: var(--font-title) !important;
  font-size: 13px !important;
  letter-spacing: 0.01em; text-transform: uppercase; line-height: 1;
  /* Override nav-links cascade completely */
  color: var(--ink) !important;
  opacity: 1 !important;
  background: transparent;
  border-bottom: 1px solid var(--border);
  transform: translateX(0);
  transition:
    transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    color 0.18s ease,
    opacity 0.18s ease,
    background 0.18s ease;
}
.dropdown-categories a:last-child { border-bottom: none; }

/* Hovered item: full block slides right + turns blue */
.dropdown-categories a:hover {
  transform: translateX(10px) !important;
  color: var(--blue) !important;
  opacity: 1 !important;
  background: rgba(6,3,141,0.03);
}

/* Dim siblings to make the active item pop */
.dropdown-categories:hover a:not(:hover) {
  opacity: 0.28 !important;
}

/* Chevron on Shop link */
.nav-has-dropdown::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 6px; vertical-align: middle;
  opacity: 0.5;
}

/* Non-hero pages: push content below fixed nav */
.below-nav { padding-top: var(--nav-h); }

/* ── Shop hero ───────────────────────────────────────── */
.shop-hero {
  position: relative;
  height: 100vh; min-height: 600px;
  overflow: hidden;
}
.shop-hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.shop-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    transparent 35%,
    rgba(0,0,0,0.45) 100%
  );
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: var(--gutter) var(--gutter) 72px;
}
.shop-hero-inner { max-width: var(--max-w); margin: 0 auto; width: 100%; }
.shop-hero-eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-bottom: 16px;
}
.shop-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(21px, 2.6vw, 30px);
  text-transform: none; line-height: 1.0;
  letter-spacing: -0.01em; color: #fff;
}
.shop-hero-cta {
  margin-top: 36px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 4px;
  transition: border-color 0.2s ease;
}
.shop-hero-cta:hover { border-color: #fff; }
.shop-hero-cta::after { content: '↓'; font-size: 13px; }

/* ── Footer ─────────────────────────────────────────── */
.site-footer {
  margin-top: auto;
  background: #fff;
  color: var(--ink);
  border-top: 1px solid var(--border);
  padding: clamp(56px, 7vw, 88px) var(--gutter) 40px;
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; }

.footer-top {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: clamp(40px, 8vw, 120px);
}
.footer-brand { display: flex; flex-direction: column; gap: 20px; }
.footer-logo img { height: 20px; }
.footer-tagline {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-30); margin: 0; max-width: 200px; line-height: 1.9;
}

.footer-cols { display: flex; flex-wrap: wrap; gap: clamp(36px, 6vw, 88px); }
.footer-col-title {
  font-family: var(--font-body); font-weight: 400;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-30); margin-bottom: 22px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.footer-col a {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-60); transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--ink); }

.footer-bottom {
  display: flex; align-items: center; flex-wrap: wrap;
  justify-content: space-between; gap: 14px 32px;
  margin-top: clamp(48px, 7vw, 80px);
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; align-items: center; }
.footer-legal-links a,
.footer-region {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-30);
}
.footer-legal-links a { transition: color 0.15s ease; }
.footer-legal-links a:hover { color: var(--ink-60); }
.footer-copy {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-30); margin: 0;
}

@media (max-width: 720px) {
  .footer-top { flex-direction: column; gap: 44px; }
  .footer-cols { gap: 32px 48px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ── Page content wrapper ───────────────────────────── */
.page-content { flex: 1; }
/* Shop + collection pages: clear the fixed nav, and sit on a light grey ground
   so the white product cards/photos read as separate tiles. */
/* White ground. It was grey to separate product cards that were shot on white;
   the shots are on grey now, so the page inverts with them and the 2px grid
   gaps read as white hairlines instead. */
.shop-page { padding-top: var(--nav-h); background: #FFFFFF; }

/* ── Section spacing ─────────────────────────────────── */
.section { padding: 80px var(--gutter); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }
.section-alt { background: var(--cream); }

/* ── Page hero ──────────────────────────────────────── */
.page-hero {
  padding: 72px var(--gutter) 52px;
  border-bottom: 1px solid var(--border);
}
.page-hero-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.page-hero-eyebrow {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  margin-bottom: 14px;
}
.page-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(21px, 2.6vw, 30px);
  text-transform: none; line-height: 1.02; letter-spacing: -0.015em;
}
.page-hero-sub {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 6px;
}

/* Blue hero variant */
.page-hero-blue {
  background: var(--blue);
  border-bottom: none;
  padding-top: 80px; padding-bottom: 64px;
}
.page-hero-blue .page-hero-eyebrow { color: rgba(255,255,255,0.45); }
.page-hero-blue .page-hero-title   { color: #fff; }
.page-hero-blue .page-hero-sub     { color: rgba(255,255,255,0.5); }

/* Blue accent stripe on footer top */
/* Blue label variant */
.label-blue {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue); background: rgba(6,3,141,0.07);
  padding: 4px 10px;
}

/* ══════════════════════════════════════════════════════
   Editorial product listing (Loewe-style, zero-gutter)
══════════════════════════════════════════════════════ */
/* Near full-bleed grid; heading/intro stay contained */
#products { padding: 0; } /* flush: no gap above (hero) or below (waitlist) */
#products .section-inner { max-width: none; padding: 0; }

#product-grid { width: 100%; }

/* ── Shop editorial entry: two full-bleed tiles linking to collections
   (replaces the old hero, Jacquemus-style) ── */
.shop-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.shop-ed-tile {
  position: relative;
  display: block;
  overflow: hidden;
  /* Height, not aspect-ratio: the tiles have to track the viewport rather than
     their own width, or a wide screen makes them taller than the screen and
     pushes the captions below the fold. Filling exactly the space under the nav
     puts both photos and both captions on screen the moment the page loads.
     The photos are object-fit:cover, so they centre-crop into whatever shape
     this produces. svh (not vh) keeps it honest on mobile, where the browser
     chrome expands and collapses. */
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  background: var(--cream);
  color: #fff;
}
.shop-ed-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.shop-ed-tile:hover .shop-ed-img { transform: scale(1.03); }

/* Shopify collection artwork fading in over the local fallback photo. z-index 0
   keeps it above the outgoing photo but below a playing intro video (1). */
.shop-ed-img--incoming {
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.7s ease;
}
.shop-ed-img--incoming.is-in { opacity: 1; }

/* Intro-video overlay (prototype, opt in with ?video=1). Covers the still
   inside the tile, plays once, then fades out to reveal the photo underneath.
   Layer order in the tile is photo → video → scrim → caption. */
.shop-ed-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;   /* the tile is a link — clicks must pass through */
  opacity: 1;
  /* Duration matches FADE_LEAD in the shop.html intro-video block, so the
     dissolve finishes exactly as the clip runs out. Near-linear curve: a
     dissolve wants even progress, where ease-out would make it linger. */
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.6, 1);
}
.shop-ed-video.is-done { opacity: 0; }

/* Legibility scrim behind the caption. Bottom 45% only — the top of the photo
   stays untouched. This is the single scrim on the tile: adding a second
   ::after rule does not stack, it merges, and an `inset: 0` in the second rule
   would combine with the `height` here to pin the scrim to the top of the tile
   instead of the bottom. */
.shop-ed-tile::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.45), transparent);
  pointer-events: none;
}
.shop-ed-caption {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  padding: clamp(20px, 3vw, 44px) var(--gutter);
  font-family: var(--font-grotesque);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 0.95;
  font-size: clamp(15px, 1.7vw, 22px);
  color: #FFFFFF;
}
.shop-ed-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }

/* ── Collection view: one editorial photo as a 2×2 block inside the product
   grid (4 product cards fit beside it). Side alternates per collection. ── */
.cat-feature {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  min-height: 0;
  grid-row: 1 / span 2;
}
.cat-feature--left  { grid-column: 1 / span 2; }
.cat-feature--right { grid-column: 3 / span 2; }
.cat-feature-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.cat-feature::after { /* legibility scrim behind the caption */
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  pointer-events: none;
}
.cat-feature-caption {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  padding: clamp(14px, 1.8vw, 28px);
  font-family: var(--font-grotesque);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 0.95;
  color: #fff;
  font-size: clamp(16px, 1.9vw, 24px);
}

@media (max-width: 700px) {
  .shop-editorial { grid-template-columns: 1fr; } /* stack the two tiles, full-width */
  /* Stacked on mobile, so both tiles can't share the fold. Hold each to ~2/3 of
     the screen: the first tile and its caption land fully in view, and the
     second peeks in to read as "there is more below". */
  .shop-ed-tile { height: 68vh; height: 68svh; }
  .shop-ed-caption { font-size: clamp(14px, 4vw, 20px); }
}

/* Label above the product row ("Curated" / "Shop All"). Small-caps eyebrow, not
   headline scale — headline-scale type on this site is mixed-case serif, and an
   all-caps banner here would compete with the two editorial captions directly
   above it. Hairline underneath ties it to the grid it labels. */
/* Section labels ("Curated", "SPLYNTERS"). Sized with the editorial tile
   captions rather than as small eyebrows — at this scale the wide eyebrow
   tracking falls apart, so it tightens, and muted blue-grey reads washed out,
   so they take full ink. */
.grid-label, .splynters-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.9vw, 24px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
/* #products is deliberately flush (padding: 0) so the grid runs edge to edge.
   The label therefore has to carry its own gutter, or it renders jammed
   against the viewport edge and tight under the fixed nav. */
.grid-label {
  padding: clamp(32px, 4vw, 56px) var(--gutter) var(--space-lg);
}
.grid-label[hidden] { display: none; }

/* Uniform editorial product grid — every card is an identical 3:4 cell, so
   cards can never stagger regardless of Shopify's product order or source
   image ratios. Full-width campaign strips drop in as .ed-tile--full rows.
   (The previous "hero + leftover" layout used the class .ed-row, which
   collides with the editorial text-row .ed-row on faq/terms/privacy — that
   collision laid the leftover products out as a 3fr/7fr text row, which is
   what pushed cards out of line. Avoided entirely here.) */
.ed-grid {
  display: grid;
  /* minmax(0, 1fr), never plain 1fr: a bare `1fr` track floors at the item's
     min-content width, and on touch devices the card's name/price row sits in
     flow with a nowrap title — so a long product name widened its own column,
     staggered the 3:4 cards and pushed the grid past the viewport. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px; /* hairlines of page ground separating the cards — see .shop-page */
}
.ed-grid > .ed-tile--full { grid-column: 1 / -1; }
.ed-grid > .ed-tile--full .product-card-img-wrap { aspect-ratio: 16 / 6; height: auto; }

/* ── Card ── */
.product-card { position: relative; display: flex; flex-direction: column; color: inherit; }
.product-card-img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream);
}
/* Horizontal photo track: slides step sideways instead of cross-fading. */
.pc-track {
  position: absolute; inset: 0;
  display: flex;
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.pc-img {
  flex: 0 0 100%;
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .pc-track { transition: none; }
}

/* Stretched link covers the image for product navigation; arrows sit above it. */
.pc-link { position: absolute; inset: 0; z-index: 1; }

/* Per-card photo gallery: small arrows appear on hover and step through the
   product's photos (replaces the old hover image-swap). */
.pc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0; border: none; background: none;
  color: #FFFFFF; cursor: pointer;
  opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease;
}
.pc-arrow svg { width: 18px; height: 18px; pointer-events: none; }
.pc-arrow-prev { left: 8px; }
.pc-arrow-next { right: 8px; }
.product-card-img-wrap:hover .pc-arrow,
.product-card-img-wrap:focus-within .pc-arrow { opacity: 1; }
.pc-arrow:hover { transform: translateY(-50%) scale(1.18); }
.pc-arrow:focus-visible { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; }
/* Touch devices have no hover — keep the arrows visible so photos stay reachable */
@media (hover: none) {
  .pc-arrow { opacity: 1; }
}

/* "NEW" flag, top-left of the card. Revealed on hover with the name, price and
   arrows — the grid stays clean uniform photography until you engage with a
   card. White chip so it holds against the grey-marble product shots;
   pointer-events: none so it can never swallow a click meant for the card link
   underneath it. */
.pc-flag {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease;
  padding: 5px 9px;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: var(--radius);
}

/* Colour swatches, top right, mirroring the NEW flag — and revealed with it.
   pointer-events: none for the same reason as the flag: the card link runs
   underneath. */
.pc-swatches {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  pointer-events: none;
  display: flex; align-items: center; gap: 4px;
  opacity: 0; transition: opacity 0.3s ease;
}

/* Same trigger as .product-card-info below, so flag, swatches, name and price
   all arrive together rather than in two waves. */
.product-card:hover .pc-flag,
.product-card:focus-within .pc-flag,
.product-card:hover .pc-swatches,
.product-card:focus-within .pc-swatches { opacity: 1; }

/* No hover on touch, so they stay up — same call the arrows make. */
@media (hover: none) {
  .pc-flag, .pc-swatches { opacity: 1; }
}
.pc-swatch {
  width: 12px; height: 12px;
  border-radius: var(--radius);
  background-color: #FFFFFF;      /* value with no swatch set in admin */
  background-size: cover; background-position: center;
  /* Inset rather than a border, so the chip keeps its 12px box whatever the
     colour, and a white or very pale swatch still has an edge on a pale photo. */
  box-shadow: inset 0 0 0 1px rgba(6,12,31,0.25);
}
.pc-swatch-more {
  font-family: var(--font-body);
  font-size: 10px; letter-spacing: 0.04em;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(6,12,31,0.5);
}

/* Info is overlaid on the image and revealed on hover (Jacquemus-style):
   the grid reads as clean uniform 3:4 images until you hover a card. */
.product-card-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 16px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
  /* White type straight on the photo, no scrim. Deliberate: a gradient behind
     it reads heavier than the grid should, and the shots are light enough that
     white still registers. Legibility is knowingly traded for the look — do not
     "fix" this by adding a scrim back. */
}
.product-card:hover .product-card-info,
.product-card:focus-within .product-card-info { opacity: 1; }
/* Touch devices have no hover — name/price sit statically below the photo
   so products are never unlabeled on mobile. */
@media (hover: none) {
  .product-card-info {
    position: static;
    opacity: 1;
    padding: 10px 2px 16px;
    /* Nothing to hover on touch, so the row lives under the photo and only has
       the card's width to work with. Name over price, left-aligned: on a 2-up
       phone grid a baseline row would ellipsise most titles to "ZIGZAG PEND…". */
    flex-direction: column;
    align-items: stretch; /* full-width children: a shrink-to-fit name would
                             size itself to max-content and overhang the card */
    gap: 4px;
  }
}
.product-card-name {
  flex: 1; min-width: 0; /* take the row's free space; truncate if long */
  font-family: var(--font-grotesque);
  font-weight: 400;
  font-size: 13px; line-height: 1.25;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #FFFFFF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-card-price {
  flex: none;
  font-family: var(--font-grotesque);
  font-weight: 400;
  font-size: 12px; letter-spacing: 0.04em;
  color: #FFFFFF; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Touch cards stack name over price (see the .product-card-info rules above), so
   the name has the card's full width and wraps rather than truncating. Two lines
   max — an unclamped third line would push one card's photo out of line with the
   card beside it. Must sit after the base rule above to win on equal specificity. */
@media (hover: none) {
  .product-card-name {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  /* This row is not over the photo on touch — it sits under it, on the page's
     white, where white type is invisible rather than merely low-contrast.
     The arrows stay white: those are still on top of the image. */
  .product-card-name, .product-card-price { color: var(--ink); }
}

/* (Large 2x2 hero cell removed — the grid is now uniform; see .ed-grid above.) */

/* ── Campaign tile ── */
.ed-tile { position: relative; display: block; color: inherit; overflow: hidden; height: 100%; }
.ed-tile .product-card-img-wrap { aspect-ratio: auto; height: 100%; }
.ed-tile-dummy {
  position: absolute; inset: 0;
  background: var(--blue); color: var(--cream);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-display); text-transform: none; letter-spacing: -0.01em;
  font-size: clamp(22px, 2.8vw, 40px);
}
.ed-tile-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px var(--gutter);
  font-family: var(--font-display); text-transform: none; letter-spacing: -0.01em;
  color: #fff; font-size: clamp(20px, 2.4vw, 32px);
  background: linear-gradient(to top, rgba(0,0,0,0.45), transparent);
}

@media (max-width: 700px) {
  /* Two-up product grid; campaign strips become a shorter 4:3 banner */
  .ed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-grid > .ed-tile--full .product-card-img-wrap { aspect-ratio: 4 / 3; }
  .product-card-info { padding: 12px 12px 22px; }
  .product-card-name { font-size: 12px; letter-spacing: 0.1em; }
  /* Collection feature photo spans full width on mobile, products below */
  .cat-feature, .cat-feature--left, .cat-feature--right {
    grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5;
  }
}

/* ── Loading skeletons ──────────────────────────────────
   Cream blocks matching the final layout's shape, pulsing on
   opacity only (cheap to paint, no layout shift on arrival). */
.sk, .sk-card {
  background: var(--cream);
  animation: sk-pulse 1.1s ease-in-out infinite alternate;
}
.sk-card, .sk-media { aspect-ratio: 3 / 4; }
.sk-line { height: 13px; margin-bottom: 16px; }
.sk-line-lg { height: 30px; }
.sk-btn { height: 55px; margin-top: 24px; }
@keyframes sk-pulse { from { opacity: 1; } to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .sk, .sk-card { animation: none; }
}

/* ── Product detail ──────────────────────────────────── */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr); /* media | info */
  gap: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  align-items: start;
}
@media (max-width: 800px) {
  .product-detail { grid-template-columns: 1fr; }
}

/* Image column (right): every photo stacked in a scrolling vertical line.
   The info column stays pinned while this taller column scrolls; once the
   last image passes, the sticky releases and the whole page scrolls on. */
.product-images {
  grid-column: 1; grid-row: 1;
  padding: 0;
  /* Bleed the image column out to the left edge of the viewport, cancelling
     the centred layout's margin + gutter. Right edge stays on the grid track,
     so the info column is unaffected. */
  margin-left: calc(-1 * (max(0px, (100vw - var(--max-w)) / 2) + var(--gutter)));
}
.product-gallery { display: flex; flex-direction: column; gap: 8px; }
.product-media-item { display: block; width: 100%; }
.product-media-item img,
.product-media-item video {
  width: 100%; aspect-ratio: 3 / 4;
  object-fit: cover; background: var(--cream);
  display: block;
}

/* The first item is square: at full column width a 3/4 frame is taller than a
   laptop viewport, so landing on the page cut the product off at the fold.
   Square trims top and bottom instead of the sides — object-fit: cover crops
   from the centre, and the product sits centred in every studio shot.

   Cropping here rather than re-uploading square files in Shopify: it applies
   to every product and to anything uploaded later, with nothing to remember.

   First item only. The rest of the column keeps 3/4, and item two is usually
   the 1080x1920 video, which is far narrower than the frame — squaring that
   would throw away most of it. */
.product-media-item:first-child img,
.product-media-item:first-child video {
  aspect-ratio: 1 / 1;
}
@media (max-width: 800px) {
  .product-images { grid-column: 1; padding: 24px 0 0; margin-left: 0; }
  .product-gallery { gap: 4px; }
}

/* ── Product image zoom (Jacquemus-style, in-frame) ─────
   Click a photo to magnify it inside its own frame: the image
   scales up and the point under the cursor stays put while the
   pointer pans it. Click again or leave the frame to zoom out.
   The cursor is the Splyntre gem (same shape as the easter egg)
   with a + inside, switching to a − while zoomed; falls back to
   the browser's magnifier cursors if SVG cursors are unsupported. */
.product-media-item { position: relative; overflow: hidden; }
.product-media-item img {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M8.4,2.6L23.6,2.6L30,11.4L16,25L2,11.4Z'%20fill='rgba(255,255,255,0.92)'%20stroke='%2306038D'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3Cpath%20d='M2,11.4L30,11.4M8.4,2.6L11.2,11.4M23.6,2.6L20.8,11.4'%20stroke='%2306038D'%20fill='none'/%3E%3Cpath%20d='M12.5,16.5L19.5,16.5M16,13L16,20'%20stroke='%2306038D'%20stroke-width='1.8'%20stroke-linecap='round'/%3E%3C/svg%3E") 16 14, zoom-in;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-media-item.zoomed img {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M8.4,2.6L23.6,2.6L30,11.4L16,25L2,11.4Z'%20fill='rgba(255,255,255,0.92)'%20stroke='%2306038D'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3Cpath%20d='M2,11.4L30,11.4M8.4,2.6L11.2,11.4M23.6,2.6L20.8,11.4'%20stroke='%2306038D'%20fill='none'/%3E%3Cpath%20d='M12.5,16.5L19.5,16.5'%20stroke='%2306038D'%20stroke-width='1.8'%20stroke-linecap='round'/%3E%3C/svg%3E") 16 14, zoom-out;
  transform: scale(2.2);
}
@media (prefers-reduced-motion: reduce) {
  .product-media-item img { transition: none; }
}

/* Info column (left): still/sticky beside the scrolling image line. */
.product-info {
  grid-column: 2; grid-row: 1;
  padding: 48px 0 48px 48px;
  position: sticky; top: var(--nav-h);
  align-self: start;
}
@media (max-width: 800px) {
  .product-info { grid-column: 1; padding: 32px 0; border-top: 1px solid var(--border); position: static; }
}

.product-breadcrumb {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 24px;
}
.product-breadcrumb a { color: var(--muted); }
.product-breadcrumb a:hover { color: var(--blue); }
.product-breadcrumb span { margin: 0 8px; opacity: 0.4; }

.product-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.9vw, 24px);
  text-transform: none; line-height: 1.04; letter-spacing: -0.01em;
}
.product-price-row {
  display: flex; align-items: center; gap: 16px;
  margin-top: 16px;
}
.product-price {
  font-family: var(--font-body);
  font-size: 18px; letter-spacing: 0.06em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.product-material-tag { margin-top: 12px; }

/* Size selector */
/* Tightened from 32/12 — with the chips half the height of the old lettered
   boxes, this is what gets the description above the fold rather than just
   below it. */
.product-size-label {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 24px; margin-bottom: 10px;
}
.product-size-label span { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.product-size-label a { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); }
.product-size-label a:hover { text-decoration: underline; }

.size-selector { display: flex; flex-wrap: wrap; gap: 8px; }
.size-btn {
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: #fff; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  color: var(--ink);
}
.size-btn:hover { border-color: var(--ink); }
.size-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.size-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Colour chips. Square with the system radius, like the swatches on the shop
   cards, so the two read as the same object at two sizes. 30px rather than the
   52px lettered box: five of those pushed the description off the screen. */
.size-selector--swatch { gap: 10px; }
.size-btn--swatch {
  width: 30px; height: 30px;
  padding: 0;
  border-radius: var(--radius);
  background-color: #fff;          /* value with no swatch set in admin */
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(6,12,31,0.25);
  border: 0;
}
/* Ring sits outside the chip. The colour itself comes from an inline style, so
   it outranks the .active and :disabled backgrounds either way — a sold-out or
   selected chip still shows which colour it is. */
.size-btn--swatch.active {
  box-shadow: inset 0 0 0 1px rgba(6,12,31,0.25), 0 0 0 2px #fff, 0 0 0 3px var(--ink);
}
.size-btn--swatch:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px rgba(6,12,31,0.25), 0 0 0 2px #fff, 0 0 0 3px var(--ink-30);
}
/* Sold out. The lettered box strikes its text through; a chip has no text, so
   it takes a diagonal instead and fades back. */
.size-btn--swatch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  position: relative;
}
.size-btn--swatch:disabled::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top right,
    transparent calc(50% - 0.5px), var(--ink) calc(50% - 0.5px),
    var(--ink) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* Add to bag */
.product-add-btn {
  width: 100%; margin-top: 24px;
  padding: 18px 24px;
  font-size: 12px; letter-spacing: 0.24em;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  transition: opacity 0.15s ease;
}
.product-add-btn:hover:not(:disabled) { opacity: 0.85; }
.product-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Sold out → the notify block replaces the add-to-bag button entirely, so it
   sits in the button's position. Status + email capture read as one compact
   unit (reuses the waitlist field/btn/msg styles). */
.product-notify {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.product-notify-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.product-notify-status { color: var(--ink); font-family: var(--font-title); }

/* Left, like everything else in this column. Centred, it was the one line that
   did not start on the same edge as the title, price and option label. */
.product-note {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-top: 16px;
}

/* Tab strip */
.tab-strip {
  margin-top: 40px;
  border-top: 1px solid var(--border);
}
.tab-btns {
  display: flex; border-bottom: 1px solid var(--border);
}
.tab-btn {
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 14px 0; margin-right: 28px;
  background: none; border: none; cursor: pointer;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }

.tab-panel { display: none; padding: 24px 0; }
.tab-panel.active { display: block; }
.tab-panel p {
  font-size: 13px; letter-spacing: 0.06em; color: var(--muted);
  line-height: 1.8; margin-bottom: 12px;
}
.tab-panel p:last-child { margin-bottom: 0; }

/* Edition line — the limited-drop fact ("Made to order in a run of 12"),
   fed by the custom.edition metafield. Blue so it reads as a brand claim,
   not a spec. */
.product-edition { margin-top: 12px; color: var(--blue); }

/* Details tab — spec rows fed by custom.* metafields */
.spec-list { margin: 0; }
.spec-row {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.spec-row dt {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); flex: none;
}
.spec-row dd {
  margin: 0; font-size: 13px; letter-spacing: 0.06em;
  color: var(--ink); text-align: right;
}
.spec-note { padding-top: 16px; }

/* Story band — sitewide "Designed in Amsterdam" moment below the product */
.product-story {
  max-width: var(--max-w); margin: 96px auto 0;
  padding: 0 var(--gutter);
  text-align: center;
}
.product-story .label { margin-bottom: 20px; }
/* Down from clamp(20px, 2.6vw, 30px). The 1.04 line-height and negative
   tracking it inherits from .display are set for headline scale and turn a
   three-sentence paragraph into a wall at this size, so both relax with it. */
.product-story-text {
  max-width: 560px; margin: 0 auto;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.5;
  letter-spacing: 0;
}

/* Related products — "More from this drop" grid (reuses the shop cards) */
.product-related {
  max-width: var(--max-w); margin: 96px auto 0;
  padding: 0 var(--gutter);
}
.product-related-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 20px;
}
.product-related-head a {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue);
}
.product-related-head a:hover { text-decoration: underline; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* same track floor as .ed-grid */
  gap: 2px;
}
@media (max-width: 700px) {
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-story, .product-related { margin-top: 64px; }
}

/* ══════════════════════════════════════════════════════
   CONTENT PAGES (About · Shipping · FAQ · Contact · Legal)
══════════════════════════════════════════════════════ */
.content-narrow { max-width: 760px;       margin: 0 auto; padding: 64px var(--gutter) 96px; }
.content-mid    { max-width: 920px;       margin: 0 auto; padding: 64px var(--gutter) 96px; }

/* Prose */
.prose p {
  font-size: 16px; line-height: 1.85; color: var(--ink);
  margin-bottom: 22px; letter-spacing: 0.01em;
}
.prose p.lead {
  font-size: clamp(19px, 2.4vw, 24px); line-height: 1.6;
  color: var(--ink); margin-bottom: 32px;
}
.prose h2 {
  font-family: var(--font-title); text-transform: uppercase;
  font-size: clamp(14px, 1.5vw, 18px); letter-spacing: 0.01em;
  margin: 56px 0 18px; line-height: 1.05;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue); margin: 40px 0 14px;
}
.prose ul { margin: 0 0 22px; padding-left: 20px; }
.prose li { font-size: 16px; line-height: 1.7; margin-bottom: 10px; }
.prose a  { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--blue); }
.prose em { font-style: italic; color: var(--muted); }

/* Big editorial statement (About hero / pull quotes) */
.statement {
  font-family: var(--font-title); text-transform: uppercase;
  font-size: clamp(17px, 2.2vw, 26px); line-height: 1.1;
  letter-spacing: 0.01em; max-width: 16ch;
}
.statement-block {
  padding: 72px var(--gutter);
  border-bottom: 1px solid var(--border);
}
.statement-block .section-inner { display: block; }

/* Two-column info rows (Shipping) */
.info-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 48px; border-top: 1px solid var(--border);
}
@media (max-width: 640px) { .info-grid { grid-template-columns: 1fr; } }
.info-item { padding: 26px 0; border-bottom: 1px solid var(--border); }
.info-item h4 {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.info-item p { font-size: 16px; line-height: 1.65; color: var(--ink); }

/* Callout / legal note */
.callout {
  background: var(--cream); border-left: 3px solid var(--blue);
  padding: 22px 26px; margin: 28px 0;
  font-size: 14px; line-height: 1.7; color: var(--ink);
}
.callout strong { color: var(--blue); }
.callout-warn { border-left-color: #C2410C; }
.callout-warn strong { color: #C2410C; }

/* Placeholder marker for unfilled legal details */
.fillme {
  background: rgba(194,65,12,0.1); color: #C2410C;
  padding: 1px 6px; font-size: 0.85em; letter-spacing: 0.04em;
  border-radius: 2px;
  /* allow long placeholders to wrap so they don't blow out page width on mobile */
  white-space: normal; overflow-wrap: anywhere;
}

/* FAQ accordion */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: none;
  padding: 26px 0; display: flex; align-items: center; gap: 24px;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.8vw, 19px); letter-spacing: 0.01em;
  color: var(--ink); transition: color 0.15s ease;
}
.faq-q:hover { color: var(--blue); }
.faq-q::after {
  content: '+'; font-family: var(--font-body); font-size: 22px;
  color: var(--blue); flex-shrink: 0; transition: transform 0.25s ease;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-a-inner { padding-bottom: 26px; }
.faq-a p { font-size: 15px; line-height: 1.8; color: var(--muted); }

/* Contact links */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; margin-top: 48px;
}
@media (max-width: 640px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { border-top: 2px solid var(--blue); padding-top: 20px; }
.contact-card h4 {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.contact-card a, .contact-card p {
  font-family: var(--font-title); text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 26px); color: var(--ink);
  letter-spacing: 0.01em; line-height: 1.1;
}
.contact-card a:hover { color: var(--blue); }

/* ══════════════════════════════════════════════════════
   EDITORIAL CONTENT PAGES (image banner + left/right rows)
══════════════════════════════════════════════════════ */
.page-banner {
  position: relative;
  height: 44vh; min-height: 260px; max-height: 540px;
  overflow: hidden;
}
.page-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,12,31,0.4), transparent 55%);
}
.page-banner-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 var(--gutter) 30px;
}
.page-banner-label span,
.page-banner-label h1 {
  display: block; max-width: var(--max-w); margin: 0 auto; width: 100%;
  font-family: var(--font-body); font-weight: normal;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: #fff;
}

.editorial { max-width: var(--max-w); margin: 0 auto; padding: 64px var(--gutter) 100px; }

.ed-row {
  display: grid; grid-template-columns: 3fr 7fr;
  gap: clamp(24px, 5vw, 72px);
  padding: 38px 0; border-top: 1px solid var(--border);
}
.ed-label {
  font-family: var(--font-title); font-weight: normal; text-transform: uppercase;
  font-size: 14px; letter-spacing: 0.05em; line-height: 1.3; color: var(--ink);
  position: sticky; top: calc(var(--nav-h) + 28px); align-self: start;
}
.ed-label .num { display: none; }

/* Shipping table */
.ship-table { width: 100%; border-collapse: collapse; }
.ship-table th, .ship-table td {
  text-align: left; vertical-align: top;
  padding: 15px 18px 15px 0; border-bottom: 1px solid var(--border);
}
.ship-table thead th {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-weight: normal;
}
.ship-table tbody th {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); font-weight: normal; white-space: nowrap; padding-right: 28px;
}
.ship-table td { font-size: 14px; line-height: 1.6; color: var(--ink); }
.ship-table tr:last-child th, .ship-table tr:last-child td { border-bottom: none; }

/* Stack the shipping table on small screens */
@media (max-width: 600px) {
  .ship-table, .ship-table tbody, .ship-table tr, .ship-table th, .ship-table td { display: block; width: 100%; }
  .ship-table thead { display: none; }
  .ship-table tr {
    padding: 18px 0; border-bottom: 1px solid var(--border);
  }
  .ship-table tr:last-child { border-bottom: none; }
  .ship-table tbody th {
    padding: 0 0 10px; font-size: 12px; letter-spacing: 0.18em;
    color: var(--blue); white-space: normal;
  }
  .ship-table td {
    border: none; padding: 6px 0;
  }
  .ship-table td::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted);
  }
}

.ed-body p {
  font-size: 14px; line-height: 1.85; color: var(--ink);
  margin-bottom: 16px; letter-spacing: 0.01em;
}
.ed-body p:last-child { margin-bottom: 0; }
.ed-body p.muted { color: var(--muted); font-size: 13px; }
.ed-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.ed-body ul { padding-left: 18px; margin-bottom: 16px; }
.ed-body li { font-size: 14px; line-height: 1.7; margin-bottom: 8px; }

.ed-statement {
  font-family: var(--font-title); text-transform: uppercase;
  font-size: clamp(14px, 1.5vw, 18px); line-height: 1.2;
  letter-spacing: 0.01em; color: var(--ink);
  margin-bottom: 24px !important;
}
.ed-lead p.intro { font-size: 16px; line-height: 1.7; }

/* big contact / link values inside an editorial row */
/* Down from clamp(18px, 2.2vw, 26px) and off the browser's default underline.
   At 26px that underline ran straight through the @ and the full stop of an
   email address; this is the site's editorial link instead — a hairline under
   the text that takes brand colour on hover, the same pattern as
   .shop-hero-cta. Colour rather than weight, so hovering shifts nothing. */
.ed-links a {
  display: inline-block;
  /* Body weight, not the semibold title face, and no uppercase. An email
     address is written in lower case — forcing it into semibold capitals is
     what made it read as a heavy block at any size. Left as authored, it reads
     as what it is. */
  font-family: var(--font-body); font-weight: 400;
  text-transform: none;
  font-size: clamp(15px, 1.3vw, 17px); letter-spacing: 0.02em;
  line-height: 1.35; color: var(--ink); margin-bottom: 8px;
  text-decoration: none;
  border-bottom: 1px solid var(--ink-30);
  padding-bottom: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ed-links a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.ed-links a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Sentence case: these carry whole sentences, and at 0.18em tracking in
   capitals they read as shouting rather than as a caption. Same setting as the
   supporting text on the shop page. */
.ed-links .sub {
  font-size: 13px; letter-spacing: 0.01em; line-height: 1.7;
  color: var(--muted); margin-bottom: 20px;
}
.ed-links .sub:last-child { margin-bottom: 0; }

/* size reference inline grid */
.ed-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.ed-sizes div { background: #fff; padding: 14px 16px; }
.ed-sizes h5 { font-family: var(--font-title); font-size: 16px; text-transform: uppercase; }
.ed-sizes p { font-size: 11px; letter-spacing: 0.1em; color: var(--muted); margin: 4px 0 0; }

@media (max-width: 720px) {
  .ed-row { grid-template-columns: 1fr; gap: 12px; padding: 30px 0; }
  .ed-label { position: static; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════
   MOBILE NAVIGATION (hamburger + full-screen menu)
══════════════════════════════════════════════════════ */
.nav-burger { display: none; }
.mobile-menu { display: none; }

@media (max-width: 820px) {
  /* hide desktop link groups, keep centred logo */
  .nav-links-left, .nav-links-right { display: none; }

  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; padding: 4px;
    background: none; border: none; cursor: pointer; z-index: 130;
  }
  .nav-burger span {
    display: block; width: 24px; height: 2px; background: var(--ink);
    transition: transform 0.28s ease, opacity 0.2s ease, background 0.2s ease;
  }
  /* white bars when nav is transparent over the hero */
  .site-nav.nav-transparent .nav-burger span { background: #fff; }
  /* morph into an X when the menu is open */
  .site-nav.menu-open .nav-burger span { background: var(--ink); }
  .site-nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  .site-nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    display: block; position: fixed; inset: 0; z-index: 90;
    background: #fff;
    padding: calc(var(--nav-h) + 28px) var(--gutter) 48px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mobile-menu.open { transform: translateX(0); }
}

.mm-list { display: flex; flex-direction: column; max-width: var(--max-w); margin: 0 auto; }
.mm-list a {
  font-family: var(--font-title); text-transform: uppercase;
  font-size: clamp(17px, 4.5vw, 24px); letter-spacing: 0.01em; line-height: 1.15;
  color: var(--ink); padding: 9px 0;
  transition: color 0.15s ease, padding-left 0.2s ease;
}
.mm-list a:hover, .mm-list a:active { color: var(--blue); padding-left: 6px; }
.mm-list a.mm-small {
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0.2em;
  color: var(--muted); padding: 7px 0;
}
.mm-list a.mm-small:hover { color: var(--blue); }
.mm-divider { height: 1px; background: var(--border); margin: 20px 0; }

body.menu-locked { overflow: hidden; }

/* ── Search overlay ───────────────────────────────────
   A sheet that drops from under the nav, not a centred modal box — it reads as
   an extension of the header rather than a dialog interrupting the page. */
.nav-search-trigger {
  appearance: none; background: none; border: 0; padding: 0;
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink); opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.nav-search-trigger:hover { opacity: 1; }
.nav-search-trigger:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; opacity: 1; }
.site-nav.nav-transparent .nav-search-trigger { color: #fff; opacity: 0.75; }
.site-nav.nav-transparent .nav-search-trigger:hover { opacity: 1; }

.mm-list button.mm-search {
  appearance: none; background: none; border: 0;
  text-align: left; width: 100%;
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted); padding: 7px 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.mm-list button.mm-search:hover { color: var(--blue); }
.mm-list button.mm-search:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,12,31,0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.search-overlay.is-open { opacity: 1; }
.search-overlay[hidden] { display: none; }

.search-panel {
  background: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: min(80vh, 720px);
  display: flex; flex-direction: column;
  transform: translateY(-8px);
  transition: transform 0.2s ease;
}
.search-overlay.is-open .search-panel { transform: translateY(0); }

.search-bar {
  display: flex; align-items: center; gap: var(--space-md);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--border);
  min-height: var(--nav-h);
}
.search-input {
  flex: 1; min-width: 0;
  appearance: none; background: none; border: 0; padding: 0;
  font-family: var(--font-body);
  /* 16px floor: anything smaller makes iOS Safari zoom the page on focus. */
  font-size: clamp(16px, 2.4vw, 22px);
  color: var(--ink);
}
.search-input::placeholder { color: var(--ink-30); }
.search-input:focus { outline: none; }
.search-input::-webkit-search-cancel-button { display: none; }

.search-close {
  appearance: none; background: none; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -12px;   /* 44px touch target */
  color: var(--ink); opacity: 0.5; cursor: pointer;
  transition: opacity 0.15s ease;
}
.search-close:hover { opacity: 1; }
.search-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; opacity: 1; }

.search-results { overflow-y: auto; padding: var(--space-sm) 0 var(--space-lg); }
.search-msg {
  margin: 0; padding: var(--space-lg) var(--gutter);
  font-family: var(--font-body); font-size: 13px;
  color: var(--muted);
}

.search-item {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) var(--gutter);
  text-decoration: none; color: inherit;
  transition: background-color 0.15s ease;
}
.search-item:hover { background: var(--cream); }
.search-item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.search-item-img {
  flex: 0 0 auto; width: 56px; aspect-ratio: 3 / 4;
  background: var(--cream); overflow: hidden;
}
.search-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-item-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-item-title {
  font-family: var(--font-title); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-item-price { font-family: var(--font-body); font-size: 12px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .search-overlay, .search-panel { transition: none; }
  .search-panel { transform: none; }
}

/* ── SPLYNTERS: social highlights ─────────────────────
   Four square tiles under the curated row. Square by request — the source
   photos are portrait, so they centre-crop into the box. Same 2px gap as the
   product grid so the two rows read as one system. */
/* A panel rather than a full-bleed band: inset from the page edges so its own
   rounded corners are visible, which is what marks it off from the edge-to-edge
   product grid above. Light grey on the white page — the system's surface tone.
   It works as a contained panel where it did not as a full-width band. */
.splynters {
  margin: clamp(32px, 5vw, 72px) var(--gutter) clamp(48px, 6vw, 88px);
  padding: clamp(36px, 4.5vw, 64px) clamp(24px, 3.5vw, 56px) clamp(40px, 5vw, 72px);
  background: var(--cream);
  border-radius: var(--radius-soft);
}
.splynters[hidden] { display: none; }
.splynters-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg); flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
/* Type is shared with .grid-label above, so the two section labels always move
   together, colour included. */

/* Same soft corners as the tiles and the panel. Hover lifts to white rather
   than .btn-outline's cream, which would be invisible on a cream panel. */
.splynters-cta {
  flex: none;
  border-radius: var(--radius-soft);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.splynters-cta:hover {
  background: #FFFFFF;
  border-color: var(--ink-30);
}
.splynters-cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.splynters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Deliberately not the product grid's 2px. There the gap is a hairline and
     the cards read as one continuous surface; here the tiles are meant to read
     as four separate objects. */
  gap: clamp(12px, 1.6vw, 28px);
}
.splynter {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1 / 1;
  /* Knowingly off the 2px system radius — see --radius-soft. */
  border-radius: var(--radius-soft);
  /* No placeholder fill — the panel behind shows through until the photo
     arrives, rather than a box in a third tone. */
}
.splynter-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s ease;
}
.splynter:hover .splynter-img { transform: scale(1.03); }
.splynter:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

@media (max-width: 820px) {
  .splynters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .splynters-cta { padding: 13px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .splynter-img { transition: none; }
  .splynter:hover .splynter-img { transform: none; }
}

/* ── Assurances: three panels above the footer ────────
   Hairlines rather than boxes: one rule above the row, one below, and dividers
   between the cells. Gaps stay on the grid so the dividers meet the outer rules
   cleanly instead of floating with gutters either side. */
.assurances {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.assurances-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.assurance {
  display: block;
  padding: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 48px);
  text-align: center;
  text-decoration: none; color: inherit;
  border-left: 1px solid var(--border);
}
.assurance:first-child { border-left: 0; }

/* Uppercase, in step with the other section titles on the page — so the
   tracking goes positive to 0.08em, the value the rest of them use. The
   supporting line below stays sentence case. */
.assurance-title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-title);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  /* Two lines are always reserved, whether the title needs them or not. One
     title wraps and the others do not, and without this the wrapped one pushes
     its own body text a line lower than its neighbours' — three panels side by
     side, with their text out of line. */
  line-height: 1.3;
  min-height: 2.6em;
}
@media (max-width: 820px) {
  /* Stacked, so nothing is beside anything — the reserved line would just be a
     gap under every title. */
  .assurance-title { min-height: 0; }
}
.assurance-text {
  margin: 0 auto;
  max-width: 34ch;              /* keeps the two-line rhythm of the reference */
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.7;
  color: var(--muted);
}

/* Only the WhatsApp cell is a link; give it real states. */
a.assurance { transition: background-color 0.15s ease; }
a.assurance:hover { background: var(--cream); }
a.assurance:hover .assurance-title { color: var(--blue); }
a.assurance:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

@media (max-width: 820px) {
  /* Stacked: the dividers have to turn with the layout or they end up drawing
     lines between rows that are no longer side by side. */
  .assurances-inner { grid-template-columns: 1fr; }
  .assurance { border-left: 0; border-top: 1px solid var(--border); }
  .assurance:first-child { border-top: 0; }
}

/* ── Cart badge (nav) ────────────────────────────────── */
a[href="cart.html"] { position: relative; }
.cart-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  margin-left: 6px;
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0; line-height: 1;
  background: var(--blue); color: #fff;
  border-radius: 8px;
  vertical-align: middle;
  position: relative; top: -1px;
}

/* ── Size button: sold-out state ─────────────────────── */
.size-btn:disabled {
  color: var(--ink-30);
  border-color: var(--border);
  background: var(--cream);
  cursor: not-allowed;
  text-decoration: line-through;
}
.size-btn:disabled:hover { border-color: var(--border); }

/* ── Product page: add-to-bag feedback ───────────────── */
.product-add-msg {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 10px;
  color: #B3261E;
}
.product-add-msg.ok { color: var(--blue); }
.product-add-msg a { color: var(--blue); text-decoration: underline; }

/* ── Cart page ───────────────────────────────────────── */
.cart-wrap { max-width: 860px; margin: 0 auto; padding: 48px var(--gutter) 80px; width: 100%; }
/* Uppercase, so the tracking flips positive — the -0.01em was set for mixed
   case. 0.08em is the value the other large uppercase titles use. */
.cart-title {
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(16px, 1.9vw, 24px); letter-spacing: 0.08em; line-height: 1.1;
  margin-bottom: 32px;
}
.cart-lines { border-top: 1px solid var(--border); }
.cart-line {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 20px; align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.cart-line-img {
  width: 88px; height: 110px; object-fit: cover;
  background: var(--cream);
}
.cart-line-name {
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.cart-line-name a:hover { color: var(--blue); }
.cart-line-variant {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px;
}
.cart-line-price {
  font-size: 13px; letter-spacing: 0.08em; margin-top: 8px;
}
.cart-line-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--border); }
.cart-qty button {
  font-family: var(--font-body); font-size: 14px;
  width: 32px; height: 32px;
  background: #fff; border: none; cursor: pointer;
  color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease;
}
.cart-qty button:hover:not(:disabled) { background: var(--cream); color: var(--blue); }
.cart-qty button:disabled { color: var(--ink-30); cursor: default; }
.cart-qty span {
  min-width: 32px; text-align: center;
  font-size: 13px; letter-spacing: 0.06em;
}
.cart-line-remove {
  font-family: var(--font-body);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  background: none; border: none; cursor: pointer;
  color: var(--muted);
  transition: color 0.15s ease;
}
.cart-line-remove:hover { color: #B3261E; }
.cart-summary {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 24px 0 8px;
}
.cart-summary .label { font-size: 12px; }
.cart-subtotal {
  font-family: var(--font-body); font-size: 20px; font-weight: 700;
  letter-spacing: 0.06em;
}
.cart-note {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-top: 6px; text-align: right;
}
.cart-checkout-btn { width: 100%; margin-top: 24px; padding: 18px 24px; font-size: 12px; letter-spacing: 0.24em; }
.cart-checkout-btn:disabled { opacity: 0.5; cursor: default; }
.cart-empty { text-align: center; padding: 80px 0; }
/* Spacing only. The white here was for the navy primary button that used to
   sit in this slot, and it outranked whatever variant class the button
   carried — text colour belongs to the variant, not to the container. */
.cart-empty .btn { margin-top: 24px; }
.cart-line.busy { opacity: 0.45; pointer-events: none; transition: opacity 0.15s ease; }

@media (max-width: 560px) {
  .cart-line { grid-template-columns: 72px 1fr; }
  .cart-line-img { width: 72px; height: 90px; }
  .cart-line-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ── Waitlist ────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Honeypot: off-screen (not display:none, so bots still see and fill it),
   removed from tab order and hidden from assistive tech. */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.waitlist {
  background: #fff;
  color: var(--ink);
  border-top: 1px solid var(--border);
  padding: clamp(56px, 7vw, 88px) var(--gutter);
}
.waitlist-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 40px;
}
.waitlist-intro { max-width: 440px; }
.waitlist-title {
  font-family: var(--font-display); font-weight: 500;
  /* Uppercase, so the tracking has to go positive — the -0.01em here was set
     for mixed case and jams capitals together. 0.08em matches the other large
     uppercase labels on this page ("Curated", "SPLYNTERS"). */
  text-transform: uppercase; line-height: 1.05; letter-spacing: 0.08em;
  font-size: clamp(16px, 1.8vw, 22px);
  margin-bottom: 16px;
  /* No nowrap: capitals plus tracking make this string materially wider than
     the mixed-case version it was measured for, and it has to survive 375px. */
}
/* Sentence case under the uppercase title. 0.14em was tracking for capitals
   and reads loose without them, so it drops to near zero, and the size steps
   up to 13px — the same supporting-text setting as the assurance panels, which
   now do the same thing one section further down. */
.waitlist-text {
  font-size: 13px; letter-spacing: 0.01em;
  color: var(--muted); line-height: 1.7; margin: 0;
}
.waitlist-signup { width: 100%; max-width: 380px; }
.waitlist-field {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--ink);
}
.waitlist-field input {
  flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0.08em;
  padding: 10px 0; background: none; border: none; color: var(--ink);
}
.waitlist-field input::placeholder {
  color: var(--ink-30); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px;
}
.waitlist-field input:focus { outline: none; }
.waitlist-btn {
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--ink);
  padding: 6px 2px 6px 14px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.waitlist-btn:hover:not(:disabled) { transform: translateX(3px); }
.waitlist-btn:disabled { opacity: 0.35; cursor: default; }
.waitlist-msg {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 16px;
}
.waitlist-msg.ok  { color: var(--ink); }
.waitlist-msg.err { color: #B3261E; }
@media (max-width: 600px) {
  .waitlist-inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .waitlist-signup { max-width: none; }
}

/* ── Accessibility ───────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.mobile-menu a:focus-visible {
  outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}