/* MOI Wear · Drop 01 The Paris Edit
   Layout: 12-col grid, 48px outer gutter at desktop; one section rhythm (120/80/56).
   Single committed light look (paper tones of the client's PDF), so no dark variant. */
:root {
  color-scheme: light;
  --pearl: #F3F1EC;      /* page */
  --linen: #ECE7E0;      /* alternate section */
  --dune: #E1DCD1;       /* footer, panels */
  --onyx: #262626;       /* text, buttons */
  --ink-2: rgba(38, 38, 38, .78);
  --ink-3: rgba(38, 38, 38, .56);
  --line: rgba(38, 38, 38, .14);
  --cherry: #7A2430;
  --espresso: #3A2618;
  --on-dark: #F3F1EC;
  --on-dark-2: rgba(243, 241, 236, .74);
  --line-dark: rgba(243, 241, 236, .22);

  --f-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --f-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --gutter: max(16px, min(48px, 4vw));
  --sec: clamp(56px, 8.4vw, 120px);
  --sec-s: clamp(40px, 5.6vw, 80px);
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--pearl); color: var(--onyx);
  font: 400 15px/1.65 var(--f-ui); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--espresso); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 3px; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.7vw, 24px); }

/* ---------- type ---------- */
.label { font: 500 11px/1.4 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; }
.label .dash { opacity: .5; margin: 0 .7em; }
.d { font-family: var(--f-display); font-weight: 300; line-height: .98; letter-spacing: -.01em; text-wrap: balance; }
.d em, .i { font-style: italic; font-weight: 400; }
.d-xxl { font-size: clamp(56px, 9vw, 136px); }
.d-xl { font-size: clamp(46px, 5.6vw, 84px); }
.d-l { font-size: clamp(34px, 3.6vw, 52px); }
.d-m { font-size: clamp(26px, 2.2vw, 32px); }
.lede { font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 40ch; }
.small { font-size: 12px; color: var(--ink-3); }
.price { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .9em;
  height: 50px; padding: 0 30px; font: 500 11px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase;
  background: var(--onyx); color: var(--pearl); border: 1px solid var(--onyx); transition: background .25s, color .25s, opacity .2s;
}
.btn:hover { background: transparent; color: var(--onyx); }
.btn .sep { opacity: .55; }
.btn--cherry { background: var(--cherry); border-color: var(--cherry); }
.btn--cherry:hover { color: var(--cherry); }
.btn--light { background: var(--pearl); color: var(--onyx); border-color: var(--pearl); }
.btn--light:hover { background: transparent; color: var(--pearl); }
.btn--ghost { background: transparent; color: var(--onyx); }
.btn--ghost:hover { background: var(--onyx); color: var(--pearl); }
.btn--block { width: 100%; height: 56px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--onyx); color: var(--pearl); }
.link { font: 500 11px/1.4 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: opacity .2s; }
.link:hover { opacity: .6; }

/* ---------- announcement + header ---------- */
.announce { background: var(--espresso); color: var(--on-dark); text-align: center; font: 500 10.5px/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; padding-block: 12px; }
.announce a { border-bottom: 1px solid var(--line-dark); padding-bottom: 2px; }
.announce .dot { opacity: .5; margin: 0 1.1em; }
#top { display: contents; }  /* let the sticky header stick to the page, not its wrapper */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--pearl); border-bottom: 1px solid var(--line); }
.site-header .bar { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-header nav { display: flex; gap: 30px; }
.site-header nav a, .site-header .tools a, .site-header .tools button { font: 500 10.5px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; padding-block: 8px; position: relative; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.site-header nav a:hover::after, .site-header nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header .tools { display: flex; gap: 28px; justify-content: flex-end; }
.brand { display: block; color: var(--onyx); }
.brand svg { width: 62px; height: auto; display: block; fill: currentColor; }
.menu-btn { display: none; }
.bag-count { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .site-header nav, .site-header .tools .hide-m { display: none; }
  .menu-btn { display: inline-flex; font: 500 10.5px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; }
  .site-header .tools { gap: 18px; }
  :root { --header-h: 60px; }
  .brand svg { width: 52px; }
  .announce .hide-m { display: none; }
}

/* ---------- drawers (bag + menu) ---------- */
.scrim { position: fixed; inset: 0; background: rgba(38, 38, 38, .38); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; bottom: 0; right: 0; width: min(440px, 100%); background: var(--pearl); z-index: 90; transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.7,.2,1); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px); }
.drawer.left { right: auto; left: 0; transform: translateX(-100%); padding-right: 0; padding-left: env(safe-area-inset-left, 0px); }
.drawer.on { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 28px; }
.drawer-foot { padding: 20px 28px 28px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.ship-meter { display: grid; gap: 8px; font-size: 12px; color: var(--ink-2); }
.ship-meter .track { height: 2px; background: var(--line); }
.ship-meter .fill { height: 100%; background: var(--onyx); transition: width .4s; }
.line-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.line-item img { width: 76px; aspect-ratio: 3/4; object-fit: cover; }
.line-item .nm { font-family: var(--f-display); font-size: 21px; line-height: 1.1; }
.line-item .meta { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.line-item .rm { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 10px; text-decoration: underline; text-underline-offset: 3px; }
.bag-empty { padding-block: 48px; text-align: center; color: var(--ink-2); display: grid; gap: 18px; justify-items: center; }
.subtotal { display: flex; justify-content: space-between; font-weight: 500; }
.menu-list { display: grid; gap: 4px; padding-block: 20px; }
.menu-list a { font-family: var(--f-display); font-size: 34px; line-height: 1.25; }
.menu-list a em { font-style: italic; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--onyx); color: var(--pearl); padding: 14px 22px; font: 500 11px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; z-index: 100; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- prototype page switcher ---------- */
.proto { position: fixed; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; background: var(--onyx); color: var(--pearl); font: 500 10px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 6px 24px rgba(38, 38, 38, .22); }
.proto span { padding: 11px 12px; opacity: .55; border-right: 1px solid rgba(243, 241, 236, .18); }
.proto a { padding: 11px 12px; opacity: .7; }
.proto a:hover, .proto a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .proto { display: none; } }

/* ---------- photos ---------- */
.ph { position: relative; overflow: hidden; background: var(--dune); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-45 { aspect-ratio: 4/5; }
.ph-34 { aspect-ratio: 3/4; }
.ph-23 { aspect-ratio: 2/3; }
.cap { position: absolute; left: 16px; bottom: 16px; background: var(--pearl); color: var(--onyx); padding: 9px 12px; font: 500 10px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; }
a.ph img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
a.ph:hover img { transform: scale(1.025); }

/* ================= HOME ================= */
.hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: clamp(560px, 86vh, 920px); background: var(--onyx); }
.hero a.ph { height: 100%; }
.hero a.ph img { object-position: 50% 30%; }
.hero .chip { position: absolute; top: 20px; background: var(--pearl); padding: 10px 14px; font: 500 10px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; display: inline-flex; gap: .8em; transition: background .25s, color .25s; z-index: 2; }
.hero .chip:hover { background: var(--onyx); color: var(--pearl); }
.hero .chip.l { left: var(--gutter); } .hero .chip.r { right: var(--gutter); }
.hero-title { position: absolute; inset: auto 0 0; z-index: 1; text-align: center; color: var(--on-dark); padding-block: 160px 56px; background: linear-gradient(to top, rgba(26, 18, 12, .62), rgba(26, 18, 12, 0)); pointer-events: none; display: grid; justify-items: center; gap: 18px; }
.hero-title .btn { pointer-events: auto; margin-top: 10px; }
@media (max-width: 700px) {
  .hero { grid-template-columns: 1fr 1fr; height: 78vh; min-height: 520px; }
  .hero .chip { top: 12px; padding: 8px 10px; font-size: 9px; }
  .hero .chip .p { display: none; }
  .hero-title { padding-block: 120px 36px; }
}

.intro { text-align: center; display: grid; justify-items: center; gap: 22px; padding-block: var(--sec-s); }
.intro .lede { text-align: center; max-width: 46ch; }
.set-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin-top: 6px; }
.set-index a { font-family: var(--f-display); font-style: italic; font-size: clamp(22px, 2.2vw, 30px); padding: 4px 22px; position: relative; display: inline-flex; align-items: baseline; gap: 10px; }
.set-index a + a::before { content: "·"; position: absolute; left: -3px; opacity: .35; font-style: normal; }
.set-index a .p { font: 500 10.5px/1 var(--f-ui); letter-spacing: .14em; color: var(--ink-3); font-style: normal; }
.set-index a:hover { color: var(--cherry); }

/* chapter = one set */
.chapter { padding-block: var(--sec); scroll-margin-top: var(--header-h); }
.chapter.alt { background: var(--linen); }
.chapter.dark { background: var(--espresso); color: var(--on-dark); }
.chapter.dark .lede, .chapter.dark .pieces li { color: var(--on-dark-2); }
.chapter.dark .pieces, .chapter.dark .pieces li { border-color: var(--line-dark); }
.chapter.dark .label .num { color: var(--on-dark-2); }
.ch-text { display: grid; gap: 22px; align-content: start; }
.ch-text .label .num { color: var(--ink-3); }
.ch-text .label .nm { color: var(--accent, var(--onyx)); }
.chapter.dark .ch-text .label .nm { color: var(--on-dark); }
.pieces { border-top: 1px solid var(--line); max-width: 380px; }
.pieces li { display: flex; justify-content: space-between; gap: 16px; padding-block: 11px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.pieces li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 4px; }
.badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid currentColor; padding: 7px 10px; font: 500 10px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; width: max-content; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* split: main photo 6 cols, text + detail in the other 6 */
.split .main { grid-column: 1 / span 6; align-self: start; }
.chapter .d-xl { font-size: clamp(44px, 4.6vw, 68px); }
.split .side { grid-column: 8 / span 5; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.split .side .detail { width: 58%; align-self: flex-end; }
.split.flip .main { grid-column: 7 / span 6; grid-row: 1; }
.split.flip .side { grid-column: 1 / span 5; grid-row: 1; }
.split.flip .side .detail { align-self: flex-start; }
.split .ch-text { padding-top: clamp(0px, 4vw, 56px); }

/* triptych: header row, then three staggered photos */
.trip-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.7vw, 24px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); row-gap: 24px; }
.trip-head .t { grid-column: 1 / span 6; display: grid; gap: 18px; }
.trip-head .r { grid-column: 8 / span 5; display: grid; gap: 22px; }
.trip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); align-items: start; }
.trip > :nth-child(2) { margin-top: clamp(32px, 5vw, 72px); }
.trip > :nth-child(3) { margin-top: clamp(12px, 2vw, 28px); }

/* Seine: text column + two full-length photos */
.seine .side { grid-column: 1 / span 4; display: grid; gap: 22px; align-content: center; }
.seine .p1 { grid-column: 5 / span 4; }
.seine .p2 { grid-column: 9 / span 4; margin-top: clamp(40px, 7vw, 120px); }

.quote { padding-block: var(--sec); text-align: center; display: grid; justify-items: center; gap: 26px; }
.quote p { font-family: var(--f-display); font-weight: 300; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.12; max-width: 30ch; text-wrap: balance; }
.quote em { font-style: italic; }
.mood-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mood-chips a { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); padding: 10px 16px 10px 12px; font-size: 12px; transition: border-color .2s; }
.mood-chips a:hover { border-color: var(--onyx); }
.sw { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(38, 38, 38, .18); display: inline-block; flex: none; }

/* shop the drop strip */
.drop { padding-block: var(--sec); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(28px, 3.4vw, 48px); flex-wrap: wrap; }
.sec-head > div { display: grid; gap: 14px; }
.cards5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }

/* product card */
.card { display: grid; gap: 14px; align-content: start; position: relative; }
.card .ph { aspect-ratio: 3/4; }
.card .ph img { position: absolute; inset: 0; object-position: var(--pos, 50% 40%); transform: scale(var(--zoom, 1)); transform-origin: var(--pos, 50% 40%); transition: opacity .45s, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.card .ph img.alt { opacity: 0; object-position: var(--pos2, 50% 40%); transform: scale(var(--zoom2, 1)); transform-origin: var(--pos2, 50% 40%); }
@media (hover: hover) { .card:hover .ph img.alt { opacity: 1; } }
.card .tag { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--pearl); padding: 7px 9px; font: 500 9.5px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; }
.card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card .nm { font-family: var(--f-display); font-size: 22px; line-height: 1.1; }
.card .nm em { font-style: italic; }
.card .sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.card .pr { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card .dots { display: flex; gap: 6px; margin-top: 8px; }
.card .dots .sw { width: 11px; height: 11px; }
.qa { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; background: var(--pearl); padding: 12px; display: grid; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.qa .label { font-size: 9.5px; }
.qa .sizes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.qa .sizes button { height: 32px; border: 1px solid var(--line); font-size: 11px; transition: background .2s, color .2s; }
.qa .sizes button:hover { background: var(--onyx); color: var(--pearl); border-color: var(--onyx); }
@media (hover: hover) { .card:hover .qa, .card:focus-within .qa { opacity: 1; transform: none; } }

/* club */
.club { background: var(--espresso); color: var(--on-dark); display: grid; grid-template-columns: 1fr 1fr; scroll-margin-top: var(--header-h); }
.club .txt { padding-block: var(--sec); display: grid; gap: 24px; align-content: center; max-width: 560px; }
.club .lede { color: var(--on-dark-2); }
.club .ph { min-height: 560px; }
.club .ph img { object-position: 50% 35%; }
.perks { display: grid; gap: 0; border-top: 1px solid var(--line-dark); }
.perks li { display: grid; grid-template-columns: 28px 1fr; padding-block: 12px; border-bottom: 1px solid var(--line-dark); font-size: 13px; color: var(--on-dark-2); }
.perks li span { font-family: var(--f-display); font-style: italic; color: var(--on-dark); font-size: 17px; line-height: 1.2; }
.field { display: grid; gap: 10px; }
.field .row { display: flex; border-bottom: 1px solid var(--on-dark); }
.field input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--on-dark); font: 400 15px/1 var(--f-ui); padding: 14px 0; outline: none; }
.field input::placeholder { color: rgba(243, 241, 236, .45); }
.field button { font: 500 11px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; padding-left: 16px; }
.field .msg { font-size: 12px; color: var(--on-dark-2); min-height: 18px; }
.club .done { font-family: var(--f-display); font-size: 28px; font-style: italic; }

/* footer */
.site-footer { background: var(--dune); padding-block: clamp(48px, 6vw, 80px) 28px; }
.site-footer .top { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: 48px; }
.site-footer .brand svg { width: 120px; }
.site-footer .tagline { font-family: var(--f-display); font-style: italic; font-size: 21px; margin-top: 16px; }
.site-footer h4 { font: 600 10.5px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer li { font-size: 13px; color: var(--ink-2); padding-block: 4px; }
.site-footer li a:hover { color: var(--onyx); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .bottom { border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 500 10px/1.4 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.site-footer .bottom div { display: flex; gap: 22px; }

@media (max-width: 900px) {
  .split .main, .split.flip .main { grid-column: 1 / -1; grid-row: auto; }
  .split .side, .split.flip .side { grid-column: 1 / -1; grid-row: auto; margin-top: 32px; }
  .split .side .detail { display: none; }
  .split .ch-text { padding-top: 0; }
  .trip-head .t, .trip-head .r { grid-column: 1 / -1; }
  .trip { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .trip > * { scroll-snap-align: start; margin-top: 0 !important; }
  .seine .side { grid-column: 1 / -1; margin-bottom: 32px; }
  .seine .p1 { grid-column: 1 / span 6; } .seine .p2 { grid-column: 7 / span 6; margin-top: 40px; }
  .cards5 { grid-template-columns: repeat(5, 62%); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .cards5 > * { scroll-snap-align: start; }
  .club { grid-template-columns: 1fr; }
  .club .ph { min-height: 0; aspect-ratio: 4/5; order: -1; }
  .site-footer .top { grid-template-columns: 1fr 1fr; }
  .site-footer .top > :first-child { grid-column: 1 / -1; }
}

/* ================= COLLECTION ================= */
.crumbs { display: flex; gap: 10px; font: 500 10px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); padding-block: 22px 0; flex-wrap: wrap; }
.crumbs a:hover { color: var(--onyx); }
.coll-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: end; padding-block: clamp(28px, 4vw, 56px) clamp(28px, 3vw, 44px); }
.coll-head .t { grid-column: 1 / span 7; display: grid; gap: 16px; }
.coll-head .r { grid-column: 9 / span 4; display: grid; gap: 14px; }
.filters { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h)); z-index: 30; background: var(--pearl); border-bottom: 1px solid var(--line); }
.filters .in { display: flex; align-items: center; gap: 28px; min-height: 58px; flex-wrap: wrap; padding-block: 8px; }
.tabs { display: flex; gap: 22px; }
.tabs button { font: 500 10.5px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; padding-block: 8px; color: var(--ink-3); border-bottom: 1px solid transparent; }
.tabs button[aria-pressed="true"] { color: var(--onyx); border-color: var(--onyx); }
.tabs button .n { font-variant-numeric: tabular-nums; opacity: .6; margin-left: 4px; letter-spacing: 0; }
.colours { display: flex; gap: 6px; align-items: center; }
.colours button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 7px; border: 1px solid transparent; font-size: 12px; color: var(--ink-2); }
.colours button[aria-pressed="true"] { border-color: var(--onyx); color: var(--onyx); }
.filters .spacer { flex: 1; }
.filters select { font: 500 10.5px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; background: transparent; border: 0; color: var(--onyx); padding: 8px 4px; cursor: pointer; }
.density { display: flex; gap: 4px; }
.density button { width: 30px; height: 30px; display: grid; place-items: center; opacity: .4; }
.density button[aria-pressed="true"] { opacity: 1; }
.density i { display: grid; gap: 2px; }
.density i b { display: block; height: 10px; background: var(--onyx); }
.count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pgrid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 44px clamp(8px, 1vw, 14px); padding-block: 28px var(--sec); }
.ed-tile { background: var(--cherry); color: var(--on-dark); display: grid; align-content: space-between; padding: clamp(20px, 2vw, 32px); aspect-ratio: 3/4; position: relative; overflow: hidden; }
.ed-tile p { font-family: var(--f-display); font-weight: 300; font-size: clamp(24px, 2vw, 32px); line-height: 1.12; text-wrap: balance; }
.ed-tile p em { font-style: italic; }
.empty { grid-column: 1 / -1; text-align: center; padding-block: 80px; display: grid; gap: 16px; justify-items: center; color: var(--ink-2); }
.club-strip { background: var(--espresso); color: var(--on-dark); padding-block: var(--sec-s); }
.club-strip .in { display: flex; justify-content: space-between; align-items: center; gap: 24px 48px; flex-wrap: wrap; }
.club-strip .lede { color: var(--on-dark-2); }
@media (max-width: 1100px) { .pgrid { --cols: 3 !important; } .density { display: none; } }
@media (max-width: 900px) {
  .coll-head .t, .coll-head .r { grid-column: 1 / -1; }
  .filters .in { gap: 10px 18px; }
  .colours { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .colours button { flex: none; }
}
@media (max-width: 700px) { .pgrid { --cols: 2 !important; gap: 32px 8px; } .card .nm { font-size: 19px; } .ed-tile { grid-column: span 2; aspect-ratio: auto; min-height: 240px; } }
/* ================= PDP ================= */
.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); padding-block: 20px var(--sec-s); }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gallery button { display: block; position: relative; overflow: hidden; background: var(--dune); aspect-ratio: 3/4; cursor: zoom-in; }
.gallery button:first-child { grid-column: 1 / -1; aspect-ratio: 4/5; }
.gallery img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.gallery-dots { display: none; }
.buy { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 28px); display: grid; gap: 26px; padding-top: 12px; }
.buy .head { display: grid; gap: 14px; }
.buy .pr-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.buy .pr-row .pr { font-size: 18px; font-variant-numeric: tabular-nums; }
.buy .pr-row .was { font-size: 12px; color: var(--ink-3); }
.members { display: flex; gap: 12px; align-items: flex-start; background: var(--linen); padding: 14px 16px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.members b { color: var(--onyx); font-weight: 500; }
.opt { display: grid; gap: 12px; }
.opt .opt-h { display: flex; justify-content: space-between; align-items: baseline; }
.opt .opt-h .v { font-size: 13px; color: var(--ink-2); margin-left: 8px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.opt .opt-h button { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatches a { width: 58px; display: grid; gap: 6px; font-size: 11px; color: var(--ink-3); text-align: center; }
.swatches a .ph { aspect-ratio: 3/4; outline: 1px solid transparent; outline-offset: 3px; }
.swatches a[aria-current="true"] .ph { outline-color: var(--onyx); }
.swatches a[aria-current="true"] { color: var(--onyx); }
.piece { border: 1px solid var(--line); padding: 16px; display: grid; gap: 12px; transition: opacity .2s; }
.piece.off { opacity: .5; }
.piece .ph-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.piece .nm { font-family: var(--f-display); font-size: 21px; line-height: 1.1; }
.piece .pr { font-size: 13px; font-variant-numeric: tabular-nums; }
.piece label.inc { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.piece input[type="checkbox"] { accent-color: var(--onyx); width: 15px; height: 15px; margin: 0; }
.sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sizes button { height: 42px; border: 1px solid var(--line); font-size: 12px; font-variant-numeric: tabular-nums; transition: border-color .2s, background .2s, color .2s; }
.sizes button:hover:not([disabled]) { border-color: var(--onyx); }
.sizes button[aria-pressed="true"] { background: var(--onyx); color: var(--pearl); border-color: var(--onyx); }
.sizes button[disabled] { color: var(--ink-3); text-decoration: line-through; cursor: not-allowed; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(38, 38, 38, .04) 6px 7px); }
.fitnote { font-size: 12px; color: var(--ink-3); }
.atc-row { display: grid; grid-template-columns: 1fr 56px; gap: 8px; }
.wish { border: 1px solid var(--line); display: grid; place-items: center; height: 56px; transition: border-color .2s; }
.wish:hover { border-color: var(--onyx); }
.wish svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.wish[aria-pressed="true"] svg { fill: var(--cherry); stroke: var(--cherry); }
.service { background: var(--dune); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service div { padding: 16px 14px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.service div + div { border-left: 1px solid var(--line); }
.service b { display: block; font-weight: 500; color: var(--onyx); margin-bottom: 3px; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding-block: 18px; font: 500 11px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font: 300 20px/1 var(--f-ui); transition: transform .25s; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc .body { padding-bottom: 20px; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 10px; max-width: 54ch; }
.acc .body ul { display: grid; gap: 4px; }
.acc .body li::before { content: "—"; margin-right: 10px; opacity: .5; }
.place { position: relative; height: clamp(420px, 56vw, 820px); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.place .ph { height: 100%; }
.place img { object-position: 50% 35%; }
.place .txt { position: absolute; inset: auto 0 0; padding-block: 120px 44px; background: linear-gradient(to top, rgba(26, 18, 12, .6), rgba(26, 18, 12, 0)); color: var(--on-dark); display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.sticky-atc { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 120; background: var(--pearl); display: none; }
.lightbox.on { display: grid; }
.lightbox .stage { overflow-y: auto; display: grid; justify-items: center; gap: 8px; padding-block: 64px; }
.lightbox .stage img { width: min(1100px, 100%); height: auto; }
.lightbox .x { position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(20px + env(safe-area-inset-right, 0px)); font: 500 11px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; background: var(--pearl); padding: 12px 14px; border: 1px solid var(--line); }
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; padding-top: 0; }
  .pdp > .gal-wrap { margin-inline: calc(-1 * var(--gutter)); }
  .gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none; }
  .gallery button, .gallery button:first-child { flex: 0 0 100%; aspect-ratio: 4/5; scroll-snap-align: start; }
  .gallery-dots { display: flex; gap: 6px; justify-content: center; padding-top: 12px; }
  .gallery-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .2s; }
  .gallery-dots i.on { background: var(--onyx); }
  .buy { position: static; }
  .cards4 { grid-template-columns: repeat(4, 66%); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .cards4 > * { scroll-snap-align: start; }
  .sticky-atc { display: flex; position: fixed; inset: auto 0 0; z-index: 45; background: var(--pearl); border-top: 1px solid var(--line); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); gap: 12px; align-items: center; transform: translateY(100%); transition: transform .3s; }
  .sticky-atc.on { transform: none; }
  .sticky-atc .nm { font-family: var(--f-display); font-size: 19px; line-height: 1.1; flex: 1; min-width: 0; }
  .sticky-atc .btn { height: 46px; padding: 0 18px; }
}
@media (max-width: 480px) { .service { grid-template-columns: 1fr; } .service div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* ================= NOTES ================= */
.notes-hero { padding-block: var(--sec-s); display: grid; gap: 20px; max-width: 900px; }
.fix { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); padding-block: 36px; border-top: 1px solid var(--line); align-items: start; }
.fix .thumb { display: grid; gap: 8px; }
.fix .thumb img { width: 100%; border: 1px solid var(--line); }
.fix h3 { font-family: var(--f-display); font-weight: 400; font-size: 28px; line-height: 1.1; margin-bottom: 10px; }
.fix .was, .fix .now { font-size: 14px; color: var(--ink-2); display: grid; gap: 8px; }
.fix .now { color: var(--onyx); }
.fix .now a { text-decoration: underline; text-underline-offset: 3px; }
.open-items { background: var(--linen); padding-block: var(--sec-s); margin-top: var(--sec-s); }
.open-items ol { display: grid; gap: 14px; padding-left: 20px; max-width: 760px; font-size: 14px; color: var(--ink-2); }
.open-items ol b { color: var(--onyx); font-weight: 500; }
@media (max-width: 800px) { .fix { grid-template-columns: 1fr; } .fix .thumb { max-width: 180px; } }