/* FFO'G Club Forever storefront. The brand's packaging sets the palette: a black box, white wordmark,
   gold label. Black and white are the grounds, warm off-white the soft ground, gold the accent.
   WhatsApp green is kept for the WhatsApp order and chat actions only. The admin page loads this file
   too and relies on the custom properties and the .btn, .icon-button, .wrap, .empty and .toolbar classes. */
:root {
  --black: #0c0c0d;
  --white: #ffffff;
  --soft: #f6f3ec;
  --gold: #c6a15b;          /* rules, icons, large type and text on black (8:1) */
  --gold-text: #7f6128;     /* gold as text on white or off-white (5:1) */
  --gold-hover: #d4b373;

  --bg: var(--white);
  --surface: var(--white);
  --tint: var(--soft);
  --ink: var(--black);
  --ink-hover: #2b2b2e;
  --muted: #4f4c47;
  --line: #e2ddd2;
  --on-dark: #f6f3ec;
  --on-dark-muted: #aaa59b;
  --line-dark: #2c2b29;
  --wa: #0f7a3f;            /* WhatsApp actions only */
  --wa-hover: #0b6833;
  --danger: #a8321f;

  --radius: 3px;
  --radius-lg: 6px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease: var(--ease-out);
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --shadow-float: 0 1px 2px rgb(12 12 13 / 0.12), 0 8px 24px rgb(12 12 13 / 0.14);
  --header-h: 64px;
  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); scrollbar-gutter: stable; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  font: 400 16px/1.55 var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  accent-color: var(--ink);
  overflow-x: clip;
}
::selection { background: var(--gold); color: var(--black); }
a { color: inherit; text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
p { text-wrap: pretty; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.band-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .announce :focus-visible, .viewer :focus-visible, .hero :focus-visible { outline-color: var(--gold); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1, h2, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.012em; line-height: 1.04; text-wrap: balance; }
h2 { font-size: clamp(34px, 4.6vw, 56px); }
h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.skip-link { position: absolute; z-index: 50; left: 12px; top: -60px; padding: 10px 14px; border-radius: var(--radius); background: var(--gold); color: var(--black); font-weight: 600; text-decoration: none; }
.skip-link:focus-visible { top: 12px; }

/* page-to-page: the shirt photo travels between the grid and its own page */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: var(--ease-in-out); }

/* ---------- announcement ---------- */
.announce { background: var(--black); color: var(--on-dark); border-bottom: 1px solid var(--line-dark); font-size: 14px; }
.announce-row { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; }
.announce p { flex: 1; text-align: center; padding: 8px 0 8px 44px; }
.announce p::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; rotate: 45deg; background: var(--gold); }
.announce .icon-button { flex: none; color: var(--on-dark); }
.announce-off .announce { display: none; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--black); color: var(--on-dark); box-shadow: 0 1px 0 var(--line-dark); }
.header-row { display: flex; align-items: center; gap: 8px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; text-decoration: none; color: var(--white); }
.wordmark { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 24px; line-height: 1; }
.wordmark.is-logo svg { height: 26px; width: auto; }
.site-nav { display: none; gap: 28px; margin-right: 24px; font-size: 15px; }
.site-nav a, .footer-col a, .footer-col button { text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size 150ms var(--ease-out), color 150ms ease; }
.site-nav a { padding: 6px 0; color: var(--on-dark); }
.header-actions { display: flex; gap: 2px; }
.site-header .icon-button { color: var(--on-dark); }
.count-button { position: relative; }
.count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--black); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.menu-button { margin-left: -10px; }

/* ---------- buttons (shared with the admin) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 22px; border: 1px solid var(--ink); border-radius: var(--radius); background: transparent; color: var(--ink); text-align: center; text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, translate 150ms var(--ease-out), scale 90ms var(--ease-out); }
.btn:active { translate: 0 1px; scale: 0.985; }
.btn svg { flex: none; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--black); }
.btn-wa { background: var(--wa); border-color: var(--wa); color: var(--white); }
.btn-auto { display: inline-flex; width: auto; }
.btn-small { display: inline-flex; width: auto; min-height: 44px; padding: 0 14px; font-size: 14px; font-weight: 500; border-color: var(--line); }
.btn-danger { color: var(--danger); }
.btn.is-done { background: var(--soft); border-color: var(--gold-text); }
.wa-icon { flex: none; border-radius: 50%; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius); background: none; color: inherit; transition: background-color 150ms ease, color 150ms ease, scale 90ms var(--ease-out); }
.icon-button:active { scale: 0.94; }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; cursor: pointer; }
.text-link svg { transition: translate 150ms var(--ease-out); }
.text-link.small { min-height: 44px; font-size: 14px; font-weight: 500; }
.note { font-size: 14px; color: var(--muted); }
.center { text-align: center; }
.empty { padding: 48px 0; color: var(--muted); display: grid; gap: 16px; justify-items: start; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

/* ---------- hero: one photograph, the words in a solid black box ---------- */
.hero { position: relative; display: grid; background: var(--black); color: var(--on-dark); overflow: hidden; }
.hero-photo { width: 100%; height: 42svh; min-height: 260px; object-fit: cover; object-position: 30% 50%; }
.hero-inner { width: 100%; }
.hero-box { padding: 28px 0 40px; }
.hero h1 { font-size: clamp(44px, 5.6vw, 80px); max-width: 13ch; color: var(--white); }
.hero-lead { margin-top: 18px; max-width: 42ch; font-size: 18px; line-height: 1.55; color: var(--on-dark); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.hero .text-link { color: var(--white); }

/* ---------- shirts by colour ---------- */
.spot { background: color-mix(in srgb, var(--spot) 12%, var(--soft)); transition: background-color 400ms ease; padding: 64px 0; }
.spot-grid { display: grid; gap: 32px; align-items: start; }
.spot-frame { position: relative; aspect-ratio: 4 / 5; max-height: 78svh; border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--spot) 30%, var(--soft)); }
.spot-pic { position: absolute; inset: 0; display: block; }
.spot-pic img, .spot-pic .placeholder { width: 100%; height: 100%; object-fit: cover; transition: scale 600ms var(--ease-out); }
.spot-copy { display: grid; gap: 20px; align-content: start; }
.spot-intro { color: var(--muted); font-size: 17px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 52px; padding: 0; border: 0; background: none; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.18)) drop-shadow(0 3px 6px rgb(12 12 13 / 0.12)); transition: translate 200ms var(--ease-out); }
.swatch svg { width: 100%; height: auto; }
.swatch[aria-pressed="true"] { translate: 0 -6px; }
.swatch[aria-pressed="true"]::after { content: ""; display: block; height: 2px; margin-top: 8px; background: var(--ink); }
.swatch:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; filter: none; }
.spot-detail { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.spot-name { font-family: var(--font-display); font-size: 34px; line-height: 1.1; }
.spot-price { font-size: 18px; }
.spot-meta { color: var(--muted); }

/* ---------- prices ---------- */
.price-now { font-weight: 600; font-variant-numeric: tabular-nums; }
.price-was { color: var(--muted); font-variant-numeric: tabular-nums; }
.price-off { color: var(--gold-text); font-weight: 600; }

/* ---------- shop ---------- */
.shop { padding: 72px 0 88px; }
.shop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.result-count { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.search { position: relative; flex: 1 1 240px; max-width: 420px; color: var(--muted); }
.search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; pointer-events: none; }
.search input { width: 100%; height: 48px; padding: 0 14px 0 42px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 16px; transition: border-color 140ms ease, box-shadow 140ms ease; }
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(198 161 91 / 0.35); }
.sort { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.sort select { height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 16px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 22px; font-size: 15px; font-weight: 500; text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, scale 90ms var(--ease-out); }
.chip:active { scale: 0.97; }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }

/* ---------- shirt card ---------- */
.card { position: relative; transition: translate 180ms var(--ease-out); }
.card-media { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.thumb { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--soft); }
.thumb::after, .slide::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.07); pointer-events: none; }
.thumb img, .placeholder { width: 100%; height: 100%; object-fit: cover; }
.thumb img, .thumb .placeholder { transition: scale 400ms var(--ease-out); }
.card.is-out .thumb > * { filter: saturate(0.3); opacity: 0.7; }
.badge { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 4px 9px; border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: 12px; font-weight: 600; box-shadow: 0 1px 2px rgb(12 12 13 / 0.16); }
.badge-out { background: var(--black); color: var(--white); }
.badge-featured { background: var(--black); color: var(--gold); }
.heart { position: absolute; z-index: 3; top: 6px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); }
.heart::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgb(255 255 255 / 0.9); box-shadow: 0 1px 2px rgb(12 12 13 / 0.16); transition: scale 90ms var(--ease-out); }
.heart svg { position: relative; transition: fill 120ms ease, color 120ms ease; }
.heart[aria-pressed="true"] svg { fill: var(--gold); color: var(--gold-text); }
.heart:active::before { scale: 0.92; }
/* the one spring on the page: the heart answering a save */
.heart.pop svg { animation: heart-pop 420ms linear(0, 0.36 9%, 1.05 26%, 1.13 33%, 1.06 45%, 0.99 60%, 1.01 76%, 1); }
@keyframes heart-pop { from { scale: 0.6; } to { scale: 1; } }
.heart-big { position: relative; top: auto; right: auto; }
.heart-big::before { inset: 0; background: transparent; box-shadow: none; }
.quick { position: absolute; z-index: 3; right: 8px; bottom: 8px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: var(--shadow-float); transition: scale 90ms var(--ease-out), rotate 200ms var(--ease-out), background-color 150ms ease, color 150ms ease; }
.quick:active { scale: 0.94; }
.card.tray-open .quick { rotate: 45deg; background: var(--black); color: var(--white); }
.tray { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 10px 60px 10px 10px; background: rgb(255 255 255 / 0.97); translate: 0 100%; visibility: hidden; transition: translate 200ms var(--ease-out), visibility 0s 200ms; }
.card.tray-open .tray { translate: 0 0; visibility: visible; transition: translate 220ms var(--ease-out); }
.tray-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.tray-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.tray-sizes button { min-width: 44px; height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font-size: 14px; font-weight: 600; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, scale 90ms var(--ease-out); }
.tray-sizes button:active { scale: 0.95; }
.card-info { display: grid; gap: 2px; margin-top: 12px; text-decoration: none; }
.card-name { font-weight: 600; font-size: 16px; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 150ms ease; }
.card-price { font-size: 15px; }
.card-sizes { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 6px; padding: 0; list-style: none; font-size: 13px; font-weight: 500; color: var(--muted); }
.card-sizes .out s { color: #77736b; }

/* ---------- How ordering works: pinned chapters ---------- */
.band-dark { background: var(--black); color: var(--on-dark); }
.band-dark h2 { color: var(--white); }
.band-soft { background: var(--soft); }
.how { padding: 88px 0; }
.pc-grid { display: grid; gap: 40px; }
.pc-text { display: grid; gap: 40px; align-content: start; }
.pc-steps { display: grid; gap: 48px; padding: 0; list-style: none; counter-reset: step; }
.pc-step { display: grid; gap: 10px; counter-increment: step; }
.pc-step h3 { display: flex; align-items: baseline; gap: 14px; font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--white); }
.pc-step h3::before { content: counter(step, decimal-leading-zero); font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.pc-step > p { max-width: 44ch; color: var(--on-dark-muted); font-size: 17px; }
.pc-visual { margin-top: 12px; border-radius: var(--radius-lg); overflow: hidden; background: #1b1b1c; }
.pc-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pc-frame { display: none; }

/* The WhatsApp chat as it looks once the order is sent; WhatsApp's own colours inside the phone. */
.phone { display: grid; grid-template-rows: auto 1fr; aspect-ratio: 4 / 3; background: #efeae2; color: #111b21; }
.phone-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; font-size: 13px; line-height: 1.3; }
.phone-bar strong { display: block; font-size: 15px; font-weight: 600; }
.phone-bar span { color: #667781; }
.avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--black); color: var(--gold) !important; font-weight: 600; font-size: 13px; }
.chat { display: grid; align-content: center; padding: 16px; overflow: hidden; }
.bubble { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgb(0 0 0 / 0.1); }
.bubble.out, .msg-preview .bubble { justify-self: end; max-width: 92%; background: #d9fdd3; color: #111b21; }

@media (min-width: 640px) {
  .pc-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: center; padding-top: 32px; border-top: 1px solid var(--line-dark); }
  .pc-step h3, .pc-step > p { grid-column: 1; }
  .pc-step h3 { align-self: end; }
  .pc-step > p { align-self: start; }
  .pc-step .pc-visual { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

/* live (store.js adds .is-live from 1024 x 640, without reduced motion): two screens, the stage holds for one */
.how.is-live { height: 200svh; padding: 0; }
.how.is-live .pc-grid { position: sticky; top: 0; height: 100svh; padding-top: calc(var(--header-h) + 40px); padding-bottom: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-content: center; align-items: center; }
.how.is-live .pc-step { display: grid; grid-template-columns: none; padding: 0 0 0 22px; border-top: 0; border-left: 2px solid var(--line-dark); transition: border-color 300ms ease; }
.how.is-live .pc-step h3 { color: var(--on-dark-muted); transition: color 300ms ease; }
.how.is-live .pc-step > p { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; transition: grid-template-rows 300ms var(--ease-out), opacity 240ms ease; }
.how.is-live .pc-step.is-on { border-left-color: var(--gold); }
.how.is-live .pc-step.is-on h3 { color: var(--white); }
.how.is-live .pc-step.is-on > p { grid-template-rows: 1fr; opacity: 1; }
.how.is-live .pc-steps { gap: 28px; }
.how.is-live .pc-frame { position: relative; display: block; aspect-ratio: 4 / 3; max-height: calc(100svh - var(--header-h) - 80px); border-radius: var(--radius-lg); overflow: hidden; }
.how.is-live .pc-frame .pc-visual { position: absolute; inset: 0; margin: 0; opacity: 0; scale: 1.03; transition: opacity 400ms ease, scale 400ms var(--ease-out); }
.how.is-live .pc-frame .pc-visual.is-on { opacity: 1; scale: 1; z-index: 1; }
.how.is-live .pc-frame .pc-visual img, .how.is-live .pc-frame .phone { height: 100%; aspect-ratio: auto; }

/* ---------- about ---------- */
.about { padding: 88px 0; }
.about-grid { display: grid; gap: 36px; align-items: start; }
.about-photo { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.about-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-copy { display: grid; gap: 22px; align-content: start; }
.about-text { font-size: 19px; line-height: 1.6; max-width: 46ch; }
.facts { font-size: 15px; }
.facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 500; text-align: right; }
.facts .text-link { min-height: 0; }
.ig-icon { flex: none; }

/* ---------- delivery, returns and payment ---------- */
.help { padding: 88px 0; }
.help h2 { margin-bottom: 36px; max-width: 18ch; }
.help-grid { display: grid; gap: 28px; }
.help-item { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--ink); }
.help-item svg { width: 26px; height: 26px; color: var(--gold-text); }
.help-item h3 { font-family: var(--font-display); font-weight: 400; font-size: 28px; }
.help-item p { color: var(--muted); max-width: 40ch; }

/* ---------- closing band ---------- */
.close { padding: 96px 0; border-bottom: 1px solid var(--line-dark); }
.close-inner { display: grid; gap: 24px; justify-items: start; }
.close-line { max-width: 16ch; }
.close-note { color: var(--on-dark-muted); font-size: 17px; }

/* ---------- shirt page ---------- */
.crumbs { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; font-size: 15px; color: var(--muted); }
.crumbs a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; transition: color 150ms ease; }
.back { gap: 4px; margin-left: -4px; }
.back svg { transition: translate 150ms var(--ease-out); }
.product { display: grid; gap: 28px; }
.gallery { min-width: 0; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--shirt) 18%, var(--soft)); }
.slides::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: none; overflow: hidden; scroll-snap-align: start; cursor: zoom-in; }
.slide img, .slide .placeholder { width: 100%; height: 100%; object-fit: cover; transition: scale 300ms var(--ease-out); }
div.slide { cursor: default; }
.slide.zoom img { scale: 1.8; }
.dots { display: flex; justify-content: center; gap: 2px; margin-top: 6px; }
.dot { position: relative; width: 28px; height: 44px; padding: 0; border: 0; background: none; }
.dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; border: 1px solid var(--ink); transition: background-color 150ms ease, scale 150ms var(--ease-out); }
.dot[aria-current="true"]::before { background: var(--ink); scale: 1.15; }
.thumbs { display: none; gap: 8px; margin-top: 10px; }
.thumb-btn { position: relative; width: 72px; aspect-ratio: 4 / 5; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: none; transition: border-color 150ms ease; }
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.thumb-btn[aria-current="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

.details { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.details h1 { font-size: clamp(36px, 4.4vw, 54px); }
.title-actions { display: flex; flex: none; margin-top: 2px; }
.price { font-size: 22px; }
.tags { display: flex; gap: 8px; }
.tag { padding: 4px 10px; border-radius: var(--radius); background: var(--black); color: var(--gold); font-size: 13px; font-weight: 600; }
.desc { color: var(--muted); max-width: 54ch; font-size: 17px; }
.sizes-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.sizes-head .text-link svg { width: 18px; height: 18px; }
.size-options { display: flex; flex-wrap: wrap; gap: 8px; }
.size-options input { position: absolute; opacity: 0; pointer-events: none; }
.size-options label { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, scale 90ms var(--ease-out); }
.size-options label:active { scale: 0.96; }
.size-options input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--white); }
.size-options input:disabled + label { color: #77736b; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--soft) 6px 7px); font-weight: 400; cursor: not-allowed; scale: none; }
.size-options input:focus-visible + label { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.stock-note { color: var(--gold-text); font-weight: 600; }
.stock-note:empty, .line-total:empty { display: none; }
.line-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.qty-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); }
.stepper button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; transition: scale 90ms var(--ease-out); }
.stepper button:active { scale: 0.94; }
.stepper button:disabled { color: #b9b5ad; cursor: not-allowed; scale: none; }
.stepper output { min-width: 32px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.buy-actions { display: grid; gap: 10px; }
.soldout { font-family: var(--font-display); font-size: 28px; }
.msg-preview { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--soft); }
.msg-preview summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.msg-preview summary::-webkit-details-marker { display: none; }
.msg-preview summary svg:last-child { margin-left: auto; transition: rotate 200ms var(--ease-out); }
.msg-preview[open] summary svg:last-child { rotate: 180deg; }
.msg-preview .bubble { display: block; margin: 0 14px 14px auto; }
.assure { display: grid; gap: 14px; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--line); font-size: 14px; }
.assure li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.assure svg { color: var(--gold-text); margin-top: 1px; }
.assure strong { display: block; font-weight: 600; }
.assure span { color: var(--muted); }
.accs { border-bottom: 1px solid var(--line); }
.acc { border-top: 1px solid var(--line); }
.acc summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-weight: 600; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary svg { transition: rotate 200ms var(--ease-out); }
.acc[open] summary svg { rotate: 180deg; }
.acc::details-content { block-size: 0; overflow: hidden; transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete; }
.acc[open]::details-content { block-size: auto; }
.acc .facts { padding-bottom: 8px; }
.acc .facts > div:first-child { border-top: 0; }
.acc-steps { display: grid; gap: 6px; padding: 0 0 16px 20px; font-size: 15px; color: var(--muted); }
.related { padding: 80px 0; }
.related h2 { margin-bottom: 28px; }
.notfound { padding: 96px 0; }
.notfound p { margin-top: 24px; }

/* phone order bar */
.buybar { position: fixed; z-index: 9; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--black); color: var(--on-dark); translate: 0 100%; visibility: hidden; transition: translate 240ms var(--ease-out), visibility 0s 240ms; }
.buybar.show { translate: 0 0; visibility: visible; transition: translate 240ms var(--ease-out); }
.buybar-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; font-size: 13px; color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.buybar-text strong { color: var(--white); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar .btn { width: auto; min-height: 48px; padding: 0 18px; white-space: nowrap; }

/* chat button */
.fab { position: fixed; z-index: 8; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 14px; border-radius: 26px; background: var(--wa); color: var(--white); font-weight: 600; text-decoration: none; box-shadow: 0 2px 4px rgb(0 0 0 / 0.16), 0 8px 20px rgb(15 122 63 / 0.3); transition: scale 90ms var(--ease-out), background-color 150ms ease; }
.fab:active { scale: 0.96; }
.fab.is-away { translate: 0 calc(100% + 32px); visibility: hidden; transition: translate 200ms var(--ease-out), visibility 0s 200ms; }

/* toast */
.toast { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 440px; margin: 0 auto; padding: 10px 10px 10px 16px; border-radius: var(--radius-lg); background: var(--black); color: var(--white); font-size: 15px; box-shadow: var(--shadow-float); translate: 0 calc(100% + 32px); visibility: hidden; transition: translate 200ms var(--ease-out), visibility 0s 200ms; }
.toast.show { translate: 0 0; visibility: visible; transition: translate 240ms var(--ease-out); }
.toast button { flex: none; min-height: 44px; padding: 0 12px; border: 1px solid var(--gold); border-radius: var(--radius); background: none; color: var(--gold); font-size: 14px; font-weight: 600; white-space: nowrap; }
body:has(.fab) .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
body:has(.buybar.show) .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
html:has(dialog[open]) .toast { z-index: 2147483647; }

/* ---------- sheets: bag, saved, menu, size guide (native dialog) ---------- */
.sheet { position: fixed; inset: 0 0 0 auto; width: min(440px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--white); color: var(--ink); box-shadow: -16px 0 48px rgb(12 12 13 / 0.18);
  transition: translate 260ms var(--ease-out), display 260ms allow-discrete, overlay 260ms allow-discrete; }
.sheet:not([open]) { translate: 100% 0; transition-duration: 180ms; }
@starting-style { .sheet[open] { translate: 100% 0; } }
.sheet-left { inset: 0 auto 0 0; box-shadow: 16px 0 48px rgb(12 12 13 / 0.18); }
.sheet-left:not([open]) { translate: -100% 0; }
@starting-style { .sheet-left[open] { translate: -100% 0; } }
.sheet-center { inset: auto 0 0 0; width: 100%; height: auto; max-height: 88dvh; border-radius: 12px 12px 0 0; }
.sheet-center:not([open]) { translate: 0 100%; }
@starting-style { .sheet-center[open] { translate: 0 100%; } }
.sheet::backdrop, .viewer::backdrop { background: rgb(12 12 13 / 0); transition: background-color 260ms ease, display 260ms allow-discrete, overlay 260ms allow-discrete; }
.sheet[open]::backdrop, .viewer[open]::backdrop { background: rgb(12 12 13 / 0.5); }
@starting-style { .sheet[open]::backdrop, .viewer[open]::backdrop { background: rgb(12 12 13 / 0); } }
.sheet-inner { display: flex; flex-direction: column; height: 100%; max-height: inherit; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 10px 20px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { font-size: 30px; }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
.sheet-foot { display: grid; gap: 12px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.sheet-foot:empty { display: none; }
.sheet-empty { display: grid; gap: 18px; justify-items: start; padding: 32px 0; color: var(--muted); }
.lines { padding: 0; list-style: none; }
.line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.pic { display: block; width: 64px; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.line-main { display: grid; gap: 2px; align-content: start; min-width: 0; }
.line-title { font-weight: 600; text-decoration: none; }
.line-meta { color: var(--muted); font-size: 14px; }
.line .line-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.controls { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.controls .step { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: none; }
.controls .step:disabled { color: #b9b5ad; cursor: not-allowed; }
.controls .count { position: static; min-width: 30px; height: auto; background: none; color: var(--ink); font-size: 15px; line-height: 1.4; text-align: center; font-weight: 600; }
.controls .remove { min-height: 44px; margin-left: 8px; padding: 0 4px; border: 0; background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.bag-total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sheet-foot .msg-preview .bubble { max-height: 30dvh; overflow-y: auto; }
.menu-cards { display: grid; gap: 8px; padding: 12px 0; list-style: none; }
.menu-card { display: flex; align-items: center; gap: 14px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; transition: border-color 150ms ease; }
.menu-pic { flex: none; width: 56px; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.menu-pic img, .menu-pic .placeholder { width: 100%; height: 100%; object-fit: cover; }
.menu-card strong { display: block; }
.menu-count { color: var(--muted); font-size: 14px; }
.menu-links { display: grid; padding-top: 8px; }
.menu-links a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); font-weight: 500; text-decoration: none; }
.sg { display: grid; gap: 18px; padding-top: 16px; }
.sg-fit { font-size: 16px; }
.unit-toggle { display: inline-flex; justify-self: start; padding: 3px; border-radius: 24px; background: var(--soft); }
.unit-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.unit-toggle span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.unit-toggle input:checked + span { background: var(--black); color: var(--white); }
.unit-toggle input:focus-visible + span { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.sg-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.sg-table th, .sg-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.sg-table th:first-child { text-align: left; }
.sg-table thead th { color: var(--muted); font-weight: 500; font-size: 13px; }
.sg-table tbody th { font-weight: 600; }
.sg-model { padding: 12px 14px; border-left: 2px solid var(--gold); background: var(--soft); font-size: 15px; }

/* ---------- full-screen photo viewer ---------- */
.viewer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--black); color: var(--white); opacity: 1;
  transition: opacity 220ms ease, display 220ms allow-discrete, overlay 220ms allow-discrete; }
.viewer:not([open]) { opacity: 0; transition-duration: 160ms; }
@starting-style { .viewer[open] { opacity: 0; } }
.viewer-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-slide { flex: 0 0 100%; display: grid; place-items: center; padding: 56px 0; scroll-snap-align: center; }
.viewer-slide img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.viewer .icon-button { position: absolute; background: rgb(12 12 13 / 0.6); color: var(--white); }
.viewer-close { top: calc(8px + env(safe-area-inset-top)); right: 8px; }
.viewer-nav { top: 50%; translate: 0 -50%; display: none; }
.viewer-nav:disabled { opacity: 0.3; cursor: default; }
.viewer-prev { left: 12px; }
.viewer-next { right: 12px; }
.viewer-count { position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--on-dark); }

/* ---------- footer ---------- */
.site-footer { padding: 72px 0 32px; background: var(--black); color: var(--on-dark-muted); font-size: 15px; }
.footer-grid { display: grid; gap: 40px; }
.footer-brand { display: grid; gap: 14px; align-content: start; }
.footer-lockup { display: inline-flex; justify-self: start; color: var(--white); text-decoration: none; }
.lockup { font-family: var(--font-display); font-size: 36px; line-height: 1; }
.lockup.is-logo svg { width: 220px; height: auto; }
.footer-city { display: flex; align-items: center; gap: 8px; }
.footer-city svg { color: var(--gold); }
.footer-col { display: grid; gap: 2px; justify-items: start; align-content: start; }
.footer-col h2 { margin-bottom: 8px; font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--gold); }
.footer-col a, .footer-col button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background-color: transparent; color: var(--on-dark); font-size: 15px; }
.footer-col p { margin-top: 8px; font-size: 14px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line-dark); font-size: 13px; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); }
body:has(.buybar) .site-footer { padding-bottom: 104px; }

/* ---------- hover, only where a real pointer exists ---------- */
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover, .footer-col a:hover, .footer-col button:hover { background-size: 100% 1px; color: var(--white); }
  .btn:hover { translate: 0 -1px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .btn:active { translate: 0 1px; }
  .btn-primary:hover { background: var(--ink-hover); }
  .btn-gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
  .btn-wa:hover, .fab:hover { background: var(--wa-hover); border-color: var(--wa-hover); }
  .btn-small:hover, .chip:hover, .search input:hover, .sort select:hover, .thumb-btn:hover, .menu-card:hover, .size-options input:not(:disabled) + label:hover { border-color: var(--ink); }
  .chip.on:hover { background: var(--ink-hover); }
  .icon-button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
  .text-link:hover svg { translate: 3px 0; }
  .back:hover svg { translate: -3px 0; }
  .crumbs a:hover { color: var(--ink); }
  .card:has(.card-info:hover, .thumb:hover) { translate: 0 -2px; }
  .card-media:hover .thumb img, .card-media:hover .thumb .placeholder { scale: 1.03; }
  .card-media:hover .tray, .card-media:focus-within .tray { translate: 0 0; visibility: visible; transition: translate 220ms var(--ease-out); }
  .card:has(.card-info:hover, .thumb:hover) .card-name { text-decoration-color: currentColor; }
  .tray-sizes button:hover, .quick:hover { background: var(--black); border-color: var(--black); color: var(--white); }
  .heart:hover svg { color: var(--gold-text); }
  .spot-pic:hover img { scale: 1.03; }
  .swatch:not([aria-pressed="true"]):hover { translate: 0 -3px; }
  .toast button:hover { background: rgb(198 161 91 / 0.14); }
  .controls .step:hover { border-color: var(--ink); }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* the hero enters once: words rise, the photograph settles. Transform only, so nothing waits to be seen. */
  .hero-box > * { animation: rise 700ms var(--ease-out) backwards; }
  .hero-box > :nth-child(2) { animation-delay: 80ms; }
  .hero-box > :nth-child(3) { animation-delay: 160ms; }
  .hero-photo { animation: settle 1100ms var(--ease-out) backwards; }
  @keyframes rise { from { translate: 0 18px; } }
  @keyframes settle { from { scale: 1.05; } }

  /* About: the photograph develops like a print as it scrolls in (scrubbed; full colour without support). */
  @supports (animation-timeline: view()) {
    .about-photo img { animation: develop linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    @keyframes develop {
      from { filter: grayscale(1) contrast(0.6) brightness(1.3); scale: 1.06; }
      45% { filter: grayscale(0.6) contrast(0.88) brightness(1.1); }
      to { filter: none; scale: 1; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition-property: opacity, color, background-color, border-color !important; transition-duration: 120ms !important; animation: none !important; scroll-behavior: auto !important; }
  .sheet:not([open]), .sheet-left:not([open]), .sheet-center:not([open]) { translate: 0 0; opacity: 0; }
  @starting-style { .sheet[open] { translate: 0 0; opacity: 0; } }
  .sheet { transition-property: opacity, display, overlay !important; }
  .swatch[aria-pressed="true"], .tray, .card.tray-open .tray { translate: none; }
}

/* ---------- wider screens ---------- */
@media (min-width: 640px) {
  .wrap { max-width: 1344px; padding: 0 32px; }
  .hero { min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; }
  .announce ~ .site-header + main .hero { min-height: calc(100svh - var(--header-h) - 41px); }
  .announce-off .announce ~ .site-header + main .hero { min-height: calc(100svh - var(--header-h)); }
  .hero-photo { flex: 1 1 0; height: 0; min-height: 42svh; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 20px; }
  .help-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .sheet-center { inset: 0; width: min(560px, calc(100% - 48px)); height: fit-content; margin: auto; border-radius: 12px; }
  .sheet-center:not([open]) { translate: 0 24px; opacity: 0; }
  .sheet-center { transition-property: translate, opacity, display, overlay; }
  @starting-style { .sheet-center[open] { translate: 0 24px; opacity: 0; } }
}

@media (min-width: 720px) {
  .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .details { position: sticky; top: calc(var(--header-h) + 20px); }
  .buybar, body:has(.buybar) .fab { display: none; }
  body:has(.buybar) .site-footer { padding-bottom: 32px; }
  .gallery.is-many .dots { display: none; }
  .gallery.is-many .thumbs { display: flex; }
  .viewer-nav { display: grid; }
}

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .menu-button, .fab { display: none; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .spot-frame { max-height: calc(100svh - var(--header-h) - 96px); justify-self: stretch; }
  .about-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
  .lockup.is-logo svg { width: 260px; }
}

/* the photo hero: from 1024 the photograph fills the first screen and the words sit in a black box on its calm side */
@media (min-width: 1024px) {
  .hero { display: grid; }
  .hero-photo { position: absolute; inset: 0; height: 100%; object-position: 20% 50%; }
  .hero-inner { position: relative; display: flex; justify-content: flex-end; align-items: center; padding-top: 32px; padding-bottom: 32px; }
  .hero-box { width: min(660px, 52%); padding: 48px; border-radius: var(--radius-lg); background: var(--black); }
  .product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; }
  .shop, .how, .about, .help { padding: 112px 0; }
  .how.is-live { padding: 0; }
  .spot { padding: 96px 0; }
}

@media (min-width: 1200px) {
  .product { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); }
}