/* ==========================================================================
   PHUANNE — concept preview stylesheet
   Palette and typography direction locked by
   20260831_PHUANNE_BRAND_AND_DRAFT_SITE_SOT_V1.md §5
   ========================================================================== */

:root {
  --obsidian: #090909;
  --ink: #040404;
  --bone: #f2eee8;
  --chrome: #b7b7b7;
  --oxblood: #5a0a16;
  --cobalt: #224cff;
  /* Logo-only accent (interim P-emblem, 2026-08-31) — never used as a body/UI
     colour. The SOT palette (obsidian/bone/chrome/oxblood/cobalt) is unchanged
     everywhere else on the site. */
  --gold: #cba353;
  --gold-light: #f2dfa9;
  --gold-dark: #8c6a24;

  --muted: rgba(242, 238, 232, 0.6);
  --muted-2: rgba(242, 238, 232, 0.42);
  --hairline: rgba(242, 238, 232, 0.14);
  --hairline-soft: rgba(242, 238, 232, 0.08);

  --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --grotesk: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gutter: 1.25rem;
  --maxw: 1600px;
  --header-h: 60px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.6s;
}

@media (min-width: 900px) {
  :root { --gutter: 2.5rem; --header-h: 76px; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--bone);
  font-family: var(--grotesk);
  font-size: 0.9375rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bone); color: var(--obsidian);
  padding: 0.75rem 1.25rem; font-size: 0.75rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* ---------- type primitives ---------- */
.wordmark {
  font-family: var(--grotesk);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  /* optical: trailing tracking pushes the mark right, pull it back */
  text-indent: 0.42em;
  line-height: 1;
}

.label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--chrome);
}

.display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.015em;
}

.h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.lede {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}

.body-copy { color: var(--muted); max-width: 62ch; }
.body-copy + .body-copy { margin-top: 1.25rem; }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(4rem, 10vw, 9rem); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 5rem); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.section-head__num { display: flex; align-items: baseline; gap: 1rem; }

/* ---------- header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.header--solid {
  background: rgba(9, 9, 9, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline-soft);
}
.header__inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.header__mark { font-size: clamp(0.9375rem, 2.2vw, 1.125rem); }

/* ---------- brand mark (interim P emblem + wordmark) ---------- */
.brand-mark {
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.brand-emblem { flex: 0 0 auto; display: block; }
.header .brand-emblem { width: clamp(16px, 2.6vw, 20px); height: clamp(16px, 2.6vw, 20px); }
.brand-mark--footer .brand-emblem { width: 20px; height: 20px; }

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: 2rem; }
}
.nav a {
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); transition: color 0.3s var(--ease); position: relative;
  padding-block: 0.25rem;
}
.nav a:hover, .nav a:focus-visible { color: var(--bone); }
.nav a[aria-current="page"] { color: var(--bone); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--bone);
}

.header__actions { display: flex; align-items: center; gap: 1.25rem; }

/* ---------- language / market switcher ---------- */
.lang-switch {
  display: flex; align-items: center; gap: 0.5rem;
}
.lang-switch button {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); transition: color 0.25s var(--ease);
}
.lang-switch button:hover, .lang-switch button:focus-visible { color: var(--bone); }
.lang-switch button[aria-pressed="true"] { color: var(--bone); }
.lang-switch__sep { color: var(--hairline); font-size: 0.6875rem; }
/* Header instance sits inline among small utility text; no special sizing. */
.lang-switch--header { display: none; }
@media (min-width: 1000px) { .lang-switch--header { display: flex; } }
/* Mobile-menu and footer instances get a real tap target. */
.lang-switch--menu button, .lang-switch--footer button {
  min-height: 44px; display: inline-flex; align-items: center;
}

.cart-link {
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.cart-count {
  min-width: 1.25rem; height: 1.25rem; padding-inline: 0.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); border-radius: 999px;
  font-size: 0.625rem; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cart-count[data-filled="true"] {
  background: var(--bone); color: var(--obsidian); border-color: var(--bone);
}

.menu-toggle {
  display: inline-flex; flex-direction: column; gap: 4px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  margin-right: -10px;
}
@media (min-width: 1000px) { .menu-toggle { display: none; } }
.menu-toggle span {
  display: block; width: 20px; height: 1px; background: var(--bone);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(2.5px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-2.5px) rotate(-45deg); }

/* ---------- mobile menu ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--obsidian);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
  overflow-y: auto;
}
.mobile-menu[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1000px) { .mobile-menu { display: none; } }
.mobile-menu a.mm-link {
  display: block; padding-block: 0.7rem;
  font-family: var(--serif); font-size: 2rem; line-height: 1.15;
  border-bottom: 1px solid var(--hairline-soft);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
/* Mobile: a 100svh hero on a narrow, tall viewport forces object-fit:cover
   to zoom in hard on a wide 16:9 source, turning the model into an
   oversized, edge-to-edge wall filling the whole first screen. A controlled
   band (well short of full-height) plus a re-tuned crop keeps this an
   editorial frame instead of a giant image dump. */
@media (max-width: 619px) {
  .hero { min-height: 58svh; max-height: 68svh; }
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
@media (max-width: 619px) {
  .hero__media img { object-position: center 18%; }
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(9,9,9,0.62) 0%, rgba(9,9,9,0.12) 34%, rgba(9,9,9,0.16) 56%, rgba(9,9,9,0.92) 100%);
}
.hero__inner {
  position: relative; z-index: 2; width: 100%;
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.hero__mark {
  font-size: clamp(1.75rem, 8.5vw, 6rem);
  margin-bottom: clamp(1rem, 2.5vw, 2rem);
}
.hero__line {
  font-size: clamp(2.25rem, 8vw, 6.5rem);
  max-width: 15ch;
}
.hero__sub {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 34ch; color: var(--muted);
  font-size: clamp(0.875rem, 1.4vw, 1rem);
}
.hero__scroll {
  position: absolute; right: var(--gutter); bottom: clamp(3rem, 8vw, 6rem);
  z-index: 2; display: none;
}
@media (min-width: 900px) { .hero__scroll { display: block; } }
.hero__scroll span {
  writing-mode: vertical-rl; font-size: 0.625rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-2);
}

/* ---------- campaign banner (slow crossfade, reduced-motion freezes on frame 1) ---------- */
.campaign {
  position: relative;
  height: 82vh;
  min-height: 420px;
  max-height: 880px;
  overflow: hidden;
  background: var(--ink);
}
/* Mobile: 82vh on a tall narrow viewport makes this mid-page banner almost
   a second full-screen hero, and cover-cropping a wide campaign frame into
   that shape leaves only a body section visible. The opening hero is the
   only image allowed to own the screen; everything below it stays a
   composed panel. */
@media (max-width: 619px) {
  .campaign { height: 58svh; min-height: 320px; }
}
.campaign__frame {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 2.4s var(--ease);
}
.campaign__frame.is-active { opacity: 1; }
.campaign__frame picture, .campaign__frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Anchor the crop above centre on mobile: cover-cropping a wide campaign
   frame into a narrow box otherwise centres on the midsection and cuts the
   head off. */
@media (max-width: 619px) {
  .campaign__frame img { object-position: center 32%; }
}
.campaign__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9, 9, 9, 0.6) 0%, rgba(9, 9, 9, 0) 42%);
}
.campaign__caption {
  position: absolute; left: var(--gutter); bottom: 1.5rem; z-index: 2;
}

/* ---------- product grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 0.75rem;
}
@media (min-width: 760px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
}
@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.75rem; }
}

/* editorial asymmetry for the homepage selection */
.grid--editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) {
  .grid--editorial { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .grid--editorial > *:nth-child(1) { grid-column: span 5; }
  .grid--editorial > *:nth-child(2) { grid-column: span 4; margin-top: 5rem; }
  .grid--editorial > *:nth-child(3) { grid-column: span 3; }
  .grid--editorial > *:nth-child(4) { grid-column: span 4; margin-top: -2rem; }
  .grid--editorial > *:nth-child(5) { grid-column: span 4; margin-top: 3rem; }
  .grid--editorial > *:nth-child(6) { grid-column: span 4; }
}

.card { position: relative; display: block; }
/* .card__media is a <span>, and `aspect-ratio` does not apply to a
   non-replaced INLINE element -- so this ratio was silently dead since the
   original build and every product card rendered at whatever height the
   grid row happened to stretch to (measured 0.489/0.46/0.431 instead of
   the intended 0.684, i.e. ~40% too tall, and varying with neighbouring
   cards' caption length). A too-tall box makes object-fit: cover crop
   harder, which is what reduced full-body fashion shots to a torso or a
   pair of legs. display:block makes the declared ratio actually apply. */
.card__media {
  position: relative; overflow: hidden; display: block;
  background: #0d0d0d; aspect-ratio: 832 / 1216;
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), opacity 0.55s var(--ease);
}
.card__media img.card__alt {
  position: absolute; inset: 0; opacity: 0;
}
.card:hover .card__media img.card__primary,
.card:focus-visible .card__media img.card__primary { opacity: 0; }
.card:hover .card__media img.card__alt,
.card:focus-visible .card__media img.card__alt { opacity: 1; }
.card:hover .card__media img,
.card:focus-visible .card__media img { transform: scale(1.035); }

.card__body {
  padding-top: 0.85rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
}
.card__name {
  font-size: 0.8125rem; letter-spacing: 0.07em; text-transform: uppercase;
  font-weight: 500;
}
@media (min-width: 760px) { .card__name { font-size: 0.875rem; } }
.card__price {
  font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card__meta {
  padding-top: 0.3rem;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2);
}
/* colourway dots revealed on interaction (luxury card behaviour, ref C9) */
.card__swatches {
  display: flex; gap: 0.35rem; padding-top: 0.55rem;
  opacity: 0; transform: translateY(-3px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.card:hover .card__swatches, .card:focus-within .card__swatches { opacity: 1; transform: none; }
@media (hover: none) { .card__swatches { opacity: 1; transform: none; } }
.swatch {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(242, 238, 232, 0.3);
}

/* ---------- filters ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding-bottom: 1.5rem; margin-bottom: clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid var(--hairline);
}
.filter {
  padding: 0.5rem 1rem;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--hairline); border-radius: 999px;
  color: var(--muted);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.filter:hover { color: var(--bone); border-color: var(--muted-2); }
.filter[aria-pressed="true"] {
  background: var(--bone); color: var(--obsidian); border-color: var(--bone);
}
.filter-count {
  margin-left: auto; align-self: center;
  font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- editorial split ---------- */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr 1fr; gap: clamp(3rem, 6vw, 6rem); } }
.split--flip > *:first-child { order: 2; }
@media (max-width: 899px) { .split--flip > *:first-child { order: 0; } }
/* Real bug, found during the V9 mobile-composition audit: an <img>'s HTML
   width/height ATTRIBUTES map to a UA-stylesheet presentational hint that
   sets width AND height as raw pixel values. Author CSS here only overrode
   width (`width:100%`) -- height was never touched, so the hint's absolute
   height attribute value (e.g. 900px, sized for the 900px-wide desktop
   column) stayed in force at ANY viewport, including a 350px-wide mobile
   column. The photo's actual width shrank responsively while its height
   stayed pinned at the desktop pixel count -- a severe vertical squeeze
   invisible on desktop (where the column really is ~900px) and grotesque on
   mobile (arms/torsos stretched into surreal proportions). Each shape gets
   its own class -- same pattern as .look-full's hero/portrait/square split
   on the Lookbook page -- rather than one generic ratio for every source
   shape (a portrait editorial shot, a square detail crop, and a landscape
   packaging/environmental shot all appear here). object-fit: cover is the
   safety net regardless: it can only crop tighter, never stretch. */
.split__media { position: relative; overflow: hidden; background: #0d0d0d; }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split__media--portrait { aspect-ratio: 832 / 1216; max-height: 58svh; }
.split__media--square { aspect-ratio: 1 / 1; max-height: 50svh; }
.split__media--landscape { aspect-ratio: 3 / 2; max-height: 45svh; }
@media (min-width: 900px) {
  /* Desktop column really is ~900px wide -- the mobile caps would clip a
     considered wide-format editorial layout, so they only apply below the
     .split two-column breakpoint. */
  .split__media--portrait, .split__media--square, .split__media--landscape { max-height: none; }
}

/* ---------- product detail ---------- */
.pdp { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 980px) { .pdp { grid-template-columns: 1.25fr 1fr; align-items: start; } }

.pdp__gallery { display: grid; gap: 0.5rem; }
@media (min-width: 620px) { .pdp__gallery { grid-template-columns: repeat(2, 1fr); } }
/* Fixed aspect-ratio + object-fit: cover on every cell — a stable, controlled
   frame regardless of the source image's own dimensions. Some gallery entries
   are 832x1216 fashion photography, others are 900x900 macro detail crops;
   without this, a square source got stretched to fill a box sized from
   (wrong, copy-pasted) width/height attributes that claimed it was portrait —
   the "very long / stretched" product-image bug. No single cell spans the
   full grid width any more either, so no image can dominate as an oversized
   single-image layout. */
.pdp__gallery figure {
  margin: 0; background: #0d0d0d; overflow: hidden;
  aspect-ratio: 832 / 1216;
  max-height: 70vh;
}
.pdp__gallery figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (min-width: 620px) {
  /* Explicit desktop cap: even inside its grid cell, a gallery frame can
     never grow tall enough to dominate the viewport or push price/size/
     cart controls out of the initial view. object-fit: cover means this
     can only ever crop tighter, never stretch or distort. */
  .pdp__gallery figure { max-height: 72vh; }
}

@media (min-width: 980px) {
  .pdp__info { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.pdp__name {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.02; letter-spacing: -0.01em;
  margin-top: 0.5rem;
}
.pdp__price {
  margin-top: 1rem; font-size: 1.0625rem; font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.pdp__tagline { margin-top: 0.75rem; color: var(--chrome); font-size: 0.9375rem; }

.opt-group { margin-top: 2rem; }
.opt-group__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.75rem;
}
.opt-group__value { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.06em; }
.opt-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.opt {
  min-width: 44px; min-height: 44px; padding: 0.5rem 0.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline);
  font-size: 0.75rem; letter-spacing: 0.1em; color: var(--muted);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.opt:hover { border-color: var(--muted-2); color: var(--bone); }
.opt[aria-pressed="true"] { background: var(--bone); color: var(--obsidian); border-color: var(--bone); }

.opt--colour { gap: 0.5rem; }
.opt--colour .swatch { width: 12px; height: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.9rem 2rem; width: 100%;
  background: var(--bone); color: var(--obsidian);
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--bone);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover { background: transparent; color: var(--bone); }
.btn--ghost { background: transparent; color: var(--bone); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--bone); background: transparent; color: var(--bone); }
.btn--inline { width: auto; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--bone); color: var(--obsidian); }

.pdp__actions { margin-top: 2rem; display: grid; gap: 0.75rem; }

/* accordion */
.acc { border-top: 1px solid var(--hairline); margin-top: 2.5rem; }
.acc__item { border-bottom: 1px solid var(--hairline); }
.acc__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 0; min-height: 44px; text-align: left;
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.acc__icon { transition: transform 0.35s var(--ease); color: var(--chrome); }
.acc__btn[aria-expanded="true"] .acc__icon { transform: rotate(45deg); }
.acc__panel { padding-bottom: 1.25rem; color: var(--muted); font-size: 0.875rem; }
.acc__panel[hidden] { display: none; }
.acc__panel li { padding-left: 1rem; position: relative; margin-bottom: 0.4rem; }
.acc__panel li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 5px; height: 1px; background: var(--chrome);
}

/* ---------- lookbook ---------- */
.lookstrip {
  display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.lookstrip::-webkit-scrollbar { height: 2px; }
.lookstrip::-webkit-scrollbar-thumb { background: var(--hairline); }
.lookstrip figure {
  margin: 0; flex: 0 0 72%; scroll-snap-align: start; background: #0d0d0d;
  overflow: hidden; aspect-ratio: 832 / 1216;
}
/* Same bug as .split__media (see comment there): no rule constrained the
   <img> at all, so it fell through to the browser's absolute defaults --
   object-fit's own initial value is `fill` (stretches to the box, the one
   thing explicitly never wanted here), and the box itself was pinned to
   the raw HTML height ATTRIBUTE (818px) regardless of the ~250-350px width
   this flex item actually renders at. Worst of the three found in this
   audit: no override existed at all, not even a wrong one. */
.lookstrip figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (min-width: 760px) { .lookstrip figure { flex-basis: 34%; } }
@media (min-width: 1280px) { .lookstrip figure { flex-basis: 24%; } }
.lookstrip figcaption, .look-cap {
  padding-top: 0.7rem; font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-2);
}

.look-full { margin-bottom: clamp(2rem, 6vw, 5rem); background: #0d0d0d; overflow: hidden; }
/* Lookbook is a deliberately varied editorial sequence (wide landscape
   heroes, tall portrait looks, square macro details) -- unlike the PDP
   gallery it should NOT be forced into one uniform crop. Each frame keeps
   its own true shape via a per-shape aspect-ratio class; object-fit: cover
   is still the safety net so a source that's slightly off from its
   documented dimensions crops instead of stretching. */
.look-full img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 82vh; }
.look-full--hero { aspect-ratio: 1536 / 864; }
.look-full--portrait { aspect-ratio: 832 / 1216; }
.look-full--square { aspect-ratio: 1 / 1; }

/* ---------- forms ---------- */
.form { display: grid; gap: 1.25rem; max-width: 640px; }
.form[hidden] { display: none; }
.form--wide { max-width: 100%; }
.field { display: grid; gap: 0.5rem; }
.field label {
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chrome);
}
.field .req { color: var(--muted-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.85rem 1rem; min-height: 48px;
  background: transparent; color: var(--bone);
  border: 1px solid var(--hairline);
  font-family: var(--grotesk); font-size: 0.9375rem;
  border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: border-color 0.25s var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--chrome) 50%),
                    linear-gradient(135deg, var(--chrome) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field select option { background: var(--obsidian); color: var(--bone); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--muted-2); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--oxblood); }
.field__error { font-size: 0.75rem; color: #d4677a; }
.field__error:empty { display: none; }

.form-row { display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form-note {
  font-size: 0.8125rem; color: var(--muted-2); line-height: 1.6;
  border-left: 1px solid var(--hairline); padding-left: 1rem;
}

.form-result {
  border: 1px solid var(--hairline); padding: 1.5rem;
  display: grid; gap: 1rem;
}
.form-result[hidden] { display: none; }
.form-result__title {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.2;
}
.form-result pre {
  margin: 0; padding: 1rem; background: rgba(242, 238, 232, 0.04);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem; line-height: 1.7; color: var(--muted);
  white-space: pre-wrap; word-break: break-word;
}
.form-result__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- cart ---------- */
.cart-line {
  display: grid; grid-template-columns: 84px 1fr; gap: 1rem;
  padding-block: 1.5rem; border-bottom: 1px solid var(--hairline);
  align-items: start;
}
@media (min-width: 760px) {
  .cart-line { grid-template-columns: 110px 1fr auto; gap: 1.75rem; align-items: center; }
}
.cart-line__media { background: #0d0d0d; aspect-ratio: 832/1216; overflow: hidden; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-size: 0.875rem; letter-spacing: 0.07em; text-transform: uppercase; }
.cart-line__opts { font-size: 0.75rem; color: var(--muted-2); padding-top: 0.35rem; }
.cart-line__controls { display: flex; align-items: center; gap: 1.25rem; padding-top: 0.85rem; }
@media (min-width: 760px) { .cart-line__controls { padding-top: 0; } }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--hairline); }
.qty button {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); transition: color 0.25s var(--ease);
}
.qty button:hover:not([disabled]) { color: var(--bone); }
.qty button[disabled] { opacity: 0.3; cursor: not-allowed; }
.qty__val { min-width: 34px; text-align: center; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.link-quiet {
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-2); border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.link-quiet:hover, .link-quiet:focus-visible { color: var(--bone); border-bottom-color: var(--hairline); }
.cart-line__price { font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cart-summary { margin-top: 2.5rem; display: grid; gap: 1.5rem; max-width: 480px; margin-left: auto; }
.cart-summary[hidden] { display: none; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; }
.cart-total__val { font-family: var(--serif); font-size: 1.75rem; font-variant-numeric: tabular-nums; }

/* Pre-existing bug, found while proofing the V7 34-product collection page:
   `display: grid` on the class applies even when the element also carries
   the `hidden` attribute (an author rule always wins over the UA default
   [hidden] behavior), so the empty-state text was rendering at the bottom
   of the grid on every load, not only when a filter genuinely matched zero
   products. Explicit [hidden] override, matching the existing
   .acc__panel[hidden] / .form-result[hidden] pattern elsewhere in this file. */
.empty-state { padding-block: clamp(3rem, 8vw, 6rem); text-align: center; display: grid; gap: 1.5rem; justify-items: center; }
.empty-state[hidden] { display: none; }

/* ---------- founder / house ---------- */
.portrait-plate {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hairline);
  display: grid; place-content: center; gap: 1rem; text-align: center;
  padding: 2rem;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(242, 238, 232, 0.02) 0px,
      rgba(242, 238, 232, 0.02) 1px,
      transparent 1px,
      transparent 11px
    );
}
.portrait-plate__mark {
  font-family: var(--serif); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1;
  color: var(--bone);
}
.portrait-plate__note {
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2);
  max-width: 24ch; margin-inline: auto; line-height: 1.8;
}

.pullquote {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  line-height: 1.18; letter-spacing: -0.01em;
  max-width: 20ch;
}
.attrib { margin-top: 1.75rem; }
.attrib__name { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; }
.attrib__role { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); padding-top: 0.3rem; }

.credit-row {
  display: grid; gap: 2rem; padding-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--hairline); margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 760px) { .credit-row { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }

.spec-list { display: grid; gap: 0; }
.spec-list > div {
  display: grid; grid-template-columns: 1fr; gap: 0.35rem;
  padding-block: 1.1rem; border-bottom: 1px solid var(--hairline-soft);
}
@media (min-width: 620px) {
  .spec-list > div { grid-template-columns: 200px 1fr; gap: 2rem; }
}
.spec-list dt { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chrome); }
.spec-list dd { margin: 0; color: var(--muted); font-size: 0.9375rem; }

/* ---------- notices ---------- */
.notice {
  border: 1px solid var(--hairline); padding: 1.25rem 1.5rem;
  font-size: 0.8125rem; line-height: 1.7; color: var(--muted);
}
.notice strong { color: var(--bone); font-weight: 500; }
.notice--cobalt { border-color: rgba(34, 76, 255, 0.42); }

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--hairline);
  padding-block: clamp(3rem, 7vw, 5rem) 2.5rem;
  margin-top: clamp(3rem, 8vw, 7rem);
}
.footer__top { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.footer__mark { font-size: 1.125rem; margin-bottom: 1rem; }
.footer h4 {
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--chrome); margin-bottom: 1.1rem;
}
.footer li { margin-bottom: 0.6rem; }
.footer li a { font-size: 0.8125rem; color: var(--muted); transition: color 0.25s var(--ease); }
.footer li a:hover, .footer li a:focus-visible { color: var(--bone); }
.footer__bottom {
  margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-soft);
  display: grid; gap: 0.75rem;
  font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--muted-2); line-height: 1.9;
}
@media (min-width: 900px) {
  .footer__bottom { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---------- breadcrumb ---------- */
.crumb {
  display: flex; gap: 0.6rem; align-items: center;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2);
  padding-top: calc(var(--header-h) + 1.5rem);
}
.crumb a:hover { color: var(--bone); }

.page-head { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.page-head--top { padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem)); }
.page-head__title { font-family: var(--serif); font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 0.98; letter-spacing: -0.015em; }
.page-head .lede { margin-top: 1.5rem; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 12px);
  z-index: 120; background: var(--bone); color: var(--obsidian);
  padding: 0.85rem 1.5rem; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
  max-width: calc(100vw - 2rem); text-align: center;
}
.toast[data-show="true"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

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

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.mt-4 { margin-top: 2.5rem; }
.mt-6 { margin-top: clamp(2.5rem, 6vw, 4.5rem); }