/* ============================================================
   BarberGear - Trade-supply for working barbers
   Marketing pages: Hagi's-style luxe minimalism
   Shop pages: Shopify-standard layout
   Brand: black + white + sharp red (#E63946), Inter + Space Grotesk
============================================================ */

/* ---------- TOKENS ---------- */
:root {
  --ink: #0a0a0a;
  --ink-soft: #2a2a2a;
  --muted: #6b6b6b;
  --hairline: #e8e8e8;
  --bg: #ffffff;
  --bg-alt: #f5f4f0;
  --bg-deep: #0a0a0a;
  --red: #e63946;
  --red-dark: #c42d38;

  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Standardised section padding. Min was 64px which left huge gaps between
     sections on mobile - dropped to 40 so the page reads as one flow. */
  --sec-pad-y: clamp(40px, 6vw, 112px);
  --sec-pad-y-tight: clamp(28px, 4vw, 72px);

  --maxw: 1800px;
  /* Gutter floor dropped 20 → 14 so tiny viewports (320, iframe previews)
     don't lose 40px of content area to side padding. */
  --gutter: clamp(14px, 4vw, 72px);

  --t-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  --header-h: 160px;
  --announce-h: 36px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
}

img, video, svg { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

/* ---------- TYPOGRAPHY ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "wdth" 85;
  letter-spacing: -0.035em;
  word-spacing: 0.04em;
  line-height: 1;
  color: var(--ink);
}

.h-jumbo {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "wdth" 80;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  word-spacing: 0.04em;
}

.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "wdth" 82;
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  word-spacing: 0.04em;
}

.h-section {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 500;
  font-variation-settings: "wdth" 88;
  word-spacing: 0.04em;
}

h1 em, h2 em, h3 em, .h-jumbo em, .h-display em, .h-section em {
  font-family: inherit;
  font-style: italic;
  font-weight: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  color: var(--red);
  /* Optical kerning: italic slant makes the leading gap look wide and the
     trailing gap look tight. Pull the em slightly right of its preceding word
     and push the following word slightly further away. */
  margin-inline: -0.08em 0.1em;
}

.h-card {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

p { color: var(--ink-soft); }
.lead { font-size: 18px; line-height: 1.55; color: var(--ink-soft); }

/* ---------- LAYOUT HELPERS ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--sec-pad-y) 0; }
.section-tight { padding: var(--sec-pad-y-tight) 0; }

/* ---------- ANNOUNCEMENT BAR ---------- */
.announce {
  height: var(--announce-h);
  background: var(--bg-alt);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--hairline);
}
.announce-full { display: inline; }
.announce-short { display: none; }
@media (max-width: 600px) {
  .announce { font-size: 11px; letter-spacing: 0.06em; }
  .announce-full { display: none; }
  .announce-short { display: inline; }
}

/* ============================================================
   HEADER - two-row: black top (logo + search + actions),
   red bottom (category nav + call line). Mobile collapses the
   actions to a single row and stacks search underneath; the red
   nav hides and the slide-in drawer takes over.
============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--ink);
  color: #fff;
  transition: box-shadow var(--t-fast);
}
.header.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.18); }

/* Mobile: collapse the search row + announcement bar + shrink the logo
   when scrolled. Brings the sticky header from ~180px down to ~56px so
   content reads with breathing room instead of getting chopped. */
@media (max-width: 880px) {
  .header-search,
  .announce {
    transition: max-height 280ms ease, opacity 200ms ease, padding 200ms ease, margin 200ms ease, border-width 200ms ease;
    overflow: hidden;
  }
  .header.scrolled .header-search,
  body.is-scrolled .announce {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    border-width: 0;
    pointer-events: none;
  }
  .header.scrolled .header-top-inner {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .header.scrolled .brand-mark {
    height: 44px;
    transition: height 280ms ease;
  }
  .brand-mark { transition: height 280ms ease; }
  .header.scrolled {
    background: color-mix(in srgb, var(--ink) 82%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(20px);
            backdrop-filter: saturate(140%) blur(20px);
  }
  .header.scrolled .header-top {
    background: color-mix(in srgb, var(--ink) 70%, transparent);
  }
  html { scroll-padding-top: 64px; }
}

/* ---- Row 1: black top, brand mark ---- */
.header-top { background: var(--ink); }
/* When scrolled on mobile, the brand row becomes translucent too so content
   underneath shows through (blurred) instead of getting hard-cropped. */
@media (max-width: 880px) {
  .header.scrolled .header-top {
    background: color-mix(in srgb, var(--ink) 78%, transparent);
  }
}
.header-top-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 24px;
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
}
.brand-mark {
  height: 88px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* Persistent search box (square, square corners - clicking opens overlay) */
.header-search {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: 46px;
  padding: 0 18px;
  border-radius: 0;
  background: #fff;
  color: #5b5b5b;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 16px;
  transition: box-shadow var(--t-fast);
}
.header-search:hover { box-shadow: 0 0 0 2px var(--red) inset; }
.header-search-icon {
  width: 22px;
  height: 22px;
  color: var(--red);
  flex-shrink: 0;
}
.header-search-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-search-rotator {
  font-style: italic;
  color: var(--ink);
  display: inline-block;
  transition: opacity 220ms ease;
}

/* Actions - square icon buttons, no rounded backgrounds */
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-account,
.cart-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--t-fast);
  position: relative;
}
.header-account:hover,
.cart-btn:hover { background: rgba(255,255,255,0.10); }
.header-account svg,
.cart-btn svg { width: 26px; height: 26px; }
.cart-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  background: var(--red);
  color: #fff;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-count[data-count="0"] { display: none; }

/* ---- Row 2: red nav + call line, hover underline ---- */
.header-nav {
  background: var(--red);
  color: #fff;
}
.header-nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.header-nav-list {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
}
.header-nav-item { position: relative; }
.header-nav-item > a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.01em;
  position: relative;
}
.header-nav-item:first-child > a { padding-left: 0; }
/* Animated underline on hover (matches Zepbrook's reference) */
.header-nav-item > a::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-fast);
}
.header-nav-item:first-child > a::after { left: 0; }
.header-nav-item > a:hover::after,
.header-nav-item:focus-within > a::after { transform: scaleX(1); }

/* Dropdown - square corners */
.header-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  color: var(--ink);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  min-width: 260px;
  border-radius: 0;
  box-shadow: 0 16px 36px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 90;
}
.header-nav-shop:hover .header-nav-dropdown,
.header-nav-shop:focus-within .header-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.header-nav-dropdown li a {
  display: block;
  padding: 11px 22px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.header-nav-dropdown li a:hover { background: var(--bg-alt); color: var(--red); }

/* Call us link */
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.header-call svg { width: 22px; height: 22px; }
.header-call strong { font-weight: 700; }
.header-call:hover { opacity: 0.88; }

/* Hamburger - hidden on desktop */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ---- MOBILE: stack search under top row, hide red nav ---- */
@media (max-width: 880px) {
  .header-top-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 12px;
    padding: 14px 16px;
  }
  /* Hamburger: 3 white lines, no circle (Zepbrook-style) */
  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }
  .brand {
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-self: center;
  }
  .brand-mark { height: 72px; }

  .header-actions {
    grid-column: 3;
    grid-row: 1;
    gap: 0;
  }
  .cart-btn { display: none; }            /* mobile uses the floating-bag */
  .header-account { width: 40px; height: 40px; }
  .header-account svg { width: 24px; height: 24px; }

  /* Search becomes second row, full-width, square corners */
  .header-search {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    margin: 0;
    height: 52px;
    background: #fff;
    border-radius: 0;
  }

  /* Red nav row hidden - categories live in slide-in drawer */
  .header-nav { display: none; }
}

@media (max-width: 880px) { :root { --header-h: 196px; } }
@media (max-width: 380px) {
  .header-top-inner { padding: 12px 12px; column-gap: 8px; }
  .brand-mark { height: 60px; }
  .header-search { font-size: 14px; padding: 0 16px; }
}

/* ============================================================
   FLOATING BAG (mobile-only, persistent bottom-right pill)
============================================================ */
.floating-bag {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 0;
  background: var(--red);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(230, 57, 70, 0.32), 0 2px 6px rgba(0, 0, 0, 0.18);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  transition: transform var(--t-fast), background var(--t-fast);
}
.floating-bag:hover, .floating-bag:focus { background: var(--red-dark); transform: scale(1.04); }
.floating-bag svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.floating-bag .cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.floating-bag .cart-count[data-count="0"] { display: none; }
@media (max-width: 880px) {
  .floating-bag { display: inline-flex; }
}
@media (max-width: 380px) {
  .header-inner { padding: 0 12px; column-gap: 8px; }
}

/* ============================================================
   MOBILE DRAWER - slide-in sidebar with full nav
============================================================ */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}
.mobile-drawer.open {
  pointer-events: auto;
  visibility: visible;
}
.mobile-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.mobile-drawer.open .mobile-drawer-backdrop { opacity: 1; }
.mobile-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(84%, 360px);
  background: var(--bg);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  flex-direction: column;
  padding: 20px 28px 40px;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}
.mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); }
.mobile-drawer-close {
  align-self: flex-end;
  background: none;
  border: none;
  padding: 8px;
  margin-right: -8px;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
}
.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.mobile-drawer-nav a,
.mobile-drawer-nav button {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  font-variation-settings: "wdth" 90;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0;
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast);
}
.mobile-drawer-nav a:hover,
.mobile-drawer-nav button:hover { color: var(--red); }
.mobile-drawer-nav a:last-child,
.mobile-drawer-nav button:last-child { border-bottom: none; }

@media (min-width: 881px) {
  .mobile-drawer { display: none; }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }

.btn-ink {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn-ink:hover { background: #1f1f1f; border-color: #1f1f1f; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
}
.btn-ghost:hover { color: var(--red); border-color: var(--red); }

.btn-block { width: 100%; }
.btn-lg { padding: 18px 32px; font-size: 15px; }

/* ---------- HOMEPAGE: HERO ---------- */
.hero {
  padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 120px);
}
.hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: clamp(40px, 6vw, 80px);
}
.hero-tagline {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}
.hero-tagline .lead { max-width: 460px; }
.hero-headline {
  text-transform: none;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-media {
  margin-top: clamp(40px, 6vw, 80px);
  height: clamp(280px, 50vw, 560px);
  background: var(--ink);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55)),
    url("https://images.unsplash.com/photo-1599351431202-1e0f0137899a?w=2000&q=80&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.hero-media-meta {
  position: absolute;
  inset: auto var(--gutter) clamp(20px, 3vw, 40px) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ---------- MARQUEE ---------- */
.marquee {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--bg);
}
.marquee-track {
  display: inline-flex;
  gap: 56px;
  animation: marquee 40s linear infinite;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 56px; }
.marquee-track span::after { content: "✱"; color: var(--red); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- FEATURED COLLECTION (homepage) ---------- */
.featured {
  padding: var(--sec-pad-y) 0;
}
.featured-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
  padding: 0 var(--gutter);
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
.featured-head .h-section { max-width: 540px; }
.featured-head p { max-width: 380px; }

/* ---------- PRODUCT CARD (used on home + shop) ---------- */
.product-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 36px) clamp(16px, 1.8vw, 28px);
}
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.product-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .product-grid, .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  /* Bundle cards (cols-2) get the full row on mobile so the product, name,
     price and savings all read at a usable size. 2-up at 375px was cramped. */
  .product-grid.cols-2 { grid-template-columns: 1fr; gap: 28px; }
}
/* Standard product rail stays 2-up on phones - single-column made cards
   feel sparse with product photos floating in empty white space. */

.product-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast);
}
.product-card:hover .product-card-media { transform: scale(1.02); }
.product-card-media-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
  overflow: hidden;
  margin-bottom: 14px;
}
.product-card-media {
  /* Inset slightly so product floats in the cream frame */
  background-color: var(--bg-alt) !important;
}
.product-card-media {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  transition: transform var(--t-med);
  position: relative;
  isolation: isolate;
}
.product-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background:
    radial-gradient(circle at 30% 20%, rgba(230, 57, 70, 0.12) 0%, transparent 55%),
    linear-gradient(160deg, var(--placeholder-color, #1a1a1a) 0%, #050505 100%);
  color: #fff;
  padding: 32px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.product-card-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
  z-index: 0;
}
.product-card-placeholder svg {
  width: 56%;
  max-width: 180px;
  height: auto;
  opacity: 0.9;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55));
}
.product-card-placeholder .ph-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.product-card-placeholder .ph-title {
  display: none;
}
.product-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
}
.product-card-quick {
  position: absolute;
  bottom: 12px;
  right: 12px;
  left: 12px;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.product-card:hover .product-card-quick {
  opacity: 1;
  transform: translateY(0);
}
.product-card-quick button {
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  width: 100%;
}
.product-card-quick button:hover { background: var(--ink); color: #fff; }

.product-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-card-vendor {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.product-card-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.3;
}
.product-card-price {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.product-card-price .compare {
  font-weight: 400;
  text-decoration: line-through;
  color: var(--muted);
  font-size: 13px;
}
.product-card-price .save {
  color: var(--red);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ---------- HOMEPAGE: ABOUT BLOCK ---------- */
.about-block {
  background: var(--bg-alt);
  padding: var(--sec-pad-y) 0;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.about-grid .h-section { margin: 0 0 14px 0; }
.about-grid p + p { margin-top: 12px; }
.about-grid p { line-height: 1.55; }
.about-media {
  aspect-ratio: 4 / 5;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.4)),
    url("https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=1400&q=80&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  filter: grayscale(0.2) contrast(1.05);
}
@media (max-width: 800px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* ---------- HOMEPAGE: VALUE PROPS TRIO ---------- */
.props {
  border-top: 1px solid var(--hairline);
  padding: var(--sec-pad-y) 0;
}
.props-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 48px);
}
.prop {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 2px solid var(--ink);
  padding-top: 24px;
}
.prop h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-variation-settings: "wdth" 88;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
}
.prop p { font-size: 15px; line-height: 1.55; margin: 0; }
.prop .eyebrow { margin-bottom: 4px; }
@media (max-width: 720px) {
  .props-grid { grid-template-columns: 1fr; }
}

/* ---------- HOMEPAGE: PULL QUOTE ---------- */
.pullquote {
  background: var(--ink);
  color: #fff;
  padding: var(--sec-pad-y) 0;
  text-align: center;
}
.pullquote-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.pullquote h2 {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 56px);
  font-variation-settings: "wdth" 82;
  letter-spacing: -0.04em;
  word-spacing: 0.04em;
  font-weight: 500;
  line-height: 1;
  margin: 0;
}
.pullquote .eyebrow {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 14px;
  display: block;
}
.pullquote .btn { margin-top: 32px; }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  padding: var(--sec-pad-y) 0 32px;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: 64px;
  border-bottom: 1px solid var(--hairline);
}
.footer-brand .h-section { font-size: 28px; }
.footer-brand p { margin-top: 16px; max-width: 320px; font-size: 14px; }
.footer-logo {
  width: 160px;
  height: auto;
  margin-bottom: 16px;
  display: block;
}
.footer-col h4 {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
  color: var(--muted);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 14px;
  color: var(--ink-soft);
  transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--red); }
.footer-newsletter {
  margin-top: 24px;
  display: flex;
  border: 1px solid var(--hairline);
  background: var(--bg);
}
.footer-newsletter input {
  flex: 1;
  padding: 12px 14px;
  font-size: 14px;
  border: none;
  background: transparent;
  outline: none;
}
.footer-newsletter button {
  background: var(--ink);
  color: #fff;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.footer-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  font-size: 12px;
  color: var(--muted);
}
.footer-bot a { color: var(--muted); margin-left: 18px; }
.footer-bot a:hover { color: var(--ink); }
@media (max-width: 800px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============================================================
   SHOP PAGES (Shopify-standard layout)
============================================================ */

/* ---------- SHOP HEADER (collection page) ---------- */
.shop-head {
  padding: var(--sec-pad-y-tight) 0 clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--hairline);
}
.shop-head-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.shop-breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.shop-breadcrumb a:hover { color: var(--ink); }
.shop-head h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-variation-settings: "wdth" 85;
  font-weight: 500;
  letter-spacing: -0.04em;
  word-spacing: 0.04em;
  line-height: 0.98;
  margin: 0 0 12px 0;
}
.shop-head p { max-width: 560px; font-size: 15px; color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* ---------- SHOP TOOLBAR (Shopify-style sort/filter row) ---------- */
.shop-toolbar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--ink-soft);
  flex-wrap: wrap;
  gap: 16px;
}
.shop-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.shop-filter-pill {
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: all var(--t-fast);
}
.shop-filter-pill:hover { border-color: var(--ink); color: var(--ink); }
.shop-filter-pill.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.shop-sort {
  display: flex;
  align-items: center;
  gap: 16px;
}
.shop-sort select {
  padding: 8px 12px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink);
}
.shop-count { color: var(--muted); }

.shop-grid-wrap { padding: clamp(32px, 4vw, 56px) 0 clamp(64px, 9vw, 120px); }

/* ---------- PRODUCT DETAIL PAGE (Shopify PDP) ---------- */
.pdp {
  padding: clamp(32px, 4vw, 56px) 0 clamp(80px, 10vw, 120px);
}
.pdp-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 880px) {
  .pdp-inner { grid-template-columns: 1fr; gap: 32px; }
}
.pdp-gallery {
  position: sticky;
  top: calc(var(--header-h) + var(--announce-h) + 24px);
  display: grid;
  gap: 12px;
}
.pdp-gallery-main {
  aspect-ratio: 1 / 1;
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.pdp-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pdp-gallery-thumb {
  aspect-ratio: 1 / 1;
  background: var(--bg-alt);
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.pdp-gallery-thumb.active { border-color: var(--ink); }

.pdp-info { display: flex; flex-direction: column; gap: 24px; }
.pdp-vendor-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pdp-vendor {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pdp-sku-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border: 1px solid var(--hairline);
  border-radius: 0;
  color: var(--muted);
  cursor: pointer;
  user-select: all;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.pdp-sku-badge:hover { color: var(--ink); border-color: var(--ink); }
.pdp-sku-badge.is-copied { color: #fff; background: var(--red); border-color: var(--red); }
.pdp-meta-sku { font-family: ui-monospace, "SF Mono", Menlo, monospace; user-select: all; }
.pdp-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.035em;
  word-spacing: 0.04em;
  font-weight: 500;
  line-height: 1;
  margin: 0;
}
.pdp-short { font-size: 16px; color: var(--ink-soft); line-height: 1.5; }
.pdp-price {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}
.pdp-price .compare {
  font-size: 18px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
}
.pdp-price .save {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: 4px 8px;
  align-self: center;
}

.pdp-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.pdp-stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
}

.pdp-qty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.pdp-qty label { font-size: 13px; font-weight: 500; }
.pdp-qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
}
.pdp-qty-control button {
  width: 40px;
  height: 44px;
  font-size: 18px;
  color: var(--ink-soft);
  transition: color var(--t-fast);
}
.pdp-qty-control button:hover { color: var(--ink); }
.pdp-qty-control input {
  width: 48px;
  height: 44px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  font-size: 14px;
  font-weight: 500;
  outline: none;
}

.pdp-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

.pdp-meta {
  margin-top: 24px;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.pdp-meta div { display: flex; justify-content: space-between; }
.pdp-meta span:last-child { color: var(--ink-soft); }

.pdp-section {
  margin-top: 32px;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
}
.pdp-section h3 {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.pdp-section p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.pdp-section p + p { margin-top: 14px; }
.pdp-section ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pdp-section li {
  font-size: 14px;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
}
.pdp-section li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 600;
}
.pdp-specs {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  font-size: 14px;
}
.pdp-specs dt { color: var(--muted); }
.pdp-specs dd { color: var(--ink); }

/* Related products row */
.pdp-related {
  border-top: 1px solid var(--hairline);
  padding: var(--sec-pad-y) 0;
}
.pdp-related h2 {
  max-width: var(--maxw);
  margin: 0 auto 32px;
  padding: 0 var(--gutter);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.035em;
  word-spacing: 0.04em;
  line-height: 1;
}

/* ============================================================
   CART DRAWER (Shopify-style slide-in)
============================================================ */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med), visibility var(--t-med);
  z-index: 90;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  background: var(--bg);
  z-index: 100;
  transform: translateX(100%);
  transition: transform var(--t-med);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.08);
}
.cart-drawer.open { transform: translateX(0); }
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-head {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--hairline);
}
.cart-head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.cart-close {
  font-size: 24px;
  line-height: 1;
  color: var(--ink-soft);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-close:hover { color: var(--ink); }

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  gap: 16px;
  color: var(--muted);
}
.cart-empty .h-section { font-size: 24px; }
.cart-empty .btn { margin-top: 8px; }

.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-media {
  aspect-ratio: 1 / 1;
  background: var(--bg-alt);
  background-size: cover;
  background-position: center;
}
.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cart-item-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-item-vendor {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cart-item-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.cart-item-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
}
.cart-item-qty button {
  width: 28px;
  height: 30px;
  color: var(--ink-soft);
  font-size: 14px;
}
.cart-item-qty span {
  width: 32px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}
.cart-item-price { font-size: 14px; font-weight: 500; }
.cart-item-remove {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 4px;
}
.cart-item-remove:hover { color: var(--red); }

.cart-foot {
  padding: 24px;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}
.cart-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.cart-disclaimer {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
  letter-spacing: 0.03em;
}

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  font-size: 14px;
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  transition: all var(--t-med);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.toast::before {
  content: "✓";
  color: #4ade80;
  font-weight: 700;
}

/* ---------- ABOUT PAGE ---------- */
.page-hero {
  padding: var(--sec-pad-y) 0;
  border-bottom: 1px solid var(--hairline);
}
.page-hero-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 84px);
  font-variation-settings: "wdth" 82;
  letter-spacing: -0.045em;
  word-spacing: 0.04em;
  font-weight: 500;
  line-height: 0.96;
  margin: 0 0 14px 0;
  /* Force block so the eyebrow (inline-block .sec-num) doesn't flow inline
     next to the headline. .mask's overflow:hidden + inner span transform
     still work fine on a block parent. */
  display: block;
  width: fit-content;
  max-width: 100%;
}
.page-hero .sec-num {
  display: block;
  margin-bottom: 18px;
}
.page-hero p { font-size: clamp(17px, 1.6vw, 19px); color: var(--ink-soft); max-width: 620px; line-height: 1.5; margin: 0; }

.about-rich {
  padding: var(--sec-pad-y) 0;
}
.about-rich .wrap-narrow > * + * { margin-top: 24px; }
.about-rich h2 {
  margin-top: 56px !important;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.02em;
  font-weight: 500;
}
.about-rich p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.about-rich p strong { color: var(--ink); font-weight: 500; }

/* ---------- CONTACT PAGE ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-meta { display: flex; flex-direction: column; gap: 32px; }
.contact-block h3 {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin: 0 0 8px 0;
}
.contact-block p, .contact-block a { font-size: 15px; color: var(--ink); line-height: 1.55; margin: 0; }
.contact-block a:hover { color: var(--red); }

.form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.form-field input, .form-field textarea {
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  font-size: 15px;
  outline: none;
  transition: border-color var(--t-fast);
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--ink); }
.form-field textarea { min-height: 140px; resize: vertical; }

/* ============================================================
   ADDITIONAL HOMEPAGE SECTIONS
============================================================ */

/* Brand strip - red eyebrow header above, logo grid beneath. */
.brandstrip {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--sec-pad-y-tight) 0;
  background: var(--bg);
}
.brandstrip-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.brandstrip-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin: 0 auto clamp(20px, 2.4vw, 32px) auto;
}
.brandstrip-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  justify-items: center;
}
.brandstrip-logos img {
  height: clamp(28px, 3vw, 36px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity var(--t-fast);
}
.brandstrip-logos img:hover { opacity: 1; }
@media (max-width: 880px) {
  .brandstrip-logos { grid-template-columns: repeat(3, 1fr); row-gap: 32px; gap: 18px; }
  .brandstrip-logos img { height: clamp(24px, 5vw, 32px); }
}

/* Big hero (full-bleed image with overlaid copy) */
.bighero {
  position: relative;
  height: clamp(440px, 68vh, 720px);
  background-color: var(--ink);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.55) 100%),
    url("https://images.unsplash.com/photo-1599351431202-1e0f0137899a?w=2400&q=85&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  color: #fff;
  margin-bottom: 0;
}
.bighero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sec-pad-y) var(--gutter);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
}
.bighero h1 {
  color: #fff;
  font-size: clamp(48px, 9vw, 144px);
  letter-spacing: -0.045em;
  line-height: 0.92;
  font-weight: 500;
  font-family: var(--font-display);
  max-width: 12ch;
}
.bighero-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  text-align: right;
}
.bighero-meta .eyebrow { color: rgba(255,255,255,0.7); }
.bighero-meta p { color: rgba(255,255,255,0.85); max-width: 280px; font-size: 15px; line-height: 1.5; }
@media (max-width: 720px) {
  .bighero-inner { grid-template-columns: 1fr; }
  .bighero-meta { align-items: flex-start; text-align: left; }
}
.bighero-actions {
  position: absolute;
  top: clamp(28px, 4vw, 48px);
  right: clamp(20px, 4vw, 48px);
  display: flex;
  gap: 12px;
}
.bighero-actions .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(8px);
}
.bighero-actions .btn-outline:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Story split (large editorial block) */
.story {
  padding: var(--sec-pad-y) 0;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}
.story-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: stretch;
}
.story-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: clamp(0px, 4vw, 56px);
}
.story-text .h-display { margin: 0 0 4px 0; max-width: 14ch; }
.story-text p { margin: 0; font-size: 17px; line-height: 1.55; }
.story-text .btn { align-self: flex-start; margin-top: 16px; }
.story-media {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  min-height: 520px;
}
.story-media > div {
  background-size: cover;
  background-position: center;
  filter: grayscale(0.25) contrast(1.12) brightness(0.92) saturate(0.9);
  position: relative;
  isolation: isolate;
  transition: filter var(--t-med), transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.story-media > div::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.story-media > div:hover { filter: grayscale(0) contrast(1.05) brightness(1) saturate(1); transform: scale(1.015); }
.story-media .sm-1 {
  grid-row: 1 / 3;
  background-image: url("https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=1400&q=80&auto=format&fit=crop");
}
.story-media .sm-2 {
  background-image: url("https://images.unsplash.com/photo-1622286342621-4bd786c2447c?w=900&q=80&auto=format&fit=crop");
}
.story-media .sm-3 {
  background-image: url("https://images.unsplash.com/photo-1622287162716-f311baa1a2b8?w=900&q=80&auto=format&fit=crop");
}
@media (max-width: 880px) {
  .story-inner { grid-template-columns: 1fr; }
  .story-media { min-height: 380px; }
}

/* Lookbook grid (3-photo atmosphere block) */
.lookbook {
  padding: var(--sec-pad-y) 0;
  background: var(--bg-alt);
}
.lookbook-head {
  max-width: var(--maxw);
  margin: 0 auto 40px;
  padding: 0 var(--gutter);
}
.lookbook-head h2 { margin: 0; }
.lookbook-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lookbook-tile {
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  filter: grayscale(0.4) contrast(1.12) brightness(0.92);
  transition: filter 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  isolation: isolate;
}
.lookbook-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.4) 100%);
  z-index: 1;
  pointer-events: none;
}
.lookbook-tile:hover { filter: grayscale(0) contrast(1.05) brightness(1); transform: scale(1.02); }
.lookbook-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.lookbook-tile span {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: 1;
}
@media (max-width: 720px) { .lookbook-grid { grid-template-columns: 1fr; } }

/* Testimonials block */
.testimonials {
  padding: var(--sec-pad-y) 0;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}
.testimonials-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.testimonials-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}
.testimonials-head h2 { margin: 0; }
.testimonials-head p { margin: 0; line-height: 1.5; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.testimonial {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: 20px;
  font-variation-settings: "wdth" 95;
  line-height: 1.3;
  letter-spacing: -0.02em;
  word-spacing: 0.02em;
  color: var(--ink);
  font-weight: 400;
  font-style: italic;
  margin: 0;
}
.testimonial-quote::before { content: "“"; color: var(--red); font-size: 28px; margin-right: 4px; }
.testimonial-quote::after { content: "”"; color: var(--red); font-size: 28px; margin-left: 4px; }
.testimonial-by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.testimonial-by strong { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.testimonial-by span { font-size: 12px; color: var(--muted); }
@media (max-width: 880px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* Promo block (video / media CTA) */
.promo {
  position: relative;
  min-height: clamp(380px, 55vh, 540px);
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse at 30% 30%, transparent 0%, rgba(0,0,0,0.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%),
    url("https://images.unsplash.com/photo-1622286342621-4bd786c2447c?w=2600&q=90&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  color: #fff;
  isolation: isolate;
}
.promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.promo-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 96px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  width: 100%;
}
.promo h2 {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-variation-settings: "wdth" 82;
  letter-spacing: -0.04em;
  word-spacing: 0.04em;
  font-weight: 500;
  line-height: 0.98;
  margin: 14px 0 0 0;
}
.promo p { color: rgba(255,255,255,0.85); margin: 14px 0 0 0; font-size: 16px; max-width: 480px; line-height: 1.5; }
.promo-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.promo .btn-outline { color: #fff; border-color: #fff; }
.promo .btn-outline:hover { background: #fff; color: var(--ink); }
.promo-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid rgba(255,255,255,0.25);
  padding-left: 24px;
}
.promo-stat-num {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 88px);
  letter-spacing: -0.03em;
  line-height: 0.9;
  font-weight: 500;
  color: #fff;
}
.promo-stat-label {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.7);
  max-width: 220px;
  line-height: 1.4;
}
.promo-stats { display: flex; flex-direction: column; gap: 32px; }
@media (max-width: 720px) { .promo-inner { grid-template-columns: 1fr; } }

/* Newsletter band */
.newsletter-band {
  padding: var(--sec-pad-y) 0;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}
.newsletter-band-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.newsletter-band h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.035em;
  word-spacing: 0.04em;
  line-height: 1;
  font-weight: 500;
  margin: 0;
}
.newsletter-band p { font-size: 14px; color: var(--muted); margin: 8px 0 0 0; line-height: 1.5; }
.newsletter-band-form {
  display: flex;
  border: 1px solid var(--ink);
  background: var(--bg);
}
.newsletter-band-form input {
  flex: 1;
  padding: 16px 20px;
  font-size: 15px;
  border: none;
  background: transparent;
  outline: none;
}
.newsletter-band-form button {
  background: var(--ink);
  color: #fff;
  padding: 0 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.newsletter-band-form button:hover { background: var(--red); }
@media (max-width: 720px) { .newsletter-band-inner { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   CINEMATIC LAYER - loader, cursor, scroll progress, animations
============================================================ */

/* Loader */
.loader {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: clip-path 900ms cubic-bezier(0.85, 0, 0.15, 1);
  clip-path: inset(0 0 0 0);
  pointer-events: none;
}
.loader.done { clip-path: inset(0 0 100% 0); }
.loader-mark {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 120px);
  letter-spacing: -0.045em;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.loader-mark span {
  display: inline-block;
  transform: translateY(110%);
  animation: loaderUp 700ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.loader-mark span:nth-child(2) { animation-delay: 60ms; }
.loader-mark span:nth-child(3) { animation-delay: 120ms; color: var(--red); }
.loader-logo {
  width: clamp(160px, 22vw, 300px);
  height: auto;
  filter: invert(1) brightness(1.1);
  opacity: 0;
  animation: loaderFade 800ms cubic-bezier(0.4, 0, 0.2, 1) 100ms forwards;
}
@keyframes loaderUp {
  to { transform: translateY(0); }
}
@keyframes loaderFade {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.loader-bar {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
}
.loader-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: translateX(-100%);
  animation: loaderBar 800ms cubic-bezier(0.65, 0, 0.35, 1) 200ms forwards;
}
@keyframes loaderBar {
  to { transform: translateX(0); }
}

/* Scroll progress */
.scroll-prog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 95;
  pointer-events: none;
}
.scroll-prog-bar {
  height: 100%;
  background: var(--red);
  width: 0%;
  transition: width 60ms linear;
}

/* Custom cursor (desktop only) */
@media (hover: hover) and (pointer: fine) {
  body.has-cursor { cursor: none; }
  body.has-cursor a, body.has-cursor button, body.has-cursor input, body.has-cursor textarea, body.has-cursor select { cursor: none; }
  .cursor {
    position: fixed;
    top: 0; left: 0;
    width: 8px; height: 8px;
    background: var(--ink);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: width 200ms ease, height 200ms ease, background 200ms ease;
  }
  .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 36px; height: 36px;
    border: 1px solid rgba(10,10,10,0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1),
                height 280ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms ease,
                background 200ms ease,
                opacity 200ms ease;
    mix-blend-mode: difference;
    border-color: rgba(255,255,255,0.5);
  }
  .cursor-ring.is-link {
    width: 64px;
    height: 64px;
    background: rgba(255,255,255,0.06);
  }
  .cursor-ring.is-image {
    width: 92px;
    height: 92px;
    background: rgba(230,57,70,0.95);
    border-color: var(--red);
    mix-blend-mode: normal;
  }
  .cursor-ring.is-image::after {
    content: "VIEW";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.2em;
    font-weight: 600;
    font-family: var(--font-body);
  }
  .cursor-ring.is-drag {
    width: 88px;
    height: 88px;
    background: rgba(10,10,10,0.85);
    border-color: var(--ink);
    mix-blend-mode: normal;
  }
  .cursor-ring.is-drag::after {
    content: "DRAG";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.2em;
    font-weight: 600;
    font-family: var(--font-body);
  }
  .cursor.hidden, .cursor-ring.hidden { opacity: 0; }
}
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-ring { display: none !important; }
}

/* Reveal animations - applied via IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }

/* Mask reveal (for headlines)
   - padding reserves space for descenders (g, y, p, q) and italic ascenders
     so text doesn't get clipped by overflow:hidden during/after animation. */
.mask {
  display: block;
  overflow: hidden;
  padding: 0.08em 0.12em 0.25em 0.08em;
  margin: -0.08em -0.12em -0.25em -0.08em;
  /* No line-height here: it would override the host element's own
     line-height because .mask is applied to the same element as .h-display
     and ties on specificity, and `inherit` would pull body's 1.55 instead
     of the headline's 0.94. */
}
.mask > span {
  display: block;
  transform: translateY(120%);
  transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1);
}
.mask.in > span { transform: translateY(0); }
.mask[data-delay="1"] > span { transition-delay: 100ms; }
.mask[data-delay="2"] > span { transition-delay: 200ms; }
.mask[data-delay="3"] > span { transition-delay: 300ms; }

/* Magnetic */
.magnetic {
  display: inline-block;
  transition: transform 200ms ease-out;
  will-change: transform;
}

/* Section number labels */
.sec-num {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin-bottom: 14px;
}

/* Drag indicator wrapper */
.drag-area { cursor: grab; }
.drag-area:active { cursor: grabbing; }

/* Headline kerning bullet */
.bullet { color: var(--red); }

/* ============================================================
   ENHANCED SECTIONS (oversized + editorial)
============================================================ */

/* Asymmetric featured grid - one big, three small */
.featured-asym {
  padding: var(--sec-pad-y) 0;
}
.featured-asym-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.featured-asym-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 48px;
  max-width: 920px;
}
.featured-asym-head > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.featured-asym-head .h-display { margin: 0; max-width: none; }
.featured-asym-head .lead {
  margin: 0;
  line-height: 1.5;
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 540px;
}
@media (max-width: 720px) {
  .featured-asym-head { grid-template-columns: 1fr; }
}
.featured-asym-grid {
  display: grid;
  /* 4 category tiles: 2x2 equal grid (Clippers/Blades/Hygiene/Combs).
     Bundles category lives only inside /shop now per uncle's request. */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  min-height: 640px;
}
.featured-asym-grid > a {
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 32px;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--t-med);
}
.featured-asym-grid > a::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-image: var(--bg-img);
  filter: grayscale(0.3) contrast(1.15) brightness(0.88) saturate(0.9);
  transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1), filter 600ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -2;
}
.featured-asym-grid > a::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.7) 100%);
  z-index: -1;
}
.featured-asym-grid > a:hover::before { transform: scale(1.06); filter: grayscale(0) contrast(1.05) brightness(1) saturate(1); }
.featured-asym-grid .fa-big {
  --bg-img: url("https://images.unsplash.com/photo-1599351431202-1e0f0137899a?w=1800&q=90&auto=format&fit=crop");
  min-height: 320px;
}
.featured-asym-grid .fa-1 { --bg-img: url("https://images.unsplash.com/photo-1622286342621-4bd786c2447c?w=1100&q=90&auto=format&fit=crop"); }
.featured-asym-grid .fa-2 { --bg-img: url("https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?w=1100&q=90&auto=format&fit=crop"); }
.featured-asym-grid .fa-3 { --bg-img: url("https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=1100&q=90&auto=format&fit=crop"); }
.featured-asym-grid .fa-4 { --bg-img: url("https://images.unsplash.com/photo-1622287162716-f311baa1a2b8?w=1100&q=90&auto=format&fit=crop"); }
.fa-card-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.fa-card-inner .eyebrow { color: rgba(255,255,255,0.7); }
.fa-card-inner h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 32px);
  font-variation-settings: "wdth" 88;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  word-spacing: 0.04em;
  line-height: 1;
  margin: 0;
}
.fa-card-inner .fa-arrow {
  position: absolute;
  top: -180px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  transition: background var(--t-fast), transform var(--t-fast);
}
.featured-asym-grid > a:hover .fa-arrow { background: var(--red); transform: rotate(-45deg); }
@media (max-width: 880px) {
  .featured-asym-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    min-height: auto;
  }
  .featured-asym-grid .fa-big { grid-row: auto; grid-column: 1 / -1; min-height: 360px; }
}
@media (max-width: 560px) {
  /* Single column on small phones - otherwise the 2-col grid + an orphan
     fourth card leaves a gap. Each category gets the full reading width. */
  .featured-asym-grid { grid-template-columns: 1fr; }
  .featured-asym-grid > a { min-height: 200px; padding: 24px; }
  .featured-asym-grid .fa-big { min-height: 260px; }
}

/* Horizontal scroll product strip */
.scroll-strip {
  padding: var(--sec-pad-y) 0;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.scroll-strip-head {
  max-width: var(--maxw);
  margin: 0 auto 48px;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 16px;
}
.scroll-strip-head .h-display { color: #fff; max-width: 14ch; margin: 0; }
.scroll-strip-head p { color: rgba(255,255,255,0.7); max-width: 360px; font-size: 15px; margin: 0; line-height: 1.5; }
.scroll-strip-head .sec-num { color: rgba(255,255,255,0.6); }
.scroll-strip-head .sec-num::before { background: var(--red); }
.scroll-strip-track {
  display: flex;
  gap: 24px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.scroll-strip-track::-webkit-scrollbar { display: none; }
.scroll-strip-card {
  flex: 0 0 clamp(260px, 30vw, 380px);
  scroll-snap-align: start;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: #fff;
  transition: background var(--t-fast), border-color var(--t-fast);
  position: relative;
}
.scroll-strip-card:hover { background: #232323; border-color: rgba(230,57,70,0.5); }
.scroll-strip-card-img {
  aspect-ratio: 4 / 3;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.scroll-strip-card-img svg { width: 60%; max-width: 140px; opacity: 0.85; }
.scroll-strip-card-num {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.4);
}
.scroll-strip-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.scroll-strip-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.scroll-strip-card-meta strong { color: #fff; font-weight: 500; }

/* Sticky reveal section (text scrolls, image stays) */
.sticky-reveal {
  background: var(--bg);
  padding: var(--sec-pad-y) 0;
  border-top: 1px solid var(--hairline);
}
.sticky-reveal-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.sticky-reveal-img {
  position: sticky;
  top: calc(var(--header-h) + var(--announce-h) + 24px);
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-image:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.45)),
    url("https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=1600&q=90&auto=format&fit=crop");
  filter: grayscale(0.3) contrast(1.12) brightness(0.95) saturate(0.92);
  isolation: isolate;
}
.sticky-reveal-text { display: flex; flex-direction: column; gap: 80px; padding-top: 40px; }
.sticky-reveal-step h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-variation-settings: "wdth" 88;
  font-weight: 500;
  letter-spacing: -0.035em;
  word-spacing: 0.04em;
  line-height: 1.08;
  margin: 0 0 12px 0;
  padding-bottom: 0.08em;
}
.sticky-reveal-step .num {
  font-family: var(--font-display);
  font-size: 56px;
  font-variation-settings: "wdth" 80;
  color: var(--red);
  font-weight: 500;
  display: block;
  margin: 0 0 12px 0;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.sticky-reveal-step p { font-size: 15px; line-height: 1.55; margin: 0; }
@media (max-width: 880px) {
  .sticky-reveal-inner { grid-template-columns: 1fr; }
  .sticky-reveal-img { position: relative; top: 0; aspect-ratio: 16/10; }
}

/* Heritage manifesto band - replaces dual marquee */
.heritage-band {
  background: var(--ink);
  color: #fff;
  padding: var(--sec-pad-y-tight) 0;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.heritage-band::before,
.heritage-band::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(280px, 60vw, 880px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}
.heritage-band::before { top: 16px; }
.heritage-band::after { bottom: 16px; }

.heritage-band-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.heritage-tag {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(230,57,70,0.95);
  font-weight: 600;
  display: inline-block;
}
.heritage-statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "wdth" 95;
  font-size: clamp(30px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
  max-width: 20ch;
  text-wrap: balance;
}
.heritage-statement em {
  font-family: inherit;
  font-style: italic;
  font-weight: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  color: rgba(255,255,255,0.95);
}
.heritage-statement b {
  font-style: normal;
  font-weight: 500;
  color: var(--red);
}
.heritage-meta {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 32px);
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  flex-wrap: nowrap;
  font-family: var(--font-body);
  font-weight: 500;
  white-space: nowrap;
}
.heritage-meta span { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.heritage-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .heritage-meta {
    font-size: 9px;
    letter-spacing: 0.08em;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  .heritage-meta::-webkit-scrollbar { display: none; }
  .heritage-meta .dot { width: 3px; height: 3px; }
}

/* Marquee dual-row */
.marquee-stack { display: flex; flex-direction: column; }
.marquee-row {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--bg);
}
.marquee-row + .marquee-row { border-top: none; background: var(--ink); color: #fff; }
.marquee-row + .marquee-row .marquee-track-r { color: #fff; }
.marquee-row + .marquee-row .marquee-track-r span::after { color: var(--red); }
.marquee-track-r {
  display: inline-flex;
  gap: 56px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.01em;
  animation: marquee 32s linear infinite;
}
.marquee-track-r.reverse { animation-direction: reverse; }
.marquee-track-r span { display: inline-flex; align-items: center; gap: 56px; }
.marquee-track-r span::after { content: "✱"; color: var(--red); }

/* Numbered editorial header */
.editorial-head {
  max-width: var(--maxw);
  margin: 0 auto 48px;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.editorial-head > div:empty { display: none; }
.editorial-head .col-1 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 920px;
}
.editorial-head .col-1 .sec-num { margin-bottom: 0; }
.editorial-head h2.h-display { max-width: none; margin: 0; }
.editorial-head .col-3 p {
  font-size: 16px;
  line-height: 1.5;
  max-width: 540px;
  margin: 0;
  color: var(--ink-soft);
}

/* Cinema hero - full-bleed photo background, overlaid editorial copy */
.cinema-hero {
  position: relative;
  height: clamp(620px, 92vh, 880px);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  background: #0a0a0a;
}
.cinema-hero-slides {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.cinema-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.18) contrast(1.08) brightness(0.78) saturate(0.95);
  opacity: 0;
  /* Continuous slow pan, never stops, so transitions don't snap.
     Each slide is independently animating; the crossfade just decides
     which one you can see. */
  animation: kenBurns 22s linear infinite alternate;
  transition: opacity 2800ms cubic-bezier(0.45, 0.05, 0.25, 1);
  will-change: opacity, transform;
}
.cinema-hero-slide.is-active {
  opacity: 1;
}
@keyframes kenBurns {
  0%   { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.18) translate(-2%, -2%); }
}
.cinema-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.85) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0) 100%);
  z-index: -2;
}
.cinema-hero::after {
  /* film grain */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
  mix-blend-mode: overlay;
}

.cinema-hero-top {
  position: absolute;
  inset: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px) auto clamp(20px, 4vw, 56px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  z-index: 1;
}
.cinema-hero-top .pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cinema-hero-top .pulse::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(230,57,70,0.7);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(230,57,70,0.7); }
  100% { box-shadow: 0 0 0 14px rgba(230,57,70,0); }
}

.cinema-hero-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 clamp(20px, 4vw, 56px) clamp(40px, 5vw, 64px);
  max-width: var(--maxw);
  margin: 0 auto;
  gap: 4px;
}
.cinema-hero-content .cinema-hero-bottom {
  margin-top: clamp(28px, 3vw, 40px);
}
@media (max-width: 720px) {
  .cinema-hero-content .cinema-hero-bottom { margin-top: 28px; }
  /* On small viewports the content stack is taller than the empty space
     flex-end leaves, so it rides up to collide with .cinema-hero-top.
     Reserving top padding keeps the eyebrow clear of the absolutely
     positioned location/issue line. */
  .cinema-hero-content { padding-top: 70px; }
}
@media (max-width: 720px) and (max-height: 720px) {
  /* Short phones: also raise the hero floor so content actually fits. */
  .cinema-hero { height: auto; min-height: 720px; }
}
.cinema-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin: 0;
}
.cinema-hero h1 {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(64px, 11vw, 160px);
  font-variation-settings: "wdth" 80;
  letter-spacing: -0.045em;
  word-spacing: 0.04em;
  line-height: 0.92;
  font-weight: 500;
  max-width: 18ch;
  text-shadow: 0 4px 28px rgba(0,0,0,0.5);
  /* Vertical-only margin reset; preserves the .mask negative inline margins
     that align the visible text with the eyebrow + lead beneath. */
  margin-block: 0;
}
.cinema-hero h1 em {
  font-family: inherit;
  font-style: italic;
  font-weight: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  color: #fff;
}
.cinema-hero-eyebrow,
.cinema-hero-lead,
.cinema-hero-meta,
.cinema-hero-meta strong {
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.cinema-hero-lead { color: #fff !important; }
.cinema-hero-eyebrow { color: #fff !important; }
.cinema-hero-meta strong, .cinema-hero-meta span { color: #fff !important; }
.cinema-hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin: 0;
}
.cinema-hero-lead {
  max-width: 540px;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  margin: clamp(28px, 3vw, 40px) 0 0;
}
.cinema-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}
@media (max-width: 560px) {
  /* Stack the hero CTAs full-width on phones so they read as a clean
     primary/secondary stack rather than the lopsided pill row. */
  .cinema-hero-actions { flex-direction: column; align-items: stretch; }
  .cinema-hero-actions .btn,
  .cinema-hero-actions .btn-outline { width: 100%; justify-content: center; min-height: 48px; }
}
.cinema-hero-actions .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
}
.cinema-hero-actions .btn-outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
.cinema-hero-meta {
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: end;
}
.cinema-hero-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #fff;
  text-transform: none;
  margin-bottom: 4px;
}
@media (max-width: 720px) {
  .cinema-hero-bottom { grid-template-columns: 1fr; }
  .cinema-hero-meta { text-align: left; }
}

/* Stats strip beneath hero */
.hero-stats {
  background: var(--ink);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero-stats-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px var(--gutter);
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.hero-stats-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid rgba(255,255,255,0.12);
  padding-left: 24px;
}
.hero-stat strong {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero-stat span {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
@media (max-width: 720px) {
  .hero-stats-inner { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hero-stats-label { grid-column: 1 / -1; }
  .hero-stat { padding-left: 16px; }
}

/* Pricing/comparison row inside featured */
.callout-strip {
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 32px 0;
}
.callout-strip-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.callout {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.callout-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  color: var(--red);
}
.callout-title { font-size: 14px; font-weight: 500; color: var(--ink); }
.callout-sub { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
@media (max-width: 720px) { .callout-strip-inner { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   INFO LIST + FAQ (shipping, faq pages)
============================================================ */
.info-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
  margin-top: 8px;
}
.info-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
}
.info-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding-top: 4px;
}
.info-value {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.info-value strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.info-value span {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.info-value a {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.info-value a:hover { color: var(--red); border-color: var(--red); }
@media (max-width: 720px) {
  .info-row { grid-template-columns: 1fr; gap: 8px; }
}

.faq-group { margin-bottom: 56px; }
.faq-group .sec-num { display: block; margin-bottom: 24px; }
.faq-item {
  border-bottom: 1px solid var(--hairline);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color var(--t-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 24px;
  font-weight: 400;
  color: var(--muted);
  transition: transform var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
.faq-item[open] summary::after {
  content: "−";
  color: var(--red);
}
.faq-item:hover summary { color: var(--red); }
.faq-item p {
  padding: 0 0 24px 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.faq-item a {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.faq-item a:hover { color: var(--red); border-color: var(--red); }

/* ---------- UTILITIES ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.divider {
  height: 1px;
  background: var(--hairline);
  border: 0;
  max-width: var(--maxw);
  margin: 0 auto;
}
.text-red { color: var(--red); }

/* ============================================================
   POPUPS - welcome 10% off + newsletter exit-intent
============================================================ */
.popup {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.popup.is-open { opacity: 1; pointer-events: auto; }
.popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.popup-card {
  position: relative;
  z-index: 1;
  background: var(--bg);
  width: min(440px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin: clamp(20px, 6vh, 80px) auto 0 auto;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--hairline);
  transform: translateY(12px) scale(0.98);
  transition: transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1);
  text-align: left;
}
.popup.is-open .popup-card { transform: translateY(0) scale(1); }
.popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 0;
  transition: background var(--t-fast);
}
.popup-close:hover { background: var(--bg-alt); }
.popup-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin-bottom: 14px;
}
.popup-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 38px);
  font-variation-settings: "wdth" 88;
  line-height: 1;
  letter-spacing: -0.035em;
  word-spacing: 0.04em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 14px 0;
}
.popup-title em {
  font-family: inherit;
  font-style: italic;
  font-weight: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  color: var(--red);
  margin-inline: -0.08em 0.1em;
}
.popup-lead {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 22px 0;
}
.popup-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.popup-form input {
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  font-size: 15px;
  outline: none;
  transition: border-color var(--t-fast);
  font-family: inherit;
}
.popup-form input:focus { border-color: var(--ink); }
.popup-fineprint {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 480px) {
  .popup-card { margin-top: clamp(40px, 14vh, 120px); }
}

/* ============================================================
   RETAIL RAILS - best sellers / daily essentials
============================================================ */
.rail {
  padding: var(--sec-pad-y) 0;
  background: var(--bg);
}
/* Daily essentials rail - premium dark surface for visual contrast.
   Inverts the product cards so they read as a deliberate retail block, not
   a faded background-tone section. */
.rail.rail-alt {
  background: var(--ink);
  position: relative;
}
.rail.rail-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top left, rgba(230, 57, 70, 0.08), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(255, 255, 255, 0.04), transparent 60%);
  pointer-events: none;
}
.rail.rail-alt .rail-inner { position: relative; z-index: 1; }
.rail.rail-alt .rail-title { color: #fff; }
.rail.rail-alt .sec-num { color: var(--red); }
.rail.rail-alt .rail-more {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.4);
}
.rail.rail-alt .rail-more:hover { color: var(--red); border-bottom-color: var(--red); }
.rail.rail-alt .product-card-media-wrap {
  background: #fff;
  border-color: transparent;
}
.rail.rail-alt .product-card-vendor { color: rgba(255, 255, 255, 0.55); }
.rail.rail-alt .product-card-title { color: #fff; }
.rail.rail-alt .product-card-price,
.rail.rail-alt .price-now,
.rail.rail-alt .product-card-info > * { color: #fff; }
.rail.rail-alt .product-card-info .compare { color: rgba(255, 255, 255, 0.5); }
.rail-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.rail-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.rail-head .sec-num { color: var(--red); }
.rail-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.035em;
  word-spacing: 0.04em;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  margin: 8px 0 0 0;
}
.rail-more {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.rail-more:hover { color: var(--red); border-bottom-color: var(--red); }
@media (max-width: 720px) {
  .rail-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .rail-title { font-size: clamp(26px, 7vw, 32px); }
  .rail { padding: 36px 0 !important; }
}

/* ============================================================
   BUNDLE SPOTLIGHT - savings forward
============================================================ */
.bundle-spotlight {
  padding: var(--sec-pad-y-tight) var(--gutter);
  background: var(--bg);
}
.bundle-spotlight-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}
.bundle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(28px, 3.4vw, 48px);
  text-decoration: none;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--ink);
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.bundle-card:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
}
.bundle-card.bundle-card-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.bundle-card.bundle-card-primary h3,
.bundle-card.bundle-card-primary .price-now { color: #fff; }
.bundle-card.bundle-card-primary p { color: rgba(255,255,255,0.78); }
.bundle-card.bundle-card-primary .price-was { color: rgba(255,255,255,0.45); }
.bundle-card.bundle-card-primary .bundle-cta { color: #fff; border-bottom-color: #fff; }
.bundle-card.bundle-card-primary:hover { border-color: var(--red); }
.bundle-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bundle-card h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 36px);
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.035em;
  word-spacing: 0.04em;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  margin: 8px 0 0 0;
}
.bundle-card p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.bundle-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
}
.bundle-price .price-now {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 600;
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bundle-price .price-was {
  font-size: 16px;
  text-decoration: line-through;
  color: var(--muted);
}
.bundle-cta {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  align-self: flex-start;
  padding-bottom: 3px;
  margin-top: 6px;
}
@media (max-width: 720px) {
  .bundle-spotlight-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT PAGE - visual cards + hours + form
============================================================ */
.contact-cards-section {
  padding: var(--sec-pad-y) var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}
.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid var(--hairline);
  background: var(--bg);
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  isolation: isolate;
}
.contact-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 0 14px 32px -18px rgba(10, 10, 10, 0.22);
}
.contact-card.contact-card-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.contact-card.contact-card-primary h3,
.contact-card.contact-card-primary .contact-card-link { color: #fff; }
.contact-card.contact-card-primary p { color: rgba(255, 255, 255, 0.78); }
.contact-card.contact-card-primary:hover { border-color: var(--red); }
.contact-card-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 9px;
}
.contact-card-icon {
  width: 28px;
  height: 28px;
  color: var(--red);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-card.contact-card-primary .contact-card-icon { color: var(--red); }
.contact-card h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-variation-settings: "wdth" 90;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.contact-card p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}
.contact-card-link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  align-self: flex-start;
  margin-top: 6px;
  word-break: break-all;
}
@media (max-width: 880px) {
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .contact-cards { grid-template-columns: 1fr; }
}

.hours-strip {
  background: var(--bg-alt);
  padding: clamp(28px, 3.4vw, 40px) var(--gutter);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.hours-strip-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.hours-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hours-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.hours-time {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  font-variation-settings: "wdth" 92;
  color: var(--ink);
  letter-spacing: -0.01em;
}
@media (max-width: 720px) {
  .hours-strip-inner { grid-template-columns: repeat(2, 1fr); }
}

.contact-form-section {
  padding: var(--sec-pad-y) var(--gutter);
  max-width: 920px;
  margin: 0 auto;
}
.contact-form-head { margin-bottom: clamp(28px, 3vw, 40px); }
.contact-form-head .sec-num { color: var(--red); }
.contact-form-head h2 { margin-top: 8px; }
.contact-form-head p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 14px 0 0 0;
  max-width: 540px;
}
.form-field select {
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  font-size: 15px;
  outline: none;
  transition: border-color var(--t-fast);
  font-family: inherit;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.form-field select:focus { border-color: var(--ink); }

/* Floating bag - never overlap form fields. Push body content above it. */
@media (max-width: 880px) {
  body { padding-bottom: 92px; }
  .contact-form-section { padding-bottom: clamp(40px, 5vw, 64px); }
}

/* ============================================================
   SEARCH - header trigger + full-page overlay
============================================================ */
/* Search trigger styled to match the other nav text links exactly. */
.nav-search {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  position: relative;
  transition: color var(--t-fast);
  white-space: nowrap;
}
.nav-search::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--red);
  transition: width var(--t-fast);
}
.nav-search:hover { color: var(--ink); }
.nav-search:hover::after { width: 100%; }

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.search-overlay.is-open { opacity: 1; pointer-events: auto; }
.search-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.search-overlay-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  transform: translateY(-12px);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.search-overlay.is-open .search-overlay-card { transform: translateY(0); }
.search-overlay-form {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px clamp(20px, 4vw, 48px);
  border-bottom: 1px solid var(--hairline);
}
.search-overlay-icon {
  width: 22px;
  height: 22px;
  color: var(--muted);
  flex-shrink: 0;
}
.search-overlay-input {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 500;
  font-variation-settings: "wdth" 92;
  letter-spacing: -0.02em;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  padding: 6px 0;
  width: 100%;
  min-width: 0;
}
.search-overlay-input::placeholder { color: var(--muted); }
.search-overlay-close {
  width: 36px;
  height: 36px;
  border-radius: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-soft);
  background: var(--bg-alt);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.search-overlay-close:hover { background: var(--ink); color: #fff; }
.search-overlay-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px clamp(20px, 4vw, 48px);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
}
.search-overlay-all {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.search-overlay-all:hover { color: var(--red); border-bottom-color: var(--red); }
.search-overlay-results {
  flex: 1;
  overflow-y: auto;
  padding: 4px clamp(12px, 4vw, 32px) clamp(20px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.search-result {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  padding: 14px 12px;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  border-radius: 0;
  transition: background var(--t-fast);
}
.search-result:hover { background: var(--bg-alt); }
.search-result-img {
  width: 64px;
  height: 64px;
  background: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--hairline);
}
.search-result-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.search-result-vendor {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.search-result-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.2;
}
.search-result-meta {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.search-result-price {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  flex-shrink: 0;
}
.search-overlay-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}
.search-overlay-empty strong { color: var(--ink); }
.search-suggest {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 2px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  font-size: 12px;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.search-suggest:hover { border-color: var(--ink); color: var(--red); }

@media (max-width: 720px) {
  .search-overlay-card { max-height: 100vh; height: 100vh; }
  .search-overlay-meta .search-overlay-all { font-size: 10px; }
}

/* ============================================================
   SEARCH PAGE
============================================================ */
.search-page-hero {
  padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(28px, 3vw, 40px);
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.search-page-hero .sec-num { color: var(--red); display: block; margin-bottom: 18px; }
.search-page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.035em;
  word-spacing: 0.04em;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 28px 0;
}
.search-page-form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 18px;
  border: 1.5px solid var(--ink);
  background: var(--bg);
}
.search-page-form svg { width: 20px; height: 20px; color: var(--ink); flex-shrink: 0; }
.search-page-form input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 16px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  padding: 6px 0;
  min-width: 0;
}
.search-page-form button {
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 10px 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.search-page-form button:hover { background: var(--red); }

.search-page-results {
  padding: 0 var(--gutter) clamp(56px, 7vw, 96px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.search-page-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.search-page-meta strong { color: var(--ink); }
.search-page-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-soft);
}
.search-page-empty h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  font-variation-settings: "wdth" 92;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 14px 0;
}
.search-page-empty p { font-size: 15px; line-height: 1.6; max-width: 480px; margin: 0 auto 24px; }

/* Popular categories block (used when no query) */
.search-popular {
  padding: var(--sec-pad-y-tight) var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}
.search-popular-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.search-popular-head .sec-num { color: var(--red); }
.search-popular-head h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 500;
  font-variation-settings: "wdth" 90;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 6px 0 0 0;
}
.search-popular-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-popular-pill {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.search-popular-pill:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============================================================
   ACCOUNT DRAWER - mock signed-in panel + bag preview
============================================================ */
.account-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}
.account-drawer.is-open { pointer-events: auto; visibility: visible; }
.account-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.account-drawer.is-open .account-drawer-backdrop { opacity: 1; }
.account-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  flex-direction: column;
  padding: 24px 24px 28px;
  overflow-y: auto;
  box-shadow: -8px 0 40px rgba(0,0,0,0.18);
}
.account-drawer.is-open .account-drawer-panel { transform: translateX(0); }

.account-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.account-drawer-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.account-drawer-close {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  border-radius: 0;
  transition: background var(--t-fast);
}
.account-drawer-close:hover { background: var(--bg-alt); }

/* Account card (avatar + name + tier) */
.account-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: var(--bg-alt);
  border-radius: 0;
  margin-bottom: 16px;
}
.account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.account-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.account-info strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.account-info span {
  font-size: 13px;
  color: var(--muted);
}
.account-info .account-tag {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 3px 10px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  align-self: flex-start;
}

/* Stats grid */
.account-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
}
.account-stats li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 0;
}
.account-stats span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.account-stats strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

/* Bag heading + items */
.account-bag-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.account-bag-head h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.account-bag-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.account-bag {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
}
.account-bag-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--bg);
}
.account-bag-thumb {
  width: 56px;
  height: 56px;
  border-radius: 0;
  background: var(--bg-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.account-bag-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-bag-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.account-bag-meta strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-bag-meta span {
  font-size: 12px;
  color: var(--muted);
}
.account-bag-line {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* Totals + checkout */
.account-totals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  margin-bottom: 4px;
}
.account-totals span {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.account-totals strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.account-totals-note {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 16px;
}
.account-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  padding: 0 20px;
  border: none;
  border-radius: 0;
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.account-checkout:hover { background: var(--red-dark); transform: translateY(-1px); }
.account-signout {
  margin-top: 12px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 8px;
  align-self: center;
  transition: color var(--t-fast);
}
.account-signout:hover { color: var(--ink); }

/* ============================================================
   SEARCH DROPDOWN - anchored under the header search bar.
   Replaces the old full-screen overlay so the page stays in
   view while the user types.
============================================================ */
.search-dropdown {
  position: fixed;
  background: #fff;
  z-index: 110;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  max-height: min(72vh, 620px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  border: 1px solid var(--hairline);
}
.search-dropdown.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.search-dropdown-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.search-dropdown-input-row > svg {
  width: 22px;
  height: 22px;
  color: var(--red);
  flex-shrink: 0;
}
.search-dropdown-input {
  flex: 1;
  font-size: 16px;
  line-height: 1.4;
  border: none;
  background: none;
  padding: 4px 0;
  font-family: var(--font-body);
  color: var(--ink);
  outline: none;
}
.search-dropdown-input::placeholder { color: var(--muted); }
.search-dropdown-clear {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  border: none;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.search-dropdown-clear:hover { background: var(--hairline); }

/* Tabs */
.search-dropdown-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 0 18px;
  flex-shrink: 0;
}
.search-dropdown-tab {
  padding: 14px 4px;
  margin-right: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
  letter-spacing: 0.01em;
}
.search-dropdown-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.search-dropdown-tab:hover { color: var(--ink); }

/* Result panes */
.search-dropdown-pane {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.search-dropdown-pane.is-hidden { display: none; }
.search-dropdown-result {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  padding: 10px 18px;
  text-decoration: none;
  color: var(--ink);
  align-items: center;
  transition: background var(--t-fast);
}
.search-dropdown-result:hover { background: var(--bg-alt); }
.search-dropdown-thumb {
  width: 56px;
  height: 56px;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.search-dropdown-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.search-dropdown-thumb--icon { color: var(--ink); }
.search-dropdown-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.search-dropdown-meta strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-dropdown-meta span {
  font-size: 12px;
  color: var(--muted);
}
.search-dropdown-price {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.search-dropdown-empty {
  padding: 36px 22px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  line-height: 1.55;
}
.search-dropdown-empty strong { color: var(--ink); }

/* Visual cue on the trigger when open */
.header-search.is-active { box-shadow: 0 0 0 2px var(--ink) inset; }

/* Mobile: dropdown spans full screen width minus side padding */
@media (max-width: 880px) {
  .search-dropdown { max-height: calc(100vh - 200px); }
  .search-dropdown-input-row { padding: 12px 14px; }
  .search-dropdown-tabs { padding: 0 14px; }
  .search-dropdown-result { padding: 10px 14px; }
}

/* ============================================================
   COHESION LAYER - final unifying rules so sections feel like
   they shipped together. Applied at the end so they cleanly
   override anything bespoke earlier in the file.
============================================================ */

/* Section-num inversion utility (replaces repeated inline color overrides
   on dark promo / footer-style sections) */
.sec-num--invert,
.promo .sec-num,
.cinema-hero .sec-num { color: rgba(255, 255, 255, 0.72); }

/* Buttons share a single subtle lift on hover so every CTA reads the same */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Card-style links share one hover treatment (cards = anchors that wrap a
   visual block: contact-card, callout cards, prop, fa-card). Border darkens
   on hover so the cohesion reads at a glance. */
.contact-card,
.lookbook-tile,
.featured-asym-grid > a {
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

/* Make every form field height/border match across pages */
.form-field input,
.form-field select,
.form-field textarea {
  border-radius: 0;
}

/* Cap heading-image gaps so .lead under a heading is consistent everywhere */
section .h-display + .lead,
section h1 + .lead,
section h2 + p {
  margin-top: 16px;
}

/* The one remaining loud inline override that mattered: vendor caption in the
   homepage scroll strip. Move it to a class so the markup is clean. */
.vendor-caption {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  margin-bottom: 6px;
}