/* =========================================================================
   Lyrīon Atelier — "Soho" luxury theme layer
   ---------------------------------------------------------------------
   Loaded LAST (site-wide, injected via js/main.js) so it governs layout,
   type and rhythm for every template. It intentionally uses its own
   `soho-*` class namespace for new structural/visual markup so it never
   has to fight the legacy `!important` rules in css/style.css,
   styles/design-system.css, css/polish.css or css/restoration.css.
   Functional contract classes/ids required by existing JS (.site-header,
   .nav-links, .cart-icon, .cart-count, .footer, .product-card, #product-
   gallery, .cart-table, etc.) are kept and restyled in place instead of
   renamed, so no behaviour changes — only presentation.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Canvas & ink ---- */
  --soho-canvas: #f8f4ec;
  --soho-canvas-alt: #f1ebe0;
  --soho-paper: #fffdf9;
  --soho-ink: #1c1420;
  --soho-ink-soft: #4a4152;
  --soho-line: rgba(28, 20, 32, 0.12);
  --soho-line-soft: rgba(28, 20, 32, 0.07);

  /* ---- Deep cosmic sections (header/footer/hero) ---- */
  --soho-midnight: #140b1f;
  --soho-midnight-alt: #1d1129;
  --soho-midnight-line: rgba(247, 231, 196, 0.14);
  --soho-on-midnight: #f4ecd8;
  --soho-on-midnight-soft: rgba(244, 236, 216, 0.86); /* 0.68 read 3.54:1 on midnight, under AA */

  /* ---- Brand accents ---- */
  --soho-gold: #c6a76b;
  --soho-gold-soft: #ddc48c;
  /* Same antique gold, dark enough to be legible ON light backgrounds.
     The brand gold is 2.17:1 on cream, which fails AA for small text; this
     is 4.61:1. Bright gold stays in use anywhere the background is dark. */
  --soho-gold-ink: #8a6d2f;
  --soho-plum: #6d4c86;
  --soho-plum-deep: #4a2f61;

  /* ---- Type ---- */
  --soho-font-display: 'Cormorant Garamond', 'Cinzel', serif;
  --soho-font-eyebrow: 'Cinzel', serif;
  --soho-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Rhythm ---- */
  --soho-container: 1320px;
  --soho-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --soho-section-y: clamp(4rem, 8vw, 7.5rem);
  --soho-radius-sm: 2px;
  --soho-radius: 4px;
  --soho-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------
   Reset scope for soho- sections only (kept narrow to avoid leaking
   into legacy pages that aren't part of this rebuild yet).
   --------------------------------------------------------------------- */
.soho-scope {
  color: var(--soho-ink);
  font-family: var(--soho-font-body);
}

.soho-scope img { max-width: 100%; display: block; }
.soho-scope * { box-sizing: border-box; }

.soho-container {
  width: 100%;
  max-width: var(--soho-container);
  margin: 0 auto;
  padding-left: var(--soho-gutter);
  padding-right: var(--soho-gutter);
}

.soho-eyebrow {
  font-family: var(--soho-font-eyebrow) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Eyebrows sit on the cream page background by default, so they use the
     darker gold. Dark sections, the hero and the split panels override this
     back to the bright gold below. */
  color: var(--soho-ink-soft) !important;
  font-weight: 600;
  display: inline-block;
  margin: 0 0 0.9rem !important;
  opacity: 1 !important;
}

/* Legacy stylesheets force `h1..h6 { color: ... !important; font-size:
   clamp(...) !important }` sitewide (and some wrapper classes like
   .section-title pollute inherited color too), so every heading below
   sets an explicit color with !important rather than relying on
   `inherit`, which proved unreliable against ancestor overrides. */
.soho-heading {
  font-family: var(--soho-font-display) !important;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--soho-ink) !important;
  margin: 0 !important;
}

.soho-fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--soho-ease), transform 700ms var(--soho-ease);
}
.soho-fade-in.fade-in-visible { opacity: 1; transform: translateY(0); }

/* =========================================================================
   HEADER + 3-TIER MEGA MENU
   Structural classes kept: .site-header .main-nav .logo-link .logo-img
   .brand-name .nav-toggle .nav-links .nav-drawer-close .cart-icon
   .cart-count — all populated by buildSiteHeader() in js/main.js.
   ========================================================================= */
/* NOTE: deliberately no backdrop-filter/filter/transform here — either
   would create a new containing block for descendants, which hijacks the
   mobile nav drawer's `position: fixed` (it would anchor to this header
   box instead of the viewport). Opaque background instead of a frosted
   blur avoids that trap entirely. */
.site-header {
  position: sticky !important;
  top: 0;
  z-index: 200;
  background: rgba(18, 10, 27, 0.98) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--soho-midnight-line) !important;
  transition: background 300ms var(--soho-ease), box-shadow 300ms var(--soho-ease);
  font-family: var(--soho-font-body);
}
.site-header.scrolled {
  box-shadow: 0 12px 30px rgba(10, 6, 18, 0.35);
}

.site-header .main-nav {
  display: flex !important;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 96px;
  max-width: var(--soho-container);
  margin: 0 auto;
  padding: 0 var(--soho-gutter);
}

.site-header .logo-link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
  text-decoration: none;
}
/* Full-color emblem (gold tree/zodiac wheel) — never desaturate this, it
   already reads perfectly against the dark header on its own merits. */
.site-header .logo-img {
  width: auto !important;
  height: 64px !important;
  max-height: 64px !important;
  filter: none !important;
  opacity: 1 !important;
}
.site-header .brand-name {
  font-family: var(--soho-font-eyebrow) !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.26em !important;
  font-weight: 600 !important;
  color: var(--soho-on-midnight) !important;
  text-transform: uppercase;
}

/* Top-level nav is a flat row of .nav-item (Shop/Readings/Gifts, each a
   div wrapping a trigger button + mega panel) and plain <a> tags
   (Codex/About/Contact), followed by .cart-icon which is deliberately
   NOT part of this list (own margin, own pill treatment, never gets a
   divider). No `gap` here on purpose, inter-item spacing comes entirely
   from each item's own horizontal padding, and the border-left divider
   below sits exactly on the seam between two items as a result. */
.site-header .nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 0 clamp(1rem, 4vw, 3.5rem);
}

/* Dividers use border-left, not an absolutely positioned pseudo-element,
   on purpose: this class (.nav-item) is also the parent of the mega
   menu panel, which is positioned with left:0/right:0 to span the full
   nav width. Giving .nav-item its own `position: relative` (needed for
   an absolute-positioned divider) would make IT the containing block
   for that panel instead of the header, shrinking the panel down to
   the width of a single nav item. border-left needs no positioning
   context at all, so it cannot cause that failure mode. Muted divider
   color is about 35% opacity of the nav text color, never before the
   first item, never adjacent to Cart (excluded from these selectors). */
.site-header .nav-links > .nav-item,
.site-header .main-nav > .nav-links > a:not(.cart-icon) {
  padding: 0 20px;
  border-left: 1px solid transparent;
}
.site-header .nav-links > .nav-item:first-child,
.site-header .main-nav > .nav-links > a:not(.cart-icon):first-child {
  padding-left: 0;
  border-left: none;
}
.site-header .nav-links > .nav-item:not(:first-child),
.site-header .main-nav > .nav-links > a:not(.cart-icon):not(:first-child) {
  border-left-color: rgba(244, 236, 216, 0.35);
}

.site-header .main-nav > .nav-links > a:not(.cart-icon),
.site-header .nav-item-trigger {
  font-family: var(--soho-font-body) !important;
  color: rgba(244, 236, 216, 0.8) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600 !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  transition: color 200ms ease, border-color 200ms ease;
  background: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  cursor: pointer;
  white-space: nowrap;
}
.site-header .main-nav > .nav-links > a:not(.cart-icon) { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.site-header .nav-item-trigger { padding: 0.5rem 0 !important; }
.site-header .main-nav > .nav-links > a:not(.cart-icon):hover,
.site-header .main-nav > .nav-links > a:not(.cart-icon)[aria-current="page"],
.site-header .nav-item-trigger:hover,
.site-header .nav-item.soho-mega-open > .nav-item-trigger {
  color: var(--soho-on-midnight) !important;
  border-bottom-color: var(--soho-gold) !important;
}

.site-header .nav-links > .cart-icon {
  margin-left: clamp(0.75rem, 2.4vw, 2rem);
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  background: transparent !important;
  border: 1px solid var(--soho-midnight-line) !important;
  border-radius: 999px;
  padding: 0.5rem 1rem !important;
}

/* 1024–1280px: still a horizontal nav, just tighter, per spec — collapse
   to the drawer only below 1024px. */
@media (max-width: 1280px) and (min-width: 1025px) {
  .site-header .nav-links > .nav-item,
  .site-header .main-nav > .nav-links > a:not(.cart-icon) {
    padding-left: 12px;
    padding-right: 12px;
  }
  .site-header .nav-links > .nav-item:first-child,
  .site-header .main-nav > .nav-links > a:not(.cart-icon):first-child {
    padding-left: 0;
  }
}
.site-header .nav-links > .cart-icon:hover { border-color: var(--soho-gold) !important; }
.site-header .cart-count {
  background: var(--soho-gold);
  color: var(--soho-midnight);
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  min-width: 1.15rem;
  height: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
}

.site-header .nav-toggle {
  display: none;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 44px !important; /* 0 left it 43px tall, under the touch floor */
  color: var(--soho-on-midnight) !important;
  font-size: 1.4rem;
  cursor: pointer;
}

.site-header .nav-drawer-close {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  color: var(--soho-on-midnight) !important;
  font-size: 1.6rem;
  cursor: pointer;
}

/* --- Nav item + mega panel --- */
.site-header .nav-item { position: static; }
.site-header .nav-item-trigger { font-family: inherit; }

.soho-mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--soho-midnight);
  border-top: 1px solid var(--soho-gold);
  box-shadow: 0 30px 60px rgba(10, 6, 18, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 220ms var(--soho-ease), transform 220ms var(--soho-ease), visibility 220ms;
  z-index: 199;
}
.site-header .nav-item.soho-mega-open .soho-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.soho-mega-panel__inner {
  max-width: var(--soho-container);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) var(--soho-gutter);
  display: grid;
  grid-template-columns: 0.85fr 1fr 1fr 1.1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}

/* Solid dark navy panel, no transparency over the hero photo behind it.
   Gold headers and off-white links, measured against --soho-midnight:
   h4 gold 8.33:1, links 7.80:1, featured column 16.25:1. All pass WCAG AA. */
.soho-mega-col h4 {
  font-family: var(--soho-font-eyebrow) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soho-gold) !important;
  margin: 0 0 1rem !important;
}
/* position: static beats a long-unused legacy rule, css/style.css's
   `@media (max-width: 768px) { nav ul { position: absolute; ... } }` from
   an older simple dropdown nav. Nothing else here declares `position`, so
   without this override that rule silently pulls these lists out of flow
   on mobile, letting them float over and overlap the drawer items below. */
.soho-mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; position: static; }
.soho-mega-col a {
  color: var(--soho-on-midnight-soft) !important;
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 180ms ease;
}
.soho-mega-col a:hover,
.soho-mega-col a:focus { color: var(--soho-gold-soft) !important; }
.soho-mega-col--featured a { color: var(--soho-on-midnight) !important; font-weight: 600; }
/* css/polish.css has `[class*="featured"] { background: var(--cream)
   !important; }` meant for homepage sections. It also matches this
   column because the selector matches any class attribute containing
   the substring "featured", so it silently painted a cream box behind
   this text over the dark panel. Beat it with higher specificity, not
   just !important, so load order cannot flip this back. */
.soho-mega-panel .soho-mega-col--featured {
  background: transparent !important;
}

.soho-mega-visual {
  position: relative;
  border-radius: var(--soho-radius);
  overflow: hidden;
  min-height: 220px;
  background: var(--soho-canvas-alt);
}
.soho-mega-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.soho-mega-visual figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(180deg, transparent, rgba(20, 11, 31, 0.78));
  color: #fff !important;
  font-family: var(--soho-font-eyebrow);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Mobile drawer state (desktop mega-panels hidden below the breakpoint).
   NOTE: legacy css/style.css has its own `!important`-laden full-screen
   mobile nav (`.nav-links { position:fixed; width:100% !important;
   visibility/opacity toggled !important; transform: translateY() }`) for
   the same `.nav-links`/`.active` class names. Every property that rule
   sets must be re-declared here with `!important` too, or the legacy
   version wins (importance beats specificity/source order on ties). */
@media (max-width: 1024px) {
  .site-header .nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
  .site-header .nav-links {
    display: flex !important;
    position: fixed !important;
    inset: 0 0 0 auto !important;
    left: auto !important;
    width: min(88vw, 380px) !important;
    height: 100vh !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    margin: 0 !important;
    background: var(--soho-midnight) !important;
    padding: calc(5.5rem + env(safe-area-inset-top)) 1.75rem 2rem !important;
    transform: translateX(100%) !important;
    transition: transform 320ms var(--soho-ease), visibility 320ms, opacity 320ms !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 201 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .site-header .nav-links.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Drawer items stack vertically with no dividers, the desktop
     vertical-bar dividers are disabled below. */
  .site-header .nav-links > .nav-item,
  .site-header .main-nav > .nav-links > a:not(.cart-icon) {
    border-left: none !important;
  }
  .site-header .main-nav > .nav-links > a:not(.cart-icon),
  .site-header .nav-item { width: 100% !important; padding: 0 !important; }
  .site-header .main-nav > .nav-links > a:not(.cart-icon),
  .site-header .nav-item-trigger {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0.6rem 0 !important;
    border-bottom: none !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.06em !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  .site-header .nav-links > .cart-icon { margin: 0.5rem 0 0 !important; width: auto !important; min-height: 44px !important; }
  .site-header .nav-drawer-close {
    position: absolute !important;
    top: 1.5rem !important;
    right: 1.75rem !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .soho-mega-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    display: none;
  }
  .site-header .nav-item.soho-mega-open .soho-mega-panel { display: block; }
  .soho-mega-panel__inner { grid-template-columns: 1fr; padding: 0.5rem 0 1rem; gap: 1.5rem; }
  .soho-mega-visual { display: none; }
  /* legacy polish.css has `button[style] { background: var(--apricot)
     !important }` — an attribute selector (specificity 0,1,1) that beats
     a bare class (0,1,0). This backdrop is a <button> that main.js
     toggles via inline style.display, so it always matches that rule.
     `button.nav-drawer-backdrop` ties its specificity and wins on source
     order (this stylesheet loads last). */
  button.nav-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(10, 6, 18, 0.5) !important;
    border: none !important;
    /* Must stay below .site-header's z-index (200): with an equal value the
       backdrop, appended later in the DOM, would win the tie and sit on top
       of the open drawer's own stacking context, silently swallowing every
       tap on the drawer's nav items (a tap would hit the backdrop and just
       close the menu instead of opening Shop/Readings). */
    z-index: 190 !important;
  }
}

body.nav-open { overflow: hidden; }

/* =========================================================================
   MARQUEE BAND
   ========================================================================= */
.soho-marquee {
  background: var(--soho-midnight-alt);
  color: var(--soho-on-midnight-soft);
  overflow: hidden;
  border-bottom: 1px solid var(--soho-midnight-line);
}
.soho-marquee__track {
  display: flex;
  width: max-content;
  animation: soho-marquee-scroll 32s linear infinite;
}
/* css/restoration.css has a blanket `p, li, span, ... { color: var(--ink)
   !important }` intended for body copy on cream. It also hits these spans,
   which sit on the dark marquee band, dropping them to about 1.4:1. */
.soho-marquee__track span {
  font-family: var(--soho-font-eyebrow);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.85rem 2.5rem;
  white-space: nowrap;
  color: var(--soho-on-midnight) !important;
}
@keyframes soho-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .soho-marquee__track { animation: none; }
}

/* =========================================================================
   SECTION SCAFFOLDING
   ========================================================================= */
.soho-section { padding: var(--soho-section-y) 0; }
.soho-section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.soho-section--dark { background: var(--soho-midnight) !important; color: var(--soho-on-midnight) !important; }
.soho-section--dark h1, .soho-section--dark h2, .soho-section--dark h3,
.soho-section--dark p, .soho-section--dark span { color: var(--soho-on-midnight) !important; opacity: 1 !important; }
.soho-section--dark .soho-eyebrow { color: var(--soho-gold-soft) !important; }
.soho-section--alt { background: var(--soho-canvas-alt) !important; }

.soho-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.soho-section-head h2 { font-size: clamp(1.9rem, 3vw, 2.6rem) !important; color: var(--soho-ink) !important; font-family: var(--soho-font-display) !important; margin: 0 !important; }
.soho-section--dark .soho-section-head h2 { color: var(--soho-on-midnight) !important; }
.soho-section-head p { margin: 0.6rem 0 0 !important; color: var(--soho-ink-soft) !important; opacity: 1 !important; max-width: 46ch; }
.soho-section--dark .soho-section-head p { color: var(--soho-on-midnight-soft) !important; }

.soho-link-arrow {
  font-family: var(--soho-font-eyebrow);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
  transition: opacity 180ms ease;
}
.soho-link-arrow:hover { opacity: 0.65; }

/* =========================================================================
   HERO
   ========================================================================= */
/* Contained band, not full bleed. The hero sits in the same content column as
   every other section, with the same gutter, and takes about two thirds of the
   viewport rather than filling it. The copy stays overlaid at the lower left
   where it was; only the frame changed. */
.soho-hero {
  position: relative;
  width: 100%;
  max-width: var(--soho-container);
  margin: clamp(1.25rem, 3vw, 2.25rem) auto 0;
  min-height: clamp(420px, 66vh, 700px);
  display: flex;
  align-items: flex-end;
  color: #fff !important;
  background: transparent !important;
}
/* Inset by the gutter so the picture lines up with the text column rather
   than running to the browser edge. */
.soho-hero__media {
  position: absolute;
  inset: 0 var(--soho-gutter);
  overflow: hidden;
  border-radius: var(--soho-radius, 4px);
  background: var(--soho-midnight);
}
/* !important on the size: two mobile rules in css/style.css set
   `img { height: auto !important }` under 768px. Without this the hero
   picture collapsed to its own square aspect inside the band, leaving the
   lower third of the frame empty and pushing the buttons out onto the page
   background, where their white labels were invisible. */
.soho-hero__media img,
.soho-hero__media video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  /* Hold the printed design in frame. The photography is square, so a wide
     short band can only show part of it; 38% keeps the garment print and the
     model's face inside the crop instead of centring on the waist. */
  object-position: 50% 38%;
}
/* Scrim, weighted to the side the copy sits on rather than laid flat over
   the whole frame. The garment print is the thing being sold, so the right
   of the picture stays bright and the left carries the headline. A light
   bottom wash keeps the buttons legible without greying the image. */
.soho-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg,
      rgba(20, 11, 31, 0.86) 0%,
      rgba(20, 11, 31, 0.72) 26%,
      rgba(20, 11, 31, 0.30) 52%,
      rgba(20, 11, 31, 0.06) 72%,
      rgba(20, 11, 31, 0) 100%),
    linear-gradient(180deg,
      rgba(20, 11, 31, 0.20) 0%,
      rgba(20, 11, 31, 0) 40%,
      rgba(20, 11, 31, 0.34) 100%);
}
.soho-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Held to the left of the frame so the headline clears the garment.
     Without this the copy ran straight across the print. */
  max-width: 47%;
  /* The left inset carries the gutter itself rather than inheriting it from
     the section's padding. Legacy sheets mark `section { padding: ... }`
     !important, which zeroes the horizontal padding here, and the copy then
     started 13px outside the picture frame: white text on the ivory page,
     with the first character of each line invisible. */
  padding-left: calc(var(--soho-gutter) + clamp(1.5rem, 3vw, 2.75rem));
  padding-right: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: clamp(2rem, 4.5vw, 3.25rem);
}
.soho-hero__content .soho-eyebrow { color: var(--soho-gold-soft) !important; }
.soho-hero__content h1 {
  font-size: clamp(2.6rem, 6vw, 5.2rem) !important;
  max-width: 18ch;
  color: #fff !important;
  font-family: var(--soho-font-display) !important;
}
.soho-hero__content p {
  margin: 1.25rem 0 2rem;
  max-width: 34ch;
  font-size: 1.05rem !important;
  color: rgba(255, 255, 255, 0.82) !important;
  opacity: 1 !important;
}
.soho-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* =========================================================================
   BUTTONS (soho namespace — do not collide with legacy .btn)
   ========================================================================= */
/* NOTE: legacy css/restoration.css applies a bare `button { background:
   var(--apricot) !important; ...}` rule sitewide. Every interactive
   soho-* control below must re-declare background/color/border/
   border-radius/box-shadow/min-height with !important so it wins on
   specificity (class beats type selector once importance is tied). */
.soho-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--soho-font-eyebrow);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 2rem !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: transform 220ms var(--soho-ease), background 220ms ease, color 220ms ease, border-color 220ms ease;
  min-height: 44px;
  box-shadow: none !important;
}
.soho-btn:hover { transform: translateY(-2px); }
.soho-btn--light { background: #fff !important; color: var(--soho-midnight) !important; }
.soho-btn--light:hover { background: var(--soho-gold-soft) !important; }
.soho-btn--outline { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.55) !important; }
.soho-btn--outline:hover { border-color: #fff !important; }
.soho-btn--dark { background: var(--soho-midnight) !important; color: var(--soho-on-midnight) !important; }
.soho-btn--dark:hover { background: var(--soho-plum-deep) !important; }
.soho-btn--ghost { background: transparent !important; color: var(--soho-ink) !important; border-color: var(--soho-line) !important; }
.soho-btn--ghost:hover { border-color: var(--soho-ink) !important; }
.soho-btn--gold { background: var(--soho-gold) !important; color: var(--soho-midnight) !important; }
.soho-btn--gold:hover { background: var(--soho-gold-soft) !important; }
.soho-btn--full { width: 100%; }
.soho-btn:disabled, .soho-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* =========================================================================
   COLLECTION SPLIT
   ========================================================================= */
.soho-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--soho-line);
}
.soho-split__panel {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  color: #fff !important;
  overflow: hidden;
}
.soho-split__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--soho-ease); }
.soho-split__panel:hover img { transform: scale(1.045); }
/* The scrim has to guarantee legibility over an arbitrary photograph, not
   just over the ones currently in the slots. The previous ramp was still
   fully transparent where the eyebrow sits, so gold text landed on whatever
   the image happened to be, measured at 1.16:1 over a pale shoulder. This
   ramp is dark enough across the whole text block to hold AA regardless. */
.soho-split__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 11, 31, 0) 0%,
    rgba(20, 11, 31, 0.45) 42%,
    rgba(20, 11, 31, 0.88) 78%,
    rgba(20, 11, 31, 0.94) 100%
  );
}
.soho-split__body { position: relative; z-index: 2; padding: clamp(1.75rem, 3vw, 3rem); }
/* Lighter gold reads better than the base gold once it is over photography. */
.soho-split__body .soho-eyebrow { color: var(--soho-gold-soft) !important; }
.soho-split__body h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem) !important; color: #fff !important; font-family: var(--soho-font-display) !important; margin: 0 0 1rem !important; }
@media (max-width: 760px) { .soho-split { grid-template-columns: 1fr; } .soho-split__panel { min-height: 52vh; } }

/* =========================================================================
   PRODUCT GRID + CARD  (used on home + shop; legacy .product-card kept as
   JS/functional selector, restyled here rather than renamed)
   ========================================================================= */
.soho-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1.25rem, 2vw, 2rem);
}

.soho-scope .product-card,
.soho-scope .card.product-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto !important;
  min-height: 0 !important;
  transition: none !important;
}
.soho-scope .product-card:hover { transform: none !important; box-shadow: none !important; }

.soho-scope .product-card { overflow: hidden !important; }
.soho-scope .product-card-image,
.soho-scope .product-card img.card__image,
.soho-scope .card__image img {
  width: 100% !important;
  height: 340px !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: var(--soho-radius);
  background: var(--soho-canvas-alt) !important;
  margin-bottom: 0 !important;
  transition: transform 500ms var(--soho-ease);
}
.soho-scope .product-card:hover .product-card-image { transform: scale(1.045); }

.soho-scope .product-card-content,
.soho-scope .card__body {
  flex: none !important;
  padding: 0.9rem 0.1rem 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
}
/* css/shop-fixes.css forces `.product-card h3, .product-card .title, ...`
   to legacy gold #C9922B !important, which is 2.1:1 on a white card. The
   gifting grid renders bare h3 and .price rather than the .product-card-title
   class the rest of the site uses, so it slipped past the rules below. */
.soho-scope .product-card h3,
.soho-scope .product-card .title {
  color: var(--soho-ink) !important;
}
.soho-scope .product-card .price,
.soho-scope .product-card .product-price {
  color: var(--soho-ink-soft) !important;
}
.soho-scope .product-card-title,
.soho-scope .card__title {
  font-family: var(--soho-font-body) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--soho-ink) !important;
  margin: 0 !important;
  max-height: none !important;
  -webkit-line-clamp: initial !important;
}
.soho-scope .product-card-description { display: none !important; }
.soho-scope .product-card-price,
.soho-scope .card__price {
  font-size: 0.86rem !important;
  color: var(--soho-ink-soft) !important;
  font-weight: 400 !important;
  margin: 0 !important;
}
.soho-scope .product-card-buttons,
.soho-scope .product-card__actions {
  margin-top: 0.65rem !important;
  gap: 0.6rem !important;
}
.soho-scope .view-product-button,
.soho-scope .view-product-btn {
  font-family: var(--soho-font-eyebrow) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent !important;
  color: var(--soho-ink) !important;
  border: 1px solid var(--soho-line) !important;
  border-radius: 999px !important;
  padding: 0.6rem 1.1rem !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.soho-scope .view-product-button:hover { border-color: var(--soho-ink) !important; }
.soho-scope .add-to-cart-button {
  font-family: var(--soho-font-eyebrow) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--soho-midnight) !important;
  color: var(--soho-on-midnight) !important;
  border: 1px solid var(--soho-midnight) !important;
  border-radius: 999px !important;
  padding: 0.6rem 1.1rem !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

.soho-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  font-family: var(--soho-font-eyebrow);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--soho-midnight);
  color: var(--soho-on-midnight);
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
}

/* =========================================================================
   VIDEO SECTIONS (3 layout variants)
   ========================================================================= */
.soho-video {
  position: relative;
  overflow: hidden;
  border-radius: var(--soho-radius);
}
.soho-video video, .soho-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.soho-video a { display: block; width: 100%; height: 100%; }

/* Variant A: contained cinematic band. Was full bleed at 78vh, which put a
   second edge-to-edge picture directly under the hero. It now sits in the
   same content column, with the same gutter, as every other section. */
.soho-video--full {
  min-height: clamp(360px, 56vh, 620px);
  width: 100%;
  max-width: var(--soho-container);
  margin-inline: auto;
  /* The gutter is applied as a margin rather than padding because legacy
     sheets mark `section { padding: ... }` !important, which would zero it. */
  width: calc(100% - (2 * var(--soho-gutter)));
}
.soho-video--full img, .soho-video--full video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.soho-video--full .soho-video__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(0deg, rgba(20,11,31,0.7), transparent);
  color: #fff !important;
}

/* Variant B: split copy + video */
.soho-video-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.soho-video-split .soho-video { aspect-ratio: 4 / 5; min-height: 0; }
@media (max-width: 860px) { .soho-video-split { grid-template-columns: 1fr; } }

/* Variant C: three-up video grid */
.soho-video-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.soho-video-trio .soho-video { aspect-ratio: 3 / 4; min-height: 0; }
.soho-video-trio figcaption {
  margin-top: 0.85rem;
  font-family: var(--soho-font-eyebrow);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soho-ink-soft);
}
@media (max-width: 760px) { .soho-video-trio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .soho-video-trio { grid-template-columns: 1fr; } }

/* =========================================================================
   LOOKBOOK / SHOP-THE-STYLE (shoppable hotspots)
   ========================================================================= */
.soho-lookbook {
  position: relative;
  border-radius: var(--soho-radius);
  overflow: hidden;
}
.soho-lookbook img { width: 100%; }
.soho-hotspot {
  position: absolute;
  width: 30px !important;
  height: 30px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--soho-ink) !important;
  color: var(--soho-ink) !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  animation: soho-hotspot-pulse 2.6s ease-in-out infinite;
}
/* Keep the visible pulsing dot at its designed 30px, but give it a real
   44x44 tap target: an invisible ::before extends the hit area without
   changing how the marker looks. */
.soho-hotspot::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}
@keyframes soho-hotspot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
  50% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}
.soho-hotspot-card {
  position: absolute;
  width: 200px;
  background: var(--soho-paper);
  border-radius: var(--soho-radius);
  box-shadow: 0 20px 45px rgba(10,6,18,0.28);
  padding: 0.85rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  z-index: 3;
}
.soho-hotspot.is-active + .soho-hotspot-card,
.soho-hotspot-card.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.soho-hotspot-card img { height: 110px; object-fit: cover; border-radius: 2px; margin-bottom: 0.6rem; }
.soho-hotspot-card strong { font-size: 0.82rem; display: block; }
.soho-hotspot-card span { font-size: 0.78rem; color: var(--soho-ink-soft); }

/* =========================================================================
   JOURNAL / EDITORIAL PREVIEW
   ========================================================================= */
.soho-journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.soho-journal-card { text-decoration: none; color: inherit; display: block; }
.soho-journal-card__media { border-radius: var(--soho-radius); overflow: hidden; aspect-ratio: 4/5; margin-bottom: 1.1rem; }
.soho-journal-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--soho-ease); }
.soho-journal-card:hover .soho-journal-card__media img { transform: scale(1.05); }
.soho-journal-card .soho-eyebrow { margin-bottom: 0.5rem; }
.soho-journal-card h3 { font-size: 1.25rem !important; color: var(--soho-ink) !important; font-family: var(--soho-font-display) !important; margin: 0 0 0.4rem !important; }
.soho-journal-card p { margin: 0; color: var(--soho-ink-soft); font-size: 0.92rem; }
@media (max-width: 860px) { .soho-journal-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   PROMO TILES
   ========================================================================= */
.soho-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.soho-tile {
  padding: 2.25rem 1.75rem;
  border: 1px solid var(--soho-line);
  border-radius: var(--soho-radius);
  text-align: center;
}
.soho-tile svg, .soho-tile .soho-tile-icon { width: 28px; height: 28px; margin: 0 auto 1rem; color: var(--soho-gold); }
.soho-tile h4 { margin: 0 0 0.5rem; font-size: 1rem; font-family: var(--soho-font-eyebrow); letter-spacing: 0.04em; }
.soho-tile p { margin: 0; font-size: 0.86rem; color: var(--soho-ink-soft); }
.soho-tiles--quad { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .soho-tiles--quad { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .soho-tiles { grid-template-columns: 1fr; } }

/* Slow cinematic zoom used in place of literal video (no source footage in repo) */
.soho-kenburns img { animation: soho-kenburns 14s ease-in-out infinite alternate; }
@keyframes soho-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .soho-kenburns img { animation: none; }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.locale-switch {
  display: inline-flex;
  align-items: center;
  margin: 0 0.35rem;
}
.locale-switch select {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  color: #f4efe4;
  border: 1px solid rgba(201, 168, 76, 0.75);
  border-radius: 999px;
  min-height: 44px;
  padding: 0 0.9rem;
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.locale-switch select:focus-visible {
  outline: 2px solid #e2b959;
  outline-offset: 2px;
}
.footer .locale-switch {
  margin: 0.75rem 0 0;
}
.footer .locale-switch select {
  background: #140c1c;
}

.footer {
  background: var(--soho-midnight) !important;
  color: var(--soho-on-midnight-soft) !important;
  border-top: 1px solid var(--soho-midnight-line);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 2rem !important;
}
.footer .footer-content {
  max-width: var(--soho-container);
  margin: 0 auto;
  padding: 0 var(--soho-gutter);
  display: grid !important;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  text-align: left !important;
}
.footer .footer-brand h3 {
  font-family: var(--soho-font-eyebrow) !important;
  letter-spacing: 0.18em;
  font-size: 1.05rem !important;
  color: var(--soho-on-midnight) !important;
  margin: 0 0 0.85rem !important;
}
.footer .footer-brand p { font-size: 0.86rem !important; max-width: 32ch; color: var(--soho-on-midnight-soft) !important; margin: 0 0 1.4rem !important; opacity: 1 !important; }
.footer .footer-social { display: flex !important; gap: 0.85rem; margin: 0 0 0 !important; justify-content: flex-start !important; }
.footer .footer-social__link {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--soho-midnight-line);
  border-radius: 50%;
  color: var(--soho-on-midnight);
  transition: border-color 180ms ease, color 180ms ease;
}
.footer .footer-social__link:hover { border-color: var(--soho-gold); color: var(--soho-gold); }
.footer .footer-social__link svg { width: 16px; height: 16px; }

.footer h5.soho-footer-col-title {
  font-family: var(--soho-font-eyebrow);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soho-on-midnight);
  margin: 0 0 1rem;
}
.footer .footer-links {
  display: flex !important;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 !important;
}
.footer .footer-links a {
  color: var(--soho-on-midnight-soft) !important;
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 180ms ease;
}
.footer .footer-links a:hover { color: var(--soho-gold) !important; }
/* Footer links are a stacked list on a phone, where a 16px tall link is not
   a realistic thumb target. Pad to 44px without changing the type size.
   inline-flex rather than min-height alone: min-height does nothing on a
   plain inline box, which is why these stayed 16px tall. */
@media (max-width: 768px) {
  .footer .footer-links a,
  #empty-cart-message a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
}

.footer > .footer-content > p,
.footer .footer-bottom {
  grid-column: 1 / -1;
  border-top: 1px solid var(--soho-midnight-line);
  margin-top: 1rem !important;
  padding-top: 1.5rem;
  font-size: 0.78rem;
  color: var(--soho-on-midnight-soft) !important;
}

@media (max-width: 860px) {
  .footer .footer-content { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer .footer-content { grid-template-columns: 1fr; text-align: left !important; }
  .footer .footer-social { justify-content: flex-start !important; }
}

/* =========================================================================
   SLIDE-OUT CART DRAWER
   ========================================================================= */
.soho-cart-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(92vw, 420px);
  height: 100vh;
  background: var(--soho-paper);
  color: var(--soho-ink);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 340ms var(--soho-ease);
  box-shadow: -20px 0 60px rgba(10, 6, 18, 0.3);
}
.soho-cart-drawer.is-open { transform: translateX(0); }
.soho-cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--soho-line);
}
.soho-cart-drawer__head h2 {
  font-family: var(--soho-font-eyebrow) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soho-ink) !important;
  margin: 0 !important;
  white-space: nowrap;
}
.soho-cart-drawer__close { flex-shrink: 0; }
.soho-cart-drawer__close { background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; min-height: 0 !important; padding: 0 !important; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--soho-ink) !important; }
.soho-cart-drawer__items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.soho-cart-drawer__empty { color: var(--soho-ink-soft); font-size: 0.9rem; padding: 2rem 0; text-align: center; }
.soho-cart-drawer__item { display: grid; grid-template-columns: 68px 1fr auto; gap: 0.9rem; padding: 1rem 0; border-bottom: 1px solid var(--soho-line-soft); }
.soho-cart-drawer__item img { width: 68px; height: 82px; object-fit: cover; border-radius: 2px; background: var(--soho-canvas-alt); }
.soho-cart-drawer__item-title { font-size: 0.88rem; font-weight: 500; margin: 0 0 0.25rem; }
.soho-cart-drawer__item-meta { font-size: 0.78rem; color: var(--soho-ink-soft); margin: 0; }
.soho-cart-drawer__item-price { font-size: 0.85rem; white-space: nowrap; }
.soho-cart-drawer__item-remove { background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; min-height: 0 !important; padding: 0 !important; color: var(--soho-ink-soft) !important; font-size: 0.76rem; text-decoration: underline; cursor: pointer; }
.soho-cart-drawer__foot { padding: 1.5rem; border-top: 1px solid var(--soho-line); }
.soho-cart-drawer__subtotal { display: flex; justify-content: space-between; font-size: 0.95rem; margin-bottom: 1rem; }
.soho-cart-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(10, 6, 18, 0.45);
  z-index: 299; opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 300ms;
}
.soho-cart-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

/* =========================================================================
   COLLECTION (SHOP) PAGE
   ========================================================================= */
.soho-shop-hero { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.soho-shop-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem) !important; color: var(--soho-ink) !important; font-family: var(--soho-font-display) !important; margin: 0 !important; }
.soho-shop-hero p { max-width: 52ch; margin: 1rem auto 0; color: var(--soho-ink-soft); }

.soho-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--soho-line);
  border-bottom: 1px solid var(--soho-line);
  margin-bottom: 2.5rem;
}
.soho-shop-toolbar__filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.soho-shop-toolbar select,
.soho-shop-toolbar input[type="search"] {
  font-family: var(--soho-font-body);
  font-size: 0.82rem;
  border: 1px solid var(--soho-line);
  background: var(--soho-paper);
  color: var(--soho-ink);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  min-height: 40px;
}
.soho-shop-toolbar__count { font-size: 0.82rem; color: var(--soho-ink-soft); }

/* =========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================= */
.soho-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: flex-start;
}
@media (max-width: 900px) { .soho-pdp { grid-template-columns: 1fr; } }

.product-gallery__main { border-radius: var(--soho-radius); overflow: hidden; background: var(--soho-canvas-alt); aspect-ratio: 4/5; width: 100%; height: 100%; object-fit: cover; transition: opacity 250ms ease; display: block; }
.product-gallery__thumbs { display: flex; gap: 0.65rem; margin-top: 0.85rem; flex-wrap: wrap; }
.product-gallery__thumb { width: 76px; height: 92px; border-radius: 2px; overflow: hidden; border: 1px solid var(--soho-line); cursor: pointer; padding: 0; background: none; }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb.active { border-color: var(--soho-ink); }

/* Tap or click the main product image to open it full screen. !important
   throughout: css/restoration.css has a broad generic button rule
   (`.btn, button, input[type="submit"], ... { background: var(--apricot)
   !important; border: 1px solid transparent !important; ... }`) that
   otherwise paints an orange box around the product photo, since this is
   a plain <button> element. */
.product-gallery__main-zoom {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: none !important;
  background: none !important;
  color: inherit !important;
  box-shadow: none !important;
  cursor: zoom-in;
  border-radius: var(--soho-radius) !important;
}
.product-gallery__main-zoom:focus-visible {
  outline: 2px solid var(--soho-gold);
  outline-offset: 3px;
}
.product-gallery__main-zoom::after {
  content: '';
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 11, 31, 0.72);
  pointer-events: none;
  z-index: 2;
}
.product-gallery__main-zoom::before {
  content: '';
  position: absolute;
  right: 1.35rem;
  bottom: 1.35rem;
  width: 14px;
  height: 14px;
  border: 2px solid var(--soho-on-midnight);
  border-radius: 50%;
  box-shadow: 9px 9px 0 -6px var(--soho-on-midnight);
  pointer-events: none;
  z-index: 3;
}

.soho-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(20, 11, 31, 0.94);
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.soho-lightbox.is-open { display: flex; }
.soho-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  touch-action: pinch-zoom;
}
/* !important throughout: css/style.css has `@media (max-width: 768px) {
   button, .button { width: 100% !important; padding: 15px !important;
   font-size: 1rem !important; } }`, a bare-element mobile reset meant for
   form/CTA buttons that would otherwise stretch this circular close button
   to the full viewport width. */
.soho-lightbox__close {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(244, 236, 216, 0.4) !important;
  background: rgba(20, 11, 31, 0.85) !important;
  color: var(--soho-on-midnight) !important;
  font-size: 1.6rem !important;
  line-height: 1 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 501;
}
body.soho-lightbox-open { overflow: hidden; }

.soho-pdp__info { position: sticky; top: 100px; }
/* --soho-gold (#C6A76B) is 1.87:1 on the ivory panel this sits on.
   --soho-gold-ink is the darker gold the theme keeps for gold text. */
.soho-pdp__info #product-pill { color: var(--soho-ink-soft) !important; }
.soho-pdp__info h1#product-name { font-family: var(--soho-font-display) !important; font-size: clamp(1.8rem, 3vw, 2.5rem) !important; color: var(--soho-ink) !important; margin: 0.5rem 0 0.75rem !important; }
.soho-pdp__info #product-price { font-size: 1.15rem !important; color: var(--soho-ink-soft) !important; opacity: 1 !important; margin: 0 0 1.5rem !important; }
.soho-pdp__info #product-description { font-size: 0.95rem !important; line-height: 1.7; color: var(--soho-ink-soft) !important; opacity: 1 !important; margin: 0 0 1.75rem !important; }

.chip-row { display: flex !important; flex-wrap: wrap !important; gap: 0.6rem; margin: 0.5rem 0 1.5rem; }
.chip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto !important;
  width: auto !important;
  font-size: 0.82rem;
  border: 1px solid var(--soho-line) !important;
  background: var(--soho-paper) !important;
  color: var(--soho-ink) !important;
  border-radius: 999px !important;
  padding: 0.5rem 1rem !important;
  cursor: pointer;
  min-height: 40px;
  box-shadow: none !important;
  transition: border-color 180ms ease, background 180ms ease;
}
.size-chip { border-radius: 2px !important; min-width: 44px; padding: 0.5rem !important; text-align: center; }
.chip.active, .chip[aria-pressed="true"] { border-color: var(--soho-ink) !important; background: var(--soho-ink) !important; color: #fff !important; }

#size-selector > label, #color-options > label {
  display: block;
  font-family: var(--soho-font-eyebrow);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soho-ink-soft);
  margin-bottom: 0.4rem;
}

.soho-pdp__actions { display: flex; gap: 0.85rem; margin: 1.5rem 0; }
.soho-pdp__meta { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1.5rem; border-top: 1px solid var(--soho-line); font-size: 0.85rem; color: var(--soho-ink-soft); }
.soho-pdp__meta strong { color: var(--soho-ink); font-weight: 600; }

.soho-accordion { margin-top: 2rem; border-top: 1px solid var(--soho-line); }
.soho-accordion__item { border-bottom: 1px solid var(--soho-line); }
.soho-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 1rem 0 !important;
  font-family: var(--soho-font-eyebrow);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--soho-ink) !important;
}
.soho-accordion__panel { max-height: 0; overflow: hidden; transition: max-height 280ms var(--soho-ease); font-size: 0.9rem; color: var(--soho-ink-soft); line-height: 1.7; }
.soho-accordion__item.is-open .soho-accordion__panel { max-height: 320px; padding-bottom: 1.1rem; }
.soho-accordion__item.is-open .soho-accordion__trigger .soho-accordion__icon { transform: rotate(45deg); }
.soho-accordion__icon { transition: transform 220ms var(--soho-ease); font-size: 1.1rem; }

/* =========================================================================
   CART PAGE (full page)
   ========================================================================= */
.soho-cart-page { padding: clamp(3rem, 6vw, 5rem) 0; }
.soho-cart-page h1 { font-size: clamp(1.8rem, 3vw, 2.6rem) !important; color: var(--soho-ink) !important; font-family: var(--soho-font-display) !important; margin: 0 0 2.5rem !important; }
.soho-cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: clamp(2rem, 4vw, 4rem); align-items: flex-start; }
@media (max-width: 860px) { .soho-cart-layout { grid-template-columns: 1fr; } }

.soho-scope .cart-table { width: 100%; border-collapse: collapse; }
.soho-scope .cart-table th {
  text-align: left;
  font-family: var(--soho-font-eyebrow);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soho-ink-soft);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--soho-line);
}
.soho-scope .cart-table td { padding: 1.25rem 0.5rem 1.25rem 0; border-bottom: 1px solid var(--soho-line-soft); vertical-align: middle; }
.soho-scope .cart-item-image { width: 80px; height: 96px; object-fit: cover; border-radius: 2px; background: var(--soho-canvas-alt); }
.soho-scope .quantity-controls { display: inline-flex; align-items: center; gap: 0.6rem; border: 1px solid var(--soho-line); border-radius: 999px; padding: 0.25rem 0.6rem; }
.soho-scope .quantity-btn { background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; min-height: 0 !important; padding: 0 !important; font-size: 1rem; cursor: pointer; width: 24px; }
.soho-scope .quantity-input { width: 2.4rem; text-align: center; border: none; background: none; font-family: var(--soho-font-body); }
.soho-scope .remove-item { background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; min-height: 0 !important; padding: 0 !important; color: var(--soho-ink-soft) !important; font-size: 0.78rem; text-decoration: underline; cursor: pointer; }

/* The compact quantity stepper and "Remove" link above are sized for a
   mouse cursor. Below 768px, give each a real 44x44 tap target without
   changing how big they look, using padding to grow the hit area around
   the same visual glyph/text rather than resizing the glyph itself. */
@media (max-width: 768px) {
  .soho-scope .quantity-btn {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .soho-scope .remove-item {
    min-height: 44px !important;
    padding: 0.5rem !important;
    margin: -0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

.soho-cart-summary { border: 1px solid var(--soho-line); border-radius: var(--soho-radius); padding: 1.75rem; }
.soho-cart-summary h2 { font-family: var(--soho-font-eyebrow); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 1.25rem; }
.soho-cart-summary-row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.6rem 0; border-bottom: 1px solid var(--soho-line-soft); }
.soho-cart-summary-row--total { font-weight: 600; font-size: 1.05rem; border-bottom: none; padding-top: 1rem; }

/* =========================================================================
   COMPATIBILITY PAGE — legacy fix
   .generator-form / .step were designed as semi-transparent glass cards
   for the old dark-navy page background (rgba(15,23,42,x) reads as a
   dark panel against a dark page). The page background is now light
   cream, so those same rules render as a flat, clashing gray box. Text
   inside is already forced legible by the sitewide ink-color override;
   only the container backgrounds need to match the current light palette.
   ========================================================================= */
.generator-form {
  background: var(--soho-paper) !important;
  border: 1px solid var(--soho-line) !important;
  box-shadow: 0 20px 45px rgba(28, 20, 32, 0.08);
}
.step {
  background: var(--soho-paper) !important;
  border: 1px solid var(--soho-line) !important;
}
.generator-container h2 { color: var(--soho-plum) !important; }

/* =========================================================================
   RESPONSIVE — global section padding tightening
   ========================================================================= */
@media (max-width: 640px) {
  :root { --soho-section-y: clamp(3rem, 10vw, 4rem); }
  /* Shorter band on phones, still contained inside the page gutter. */
  .soho-hero { min-height: clamp(400px, 62vh, 560px); }
  /* Raise the crop so the garment print falls in the lighter top half,
     above the copy, instead of behind it. */
  .soho-hero__media img { object-position: 50% 26% !important; }
  /* No room for a side-by-side split at this width: the copy spans the
     frame, so the scrim goes back to bottom-weighted. */
  .soho-hero__content { max-width: 100%; }
  .soho-hero__content h1 { max-width: 14ch; }
  /* The copy spans the whole frame at this width rather than sitting beside
     the garment, so the wash has to be heavier than desktop. Kept as light as
     the 4.5:1 floor allows: a flat heavy scrim met the contrast rule but sank
     the print, which is the thing being sold. The eyebrow drops from gold to
     cream here for the same reason, since cream clears AA on a lighter wash
     than gold does. */
  .soho-hero__media::after {
    background: linear-gradient(180deg,
      rgba(20, 11, 31, 0.46) 0%,
      rgba(20, 11, 31, 0.54) 34%,
      rgba(20, 11, 31, 0.78) 64%,
      rgba(20, 11, 31, 0.92) 100%);
  }
  .soho-hero__content .soho-eyebrow { color: var(--soho-on-midnight) !important; }
  .soho-video-split, .soho-video-trio { gap: 1rem; }
  .soho-tiles { gap: 1rem; }
}

/* Legal operator line in every footer */
.footer .footer-legal,
.footer-legal {
  max-width: 72ch;
  margin: 1.25rem auto 0 !important;
  padding-top: 1rem;
  border-top: 1px solid var(--soho-midnight-line, rgba(247, 231, 196, 0.14));
  font-size: 0.875rem !important;
  line-height: 1.6;
  text-align: center;
  opacity: 1 !important;
}