/* ═══════════════════════════════════════════════════════════════════════
   NOKH — storefront UI layer

   Loaded AFTER styles.css. Everything the storefront upgrade added lives
   here (nav shell, product card v2, search, cart drawer, collection toolbar,
   editorial homepage sections, document pages) plus the handful of overrides
   that modernise components already in styles.css.

   styles.css is still the source of truth for the brand system: colours,
   radii, marquee, bento, hero beams, reveal animation.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   PALETTE

   Jet black stays the foundation. Bone carries the editorial contrast,
   steel does the structural work (borders, dividers, secondary type), and
   deep olive is the single accent — used sparingly, never decoratively.

   Nothing here is bright. The tonal range comes from layering near-blacks
   with a warm bone tint rather than from adding colour.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Core surfaces */
  --jet:   #080809;         /* main black                                   */
  --bone:  #F1ECE3;         /* primary text / light surface                 */
  --steel: #73777E;         /* structural - borders, dividers, secondary UI */
  --olive: #8E4B58;         /* legacy token: NOKH rosewood accent           */

  /* Derived - same hues, shifted for legibility and layering */
  --jet-lift:    #111113;
  --jet-lift-2:  #1A1A1D;
  --olive-lift:  #B56C7A;
  --olive-deep:  #63323D;
  --steel-lift:  #B6AFA7;
  --bone-dim:    rgba(241, 236, 227, 0.72);
  --bone-faint:  rgba(241, 236, 227, 0.48);
  --nokh-accent: #8E4B58;
  --nokh-accent-hover: #B56C7A;
  --nokh-focus: #D49AA5;
  --nokh-selection-bg: #8E4B58;
  --nokh-selection-text: #FFF9F2;
  --nokh-success: #7FA0A8;
  --nokh-warning: #C39A62;
  --nokh-error: #D48787;
  --nokh-black: #171719;
  --nokh-bone: #E8E2D8;

  /* Functional only — errors and validation must be distinguishable from the
     olive "success" tone, so this is the one hue outside the core four. It is
     a desaturated clay chosen to sit inside the same moody range. */
  --alert: #C4907E;

  --nav-h: 68px;
  --edge: clamp(20px, 5vw, 64px);

  /* Structure — steel-tinted rather than pure white, so edges read warm */
  --line: rgba(242, 237, 228, 0.14);
  --line-strong: rgba(242, 237, 228, 0.34);
  --surface: var(--jet-lift);
  --surface-2: var(--jet-lift-2);

  --text-dim: var(--bone-dim);
  --text-dimmer: var(--bone-faint);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.42s;

  /* ── Legacy token remap ──
     styles.css was written against a pastel palette. Rather than hunt every
     usage across 2,200 lines, the old names are re-pointed at the new system,
     so the entire existing stylesheet inherits the palette for free. */
  --ink:          var(--jet);
  --cream:        var(--bone);
  --pastel-blue:  var(--bone);        /* kickers, links, focus  */
  --pastel-sage:  var(--olive-lift);  /* positive / unlocked    */
  --pastel-blush: var(--steel-lift);  /* secondary detail       */
  --muted:        var(--bone-dim);
}

/* Base surfaces move off pure var(--jet) onto jet, and pick up a warm bone
   cast so large dark areas read as a material rather than as an empty void. */
body {
  background: var(--jet);
  color: var(--bone);
}

::selection { background: var(--nokh-selection-bg); color: var(--nokh-selection-text); }
::-moz-selection { background: var(--nokh-selection-bg); color: var(--nokh-selection-text); }
html { scrollbar-width: thin; scrollbar-color: var(--steel) var(--jet-lift); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--jet-lift); }
*::-webkit-scrollbar-thumb { background: var(--steel); border: 2px solid var(--jet-lift); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--nokh-accent-hover); }
*::-webkit-scrollbar-corner { background: var(--jet-lift); }

/* Author-level display rules (grid/flex) outrank the browser's built-in
   [hidden] rule. Without this, PDP skeletons and cart error states remained in
   the layout even after JavaScript set `hidden`, creating the giant blank
   block reported above the product. */
[hidden] { display: none !important; }

/* Fine film grain over the whole page. At 3% it is invisible as texture but
   kills the flatness and banding of large near-black fields. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Anything interactive or above the fold must sit above the grain layer. */
.hero-nav, .hero-nav__rule, .hero-drawer, .hero-overlay, .search-overlay,
.cart-drawer, .cart-drawer-overlay, .status-toast, .skip-link { z-index: 200; }
.hero-nav { z-index: 210; }
.search-overlay { z-index: 300; }
.cart-drawer-overlay { z-index: 310; }
.cart-drawer { z-index: 320; }
.status-toast { z-index: 340; }
.skip-link { z-index: 400; }

/* Section banding — alternating tonal steps instead of one flat black. */
.section-alt { background: var(--jet-lift); }
.page-dark-section, .mb-section { background: var(--jet); }

/* A section with a hairline top edge reads as a deliberate band, not a gap. */
.section-alt { border-top: 1px solid rgba(110, 114, 120, 0.18); border-bottom: 1px solid rgba(110, 114, 120, 0.18); }

/* ── Bone section — the light editorial counterweight ──
   Used once or twice per page maximum. Its job is to break the dark run and
   make the return to black feel intentional. */
.section-bone {
  background: var(--bone);
  color: var(--jet);
  border-top: none;
  border-bottom: none;
}
.section-bone .section-title,
.section-bone .statement__text,
.section-bone h2, .section-bone h3 { color: var(--jet); }
.section-bone .section-kicker,
.section-bone .statement__sig { color: rgba(10, 10, 10, 0.5); }
.section-bone p { color: rgba(10, 10, 10, 0.72); }
.section-bone .hero-btn {
  border-color: rgba(10, 10, 10, 0.28);
  color: rgba(10, 10, 10, 0.82);
}
.section-bone .hero-btn:hover {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--bone);
  box-shadow: none;
}

/* Honour the OS motion setting everywhere, including third-party CDN libs. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body.no-scroll { overflow: hidden; }

/* Visible, high-contrast focus on every interactive element. Bone reads on
   jet; the olive ring takes over inside bone sections so focus is never lost. */
:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
  border-radius: 4px;
}
.section-bone :focus-visible,
.editorial--bone :focus-visible { outline-color: var(--olive); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -200%);
  z-index: 400;
  background: var(--bone);
  color: var(--jet);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================
   NAV
===================================================== */
.hero-nav {
  display: grid;
  /* minmax(0, 1fr) — a bare 1fr floors each side track at its own min-content,
     so the wider utility group on the right would shove the wordmark
     off-centre on narrow screens. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  height: var(--nav-h);
  padding: 0 var(--edge);
  background: transparent;
  transition: background 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}

body.nav-solid .hero-nav {
  background: rgba(10, 10, 10, 0.84);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
body.nav-solid .hero-nav__rule { opacity: 1; }
.hero-nav__rule { opacity: 0; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }

.hero-nav__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hero-nav__right { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

.hero-nav__brand {
  justify-self: center;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.30em;
  text-indent: 0.30em;   /* balance the trailing letter-space so it reads centred */
  color: var(--bone);
  white-space: nowrap;
  transition: opacity 0.2s;
}
.hero-nav__brand:hover { opacity: 0.7; }

.hero-nav__cats { gap: 28px; margin: 0; padding: 0; }

.hero-nav__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: none;
  color: rgba(232, 224, 212, 0.72);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.hero-nav__icon:hover { color: var(--bone); background: rgba(232, 224, 212, 0.08); }
.hero-nav__icon svg { width: 19px; height: 19px; }

.hero-nav__account {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 224, 212, 0.72);
  padding: 0 12px;
  white-space: nowrap;
  transition: color 0.2s;
}
.hero-nav__account:hover { color: var(--bone); }

.nav-count {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--olive);
  color: var(--bone);
  font-size: 9px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.nav-count[hidden] { display: none; }

/* Mega dropdown — multi column */
.hero-nav__drop { display: flex; gap: 48px; }
.hero-nav__drop-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin-bottom: 12px;
}

/* Drawer */
.hero-drawer__label {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin: 28px 0 10px;
}
.hero-drawer__label:first-of-type { margin-top: 8px; }
.hero-drawer__close {
  align-self: flex-end;
  background: none;
  border: none;
  color: rgba(232, 224, 212, 0.60);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.hero-drawer__close:hover { color: var(--bone); }

@media (min-width: 861px) {
  .hero-nav__hamburger { display: none !important; }
}
@media (max-width: 860px) {
  .hero-nav__cats { display: none !important; }
  .hero-nav__account { display: none; }
  .hero-nav__brand { font-size: 17px; }
}
@media (max-width: 420px) {
  /* Tighten the icon row so the wordmark keeps its centre on small phones */
  .hero-nav__icon { width: 34px; height: 34px; }
  .hero-nav__icon svg { width: 17px; height: 17px; }
  .hero-nav__right { gap: 0; }
  .hero-nav__brand { font-size: 15px; letter-spacing: 0.24em; text-indent: 0.24em; }
}

/* =====================================================
   MARKET / CURRENCY PICKER
===================================================== */
.hero-nav__region { margin-right: 4px; }
.region-picker { position: relative; margin: 0; color: var(--bone); }

.region-picker__btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  transition: color .2s, border-color .2s, background .2s;
}
.region-picker__btn:hover,
.region-picker__btn[aria-expanded="true"] {
  color: var(--bone);
  border-color: var(--line);
  background: rgba(232, 224, 212, 0.055);
}
.region-picker__globe { width: 16px; height: 16px; flex: 0 0 auto; }
.region-picker__label { max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
.region-picker__currency {
  padding-left: 7px;
  border-left: 1px solid var(--line);
  color: var(--olive-lift);
  font-size: 9px;
  opacity: 1;
}
.region-picker__chevron {
  width: 9px;
  height: 6px;
  margin-left: 1px;
  opacity: .55;
  transition: transform .2s var(--ease);
}
.region-picker__btn[aria-expanded="true"] .region-picker__chevron { transform: rotate(180deg); }

.region-picker__panel[hidden] { display: none; }
.region-picker__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 30;
  width: min(356px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 110px));
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(232, 224, 212, .14);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(232, 224, 212, .055), transparent 45%),
    rgba(10, 10, 10, .96);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .56), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  animation: region-panel-in .24s var(--ease);
}
.hero-nav__region .region-picker__panel { right: 0; left: auto; }

.region-picker__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 4px 14px;
}
.region-picker__eyebrow,
.region-picker__title,
.region-picker__status { margin: 0; }
.region-picker__eyebrow {
  color: var(--olive-lift);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.region-picker__title {
  margin-top: 6px;
  color: var(--bone);
  font: 700 17px/1.15 'Syne', sans-serif;
  letter-spacing: -.02em;
}
.region-picker__market-note {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-dimmer);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.region-picker__search-wrap {
  min-height: 46px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgba(8, 8, 9, .12);
  border-radius: 12px;
  background: var(--bone);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.region-picker__search-wrap:focus-within {
  border-color: var(--nokh-accent);
  background: #fffaf2;
  box-shadow: 0 0 0 3px rgba(142, 75, 88, .16);
}
.region-picker__search-wrap > svg { width: 17px; height: 17px; color: #3f3c38; }
.region-picker__search {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--jet);
  caret-color: var(--nokh-accent);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .02em;
}
.region-picker__search::placeholder { color: #696661; opacity: 1; }
.region-picker__search-wrap kbd {
  padding: 3px 5px;
  border: 1px solid rgba(8, 8, 9, .18);
  border-radius: 5px;
  color: #4b4843;
  font: 700 7px/1 inherit;
  letter-spacing: .1em;
}
.region-picker__status {
  min-height: 17px;
  padding: 8px 3px 0;
  color: var(--olive-lift);
  font-size: 10px;
}

.region-picker__list {
  max-height: 356px;
  margin-top: 2px;
  padding: 2px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 224, 212, .18) transparent;
}
.region-picker__list::-webkit-scrollbar { width: 5px; }
.region-picker__list::-webkit-scrollbar-thumb { border-radius: 9px; background: rgba(232, 224, 212, .18); }
.region-picker__item {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .16s, background .16s, transform .16s;
}
.region-picker__item:hover,
.region-picker__item:focus-visible {
  outline: none;
  color: var(--bone);
  background: rgba(232, 224, 212, .065);
}
.region-picker__item:active { transform: scale(.992); }
.region-picker__item.active { color: var(--bone); background: rgba(160, 84, 103, .11); }
.region-picker__item:disabled { cursor: wait; opacity: .55; }
.region-picker__item-code {
  color: var(--olive-lift);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.region-picker__item-name { min-width: 0; font-size: 12px; }
.region-picker__item-name small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--text-dimmer);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.region-picker__item-currency {
  color: var(--text-dimmer);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  opacity: 1;
}
.region-picker__item > svg { width: 15px; height: 15px; color: var(--olive-lift); opacity: 0; }
.region-picker__item.active > svg { opacity: 1; }
.region-picker__empty {
  margin: 0;
  padding: 26px 12px;
  color: var(--text-dimmer);
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
}

.hero-drawer__region .region-picker__btn {
  width: 100%;
  justify-content: flex-start;
  padding: 0 12px;
  border-color: var(--line);
}
.hero-drawer__region .region-picker__chevron { margin-left: auto; }
.hero-drawer__region .region-picker__panel {
  position: relative;
  inset: auto;
  width: 100%;
  max-height: none;
  margin-top: 8px;
  box-shadow: none;
}
.hero-drawer__region .region-picker__list { max-height: 230px; }

@media (max-width: 1080px) {
  .hero-nav__region .region-picker__currency { display: none; }
  .hero-nav__region .region-picker__btn { gap: 5px; padding-inline: 7px; }
}
@media (max-width: 860px) {
  .hero-nav__region { display: none; }
  .region-picker__search-wrap kbd { display: none; }
}
@media (max-width: 420px) {
  .region-picker__panel { padding: 11px; border-radius: 15px; }
  .region-picker__market-note { display: none; }
  .region-picker__item { grid-template-columns: 28px minmax(0, 1fr) auto 16px; }
}

/* =====================================================
   HERO
===================================================== */
.hero-section {
  /* 100dvh avoids the mobile-browser toolbar jump that 100vh causes */
  height: 100dvh;
  min-height: 560px;
  background: var(--jet);
}

/* The hero is the largest dark field on the site, so it gets the most
   layering: a warm bone bloom behind the sign, a cool steel wash on the
   opposite side, and a vignette to stop the edges going dead flat. */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 74% 42%, rgba(232, 224, 212, 0.10) 0%, transparent 68%),
    radial-gradient(50% 45% at 12% 88%, rgba(110, 114, 120, 0.16) 0%, transparent 70%),
    radial-gradient(38% 34% at 88% 84%, rgba(78, 90, 70, 0.16) 0%, transparent 72%);
}
.hero-content, .hero-scroll, .hero-accent-line { z-index: 10; }

/* ── Sub-page hero ──
   The base .page-hero reserves 52vh, which leaves a large dead field above
   the title on interior pages. Compact trims it to the content it actually
   has, and re-tones the wash from cream to bone + olive. */
.page-hero {
  background: var(--jet);
  padding-left: var(--edge);
  padding-right: var(--edge);
}
.page-hero--compact {
  min-height: 0;
  padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 80px));
  padding-bottom: clamp(32px, 5vw, 56px);
}
.page-hero__bg {
  background:
    radial-gradient(ellipse 55% 50% at 50% -8%, rgba(232, 224, 212, 0.11) 0%, transparent 66%),
    radial-gradient(ellipse 60% 55% at 10% 100%, rgba(110, 114, 120, 0.14) 0%, transparent 66%),
    radial-gradient(ellipse 34% 40% at 92% 96%, rgba(78, 90, 70, 0.14) 0%, transparent 70%);
}
.page-hero__title { color: var(--bone); }
.page-hero__eyebrow { color: var(--olive-lift); }
.page-hero__sub { color: var(--text-dim); max-width: 52ch; }

.page-dark, .page-dark-section { background: var(--jet); color: var(--bone); }
.page-dark-section { padding-left: var(--edge); padding-right: var(--edge); }

/* Scrollbar in brand tones rather than default grey */
html { scrollbar-color: var(--steel) var(--jet); }
::-webkit-scrollbar-track { background: var(--jet); }
::-webkit-scrollbar-thumb { background: #2B2E33; border: 3px solid var(--jet); }
::-webkit-scrollbar-thumb:hover { background: var(--steel); }
::-webkit-scrollbar-corner { background: var(--jet); }

.hero-content {
  position: absolute;
  inset: auto auto 0 0;
  bottom: clamp(76px, 13vh, 132px);
  left: var(--edge);
  right: var(--edge);
  max-width: 460px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.hero-btn--ghost { border-color: var(--line); color: var(--text-dim); }
.hero-btn--ghost:hover { border-color: var(--line-strong); color: var(--bone); }

/* Filled primary CTA reads first against the 3D sign */
.hero-actions .hero-btn:first-child {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--jet);
  font-weight: 800;
}
.hero-actions .hero-btn:first-child:hover {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--bone);
  box-shadow: 0 0 34px rgba(78, 90, 70, 0.45);
}

.hero-3d-hint {
  margin-top: 20px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 224, 212, 0.22);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
/* Only advertise dragging once the sign is actually there to drag */
body.hero-3d-ready .hero-3d-hint { opacity: 1; }
@media (hover: none) { .hero-3d-hint { display: none; } }

/* While the model streams in, the canvas is a flat brand-dark field rather
   than a white flash. If it never arrives, the hero still reads fine. */
body.hero-3d-loading #hero-canvas { opacity: 0; }
#hero-canvas { opacity: 1; transition: opacity 0.8s var(--ease); }
body.hero-3d-failed #hero-canvas { display: none; }
body.hero-3d-failed .hero-section {
  background:
    radial-gradient(90% 70% at 78% 45%, rgba(184, 216, 248, 0.10) 0%, transparent 65%),
    var(--jet);
}

.hero-scroll { left: var(--edge); bottom: clamp(28px, 5vh, 44px); }
.hero-accent-line { right: var(--edge); }

@media (max-width: 860px) {
  .hero-content { max-width: none; bottom: clamp(56px, 10vh, 96px); }
  .hero-accent-line { display: none; }
}
@media (max-width: 640px) {
  .hero-title { letter-spacing: 0.01em; }
  .hero-sub br { display: none; }
  .hero-sub { margin-bottom: 26px; }
  .hero-scroll { display: none; }
}

/* =====================================================
   PRODUCT CARD v2
===================================================== */
/* Explicit column counts rather than auto-fill: auto-fill let card widths
   drift between breakpoints and left the last row on a different rhythm. */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: stretch;
}
@media (max-width: 1180px) { .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px)  { .products-grid { grid-template-columns: minmax(0, 1fr); } }

/* Each card fills its row height; the internals then align across the row. */
.product-card {
  border: none;
  border-radius: 0;
  padding: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-width: 0;
}

/* One ratio, one radius, one background for every card. contain (not cover)
   because the shots are full garments on white - cover was cropping sleeves
   and sweatpant hems. */
.product-card__media-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bone);
  aspect-ratio: 4 / 5;
}

.product-card__media {
  display: block;
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
  transform: none;
}

.product-card .product-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  transition: opacity 200ms var(--ease), transform 500ms var(--ease);
}
/* Restrained: a crossfade plus a 2% scale. No sliding. */
.product-img--primary { opacity: 1; }
.product-img--hover { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .product-card__media:hover .product-img--primary { opacity: 0; transform: none; }
  .product-card__media:hover .product-img--hover { opacity: 1; transform: none; }
}
@media (hover: none), (pointer: coarse) {
  .product-img--hover { display: none; }
}

/* No second image? Keep the subtle zoom, skip the swap. */
.product-img--placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-tag {
  top: 12px;
  left: 12px;
  right: auto;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
.product-tag--low { background: var(--olive); color: var(--bone); }
.product-tag--preorder {
  border: 1px solid rgba(181, 108, 122, 0.42);
  background: rgba(17, 17, 19, 0.72);
  color: var(--nokh-accent-hover);
}
.product-tag--sold-out { background: rgba(232, 224, 212, 0.35); color: rgba(6, 6, 6, 0.75); }

.wish-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(6, 6, 6, 0.42);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s var(--ease);
}
.wish-btn svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: var(--bone);
  stroke-width: 1.6;
  transition: fill 0.2s, stroke 0.2s;
}
.wish-btn:hover { background: rgba(6, 6, 6, 0.7); transform: scale(1.08); }
.wish-btn.is-saved svg { fill: var(--olive-lift); stroke: var(--olive-lift); }

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.product-card__preorder,
.cart-line__preorder,
.pdp-preorder-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 0;
  color: var(--nokh-accent-hover);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}
.product-card__preorder span,
.pdp-preorder-label span {
  width: 14px;
  height: 1px;
  background: currentColor;
}

/* Reserved even when a product has no colourway, so the title baseline is
   identical in every card of a row. */
.product-card__colour {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 13px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin: 0;
}

.colour-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot, var(--bone));
  flex: 0 0 auto;
}
/* Near-black and off-white swatches need an outline or they vanish into
   whichever surface they sit on. */
.colour-dot.is-bordered { box-shadow: inset 0 0 0 1px rgba(110, 114, 120, 0.95); }

/* Exactly two lines, always — titles wrapping to different line counts was
   the single biggest cause of ragged card heights. */
.product-card__title {
  font-size: 15px;
  line-height: 1.35;
  margin: 0;
  color: var(--bone);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.35em);
}
.product-card__price {
  font-size: 14px;
  color: var(--bone-dim);
  margin: 0;
}

/* Pinned to the bottom so quick-add buttons align across the row */
.product-card__actions {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-card__was {
  color: var(--text-dimmer);
  margin-left: 8px;
  font-size: 12px;
}

/* An equal-width track per size. No horizontal scrollbar and no arrow
   buttons - the old sliding control was the ugly part of the size UI. Five
   sizes always fit because each pill is a fraction of the row. */
.size-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0;
  min-height: 34px;
  overflow: visible;
}

.size-pill {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  letter-spacing: 0.06em;
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.size-pill:disabled {
  opacity: 0.3;
  text-decoration: line-through;
  cursor: not-allowed;
}
/* Selected state carries weight as well as colour, so it never relies on
   colour perception alone. */
.size-pill.active { font-weight: 800; }

/* Size validation — flashes the row when quick-add is used without a size */
.size-missing .size-row {
  animation: nokh-shake 0.4s var(--ease);
}
.size-missing .size-pill:not(:disabled) { border-color: var(--alert); }
@keyframes nokh-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.product-btn {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0 16px;
  transition: background 180ms var(--ease), color 180ms var(--ease), opacity 180ms var(--ease);
}
.product-btn:hover:not(:disabled) { background: var(--olive); color: var(--bone); }
.product-btn:disabled { opacity: 0.32; cursor: not-allowed; }
.product-btn.is-added { background: var(--olive); color: var(--bone); }

/* Height reserved permanently - validation text appearing must not push the
   card taller and break the row's alignment. */
.product-card__msg {
  min-height: 15px;
  margin: 0;
  font-size: 11px;
  line-height: 15px;
  color: var(--alert);
}

/* Skeletons — shown while the catalogue loads */
.product-card--skeleton { gap: 12px; pointer-events: none; }
.skeleton {
  background: linear-gradient(90deg, var(--jet-lift) 25%, #1E2024 50%, var(--jet-lift) 75%);
  background-size: 200% 100%;
  animation: nokh-shimmer 1.4s infinite linear;
  border-radius: var(--radius-sm);
}
.skeleton--media { aspect-ratio: 4 / 5; border-radius: var(--radius-md); }
.skeleton--line { height: 11px; }
@keyframes nokh-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* =====================================================
   RECENT PRE-ORDERS
===================================================== */
.preorder-activity {
  background:
    radial-gradient(circle at 88% 0%, rgba(142, 75, 88, 0.10), transparent 30%),
    var(--jet);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.preorder-activity__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.preorder-activity__heading {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  min-width: 0;
}
.preorder-activity__heading h2 {
  margin: 0;
  color: var(--bone);
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 4.6vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
  text-transform: uppercase;
}
.preorder-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(181, 108, 122, 0.42);
  border-radius: var(--radius-pill);
  color: var(--nokh-accent-hover);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.preorder-live__dot,
.preorder-activity__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--nokh-accent-hover);
  box-shadow: 0 0 0 3px rgba(181, 108, 122, 0.12);
}
@media (prefers-reduced-motion: no-preference) {
  .preorder-live__dot { animation: preorder-pulse 2.4s ease-in-out infinite; }
}
@keyframes preorder-pulse {
  50% { opacity: 0.45; transform: scale(0.78); }
}
.preorder-activity__count {
  flex: 0 0 auto;
  margin: 0 0 3px;
  color: var(--text-dimmer);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}
.preorder-activity__table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(14px, 2vw, 22px);
  background: rgba(17, 17, 19, 0.86);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
}
.preorder-activity__row {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) minmax(250px, 1.7fr) 72px 132px 76px;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  min-width: 0;
  padding: 17px clamp(18px, 2.4vw, 34px);
  border-bottom: 1px solid var(--line);
  transition: background 180ms var(--ease);
}
#recent-preorders-body .preorder-activity__row:last-child { border-bottom: 0; }
#recent-preorders-body .preorder-activity__row:hover { background: rgba(241, 236, 227, 0.035); }
.preorder-activity__row--head {
  padding-block: 12px;
  color: var(--text-dimmer);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.preorder-activity__customer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.preorder-activity__customer strong,
.preorder-activity__customer small { display: block; }
.preorder-activity__customer strong {
  color: var(--bone);
  font-size: 12px;
  font-weight: 700;
}
.preorder-activity__customer small {
  margin-top: 3px;
  color: var(--text-dimmer);
  font-size: 10px;
}
.preorder-activity__product-cell,
.preorder-activity__product {
  min-width: 0;
}
.preorder-activity__product {
  display: block;
  overflow-wrap: anywhere;
  color: var(--bone-dim);
  font-size: 12px;
  line-height: 1.45;
  transition: color 160ms var(--ease);
}
.preorder-activity__product:hover { color: var(--bone); }
.preorder-activity__size,
.preorder-activity__time {
  color: var(--text-dimmer);
  font-size: 11px;
  white-space: nowrap;
}
.preorder-activity__time { text-align: right; }
.preorder-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 0 10px;
  border: 1px solid rgba(181, 108, 122, 0.34);
  border-radius: var(--radius-pill);
  background: rgba(142, 75, 88, 0.10);
  color: var(--nokh-accent-hover);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.preorder-activity__note {
  margin: 13px 2px 0;
  color: var(--text-dimmer);
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .preorder-activity__header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .preorder-activity__heading { align-items: flex-start; flex-direction: column; }
  .preorder-activity__count { margin: 0; text-align: left; }
  .preorder-activity__row--head { display: none; }
  .preorder-activity__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'customer time'
      'product product'
      'size status';
    gap: 9px 16px;
    padding: 18px;
  }
  .preorder-activity__customer { grid-area: customer; }
  .preorder-activity__product-cell { grid-area: product; padding-left: 18px; }
  .preorder-activity__size { grid-area: size; padding-left: 18px; }
  .preorder-activity__status-cell { grid-area: status; }
  .preorder-activity__time { grid-area: time; }
}

@media (max-width: 380px) {
  .preorder-activity__heading h2 { font-size: 1.75rem; }
  .preorder-activity__row { padding-inline: 14px; }
}

/* =====================================================
   COLLECTION TOOLBAR
===================================================== */
.collection-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 22px 0;
  margin-bottom: 34px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar-spacer { flex: 1 1 auto; }
.facet-wrap .sort-select { min-width: 104px; }

.filter-bar, .colour-bar { display: flex; flex-wrap: wrap; gap: 8px; }

.filter-btn, .colour-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: none;
  color: var(--text-dim);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.filter-btn:hover, .colour-btn:hover { border-color: var(--line-strong); color: var(--bone); }
.filter-btn.active, .colour-btn.active {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--jet);
}
.colour-btn.active .colour-dot.is-bordered { box-shadow: inset 0 0 0 1px rgba(9, 9, 9, 0.6); }
.colour-btn__count { font-size: 9px; opacity: 0.55; font-variant-numeric: tabular-nums; }

.collection-search {
  position: relative;
  display: flex;
  align-items: center;
}
.collection-search input {
  width: min(240px, 46vw);
  background: var(--bone);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--jet);
  caret-color: var(--nokh-accent);
  font-family: inherit;
  font-size: 12px;
  padding: 10px 16px;
}
.collection-search input::placeholder { color: #696661; opacity: 1; }
.collection-search input:focus { border-color: var(--nokh-accent); outline: 2px solid rgba(142, 75, 88, .16); outline-offset: 2px; }

.sort-wrap { display: flex; align-items: center; gap: 8px; }
.sort-wrap label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dimmer);
}
.sort-select {
  background: var(--jet-lift-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--bone);
  font-family: inherit;
  font-size: 12px;
  padding: 10px 34px 10px 16px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px;
}
.sort-select:focus { border-color: var(--line-strong); outline: none; }

/* Custom select system — the native control still owns form state, while the
   visible menu uses NOKH's dark editorial language instead of OS chrome. */
.nokh-select {
  position: relative;
  display: inline-block;
  min-width: 148px;
  color: var(--bone);
  isolation: isolate;
}
.facet-wrap .nokh-select { min-width: 118px; }
.nokh-select--form { display: block; width: 100%; }
.nokh-select.is-open { z-index: 90; }

.nokh-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}

.nokh-select__trigger {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 9px 11px 9px 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(115deg, rgba(255,255,255,.055), transparent 42%),
    rgba(15, 15, 17, .96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 24px rgba(0,0,0,.08);
  color: var(--bone);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.nokh-select__trigger::before {
  content: "";
  position: absolute;
  inset: auto 18px -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rosewood), transparent);
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .22s ease, transform .22s ease;
}
.nokh-select__trigger:hover {
  border-color: rgba(241,236,227,.34);
  background:
    linear-gradient(115deg, rgba(255,255,255,.075), transparent 46%),
    rgba(18,18,20,.98);
}
.nokh-select__trigger:focus-visible {
  outline: 1px solid var(--bone);
  outline-offset: 3px;
}
.nokh-select.is-open .nokh-select__trigger {
  border-color: rgba(241,236,227,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 34px rgba(0,0,0,.22);
}
.nokh-select.is-open .nokh-select__trigger::before { opacity: .9; transform: scaleX(1); }
.nokh-select.is-invalid .nokh-select__trigger { border-color: var(--rosewood); }

.nokh-select__value {
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nokh-select__mark {
  position: relative;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(241,236,227,.12);
  border-radius: 50%;
}
.nokh-select__mark i {
  position: absolute;
  top: 10px;
  width: 6px;
  height: 1px;
  background: currentColor;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.nokh-select__mark i:first-child { left: 5px; transform: rotate(42deg); }
.nokh-select__mark i:last-child { right: 5px; transform: rotate(-42deg); }
.nokh-select.is-open .nokh-select__mark i:first-child { transform: rotate(-42deg); }
.nokh-select.is-open .nokh-select__mark i:last-child { transform: rotate(42deg); }

.nokh-select__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max(100%, 224px);
  max-height: min(330px, 52vh);
  padding: 7px;
  overflow: auto;
  border: 1px solid rgba(241,236,227,.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0, rgba(133,75,78,.15), transparent 38%),
    rgba(12,12,14,.985);
  box-shadow: 0 24px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(20px);
  animation: nokhSelectIn .2s cubic-bezier(.2,.8,.2,1) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(241,236,227,.22) transparent;
}
.nokh-select.align-end .nokh-select__menu { right: 0; left: auto; }
.nokh-select.opens-up .nokh-select__menu { top: auto; bottom: calc(100% + 8px); transform-origin: bottom; }
.nokh-select__menu[hidden] { display: none; }

.nokh-select__option {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.nokh-select__option:hover,
.nokh-select__option:focus-visible {
  outline: none;
  background: rgba(241,236,227,.075);
  color: var(--bone);
  transform: translateX(2px);
}
.nokh-select__option.is-selected {
  background: linear-gradient(90deg, rgba(133,75,78,.25), rgba(133,75,78,.07));
  color: var(--bone);
}
.nokh-select__index {
  color: var(--text-dimmer);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
}
.nokh-select__option.is-selected .nokh-select__index { color: var(--rosewood-light, #bd8789); }
.nokh-select__option svg { width: 15px; opacity: 0; transform: scale(.65); transition: opacity .16s, transform .16s; }
.nokh-select__option.is-selected svg { opacity: 1; transform: scale(1); }

.nokh-select--form .nokh-select__trigger {
  min-height: 49px;
  border-radius: 0;
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  padding-left: 16px;
  font-size: 14px;
}
.nokh-select--form .nokh-select__trigger:hover { background: rgba(255,255,255,.08); }
.nokh-select--form .nokh-select__menu { width: 100%; min-width: 260px; }

@keyframes nokhSelectIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.collection-count {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  white-space: nowrap;
}

.clear-filters {
  background: none;
  border: none;
  color: var(--pastel-blue);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px;
}

.grid-status {
  grid-column: 1 / -1;
  color: var(--text-dimmer);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.grid-status--empty, .grid-status--error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 70px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}
.grid-status--error { border-color: rgba(192, 138, 118, 0.4); color: var(--alert); }

/* =====================================================
   SEARCH OVERLAY
===================================================== */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(6, 6, 6, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(70px, 12vh, 140px) var(--edge) 40px;
  opacity: 0;
  transition: opacity 0.22s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.search-overlay.is-open { opacity: 1; }
.search-overlay[hidden] { display: none; }

.search-panel { width: min(680px, 100%); margin: 0 auto; }

.search-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px 13px 18px;
  border: 1px solid rgba(8, 8, 9, .12);
  border-radius: 18px;
  background: var(--bone);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.5);
}
.search-bar:focus-within { border-color: var(--nokh-accent); box-shadow: 0 18px 48px rgba(0,0,0,.22), 0 0 0 3px rgba(142,75,88,.16); }
.search-bar svg { width: 21px; height: 21px; color: #3f3c38; flex: 0 0 auto; }

.search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--jet);
  caret-color: var(--nokh-accent);
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 600;
}
.search-input::placeholder { color: #696661; font-weight: 400; opacity: 1; }
.search-input:focus { outline: none; }

.search-close {
  background: none;
  border: none;
  color: #4b4843;
  font-size: 20px;
  cursor: pointer;
  padding: 6px 8px;
  flex: 0 0 auto;
}
.search-close:hover { color: var(--jet); background: rgba(8,8,9,.07); border-radius: 50%; }

.region-picker__search::selection,
.collection-search input::selection,
.search-input::selection { background: var(--nokh-selection-bg); color: var(--nokh-selection-text); }

.region-picker__search:-webkit-autofill,
.collection-search input:-webkit-autofill,
.search-input:-webkit-autofill {
  -webkit-text-fill-color: var(--jet);
  caret-color: var(--nokh-accent);
  -webkit-box-shadow: 0 0 0 1000px var(--bone) inset;
  box-shadow: 0 0 0 1000px var(--bone) inset;
}

.search-results { margin-top: 28px; }
.search-hint, .search-count, .search-empty {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin-bottom: 16px;
}
.search-empty { text-transform: none; letter-spacing: 0.03em; font-size: 14px; }
.search-empty a { color: var(--pastel-blue); text-decoration: underline; text-underline-offset: 3px; }

.search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.search-chip {
  border: 1px solid var(--line);
  background: none;
  color: var(--text-dim);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.search-chip:hover { border-color: var(--line-strong); color: var(--bone); }

.search-list { list-style: none; margin: 0 0 22px; padding: 0; }
.search-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: var(--radius-md);
  transition: background 0.18s;
}
.search-item:hover { background: rgba(232, 224, 212, 0.06); }
.search-item img, .search-item__noimg {
  width: 56px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  flex: 0 0 auto;
}
.search-item__text { flex: 1; min-width: 0; }
.search-item__title { display: block; font-size: 14px; color: var(--bone); }
.search-item__meta {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin-top: 4px;
}
.search-item__price { font-size: 13px; color: var(--text-dim); white-space: nowrap; }

.search-all {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--pastel-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =====================================================
   CART DRAWER
===================================================== */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 310;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.26s var(--ease);
}
.cart-drawer-overlay.is-open { opacity: 1; }
.cart-drawer-overlay[hidden] { display: none; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 320;
  width: min(420px, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--jet-lift);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.34s var(--ease);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer[hidden] { display: none; }

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--edge) 18px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.cart-drawer__title {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
.cart-drawer__count { color: var(--text-dimmer); margin-left: 6px; }
.cart-drawer__close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 19px;
  cursor: pointer;
  padding: 6px 8px;
}
.cart-drawer__close:hover { color: var(--bone); }

.cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px var(--edge);
}
.cart-drawer__loading { color: var(--text-dimmer); padding: 40px 0; text-align: center; }

.cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  padding: 70px 0;
  color: var(--text-dim);
}

.cart-drawer__line {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(110, 114, 120, 0.22);
  transition: opacity 0.2s;
}
.cart-drawer__line.is-busy { opacity: 0.45; pointer-events: none; }
.cart-drawer__line img, .cart-drawer__noimg {
  width: 68px;
  height: 85px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  flex: 0 0 auto;
}
.cart-drawer__info { flex: 1; min-width: 0; }
.cart-drawer__info .cart-line__preorder { margin-top: 7px; }
.cart-line__body .cart-line__preorder { margin: 7px 0; }
.cart-drawer__name { display: block; font-size: 14px; color: var(--bone); line-height: 1.35; }
.cart-drawer__variant, .cart-drawer__price {
  font-size: 11px;
  color: var(--text-dimmer);
  margin: 5px 0 0;
  letter-spacing: 0.08em;
}
.cart-drawer__price { color: var(--text-dim); }

.cart-drawer__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.qty-stepper--sm {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px;
}
.qty-stepper--sm .qty-btn {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  border-radius: 50%;
}
.qty-stepper--sm .qty-btn:hover { color: var(--bone); background: rgba(232, 224, 212, 0.10); }
.qty-value { min-width: 22px; text-align: center; font-size: 12px; font-weight: 700; }

.cart-drawer__remove {
  background: none;
  border: none;
  color: var(--text-dimmer);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-drawer__remove:hover { color: var(--alert); }

.cart-drawer__foot {
  flex: 0 0 auto;
  padding: 20px var(--edge) calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--jet);
}
.cart-drawer__promo {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}
.cart-drawer__promo.is-unlocked {
  color: var(--olive-lift);
  border-color: rgba(141, 160, 127, 0.45);
  border-style: solid;
}
.cart-drawer__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}
.cart-drawer__note { font-size: 10px; color: var(--text-dimmer); margin: 0 0 14px; }
.cart-drawer__checkout {
  width: 100%;
  background: var(--bone);
  color: var(--jet);
  border: none;
  border-radius: var(--radius-pill);
  padding: 15px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.cart-drawer__checkout:hover:not(:disabled) { background: var(--olive); color: var(--bone); }
.cart-drawer__checkout:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-drawer__view {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-dimmer);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-drawer__view:hover { color: var(--bone); }

/* =====================================================
   STATUS TOAST
===================================================== */
.status-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 340;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(14, 14, 14, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
  color: var(--bone);
  font-size: 13px;
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform 0.36s var(--ease), opacity 0.3s var(--ease);
  pointer-events: none;
}
.status-toast.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.status-toast--error { border-color: rgba(192, 138, 118, 0.5); }
.status-toast__icon { flex: 0 0 auto; font-size: 15px; }
.status-toast__text { flex: 1; min-width: 0; }
.status-toast__action {
  flex: 0 0 auto;
  color: var(--pastel-blue);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================
   HOMEPAGE — EDITORIAL SECTIONS
===================================================== */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 42px;
}
.section-head__text { max-width: 640px; }
.section-head .section-title { margin-bottom: 10px; }

/* Category tiles */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
}
.category-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(280px, 42vw, 460px);
  padding: 28px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  isolation: isolate;
}
.category-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.9s var(--ease);
}
.category-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(6, 6, 6, 0.9) 0%, rgba(6, 6, 6, 0.25) 55%, rgba(6, 6, 6, 0.1) 100%);
}
.category-tile:hover img { transform: scale(1.06); }
.category-tile__label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-lift);
  margin-bottom: 8px;
}
.category-tile__title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 10px;
}
.category-tile__meta { font-size: 12px; color: rgba(232, 224, 212, 0.70); margin: 0; }
.category-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.category-tile__cta::after { content: '→'; transition: transform 0.25s var(--ease); }
.category-tile:hover .category-tile__cta::after { transform: translateX(5px); }

/* Editorial split panel */
.editorial {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  align-items: stretch;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.editorial--reverse .editorial-media { order: 2; }
.editorial-media {
  position: relative;
  min-height: clamp(320px, 46vw, 560px);
  background: var(--jet-lift-2);
}
.editorial-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.editorial-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(32px, 5vw, 68px);
}
.editorial-panel__kicker {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--olive-lift);
  margin: 0;
}
.editorial-panel__title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
}
.editorial-panel p { color: var(--text-dim); margin: 0; max-width: 46ch; }

/* Brand statement */
.statement {
  text-align: center;
  padding: clamp(70px, 12vw, 140px) 0;
}
.statement__text {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.6rem, 4.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin: 0 auto;
  text-wrap: balance;
}
.statement__sig {
  margin-top: 34px;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dimmer);
}
.statement__cta { margin-top: 30px; }

/* Bone statement: a hairline rule above and below makes the light band read
   as a deliberate plate rather than an unstyled gap. */
.section-bone.statement {
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(110, 114, 120, 0.12) 0%, transparent 62%),
    var(--bone);
}

/* Highlights strip */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.highlight-item {
  background: var(--jet-lift);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.highlight-item__icon { font-size: 20px; }
.highlight-item h3 {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
}
.highlight-item p { font-size: 13px; line-height: 1.6; color: var(--text-dim); margin: 0; }

/* Newsletter */
.newsletter {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: clamp(36px, 6vw, 76px);
  text-align: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(232, 224, 212, 0.07) 0%, transparent 60%),
    var(--jet-lift);
}
.newsletter__title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.newsletter p { color: var(--text-dim); max-width: 48ch; margin: 0 auto 30px; }
.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 520px;
  margin: 0 auto;
}
.newsletter__form input {
  flex: 1 1 240px;
  min-width: 0;
  background: var(--bone);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--jet);
  caret-color: var(--nokh-accent);
  font-family: inherit;
  font-size: 14px;
  padding: 15px 22px;
}
.newsletter__form input::placeholder { color: #696661; opacity: 1; }
.newsletter__form input:focus,
.newsletter__form input:focus-visible { border-color: var(--nokh-focus); outline: 2px solid var(--nokh-focus); outline-offset: 2px; }
.newsletter__form input::selection { background: var(--nokh-selection-bg); color: var(--nokh-selection-text); }
.newsletter__form input:-webkit-autofill,
.newsletter__form input:-webkit-autofill:hover,
.newsletter__form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--jet);
  caret-color: var(--nokh-accent);
  -webkit-box-shadow: 0 0 0 1000px var(--bone) inset;
  box-shadow: 0 0 0 1000px var(--bone) inset;
  transition: background-color 9999s ease-out 0s;
}

.collection-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px clamp(14px, 2.5vw, 34px);
  min-height: 46px;
  padding: 10px var(--edge);
  overflow: clip;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.collection-strip [aria-hidden="true"] { color: var(--nokh-accent-hover); font-size: 8px; }
.collection-strip .m-brand { color: var(--bone); }

.mb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(28px, 4vw, 52px);
}
.set-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--jet-lift-2);
}
.set-card--bone { background: #D9D2C8; color: var(--jet); border-color: rgba(8,8,9,.16); }
.set-card__visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(360px, 42vw, 620px);
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(181,108,122,.16), transparent 58%), #121214;
}
.set-card--bone .set-card__visual { background: radial-gradient(circle at 50% 35%, rgba(142,75,88,.16), transparent 58%), #E9E3DA; }
.set-card__piece { display: grid; place-items: center; min-width: 0; padding: clamp(18px, 3vw, 40px) 4px; }
.set-card__piece img { width: 100%; height: 100%; max-height: 540px; object-fit: contain; transition: transform .25s var(--ease); }
.set-card__piece:hover img,
.set-card__piece:focus-visible img { transform: scale(1.025); }
.set-card__index { position: absolute; top: 18px; left: 20px; font: 700 11px/1 'Syne', sans-serif; letter-spacing: .18em; }
.set-card__body { display: grid; gap: 20px; padding: clamp(24px, 3vw, 38px); }
.set-card__eyebrow { margin: 0 0 8px; color: var(--nokh-accent-hover); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.set-card--bone .set-card__eyebrow { color: var(--olive-deep); }
.set-card__body h3 { margin: 0; font: 700 clamp(1.35rem, 2.2vw, 2rem)/1.1 'Syne', sans-serif; }
.set-card__status { margin: 0; color: var(--text-dim); font-size: 12px; }
.set-card--bone .set-card__status { color: rgba(8,8,9,.66); }
.set-card__prices { display: grid; gap: 8px; margin: 0; }
.set-card__prices div { display: flex; justify-content: space-between; gap: 18px; padding-top: 8px; border-top: 1px solid currentColor; border-color: var(--line); }
.set-card--bone .set-card__prices div { border-color: rgba(8,8,9,.14); }
.set-card__prices dt, .set-card__prices dd { margin: 0; font-size: 12px; }
.set-card__total { font-weight: 700; }
.set-card__actions { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.set-card__actions a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid currentColor; }
@media (max-width: 760px) {
  .mb-grid { grid-template-columns: minmax(0, 1fr); }
  .set-card__visual { min-height: 420px; }
  .collection-strip { justify-content: flex-start; }
}
.newsletter__form button {
  flex: 0 0 auto;
  background: var(--bone);
  color: var(--jet);
  border: none;
  border-radius: var(--radius-pill);
  padding: 15px 32px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.newsletter__form button:hover:not(:disabled) { background: var(--olive); color: var(--bone); }
.newsletter__form button:disabled { opacity: 0.5; cursor: default; }
.newsletter > .form-note { min-height: 1.6em; margin: 20px auto 0; font-size: 12px; line-height: 1.6; color: var(--text-dim); }
.form-note { margin-top: 16px; font-size: 11px; color: var(--text-dimmer); }
.form-note.is-error { color: var(--alert); }
.form-note.is-success { color: var(--olive-lift); }
.form-note.is-notice { color: var(--pastel-blue); }
.form-note.is-notice a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================
   PRODUCT DETAIL PAGE
===================================================== */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-dimmer);
  margin-bottom: 26px;
  list-style: none;
  padding: 0;
}
.breadcrumbs a { color: var(--text-dim); }
.breadcrumbs a:hover { color: var(--bone); }
.breadcrumbs li + li::before { content: '/'; margin-right: 8px; opacity: 0.4; }

.pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr — a bare 1fr floors the track at the widest
     child's min-content, and Shopify descriptions can contain long unbroken
     tokens that blew the column out to ~526px inside a 375px viewport. */
  .pdp-grid { grid-template-columns: minmax(0, 1fr); }
}

.pdp-gallery { position: sticky; top: calc(var(--nav-h) + 20px); }
@media (max-width: 900px) { .pdp-gallery { position: static; } }

.pdp-main-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  display: block;
}
.product-card__media-wrap.has-image-error::after {
  content: 'Image temporarily unavailable';
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
  color: rgba(9, 9, 9, 0.58);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.pdp-main-media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  cursor: zoom-in;
  overflow: hidden;
}
.pdp-main-media .pdp-main-img { object-fit: contain; background: var(--surface-2); }
.pdp-main-media::after {
  content: 'Open image';
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 7px 10px;
  border: 1px solid rgba(242, 237, 228, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(9, 9, 9, 0.64);
  color: var(--bone);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.pdp-main-media.has-image-error::before {
  content: 'Image temporarily unavailable';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pdp-main-media.has-image-error::after { display: none; }
.pdp-image-count {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  margin: 0;
  padding: 7px 10px;
  border-radius: var(--radius-pill);
  background: rgba(9, 9, 9, 0.64);
  color: var(--bone);
  font-size: 10px;
  letter-spacing: 0.14em;
  backdrop-filter: blur(8px);
}
.pdp-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pdp-thumb {
  width: 72px;
  height: 90px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.2s, opacity 0.2s;
  opacity: 0.6;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:hover { opacity: 1; }
.pdp-thumb.active { border-color: var(--bone); opacity: 1; }

.pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 380;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 54px);
  background: rgba(4, 4, 4, 0.94);
  backdrop-filter: blur(12px);
}
.pdp-lightbox__img {
  width: min(100%, 1100px);
  height: min(88vh, 1100px);
  object-fit: contain;
}
.pdp-lightbox__close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--jet-lift);
  color: var(--bone);
  cursor: pointer;
}
.pdp-lightbox__nav {
  position: fixed;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(17, 17, 19, 0.88);
  color: var(--bone);
  font-size: 22px;
  cursor: pointer;
}
.pdp-lightbox__nav--prev { left: clamp(12px, 3vw, 36px); }
.pdp-lightbox__nav--next { right: clamp(12px, 3vw, 36px); }
.pdp-lightbox__status {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(17, 17, 19, 0.84);
  color: var(--bone);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pdp-lightbox__nav:focus-visible,
.pdp-lightbox__close:focus-visible { outline: 2px solid var(--nokh-focus); outline-offset: 3px; }

.pdp-info { display: flex; flex-direction: column; gap: 6px; }
.pdp-kicker {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--olive-lift);
  margin: 0;
}
.pdp-preorder-label {
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(181, 108, 122, 0.45);
  border-radius: var(--radius-pill);
}
.pdp-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}
.pdp-price {
  font-size: 20px;
  color: var(--bone);
  margin: 12px 0 0;
}
.pdp-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 10px 0 0;
}
.pdp-stock::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--olive-lift);
}
.pdp-stock.is-low::before { background: var(--steel-lift); }
.pdp-stock.is-out::before { background: var(--text-dimmer); }

/* Description copy comes from Shopify and is not under our control — force
   long tokens to break rather than push the layout wide. */
.pdp-desc {
  color: var(--text-dim);
  margin: 20px 0 0;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.pdp-desc p { margin: 0 0 12px; }
.pdp-desc img { max-width: 100%; height: auto; }
.pdp-preorder-note {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--nokh-accent);
  background: rgba(142, 75, 88, 0.10);
  color: var(--bone-dim);
  font-size: 13px;
  line-height: 1.55;
}

.pdp-option-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 26px 0 12px;
}
.pdp-option-label a { color: var(--pastel-blue); text-decoration: underline; text-underline-offset: 3px; }

.pdp-colours { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.pdp-colour {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 9px 16px;
  transition: border-color 0.2s, color 0.2s;
}
.pdp-colour:hover { border-color: var(--line-strong); color: var(--bone); }
.pdp-colour.active { border-color: var(--bone); color: var(--bone); }

.pdp-qty-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.pdp-add-btn {
  flex: 1 1 200px;
  background: var(--bone);
  color: var(--jet);
  border: none;
  border-radius: var(--radius-pill);
  padding: 17px 28px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.pdp-add-btn:hover:not(:disabled) { background: var(--olive); color: var(--bone); }
.pdp-add-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.pdp-wish {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.pdp-wish:hover { border-color: var(--line-strong); }
.pdp-wish svg { width: 20px; height: 20px; fill: none; stroke: var(--bone); stroke-width: 1.5; }
.pdp-wish.is-saved svg { fill: var(--olive-lift); stroke: var(--olive-lift); }

.pdp-msg { min-height: 1.2em; margin: 12px 0 0; font-size: 12px; color: var(--olive-lift); }
.pdp-msg.error { color: var(--alert); }

/* Accordion — materials / fit / care / shipping */
.pdp-accordion { margin-top: 34px; border-top: 1px solid var(--line); }
.pdp-acc { border-bottom: 1px solid var(--line); }
.pdp-acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  background: none;
  border: none;
  color: var(--bone);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.pdp-acc__btn::after {
  content: '+';
  font-size: 17px;
  font-weight: 400;
  color: var(--text-dim);
  transition: transform 0.24s var(--ease);
}
.pdp-acc[open] .pdp-acc__btn::after { transform: rotate(45deg); }
.pdp-acc__body { padding: 0 0 22px; color: var(--text-dim); font-size: 14px; line-height: 1.75; }
.pdp-acc__body ul { margin: 0; padding-left: 18px; }
.pdp-acc__body li { margin-bottom: 8px; }
.pdp-acc__body dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0; }
.pdp-acc__body dt { color: var(--text-dimmer); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.pdp-acc__body dd { margin: 0; }

.sample-note {
  margin-top: 14px;
  padding: 11px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-dimmer);
}

/* =====================================================
   DOCUMENT PAGES (about / care / shipping / returns / legal)
===================================================== */
.doc-wrap {
  width: min(760px, 92%);
  margin: 0 auto;
  padding: clamp(40px, 8vw, 90px) 0 clamp(60px, 10vw, 120px);
}
.doc-wrap--wide { width: min(1100px, 92%); }

.doc-block { margin-bottom: 46px; }
.doc-block h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.doc-block h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-lift);
  margin: 28px 0 12px;
}
.doc-block p, .doc-block li {
  color: var(--text-dim);
  line-height: 1.8;
  font-size: 15px;
}
.doc-block p { margin: 0 0 16px; }
.doc-block ul, .doc-block ol { margin: 0 0 18px; padding-left: 20px; }
.doc-block li { margin-bottom: 10px; }
.doc-block a { color: var(--pastel-blue); text-decoration: underline; text-underline-offset: 3px; }

.doc-updated {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 14px;
}
.doc-table th, .doc-table td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.doc-table th {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  font-weight: 700;
}
.doc-table td { color: var(--text-dim); }
/* Wide tables scroll rather than pushing the page sideways */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.doc-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  margin-top: 40px;
}
.doc-cta p { margin: 0; flex: 1 1 240px; color: var(--text-dim); font-size: 14px; }

/* =====================================================
   404
===================================================== */
.notfound {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 120px var(--edge) 80px;
}
.notfound__code {
  font-family: 'Syne', sans-serif;
  font-size: clamp(5rem, 22vw, 13rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  background: linear-gradient(120deg, var(--bone), var(--steel-lift) 50%, var(--olive-lift));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}
.notfound__title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 700;
  margin: 0;
}
.notfound__text { color: var(--text-dim); max-width: 46ch; margin: 0; }
.notfound__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 12px; }

/* =====================================================
   FOOTER
===================================================== */
.footer { border-top: 1px solid var(--line); padding-top: clamp(48px, 7vw, 84px); }
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: clamp(32px, 6vw, 80px);
  padding-bottom: 56px;
}
@media (max-width: 780px) { .footer-inner { grid-template-columns: 1fr; } }

.footer-logo { display: block; position: relative; }
.footer-model-canvas { display: block; width: 200px; height: 124px; max-width: 100%; }
/* Shown only if WebGL never initialises, so the footer is never wordmark-less */
.footer-logo__fallback {
  display: none;
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.28em;
}
.no-webgl .footer-model-canvas { display: none; }
.no-webgl .footer-logo__fallback { display: block; }

.footer-brand__line { color: var(--text-dim); font-size: 13px; line-height: 1.7; margin: 10px 0 20px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-social a {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer-social a:hover { color: var(--bone); }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
}
.footer-nav a { display: block; font-size: 13px; color: var(--text-dim); padding: 5px 0; }
.footer-nav a:hover { color: var(--bone); }
.footer-nav-title {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin-bottom: 12px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 30px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-dimmer);
}
.footer-bottom__right { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.footer-bottom a { color: var(--text-dimmer); }
.footer-bottom a:hover { color: var(--bone); }

/* Footer uses the same picker, opening upward and inward from the edge. */
.footer-bottom .region-picker { margin-left: 0; }
.footer-bottom .region-picker__panel { right: 0; bottom: calc(100% + 10px); left: auto; top: auto; }

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 640px) {
  .collection-toolbar { display: grid; grid-template-columns: 1fr; padding: 18px 0; gap: 12px; }
  .collection-toolbar .toolbar-spacer { display: none; }
  .collection-toolbar .toolbar-group { width: 100%; }
  .collection-toolbar .toolbar-group:last-of-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-toolbar .collection-search { grid-column: 1 / -1; }
  .collection-toolbar .sort-wrap { min-width: 0; flex-direction: column; align-items: stretch; gap: 5px; }
  .collection-toolbar .sort-select { width: 100%; min-width: 0; min-height: 44px; }
  .collection-toolbar .nokh-select { width: 100%; min-width: 0; }
  .collection-toolbar .nokh-select__trigger { min-height: 44px; }
  .collection-toolbar .nokh-select__menu { width: 100%; min-width: 0; }
  .collection-toolbar .collection-count { align-self: center; }
  .collection-toolbar .clear-filters { justify-self: end; }
  .collection-search input { width: 100%; }
  .collection-search { flex: 1 1 100%; }
  .products-grid { gap: 14px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card__title { font-size: 13px; }
  .product-card__price { font-size: 12px; }
  .size-pill { min-width: 32px; padding: 6px 8px; font-size: 9px; }
  .product-btn { font-size: 10px; padding: 11px 12px; letter-spacing: 0.1em; }
  .cart-drawer { width: 100vw; }
  .status-toast { bottom: 16px; font-size: 12px; }
  .highlight-item { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .nokh-select__menu { animation: none; }
  .nokh-select__trigger,
  .nokh-select__mark i,
  .nokh-select__option { transition: none; }
}

@media (max-width: 400px) {
  .products-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   SIZE GUIDE (modal)
   Replaces the old inline table that scrolled sideways
   behind arrow buttons.
===================================================== */
.sg-root { position: fixed; inset: 0; z-index: 360; }
.sg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  opacity: 0;
  transition: opacity 240ms var(--ease);
}
.sg-root.is-open .sg-backdrop { opacity: 1; }

.sg-panel-wrap {
  position: absolute;
  inset: auto 0 0 0;
  max-height: min(88dvh, 860px);
  display: flex;
  flex-direction: column;
  background: var(--jet-lift-2);
  border-top: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 300ms var(--ease), opacity 240ms var(--ease);
}
.sg-root.is-open .sg-panel-wrap { transform: translateY(0); opacity: 1; }

@media (min-width: 780px) {
  .sg-panel-wrap {
    inset: 50% auto auto 50%;
    width: min(920px, 92vw);
    transform: translate(-50%, -46%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
  }
  .sg-root.is-open .sg-panel-wrap { transform: translate(-50%, -50%); }
}

.sg-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px clamp(20px, 4vw, 36px) 18px;
  border-bottom: 1px solid var(--line);
}
.sg-kicker {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--olive-lift);
  margin: 0 0 6px;
}
.sg-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 700;
  margin: 0;
  color: var(--bone);
}
.sg-close {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-dim);
  font-size: 15px;
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.sg-close:hover { color: var(--bone); border-color: var(--line-strong); }

/* Only the body scrolls — no nested scroll regions. */
.sg-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px clamp(20px, 4vw, 36px) calc(28px + env(safe-area-inset-bottom));
}
.sg-intro { color: var(--text-dim); font-size: 14px; line-height: 1.7; margin: 0 0 24px; }
.sg-intro strong { color: var(--bone); }

/* Desktop table — full width, no horizontal scrolling */
.sg-desktop { display: none; }
.sg-mobile { display: block; }
@media (min-width: 780px) {
  .sg-desktop { display: block; }
  .sg-mobile { display: none; }
}

.sg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}
.sg-table caption { text-align: left; }
.sg-table th, .sg-table td {
  padding: 13px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.sg-table thead th {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  font-weight: 700;
}
.sg-table tbody th { color: var(--bone); font-weight: 500; }
.sg-table tbody td { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sg-table tbody tr:nth-child(odd) { background: rgba(242, 237, 228, 0.025); }

/* Mobile size tabs */
.sg-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  margin-bottom: 22px;
}
.sg-tab {
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.sg-tab:hover { border-color: var(--line-strong); color: var(--bone); }
.sg-tab.active { background: var(--bone); border-color: var(--bone); color: var(--jet); }

.sg-panel[hidden] { display: none; }
.sg-panel__title {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--bone);
  margin: 0 0 14px;
}

.sg-list { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; }
.sg-list dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dimmer);
}
.sg-list dd { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
@media (max-width: 520px) {
  .sg-list { grid-template-columns: 1fr; gap: 4px 0; }
  .sg-list dd { margin-bottom: 12px; }
}

.sg-pending {
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-dimmer);
}
.sg-pending a { color: var(--olive-lift); text-decoration: underline; text-underline-offset: 3px; }

.sg-how { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.sg-how h3 {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 16px;
}
.sg-units { margin: 18px 0 0; font-size: 11px; color: var(--text-dimmer); }


/* =====================================================
   CATEGORY DIRECTORY
   Left editorial column, right numbered index.
===================================================== */
.directory {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 900px) {
  .directory { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

.directory__aside { position: sticky; top: calc(var(--nav-h) + 32px); }
@media (max-width: 900px) { .directory__aside { position: static; } }

.directory__kicker {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--olive-lift);
  margin: 0 0 18px;
}
.directory__title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--bone);
  text-wrap: balance;
}
.directory__text { color: var(--text-dim); line-height: 1.75; margin: 0 0 14px; max-width: 42ch; }
.directory__code {
  display: inline-block;
  margin-top: 18px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dimmer);
}

.directory__list { border-top: 1px solid var(--line); }

.directory-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(22px, 3.4vw, 34px) clamp(10px, 2vw, 22px);
  border-bottom: 1px solid var(--line);
  color: var(--bone);
  transition: background 200ms var(--ease), padding-left 200ms var(--ease);
  min-height: 88px;
}
.directory-row:hover,
.directory-row:focus-visible {
  background: var(--jet-lift-2);
  padding-left: clamp(18px, 2.6vw, 32px);
}
/* Olive rail grows from the left edge on hover — the restrained accent */
.directory-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--olive-lift);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 220ms var(--ease);
}
.directory-row:hover::before,
.directory-row:focus-visible::before { transform: scaleY(1); }

.directory-row__num {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-dimmer);
  font-variant-numeric: tabular-nums;
  transition: color 200ms var(--ease);
}
.directory-row:hover .directory-row__num { color: var(--olive-lift); }

.directory-row__main { min-width: 0; display: grid; gap: 7px; }
.directory-row__name {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.25rem, 3.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  /* Wrap rather than truncate — long category names must stay readable */
  overflow-wrap: anywhere;
}
.directory-row__meta {
  display: block;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-dimmer);
}
.directory-row__soon {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  vertical-align: middle;
}

.directory-row__arrow {
  flex: 0 0 auto;
  width: 34px;
  font-size: 19px;
  line-height: 1;
  color: var(--text-dimmer);
  transition: transform 200ms var(--ease), color 200ms var(--ease);
  text-align: right;
}
.directory-row:hover .directory-row__arrow,
.directory-row:focus-visible .directory-row__arrow {
  transform: translateX(5px);
  color: var(--bone);
}

.directory-row.is-soon { pointer-events: none; opacity: 0.5; }

@media (max-width: 520px) {
  .directory-row { gap: 14px; padding: 20px 8px; min-height: 76px; }
  .directory-row__meta { font-size: 11px; }
}


/* =====================================================
   CAMPAIGN (editorial)
===================================================== */
.campaign {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  .campaign { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

.campaign__panel { position: sticky; top: calc(var(--nav-h) + 32px); }
@media (max-width: 900px) { .campaign__panel { position: static; } }

.campaign__label {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--olive-lift);
  margin: 0 0 16px;
}
.campaign__title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  color: var(--bone);
}
.campaign__title em {
  font-style: normal;
  display: block;
  color: var(--olive-lift);
}
.campaign__text { color: var(--text-dim); line-height: 1.75; margin: 0 0 16px; max-width: 40ch; }
.campaign__code {
  display: inline-block;
  margin: 8px 0 22px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dimmer);
}

/* Mixed portrait / landscape grid, ready for real model photography */
.campaign__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
}
.campaign-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--jet-lift-2);
  aspect-ratio: var(--ratio, 4 / 5);
}
.campaign-shot--wide { grid-column: 1 / -1; --ratio: 16 / 10; }
.campaign-shot picture { position: absolute; inset: 0; display: block; }
.campaign-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  transition: transform 600ms var(--ease);
}
.campaign-shot:hover img { transform: scale(1.03); }

.campaign-shot__meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(9, 9, 9, 0.85), transparent);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bone);
}
.campaign-shot__seq { color: var(--olive-lift); font-variant-numeric: tabular-nums; }
.campaign-shot__caption { text-align: right; color: var(--bone-dim); }

/* Placeholder marker — disappears on its own once a shot is real */
.campaign-shot__placeholder {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: rgba(9, 9, 9, 0.72);
  backdrop-filter: blur(6px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-lift);
}

@media (max-width: 520px) {
  .campaign__grid { grid-template-columns: minmax(0, 1fr); }
  .campaign-shot--wide { --ratio: 4 / 5; }
}


/* =====================================================
   PRODUCT PAGE — scale up
   The interface previously sat in a narrow centre strip.
===================================================== */
.pdp-page .container { width: min(1360px, 94%); }

.pdp-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr);
  gap: clamp(2rem, 5vw, 6rem);
}

.breadcrumbs { font-size: 12px; }
.breadcrumbs li:last-child {
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdp-title { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.pdp-price { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.pdp-stock { font-size: 12px; }
.pdp-desc { font-size: 15.5px; line-height: 1.8; }
.pdp-option-label { font-size: 12px; }

/* Larger, easier controls */
.pdp-info .size-row { min-height: 52px; }
.pdp-info .size-pill { height: 52px; font-size: 13px; border-radius: var(--radius-sm); }
.pdp-colour { padding: 11px 18px; font-size: 12px; }
.pdp-colour.is-out { opacity: 0.45; }
.pdp-add-btn { height: 58px; font-size: 13px; padding: 0 28px; }
.pdp-wish { width: 58px; height: 58px; }
.qty-stepper { min-height: 58px; }
.pdp-acc__btn { padding: 22px 0; font-size: 13px; }
.pdp-acc__body { font-size: 15px; }

@media (max-width: 900px) {
  .pdp-page .container { width: min(1360px, 92%); }
  /* This must live after the scale-up rule above. The previous mobile rule
     appeared earlier in the file and was overwritten, leaving a 22rem second
     column clipped off-screen on phones. */
  .pdp-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .pdp-main-media::after { content: 'Tap to open'; }
}


/* PDP skeleton column — mirrors the real info column */
.pdp-skeleton-col { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.pdp-skeleton-col .skeleton--line { height: 13px; }
/* Skeleton media matches the real gallery frame exactly, so swapping in the
   product causes no shift. */
#pdp-loading .skeleton--media { aspect-ratio: 4 / 5; }

/* Size-guide trigger styled as a link, but a real <button> */
.pdp-sizeguide-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  letter-spacing: inherit;
  text-transform: inherit;
}
.pdp-sizeguide-btn:hover { color: var(--olive-lift); }

/* =====================================================
   LIVE PRE-ORDER NOTIFICATION
   Corner card that slides in as pre-orders come through.
===================================================== */
.preorder-toast {
  position: fixed;
  left: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  z-index: 330;
  width: min(340px, calc(100vw - 24px));
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(26, 27, 25, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  transform: translateY(14px) scale(0.98);
  opacity: 0;
  transition: transform 320ms var(--ease), opacity 260ms var(--ease);
}
.preorder-toast.is-visible { transform: translateY(0) scale(1); opacity: 1; }
.preorder-toast[hidden] { display: none; }

/* Olive rail marks it as a commerce event without shouting */
.preorder-toast::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: var(--olive-lift);
}

.preorder-toast__link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  color: inherit;
}

.preorder-toast__img {
  width: 46px;
  height: 58px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bone);
}

.preorder-toast__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.preorder-toast__who {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dimmer);
}
.preorder-toast__what {
  font-size: 13px;
  line-height: 1.3;
  color: var(--bone);
  /* One line — long product names must not stretch the card */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preorder-toast__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-dimmer);
}
.preorder-toast__badge {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--olive);
  color: var(--bone);
  font-weight: 800;
  font-size: 8px;
  letter-spacing: 0.14em;
}
.preorder-toast__preview {
  margin-left: auto;
  padding: 2px 5px;
  border: 1px solid rgba(242, 237, 228, 0.16);
  border-radius: var(--radius-pill);
  color: var(--text-dimmer);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.preorder-toast__close {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--text-dimmer);
  font-size: 11px;
  cursor: pointer;
  border-radius: 50%;
}
.preorder-toast__close:hover { color: var(--bone); background: rgba(242, 237, 228, 0.1); }

/* Newest table row gets a brief highlight so the connection between the
   notification and the feed is obvious. */
.preorder-activity__row.is-new { animation: nokh-row-in 700ms var(--ease); }
@keyframes nokh-row-in {
  from { background: rgba(141, 160, 127, 0.16); transform: translateY(-4px); opacity: 0.4; }
  to   { background: transparent; transform: translateY(0); opacity: 1; }
}

@media (max-width: 520px) {
  .preorder-toast { width: calc(100vw - 24px); }
  .preorder-toast__img { width: 40px; height: 50px; }
}