/* =====================================================
   ATELIER — Global Styles
   Header + Hero
   ===================================================== */

/* 1. DESIGN TOKENS
   ===================================================== */
:root {
  --white:        #FFFFFF;
  --ivory:        #F8F5F0;
  --warm-bg:      #FAF8F5;
  --charcoal:     #1A1A1A;
  --muted:        #8A8278;
  --border:       #E8E3DC;

  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'General Sans', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Typographic scale tokens */
  --lh-display:   1.05;
  --lh-heading:   1.22;
  --lh-body:      1.74;
  --track-neg:   -0.025em;
  --track-neg-sm:-0.015em;
  --track-head:  -0.01em;
  --track-eye:    0.18em;

  --ann-h:        32px;   /* utility strip height */
  --header-h:     72px;

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:       0.2s ease;
  --t-mid:        0.35s ease;
}

/* 2. RESET
   ===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--charcoal);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a   { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;       /* removes 300ms tap delay on mobile */
  -webkit-tap-highlight-color: transparent;
}

/* 2b. SECTION SCROLL-REVEAL
   Each below-hero section fades + rises into view as it enters the
   viewport. The `.section-reveal` class is only applied by JS, so
   without JS the page renders fully visible (no hidden content).
   ===================================================== */
.section-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
  will-change: opacity, transform;
}

.section-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .section-reveal,
  .section-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 3. UTILITY STRIP
   ===================================================== */
.utility-strip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--ann-h);
  background: #201D19;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 52px;
  z-index: 1001;
  /* Slides upward when user starts scrolling */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.utility-strip.is-hidden {
  transform: translateY(-100%);
}

/* Three columns */
.utility-strip__col { display: flex; align-items: center; }
.utility-strip__col--center { justify-content: center; }
.utility-strip__col--right  { justify-content: flex-end; }

/* Locale selector */
.utility-strip__select {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 245, 240, 0.60);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23C9C2B8' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  transition: color var(--t-fast);
}
.utility-strip__select:hover  { color: var(--white); }
.utility-strip__select:focus-visible {
  outline: 1px solid rgba(248, 245, 240, 0.8);
  outline-offset: 2px;
}
.utility-strip__select option {
  font-size: 12px;
  letter-spacing: 0;
  background: var(--ivory);
  color: var(--charcoal);
}

/* Rotating messages */
.utility-strip__col--center {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.utility-strip__msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.03em;
  color: rgba(248, 245, 240, 0.80);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   0.45s ease,
    transform 0.45s ease;
  pointer-events: none;
}

.utility-strip__msg.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* Book Appointment CTA */
.utility-strip__appt {
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--ivory);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  opacity: 0.82;
  white-space: nowrap;
  transition: opacity var(--t-fast);
}
.utility-strip__appt:hover { opacity: 1; }
.utility-strip__appt:focus-visible {
  outline: 1px solid rgba(248, 245, 240, 0.8);
  outline-offset: 3px;
  opacity: 1;
}

/* sr-only utility (reused from footer, kept here as well) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* 4. SITE HEADER
   ===================================================== */
.header {
  position: fixed;
  top: var(--ann-h);   /* JS will override this dynamically */
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 1000;
  transition:
    top              var(--t-mid),
    background-color var(--t-mid),
    border-color     var(--t-mid),
    backdrop-filter  var(--t-mid);
  border-bottom: 1px solid transparent;
}

/* Scrolled state: opaque warm-white */
.header.is-scrolled {
  background-color: rgba(250, 248, 245, 0.96);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* 4a. Inner Grid */
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  padding: 0 52px;
  gap: 20px;
}

/* 4b. Wordmark */
.header__logo {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #FFFFFF;   /* white over transparent hero; overridden when scrolled */
  transition: color var(--t-mid), opacity var(--t-fast);
  white-space: nowrap;
  user-select: none;
  /* Offset trailing tracking so the wordmark stays optically left-aligned */
  margin-right: -0.15em;
}

.header__logo:hover               { opacity: 0.65; }
.header.is-scrolled .header__logo { color: #1A1A1A; }

.header__logo:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}

/* 4c. Nav Links */
.header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header__nav-link {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;   /* white over transparent hero; overridden when scrolled */
  position: relative;
  padding-bottom: 2px;
  transition: color var(--t-mid);
}

/* Underline reveal on hover */
.header__nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.header__nav-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

.header__nav-link:hover::after {
  transform: scaleX(1);
}

.header.is-scrolled .header__nav-link {
  color: #1A1A1A;
}

.header.is-scrolled .header__nav-link:hover {
  color: #1A1A1A;
}

.header__nav-link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* 4d. Action Icons */
.header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: flex-end;
}

.header__action svg {
  width: 18px;
  height: 18px;
}

.header__action {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;   /* white over transparent hero; overridden when scrolled */
  padding: 10px;
  margin: -10px;
  position: relative;
  transition: color var(--t-mid), opacity var(--t-fast);
}

.header__action:hover               { opacity: 0.55; }
.header.is-scrolled .header__action { color: #1A1A1A; }
.header.is-scrolled .header__action:hover { opacity: 0.55; }

.header__action:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* Cart count badge */
.header__cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 14px;
  height: 14px;
  padding: 0 2px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--charcoal);
  border-radius: 50%;
  font-size: 8px;
  font-weight: 500;
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
  transition:
    background var(--t-mid),
    color       var(--t-mid);
}

.header.is-scrolled .header__cart-count {
  background: var(--charcoal);
  color: var(--white);
}

/* 4e. Mobile Toggle (hidden on desktop) */
.header__toggle {
  display: none;
  color: #1A1A1A;
  padding: 10px;
  margin: -10px;
  align-items: center;
  justify-content: center;
  transition: color var(--t-mid);
}

.header.is-scrolled .header__toggle { color: var(--charcoal); }

.header__toggle .icon-close { display: none; }
.header.menu-open .header__toggle .icon-menu  { display: none; }
.header.menu-open .header__toggle .icon-close { display: block; }

.header__toggle:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* 4f. Mobile Nav Drawer */
.header__mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: rgba(250, 248, 245, 0.98);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  /* shown/hidden via JS toggling [hidden] attribute + display */
}

.header__mobile-nav:not([hidden]) {
  display: flex;
}

.header__mobile-link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  transition: color var(--t-fast);
}

.header__mobile-link:last-child { border-bottom: none; }
.header__mobile-link:hover      { color: var(--muted); }

/* 5. HERO SECTION — EDITORIAL COLLAGE
   ===================================================== */

/* ── Outer container: two-column magazine split ────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background: var(--ivory);
}

/* Soft top scrim — lightens only the navbar zone (top 120px) so the
   charcoal logo / nav links / icons stay legible over the dark hero
   image. Fades to transparent by 120px, leaving the image untouched.
   Scrolls away with the hero as the navbar solidifies. */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 120px);
  z-index: 6;
  pointer-events: none;
}

/* ── Left column: primary editorial image ──────────── */
.hero__main {
  position: absolute;   /* full-bleed: image fills the entire hero */
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;

  /* Stage 1: image reveals first */
  opacity: 0;
  animation: heroFade 1.0s var(--ease-out) forwards 0.05s;
}

.hero__main-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background-color: #BDB0A0;
  background-image: url("https://images.unsplash.com/photo-1683660107856-cdad7a562d12?auto=format&fit=crop&w=1920&q=85");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Subtle scale-in on load for depth */
  transform: scale(1.04);
  animation: heroImageScale 1.4s var(--ease-out) forwards 0.05s;
}

@keyframes heroImageScale {
  to { transform: scale(1); }
}

/* Cinematic dark gradient — stronger left sweep + bottom vignette for max text legibility */
.hero__main::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.28) 52%, rgba(0,0,0,0) 78%),
    linear-gradient(to top,    rgba(0,0,0,0.32) 0%, rgba(0,0,0,0)    38%);
  z-index: 1;
  pointer-events: none;
}

/* ── Right column: ivory panel (backdrop for the collage) ──
   Static so the detail tile + text card anchor to .hero, free to
   compose across the full hero rather than inside this column. */
.hero__aside {
  position: static;   /* not a containing block — card anchors to .hero */
  background: transparent;
  z-index: 4;
}

/* ── Detail shot tile — overlaps into main image ───── */
.hero__detail {
  position: absolute;
  top: auto;
  bottom: 8%;                  /* sits lower in the frame */
  left: calc(60% - 12px);      /* overlaps the primary image edge by ~12px */
  width: 28%;                  /* ≈28% of the full hero width */
  height: 45%;                 /* ≈45% of the hero height */
  aspect-ratio: auto;
  background-color: #C4B4A8;
  background-image: url("https://images.unsplash.com/photo-1652132228164-4499391c4725?auto=format&fit=crop&w=480&h=640&q=85");
  background-size: cover;
  background-position: center;
  border: 5px solid var(--ivory);
  box-shadow: 0 16px 50px rgba(26, 26, 26, 0.16);
  z-index: 2;

  /* Stage 2: detail tile reveals second */
  opacity: 0;
  transform: translateY(14px);
  animation: heroRise 0.75s var(--ease-out) forwards 0.55s;
}

/* ── Text card — anchored lower-left over the primary image ── */
.hero__card {
  position: absolute;
  bottom: 80px;
  left: 60px;
  max-width: 520px;
  z-index: 4;

  /* Stage 3: text card reveals last */
  opacity: 0;
  transform: translateY(20px);
  animation: heroRise 0.75s var(--ease-out) forwards 0.95s;
}

/* Thin editorial rule — magazine masthead cue above the label */
.hero__card::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
  margin-bottom: 18px;
}

/* Season label — italic serif (replaces tracked sans) */
.hero__season {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 18px;
}

/* Display headline — anchored roman serif, strong visual weight.
   Two-weight technique: roman primary line + lighter italic second. */
.hero__headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 300;
  font-style: normal;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: 22px;
}

.hero__headline em {
  display: block;
  font-style: italic;
  font-weight: 300;   /* whispered secondary line */
  opacity: 0.7;
  margin-top: 3px;
}

/* Supporting line — italic serif, quiet editorial tone */
.hero__subline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: 0.01em;
  color: #FFFFFF;
  line-height: 1.5;
  margin-bottom: 26px;
}

/* CTA — bordered pill button, more tactile than bare underline */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.52);
  padding: 15px 32px;
  text-decoration: none;
  transition:
    background   var(--t-fast),
    border-color var(--t-fast),
    color        var(--t-fast);
}
.hero__cta:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.90);
}
.hero__cta:focus-visible {
  outline: 1px solid #FFFFFF;
  outline-offset: 4px;
}

/* ── Scroll indicator ───────────────────────────────── */
.hero__scroll-indicator {
  position: absolute;
  bottom: 36px;
  left: 50%;                    /* centred under the full-bleed hero image */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
  pointer-events: none;

  /* Stage 4: appears after all content is visible */
  opacity: 0;
  animation: heroFade 0.6s ease forwards 1.7s;
}

.hero__scroll-line {
  display: block;
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.5);
  transform-origin: top center;
  animation: scrollPulse 2s ease-in-out infinite 2s;
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1);   opacity: 0.5; }
  50%       { transform: scaleY(0.4); opacity: 0.2; }
}

.hero__scroll-label {
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Shared keyframes ───────────────────────────────── */
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* 6. REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__main,
  .hero__main-img,
  .hero__detail,
  .hero__card,
  .hero__scroll-indicator {
    animation: none;
    opacity: 1;
    transform: none;
  }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}

/* 7. RESPONSIVE
   ===================================================== */

/* Tablet: hide desktop nav, show hamburger */
@media (max-width: 980px) {
  .header__nav    { display: none; }
  .header__toggle { display: flex; }

  .header__inner {
    grid-template-columns: 1fr auto;
    padding: 0 28px;
  }

  /* Utility strip: hide locale + appointment on tablet */
  .utility-strip {
    padding: 0 28px;
    grid-template-columns: 0 1fr 0;
  }
  .utility-strip__col--left,
  .utility-strip__col--right { display: none; }
}

/* Tablet: full-bleed image stays; card hugs the lower-left edge */
@media (max-width: 860px) {
  .hero__card {
    left: 32px;
    right: 32px;
    bottom: 56px;
    max-width: none;
  }

  .hero__scroll-indicator { display: none; }
}

/* Mobile */
@media (max-width: 640px) {
  .header__inner    { padding: 0 20px; }
  .header__actions  { gap: 16px; }

  .utility-strip { padding: 0 20px; }

  .hero__card {
    left: 20px;
    right: 20px;
    bottom: 40px;
  }
}

/* Short viewports (laptops): the tall editorial headline + card can
   exceed the viewport height and clip behind the fixed header. Scale
   the headline down and tuck the card closer to the bottom so the
   whole block stays below the header. */
@media (max-height: 760px) {
  .hero__season   { margin-bottom: 12px; }
  .hero__headline { font-size: 56px; line-height: 1.08; margin-bottom: 16px; }
  .hero__subline  { margin-bottom: 18px; }
  .hero__card     { bottom: 48px; }
}

@media (max-height: 620px) {
  .hero__headline { font-size: 46px; margin-bottom: 12px; }
  .hero__card     { bottom: 36px; }
}

/* =====================================================
   8. CURATED COLLECTIONS
   ===================================================== */

.collections {
  background: var(--white);
  padding: 140px 84px 160px;
  max-width: 1440px;
  margin: 0 auto;
}

/* ─── Section header ─────────────────────────────── */
.collections__header {
  text-align: center;
  margin-bottom: 64px;
}

.collections__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.5);
  margin-bottom: 14px;
}

.collections__subeyebrow {
  display: block;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.75;
  margin-bottom: 14px;
}

.collections__title {
  font-family: var(--font-serif);
  font-size: clamp(37px, 3.46vw, 56px);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-head);
  color: var(--charcoal);
}

/* ─── Asymmetric 2 + 1 grid ──────────────────────── */
/*
   Left col (57 %): feature tile spans both rows — tall portrait
   Right col (1fr): two tiles stacked, each 4 / 3
*/
.collections__grid {
  display: grid;
  grid-template-columns: 57% 1fr;
  gap: 10px;
}

/* ─── Tile base ──────────────────────────────────── */
.collection-tile {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;

  /* Scroll-reveal */
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}

.collection-tile.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger */
.collections__grid .collection-tile:nth-child(1) { transition-delay: 0ms;   }
.collections__grid .collection-tile:nth-child(2) { transition-delay: 90ms;  }
.collections__grid .collection-tile:nth-child(3) { transition-delay: 180ms; }

/* ─── Right tiles get an explicit aspect ratio ────── */
.collection-tile:not(.collection-tile--feature) {
  aspect-ratio: 4 / 3;
}

/* ─── Feature tile spans both grid rows ──────────── */
.collection-tile--feature {
  grid-row: 1 / 3;
}

/* ─── Image wrapper fills the whole tile ─────────── */
.collection-tile__img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ─── Gradient overlay — dark at bottom for legibility */
.collection-tile__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 8, 6, 0.84) 0%,
    rgba(10, 8, 6, 0.44) 38%,
    rgba(10, 8, 6, 0.10) 62%,
    transparent 82%
  );
  z-index: 1;
  transition: opacity 0.55s var(--ease-out);
}

/* On hover: gradient lifts slightly so the image breathes */
.collection-tile:hover .collection-tile__img-wrap::after {
  opacity: 0.88;
}

/* ─── Image: slow zoom on hover ───────────────────── */
.collection-tile__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.70s var(--ease-out);
}

.collection-tile:hover .collection-tile__img,
.collection-tile:focus-visible .collection-tile__img {
  transform: scale(1.04);
}

/* Warm-neutral editorial palettes per collection */
.collection-tile__img--linen {
  background-color: #B0AE9E;
  background-image: url("https://images.pexels.com/photos/8198047/pexels-photo-8198047.jpeg?auto=compress&cs=tinysrgb&w=900&h=1200&fit=crop");
}

.collection-tile__img--cotton {
  background-color: #C8C0A8;
  background-image: url("https://images.pexels.com/photos/30703860/pexels-photo-30703860.jpeg?auto=compress&cs=tinysrgb&w=800&h=600&fit=crop");
}

.collection-tile__img--silk {
  background-color: #C8B89A;
  background-image: url("https://images.pexels.com/photos/30669356/pexels-photo-30669356.jpeg?auto=compress&cs=tinysrgb&w=800&h=600&fit=crop");
}

/* ─── Text body: sits over the gradient ──────────── */
.collection-tile__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 28px 26px;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.collection-tile__text {
  display: flex;
  flex-direction: column;
}

.collection-tile__name {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 7px;
  letter-spacing: 0.01em;
}

.collection-tile__desc {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.6;
}

.collection-tile__meta {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 9px;
}

/* ─── "View Collection →" — rises on hover ───────── */
.collection-tile__cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 16px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  align-self: flex-start;
  opacity: 0;
  transform: translateY(7px);
  transition:
    opacity   0.38s ease,
    transform 0.38s ease,
    border-color 0.38s ease;
}

.collection-tile:hover .collection-tile__cta,
.collection-tile:focus-within .collection-tile__cta {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(255, 255, 255, 0.70);
}

/* ─── Keyboard focus ──────────────────────────────── */
.collection-tile:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: -4px;
}

/* ─── Reduced motion: skip all animation ─────────── */
@media (prefers-reduced-motion: reduce) {
  .collection-tile,
  .collection-tile.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .collection-tile__img {
    transition: none !important;
  }

  .collection-tile__cta {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}

/* ─── Responsive ──────────────────────────────────── */

/* Tablet: feature goes full-width, right tiles side-by-side */
@media (max-width: 900px) {
  .collections {
    padding: 100px 52px 120px;
  }

  .collections__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .collection-tile--feature {
    grid-column: 1 / 3;
    grid-row: auto;
    aspect-ratio: 16 / 7;
  }

  .collection-tile:not(.collection-tile--feature) {
    aspect-ratio: 1 / 1;
  }

  /* On tablet the CTA is always readable */
  .collection-tile__cta {
    opacity: 1;
    transform: none;
  }
}

/* Mobile: full single-column stack */
@media (max-width: 640px) {
  .collections {
    padding: 80px 28px 100px;
  }

  .collections__header {
    margin-bottom: 48px;
  }

  .collections__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .collection-tile--feature {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 3 / 4;
  }

  .collection-tile:not(.collection-tile--feature) {
    aspect-ratio: 4 / 3;
  }

  .collection-tile__body {
    padding: 22px 22px 20px;
  }

  /* Always show CTA on touch */
  .collection-tile__cta {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================
   8b. IN THE ATELIER — Craft Process Split
   ===================================================== */

.in-atelier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--ivory);
}

/* Process image — left half */
.in-atelier__media {
  min-height: clamp(440px, 60vh, 680px);
  background-color: #C9BCAD;
  /* "Where the work begins" — hands guiding fabric at a sewing machine, atelier workshop */
  background-image: url("https://images.pexels.com/photos/4622205/pexels-photo-4622205.jpeg?auto=compress&cs=tinysrgb&w=1100&h=1200&fit=crop");
  background-size: cover;
  background-position: center;

  /* Scroll-reveal: fade only */
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}

.in-atelier__media.is-visible { opacity: 1; }

/* Content — right half, vertically centred */
.in-atelier__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(56px, 7vw, 120px);
  max-width: 560px;

  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   0.9s var(--ease-out) 0.12s,
    transform 0.9s var(--ease-out) 0.12s;
}

.in-atelier__content.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.in-atelier__eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 20px;
}

.in-atelier__headline {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.15vw, 45px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin-bottom: 26px;
}

.in-atelier__body {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(26, 26, 26, 0.70);
  opacity: 1;
  max-width: 62ch;
  margin-bottom: 34px;
}

.in-atelier__cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  opacity: 0.62;
  transition:
    opacity        var(--t-fast),
    letter-spacing 0.35s ease;
}

.in-atelier__cta:hover {
  opacity: 1;
  letter-spacing: 0.26em;
}

.in-atelier__cta:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 4px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .in-atelier__media,
  .in-atelier__content {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Tablet / mobile: stack image over content */
@media (max-width: 860px) {
  .in-atelier {
    grid-template-columns: 1fr;
  }
  .in-atelier__media {
    min-height: clamp(360px, 56vh, 460px);
  }
  .in-atelier__content {
    max-width: none;
    padding: clamp(48px, 9vw, 72px) clamp(28px, 7vw, 64px);
  }
}


/* =====================================================
   9. THE ATELIER SELECTION — Product Showcase
   ===================================================== */

.selection {
  background: var(--ivory);
  padding: 168px 84px 150px;
  max-width: 1440px;
  margin: 0 auto;
}

/* ─── Section header ─────────────────────────────── */
.selection__header {
  text-align: center;
  margin-bottom: 72px;
}

.selection__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.68);
  margin-bottom: 18px;
}

.selection__title {
  font-family: var(--font-serif);
  font-size: clamp(31px, 2.93vw, 47px);
  font-weight: 300;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}

/* ─── 4-column product grid ──────────────────────── */
.selection__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
  row-gap: 56px;
}

/* ─── Product card ───────────────────────────────── */
.product-card {
  display: flex;
  flex-direction: column;
  position: relative;          /* anchor for the full-card stretched link */

  /* Scroll-reveal: hidden until .is-visible added by JS */
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}

/* Make the whole card a link to the PDP via the product title.
   Interactive controls (Quick Add, wishlist) are raised above it. */
.product-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-card__wish,
.product-card__atb {
  position: relative;
  z-index: 2;
}

.product-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: 50ms per card so the grid rows sweep in cleanly */
.selection__grid .product-card:nth-child(1) { transition-delay:   0ms; }
.selection__grid .product-card:nth-child(2) { transition-delay:  50ms; }
.selection__grid .product-card:nth-child(3) { transition-delay: 100ms; }
.selection__grid .product-card:nth-child(4) { transition-delay: 150ms; }
.selection__grid .product-card:nth-child(5) { transition-delay: 200ms; }
.selection__grid .product-card:nth-child(6) { transition-delay: 250ms; }
.selection__grid .product-card:nth-child(7) { transition-delay: 300ms; }
.selection__grid .product-card:nth-child(8)  { transition-delay: 350ms; }
.selection__grid .product-card:nth-child(9)  { transition-delay: 400ms; }
.selection__grid .product-card:nth-child(10) { transition-delay: 450ms; }
.selection__grid .product-card:nth-child(11) { transition-delay: 500ms; }
.selection__grid .product-card:nth-child(12) { transition-delay: 550ms; }

/* ─── Image wrapper ──────────────────────────────── */
.product-card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Transparent overlay link — makes the whole image navigate to the PDP.
   Sits beneath the label/wish (z-index:1) so those stay clickable. */
.product-card__media-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

/* ─── Image placeholder + slow scale on card hover ── */
.product-card__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease-out);
}

/* Subtle lift on hover — no scale, no tint, no colour change */
.product-card:hover .product-card__img-wrap,
.product-card:focus-within .product-card__img-wrap {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

/* 12 product photos — South Asian editorial fashion, Pexels verified */
.product-img--kantha {
  background-color: #B8A080;
  background-image: url("https://images.pexels.com/photos/7816703/pexels-photo-7816703.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop");
}

.product-img--linen-shirt {
  background-color: #D0C8B8;
  background-image: url("https://images.pexels.com/photos/7789140/pexels-photo-7789140.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop");
}

.product-img--muslin-kurta {
  background-color: #C8C0B0;
  background-image: url("https://images.pexels.com/photos/19567920/pexels-photo-19567920.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop");
}

.product-img--linen-trouser {
  /* Washed Linen Trouser — woman in neutral linen outfit on sandy terrain */
  background-color: #C8BEA8;
  background-image: url("https://images.pexels.com/photos/3095432/pexels-photo-3095432.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop");
  background-position: center top;
}

.product-img--dupatta {
  background-color: #C8C0A8;
  background-image: url("https://images.pexels.com/photos/8432522/pexels-photo-8432522.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop");
}

.product-img--tunic {
  /* Heritage Cotton Tunic — white chikankari kurti, outdoor Lucknow, ethnic elegance */
  background-color: #D0C8B8;
  background-image: url("https://images.pexels.com/photos/28512776/pexels-photo-28512776.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop");
  background-position: center top;
}

.product-img--lawn {
  background-color: #B8C0A8;
  background-image: url("https://images.pexels.com/photos/33125106/pexels-photo-33125106.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop");
}

.product-img--muslin-dress {
  background-color: #B8A890;
  background-image: url("https://images.pexels.com/photos/30703860/pexels-photo-30703860.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop");
}

.product-img--indigo-wrap {
  /* Indigo Cotton Wrap — woman in elegant blue dress, warm studio, sophisticated */
  background-color: #A8B0C0;
  background-image: url("https://images.pexels.com/photos/30116520/pexels-photo-30116520.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop");
  background-position: center top;
}

.product-img--jamdani-evening {
  /* Jamdani Evening Dress — woman in red kameez, warm dramatic indoor light */
  background-color: #B89080;
  background-image: url("https://images.pexels.com/photos/3396371/pexels-photo-3396371.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop");
  background-position: center top;
}

.product-img--endi-tunic {
  background-color: #C0B090;
  background-image: url("https://images.pexels.com/photos/20203718/pexels-photo-20203718.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop");
}

.product-img--wide-trouser {
  /* Wide Leg Linen Trouser — loose earth-toned flowing pants, sandy shoreline, serene */
  background-color: #C8BEA8;
  background-image: url("https://images.pexels.com/photos/12058996/pexels-photo-12058996.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop");
  background-position: center center;
}

/* ─── Hover secondary image ──────────────────────── */
/* Positioned absolutely over the primary image;
   fades in on hover to reveal a lifestyle/detail shot. */
.product-card__img-hover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.55s var(--ease-out);
  pointer-events: none;
}

/* Hover image swap disabled — the secondary image stays hidden so
   hovering a product card never replaces its photo. */
.product-card:hover       .product-card__img-hover,
.product-card:focus-within .product-card__img-hover {
  opacity: 0;
}

/* Secondary lifestyle / detail images */
.product-img-hover--kantha {
  background-color: #C8C0B0;
  background-image: url("https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=600&h=750&q=85");
}
.product-img-hover--linen-shirt {
  background-color: #D0C8B8;
  background-image: url("https://images.unsplash.com/photo-1509631179647-0177331693ae?auto=format&fit=crop&w=600&h=750&q=85");
}
.product-img-hover--muslin-kurta {
  background-color: #C0B4A8;
  background-image: url("https://images.unsplash.com/photo-1583196003821-0da2e3cfcff2?auto=format&fit=crop&w=600&h=750&q=85");
}
.product-img-hover--linen-trouser {
  background-color: #C4BAA8;
  background-image: url("https://images.unsplash.com/photo-1594938298603-c8148c4b4463?auto=format&fit=crop&w=600&h=750&q=85");
}
.product-img-hover--dupatta {
  background-color: #C0B09A;
  background-image: url("https://images.unsplash.com/photo-1617117873745-9a80d8f16ac2?auto=format&fit=crop&w=600&h=750&q=85");
}
.product-img-hover--tunic {
  background-color: #BAB8B0;
  background-image: url("https://images.unsplash.com/photo-1523381294911-8d3cead13475?auto=format&fit=crop&w=600&h=750&q=85");
}
.product-img-hover--lawn {
  background-color: #C8C0B8;
  background-image: url("https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?auto=format&fit=crop&w=600&h=750&q=85");
}
.product-img-hover--muslin-dress {
  background-color: #B8BCC0;
  background-image: url("https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=600&h=750&q=85");
}

/* ─── Label pill — top-left of image ─────────────── */
/* Italic serif, no fill, thin outline — reads as a
   magazine callout, not a Shopify badge. */
.product-card__label {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-serif);
  font-size: 10px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  border: 1px solid rgba(26, 26, 26, 0.32);
  padding: 3px 10px 4px;
  line-height: 1.4;
  background: rgba(248, 245, 240, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 1;
}

.product-card__label--limited {
  color: var(--muted);
  border-color: rgba(138, 130, 120, 0.38);
}

/* ─── Wishlist button — top-right of image ───────── */
/* Standard visibility at 0.22 opacity; fully opaque on
   focus/hover. Task: make it a permanent fixture. */
.product-card__wish {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--charcoal);
  padding: 8px;
  margin: -4px;
  line-height: 0;
  opacity: 0.22;          /* was 0 — now always softly visible */
  z-index: 2;             /* above the full-card stretched link */
  transition: opacity var(--t-fast), color var(--t-fast);
}

.product-card:hover    .product-card__wish,
.product-card:focus-within .product-card__wish {
  opacity: 0.55;
}

.product-card__wish:hover,
.product-card__wish:focus-visible {
  opacity: 1;
}

.product-card__wish:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 2px;
}

/* ─── Text body ──────────────────────────────────── */
.product-card__body {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
}

.product-card__name {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.43vw, 22px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--charcoal);
  margin-bottom: 5px;
}

.product-card__name a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--t-fast);
}

.product-card__name a:hover {
  opacity: 0.6;
}

.product-card__name a:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 3px;
}

.product-card__material {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 8px;
}

.product-card__price {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ─── Color swatch dots ──────────────────────────── */
.product-card__swatches {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

/* 12px circles with thin outline border, no fill override */
.product-card__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(26, 26, 26, 0.16);
  flex-shrink: 0;
  cursor: pointer;
  transition:
    transform var(--t-fast),
    border-color var(--t-fast);
}

.product-card__swatch:hover {
  transform: scale(1.3);
  border-color: rgba(26, 26, 26, 0.45);
}

/* "+N" overflow count — same family as swatch row */
.product-card__swatch-more {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 12px;
}

/* ─── Size availability ──────────────────────────── */
.product-card__sizes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 10px;
}

.product-card__size {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--charcoal);
  line-height: 1.6;
  padding: 0 3px;
}

/* Dot separator between sizes */
.product-card__size + .product-card__size::before {
  content: '\00B7';   /* middle dot */
  margin-right: 3px;
  color: var(--border);
  font-size: 11px;
}

/* Struck-through + muted = unavailable */
.product-card__size.is-unavailable {
  color: var(--muted);
  opacity: 0.4;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ─── Scarcity microcopy ─────────────────────────── */
/* Italic serif, no urgency — reads like a magazine
   footnote, not a countdown timer. */
.product-card__scarcity {
  font-family: var(--font-serif);
  font-size: 10px;
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
  opacity: 0.72;
  margin-top: 10px;
  line-height: 1.5;
}

/* ─── Quick Add — premium full-width pill, fills dark on hover ─ */
.product-card__atb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: transparent;
  border: 1px solid rgba(26, 26, 26, 0.22);
  padding: 12px 16px;
  margin-top: 14px;
  cursor: pointer;
  text-decoration: none;

  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity      0.3s ease,
    transform    0.3s ease,
    background   var(--t-fast),
    border-color var(--t-fast),
    color        var(--t-fast);
}

.product-card:hover     .product-card__atb,
.product-card:focus-within .product-card__atb {
  opacity: 1;
  transform: translateY(0);
}

/* Touch / mobile — always show the button */
@media (hover: none) {
  .product-card__atb {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card__atb:hover,
.product-card__atb:focus-visible {
  background:    var(--charcoal);
  border-color:  var(--charcoal);
  color:         #FFFFFF;
}

.product-card__atb:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

/* "Added ✓" confirmed state */
.product-card__atb.is-added {
  background:   var(--charcoal);
  border-color: var(--charcoal);
  color:        #FFFFFF;
  opacity: 1;
  transform: translateY(0);
}

/* ─── Filter pills ───────────────────────────────── */
/* No backgrounds or borders — active pill is underlined
   only. Tracked-out uppercase, same family as nav. */
.selection__filters {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 60px;
}

.selection__filter {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 20px;
  opacity: 0.5;
  position: relative;
  transition: opacity var(--t-fast);
}

/* Underline drawn from center on active */
.selection__filter::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--charcoal);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s ease;
}

.selection__filter.is-active {
  opacity: 1;
}

.selection__filter.is-active::after {
  transform: scaleX(1);
}

.selection__filter:hover:not(.is-active) {
  opacity: 0.8;
}

.selection__filter:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 2px;
  opacity: 1;
}

/* ─── Footer CTA ─────────────────────────────────── */
.selection__footer {
  text-align: center;
  margin-top: 72px;
}

/* "N more pieces" italic serif meta above the CTA */
.selection__count-meta {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
  opacity: 0.7;
  margin-bottom: 18px;
}

.selection__view-all {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: opacity var(--t-fast), letter-spacing 0.35s ease;
}

.selection__view-all:hover {
  opacity: 0.5;
  letter-spacing: 0.26em;
}

.selection__view-all:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 4px;
}

/* ─── Reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .product-card__img       { transition: none !important; }
  .product-card__img-hover { opacity: 0 !important; transition: none !important; }
  .product-card__atb       { opacity: 1; transform: none; transition: none !important; }
  .product-card__wish      { opacity: 0.4; transition: none !important; }
  .product-card__swatch    { transition: none !important; }
}

/* ─── Responsive ──────────────────────────────────── */

/* Mid-desktop: drop to 3 columns if space is tight */
@media (max-width: 1100px) {
  .selection {
    padding: 100px 52px 80px;
  }

  .selection__grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 48px;
  }
}

/* Tablet: 2 columns */
@media (max-width: 768px) {
  .selection {
    padding: 80px 40px 72px;
  }

  .selection__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 44px;
  }

  /* Always show ATB + wish on touch devices */
  .product-card__atb {
    opacity: 1;
    transform: none;
  }

  .product-card__wish {
    opacity: 0.45;
  }

  /* Filter pills: left-align on tablet */
  .selection__filters {
    gap: 0;
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* Mobile: 2-column grid for better browsing density */
@media (max-width: 480px) {
  .selection {
    padding: 72px 16px 64px;
  }

  .selection__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 12px;
    row-gap: 32px;
  }

  .selection__header {
    margin-bottom: 40px;
  }

  /* Simplify cards at ~151px column width */
  .product-card__sizes,
  .product-card__size-guide,
  .product-card__atb {
    display: none;
  }

  .product-card__name {
    font-size: 13px;
    letter-spacing: 0;
  }

  .product-card__material {
    font-size: 11px;
  }

  .product-card__price {
    font-size: 13px;
  }

  .product-card__swatch {
    width: 10px;
    height: 10px;
  }

  /* Filter pills: single scrollable row, no wrapping */
  .selection__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 0;
    margin-bottom: 32px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .selection__filters::-webkit-scrollbar { display: none; }

  .selection__filter {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 11px;
  }
}


/* =====================================================
   9b. MAKER'S MARK — Craftsmanship Pillars
   Four promises on pure white. No card backgrounds —
   icons + type on open field. Generous vertical air.
   ===================================================== */

.makers-mark {
  background: var(--white);
  padding: 120px 84px 130px;
  max-width: 1440px;
  margin: 0 auto;
}

/* ─── Header ─────────────────────────────────────── */
.makers-mark__header {
  text-align: center;
  margin-bottom: 72px;
}

.makers-mark__eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 18px;
}

.makers-mark__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 2.81vw, 48px);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-head);
  color: var(--charcoal);
}

/* ─── Four-column pillar row ─────────────────────── */
.makers-mark__pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 80px;
}

.makers-mark__pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* Scroll reveal */
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}

.makers-mark__pillar.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 80ms stagger across the four pillars */
.makers-mark__pillars .makers-mark__pillar:nth-child(1) { transition-delay:   0ms; }
.makers-mark__pillars .makers-mark__pillar:nth-child(2) { transition-delay:  80ms; }
.makers-mark__pillars .makers-mark__pillar:nth-child(3) { transition-delay: 160ms; }
.makers-mark__pillars .makers-mark__pillar:nth-child(4) { transition-delay: 240ms; }

/* ─── Line icon ──────────────────────────────────── */
/* 36×36 SVG, stroke-width 1, no fill — hand-drawn feel */
.makers-mark__icon {
  width: 36px;
  height: 36px;
  color: var(--charcoal);
  opacity: 0.55;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.makers-mark__icon svg {
  width: 100%;
  height: 100%;
}

/* ─── Pillar name — italic serif ─────────────────── */
.makers-mark__pillar-name {
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.33vw, 19px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--charcoal);
  margin-bottom: 12px;
}

/* ─── Supporting desc — muted sans, max 12 words ─── */
.makers-mark__pillar-desc {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--muted);
  max-width: 22ch;
}

/* ─── Thin divider at section base ──────────────── */
.makers-mark__rule {
  border: none;
  border-top: 1px solid var(--border);
}

/* ─── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .makers-mark__pillar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── Responsive ─────────────────────────────────── */

/* Tablet: 2×2 grid */
@media (max-width: 900px) {
  .makers-mark {
    padding: 96px 52px 80px;
  }

  .makers-mark__pillars {
    grid-template-columns: repeat(2, 1fr);
    gap: 52px 40px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .makers-mark {
    padding: 80px 28px 72px;
  }

  .makers-mark__pillars {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 24px;
  }
}


/* =====================================================
   10. HERITAGE & CRAFT
   ===================================================== */

.craft {
  background: var(--ivory);   /* differentiated from adjacent white sections */
  overflow: hidden;
}

.craft__block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 72vh;
}

/* Image column */
.craft__img-col {
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}

.craft__img-col.is-visible {
  opacity: 1;
}

/* Artisan craft photography */
.craft__img--process {
  /* "Made slowly. Made once." — close-up of threads on a traditional weaving loom */
  background-color: #CBC0B0;
  background-image: url("https://images.pexels.com/photos/6634602/pexels-photo-6634602.jpeg?auto=compress&cs=tinysrgb&w=900&h=1000&fit=crop");
  background-position: center center;
}

.craft__img--loom {
  /* "Fifty years of quiet making." — hands weaving colorful fabric on traditional loom */
  background-color: #C8BFB2;
  background-image: url("https://images.pexels.com/photos/3585855/pexels-photo-3585855.jpeg?auto=compress&cs=tinysrgb&w=900&h=1000&fit=crop");
  background-position: center center;
}

/* Text column */
.craft__text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 84px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s var(--ease-out) 0.15s,
              transform 0.75s var(--ease-out) 0.15s;
}

.craft__text-col.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reverse block: text left / image right */
.craft__block--reverse .craft__text-col {
  padding: 80px 84px 80px 84px;
}

/* Date stamp — italic serif, above headline in Heritage block */
.craft__datestamp {
  display: block;
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.7;
  margin-bottom: 14px;
}

/* Eyebrow */
.craft__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.68);
  margin-bottom: 20px;
}

/* Headline */
.craft__headline {
  font-family: var(--font-serif);
  font-size: clamp(35px, 3.71vw, 60px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  max-width: 16ch;
  margin-bottom: 28px;
}

/* Body copy */
.craft__body {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(26, 26, 26, 0.70);
  opacity: 1;
  max-width: 62ch;
  margin-bottom: 36px;
}

/* CTA */
.craft__cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  transition: opacity var(--t-fast);
  align-self: flex-start;
}

.craft__cta:hover { opacity: 0.55; }

/* Secondary CTA — quieter weight, sits below primary */
.craft__cta--secondary {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  opacity: 0.38;
  transition: opacity var(--t-fast);
  margin-top: 14px;
  align-self: flex-start;
}

.craft__cta--secondary:hover { opacity: 0.7; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .craft__img-col,
  .craft__text-col {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Tablet: collapse to single column */
@media (max-width: 900px) {
  .craft__block {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .craft__img-col {
    min-height: 60vw;
  }

  /* On mobile, image always appears above text regardless of DOM order */
  .craft__block--reverse .craft__img-col {
    order: -1;
  }

  .craft__text-col,
  .craft__block--reverse .craft__text-col {
    padding: 64px 56px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .craft__img-col {
    min-height: 72vw;
  }

  .craft__text-col,
  .craft__block--reverse .craft__text-col {
    padding: 56px 28px;
  }
}


/* =====================================================
   10b. JOURNAL PREVIEW
   ===================================================== */

.journal {
  background: var(--white);
  padding: 140px 84px 160px;
  max-width: 1440px;
  margin: 0 auto;
}

.journal__header {
  text-align: center;
  margin-bottom: 64px;
}

.journal__eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 14px;
}

.journal__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(33px, 3.23vw, 51px);
  color: var(--charcoal);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}

.journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 72px;
}

/* ── Journal card ────────────────────────────────────── */

/* Resting state is visible so this content never depends on the JS
   IntersectionObserver reveal firing (it was leaving these sections blank).
   The .is-visible class still applies harmlessly when the observer runs. */
.journal-card {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}

.journal-card:nth-child(2) { transition-delay: 80ms; }
.journal-card:nth-child(3) { transition-delay: 160ms; }

.journal-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.journal-card__img-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ivory);
  margin-bottom: 24px;
}

.journal-card__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.55s var(--ease-out);
}

.journal-card:hover .journal-card__img {
  transform: scale(1.04);
}

/* Journal card images — matched to article content */
.journal-img--01 {
  /* "One shirt, a hundred days" — woman reading in soft natural light */
  background-image: url('https://images.unsplash.com/photo-1558769132-cb1aea458c5e?w=600&q=80');
  background-color: #d4c9bb;
  background-position: center top;
}

.journal-img--02 {
  /* "Rina Akter, weaving since twelve" — artisan at a traditional loom */
  background-image: url('https://images.unsplash.com/photo-1556905055-8f358a7a47b2?w=600&q=80');
  background-color: #c8bfb3;
  background-position: center center;
}

.journal-img--03 {
  /* "Why we still dye in clay pots" — hands dyeing fabric with indigo */
  background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&q=80');
  background-color: #bfb8ae;
  background-position: center center;
}

.journal-card__category {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.journal-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(16px, 1.33vw, 21px);
  line-height: 1.3;
  color: var(--charcoal);
  margin: 0 0 14px;
}

.journal-card__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.4s var(--ease-out);
}

.journal-card__title a:hover {
  background-size: 100% 1px;
}

.journal-card__meta {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.72;
  margin-top: auto;
}

/* ── Journal footer CTA ──────────────────────────────── */

.journal__footer {
  text-align: center;
}

.journal__cta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.35s var(--ease-out), opacity 0.2s ease;
  opacity: 0.55;
}

.journal__cta:hover {
  background-size: 100% 1px;
  opacity: 1;
}

/* ── Journal responsive ──────────────────────────────── */

@media (max-width: 1024px) {
  .journal {
    padding: 96px 56px 112px;
  }
}

@media (max-width: 768px) {
  .journal {
    padding: 80px 32px 96px;
  }

  .journal__grid {
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 56px;
  }

  .journal-card__img-wrap {
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journal-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =====================================================
   11. VOICES (TESTIMONIALS)
   ===================================================== */

/* ── Voices — White background, cream cards ────────── */
.voices {
  background: var(--white);
  padding: 100px 84px 120px;
}

.voices__rule { display: none; }

.voices__inner {
  max-width: 1440px;
  margin: 0 auto;
}

.voices__header {
  text-align: center;
  margin-bottom: 56px;
}

.voices__eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 14px;
}

.voices__headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.15;
  margin: 0;
}

.voices__headline::after { display: none; }

/* 2-row × 3-col card grid */
.voices__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Individual card — cream background, top gold accent line */
.voice {
  margin: 0;
  padding: 32px 28px 28px;
  background: #F5F1EB;
  border: 1px solid rgba(26, 26, 26, 0.10);
  border-top: 2px solid rgba(184, 150, 90, 0.55);
  border-radius: 0 0 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s var(--ease-out),
              transform 0.65s var(--ease-out),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.voice:hover {
  border-top-color: rgba(184, 150, 90, 0.85);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

.voice.is-visible:hover {
  transform: translateY(-2px);
}

.voice:first-child,
.voice:last-child {
  padding: 32px 28px 28px;
  background: #F5F1EB;
}

.voice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.voice:nth-child(1) { transition-delay:   0ms; }
.voice:nth-child(2) { transition-delay:  60ms; }
.voice:nth-child(3) { transition-delay: 120ms; }
.voice:nth-child(4) { transition-delay: 180ms; }
.voice:nth-child(5) { transition-delay: 240ms; }
.voice:nth-child(6) { transition-delay: 300ms; }

/* Stars */
.voice__stars {
  font-size: 16px;
  letter-spacing: 3px;
  color: #B8965A;
  line-height: 1;
}

/* Quote body */
.voice__quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(20px, 1.7vw, 25px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1;
}

.voice__quote::before { display: none; }

/* Author row */
.voice__attr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(26, 26, 26, 0.10);
  font-style: normal;
}

/* Initial avatar circle */
.voice__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(184, 150, 90, 0.12);
  border: 1px solid rgba(184, 150, 90, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: #8A6E3E;
  flex-shrink: 0;
}

.voice__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.voice__name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  color: var(--charcoal);
}

.voice__role {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .voice {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Tablet */
@media (max-width: 900px) {
  .voices__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .voice {
    padding: 28px 24px;
  }
  .voice:first-child,
  .voice:last-child {
    padding: 28px 24px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .voices {
    padding: 72px 24px 88px;
  }
  .voices__list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* =====================================================
   11b. SERVICE & PROMISE BAND
   ===================================================== */

/* ── Promise — Soft sage & cream theme ────────────── */
.promise {
  background: #F4F7F2;
  border-top: 1px solid rgba(60, 80, 55, 0.14);
  border-bottom: 1px solid rgba(60, 80, 55, 0.14);
}

.promise__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 100px 84px;
}

.promise__header {
  text-align: center;
  margin-bottom: 72px;
}

.promise__eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #6B7F65;
  margin-bottom: 16px;
}

.promise__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 3.2vw, 54px);
  color: #2C3828;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

.promise__pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.promise__pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  background: rgba(255, 253, 248, 0.70);
  border: 1px solid rgba(60, 80, 55, 0.10);
  border-radius: 2px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.promise__pillar:nth-child(1) { transition-delay: 0ms;   }
.promise__pillar:nth-child(2) { transition-delay: 90ms;  }
.promise__pillar:nth-child(3) { transition-delay: 180ms; }
.promise__pillar:nth-child(4) { transition-delay: 270ms; }

.promise__pillar.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Icon ring — sage-tinted circle */
.promise__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(60, 80, 55, 0.25);
  border-radius: 50%;
  background: rgba(122, 148, 116, 0.08);
  color: #4A6645;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.promise__icon svg {
  width: 16px;
  height: 16px;
}

.promise__pillar-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: #2C3828;
  line-height: 1.3;
  margin: 0 0 12px;
}

.promise__pillar-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
  color: #6B7F65;
  max-width: 22ch;
  margin: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .promise__pillar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Tablet: 2×2 */
@media (max-width: 900px) {
  .promise__pillars {
    grid-template-columns: repeat(2, 1fr);
    gap: 56px 40px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .promise__inner {
    padding: 80px 32px;
  }

  .promise__pillars {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}


/* =====================================================
   11c. LIVED-IN GALLERY
   ===================================================== */

.gallery {
  background: var(--ivory);
  padding: 120px 84px 160px;
}

.gallery__inner {
  max-width: 1440px;
  margin: 0 auto;
}

.gallery__header {
  text-align: center;
  margin-bottom: 64px;
}

.gallery__eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 14px;
}

.gallery__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 2.81vw, 48px);
  color: var(--charcoal);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.gallery__item {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--ivory);
  opacity: 1;
  transform: none;
}

.gallery__item:nth-child(1) { transition-delay: 0ms;   }
.gallery__item:nth-child(2) { transition-delay: 60ms;  }
.gallery__item:nth-child(3) { transition-delay: 120ms; }
.gallery__item:nth-child(4) { transition-delay: 180ms; }
.gallery__item:nth-child(5) { transition-delay: 240ms; }
.gallery__item:nth-child(6) { transition-delay: 300ms; }

.gallery__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.gallery__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.55s var(--ease-out);
}

.gallery__item:hover .gallery__img {
  transform: scale(1.02);
}

/* Gallery image fills — on-brand lifestyle: natural fabrics, warm tones */
.gallery-img--g1 {
  background-image: url('https://images.pexels.com/photos/7789144/pexels-photo-7789144.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop');
  background-color: #d8cfc6;
  background-position: center top;
}

.gallery-img--g2 {
  background-image: url('https://images.pexels.com/photos/7789139/pexels-photo-7789139.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop');
  background-color: #c9c0b5;
  background-position: center top;
}

.gallery-img--g3 {
  background-image: url('https://images.pexels.com/photos/8452016/pexels-photo-8452016.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop');
  background-color: #dfd8cf;
  background-position: center top;
}

.gallery-img--g4 {
  background-image: url('https://images.pexels.com/photos/11762028/pexels-photo-11762028.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop');
  background-color: #c4b8ab;
  background-position: center center;
}

.gallery-img--g5 {
  background-image: url('https://images.pexels.com/photos/20453639/pexels-photo-20453639.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop');
  background-color: #d0c8bc;
  background-position: center top;
}

.gallery-img--g6 {
  background-image: url('https://images.pexels.com/photos/6154323/pexels-photo-6154323.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&fit=crop');
  background-color: #cfc6bb;
  background-position: center top;
}

/* @handle link */
.gallery__footer {
  text-align: center;
  margin: 0;
}

.gallery__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin: 0 0 18px;
}

.gallery__community-cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.62;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  transition: opacity var(--t-fast), letter-spacing 0.35s ease;
}

.gallery__community-cta:hover {
  opacity: 1;
  letter-spacing: 0.2em;
}

.gallery__community-cta:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 4px;
  opacity: 1;
}

/* Gallery item button wrapper */
.gallery__btn {
  display: block;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}
.gallery__btn .gallery__img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}
.gallery__btn:hover .gallery__img { transform: scale(1.04); }

.gallery__zoom {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(248, 245, 240, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.gallery__btn:hover .gallery__zoom,
.gallery__btn:focus-visible .gallery__zoom {
  opacity: 1;
  transform: scale(1);
}
.gallery__btn:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

/* ── LIGHTBOX ─────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.96);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* When closed, fully remove from layout so the fixed full-screen
   overlay can't intercept clicks (the .lightbox display:flex above
   otherwise overrides the [hidden] default of display:none). */
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 60px 80px;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease;
  user-select: none;
  display: block;
}
.lightbox__img.is-loaded {
  opacity: 1;
  transform: scale(1);
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: rgba(248, 245, 240, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, transform 0.2s;
  z-index: 2;
}
.lightbox__close:hover { color: #F8F5F0; transform: rotate(90deg); }
.lightbox__close:focus-visible { outline: 1px solid rgba(248,245,240,0.5); outline-offset: 4px; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: none;
  border: 1px solid rgba(248, 245, 240, 0.2);
  color: rgba(248, 245, 240, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  z-index: 2;
}
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
.lightbox__nav:hover {
  background: rgba(248, 245, 240, 0.1);
  border-color: rgba(248, 245, 240, 0.5);
  color: #F8F5F0;
}
.lightbox__nav:focus-visible { outline: 1px solid rgba(248,245,240,0.5); outline-offset: 4px; }

.lightbox__counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(248, 245, 240, 0.45);
  pointer-events: none;
}

@media (max-width: 640px) {
  .lightbox__stage { padding: 52px 20px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gallery__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .lightbox, .lightbox__img { transition: none; }
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
  .gallery {
    padding: 96px 56px 112px;
  }

  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 column */
@media (max-width: 600px) {
  .gallery {
    padding: 80px 28px 96px;
  }

  .gallery__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}


/* =====================================================
   12. INVITATION — THE PRIVATE CIRCLE
   ===================================================== */

.invitation {
  background: var(--white);
  padding: 140px 84px;
  text-align: center;
}

.invitation__inner {
  max-width: 480px;
  margin: 0 auto;
  opacity: 1;
  transform: none;
}

.invitation__inner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Issue pre-eyebrow */
.invitation__preeyebrow {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Eyebrow — matches established pattern */
.invitation__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.68);
  margin-bottom: 20px;
}

/* Headline */
.invitation__title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 2.62vw, 47px);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-head);
  color: var(--charcoal);
  margin-bottom: 18px;
}

/* Supporting line */
.invitation__subline {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--charcoal);
  opacity: 0.65;
  margin-bottom: 52px;
}

/* ── Form ───────────────────────────────────────── */
.invitation__form {
  margin-bottom: 20px;
}

.invitation__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  text-align: left;
}

/* Single underline row: input + submit share one border */
.invitation__row {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  transition: border-color var(--t-fast);
}

.invitation__row:focus-within {
  border-bottom-color: var(--charcoal);
}

.invitation__input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--charcoal);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  line-height: 1;
}

.invitation__input::placeholder {
  color: var(--muted);
  opacity: 0.55;
}

.invitation__input.is-error {
  color: #B85050;
}
.invitation__row:has(.invitation__input.is-error) {
  border-bottom-color: #B85050;
}

@keyframes invite-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.invitation__input.shake {
  animation: invite-shake 0.35s ease;
}

/* Submit — quiet underlined link style, matches .craft__cta */
.invitation__submit {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--charcoal);
  border: 1px solid var(--charcoal);
  cursor: pointer;
  padding: 0 22px;
  height: 46px;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}

.invitation__submit:hover {
  background: transparent;
  color: var(--charcoal);
}
.invitation__submit:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 4px;
}
.invitation__submit:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Microcopy */
.invitation__microcopy {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.8;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .invitation__inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .invitation {
    padding: 96px 28px;
  }
}


/* =====================================================
   13. FOOTER
   ===================================================== */

/* Visually hidden utility for locale label */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer {
  background: var(--charcoal);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 84px 52px;
}

/* ── Brand banner ───────────────────────────────── */
.footer__banner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.footer__banner-wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 5.95vw, 85px);
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: rgba(255, 255, 255, 0.88);
}

.footer__banner-statement {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13px, 1.1vw, 17px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.32);
  text-align: right;
  max-width: 28ch;
  margin: 0;
  padding-bottom: 6px;
}

/* ── 4-column grid ──────────────────────────────── */
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Brand column */
.footer__col--brand {
  padding-right: 32px;
}

.footer__wordmark {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}

.footer__tagline {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.42);
  max-width: 22ch;
  margin-bottom: 32px;
}

/* Social icons */
.footer__social {
  display: flex;
  gap: 18px;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.38);
  transition: color var(--t-fast);
}

.footer__social-link:hover        { color: #fff; }
.footer__social-link:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.45);
  outline-offset: 4px;
}

/* Nav columns */
.footer__col-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  margin-bottom: 22px;
}

.footer__col nav {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer__link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--t-fast);
}

.footer__link:hover        { color: #fff; }
.footer__link:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.45);
  outline-offset: 3px;
}

/* ── Atelier locations + certification badges ────── */
.footer__mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.footer__ateliers {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.28);
}

.footer__appt {
  opacity: 0.6;
}

.footer__certs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer__cert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.26);
}

/* ── Bottom utility row ─────────────────────────── */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 32px;
}

.footer__copy {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.28);
}

/* Secure checkout note — single quiet line, no badges */
.footer__secure {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.28);
}

/* Locale selector */
.footer__locale-label {
  /* visually hidden but accessible */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer__locale {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.42);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  padding: 2px 20px 4px 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.32)' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

.footer__locale:focus {
  outline: 1px solid rgba(255, 255, 255, 0.32);
  outline-offset: 4px;
}

.footer__locale option {
  background: var(--charcoal);
  color: rgba(255, 255, 255, 0.7);
}

/* ── Responsive ─────────────────────────────────── */

/* Tablet: collapse to 2-column */
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px 40px;
  }

  .footer__col--brand {
    grid-column: 1 / -1;
    padding-right: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 48px;
    align-items: start;
  }

  .footer__tagline { margin-bottom: 0; }

  .footer__social {
    grid-column: 1 / -1;
    margin-top: 20px;
  }
}

/* Mobile: single column */
@media (max-width: 600px) {
  .footer__inner {
    padding: 64px 28px 40px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 48px;
  }

  .footer__col--brand {
    display: block;
    grid-column: auto;
  }

  .footer__tagline { margin-bottom: 28px; }

  .footer__social {
    grid-column: auto;
    margin-top: 0;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* New footer elements — responsive overrides */
@media (max-width: 900px) {
  .footer__banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 48px;
    margin-bottom: 48px;
  }

  .footer__banner-statement {
    text-align: left;
  }

  .footer__mid {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .footer__banner {
    padding-bottom: 36px;
    margin-bottom: 36px;
  }

  .footer__certs {
    gap: 6px;
  }
}


/* =====================================================
   14. UI OVERLAYS — Search, Account Dropdown, Cart Drawer
   ===================================================== */

/* ── Easing shared across all overlays ───────────────
   Spec: cubic-bezier(0.4, 0, 0.2, 1) — Material's
   standard easing; slow in, smooth out, no bounce.
──────────────────────────────────────────────────── */

/* ── Body scroll lock ──────────────────────────────── */
body.ui-locked {
  overflow: hidden;
}

/* ── Shared full-page backdrop ─────────────────────── */
.ui-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ── SEARCH OVERLAY ────────────────────────────────── */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: var(--warm-bg);
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.search-overlay.is-open {
  transform: translateY(0);
}

.search-overlay__inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 80px 48px 56px;
  position: relative;
}

/* × close — top right corner */
.search-overlay__close {
  position: absolute;
  top: 28px;
  right: 48px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--charcoal);
  opacity: 0.4;
  padding: 8px;
  margin: -8px;
  line-height: 0;
  transition: opacity var(--t-fast);
}
.search-overlay__close:hover      { opacity: 0.85; }
.search-overlay__close:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 3px;
  opacity: 1;
}

/* Large italic input — minimal, just a bottom rule */
.search-overlay__input-wrap {
  margin-bottom: 48px;
}

.search-overlay__input {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  outline: none;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 400;
  font-style: italic;
  color: var(--charcoal);
  padding: 10px 0 16px;
  caret-color: var(--charcoal);
  letter-spacing: -0.01em;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}
/* Remove Safari/Chrome search cancel button */
.search-overlay__input::-webkit-search-cancel-button { display: none; }

.search-overlay__input::placeholder {
  color: var(--muted);
  opacity: 0.55;
}
.search-overlay__input:focus {
  border-bottom-color: var(--charcoal);
  transition: border-color 0.2s ease;
}

/* Two-column suggestion area */
.search-overlay__suggestions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.search-overlay__group-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-eye);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

/* Recent searches */
.search-overlay__recent {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-overlay__recent-btn {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--charcoal);
  padding: 0;
  opacity: 0.55;
  transition: opacity var(--t-fast);
}
.search-overlay__recent-btn::before {
  content: '↗ ';
  font-size: 10px;
  opacity: 0.5;
}
.search-overlay__recent-btn:hover      { opacity: 1; }
.search-overlay__recent-btn:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 3px;
  opacity: 1;
}

/* Collection links */
.search-overlay__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-overlay__link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  opacity: 0.55;
  transition: opacity var(--t-fast);
}
.search-overlay__link:hover { opacity: 1; }
.search-overlay__link:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 3px;
  opacity: 1;
}

/* ── ACCOUNT DROPDOWN ──────────────────────────────── */

/* Relative wrapper sits inside .header__actions flex row */
.header__action-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* The dropdown itself */
.account-dropdown {
  position: absolute;
  top: calc(100% + 20px);
  right: 0;
  width: 240px;
  background: var(--warm-bg);
  border: 1px solid var(--border);
  padding: 28px 24px 22px;
  z-index: 1200;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity  0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.account-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.account-dropdown__welcome {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 5px;
}

.account-dropdown__sub {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

.account-dropdown__btn {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  padding: 13px 16px;
  border: 1px solid var(--charcoal);
  margin-bottom: 10px;
  transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.account-dropdown__btn:last-of-type { margin-bottom: 0; }

.account-dropdown__btn--primary {
  background: var(--charcoal);
  color: #FFFFFF;
}
.account-dropdown__btn--primary:hover { opacity: 0.82; }

.account-dropdown__btn--ghost {
  background: transparent;
  color: var(--charcoal);
}
.account-dropdown__btn--ghost:hover {
  background: var(--charcoal);
  color: #FFFFFF;
}

/* ── WISHLIST COUNT BADGE (header icon) ────────────── */
.header__wish-count {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--charcoal);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.header__wish-count[data-count]:not([data-count=""]):not([data-count="0"]) {
  opacity: 1;
  transform: scale(1);
}

/* ── WISHLIST DRAWER ────────────────────────────────── */
.wishlist-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--warm-bg);
  border-left: 1px solid var(--border);
  z-index: 600;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.38s var(--ease-out);
}
.wishlist-drawer.is-open { transform: translateX(0); }

.wishlist-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wishlist-drawer__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
}
.wishlist-drawer__close {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1;
  padding: 4px 6px;
  opacity: 0.55;
  transition: opacity var(--t-fast);
}
.wishlist-drawer__close:hover { opacity: 0.85; }

.wishlist-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 32px;
  overscroll-behavior: contain;
}

.wish-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 220px;
  text-align: center;
  gap: 10px;
}
.wish-empty__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--muted);
}
.wish-empty__cta {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--charcoal);
  padding-bottom: 2px;
  margin-top: 6px;
}

.wish-item {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.wish-item__thumb {
  width: 64px;
  height: 80px;
  background: var(--sand) center / cover no-repeat;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.wish-item__info { flex: 1; min-width: 0; }
.wish-item__name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 3px;
}
.wish-item__meta {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
}
.wish-item__price {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 12px;
}
.wish-item__actions { display: flex; gap: 12px; align-items: center; }
.wish-item__move-to-bag {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: none;
  border: 1px solid rgba(26,26,26,0.3);
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.wish-item__move-to-bag:hover { background: var(--charcoal); color: #fff; }
.wish-item__remove {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--t-fast);
}
.wish-item__remove:hover { color: var(--charcoal); }

/* Saved heart state on product cards */
.product-card__wish.is-saved { color: #B8606A; opacity: 1; }
.product-card__wish.is-saved svg { fill: #B8606A; }

/* Wish-pulse animation on save */
@keyframes wish-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.product-card__wish.wish-pulse { animation: wish-pulse 0.35s ease; }

/* Header wishlist button — needs relative for badge */
.header__wish-btn { position: relative; }

@media (max-width: 640px) {
  .wishlist-drawer {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    top: auto;
    height: 80vh;
    transform: translateY(100%);
  }
  .wishlist-drawer.is-open { transform: translateY(0); }
}

/* ── CART DRAWER ───────────────────────────────────── */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--warm-bg);
  border-left: 1px solid var(--border);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.cart-drawer.is-open {
  transform: translateX(0);
}

/* Header row */
.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cart-drawer__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: var(--track-head);
  color: var(--charcoal);
}

.cart-drawer__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--charcoal);
  opacity: 0.4;
  padding: 8px;
  margin: -8px;
  line-height: 0;
  transition: opacity var(--t-fast);
}
.cart-drawer__close:hover      { opacity: 0.85; }
.cart-drawer__close:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 2px;
  opacity: 1;
}

/* Scrollable body */
.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 32px;
  overscroll-behavior: contain;
}

/* ── Empty state ─────────────────────────────────── */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 220px;
  text-align: center;
  padding: 48px 0;
}

.cart-empty__line {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  color: var(--charcoal);
  opacity: 0.55;
  margin-bottom: 20px;
  line-height: 1.4;
}

.cart-empty__cta {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  opacity: 0.5;
  transition: opacity var(--t-fast);
}
.cart-empty__cta:hover { opacity: 1; }

/* ── Cart item ───────────────────────────────────── */
.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.cart-item__thumb {
  width: 64px;
  height: 80px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.cart-item__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cart-item__name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--charcoal);
}

.cart-item__meta {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Quantity controls: [−] [n] [+] */
.cart-item__controls {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.cart-item__qty-btn {
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1;
  transition: border-color var(--t-fast);
  flex-shrink: 0;
}
.cart-item__qty-btn:hover      { border-color: var(--charcoal); }
.cart-item__qty-btn:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 2px;
}

.cart-item__qty {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--charcoal);
  min-width: 32px;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Price + remove on the same row */
.cart-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-item__price {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--charcoal);
}

.cart-item__remove {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  padding: 0;
  transition: color var(--t-fast);
}
.cart-item__remove:hover { color: var(--charcoal); }
.cart-item__remove:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 2px;
}

/* ── Free shipping progress bar ─────────────────── */
.cart-drawer__shipping-bar {
  padding: 16px 32px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-drawer__shipping-msg {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.5;
  transition: color 0.3s ease;
}
.cart-drawer__shipping-bar.is-unlocked .cart-drawer__shipping-msg {
  color: #5A7A5A;
}
.cart-drawer__progress-track {
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.cart-drawer__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--charcoal);
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.4s ease;
}
.cart-drawer__shipping-bar.is-unlocked .cart-drawer__progress-fill {
  background: #5A7A5A;
}

/* ── Cart footer ─────────────────────────────────── */
.cart-drawer__footer {
  border-top: 1px solid var(--border);
  padding: 22px 32px 32px;
  flex-shrink: 0;
}

.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.cart-drawer__subtotal-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.cart-drawer__subtotal-amount {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--charcoal);
}

.cart-drawer__shipping-note { /* kept for legacy reference — replaced by progress bar */
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Editorial checkout link — thin border, not a filled button */
.cart-drawer__checkout {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  text-align: center;
  padding: 15px 0;
  border: 1px solid var(--border);
  opacity: 0.75;
  transition:
    border-color var(--t-fast),
    opacity var(--t-fast);
}
.cart-drawer__checkout:hover {
  border-color: var(--charcoal);
  opacity: 1;
}
.cart-drawer__checkout:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 3px;
  opacity: 1;
}

/* ── Cart count badge ────────────────────────────── */
.header__cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0 3.5px;
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1;
  /* Visible/hidden driven by data-count attribute */
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.2s ease;
}

.header__cart-count[data-count="0"] {
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}

/* Scale-pulse on add */
.header__cart-count.is-pulsing {
  animation: badge-pulse 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes badge-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* ── ATB "Added ✓" state ─────────────────────────── */
.product-card__atb.is-added {
  opacity: 1 !important;
  transform: translateY(0) !important;
  color: var(--charcoal);
}

/* ── Mobile / responsive ─────────────────────────── */
@media (max-width: 640px) {
  .search-overlay__inner {
    padding: 64px 28px 44px;
  }
  .search-overlay__close {
    right: 28px;
    top: 20px;
  }
  .search-overlay__suggestions {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cart-drawer {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .cart-drawer__header,
  .cart-drawer__body,
  .cart-drawer__footer {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Reduced motion — disable all overlay transitions */
@media (prefers-reduced-motion: reduce) {
  .search-overlay,
  .account-dropdown,
  .cart-drawer,
  .ui-backdrop,
  .header__cart-count {
    transition: none;
    animation: none;
  }
  @keyframes badge-pulse { 0%, 100% { transform: scale(1); } }
}


/* =====================================================
   15. CAMPAIGN BREAK — Dark editorial band
   Full-width cinematic section between product grid
   and Maker's Mark. Typography-first, no image needed.
   ===================================================== */

.campaign-break {
  background: var(--warm-bg);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.campaign-break__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 140px 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.campaign-break__kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 36px;
}

.campaign-break__headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(52px, 8vw, 108px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--charcoal);
  margin: 0 0 40px;
  max-width: 18ch;
}

.campaign-break__body {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 300;
  line-height: 1.85;
  color: var(--muted);
  max-width: 54ch;
  margin: 0 0 56px;
  letter-spacing: 0.01em;
}

.campaign-break__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--charcoal);
  border: 1px solid rgba(26, 26, 26, 0.30);
  padding: 16px 40px;
  text-decoration: none;
  transition:
    background   var(--t-fast),
    border-color var(--t-fast),
    color        var(--t-fast);
}

.campaign-break__cta:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--ivory);
}

.campaign-break__cta:focus-visible {
  outline: 1px solid var(--charcoal);
  outline-offset: 4px;
}

/* Responsive */
@media (max-width: 900px) {
  .campaign-break__inner { padding: 112px 52px; }
}
@media (max-width: 640px) {
  .campaign-break__inner { padding: 96px 28px; }
  .campaign-break__body  { display: none; } /* collapse to headline + CTA on mobile */
}


/* =====================================================
   16. JOURNAL CARD EXCERPTS
   ===================================================== */

.journal-card__excerpt {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(26, 26, 26, 0.55);
  margin: 6px 0 0;
}


/* =====================================================
   17. PRODUCT CARD — SIZE GUIDE LINK
   ===================================================== */

.product-card__size-guide {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  opacity: 0.6;
  margin-left: 8px;
  cursor: pointer;
  transition: opacity var(--t-fast);
  background: none;
  border: none;
  padding: 0;
}

.product-card__size-guide:hover  { opacity: 1; }


/* =====================================================
   18. SIZE PICKER — Inline popup on Quick Add
   ===================================================== */

.size-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}

.size-picker-overlay.is-open {
  pointer-events: auto;
}

.size-picker {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 32px 52px 40px;
  z-index: 901;
  transform: translateY(100%);
  transition: transform 0.35s var(--ease-out);
  max-height: 70vh;
  overflow-y: auto;
}

.size-picker.is-open {
  transform: translateY(0);
}

.size-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.size-picker__product-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: var(--charcoal);
}

.size-picker__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 8px;
  margin: -8px;
  line-height: 0;
  transition: color var(--t-fast);
}
.size-picker__close:hover { color: var(--charcoal); }

.size-picker__label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.size-picker__guide-link {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--muted);
  text-decoration: underline;
  opacity: 0.7;
  transition: opacity var(--t-fast);
}
.size-picker__guide-link:hover { opacity: 1; }

.size-picker__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.size-picker__btn {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal);
  border: 1px solid var(--border);
  background: none;
  padding: 12px 22px;
  cursor: pointer;
  transition:
    border-color var(--t-fast),
    background   var(--t-fast),
    color        var(--t-fast);
  min-width: 60px;
  text-align: center;
}

.size-picker__btn:hover:not(:disabled) {
  border-color: var(--charcoal);
}

.size-picker__btn.is-selected {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
}

.size-picker__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}

.size-picker__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--charcoal);
  border: 1px solid var(--charcoal);
  padding: 16px 32px;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.size-picker__add:hover:not(:disabled) { opacity: 0.78; }
.size-picker__add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Scrim behind picker */
.size-picker-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.28);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.size-picker-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 640px) {
  .size-picker { padding: 28px 24px 36px; }
}


/* =====================================================
   19. INVITATION SUCCESS STATE
   ===================================================== */

.invitation__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 0;
}

.invitation__success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(184, 150, 90, 0.4);
  background: rgba(184, 150, 90, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B8965A;
}

.invitation__success-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.55;
  max-width: 36ch;
  text-align: center;
}

.invitation__success-sub {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.75;
}


/* =====================================================
   20. BACK TO TOP BUTTON
   ===================================================== */

.back-to-top {
  position: fixed;
  bottom: 36px;
  right: 36px;
  z-index: 200;
  width: 44px;
  height: 44px;
  background: rgba(26, 26, 26, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity   0.3s ease,
    transform 0.3s ease,
    background var(--t-fast);
  pointer-events: none;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: rgba(26, 26, 26, 0.96);
}

.back-to-top:focus-visible {
  outline: 1px solid rgba(255,255,255,0.5);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .back-to-top {
    bottom: 24px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}


/* =====================================================
   21. FEATURE STORY — editorial split before product grid
   ===================================================== */

.feature-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 580px;
  overflow: hidden;
}

.feature-story__img-wrap {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.feature-story__img-wrap.is-visible { opacity: 1; }

.feature-story__img {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  transform: scale(1.04);
  transition: transform 1.4s ease;
  background-image: url("https://images.pexels.com/photos/3622608/pexels-photo-3622608.jpeg?auto=compress&cs=tinysrgb&w=900&h=700&fit=crop");
}
.feature-story__img-wrap.is-visible .feature-story__img { transform: scale(1); }

.feature-story__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 72px;
  background: var(--ivory);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease 0.25s, transform 0.7s ease 0.25s;
}
.feature-story__content.is-visible { opacity: 1; transform: translateY(0); }

.feature-story__tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

.feature-story__headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  margin-bottom: 20px;
}

.feature-story__excerpt {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(26,26,26,0.62);
  margin-bottom: 36px;
  max-width: 380px;
}

.feature-story__meta {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-bottom: 32px;
}

.feature-story__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 1px solid rgba(26,26,26,0.4);
  padding-bottom: 3px;
  align-self: flex-start;
  transition: border-color var(--t-fast), opacity var(--t-fast);
}
.feature-story__cta:hover { opacity: 0.55; border-color: rgba(26,26,26,0.15); }

@media (max-width: 900px) {
  .feature-story { grid-template-columns: 1fr; }
  .feature-story__img-wrap { aspect-ratio: 4/3; position: relative; min-height: unset; }
  .feature-story__content { padding: 52px 32px; }
}
@media (max-width: 640px) {
  .feature-story__content { padding: 40px 24px; }
  .feature-story__excerpt { max-width: 100%; }
}


/* =====================================================
   22. WORN BY — real-people portrait triptych
   ===================================================== */

.worn-by {
  padding: 100px 52px;
  background: var(--warm-bg);
}

.worn-by__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.worn-by__header {
  text-align: center;
  margin-bottom: 56px;
}

.worn-by__eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
}

.worn-by__headline {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}

.worn-by__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.worn-by__item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.worn-by__item.is-visible { opacity: 1; transform: translateY(0); }

.worn-by__portrait {
  aspect-ratio: 3 / 4;
  background: var(--sand) center / cover no-repeat;
  margin-bottom: 18px;
  overflow: hidden;
  position: relative;
}

.worn-by__portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.22) 0%, transparent 45%);
}

/* Individual portrait images */
.worn-portrait--1 {
  background-image: url("https://images.pexels.com/photos/3622551/pexels-photo-3622551.jpeg?auto=compress&cs=tinysrgb&w=600&h=800&fit=crop");
}
.worn-portrait--2 {
  background-image: url("https://images.pexels.com/photos/3771836/pexels-photo-3771836.jpeg?auto=compress&cs=tinysrgb&w=600&h=800&fit=crop");
}
.worn-portrait--3 {
  background-image: url("https://images.pexels.com/photos/2709386/pexels-photo-2709386.jpeg?auto=compress&cs=tinysrgb&w=600&h=800&fit=crop");
}

.worn-by__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--charcoal);
  margin-bottom: 3px;
}

.worn-by__role {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}

.worn-by__piece {
  font-family: var(--font-sans);
  font-size: 11px;
  color: rgba(26,26,26,0.5);
  letter-spacing: 0.04em;
}
.worn-by__piece a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--t-fast);
}
.worn-by__piece a:hover { opacity: 0.65; }

@media (max-width: 768px) {
  .worn-by { padding: 64px 24px; }
  .worn-by__grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
    gap: 40px;
  }
}


/* =====================================================
   PRODUCT DETAIL PAGE (PDP)
   Premium editorial layout — gallery + sticky panel,
   accordions, reviews, related, service promise.
   Uses global tokens only. No filled buttons.
   ===================================================== */

.pdp-page { background: var(--warm-bg); color: var(--charcoal); min-height: 100vh; }

/* ── Slim top bar (wordmark + cart + back) ─────────── */
.pdp-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 52px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--warm-bg); z-index: 50;
}
.pdp-bar__logo {
  font-family: var(--font-serif); font-size: 22px; font-weight: 600;
  letter-spacing: 0.16em; color: var(--charcoal);
}
.pdp-bar__right { display: flex; align-items: center; gap: 28px; }
.pdp-bar__back {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--charcoal); opacity: 0.7;
  transition: opacity var(--t-fast);
}
.pdp-bar__back:hover { opacity: 1; }
.pdp-bar__cart {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; color: var(--charcoal);
}
.header__cart-count { /* reuse global badge if present */ }

/* ── Breadcrumb ────────────────────────────────────── */
.pdp-crumb {
  max-width: 1280px; margin: 0 auto; padding: 26px 52px 0;
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.pdp-crumb a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-fast); }
.pdp-crumb a:hover { color: var(--charcoal); }
.pdp-crumb__sep { margin: 0 9px; opacity: 0.5; }
.pdp-crumb__current { color: var(--charcoal); }

/* ── Main grid: gallery (60) + panel (40) ──────────── */
.pdp-main {
  max-width: 1280px; margin: 0 auto; padding: 32px 52px 100px;
  display: grid; grid-template-columns: 60% 40%; gap: 64px; align-items: start;
}

/* Gallery — stacked images on desktop */
/* Gallery wrap: thumbs left + main image right */
.pdp-gallery-wrap { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto; gap: 12px; align-items: start; }
.pdp-gallery__dots { display: none; grid-column: 1 / -1; }

/* Thumbnail strip */
.pdp-gallery-thumbs { display: flex; flex-direction: column; gap: 8px; grid-column: 1; grid-row: 1; }
.pdp-thumb {
  width: 76px; height: 96px; padding: 0; border: 1px solid var(--border);
  background: var(--ivory); cursor: pointer; overflow: hidden;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.55; flex-shrink: 0;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.is-active { border-color: var(--charcoal); opacity: 1; }
.pdp-thumb:hover { opacity: 0.85; }

/* Main image — only the active item shows on desktop */
.pdp-gallery { grid-column: 2; grid-row: 1; position: relative; }
.pdp-gallery__item {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  background: var(--ivory) center/cover no-repeat; border: 1px solid var(--border);
  cursor: zoom-in; overflow: hidden; display: none;
}
.pdp-gallery__item.is-active { display: block; }
.pdp-gallery__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s var(--ease-out);
}
.pdp-gallery__item:hover img { transform: scale(1.03); }

/* ── Info panel (sticky) ───────────────────────────── */
.pdp-panel { position: sticky; top: 104px; }
.pdp-panel__eyebrow {
  font-family: var(--font-serif); font-style: italic; font-size: 15px;
  color: var(--muted); display: inline-block; margin-bottom: 16px;
  text-decoration: underline; text-underline-offset: 3px;
}
.pdp-panel__eyebrow:hover { color: var(--charcoal); }
.pdp-panel__pill {
  display: inline-block; font-family: var(--font-serif); font-style: italic;
  font-size: 12px; letter-spacing: 0.02em; padding: 3px 12px;
  border: 1px solid var(--charcoal); border-radius: 100px; margin-bottom: 18px;
}
.pdp-panel__name {
  font-family: var(--font-serif); font-size: clamp(34px, 4vw, 54px); font-weight: 500;
  line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 12px;
}
.pdp-panel__material {
  font-family: var(--font-serif); font-style: italic; font-size: 16px;
  color: var(--muted); margin-bottom: 18px;
}
.pdp-panel__price {
  font-family: var(--font-sans); font-size: 18px; letter-spacing: 0.02em; margin-bottom: 26px;
}
.pdp-panel__desc {
  font-family: var(--font-serif); font-size: 19px; line-height: 1.6;
  color: var(--charcoal); margin-bottom: 34px; max-width: 42ch;
}
.pdp-row { margin-bottom: 28px; }
.pdp-row__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.pdp-row__label {
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.pdp-row__selected {
  font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--charcoal);
}

/* Swatches (selectable) */
.pdp-swatches { display: flex; gap: 12px; }
.pdp-swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
  cursor: pointer; position: relative; transition: transform var(--t-fast);
  padding: 0; background-clip: content-box; box-sizing: border-box;
}
.pdp-swatch::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid transparent; transition: border-color var(--t-fast);
}
.pdp-swatch:hover { transform: scale(1.08); }
.pdp-swatch.is-selected::after { border-color: var(--charcoal); }

/* Sizes (selectable) */
.pdp-sizes { display: flex; gap: 10px; flex-wrap: wrap; }
.pdp-size {
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.1em;
  padding: 10px 16px; border: 1px solid var(--border); background: transparent;
  color: var(--charcoal); cursor: pointer; min-width: 48px; min-height: 44px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pdp-size:hover { border-color: var(--charcoal); }
.pdp-size.is-selected { border-color: var(--charcoal); background: var(--charcoal); color: var(--warm-bg); }
.pdp-size.is-out { text-decoration: line-through; opacity: 0.35; cursor: not-allowed; }
.pdp-size.is-out:hover { border-color: var(--border); }

.pdp-sizeguide {
  display: inline-block; margin-top: 14px; font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  background: none; border: none; transition: color var(--t-fast);
}
.pdp-sizeguide:hover { color: var(--charcoal); }

.pdp-warning {
  font-family: var(--font-serif); font-style: italic; font-size: 15px;
  color: #9A4A3A; margin-top: 14px; min-height: 1px;
  opacity: 0; transform: translateY(-2px); transition: opacity var(--t-fast), transform var(--t-fast);
}
.pdp-warning.is-visible { opacity: 1; transform: translateY(0); }

.pdp-scarcity {
  font-family: var(--font-serif); font-style: italic; font-size: 14px;
  color: var(--muted); margin: 8px 0 26px;
}

/* Actions — underlined links, no filled buttons */
.pdp-actions { margin-top: 30px; }
.pdp-atb {
  display: inline-block; font-family: var(--font-sans); font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal);
  background: none; border: none; cursor: pointer; padding: 0 0 4px;
  border-bottom: 1px solid var(--charcoal); transition: opacity var(--t-fast);
}
.pdp-atb:hover { opacity: 0.6; }
.pdp-wishlist {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); cursor: pointer;
  background: none; border: none; text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.pdp-wishlist:hover { color: var(--charcoal); }
.pdp-wishlist svg { transition: fill var(--t-fast); }
.pdp-wishlist.is-saved { color: var(--charcoal); }
.pdp-wishlist.is-saved svg { fill: var(--charcoal); }
.pdp-reassure {
  margin-top: 22px; font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.04em; color: var(--muted); line-height: 1.6;
}

/* ── Accordion ─────────────────────────────────────── */
.pdp-accordion {
  max-width: 1280px; margin: 0 auto; padding: 0 52px 90px;
}
.pdp-acc__item { border-top: 1px solid var(--border); }
.pdp-acc__item:last-child { border-bottom: 1px solid var(--border); }
.pdp-acc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 28px 0; background: none; border: none; cursor: pointer; text-align: left;
}
.pdp-acc__title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--charcoal); }
.pdp-acc__icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.pdp-acc__icon::before,
.pdp-acc__icon::after {
  content: ''; position: absolute; background: var(--charcoal); transition: transform var(--t-mid);
}
.pdp-acc__icon::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.pdp-acc__icon::after  { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); }
.pdp-acc__item.is-open .pdp-acc__icon::after { transform: translateX(-50%) scaleY(0); }
.pdp-acc__panel { overflow: hidden; max-height: 0; transition: max-height var(--t-mid) var(--ease-out); }
.pdp-acc__item.is-open .pdp-acc__panel { max-height: 600px; }
.pdp-acc__body {
  padding: 0 0 30px; max-width: 60ch;
  font-family: var(--font-sans); font-size: 15px; line-height: 1.8; color: var(--muted);
}
.pdp-maker { font-family: var(--font-sans); font-size: 15px; line-height: 1.8; color: var(--muted); }
.pdp-maker__name { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--charcoal); margin-bottom: 6px; }
.pdp-maker__line { display: block; }

/* ── Fit & Reviews ─────────────────────────────────── */
.pdp-reviews { max-width: 1280px; margin: 0 auto; padding: 0 52px 100px; }
.pdp-sec-eyebrow {
  font-family: var(--font-serif); font-style: italic; font-size: 16px;
  color: var(--muted); display: block; margin-bottom: 14px;
}
.pdp-sec-headline {
  font-family: var(--font-serif); font-size: clamp(28px, 3.4vw, 44px); font-weight: 500;
  line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 48px;
}
.pdp-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 60px;
}
.pdp-stat { padding: 38px 32px; text-align: center; }
.pdp-stat + .pdp-stat { border-left: 1px solid var(--border); }
.pdp-stat__big { font-family: var(--font-serif); font-size: 52px; font-weight: 500; line-height: 1; margin-bottom: 10px; }
.pdp-stat__stars { display: flex; justify-content: center; gap: 3px; margin-bottom: 10px; }
.pdp-stat__sub { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pdp-stat__label { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }

/* Fit indicator track */
.pdp-fit { max-width: 240px; margin: 0 auto; }
.pdp-fit__track { position: relative; height: 1px; background: var(--border); margin: 28px 0 14px; }
.pdp-fit__dot { position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--muted); background: var(--warm-bg); transform: translate(-50%, -50%); }
.pdp-fit__dot--1 { left: 0; }
.pdp-fit__dot--2 { left: 50%; }
.pdp-fit__dot--3 { left: 100%; }
.pdp-fit__marker { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--charcoal); transform: translate(-50%, -50%); transition: left var(--t-mid); }
.pdp-fit__labels { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pdp-fit__labels span { flex: 1; }
.pdp-fit__labels span:first-child { text-align: left; }
.pdp-fit__labels span:nth-child(2) { text-align: center; }
.pdp-fit__labels span:last-child { text-align: right; }

/* Review cards — pure typography */
.pdp-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 48px; }
.pdp-review__stars { display: flex; gap: 3px; margin-bottom: 16px; }
.pdp-review__title { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--charcoal); margin-bottom: 12px; }
.pdp-review__body {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.7; color: var(--muted);
  margin-bottom: 22px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pdp-review__divider { height: 1px; background: var(--border); margin-bottom: 18px; }
.pdp-review__name { font-family: var(--font-serif); font-size: 16px; color: var(--charcoal); margin-bottom: 4px; }
.pdp-review__meta { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 14px; }
.pdp-review__on { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.pdp-review__on:hover { color: var(--charcoal); }
.pdp-readall {
  display: inline-block; font-family: var(--font-sans); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal);
  border-bottom: 1px solid var(--charcoal); padding-bottom: 4px; transition: opacity var(--t-fast);
}
.pdp-readall:hover { opacity: 0.6; }

/* Outline star */
.pdp-star { width: 13px; height: 13px; display: block; }
.pdp-star--lg { width: 15px; height: 15px; }

/* ── Styled With ───────────────────────────────────── */
.pdp-styled { max-width: 1280px; margin: 0 auto; padding: 0 52px 100px; }
.pdp-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pdp-rel-card { display: block; color: inherit; }
.pdp-rel-card__img {
  width: 100%; aspect-ratio: 4 / 5; background: var(--ivory) center/cover no-repeat;
  border: 1px solid var(--border); margin-bottom: 16px; overflow: hidden;
}
.pdp-rel-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.pdp-rel-card:hover .pdp-rel-card__img img { transform: scale(1.04); }
.pdp-rel-card__name { font-family: var(--font-serif); font-size: 20px; font-weight: 500; margin-bottom: 4px; }
.pdp-rel-card__material { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.pdp-rel-card__price { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.04em; color: var(--charcoal); }

/* ── Service Promise band ──────────────────────────── */
.pdp-promise { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pdp-promise__inner {
  max-width: 1280px; margin: 0 auto; padding: 64px 52px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
}
.pdp-promise__col { text-align: center; }
.pdp-promise__icon { display: flex; justify-content: center; margin-bottom: 18px; color: var(--charcoal); }
.pdp-promise__title { font-family: var(--font-serif); font-size: 19px; font-weight: 500; margin-bottom: 8px; }
.pdp-promise__line { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.02em; color: var(--muted); line-height: 1.6; }

/* ── Lightbox ──────────────────────────────────────── */
.pdp-lightbox {
  position: fixed; inset: 0; z-index: 2000; background: rgba(20, 18, 16, 0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity var(--t-mid), visibility var(--t-mid);
}
.pdp-lightbox.is-open { opacity: 1; visibility: visible; }
.pdp-lightbox__img { max-width: 78vw; max-height: 86vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.4); }
.pdp-lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  color: #F8F5F0; background: none; border: none; cursor: pointer; opacity: 0.7; transition: opacity var(--t-fast);
}
.pdp-lightbox__btn:hover { opacity: 1; }
.pdp-lightbox__prev { left: 24px; }
.pdp-lightbox__next { right: 24px; }
.pdp-lightbox__close { position: absolute; top: 24px; right: 28px; width: 40px; height: 40px; color: #F8F5F0; background: none; border: none; cursor: pointer; opacity: 0.7; transition: opacity var(--t-fast); }
.pdp-lightbox__close:hover { opacity: 1; }
.pdp-lightbox__counter { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.16em; color: rgba(248,245,240,0.7); }

/* ── Size Guide drawer ─────────────────────────────── */
.pdp-sizedrawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 440px; max-width: 90vw; z-index: 1500;
  background: var(--warm-bg); border-left: 1px solid var(--border); padding: 40px 36px;
  transform: translateX(100%); transition: transform var(--t-mid) var(--ease-out); overflow-y: auto;
}
.pdp-sizedrawer.is-open { transform: translateX(0); }
.pdp-sizedrawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pdp-sizedrawer__title { font-family: var(--font-serif); font-size: 26px; font-weight: 500; }
.pdp-sizedrawer__close { background: none; border: none; cursor: pointer; color: var(--charcoal); width: 32px; height: 32px; }
.pdp-sizedrawer__sub { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--muted); margin-bottom: 28px; }
.pdp-sizetable { width: 100%; border-collapse: collapse; }
.pdp-sizetable th, .pdp-sizetable td {
  font-family: var(--font-sans); font-size: 13px; padding: 14px 8px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.pdp-sizetable th { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.pdp-sizetable td { color: var(--charcoal); }
.pdp-sizedrawer__note { font-family: var(--font-sans); font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 24px; }

/* Error state */
.pdp-error { max-width: 800px; margin: 0 auto; padding: 120px 52px; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 24px; color: var(--muted); }
.pdp-error a { text-decoration: underline; text-underline-offset: 4px; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 980px) {
  .pdp-main { grid-template-columns: 1fr; gap: 40px; padding: 28px 24px 80px; }
  .pdp-panel { position: static; }
  .pdp-bar, .pdp-crumb, .pdp-accordion, .pdp-reviews, .pdp-styled, .pdp-promise__inner { padding-left: 24px; padding-right: 24px; }
  .pdp-review-grid { grid-template-columns: 1fr; gap: 44px; }
  .pdp-related-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .pdp-promise__inner { grid-template-columns: 1fr 1fr; gap: 44px 24px; }

  /* Mobile: hide thumbs, switch to horizontal carousel */
  .pdp-gallery-thumbs { display: none; }
  .pdp-gallery-wrap { display: block; position: relative; }
  .pdp-gallery {
    display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 0;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pdp-gallery::-webkit-scrollbar { display: none; }
  .pdp-gallery__item { display: block; flex: 0 0 100%; scroll-snap-align: center; cursor: pointer; }
  .pdp-gallery__item.is-active { display: block; }
  .pdp-gallery__dots {
    display: flex; justify-content: center; gap: 8px; margin-top: 14px;
  }
  .pdp-gallery__dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--muted); background: transparent; padding: 0; cursor: pointer; transition: background var(--t-fast); }
  .pdp-gallery__dot.is-active { background: var(--charcoal); border-color: var(--charcoal); }
}

@media (max-width: 600px) {
  .pdp-stats { grid-template-columns: 1fr; }
  .pdp-stat + .pdp-stat { border-left: none; border-top: 1px solid var(--border); }
  .pdp-related-grid { grid-template-columns: 1fr; }
  .pdp-lightbox__img { max-width: 92vw; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-acc__panel, .pdp-gallery__item img, .pdp-rel-card__img img,
  .pdp-lightbox, .pdp-sizedrawer, .pdp-fit__marker { transition: none; }
}

/* =====================================================
   GLOBAL PRESS FEEDBACK
   Subtle scale-down on press for every interactive element.
   Driven by JS (interactions.js) via a two-class technique so it
   never permanently overrides each element's own hover transition:
     .press-anim  → temporarily owns the transform transition
     .press-down  → applies the scale
   The !important on .press-anim only holds for the brief press cycle,
   after which the class is removed and the native transition resumes.
   ===================================================== */
.press-anim {
  transition: transform 0.18s var(--ease-out) !important;
}

.press-anim.press-down {
  transform: scale(0.96) !important;
}

@media (prefers-reduced-motion: reduce) {
  .press-anim,
  .press-anim.press-down {
    transition: none !important;
    transform: none !important;
  }
}


/* =====================================================
   AUTH MODALS — Sign In / Create Account
   ===================================================== */

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 15, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.auth-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.auth-modal__inner {
  background: #FAFAF7;
  width: 100%;
  max-width: 440px;
  margin: 20px;
  padding: 56px 48px 48px;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.35s var(--ease-out);
}

.auth-modal.is-open .auth-modal__inner {
  transform: translateY(0);
}

.auth-modal__close {
  position: absolute;
  top: 20px;
  right: 22px;
  background: none;
  border: none;
  font-size: 24px;
  font-weight: 300;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  transition: color var(--t-fast);
}
.auth-modal__close:hover { color: var(--charcoal); }

.auth-modal__eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 10px;
}

.auth-modal__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 40px;
}

/* Form fields */
.auth-form__field {
  margin-bottom: 24px;
}

.auth-form__field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.auth-form__field input {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--charcoal);
  outline: none;
  transition: border-color 0.2s ease;
}
.auth-form__field input::placeholder { color: var(--border); }
.auth-form__field input:focus        { border-bottom-color: var(--charcoal); }
.auth-form__field input.is-error     { border-bottom-color: #B85450; }

.auth-form__forgot {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  text-decoration: none;
  margin-top: -8px;
  margin-bottom: 32px;
  transition: color var(--t-fast);
}
.auth-form__forgot:hover { color: var(--charcoal); }

.auth-form__submit {
  display: block;
  width: 100%;
  background: var(--charcoal);
  color: #FFFFFF;
  border: none;
  padding: 16px 24px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--t-fast);
  margin-bottom: 24px;
}
.auth-form__submit:hover    { opacity: 0.82; }
.auth-form__submit:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-form__switch {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.auth-form__switch-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--charcoal);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--t-fast);
}
.auth-form__switch-btn:hover { opacity: 0.6; }

@media (max-width: 640px) {
  .auth-modal__inner { padding: 48px 28px 36px; }
  .auth-modal__title { font-size: 28px; }
}