/* ATELIER × Shop by Fit — concept store. Editorial white, square corners,
   uppercase microtype, generous whitespace. Fit bands are the only colour. */

:root {
  --bg:#fff; --ink:#0a0a0a; --muted:#767676; --faint:#a8a8a8; --line:#e7e7e7;
  --panel:#f6f6f4; --panel2:#efefec;
  --fit-excellent:#0e9f6e; --fit-great:#5fa800; --fit-close:#c77800; --fit-off:#d23b3b;
  --font:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--ink); font:13px/1.55 var(--font); -webkit-font-smoothing:antialiased; }
button { font:inherit; cursor:pointer; background:none; border:none; color:inherit; }
input, select { font:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; }
::selection { background:var(--ink); color:#fff; }

/* ───────── header ───────── */
header { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--line); }
.bar { display:flex; align-items:center; justify-content:space-between; padding:16px 30px; gap:16px; }
.wordmark { font-size:19px; font-weight:800; letter-spacing:.34em; }
.findfit { display:inline-flex; align-items:center; gap:9px; background:var(--ink); color:#fff;
  padding:11px 20px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  transition:opacity .2s, transform .2s var(--ease); }
.findfit:hover { opacity:.85; } .findfit:active { transform:scale(.97); }
.ff-dot { width:6px; height:6px; border-radius:50%; background:var(--fit-excellent);
  box-shadow:0 0 0 0 rgba(14,159,110,.6); animation:pp 2.4s var(--ease) infinite; }
@keyframes pp { 0%{box-shadow:0 0 0 0 rgba(14,159,110,.55)} 70%{box-shadow:0 0 0 7px rgba(14,159,110,0)} 100%{box-shadow:0 0 0 0 rgba(14,159,110,0)} }
nav.cats { display:flex; gap:24px; overflow-x:auto; padding:0 30px 13px; scrollbar-width:none; }
nav.cats::-webkit-scrollbar { display:none; }
nav.cats button { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding-bottom:5px; border-bottom:1.5px solid transparent; white-space:nowrap; transition:color .2s; }
nav.cats button:hover { color:var(--ink); }
nav.cats button.on { color:var(--ink); border-bottom-color:var(--ink); }

/* ───────── fit ribbon ───────── */
.ribbon { display:none; align-items:center; gap:16px; flex-wrap:wrap;
  padding:13px 30px; background:var(--ink); color:#fff; font-size:12px;
  animation:ribbonIn .5s var(--ease); }
.ribbon.on { display:flex; }
@keyframes ribbonIn { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
.rb-id { display:flex; align-items:center; gap:12px; }
.rb-thumb { width:38px; height:48px; border-radius:6px; overflow:hidden; background:#1c1c1c;
  display:flex; align-items:center; justify-content:center; color:#666; font-size:16px; flex:none; }
.rb-thumb img { width:100%; height:100%; object-fit:cover; }
.rb-thumb.blank img { display:none; }
.rb-eyebrow { display:block; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.ribbon b { font-weight:600; font-size:13px; }
.rb-dbs { display:flex; gap:8px; flex-wrap:wrap; }
.ribbon .chip { display:inline-flex; gap:7px; align-items:center; border:1px solid rgba(255,255,255,.3);
  border-radius:980px; padding:5px 12px; font-size:11px; letter-spacing:.02em; cursor:pointer;
  white-space:nowrap; transition:background .2s,color .2s; }
.ribbon .chip:hover { border-color:rgba(255,255,255,.6); }
.ribbon .chip.on { background:#fff; color:var(--ink); border-color:#fff; }
.ribbon .chip small { opacity:.6; font-size:10px; }
.ribbon .chip.on small { opacity:.55; }
.ribbon .linkish { font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; opacity:.75; }
.ribbon .linkish:hover { opacity:1; text-decoration:underline; }
.intent { display:inline-flex; border:1px solid rgba(255,255,255,.28); border-radius:980px; overflow:hidden; }
.intent button { color:rgba(255,255,255,.8); padding:5px 13px; font-size:11px; letter-spacing:.02em; transition:background .2s,color .2s; }
.intent button.on { background:#fff; color:var(--ink); }

/* ───────── grid ───────── */
.meta-row { display:flex; justify-content:space-between; align-items:baseline; padding:24px 30px 10px;
  color:var(--muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.grid { display:grid; gap:1px; background:var(--line); border-top:1px solid var(--line);
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); }
.card { background:var(--bg); padding:20px 20px 26px; cursor:pointer; position:relative; opacity:1; }
.card.reveal { animation:cardIn .5s var(--ease) both; }
@keyframes cardIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.card:hover .pname { text-decoration:underline; }
.ph { position:relative; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--panel); }
.ph img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .5s var(--ease); }
.card:hover .ph img { transform:scale(1.03); }
.badge { position:absolute; top:11px; left:11px; background:rgba(255,255,255,.95); backdrop-filter:blur(4px);
  border:1px solid var(--line); padding:5px 9px; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  display:flex; gap:6px; align-items:center; }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex:none; }
.exp-tag { position:absolute; top:11px; right:11px; background:#fdf3d6; border:1px solid #f0dfa6; color:#8a6d0a;
  padding:4px 8px; font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.pdb { margin-top:14px; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.pbrand { margin-top:4px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.card:not([data-ranked="true"]) .pbrand { margin-top:16px; }
.pname { color:var(--muted); font-size:12.5px; margin-top:3px; min-height:18px; }
.pprice { margin-top:7px; font-size:12.5px; }
.pfit { margin-top:7px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pfit b { color:var(--ink); }

.empty { text-align:center; color:var(--muted); padding:80px 20px; font-size:13px; }
footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:44px 30px;
  color:var(--faint); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  border-top:1px solid var(--line); margin-top:34px; }
.foot-fit b { color:var(--muted); }

/* ───────── modals ───────── */
.overlay-bg { display:none; position:fixed; inset:0; background:rgba(10,10,10,.5); z-index:50;
  align-items:flex-start; justify-content:center; overflow-y:auto; padding:5vh 16px; }
.overlay-bg.on { display:flex; animation:fade .3s var(--ease); }
@keyframes fade { from{opacity:0} to{opacity:1} }
.sheet { background:#fff; width:100%; max-width:540px; padding:34px; position:relative;
  animation:sheetIn .45s var(--ease); }
.sheet.wide { max-width:1000px; }
@keyframes sheetIn { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
.x { position:absolute; top:18px; right:20px; font-size:24px; line-height:1; color:var(--muted); }
.x:hover { color:var(--ink); }
.sheet-head { margin-bottom:22px; }
.sheet-eyebrow { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:8px; }
.sheet h2 { font-size:24px; font-weight:600; letter-spacing:-.01em; }
.sheet-lead { margin-top:10px; color:var(--muted); font-size:13.5px; line-height:1.5; max-width:42ch; }

.tabs { display:flex; gap:0; border:1px solid var(--ink); margin-bottom:22px; }
.tabs button { flex:1; padding:12px 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); transition:background .2s,color .2s; }
.tabs button:not(:last-child) { border-right:1px solid var(--ink); }
.tabs button.on { background:var(--ink); color:#fff; }
.tabpane { display:none; animation:fade .3s var(--ease); }
.tabpane.on { display:block; }
.hint { color:var(--muted); font-size:12.5px; line-height:1.5; margin:4px 0 16px; }
.hint.center { text-align:center; }
.hint a { text-decoration:underline; }

/* measure preview (scan tab) */
.measure-preview { display:flex; align-items:center; gap:16px; background:var(--panel);
  border:1px solid var(--line); padding:14px; margin-bottom:22px; }
.mp-thumb { width:62px; height:80px; flex:none; background:var(--panel2); display:flex; align-items:center;
  justify-content:center; overflow:hidden; }
.mp-thumb img { width:100%; height:100%; object-fit:cover; }
.mp-meta { min-width:0; }
.mp-eyebrow { font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.mp-name { font-size:14px; font-weight:600; margin:3px 0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-change { font-size:11px; letter-spacing:.04em; color:var(--muted); text-decoration:underline; }
.mp-change:hover { color:var(--ink); }

.qrwrap { text-align:center; padding:6px 0; }
#qr { display:inline-block; padding:15px; border:1px solid var(--line); background:#fff; }
#qr img, #qr canvas { display:block; }
.waiting { font-size:12.5px; color:var(--muted); margin-top:14px; letter-spacing:.04em; }
.waiting.live { color:var(--fit-excellent); font-weight:600; }

.field { margin-bottom:15px; }
.field label { display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.field input, .field select { width:100%; border:1px solid var(--line); padding:12px 13px; background:#fff; transition:border-color .2s; }
.field input:focus, .field select:focus { outline:none; border-color:var(--ink); }
.mrow { display:grid; grid-template-columns:1fr 1fr; gap:11px 15px; }
.cta { width:100%; background:var(--ink); color:#fff; padding:15px; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; margin-top:8px; transition:opacity .2s,transform .2s var(--ease); }
.cta:hover { opacity:.88; } .cta:active { transform:scale(.985); }
.cta:disabled { opacity:.4; cursor:default; }
.ghost { width:100%; border:1px solid var(--ink); padding:13px; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; margin-top:12px; transition:background .2s,color .2s; }
.ghost:hover { background:var(--ink); color:#fff; }

.suggest { border:1px solid var(--line); border-top:0; max-height:240px; overflow:auto; display:none; }
.suggest div { padding:10px 13px; cursor:pointer; display:flex; justify-content:space-between; gap:8px; font-size:12.5px; }
.suggest div:hover { background:var(--panel); }
.suggest small { color:var(--faint); white-space:nowrap; }

.advanced { margin-top:20px; border-top:1px solid var(--line); padding-top:15px; font-size:12.5px; color:var(--muted); }
.advanced label { display:inline-flex; gap:8px; align-items:center; cursor:pointer; }

/* ───────── PDP ───────── */
.pdp { display:grid; grid-template-columns:1.05fr 1fr; gap:36px; }
@media (max-width:780px){ .pdp { grid-template-columns:1fr; } }
.pdp .gal-main { aspect-ratio:3/4; background:var(--panel); display:flex; align-items:center; justify-content:center; }
.pdp .gal-main img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.thumbs { display:flex; gap:8px; margin-top:8px; }
.thumbs img { width:58px; height:74px; object-fit:cover; border:1px solid var(--line); cursor:pointer; }
.thumbs img:hover { border-color:var(--ink); }
.pdp-brand { font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.pdp-name { color:var(--muted); margin-top:5px; font-size:15px; }
.pdp-price { margin:12px 0 3px; font-size:15px; }
.pdp-fab { color:var(--muted); font-size:12px; margin-bottom:16px; }
.verdict { border:1px solid var(--ink); padding:18px; margin:16px 0; }
.verdict-h { display:flex; align-items:center; gap:10px; font-size:15px; letter-spacing:-.01em; }
.verdict-h b { font-weight:700; }
.verdict-sub { color:var(--muted); font-size:13px; margin-top:6px; line-height:1.45; }
.sizes { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.size-pill { border:1px solid var(--line); padding:9px 14px; font-size:12px; }
.size-pill.best { border-color:var(--ink); background:var(--ink); color:#fff; }
.deltas { margin:14px 0 4px; }
.delta-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0;
  border-bottom:1px solid var(--line); font-size:13px; }
.delta-row:last-child { border-bottom:0; }
.delta-row .dn { color:var(--muted); }
.delta-row .dv .spot { color:var(--fit-excellent); }
.delta-row .dv .near { color:var(--ink); }
.delta-row .dv .off { color:var(--fit-close); }
.rel { color:var(--muted); font-size:11.5px; margin-top:12px; display:flex; align-items:center; gap:7px; }
.exp-note { background:#fdf8ec; border:1px solid #f0e3bd; color:#7a6011; padding:10px 13px; font-size:11.5px; margin:12px 0; line-height:1.45; }

/* ───────── overlay diagram ───────── */
.ov-wrap { text-align:center; }
.ov-wrap svg { display:inline-block; }
.legend { display:flex; gap:22px; justify-content:center; color:var(--muted); font-size:11.5px; margin-top:10px; }
.legend i { display:inline-block; width:18px; height:0; border-top:2px solid var(--ink); margin-right:7px; vertical-align:middle; }
.legend i.dash { border-top-style:dashed; border-top-color:var(--fit-close); }