/* VELNOR7 store. Warm monochrome, editorial, phone first, light and dark.

   Palette: bone canvas, white surfaces, charcoal text. Colour is scarce and always means something:
   pale green / yellow / red tags for New, Low stock and Sold out, and one gold (the logo gold) for focus rings and
   the selected payment option, and one red while a seasonal sale is on. Nothing else is coloured.
   Type: two families only. Playfair Display for headings (the wordmark's face), Geist for everything else; prices, counts and
   small labels are Geist with tabular figures, so numbers still line up. A plain system monospace is used only for the order text.
   Shape: buttons 6px, cards and panels 12px, inputs 8px, tags 4px. No pills, no drop shadows heavier than 0.05 alpha.
   Borders: 1px --line for dividers and cards; controls (inputs, sizes, chips) use --line-strong so their edge keeps 3:1.
   Motion: the winter rack, its snow, the headline words and the Watch and shop drift are the store's life; every one
   is switched off by prefers-reduced-motion. Garments themselves never move, bend or warp: they only fade in and turn on the rack.
   Layers: header 30, scrim 60, drawers and sheets 70, toast 90, skip link 100. */

@font-face { font-family: "Geist"; src: url("/fonts/geist-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/fonts/playfair-display-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --well: #efede8;
  --stage-a: #fbfaf7;
  --stage-b: #e8e5de;
  --ink: #111111;
  --ink-2: #2f3437;
  --muted: #6b6a66;
  --line: #eaeaea;
  --line-strong: #8c8a85;
  --accent: #7d6641;
  --danger: #9f2f2d;
  --on-ink: #ffffff;
  --tag-new-bg: #edf3ec; --tag-new: #346538;
  --tag-low-bg: #fbf3db; --tag-low: #956400;
  --tag-out-bg: #fdebec; --tag-out: #9f2f2d;
  --scrim: rgba(17, 17, 17, 0.4);
  --shadow: 0 8px 30px rgba(17, 17, 17, 0.05);
  /* Behind every product photo. --photo-stage forces it on the gallery and zoom too in the light theme; the dark theme
     sets it to initial so those fall back to each piece's own studio backdrop. */
  --photo: #ffffff;
  --photo-stage: #ffffff;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Geist", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --code: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* only for the order text a shopper copies */
  --r-btn: 6px;
  --r-card: 12px;
  --r-input: 8px;
  --r-tag: 4px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 64px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121110; --surface: #1a1917; --well: #22201d; --stage-a: #2e2c28; --stage-b: #1b1a17; --ink: #f2f0eb; --ink-2: #d8d5ce; --muted: #a19e97;
    --line: #2c2a27; --line-strong: #77746e; --accent: #c9a873; --danger: #f0938b; --on-ink: #121110;
    --tag-new-bg: #1d2a1e; --tag-new: #9bcb9e; --tag-low-bg: #33290f; --tag-low: #e0b65f; --tag-out-bg: #3a1e1e; --tag-out: #f0938b;
    --scrim: rgba(0, 0, 0, 0.6); --shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    --photo: #22201d; --photo-stage: initial;
  }
}
:root[data-theme="dark"] {
  --bg: #121110; --surface: #1a1917; --well: #22201d; --stage-a: #2e2c28; --stage-b: #1b1a17; --ink: #f2f0eb; --ink-2: #d8d5ce; --muted: #a19e97;
  --line: #2c2a27; --line-strong: #77746e; --accent: #c9a873; --danger: #f0938b; --on-ink: #121110;
  --tag-new-bg: #1d2a1e; --tag-new: #9bcb9e; --tag-low-bg: #33290f; --tag-low: #e0b65f; --tag-out-bg: #3a1e1e; --tag-out: #f0938b;
  --scrim: rgba(0, 0, 0, 0.6); --shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  --photo: #22201d; --photo-stage: initial;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.ph { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.ph svg { width: 1em; height: 1em; flex: none; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink-2);
  font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--display); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main:focus { outline: none; }
/* Before the app has drawn the page, <main> holds the plain-HTML copy that search engines read. Keep it out of sight and
   keep the page its full height, so nothing flashes and the footer is not pushed down when the real page appears.
   The app removes data-ssr as soon as it draws; if it ever failed to, the copy appears after 3 seconds. */
main[data-ssr] { visibility: hidden; min-height: 100svh; animation: ssr-show 0s 3s forwards; }
@keyframes ssr-show { to { visibility: visible; } }
/* The home page is the exception: its hero is real HTML and shows at once, so the headline paints with the first screen.
   .rack--ssr holds the space the turning rack will fill, and .seo-copy (categories, pieces, guides) stays unseen. */
main[data-ssr="hero"] { visibility: visible; min-height: 0; animation: none; }
.seo-copy { visibility: hidden; height: 0; overflow: hidden; }
.rack--ssr { min-height: calc(min(44svh, 420px) + 52px); }
@media (min-width: 900px) { .rack--ssr { min-height: calc(min(64vh, 610px) + 52px); } }
.noscript { padding: 24px var(--gutter); text-align: center; }

.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 680px; }
.muted { color: var(--muted); }
.small { font-size: 0.86rem; }
.center { text-align: center; }
.mono { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: fixed; left: var(--gutter); top: 12px; z-index: 100; padding: 12px 18px; border-radius: var(--r-btn);
  background: var(--ink); color: var(--on-ink); text-decoration: none; transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }
.eyebrow { font: 500 0.72rem/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.label { font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.price { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 0.92rem; font-weight: 500; color: var(--ink); }

/* ---------- buttons, chips, tags, links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border: 1px solid transparent; border-radius: var(--r-btn); font-weight: 500; font-size: 0.94rem; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.2s var(--ease), background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 80%, var(--bg)); }
.btn--quiet { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--quiet:hover:not(:disabled) { border-color: var(--ink); }
.btn--block { width: 100%; }
.btn--small { min-height: 40px; padding: 0 16px; font-size: 0.88rem; }
.btn--large { min-height: 56px; font-size: 1rem; }

.icon-btn {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-btn); background: transparent; color: var(--ink); font-size: 1.35rem;
  text-decoration: none; transition: background-color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.icon-btn:active { transform: scale(0.96); }
.icon-btn--solid { background: var(--surface); border-color: var(--line); }
.icon-btn--outline { width: 48px; height: 48px; border-color: var(--line-strong); }
.icon-btn[aria-pressed="true"] { color: var(--accent); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }

.link {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 0.92rem;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
}
.link:hover { text-decoration-color: currentColor; }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips--wrap { flex-wrap: wrap; overflow: visible; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong);
  border-radius: var(--r-btn); background: transparent; color: var(--ink); font-size: 0.9rem; text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover { border-color: var(--ink); }
.chip:active { transform: scale(0.98); }
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip--remove .ph { font-size: 0.95rem; }
.swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.25); }

.tag {
  display: inline-block; padding: 3px 8px; border-radius: var(--r-tag); font: 500 0.66rem/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
}
.tag--new { background: var(--tag-new-bg); color: var(--tag-new); }
.tag--low { background: var(--tag-low-bg); color: var(--tag-low); }
.tag--out { background: var(--tag-out-bg); color: var(--tag-out); }
/* the season's sale: one solid red, used only for the sale tag, the sale price and the bar above the header */
.tag--sale { background: #9f2f2d; color: #ffffff; font-weight: 600; letter-spacing: 0.02em; }
.price--sale, .pdp__price.price--sale, .line__price.price--sale { color: var(--danger); }
.price__was { color: var(--muted); font-weight: 400; margin-right: 4px; text-decoration-thickness: 1px; white-space: nowrap; }
.price__now { white-space: nowrap; }
.pdp__save { margin-top: 6px; font-size: 0.85rem; color: var(--danger); }
.chip--sale { border-color: var(--danger); color: var(--danger); }
.chip--sale[aria-current="true"] { background: var(--danger); border-color: var(--danger); color: var(--on-ink); }
.salebar {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; padding: 8px var(--gutter);
  background: #9f2f2d; color: #ffffff; font: 500 0.8rem/1.3 var(--sans); text-decoration: none; text-align: center;
}
.salebar strong { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.salebar__left { font-variant-numeric: tabular-nums; opacity: 0.9; }
.salebar__go { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599px) { .salebar__go { display: none; } }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.header__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-h); }
.header__tools { display: flex; justify-content: flex-end; gap: 2px; }
/* very narrow phones (320 px): tighten the logo lettering and the icon buttons so the header fits */
@media (max-width: 359px) {
  .header__in { gap: 0; }
  .wordmark__text { font-size: 0.86rem; letter-spacing: 0.2em; text-indent: 0.2em; }
  .header .icon-btn { width: 38px; height: 38px; }
  .header__tools { gap: 0; }
}
.wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.wordmark__mark { height: 24px; width: auto; flex: none; fill: currentColor; }
.wordmark__text { font-family: var(--display); font-size: 1rem; letter-spacing: 0.32em; text-indent: 0.32em; font-variant-numeric: lining-nums; }
.nav { display: none; }
.bag-count {
  position: absolute; top: 4px; right: 2px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-tag);
  background: var(--ink); color: var(--on-ink); font: 500 0.66rem/1 var(--sans);
}
.bag-btn.is-bumped { animation: bump 0.5s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (min-width: 1040px) {
  .header__in { grid-template-columns: auto 1fr auto; gap: 32px; }
  .header__menu { display: none; }
  .wordmark__text { text-indent: 0; }
  .nav { display: flex; justify-content: center; gap: 24px; }
  .nav a { padding: 8px 0; color: var(--ink-2); font-size: 0.92rem; text-decoration: none; border-bottom: 1px solid transparent; }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
}

/* ---------- page enter and scroll reveal: one quiet fade-up, nothing that loops ---------- */
main.is-entering { animation: enter 0.45s var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.js-motion .reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.6s var(--ease) calc(var(--i, 0) * 80ms), transform 0.6s var(--ease) calc(var(--i, 0) * 80ms);
}
.js-motion .reveal.is-in { opacity: 1; transform: none; }

/* ---------- home ---------- */
/* The winter rack: the one deliberate dark band on the page. A warm night sky with slow snow, so the cream and celadon
   pieces glow. The pieces stand on an invisible turning rack in real depth and always face the shopper; nothing bends,
   warps or turns edge-on. Every section below returns to the light page. */
.hero {
  --night-ink: #f2f0eb; --night-muted: rgba(242, 240, 235, 0.76); --night-line: rgba(242, 240, 235, 0.3);
  position: relative; overflow: hidden; isolation: isolate; color: var(--night-ink);
  background:
    radial-gradient(58% 55% at 72% 44%, rgba(96, 86, 74, 0.55) 0%, rgba(96, 86, 74, 0) 72%),
    linear-gradient(180deg, #0f0e0d 0%, #171513 60%, #1e1c19 100%);
}
.hero__snow { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__in { position: relative; z-index: 1; display: grid; gap: 8px; padding-block: 8px 48px; }
.hero .eyebrow { color: var(--night-muted); }
.hero__title { margin-top: 16px; color: var(--night-ink); font-size: clamp(3.1rem, 8vw, 6.4rem); line-height: 1; letter-spacing: -0.04em; padding-bottom: 0.04em; }
.hero__sub { margin-top: 20px; max-width: 38ch; color: var(--night-muted); font-size: 1.1rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .btn--primary { background: var(--night-ink); color: #111111; }
.hero .btn--primary:hover:not(:disabled) { background: #ffffff; }
.hero .btn--quiet { border-color: var(--night-line); color: var(--night-ink); }
.hero .btn--quiet:hover:not(:disabled) { border-color: var(--night-ink); }
.hero :focus-visible { outline-color: #c9a873; }

/* headline words and the lines under it arrive one after another, once; the garments only ever fade in */
.js-motion .hero__title .w { display: inline-block; opacity: 0; transform: translateY(0.5em); animation: arrive 0.9s var(--ease) forwards; animation-delay: var(--d, 0s); }
.js-motion .hero [data-in] { opacity: 0; transform: translateY(14px); animation: arrive 0.9s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes arrive { to { opacity: 1; transform: none; } }
/* an adopted hero (already on screen from the page's own HTML) must not hide and replay its text */
.js-motion .hero--adopt [data-in], .js-motion .hero--adopt .hero__title .w { opacity: 1; transform: none; animation: none; }

.rack { position: relative; order: -1; }
.rack__stage { position: relative; height: min(44svh, 420px); perspective: 1100px; perspective-origin: 50% 40%; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.rack__stage.is-dragging { cursor: grabbing; }
/* a pool of light on the floor under the front piece */
.rack__stage::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 28%; pointer-events: none;
  background: radial-gradient(46% 38% at 50% 78%, rgba(240, 232, 220, 0.18), transparent 72%);
}
.rack__item { position: absolute; left: 50%; bottom: 8%; z-index: 1; display: block; height: 84%; outline-offset: 6px; will-change: transform, filter, opacity; -webkit-tap-highlight-color: transparent; }
.rack__item img { height: 100%; width: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.38)); }
.js-motion .rack__item img { animation: rise 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 0.1s); }
@keyframes rise { from { opacity: 0; transform: translateY(6%); } to { opacity: 1; transform: none; } }
.rack__shadow { position: absolute; left: 50%; bottom: -3%; width: 74%; height: 7%; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); }
.rack__caption { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.rack__label { display: grid; justify-items: center; min-width: 13rem; padding: 4px 8px; text-align: center; text-decoration: none; line-height: 1.35; }
.rack__name { color: var(--night-ink); font-family: var(--display); font-size: 1.15rem; }
.rack__price { color: var(--night-muted); font: 500 0.82rem/1.4 var(--sans); }
/* the hero is always dark, so its sale red is the light one whatever the page theme */
.rack__price .price--sale { color: #f0938b; } .rack__price .price__was { color: var(--night-muted); }
.rack__tag { margin-left: 6px; vertical-align: 1px; }
.hero .hero__sale { color: #f0938b; }
.rack__step { color: var(--night-ink); border-color: var(--night-line); }
.rack__step:hover { background: rgba(242, 240, 235, 0.1); }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); align-items: center; min-height: min(calc(100dvh - 104px), 760px); padding-block: 24px; }
  .rack { order: 0; }
  .rack__stage { height: min(64vh, 610px); }
}

/* ---------- home: watch and shop ----------
   An endless strip that spans the full width, so nothing is left empty at either edge. Each piece stands on a soft
   warm stage and drifts slowly while it is on screen. The slot is ready for a short video of the same piece. */
.reels { padding-block: clamp(48px, 7vw, 96px) 8px; overflow: hidden; }
.reels .section-head { align-items: center; }
.reels__nav { display: flex; gap: 8px; }
@media (hover: none) { .reels__nav { display: none; } }
.reels__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 300px); gap: 16px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.reels__track::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .reels__track { cursor: grab; } }
.reels__track.is-dragging { cursor: grabbing; user-select: none; }
.reel__media {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-card);
  background: radial-gradient(85% 65% at 50% 36%, var(--stage-a) 0%, var(--stage-b) 100%);
}
/* a soft shadow on the floor under the garment */
.reel__media::after {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: 7%; height: 4%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.2), transparent);
}
.reel__media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 9% 7% 13%; transform-origin: 50% 60%; }
/* a tile with a real clip shows the clip edge to edge (it brings its own studio backdrop) and skips the photo drift */
.reel__media--clip video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: saturate(0.72); }
.reel__media--clip::after { display: none; }
.js-motion .reel__media img { animation: drift 12s ease-in-out infinite alternate; animation-play-state: paused; }
.js-motion .reel.is-playing .reel__media img { animation-play-state: running; }
/* the pieces breathe: a slow rise and a small step closer, never a bend or a warp */
@keyframes drift { from { transform: scale(1) translateY(1%); } to { transform: scale(1.07) translateY(-2.5%); } }
.reel__shop { display: flex; align-items: center; gap: 8px; padding-top: 12px; }
.reel__meta { display: grid; flex: 1; min-width: 0; font-size: 0.9rem; line-height: 1.35; }
.reel__meta a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-family: var(--display); font-size: 1rem; text-decoration: none; }

.section { padding-block: clamp(48px, 7vw, 96px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.section-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.section-title em, .hero__title em, .band__text em { font-style: italic; }

.grid { display: grid; gap: 32px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 1120px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cats { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.cat {
  position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--r-card); background: var(--well);
  color: var(--ink); text-decoration: none; transition: background-color 0.3s;
}
.cat:hover { background: color-mix(in srgb, var(--well) 88%, var(--ink)); }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8% 9% 28%; transition: transform 0.9s var(--ease); }
.cat:hover img { transform: scale(1.03); }
.cat__label { position: absolute; left: 18px; right: 18px; bottom: 16px; display: grid; gap: 4px; }
.cat__name { font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 1.8rem); letter-spacing: -0.02em; }
.cat__count { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cat--coats { grid-column: 1 / -1; aspect-ratio: 5 / 4; }
/* on phones the embroidered cardigans tile runs full width and short: the garment to the right, the label to the left */
.cat--wide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.cat--wide img { object-position: 80% 50%; padding: 7% 8%; }
.cat--wide .cat__label { right: 50%; }
@media (min-width: 900px) {
  .cats { grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); height: clamp(540px, 56vw, 780px); }
  .cats .cat { aspect-ratio: auto; grid-column: auto; }
  .cats .cat--coats { grid-column: 1; grid-row: 1 / span 3; }
  .cat--wide .cat__label { right: 45%; }
  /* the smaller tiles are wide and short: the garment sits to the right, the label to the left */
  .cats .cat:not(.cat--coats) img { object-position: 76% 50%; padding: 7% 8%; }
}

.band { padding-block: clamp(56px, 9vw, 128px); border-block: 1px solid var(--line); }
.band__text { max-width: 24ch; font-family: var(--display); font-size: clamp(2rem, 5.4vw, 4rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.band__row { display: grid; gap: 24px; margin-top: 32px; max-width: 52ch; }

.service { display: grid; gap: 12px; padding-block: clamp(48px, 7vw, 96px); }
.tile { display: grid; align-content: space-between; gap: 32px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.tile .ph { justify-self: start; font-size: 1.5rem; color: var(--ink); }
.tile h3 { font-size: 1.3rem; }
.tile p { margin-top: 8px; color: var(--muted); font-size: 0.95rem; }
.tile--lead h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.tile--lead p { max-width: 36ch; font-size: 1rem; }
@media (min-width: 800px) {
  .service { grid-template-columns: 1.4fr 1fr 1fr; }
  .tile--lead { min-height: 280px; }
}

/* ---------- product cards ---------- */
.card { position: relative; min-width: 0; }
.card__frame { position: relative; }
.card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-card); background: var(--photo); }
.card__cutout, .card__studio { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.5s var(--ease), transform 0.8s var(--ease); }
.card__cutout { object-fit: contain; padding: 9% 8% 7%; }
.card__cutout--photo { object-fit: cover; padding: 0; } /* a piece added in the admin: the shoot photo as uploaded, filling the frame */
.card__studio { object-fit: cover; opacity: 0; }
.card--out .card__cutout { opacity: 0.55; }
.card__tags { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.card__save { position: absolute; top: 6px; right: 6px; font-size: 1.2rem; }
.card__add { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; font-size: 1.1rem; }
.card__quick { display: none; }
.card__body { display: grid; gap: 2px; padding-top: 14px; text-decoration: none; }
.card__title { font-family: var(--display); font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.3; color: var(--ink); }
.card__meta { color: var(--muted); font-size: 0.84rem; }
@media (hover: hover) and (pointer: fine) {
  .card__add { display: none; }
  .card__quick {
    position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .card__frame:hover .card__quick, .card__frame:focus-within .card__quick { opacity: 1; transform: none; }
  .card__frame:hover .card__studio { opacity: 1; transform: scale(1.03); }
  .card__frame:hover .card__cutout { opacity: 0; transform: scale(1.05); }
}
.card__size {
  min-width: 40px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--surface); color: var(--ink);
  font: 500 0.78rem/1 var(--sans);
}
.card__size:hover:not(:disabled) { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.card__size:active:not(:disabled) { transform: scale(0.96); }
.card__size:disabled { opacity: 0.5; text-decoration: line-through; cursor: not-allowed; }

/* ---------- collection ---------- */
.shop { padding-block: 32px 72px; }
.shop__head { display: grid; gap: 8px; }
.page-title { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.03em; padding-bottom: 0.04em; }
.shop__bar {
  position: sticky; top: var(--header-h); z-index: 10; display: flex; align-items: center; gap: 16px;
  margin: 20px calc(var(--gutter) * -1) 0; padding: 10px var(--gutter); background: var(--bg); border-bottom: 1px solid var(--line);
}
.shop__bar .chips { flex: 1; min-width: 0; }
.shop__active { margin-top: 12px; align-items: center; }
.shop__grid { margin-top: 28px; }
.shop__group { grid-column: 1 / -1; margin-top: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 1.5rem; }
.shop__group:first-child { margin-top: 0; }
.loadmore { display: grid; justify-items: center; gap: 12px; margin-top: 48px; }
.empty { display: grid; justify-items: center; gap: 12px; padding: 72px 16px; text-align: center; }
.empty > .ph { font-size: 2.2rem; color: var(--muted); }
.empty h2, .empty h3 { font-size: 1.6rem; }
.empty .btn { margin-top: 12px; }
.empty--small { padding: 32px 0; }

/* ---------- product page ---------- */
.pdp { padding-block: 16px 72px; }
.crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 0.86rem; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.pdp__layout { display: grid; gap: 24px; }
.pdp__layout > * { min-width: 0; } /* the swipe gallery must not stretch the page on very narrow phones */
.pdp__info .btn { white-space: normal; text-align: center; line-height: 1.3; padding-block: 8px; } /* long labels such as "Ask about this piece on WhatsApp" wrap on a 320 px phone */
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; margin-inline: calc(var(--gutter) * -1); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery__slide { margin: 0; aspect-ratio: 4 / 5; background: var(--photo-stage, var(--slide-bg, var(--well))); scroll-snap-align: start; overflow: hidden; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__slide--cutout img { object-fit: contain; padding: 8%; }
.gallery__dots { display: flex; justify-content: center; margin-top: 4px; }
.dot { position: relative; width: 36px; height: 44px; padding: 0; border: 0; background: none; }
.dot::after { content: ""; position: absolute; left: 12px; right: 12px; top: 21px; height: 2px; background: var(--line-strong); transition: background-color 0.2s; }
.dot[aria-current="true"]::after { background: var(--ink); }
.pdp__info { display: grid; gap: 16px; align-content: start; }
.pdp__title { font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: -0.03em; padding-bottom: 0.04em; }
.pdp__price { font: 500 1.3rem/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.pdp__pay, .pdp__colour { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.92rem; }
.pdp__pay .ph { font-size: 1.2rem; color: var(--ink); }
.pdp__sizes-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.size {
  min-width: 56px; height: 48px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: transparent;
  font: 500 0.9rem/1 var(--sans); transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.size:hover:not(:disabled) { border-color: var(--ink); }
.size:active:not(:disabled) { transform: scale(0.98); }
.size[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.size:disabled { opacity: 0.45; text-decoration: line-through; cursor: not-allowed; }
.sizes.shake { animation: shake 0.4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.stock { min-height: 1.6em; margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
.stock.is-low { color: var(--tag-low); font-weight: 500; }
.stock.is-error { color: var(--danger); font-weight: 500; }
.pdp__actions { display: flex; gap: 8px; }
.pdp__actions .btn { flex: 1; min-height: 56px; }
.pdp__figure { display: flex; align-items: center; gap: 8px; }
.accordion { margin-top: 8px; border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; color: var(--ink); font-weight: 500; cursor: pointer; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font: 400 1.4rem/1 var(--sans); transition: transform 0.25s var(--ease); }
.accordion details[open] summary::after { content: "\2212"; }
.accordion details > :not(summary) { margin-bottom: 14px; color: var(--ink-2); }
.ticks { margin: 10px 0 16px; padding-left: 18px; }
.ticks li { margin-bottom: 4px; }

.sticky-add {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform: translateY(110%); transition: transform 0.35s var(--ease);
}
.sticky-add.is-shown { transform: none; }

/* floating WhatsApp button */
.wa-fab {
  position: fixed; right: var(--gutter); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 25;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: var(--bg); font-size: 1.6rem; text-decoration: none;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25); transition: transform 0.25s var(--ease), bottom 0.35s var(--ease);
}
.wa-fab[hidden] { display: none; }
.wa-fab:hover { transform: scale(1.06); }
.wa-fab:active { transform: scale(0.96); }
body.has-sticky .wa-fab { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 76px); }
.sticky-add__text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.sticky-add__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; color: var(--ink); }
.related { padding-top: clamp(48px, 7vw, 96px); }
.reviews { padding-top: clamp(48px, 7vw, 96px); }
.pdpsize { display: grid; gap: 32px; padding-top: clamp(48px, 7vw, 96px); }
.pdpsize > * { min-width: 0; }
.pdpsize__chart { display: grid; gap: 16px; align-content: start; }
.pdpsize__chart .section-title { margin: 0; }
.pdpsize__how { display: grid; gap: 24px; }
.pdpsize__how .measure__steps { margin: 0; }
@media (min-width: 900px) {
  .pdpsize { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .pdpsize__how { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: start; }
}
.reviews__sum { margin: 12px 0 8px; }
.stars { color: var(--accent); letter-spacing: 0.12em; }
.reviews__list { display: grid; max-width: 720px; margin: 0; padding: 0; list-style: none; }
.review { padding: 20px 0; border-top: 1px solid var(--line); }
.review__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.review p { margin: 8px 0 0; }
.review__src { color: var(--muted); font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; }
.review__src:hover { color: var(--ink); }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 20px 0 0; padding: 0; list-style: none; }
.reviews__grid .review { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.social__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
.social__item { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.social__item iframe { display: block; width: 100%; height: 620px; border: 0; }
.social__item--tiktok iframe { height: 740px; }
.review__badge { padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 0.78rem; }
/* trust: what the shopper can count on, right under the price. Only promises the shop already keeps. */
.promises { display: grid; gap: 12px; margin: 4px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; }
.promises li { display: flex; gap: 12px; }
.promises .ph { flex: none; margin-top: 1px; font-size: 1.2rem; color: var(--ink); }
/* a closer look: captions name what each close-up shows, and a tap opens the photo larger */
.gallery__slide { position: relative; }
.gallery__slide img { cursor: zoom-in; }
.gallery__cap {
  position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 6px 10px; border-radius: 6px; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink); font: 500 0.68rem/1.4 var(--sans); letter-spacing: 0.04em;
}
.gallery__hint { margin-top: 12px; text-align: center; }
.zoom { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--bg); opacity: 0; transition: opacity 0.25s; }
.zoom.is-open { opacity: 1; }
.zoom__close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.zoom__scroll { flex: 1; display: grid; overflow: auto; overscroll-behavior: contain; background: var(--photo-stage, var(--zoom-bg, var(--well))); }
/* Some studio photos carry a hairline of lighter or darker pixels along their outer edge; trimming it lets the photo
   meet the matching pane with no visible line. */
picture { display: contents; } /* themed photos: the <img> inside lays out as if the picture wrapper were not there */
.zoom__scroll img { display: block; max-width: none; margin: auto; clip-path: inset(6px); }
.zoom__cap { padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); text-align: center; color: var(--muted); }
.unit { display: flex; gap: 8px; margin-bottom: 16px; }
@media (min-width: 900px) {
  .pdp__layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .gallery { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; gap: 12px; margin: 0; overflow: visible; }
  .gallery__slide { border-radius: var(--r-card); }
  .gallery__dots { display: none; }
  .pdp__info { position: sticky; top: calc(var(--header-h) + 24px); }
  .sticky-add { display: none; }
}

/* ---------- layers ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); opacity: 0; transition: opacity 0.3s; }
.scrim.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column; width: min(440px, 100vw);
  background: var(--surface); box-shadow: var(--shadow); transition: transform 0.35s var(--ease);
}
.drawer--right { right: 0; transform: translateX(104%); border-left: 1px solid var(--line); }
.drawer--left { left: 0; transform: translateX(-104%); width: min(360px, 88vw); border-right: 1px solid var(--line); }
.drawer.is-open { transform: none; }
.drawer__head, .sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 8px 8px 8px var(--gutter); border-bottom: 1px solid var(--line); }
.drawer__title, .sheet__title { font-size: 1.4rem; }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px var(--gutter); overscroll-behavior: contain; }
.drawer__foot { display: grid; gap: 8px; padding: 16px var(--gutter) max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.menu { display: grid; align-content: start; gap: 2px; }
.menu a { display: flex; align-items: center; min-height: 52px; color: var(--ink); font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.02em; text-decoration: none; }
.menu a.menu__small { min-height: 44px; font: 400 1rem/1.4 var(--sans); letter-spacing: 0; color: var(--ink-2); }
.menu__rule { height: 1px; margin: 12px 0; background: var(--line); }

.search { position: fixed; inset: 0 0 auto; z-index: 70; max-height: 100dvh; overflow-y: auto; padding-bottom: 24px; background: var(--surface); box-shadow: var(--shadow); transform: translateY(-104%); transition: transform 0.35s var(--ease); }
.search.is-open { transform: none; }
.search__form { display: flex; align-items: center; gap: 8px; min-height: 72px; border-bottom: 1px solid var(--line); }
.search__form > .ph { font-size: 1.35rem; color: var(--muted); }
.search__form input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; font-size: 1.15rem; }
.search__form input:focus { outline: none; }
.search__form input::placeholder { color: var(--muted); }
.search__results { display: grid; gap: 12px; padding-top: 20px; }
.hits { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.hit { display: flex; align-items: center; gap: 16px; padding: 6px 0; text-decoration: none; }
.hit img { width: 56px; height: 70px; object-fit: contain; border-radius: var(--r-input); background: var(--photo); }
.hit > span { display: grid; line-height: 1.35; }
.hit__title { font-family: var(--display); color: var(--ink); }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column; max-height: 90dvh;
  border-radius: var(--r-card) var(--r-card) 0 0; background: var(--surface); box-shadow: var(--shadow); transform: translateY(104%); transition: transform 0.35s var(--ease);
}
.sheet.is-open { transform: none; }
.sheet__body { overflow-y: auto; padding: 20px var(--gutter) 24px; display: grid; gap: 20px; overscroll-behavior: contain; }
.sheet__foot { display: flex; gap: 8px; padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.sheet__foot .btn { flex: 1; }
@media (min-width: 720px) {
  .sheet { left: 50%; right: auto; width: 600px; transform: translate(-50%, 104%); border-radius: var(--r-card); bottom: 24px; }
  .sheet.is-open { transform: translate(-50%, 0); }
}
.filter { margin: 0; padding: 0; border: 0; }
.filter legend { margin-bottom: 12px; padding: 0; color: var(--ink); font-weight: 500; }
.quick { display: flex; align-items: center; gap: 16px; }
.quick__img { width: 64px; height: 80px; object-fit: contain; border-radius: var(--r-input); background: var(--photo); }

.table-wrap { overflow-x: auto; }
.size-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.size-table caption { margin-bottom: 8px; text-align: left; color: var(--muted); font: 400 0.86rem/1.4 var(--sans); }
.size-table th, .size-table td { padding: 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.size-table thead th { font-weight: 500; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }
.size-table tbody th { font-weight: 500; color: var(--ink); }
.size-table tbody tr { transition: background-color 0.25s; }
.size-table tbody tr.is-on { background: var(--well); }
.size-table tbody tr.is-on th, .size-table tbody tr.is-on td { color: var(--ink); }

.freebar { display: grid; gap: 10px; margin-bottom: 20px; font-size: 0.9rem; }
.meter { height: 2px; overflow: hidden; background: var(--line); }
.meter span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transition: transform 0.4s var(--ease); }
.lines { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.line__img img { width: 72px; height: 90px; object-fit: contain; border-radius: var(--r-input); background: var(--photo); }
.line__title { font-family: var(--display); color: var(--ink); text-decoration: none; line-height: 1.3; }
.line__end { display: grid; justify-items: end; gap: 8px; }
.line__price { font-family: var(--sans); font-size: 0.9rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.stepper { display: inline-flex; align-items: center; margin-top: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); }
.stepper button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-btn); background: none; }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper output { min-width: 24px; text-align: center; font: 500 0.9rem/1 var(--sans); }
.total { display: flex; justify-content: space-between; font-size: 1.05rem; color: var(--ink); }
.total strong { font-family: var(--sans); font-weight: 500; }

/* the toast sits at the top, so it never covers a drawer's Checkout button or the sticky Add to bag bar */
.toast {
  position: fixed; left: 50%; top: calc(var(--header-h) + 12px); z-index: 90; display: flex; align-items: center; gap: 16px;
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: var(--r-btn); background: var(--ink); color: var(--on-ink);
  font-size: 0.9rem; box-shadow: var(--shadow); transform: translate(-50%, -12px); opacity: 0; transition: transform 0.3s var(--ease), opacity 0.3s;
}
.toast.is-open { transform: translate(-50%, 0); opacity: 1; }
.toast button, .toast a { flex: none; padding: 0; border: 0; background: none; color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.fly { position: fixed; z-index: 95; object-fit: contain; pointer-events: none; will-change: transform, opacity; }

/* ---------- checkout ---------- */
.checkout { padding-block: 32px 80px; }
.checkout__layout { display: grid; gap: 40px; margin-top: 28px; }
.checkout__form { display: grid; gap: 32px; }
.fieldset { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; }
.fieldset legend { margin-bottom: 4px; padding: 0; color: var(--ink); font-family: var(--display); font-size: 1.4rem; letter-spacing: -0.02em; }
.field { display: grid; gap: 8px; }
.field label { color: var(--ink); font-size: 0.92rem; font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-input); background: var(--surface); font-size: 1rem;
}
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.field [aria-invalid="true"] { border-color: var(--danger); }
.help { color: var(--muted); font-size: 0.86rem; }
.error { color: var(--danger); font-size: 0.86rem; font-weight: 500; }
.pay { display: grid; gap: 8px; }
.pay__option { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 16px; cursor: pointer; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface); }
.pay__option > .ph { font-size: 1.5rem; color: var(--ink); }
.pay__option > span { display: grid; line-height: 1.35; }
.pay__option input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.pay__option:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.summary { align-self: start; display: grid; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.summary h2 { font-size: 1.4rem; }
.summary__lines { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.summary__line { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; font-size: 0.9rem; line-height: 1.35; }
.summary__line img { width: 48px; height: 60px; object-fit: contain; border-radius: 6px; background: var(--photo); }
.summary__line .mono, .summary__row .mono { font-size: 0.86rem; }
.summary__row { display: flex; justify-content: space-between; font-size: 0.94rem; }
.summary__promo .promo__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.summary__promo .help { min-height: 1.2em; }
.summary__row--total { padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink); font-size: 1.05rem; font-weight: 500; }
@media (min-width: 900px) {
  .checkout__layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; }
  .summary { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---------- order placed ---------- */
.order { display: grid; justify-items: center; gap: 12px; padding-block: 56px 88px; text-align: center; }
.order__icon { font-size: 2.6rem; color: var(--ink); }
.order__send { display: grid; gap: 8px; width: 100%; margin-top: 20px; }
.order__text { width: 100%; margin: 8px 0 0; padding: 16px; border-radius: var(--r-input); background: var(--surface); border: 1px solid var(--line); font: 400 0.84rem/1.6 var(--code); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
.order__sent { padding: 12px 16px; border-radius: var(--r-input); background: var(--tag-new-bg); color: var(--tag-new); font-size: 0.92rem; font-weight: 500; }
.next { display: grid; gap: 20px; width: 100%; margin: 28px 0; padding: 28px 0 0; list-style: none; text-align: left; border-top: 1px solid var(--line); }
.next li { display: flex; gap: 16px; }
.next .ph { flex: none; font-size: 1.4rem; color: var(--ink); }
.next h2 { font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: 0; }

/* ---------- reading pages: story, policies, contact ---------- */
.doc { padding-block: clamp(40px, 7vw, 96px); }
.doc__head { display: grid; gap: 16px; max-width: 760px; }
.doc__lead { max-width: 56ch; font-size: 1.15rem; color: var(--ink-2); }
.doc__body { display: grid; gap: 40px; max-width: 680px; margin-top: 48px; }
.doc__body h2 { margin-bottom: 12px; font-size: 1.5rem; }
.doc__body p + p { margin-top: 12px; }
.doc__body ul { margin: 12px 0 0; padding-left: 20px; }
.doc__body li { margin-bottom: 6px; }
.doc__note { padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink-2); font-size: 0.95rem; }
.contact { display: grid; gap: 12px; margin-top: 48px; }
.contact__tile { display: grid; gap: 24px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 0.2s; }
.contact__tile:hover { border-color: var(--ink); }
.contact__tile .ph { font-size: 1.6rem; }
.contact__tile strong { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; }
@media (min-width: 720px) { .contact { grid-template-columns: 1fr 1fr; } }

/* guides: a list of plain cards, each a link */
.guides { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.guide { display: grid; gap: 8px; align-content: start; height: 100%; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 0.2s; }
.guide:hover { border-color: var(--ink); }
.guide__title { font-family: var(--display); font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.02em; }
.guide__desc { color: var(--muted); font-size: 0.95rem; }
.guide .link { margin-top: 8px; }
@media (min-width: 800px) { .guides { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.doc__more { max-width: 680px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
.doc__more h2 { margin-bottom: 12px; font-size: 1.4rem; }
.doc__more ul { display: grid; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }

.chapters { display: grid; gap: 64px; margin-top: 56px; }
.chapter { display: grid; gap: 24px; align-items: center; }
.chapter__media { overflow: hidden; border-radius: var(--r-card); background: var(--well); aspect-ratio: 4 / 3; }
.chapter__media img { width: 100%; height: 100%; object-fit: cover; }
.chapter__copy { display: grid; gap: 12px; max-width: 46ch; }
.chapter__copy h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
@media (min-width: 860px) {
  .chapter { grid-template-columns: 1fr 1fr; gap: 64px; }
  .chapter--flip .chapter__media { order: 2; }
}
.principles { display: grid; gap: 0; margin: 56px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.principles li { display: flex; align-items: baseline; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.principles__num { width: 2.5rem; font: 500 0.78rem/1 var(--sans); color: var(--muted); }
.principles__name { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--ink); letter-spacing: -0.02em; }
@media (min-width: 860px) { .principles { grid-template-columns: 1fr 1fr; column-gap: 64px; } }

.figure { display: grid; gap: 12px; }
.figure__frame { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); aspect-ratio: 5 / 4; }
.figure__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.figure__read { display: flex; justify-content: space-between; gap: 16px; font: 500 0.72rem/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sizeguide { display: grid; gap: 40px; margin-top: 40px; }
.sizeguide > * { min-width: 0; } /* the wide size chart scrolls inside its own box instead of stretching the page on small phones */
@media (min-width: 900px) { .sizeguide { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 64px; align-items: start; } }
.piecefig { display: grid; gap: 12px; margin: 0; }
.piecefig__frame { display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--photo); aspect-ratio: 4 / 5; }
.piecefig__frame img { width: 100%; height: 100%; object-fit: contain; }
.size.size--one { width: auto; padding-inline: 18px; }
.sizehelp { display: grid; gap: 56px; margin-top: 72px; }
.sizehelp > * { min-width: 0; }
.sizehelp h2 { margin-bottom: 12px; font-size: 1.5rem; }
.sizefind { display: grid; gap: 16px; max-width: 680px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.sizefind h2 { margin-bottom: 0; }
.sizefind__row { display: grid; gap: 12px; }
.sizefind__out { min-height: 1.5em; color: var(--ink); }
@media (min-width: 560px) { .sizefind__row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.measure { display: grid; gap: 32px; align-items: center; }
.measure__steps, .fitlist { display: grid; gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; counter-reset: step; }
.measure__steps li, .fitlist li { display: grid; gap: 4px; }
.measure__steps li { position: relative; padding-left: 40px; counter-increment: step; }
.measure__steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 500 0.78rem/1 var(--sans); }
.measure__steps strong, .fitlist strong { color: var(--ink); font-weight: 500; }
.measure__steps span, .fitlist span { color: var(--ink-2); }
.fitlist { max-width: 680px; }
.fitlist li { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.measure__figure { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.measure__photo { position: relative; display: grid; gap: 12px; margin: 0; padding: 0; border: 0; background: none; }
.measure__photo img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--photo); }
.measure__photo svg { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 500 / 621; pointer-events: none; }
.measure__lines path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 9 6; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.55)); }
.measure__ends path { fill: none; stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.55)); }
.measure__tags circle { fill: #171513; stroke: #fff; stroke-width: 2; }
.measure__tags text { fill: #fff; font: 600 15px var(--sans); text-anchor: middle; }
@media (min-width: 900px) { .measure { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 64px; } }

/* ---------- footer ---------- */
.footer { margin-top: 24px; border-top: 1px solid var(--line); background: var(--surface); }
.footer__in { display: grid; gap: 40px 32px; padding-block: 56px 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__brand { grid-column: 1 / -1; display: grid; gap: 16px; align-content: start; }
.footer__line { max-width: 34ch; color: var(--muted); font-size: 0.92rem; }
.footer__col { display: grid; gap: 4px; align-content: start; }
.footer__head { margin-bottom: 8px; font: 500 0.72rem/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.footer__col a { padding: 6px 0; color: var(--ink-2); font-size: 0.94rem; text-decoration: none; }
.footer__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.84rem; }
@media (min-width: 860px) {
  .footer__in { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: auto; }
}

/* ---------- reduced motion and test mode ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.no-motion *, .no-motion *::before, .no-motion *::after { animation: none !important; transition: none !important; }
.no-motion .reveal { opacity: 1 !important; transform: none !important; }

/* footer email sign-up */
.order__confirm { display: grid; gap: 10px; margin: 20px 0 8px; padding: 18px; border: 1px solid var(--line-strong); }
.order__confirm h2 { margin: 0 0 4px; font-size: 1.1rem; }
.track__form { display: grid; gap: 14px; margin: 20px 0; }
.track__card { display: grid; gap: 12px; margin-top: 20px; padding: 20px; border: 1px solid var(--line-strong); }
.track__card h2 { font-size: 1.6rem; }
.timeline { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 12px; }
.timeline li { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center; color: var(--muted); }
.timeline__dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.timeline .is-done { color: var(--ink); }
.timeline .is-done .timeline__dot { background: var(--ink); border-color: var(--ink); }
.signup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 28px 8px; max-width: 560px; margin-inline: 0; }
.signup__label { font-size: 0.94rem; color: var(--ink); }
.signup__row { display: flex; gap: 8px; }
.signup__row input { flex: 1; width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--line-strong); background: transparent; color: inherit; font: inherit; }
.signup__note { margin: 0; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; color: var(--ink-2); margin-top: 4px; }
.check input { margin-top: 4px; accent-color: var(--ink); }

/* Geist replaces the old mono face for prices, counts and numbered labels: keep their digits the same width */
.mono, .eyebrow, .price, .pdp__price, .rack__price, .line__price, .total strong, .stepper output, .cat__count, .principles__num, .figure__read, .size-table { font-variant-numeric: tabular-nums; }

/* colour choices on a product that comes in more than one colour */
.pdp__colours { gap: 10px; }
.swatch--pick { width: 26px; height: 26px; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.25); }
.swatch--pick[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.25), 0 0 0 2px var(--bg, #fff), 0 0 0 4px var(--ink, #111); }
.swatch--pick:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }