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

  /* ONE type scale. Every heading points at a step here so the same
     hierarchical level cannot render at three different sizes, which is what
     was happening on the homepage (44 / 48 / 40 / 69 for the same level). */
  --fs-hero:    clamp(56px, 11vw, 168px);
  --fs-page:    clamp(36px, 5.4vw, 72px);
  --fs-section: clamp(26px, 2.8vw, 38px);
  --fs-card:    18px;

  /* Section rhythm. Mobile floor stays modest on purpose (64px was tried and
     left huge gaps on phones); the DESKTOP ceiling is what went up. Three roles
     rather than one value, so the page has a cadence. */
  --sec-pad-y: clamp(48px, 7vw, 128px);
  --sec-pad-y-tight: clamp(28px, 4vw, 72px);
  --sec-pad-y-loose: clamp(60px, 8.5vw, 156px);

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

/* Visible keyboard focus across all interactive controls, in the brand red.
   Several inputs below strip the native outline; this restores a focus cue
   for keyboard users without affecting mouse clicks (:focus-visible only). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ---------- 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: var(--fs-hero);
  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: var(--fs-page);
  line-height: 0.94;
  letter-spacing: -0.045em;
  word-spacing: 0.04em;
}

.h-section {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  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: var(--ink);
  }
  .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) {
  /* 3-element mobile header: circular hamburger / centered logo / circular red search.
     Tap-to-open search modal via existing data-search-trigger instead of full-width row.
     Reference pattern: Salt & Straw, Van Leeuwen mobile e-commerce. */
  .header-top-inner {
    grid-template-columns: 40px 1fr 40px;
    grid-template-rows: auto;
    grid-auto-flow: dense;
    column-gap: 10px;
    row-gap: 0;
    padding: 10px 16px;
  }
  /* Circular grey hamburger */
  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    transition: background var(--t-fast);
  }
  .menu-toggle:hover,
  .menu-toggle:focus-visible { background: rgba(255, 255, 255, 0.24); }
  .menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }
  .brand {
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-self: center;
  }
  .brand-mark { height: 44px; }

  /* Hide the desktop right-side actions; mobile uses the circular red search */
  .header-actions { display: none; }

  /* Full-width search row collapses : search opens via the .header-action-search icon */
  .header-search { display: none; }

  /* Circular red search action button on the right : mirrors hamburger shape */
  .header-action-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    border: none;
    cursor: pointer;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    transition: background var(--t-fast), transform var(--t-fast);
  }
  .header-action-search:hover,
  .header-action-search:focus-visible { background: var(--red-dark, #c62b38); transform: scale(1.05); }
  .header-action-search svg { width: 20px; height: 20px; }

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

@media (max-width: 880px) { :root { --header-h: 84px; } }
@media (max-width: 380px) {
  .header-top-inner { padding: 9px 12px; column-gap: 8px; }
  .brand-mark { height: 40px; }
  .menu-toggle { width: 38px; height: 38px; }
  .header-action-search { width: 38px; height: 38px; }
}

/* Desktop: hide the mobile-only search icon */
@media (min-width: 881px) {
  .header-action-search { display: none; }
}

/* ============================================================
   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.55);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.mobile-drawer.open .mobile-drawer-backdrop { opacity: 1; }

/* Top-drop-down panel: full-width, slides down from the top.
   BarberGear palette: dark ink bg, red accents (vs Certified Scoop's blue+yellow). */
.mobile-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  background: linear-gradient(180deg, var(--ink) 0%, #1a0d0e 100%);
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  flex-direction: column;
  padding: 18px 22px 24px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  color: #fff;
}
.mobile-drawer.open .mobile-drawer-panel { transform: translateY(0); }
.mobile-drawer-close {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.10);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}
.mobile-drawer-close:hover { background: rgba(255, 255, 255, 0.20); }

.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  counter-reset: navnum;
}

/* Eyebrow labels (Menu, Follow BarberGear) */
.mobile-drawer-nav .drawer-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(230, 57, 70, 0.32);
  position: relative;
}
.mobile-drawer-nav .drawer-eyebrow::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 1.5px;
  background: var(--red);
  vertical-align: middle;
  margin-right: 8px;
  transform: translateY(-2px);
}

/* Numbered nav items */
.mobile-drawer-nav a,
.mobile-drawer-nav > button {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  font-variation-settings: "wdth" 90;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 9px 0;
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast), transform var(--t-fast);
}
.mobile-drawer-nav a::before,
.mobile-drawer-nav > button::before {
  counter-increment: navnum;
  content: counter(navnum, decimal-leading-zero);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(230, 57, 70, 0.7);
  flex: 0 0 auto;
  transform: translateY(-5px);
}
.mobile-drawer-nav a::after,
.mobile-drawer-nav > button::after {
  content: '→';
  margin-left: auto;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.3);
  transition: color var(--t-fast), transform var(--t-fast);
  align-self: center;
}
.mobile-drawer-nav a:hover,
.mobile-drawer-nav > button:hover { color: var(--red); transform: translateX(4px); }
.mobile-drawer-nav a:hover::after,
.mobile-drawer-nav > button:hover::after { color: var(--red); transform: translateX(4px); }
.mobile-drawer-nav a:last-of-type:not(.drawer-eyebrow),
.mobile-drawer-nav > button:last-of-type { border-bottom: none; }

/* Active page link : number, label and arrow all go red */
.mobile-drawer-nav a[aria-current="page"] { color: var(--red); }
.mobile-drawer-nav a[aria-current="page"]::before,
.mobile-drawer-nav a[aria-current="page"]::after { color: var(--red); }

/* Get-in-Touch CTA pill : separates the numbered nav from the social block */
.mobile-drawer-nav .drawer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin: 16px 0 6px;
  padding: 14px 26px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-variation-settings: normal;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: 100px;
  border-bottom: none;
  transition: background var(--t-fast), transform var(--t-fast);
}
.mobile-drawer-nav .drawer-cta::before,
.mobile-drawer-nav .drawer-cta::after { content: none; }
.mobile-drawer-nav .drawer-cta:hover {
  background: var(--red-dark, #c62b38);
  color: #fff;
  transform: translateY(-1px);
}

/* Bottom block: socials, contact CTA, locations */
.mobile-drawer-nav .drawer-foot { margin-top: 16px; padding-top: 0; }
.mobile-drawer-nav .drawer-foot .drawer-eyebrow { margin-bottom: 10px; }

.drawer-socials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.drawer-socials a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  padding: 9px 4px !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  text-decoration: none;
  transform: none !important;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) !important;
}
.drawer-socials a::before,
.drawer-socials a::after { content: none !important; }
.drawer-socials a:hover {
  background: rgba(230, 57, 70, 0.12) !important;
  border-color: rgba(230, 57, 70, 0.5) !important;
  color: var(--red) !important;
  transform: translateY(-2px) !important;
}
.drawer-socials svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Red CALL CTA card */
.drawer-contact {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
  padding: 11px 14px !important;
  background: var(--red);
  color: #fff !important;
  border-radius: 10px;
  text-decoration: none;
  border-bottom: none !important;
  font-family: var(--font-body) !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  transition: background var(--t-fast), transform var(--t-fast);
}
.drawer-contact::before,
.drawer-contact::after { content: none !important; }
.drawer-contact:hover {
  background: var(--red-dark, #c62b38);
  transform: translateY(-1px) !important;
}
.drawer-contact-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.78;
}
.drawer-contact-num {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.drawer-locations {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.drawer-locations .dot { color: var(--red); font-size: 14px; line-height: 0; }

@media (min-width: 881px) {
  .mobile-drawer { display: none; }
  /* Drawer-only nodes injected by shop.js never render on desktop.
     881px matches this site's mobile breakpoint (≤880px = mobile). */
  .drawer-only { display: none !important; }
}

/* ---------- 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("images/site/hero.webp");
  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: 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);
}
/* Hover-gated so iOS does not stick the revealed state to the last-tapped card. */
@media (hover: hover) {
  .product-card:hover .product-card-quick {
    opacity: 1;
    transform: translateY(0);
  }
  .product-card-quick button:hover { background: var(--ink); color: #fff; }
}
/* Touch devices have no hover, so the quick-add was invisible AND unreachable:
   you could not add to bag from the grid at all. Always shown, full tap target. */
@media (hover: none), (max-width: 899px) {
  .product-card-quick {
    opacity: 1;
    transform: none;
    position: static;
    margin-top: 10px;
  }
}
.product-card-quick button {
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  width: 100%;
  min-height: 44px;
}

.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;
}
/* Mono spec line: trade-catalogue gravity under every card */
.product-card-spec {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}

/* ---------- 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("images/site/ed-unit.webp");
  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("images/site/hero.webp");
  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);
}
.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("images/site/ed-bench.webp");
}
.story-media .sm-2 {
  background-image: url("images/site/ed-unit.webp");
}
.story-media .sm-3 {
  background-image: url("images/site/ed-oil.webp");
}
@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("images/site/trade-shop.webp");
  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-tight) 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: var(--fs-section);
  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); }
}

/* 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("images/site/cat-clippers.webp");
  min-height: 320px;
}
.featured-asym-grid .fa-1 { --bg-img: url("images/site/cat-clippers.webp"); }
.featured-asym-grid .fa-2 { --bg-img: url("images/site/cat-blades.webp"); }
.featured-asym-grid .fa-3 { --bg-img: url("images/site/cat-hygiene.webp"); }
.featured-asym-grid .fa-4 { --bg-img: url("images/site/cat-combs.webp"); }
.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);
  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("images/site/ed-station.webp");
  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);
}

/* Slow Ken-Burns pan shared by the hero-banner slideshow slides */
@keyframes kenBurns {
  0%   { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.18) translate(-2%, -2%); }
}

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

/* ============================================================
   POPUP : trade account (shared .popup system)
============================================================ */
.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);
}
.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 .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-spec { color: rgba(255, 255, 255, 0.45); border-color: rgba(255, 255, 255, 0.12); }
.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: var(--fs-section);
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.035em;
  word-spacing: 0.04em;
  font-weight: 500;
  line-height: 1.02;
  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 { 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);
}
.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 {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    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 { 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;
}

/* ============================================================
   MOBILE SUB-PAGE HERO TUNING (about / contact / faq /
   shipping / trade / shop). Modest scale-up so sub-page heroes
   feel intentional on mobile without overshouting the home.
   Home hero: 72–110px. Page-hero: 52–72px. Hierarchy preserved.
============================================================ */
@media (max-width: 880px) {
  .page-hero { padding: 28px 0 24px; }
  .page-hero h1 {
    font-size: clamp(52px, 13vw, 84px);
    letter-spacing: -0.05em;
    line-height: 0.94;
  }
  .page-hero p { font-size: 16px; line-height: 1.5; }

  /* Shop/catalog hero : sized between page-hero and a section header.
     Slightly smaller than narrative page heroes (about, trade) so the
     catalog doesn't shout louder than the editorial pages. */
  .shop-head { padding-top: 22px; }
  .shop-head h1 {
    font-size: clamp(48px, 12vw, 72px);
    letter-spacing: -0.04em;
    line-height: 0.96;
  }

  /* Search page : centered hero, slightly tighter for the search-first layout */
  .search-page-hero { padding-top: 36px; padding-bottom: 20px; }
  .search-page-hero h1 {
    font-size: clamp(44px, 11vw, 64px);
    letter-spacing: -0.035em;
    line-height: 1;
  }
}

/* ============================================================
   FROM THE CHAIR : testimonials section (social proof on the
   trade-supply site). Editorial magazine treatment, no avatar
   stock-photo trap. Named barbers + Bristol shop names.
============================================================ */
.from-the-chair {
  padding: var(--sec-pad-y-loose) 0;
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.from-the-chair-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.from-the-chair .ftc-head {
  max-width: 760px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.from-the-chair .sec-num { color: var(--red); display: block; margin-bottom: 14px; }
.from-the-chair .rail-title {
  color: #fff;
  font-family: var(--font-display);
  /* was the PAGE-HERO step on an in-page section: 69px against 36px elsewhere */
  font-size: var(--fs-section);
  font-variation-settings: "wdth" 84;
  letter-spacing: -0.04em;
  line-height: 0.98;
  font-weight: 500;
  margin: 0 0 18px 0;
}
.from-the-chair .lead {
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.5;
  max-width: 580px;
  margin: 0;
}

.ftc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.ftc-quote {
  position: relative;
  margin: 0;
  padding: 32px 28px 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ftc-mark {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.6;
  color: var(--red);
  font-style: italic;
  font-weight: 500;
  display: block;
  margin: 0;
}
.ftc-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-variation-settings: "wdth" 90;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: #fff;
  margin: 0;
  flex: 1;
}
.ftc-quote figcaption {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ftc-quote figcaption strong {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ftc-quote figcaption span {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Trade conversion CTA at the bottom of the testimonials block */
.ftc-trade-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 28px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  transition: background var(--t-fast), transform var(--t-fast);
}
.ftc-trade-cta:hover {
  background: var(--red-dark, #c62b38);
  transform: translateY(-1px);
}
.ftc-trade-cta span {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}
.ftc-trade-cta strong {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.02em;
  font-weight: 500;
}

@media (max-width: 880px) {
  .ftc-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 24px;
  }
  .from-the-chair .rail-title {
    letter-spacing: -0.04em;
    line-height: 1.0;
  }
  .ftc-quote {
    padding: 26px 22px 22px;
    gap: 14px;
  }
  .ftc-mark { font-size: 56px; }
  .ftc-quote blockquote { font-size: 18px; }
  .ftc-trade-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px 22px;
  }
  .ftc-trade-cta strong { font-size: 19px; }
}

/* ============================================================
   HERO BANNER - Zepbrook-style two-column layout, but over the
   cinema photo background. Photo slides Ken-Burns underneath,
   dark gradient overlay, white text + red italic on the left,
   product floats in a clean white card on the right.
============================================================ */
.hero-banner {
  position: relative;
  background: #0a0a0a;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-banner-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-banner-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Owned photography ships pre-graded (crushed blacks, one warm accent), so the old
     stock-unifying filter stack is gone. Only a light contrast/brightness touch remains
     so white type stays safe over the lit side of the frame. */
  filter: contrast(1.04) brightness(0.86);
  opacity: 0;
  transform: scale(1.06);
  animation: kenBurns 22s linear infinite alternate;
  transition: opacity 2800ms cubic-bezier(0.45, 0.05, 0.25, 1);
  will-change: opacity, transform;
}
.hero-banner-slide.is-active { opacity: 1; }

/* Owned hero photography. -md rendition (44KB vs 181KB) served to phones. */
.hero-slide-main { background-image: url("images/site/hero.webp"); }
@media (max-width: 760px) {
  .hero-slide-main { background-image: url("images/site/hero-md.webp"); }
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Measured against the actual asset: the headline zone still clears 14:1 white-on-bg
     (AAA needs 4.5:1) because the photograph already carries a near-black left third.
     Kept deliberately light so the shop reads as a photograph, not a black plate. */
  background:
    linear-gradient(90deg, rgba(10,10,10,0.32) 0%, rgba(10,10,10,0.10) 52%, rgba(10,10,10,0.28) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.08) 0%, rgba(10,10,10,0.42) 100%);
  pointer-events: none;
}
.hero-banner::after {
  /* Film grain layer */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
}
.hero-banner-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 96px) clamp(20px, 4vw, 56px);
  min-height: clamp(560px, 75vh, 800px);
}
.hero-banner-text {
  position: relative;
  z-index: 2;
}
/* Main hero runs text-only: one column, text owns the frame */
.hero-main .hero-banner-inner {
  grid-template-columns: 1fr;
}
.hero-main .hero-banner-headline { max-width: 10ch; }
.hero-main .hero-banner-blurb { max-width: 52ch; }
.hero-banner-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 18px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.hero-banner-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background: var(--red);
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-2px);
}
.hero-banner-headline {
  font-family: "Big Shoulders Display", "Bricolage Grotesque", "Impact", sans-serif;
  font-size: clamp(76px, 12vw, 200px);
  font-weight: 800;
  letter-spacing: -0.035em;
  word-spacing: 0.02em;
  line-height: 0.88;
  text-transform: uppercase;
  color: #fff;
  max-width: 8.5ch;
  margin: 0 0 22px;
  position: relative;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 6px 28px rgba(0, 0, 0, 0.7),
    0 12px 48px rgba(0, 0, 0, 0.5);
}
.hero-banner-headline em {
  font-style: italic;
  color: var(--red);
  display: inline-block;
  position: relative;
}
.hero-banner-headline em::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 4px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 1400ms;
}
.hero-banner-headline.kinetic-in em::before {
  transform: scaleX(1);
}
.hero-banner-headline .bullet { color: var(--red); }
.hero-banner-headline .word {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
}
.hero-banner-headline .ltr {
  display: inline-block;
  vertical-align: top;
  line-height: inherit;
  opacity: 0;
  transform: translateY(0.45em) skewY(6deg);
  transition:
    opacity 520ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 28ms);
  will-change: opacity, transform;
}
.hero-banner-headline.kinetic-in .ltr {
  opacity: 1;
  transform: translateY(0) skewY(0);
}
.hero-banner-blurb {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 48ch;
  margin: 0 0 32px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.hero-banner-blurb em {
  font-style: italic;
  color: #fff;
}
.hero-banner-blurb strong {
  font-weight: 600;
  color: #fff;
}
.hero-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 18px 36px;
  border-radius: 100px;
  text-decoration: none;
  transition: background var(--t-fast), transform var(--t-fast);
}
.hero-banner-cta::after {
  content: "→";
  font-size: 16px;
  transition: transform var(--t-fast);
}
.hero-banner-cta:hover {
  background: var(--red);
  transform: translateY(-1px);
}
.hero-banner-cta:hover::after { transform: translateX(3px); }

/* Right column: product card sits like a magazine cut-out on top of the photo */
.hero-banner-visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}
.hero-banner-product-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #fafaf8;
  padding: clamp(20px, 2.5vw, 36px);
  border-radius: 4px;
  transform: rotate(-2deg);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.45),
    0 12px 24px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.hero-banner-product {
  display: block;
  width: 100%;
  height: auto;
}
.hero-banner-badge {
  position: absolute;
  top: -16px;
  right: -16px;
  width: clamp(96px, 10vw, 128px);
  height: clamp(96px, 10vw, 128px);
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  transform: rotate(-12deg);
  box-shadow: 0 8px 18px rgba(230, 57, 70, 0.32);
  z-index: 3;
}
.hero-banner-badge strong {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 2px 0;
}

/* Mobile: stack vertically, product image below text */
@media (max-width: 880px) {
  .hero-banner-inner {
    grid-template-columns: 1fr;
    padding: 28px 22px 36px;
    gap: 28px;
    /* Fill the first viewport: announce bar 36px + header top row 64px
       (44px logo + 10px padding x2) = 100px of chrome above the hero, so
       the hero bottom lands on the fold and the CTA is reachable without
       scrolling (mobile-site-craft). The featured-bundle section keeps its
       own clamp() via the higher-specificity .hero-feature rule below. */
    min-height: calc(100vh - 100px);
    min-height: calc(100dvh - 100px);
  }
  .hero-banner-headline {
    font-size: clamp(86px, 23vw, 140px);
    letter-spacing: -0.045em;
    max-width: 100%;
  }
  .hero-banner-blurb { font-size: 15.5px; margin-bottom: 24px; }
  .hero-banner-cta { padding: 16px 28px; font-size: 14px; }
  .hero-banner-visual { min-height: 280px; }
  .hero-banner-product { max-width: 360px; }
  .hero-banner-badge {
    width: 84px;
    height: 84px;
    top: 0;
    right: 4%;
    font-size: 9px;
  }
  .hero-banner-badge strong { font-size: 18px; }
}

/* ============================================================
   TRUST STRIP - sits directly below the banner. 3 evenly spaced
   items with hairline dividers. Industrial spec-sheet feel.
============================================================ */
.trust-strip {
  background: var(--ink);
  color: #fff;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.trust-strip-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.trust-strip-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.trust-strip-item:last-child { border-right: none; }
.trust-strip-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--red);
}

@media (max-width: 880px) {
  .trust-strip-inner {
    grid-template-columns: 1fr;
  }
  .trust-strip-item {
    justify-content: flex-start;
    padding: 16px 22px;
    font-size: 13px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .trust-strip-item:last-child { border-bottom: none; }
}

/* ============================================================
   LEGAL PAGES (terms.html, privacy.html) - clean editorial body
   with numbered headings + serif-tight measure.
============================================================ */
.legal-body { max-width: 720px; }
.legal-body h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 36px 0 10px;
  color: var(--ink);
}
.legal-body h2:first-of-type { margin-top: 8px; }
.legal-body p,
.legal-body ul {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0 0 14px;
}
.legal-body ul {
  padding-left: 22px;
}
.legal-body ul li { margin-bottom: 8px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--red-dark, #c62b38); }
.legal-contact {
  margin-top: 36px !important;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 14px !important;
  color: var(--ink-soft);
}

/* Footer brand block (terms.html, privacy.html) - single brand + blurb cell. */
.footer-brand-block { max-width: 320px; }
.footer-brand-mark { display: inline-block; margin-bottom: 14px; }
.footer-brand-mark img { height: 40px; width: auto; }
.footer-blurb { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }

/* ============================================================
   FEATURED BUNDLE (.hero-feature) - reuses the hero-banner design
   wholesale; only the height, headline scale, and static bg differ.
   ============================================================ */
.hero-feature-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-image: url("images/site/ed-restock.webp");
  filter: contrast(1.04) brightness(0.8);
  transform: scale(1.06);
  animation: kenBurns 26s linear infinite alternate;
  will-change: transform;
}
/* Must sit AFTER the rule above: media queries add no specificity, so a later
   same-specificity declaration would otherwise beat the mobile rendition. */
@media (max-width: 760px) {
  .hero-feature-bg { background-image: url("images/site/ed-restock-md.webp"); }
}

.hero-feature .hero-banner-inner {
  min-height: clamp(460px, 62vh, 700px);
  padding-block: clamp(48px, 6vw, 84px);
}
/* One notch under the hero so the page keeps one thesis, still banner-big. */
.hero-feature .hero-banner-headline {
  font-size: clamp(64px, 9.5vw, 160px);
  max-width: 10ch;
}
.hero-feature .hero-banner-product-card { max-width: 460px; }

@media (max-width: 880px) {
  /* "Everything" can't break mid-word; keep it inside 375px. */
  .hero-feature .hero-banner-headline { font-size: clamp(56px, 17vw, 96px); }
}

/* ============================================================
   REDUCED MOTION - kill all animation, show everything instantly.
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .mask,
  .hero-banner-headline .ltr {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-banner-slide, .hero-feature-bg { transform: none !important; }
}


/* ============================================================
   MOBILE TASTE RULES (2026-07-25)
   Del's hard rule: no enclosing border boxes around text content on
   mobile, anywhere. Bordered cards flatten to editorial lists split by
   a single bottom hairline. Photo frames stay (the one permitted border).
   Tap targets 44px minimum, invisible hit-area extension allowed.
   ============================================================ */
@media (max-width: 899px) {
  /* testimonial cards -> editorial list */
  .ftc-quote {
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding: 0 0 26px;
  }
  .ftc-grid > .ftc-quote:last-child { border-bottom: 0; padding-bottom: 0; }

  /* 24px text links -> 44px hit area without changing how they look */
  .rail-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-bot a,
  .drawer-socials a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Dense footer link lists get a smaller bump than 44px on purpose: full-size
     targets here would roughly double the mobile footer, and Del has already
     rejected long single-file mobile footers. Primary actions keep 44px. */
  .footer-col ul a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }
  .menu-toggle,
  .header-action-search,
  .header-search,
  .mobile-drawer-close,
  .drawer-contact {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================================
   KIT BAND  (replaces the mid-page second hero)
   Editorial split on the section grid: framed product plate left,
   ruled ledger of the actual box contents right. Deliberately NOT
   full-bleed and NOT display scale, so it cannot read as a hero.
   ============================================================ */
.kitband {
  background: var(--bg-alt);
  padding-block: var(--sec-pad-y-loose);
}
.kitband-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
/* photo frames are the one border Del permits */
.kitband-plate {
  margin: 0;
  border: 1px solid var(--hairline);
  background: #fff;
  padding: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 0;
}
.kitband-plate img {
  display: block;
  width: 100%;
  height: auto;
}
.kitband-plate figcaption {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  margin-top: clamp(16px, 2vw, 28px);
}
.kitband-hd {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 10px 0 0;
  color: var(--ink);
}
.kitband-hd em { font-style: italic; }
.kitband-lead {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 16px 0 0;
}
/* ruled ledger, hairlines only: no boxes at any breakpoint */
.kitband-ledger {
  list-style: none;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.kitband-ledger li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}
.kl-item {
  font-size: 14px;
  color: var(--ink-soft);
}
.kl-val {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  flex: none;
}
.kitband-ledger .kl-sum { margin-top: 6px; }
.kitband-ledger .kl-sum .kl-item,
.kitband-ledger .kl-sum .kl-val {
  color: var(--muted);
  text-decoration: line-through;
}
.kitband-ledger .kl-now {
  border-bottom: 0;
}
.kitband-ledger .kl-now .kl-item {
  font-weight: 600;
  color: var(--ink);
}
.kitband-ledger .kl-now .kl-val {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--red);
}
.kitband-foot {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(22px, 3vw, 32px);
}
.kitband-save {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 899px) {
  .kitband-inner { grid-template-columns: 1fr; }
  /* plate leads on mobile but must not eat the fold */
  .kitband-plate { max-width: 420px; }
  .kitband-foot .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   SHOP FACETS  (replaces the pill row that reloaded the page)
   Grouped facet rail, applied-filter chips, empty state.
   ============================================================ */
.shop-toolbar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(20px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.shop-facets {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 44px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.facet-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.facet-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}
.facet-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.facet-opt {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 9px 14px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
@media (hover: hover) {
  .facet-opt:hover { border-color: var(--ink); color: var(--ink); }
}
.facet-opt.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.shop-count {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.shop-applied { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-applied[hidden] { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 7px 12px;
  cursor: pointer;
}
.chip span[aria-hidden] { font-size: 14px; line-height: 1; color: var(--muted); }
@media (hover: hover) {
  .chip:hover { border-color: var(--red); color: var(--red); }
  .chip:hover span[aria-hidden] { color: var(--red); }
}
.chip-all {
  background: none;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--muted);
}
.shop-empty {
  padding: clamp(48px, 8vw, 96px) 0;
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
}
.shop-empty[hidden] { display: none; }
.shop-empty-hd {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.shop-empty-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 12px 0 24px;
}
.shop-empty-sub a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 899px) {
  /* the rail must wrap, not scroll off: same lesson as the Choices shop */
  .shop-facets { gap: 16px; }
  .facet-group { width: 100%; }
  .facet-opt { min-height: 44px; padding: 10px 14px; }
  .chip { min-height: 44px; }
  .shop-bar { justify-content: flex-start; }
}

/* ============================================================
   LOOKBOOK TILES + MOBILE IMAGE RENDITIONS
   Appended LAST on purpose: media queries add no specificity, so these must
   come after every desktop background-image declaration to win. Without this
   phones downloaded the full-size art (a 1200px tile into a 375px slot).
   ============================================================ */
.lookbook-tile.lb-1 { background-image: url("images/site/lb-chair.webp"); }
.lookbook-tile.lb-2 { background-image: url("images/site/lb-bench.webp"); }
.lookbook-tile.lb-3 { background-image: url("images/site/lb-cut.webp"); }

@media (max-width: 760px) {
  .hero-slide-main            { background-image: url("images/site/hero-md.webp"); }
  .featured-asym-grid .fa-big { --bg-img: url("images/site/cat-clippers-md.webp"); }
  .featured-asym-grid .fa-2   { --bg-img: url("images/site/cat-blades-md.webp"); }
  .featured-asym-grid .fa-3   { --bg-img: url("images/site/cat-hygiene-md.webp"); }
  .featured-asym-grid .fa-4   { --bg-img: url("images/site/cat-combs-md.webp"); }
  .story-media .sm-1          { background-image: url("images/site/ed-bench-md.webp"); }
  .story-media .sm-2          { background-image: url("images/site/ed-unit-md.webp"); }
  .story-media .sm-3          { background-image: url("images/site/ed-oil-md.webp"); }
  .lookbook-tile.lb-1         { background-image: url("images/site/lb-chair-md.webp"); }
  .lookbook-tile.lb-2         { background-image: url("images/site/lb-bench-md.webp"); }
  .lookbook-tile.lb-3         { background-image: url("images/site/lb-cut-md.webp"); }
}