/* ───────────────────────────────────────────────────────────────
   REVERA Floor — you are standing inside the shop.

   The camera lives under the ceiling and inside the walls, so the
   store is a place you are in rather than a model you look at.
   Staff walk the floor and talk to you, other customers buy things
   while you watch, offers hang from the ceiling, and anything you
   put in the bag goes onto your own rail by the till.
   ─────────────────────────────────────────────────────────────── */
:root{
  --paper:#f1f4f7; --ink:#151a21; --ink-2:#3f4853; --muted:#79838f; --faint:#9aa3ad;
  --line:rgba(21,26,33,.11); --line-2:rgba(21,26,33,.07);
  --brass:#1f5fae; --brass-hi:#4b8fd8; --clay:#1f5fae;
  --ok:#2f7d55; --ok-bg:rgba(47,125,85,.1);
  --warn:#8a6a2b; --warn-bg:rgba(168,116,43,.12);
  --bad:#b03a35; --bad-bg:rgba(168,72,43,.1);
  --panel:rgba(255,255,255,.91);
  --f:"Cairo",system-ui,"Segoe UI",Tahoma,sans-serif;
  --f-latin:"Cormorant",Georgia,serif;
  --sh:0 14px 40px -18px rgba(21,26,33,.34), 0 2px 6px -2px rgba(21,26,33,.06);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--f);color:var(--ink);background:var(--paper);overflow:hidden;
  -webkit-font-smoothing:antialiased}
#stage{display:block;position:fixed;inset:0;touch-action:none}
.vig{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 120% 95% at 50% 42%,
    rgba(21,26,33,0) 42%, rgba(21,26,33,.09) 76%, rgba(21,26,33,.2) 100%)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:7px}
.num{font-variant-numeric:tabular-nums;direction:ltr;display:inline-block;unicode-bidi:isolate}
.panel{position:fixed;background:var(--panel);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sh)}
.mark{width:34px;height:34px;flex:none;display:block}

/* ── top bar ───────────────────────────────────────────────────── */
.bar{top:12px;left:12px;right:12px;height:60px;display:flex;align-items:center;gap:11px;
  padding:0 10px 0 12px;z-index:8}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .wm{font-family:var(--f-latin);font-size:22px;font-weight:600;letter-spacing:.3em;
  direction:ltr;padding-inline-start:.3em;line-height:1}
.brand .tl{font-size:9.5px;color:var(--faint);letter-spacing:.14em;margin-top:3px}
.vr{width:1px;height:30px;background:var(--line);flex:none}
.search{position:relative;flex:1;max-width:300px;min-width:0}
.search input{width:100%;height:38px;border:1px solid var(--line);border-radius:10px;
  background:rgba(21,26,33,.035);padding:0 34px 0 12px;font:inherit;font-size:13.5px;color:inherit}
.search input::placeholder{color:var(--faint)}
.search input:focus{background:#fff;border-color:rgba(154,122,68,.5);outline:none}
/* The glass is 30px tall and was pinned by a top that was hand-picked per
   breakpoint for the input height there — 11, 12, 14 — and none of the
   three centred it: at 44px it sat 7px low, flush with the bottom edge.
   Centre it once and it follows whatever height the field has. */
.search .mag{position:absolute;inset-inline-end:11px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.search kbd{position:absolute;inset-inline-start:9px;top:9px;font:inherit;font-size:11px;
  color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:1px 6px;pointer-events:none}
.search input:focus ~ kbd,.search input:not(:placeholder-shown) ~ kbd{display:none}
.results{position:absolute;top:44px;inset-inline:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--sh);overflow:hidden;max-height:300px;overflow-y:auto;display:none}
.results.on{display:block}
.res{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;cursor:pointer;
  padding:8px 11px;text-align:start;border-bottom:1px solid var(--line-2)}
.res:last-child{border-bottom:0}
.res:hover,.res[data-cur="1"]{background:rgba(21,26,33,.05)}
.res img{width:26px;height:34px;object-fit:contain;flex:none}
.res .rm{flex:1;min-width:0}
.res b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res span{display:block;font-size:11px;color:var(--muted)}
.res em{font-style:normal;font-size:12px;color:var(--ink-2);flex:none}
.noRes{padding:14px;font-size:12.5px;color:var(--muted);text-align:center;margin:0}
.where{flex:none;min-width:0}
.where .wn{font-weight:600;font-size:14px;white-space:nowrap}
.where .ws{font-size:11.5px;color:var(--muted);white-space:nowrap}
.bar .spacer{flex:1}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);flex:none;
  background:var(--ok-bg);border-radius:999px;padding:6px 12px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block;animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.iconBtn{width:38px;height:38px;flex:none;border-radius:10px;border:1px solid var(--line);background:#fff;
  cursor:pointer;display:grid;place-items:center;position:relative;transition:background .18s}
.iconBtn:hover{background:rgba(21,26,33,.05)}
.iconBtn b{position:absolute;top:-4px;inset-inline-end:-4px;min-width:16px;height:16px;border-radius:8px;
  background:var(--bad);color:#fff;font-size:10px;display:grid;place-items:center;font-weight:600;
  border:2px solid #fff;padding:0 2px}
.langBtn{display:inline-flex;align-items:center;gap:6px;height:38px;flex:none;cursor:pointer;
  border:1px solid var(--line);background:#fff;border-radius:10px;padding:0 10px;color:var(--ink-2);
  transition:background .18s}
.langBtn:hover{background:rgba(21,26,33,.05)}
.langBtn b{font-size:11.5px;font-weight:700;letter-spacing:.06em;font-family:var(--f-latin),system-ui;
  direction:ltr;min-width:16px;text-align:center}
@media (max-width:1180px){ .langBtn svg{display:none} .langBtn{padding:0 9px} }
.bagBtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;
  border-radius:10px;padding:0 12px;cursor:pointer;font-size:13.5px;height:38px;flex:none}
.bagBtn b{min-width:20px;height:20px;border-radius:10px;background:var(--ink);color:#fff;font-size:11.5px;
  display:grid;place-items:center}
.me{display:flex;align-items:center;gap:9px;flex:none}
.me i{width:34px;height:34px;border-radius:50%;background:#dfe6ee;display:grid;place-items:center;
  font-size:13px;font-weight:600;color:var(--ink-2);flex:none;font-style:normal}
.me b{display:block;font-size:12.5px;font-weight:600;line-height:1.35}
.me span{display:block;font-size:11px;color:var(--muted);line-height:1.35}

/* ── stat cards ────────────────────────────────────────────────── */
.stats{position:fixed;top:84px;inset-inline-start:12px;display:flex;flex-direction:column;gap:8px;
  z-index:6;width:200px}
.stat{background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:14px;padding:10px 13px;box-shadow:var(--sh)}
.stat .st{font-size:11px;color:var(--muted)}
.stat .sv{display:flex;align-items:baseline;gap:7px;margin-top:1px}
.stat .sv b{font-size:21px;font-weight:700;line-height:1.25}
.stat .sv u{text-decoration:none;font-size:11.5px;font-weight:600}
.stat .sv u.up{color:var(--ok)} .stat .sv u.dn{color:var(--bad)}
.stat .ss{font-size:10.5px;color:var(--faint);margin-top:1px}
.stat .track{height:3px;border-radius:2px;background:rgba(21,26,33,.09);margin-top:7px;overflow:hidden}
.stat .track i{display:block;height:100%;border-radius:2px;background:var(--brass);transition:width .6s}

/* ── camera controls ───────────────────────────────────────────── */
.cam{inset-inline-end:12px;top:50%;translate:0 -50%;z-index:6;display:flex;flex-direction:column;
  padding:5px;gap:3px;border-radius:14px}
.cam button{width:34px;height:34px;border:0;background:none;border-radius:9px;cursor:pointer;
  display:grid;place-items:center;color:var(--ink-2);transition:background .16s}
.cam button:hover{background:rgba(21,26,33,.07);color:var(--ink)}
.cam button[aria-pressed="true"]{background:var(--ink);color:#fff}
.cam hr{border:0;border-top:1px solid var(--line);margin:2px 4px;width:100%}

/* ── fixture list ──────────────────────────────────────────────── */
.fix{bottom:96px;inset-inline-start:12px;width:272px;z-index:6;padding:0;overflow:hidden}
.tabs{display:flex;gap:2px;padding:7px 7px 0}
.tabs button{flex:1;border:0;background:none;cursor:pointer;border-radius:9px 9px 0 0;padding:7px 4px 9px;
  font-size:11.5px;color:var(--muted);position:relative;
  /* four tabs share 258px, so a label that wraps pushes its count onto a
     third line and the row grows into the card below it */
  white-space:nowrap;min-width:0}
.tabs button[aria-selected="true"]{color:var(--ink);font-weight:600}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;bottom:0;inset-inline:8px;
  height:2px;border-radius:2px;background:var(--brass)}
.tabs em{font-style:normal;color:var(--faint);font-weight:400}
.fixBody{border-top:1px solid var(--line);max-height:216px;overflow-y:auto;padding:6px;overscroll-behavior:contain}
.fixBody.planMode{max-height:304px;overflow:hidden}
.fixRow{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;cursor:pointer;
  padding:7px;border-radius:10px;text-align:start;transition:background .16s}
.fixRow:hover,.fixRow[aria-current="true"]{background:rgba(21,26,33,.055)}
.fixRow > i{width:8px;height:24px;border-radius:3px;flex:none}
.fixRow .fm{flex:1;min-width:0}
.fixRow .fm b{display:block;font-size:12.5px;font-weight:500}
.fixRow .fm span{display:block;font-size:10.5px;color:var(--muted)}
.fixRow .fr{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.bar2{width:56px;height:3px;border-radius:2px;background:rgba(21,26,33,.1);overflow:hidden}
.bar2 i{display:block;height:100%;border-radius:2px;background:var(--brass)}
.badge{font-size:10px;font-weight:600;border-radius:999px;padding:2px 8px;white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.badge.sale{background:var(--clay);color:#fff}
.plan{padding:4px 4px 0}
.plan svg{width:100%;height:auto;display:block;border-radius:10px;overflow:visible}
.plan .pf{cursor:pointer;transition:opacity .16s}
.plan .pf:hover{opacity:.6}
.planHint{margin:7px 2px 4px;font-size:10.5px;color:var(--muted);text-align:center}

/* ── the zone strip: the always-visible way to walk the shop ──── */
.strip{bottom:12px;left:50%;translate:-50% 0;z-index:7;display:flex;align-items:center;gap:5px;
  padding:6px;border-radius:16px;max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .sl{font-size:10.5px;color:var(--faint);padding:0 8px;white-space:nowrap;flex:none}
.zbtn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;flex:none;
  border-radius:12px;padding:5px 11px 5px 6px;cursor:pointer;position:relative;transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s,opacity .16s}
.zbtn:hover{background:rgba(21,26,33,.045)}
.zbtn[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.zbtn img{width:28px;height:34px;object-fit:contain;flex:none;
  background:rgba(21,26,33,.045);border-radius:7px;padding:1px}
.zbtn[aria-current="true"] img{background:rgba(255,255,255,.14)}
.zbtn .zt{text-align:start;line-height:1.3}
.zbtn .zt b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap}
.zbtn .zt span{display:block;font-size:10px;opacity:.6;white-space:nowrap}
.zbtn .zs{position:absolute;top:-6px;inset-inline-start:-4px;background:var(--clay);color:#fff;
  font-size:9px;font-weight:700;border-radius:999px;padding:1px 6px;border:2px solid var(--paper)}
.viewBtn{width:38px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;
  cursor:pointer;display:grid;place-items:center;flex:none;color:var(--ink-2)}
.viewBtn[aria-expanded="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── view options popover ──────────────────────────────────────── */
.views{bottom:66px;left:50%;translate:-50% 0;z-index:8;padding:9px;width:248px;display:none}
.views.on{display:block;animation:cardIn .22s cubic-bezier(.3,.8,.2,1)}
.views h4{margin:2px 6px 7px;font-size:11px;color:var(--muted);font-weight:600}
.tgl{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;cursor:pointer;
  border-radius:10px;padding:8px;font-size:12.5px;text-align:start;transition:background .16s}
.tgl:hover{background:rgba(21,26,33,.05)}
.tgl .sw2{width:32px;height:19px;border-radius:999px;background:rgba(21,26,33,.16);flex:none;
  position:relative;transition:background .2s}
.tgl .sw2::after{content:"";position:absolute;top:2.5px;inset-inline-start:2.5px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tgl[aria-pressed="true"] .sw2{background:var(--ok)}
.tgl[aria-pressed="true"] .sw2::after{transform:translateX(-13px)}
html[dir="ltr"] .tgl[aria-pressed="true"] .sw2::after{transform:translateX(13px)}
.tgl span{flex:1}

/* ── order timeline ────────────────────────────────────────────── */
.flow{top:84px;inset-inline-end:58px;width:250px;z-index:6;padding:12px 14px;display:none}
.flow.on{display:block;animation:cardIn .3s cubic-bezier(.3,.8,.2,1)}
@keyframes cardIn{from{transform:translateY(-8px);opacity:.4}}
.flow h3{margin:0;font-size:12.5px;font-weight:600;display:flex;justify-content:space-between;gap:8px}
.flow h3 button{border:0;background:none;cursor:pointer;color:var(--muted);font-size:13px;padding:0}
.flow .fo{font-size:10.5px;color:var(--muted);margin:2px 0 11px}
.step{display:flex;gap:10px;align-items:flex-start;position:relative;padding-bottom:12px}
.step:last-child{padding-bottom:0}
.step > i{width:13px;height:13px;border-radius:50%;flex:none;margin-top:2px;background:#fff;
  box-shadow:inset 0 0 0 2px rgba(21,26,33,.18);position:relative;z-index:1}
.step::before{content:"";position:absolute;inset-inline-start:6px;top:15px;bottom:-1px;width:1.5px;
  background:rgba(21,26,33,.12)}
.step:last-child::before{display:none}
.step.done > i{background:var(--ok);box-shadow:inset 0 0 0 2px var(--ok)}
.step.done::before{background:var(--ok)}
.step.now > i{box-shadow:inset 0 0 0 3px var(--brass);animation:pulse 2s infinite}
.step .sm{flex:1;line-height:1.45}
.step .sm b{display:block;font-size:12px;font-weight:500}
.step.now .sm b{font-weight:700}
.step .sm span{display:block;font-size:10.5px;color:var(--muted)}
.step:not(.done):not(.now) .sm b{color:var(--faint)}

/* ── live feed ─────────────────────────────────────────────────── */
.feed{bottom:96px;inset-inline-end:12px;width:244px;z-index:5;padding:10px 12px}
.feed h4{margin:0 0 8px;font-size:10.5px;color:var(--muted);font-weight:600;
  display:flex;align-items:center;gap:6px}
.feed h4 i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 2.2s infinite}
.fe{display:flex;gap:8px;align-items:center;font-size:11.5px;padding:4px 0;line-height:1.5;
  animation:feedIn .4s ease}
@keyframes feedIn{from{opacity:0;transform:translateY(5px)}}
.fe img{width:20px;height:24px;object-fit:contain;flex:none}
.fe span{flex:1;color:var(--ink-2)}
.fe em{font-style:normal;font-size:10px;color:var(--faint);flex:none}

/* ── notifications ─────────────────────────────────────────────── */
.notes{top:84px;inset-inline-end:58px;width:min(306px,calc(100vw - 24px));z-index:9;padding:0;
  overflow:hidden;display:none}
.notes.on{display:block;animation:cardIn .28s cubic-bezier(.3,.8,.2,1)}
.notes h3{margin:0;padding:12px 14px 10px;font-size:12.5px;font-weight:600;
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px}
.notes h3 button{border:0;background:none;cursor:pointer;font-size:11px;color:var(--brass)}
.note{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-2);align-items:flex-start}
.note:last-child{border-bottom:0}
.note i{width:7px;height:7px;border-radius:50%;flex:none;margin-top:6px}
.note b{display:block;font-size:12px;font-weight:500;line-height:1.5}
.note span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}

/* ── hover tag + toast ─────────────────────────────────────────── */
.tag{position:fixed;z-index:10;pointer-events:none;background:var(--ink);color:#fff;font-size:11.5px;
  padding:6px 11px;border-radius:9px;white-space:nowrap;opacity:0;transition:opacity .14s;
  transform:translate(-50%,-168%);box-shadow:0 8px 20px -8px rgba(0,0,0,.5);line-height:1.5}
.tag.on{opacity:1}
.tag b{display:block;font-weight:600}
.tag span{color:rgba(255,255,255,.66);font-size:10.5px}
.tag::after{content:"";position:absolute;bottom:-4px;left:50%;translate:-50% 0;width:8px;height:8px;
  background:var(--ink);rotate:45deg;border-radius:1px}
/* ── where to go and pay ─────────────────────────────────────────
   A shop you walk around in can put the thing you need next behind
   you, and nothing on the screen said so: you could be carrying four
   pieces and have no idea the till was over your left shoulder. This
   is the marker a game puts on a team-mate — it sits over the till
   while the till is in frame, and when it is not it pins to the edge
   of the screen with the arrow turned towards it. Pressing it walks
   you there, so it is the way as well as the sign. */
.tillMark{position:fixed;left:0;top:0;z-index:11;display:flex;align-items:center;gap:8px;
  padding:8px 13px 8px 9px;border:0;border-radius:99px;cursor:pointer;
  background:var(--ink);color:#fff;box-shadow:0 10px 26px -10px rgba(0,0,0,.6);
  font:inherit;text-align:start;white-space:nowrap;
  transition:background-color .16s,opacity .2s;will-change:transform}
.tillMark[hidden]{display:none}
.tillMark:hover{background:#2a3645}
.tillMark:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tillMarkArrow{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;
  background:var(--clay);color:#fff;flex:none}
.tillMarkArrow svg{display:block}
.tillMarkText{display:flex;flex-direction:column;line-height:1.3}
.tillMarkText b{font-size:12.5px;font-weight:700}
.tillMarkText span{font-size:10.5px;color:rgba(255,255,255,.62)}
/* standing at it, the arrow has nothing left to point at */
.tillMark.here .tillMarkArrow{background:rgba(255,255,255,.17)}
.tillMark.here .tillMarkArrow svg{display:none}
.tillMark.here .tillMarkArrow::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff}
@media (max-width:620px){ .tillMarkText span{display:none} .tillMark{padding:7px 11px 7px 8px} }

.toast{position:fixed;top:84px;left:50%;translate:-50% 0;z-index:12;background:var(--ink);color:#fff;
  font-size:13px;padding:10px 18px;border-radius:12px;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;transform:translate(-50%,-10px);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.55);display:flex;align-items:center;gap:9px}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── loading ───────────────────────────────────────────────────── */
.loading{position:fixed;inset:0;display:grid;place-items:center;background:var(--paper);z-index:20;
  transition:opacity .55s;text-align:center}
.loading.gone{opacity:0;pointer-events:none}
.loading .mark{width:62px;height:62px;margin:0 auto 16px}
.loading .lb{font-family:var(--f-latin);font-size:30px;letter-spacing:.42em;direction:ltr;
  padding-inline-start:.42em;color:var(--ink);font-weight:600}
.loading p{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.loading .lt{width:170px;height:3px;border-radius:2px;background:rgba(21,26,33,.1);
  margin:16px auto 0;overflow:hidden}
.loading .lt i{display:block;height:100%;width:8%;border-radius:2px;background:var(--brass);
  transition:width .4s}

/* ── the product overlay: the piece itself, turnable, over the shop ── */
.ov{position:fixed;inset:0;z-index:14;display:none;align-items:center;justify-content:center;
  padding:16px;background:rgba(21,26,33,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.ov.on{display:flex;animation:ovIn .26s ease}
@keyframes ovIn{from{opacity:0}}
.ovCard{position:relative;display:flex;gap:0;width:min(960px,100%);
  height:min(676px,calc(100vh - 32px));
  background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(21,26,33,.55);
  animation:ovUp .3s cubic-bezier(.3,.8,.2,1)}
@keyframes ovUp{from{transform:translateY(16px) scale(.985)}}
.ovView{position:relative;flex:1 1 46%;min-width:0;
  background:radial-gradient(ellipse at 50% 38%,#fbfaf7 0%,#eeeae1 72%,#e3ded3 100%)}
/* On a big screen the piece gets the room: a 960px card on a 2560px screen
   left the garment a few hundred pixels tall, too small to see its cloth. */
@media (min-width:1280px) and (min-height:760px){
  .ovCard{width:min(1180px,90vw);height:min(800px,calc(100vh - 48px))}
  .ovView{flex-basis:56%}.ovSide{flex-basis:44%}
}
@media (min-width:1700px) and (min-height:900px){
  .ovCard{width:min(1440px,86vw);height:min(940px,calc(100vh - 64px))}
  .ovView{flex-basis:60%}.ovSide{flex-basis:40%;padding:26px 30px}
}
/* zoom: two buttons in the corner of the 3D view */
.ovZoom{position:absolute;bottom:22px;inset-inline-end:16px;z-index:3;display:flex;flex-direction:column;
  border-radius:12px;overflow:hidden;background:rgba(255,255,255,.92);box-shadow:var(--sh);border:1px solid var(--line)}
.ovZoom[hidden]{display:none}
.ovZoom button{width:36px;height:36px;border:0;background:transparent;font:600 18px/1 var(--f-latin,system-ui);
  color:var(--ink-2);cursor:pointer;transition:background-color .15s,color .15s}
.ovZoom button+button{border-top:1px solid var(--line)}
.ovZoom button:hover:not(:disabled){background:rgba(21,26,33,.06);color:var(--ink)}
.ovZoom button:disabled{opacity:.35;cursor:default}
.ovZoom button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* stacked layout: the close button owns the top corner, so zoom goes low */
@media (max-width:860px){ .ovZoom{top:auto;bottom:66px;flex-direction:row}
  .ovZoom button+button{border-top:0;border-inline-start:1px solid var(--line)} }
#ovCanvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
#ovCanvas.drag{cursor:grabbing}
.ovHint{position:absolute;bottom:12px;left:50%;translate:-50% 0;font-size:10.5px;color:var(--muted);
  background:rgba(255,255,255,.85);border-radius:999px;padding:5px 12px;pointer-events:none;
  white-space:nowrap}
.ovSale{position:absolute;top:14px;inset-inline-start:14px;background:var(--clay);color:#fff;
  font-size:11px;font-weight:700;border-radius:999px;padding:5px 12px}
.ovSide{flex:1 1 54%;min-width:0;padding:18px 20px;overflow:auto;display:flex;
  flex-direction:column;gap:10px;justify-content:space-between}
.ovClose{position:absolute;top:12px;inset-inline-end:12px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;
  font-size:15px;color:var(--muted);z-index:2}
.ovZone{font-size:10.5px;color:var(--brass);letter-spacing:.07em}
.ovZone b{color:var(--faint);font-weight:400;letter-spacing:0}
.ovCard h2{margin:2px 0 0;font-size:21px;font-weight:700;line-height:1.35}
.ovEn{font-family:var(--f-latin);font-size:14px;color:var(--muted);direction:ltr;letter-spacing:.04em}
.ovPrice{font-size:23px;font-weight:700;margin-top:4px;display:flex;align-items:baseline;gap:9px}
.ovPrice s{color:var(--faint);font-size:14px;font-weight:400}
.ovDesc{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ovLive{background:rgba(21,26,33,.035);border:1px solid var(--line-2);border-radius:12px;padding:9px 11px}
.ovLive .lh{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;
  margin-bottom:7px;gap:8px}
.ovLive .lh span{color:var(--muted)}
.ovLive .track{height:5px;border-radius:3px;background:rgba(21,26,33,.09);overflow:hidden}
.ovLive .track i{display:block;height:100%;border-radius:3px;transition:width .7s}
.ovLive .lf{font-size:10.5px;color:var(--muted);margin-top:6px;display:flex;justify-content:space-between;gap:8px}
/* ── the views of one piece ───────────────────────────────────────
   The turnable 3D sits on the canvas; every flat view is an <img> laid
   over it. One rail of thumbnails switches between them, and it takes
   as many as the piece has — today that is the photograph and a detail
   crop of it, because there is one photograph per piece in the assets. */
.ovView{position:relative}
#ovStill{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:7% 9% 12%;background:transparent}
#ovStill[hidden]{display:none}
#ovStill.zoom{object-fit:cover;object-position:50% 16%;padding:0}
.ovShots{position:absolute;bottom:10px;inset-inline-start:50%;translate:-50% 0;z-index:3;
  display:flex;gap:6px;padding:5px;border-radius:13px;background:var(--panel);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--sh)}
.ovShots:empty{display:none}
.ovShot{width:42px;height:50px;border-radius:9px;border:1.5px solid transparent;background:#fff;
  cursor:pointer;padding:2px;display:grid;place-items:center;overflow:hidden;position:relative}
.ovShot img{width:100%;height:100%;object-fit:contain}
.ovShot.is3d{display:grid;place-items:center;color:var(--ink-2);font-size:9.5px;font-weight:700;
  letter-spacing:.06em;background:rgba(21,26,33,.05)}
.ovShot[aria-selected="true"]{border-color:var(--ink)}
.ovShot:hover{border-color:var(--line)}
/* how the 3D piece is shown: on a hanger, floating, on a form, flat, folded */
.ovStyles{position:absolute;bottom:72px;inset-inline:12px;z-index:3;display:flex;flex-wrap:wrap;
  justify-content:center;gap:5px;pointer-events:none}
.ovStyles[hidden],.ovStyles:empty{display:none}
.ovStyles button{pointer-events:auto;font:inherit;font-size:11px;font-weight:600;cursor:pointer;
  padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);
  background:rgba(255,255,255,.88);box-shadow:var(--sh)}
.ovStyles button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ovStyles button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:860px){
  .ovShots{bottom:7px;padding:4px;gap:5px}
  .ovShot{width:36px;height:43px}
  /* a phone's picture is short: one row along the top that scrolls sideways,
     clear of the close button, rather than two rows over the garment */
  .ovStyles{top:10px;bottom:auto;inset-inline:10px 54px;flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;scrollbar-width:none;pointer-events:auto;padding:2px}
  .ovStyles::-webkit-scrollbar{display:none}
  .ovStyles button{flex:none;font-size:10.5px;padding:4px 9px;box-shadow:none}
  .ovSale:not([hidden]) ~ .ovStyles{top:40px}
}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;
  background:var(--line-2);border:1px solid var(--line-2);border-radius:11px;overflow:hidden}
.specs div{background:#fff;padding:8px 10px;min-width:0}
.specs dt{font-size:10px;color:var(--muted);margin-bottom:2px}
.specs dd{margin:0;font-size:11.5px;font-weight:500;line-height:1.45}
.pick{display:flex;flex-direction:column;gap:7px}
.pick .pl{font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.pick .pl b{color:var(--ink);font-weight:500}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.sw{width:27px;height:27px;border-radius:50%;cursor:pointer;border:0;padding:0;
  box-shadow:inset 0 0 0 1px rgba(21,26,33,.18);transition:transform .16s}
.sw:hover{transform:scale(1.08)}
.sw[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(21,26,33,.18),0 0 0 2px #fff,0 0 0 3.5px var(--ink)}
.sizes{display:flex;flex-wrap:wrap;gap:7px}
.sz{min-width:44px;height:35px;border:1px solid var(--line);background:#fff;border-radius:10px;
  cursor:pointer;font-size:12.5px;transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s,opacity .16s}
.sz[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.sz[disabled]{color:var(--faint);background:rgba(21,26,33,.03);cursor:not-allowed;
  text-decoration:line-through;text-decoration-color:rgba(21,26,33,.3)}
.add{height:46px;border:0;border-radius:12px;background:var(--ink);color:#fff;font-weight:700;
  font-size:14.5px;cursor:pointer;transition:background .2s;display:flex;align-items:center;
  justify-content:center;gap:9px;flex:1}
.add:hover{background:#000}
.hintRow{display:flex;gap:8px}
.ghost{flex:1;height:40px;border:1px solid var(--line);background:#fff;border-radius:11px;
  cursor:pointer;font-size:12.5px;transition:background .16s}
.tryBtn{height:46px;flex:1;border:0;border-radius:12px;background:var(--brass);color:#fff;
  font-weight:700;font-size:14.5px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:8px;transition:background .2s}
.tryBtn:hover{background:#17457a}
.addRow{display:flex;gap:8px}
.ghost:hover{background:rgba(21,26,33,.05)}
.ovNote{margin:0;font-size:11.5px;color:var(--ok);min-height:1.3em;text-align:center;line-height:1.5}

/* ── the fitting room: build a top and a bottom into one set ───── */
.fit{position:fixed;inset:0;z-index:16;display:none;background:#07080a;color:#fff}
.fit.on{display:flex;animation:ovIn .32s ease}
.fit .ink{position:absolute;top:0;inset-inline:0;height:4px;background:var(--brass);z-index:3}
.fitSide{flex:0 0 clamp(320px,33%,452px);min-width:0;padding:22px 28px 20px;position:relative;
  display:flex;flex-direction:column;gap:11px;background:#0b0d10;overflow:auto}
.fitSide .eyebrow{font-size:11.5px;letter-spacing:.14em;color:var(--brass-hi);font-weight:700}
.fitSide h2{margin:0;font-size:clamp(28px,2.7vw,38px);font-weight:800;line-height:1.06;
  letter-spacing:-.01em}
.fitSide .lede{margin:0;font-size:12px;line-height:1.65;color:rgba(255,255,255,.55);max-width:36ch}
.fitRow2{border-top:1px solid rgba(255,255,255,.12);padding-top:10px}
.fitRow2 .hd{display:flex;align-items:baseline;gap:10px}
.fitRow2 .hd em{font-style:normal;font-size:10.5px;letter-spacing:.12em;color:rgba(255,255,255,.4);flex:none}
.fitRow2 .hd b{font-size:14.5px;font-weight:600;flex:1;min-width:0}
.fitRow2 .hd span{font-size:13px;color:rgba(255,255,255,.65);flex:none}
.fitSizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.fitSizes button{min-width:41px;height:31px;border-radius:999px;cursor:pointer;font-size:12px;
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.26);transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s,opacity .16s}
.fitSizes button:hover{border-color:rgba(255,255,255,.6)}
/* The house blue, not white. On a black panel there was pure white on the
   chosen size, pure white on the bag button, pure white on the discount
   badge and pure white on the tick — four things all shouting the same
   loudest note, so none of them led. White is kept for the one thing you
   press at the end; everything chosen along the way is blue. */
.fitSizes button[aria-pressed="true"]{background:var(--brass);color:#fff;
  border-color:var(--brass);font-weight:700}
.fitSizes button[disabled]{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.fitTotal{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:11px}
.fitTotal s{display:block;font-size:13px;color:rgba(255,255,255,.4)}
.fitTotal .big{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.fitTotal .big b{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.01em}
.fitTotal .save{background:var(--brass);color:#fff;border-radius:999px;padding:5px 12px;
  font-size:11.5px;font-weight:700}
.fitAdd{margin-top:11px;height:50px;width:100%;border:0;border-radius:999px;background:#fff;
  color:#0b0d10;font-weight:800;font-size:16px;cursor:pointer;transition:transform .16s}
.fitAdd:hover{transform:translateY(-1px)}
.fitDisc{position:absolute;top:22px;inset-inline-end:26px;width:74px;height:74px;display:grid;
  place-items:center;text-align:center;line-height:1.1;color:#0b0d10;font-weight:800;
  background:#fff;clip-path:polygon(50% 0,61% 9%,75% 5%,81% 18%,95% 20%,95% 34%,106% 44%,
    97% 54%,103% 67%,90% 74%,89% 88%,75% 88%,64% 98%,50% 92%,36% 98%,25% 88%,11% 88%,
    10% 74%,-3% 67%,3% 54%,-6% 44%,5% 34%,5% 20%,19% 18%,25% 5%,39% 9%);
  transform:rotate(-8deg)}
.fitDisc b{font-size:20px;display:block} .fitDisc span{font-size:8.5px;letter-spacing:.08em}
.fitClose{position:absolute;top:18px;inset-inline-end:18px;z-index:4;height:38px;padding:0 15px;
  border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);
  color:#fff;cursor:pointer;font-size:12.5px;display:flex;align-items:center;gap:7px}
.fitClose:hover{background:rgba(255,255,255,.15)}

.fitStage{flex:1;position:relative;min-width:0;
  background:radial-gradient(ellipse at 50% 46%,#16191e 0%,#07080a 72%)}
.fitGrid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.3fr 1fr;
  grid-template-rows:.94fr 1.06fr;padding:44px 72px 30px;gap:0}
.fitCell{min-width:0;min-height:0;display:flex;justify-content:center;padding:0 6px}
.fitCell.t{align-items:flex-end;margin-bottom:-2.5%}
.fitCell.b{align-items:flex-start;margin-top:-2.5%}
.fitCell img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  transition:opacity .4s,transform .4s,filter .4s}
.fitCell.dim img{opacity:.14;transform:scale(.8);cursor:pointer}
.fitCell.dim:hover img{opacity:.34}
.fitNav{position:absolute;width:40px;height:40px;border-radius:50%;cursor:pointer;z-index:2;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;
  display:grid;place-items:center;transition:background .16s}
.fitNav:hover{background:rgba(255,255,255,.2)}
.fitPlus{position:absolute;left:50%;top:50%;translate:-50% -50%;width:54px;height:54px;
  border-radius:50%;background:var(--brass);color:#fff;display:grid;place-items:center;
  font-size:26px;font-weight:300;z-index:2;box-shadow:0 0 0 9px rgba(31,95,174,.22),
  0 0 34px rgba(31,95,174,.7);pointer-events:none;line-height:1}
.fitCount{position:absolute;inset-inline-start:30px;font-size:11px;letter-spacing:.12em;
  color:rgba(255,255,255,.45);z-index:2}
.fitCount b{color:#fff;font-weight:600;margin-inline-start:8px}

@media (max-width:980px){
  /* The fit readout doubles the panel's height, which pushed the stage off a
     phone screen. Same three areas, laid out as chips on one or two rows. */
  /* On a phone this panel carries more than a screen can hold, so the stage
     keeps a fixed slice and the panel scrolls inside itself — cramming it
     would cost the numbers that are the whole point. */
  .fitVerdict{margin-top:7px;padding-top:7px}
  .fitVerdict .top{margin-bottom:5px;font-size:11.5px}
  .fitVerdict .areas{display:flex;flex-wrap:wrap;gap:4px}
  .fitVerdict .area{padding:3px 9px;border-radius:999px;
    background:rgba(255,255,255,.07);font-size:10px;gap:5px}
  .fitVerdict .area em{margin-inline-start:0}
  .fitVerdict .vn{display:none}
  .fitRow2{padding-top:10px}
  .meBtn{padding:8px 11px;font-size:11.5px} .meBtn .sm{font-size:10px}
  .fit.on{flex-direction:column-reverse}
  .fitSide{flex:1 1 auto;min-height:0;overflow:auto;padding:18px 20px 20px;gap:10px}
  .fitSide h2{font-size:26px} .fitSide .lede{display:none}
  .fitDisc{width:56px;height:56px;top:12px} .fitDisc b{font-size:15px}
  .fitStage{flex:0 0 34vh;min-height:0}
  .fitGrid{padding:30px 40px 18px;grid-template-columns:.7fr 1.6fr .7fr}
  .fitTotal{margin-top:10px;position:sticky;bottom:-20px;background:#0b0d10;padding-bottom:6px}
  .fitAdd{height:48px;margin-top:10px}
}


/* ── first-run tips ────────────────────────────────────────────── */
.tips{position:fixed;inset:0;z-index:18;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(21,26,33,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tips.on{display:flex;animation:ovIn .3s ease}
.tipsCard{width:min(430px,100%);background:#fff;border-radius:20px;padding:24px 24px 20px;
  box-shadow:0 36px 80px -28px rgba(21,26,33,.5);animation:ovUp .32s cubic-bezier(.3,.8,.2,1)}
.tipsCard .kicker{font-size:11px;letter-spacing:.14em;color:var(--brass);font-weight:700;
  margin-bottom:6px}
.tipsCard h3{margin:0 0 5px;font-size:23px;font-weight:800;line-height:1.3}
.tipsCard .sub{font-size:13px;color:var(--ink-2);line-height:1.8;margin-bottom:16px}
.canDo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.canDo div{background:rgba(31,95,174,.07);border:1px solid rgba(31,95,174,.14);
  border-radius:12px;padding:10px 11px;font-size:12px;line-height:1.55;display:flex;
  align-items:flex-start;gap:8px}
.canDo svg{flex:none;color:var(--brass);margin-top:1px}
.canDo b{font-weight:600}
.tipsHow{font-size:11px;color:var(--muted);font-weight:600;margin-bottom:2px}
@media (max-width:520px){ .canDo{grid-template-columns:1fr} .tipsCard h3{font-size:20px} }

.tip{display:flex;gap:13px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line-2)}
.tip i{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(31,95,174,.1);color:var(--brass)}
.tip b{display:block;font-size:13.5px;font-weight:600;line-height:1.5}
.tip span{display:block;font-size:12px;color:var(--ink-2);line-height:1.65;margin-top:1px}
.tipsGo{margin-top:16px;width:100%;height:46px;border:0;border-radius:12px;background:var(--ink);
  color:#fff;font-weight:700;font-size:14.5px;cursor:pointer}
.helpBtn{position:fixed;z-index:6;inset-inline-end:12px;bottom:92px;width:44px;height:44px;
  border-radius:50%;border:1px solid var(--line);background:var(--panel);cursor:pointer;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--sh);
  color:var(--ink-2);font-size:14px;font-weight:700}
@media (max-width:800px){ .helpBtn{bottom:auto;top:74px;inset-inline-end:12px} }

/* ── seeing the shop on its own ───────────────────────────────────
   Every panel can go, so the room is all that is left. The button that
   does it is the one thing that never hides, or there would be no way
   back. It sits opposite the help button so neither covers the other.

   It belongs to the shop floor, so it sits BELOW every overlay (14 to
   18) and above the toast. At 19 it floated over the open product panel:
   on a phone it landed on the words "2 sizes sold out", and a tap meant
   for that line hid the whole interface instead. */
.bareBtn{position:fixed;z-index:13;inset-inline-start:12px;bottom:92px;width:44px;height:44px;
  border-radius:50%;border:1px solid var(--line);background:var(--panel);cursor:pointer;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--sh);
  color:var(--ink-2);display:grid;place-items:center}
.bareBtn:hover{color:var(--ink)}
.bareBtn .bOff{display:none}
.bareBtn[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.bareBtn[aria-pressed="true"] .bOn{display:none}
.bareBtn[aria-pressed="true"] .bOff{display:block}
body.bare .bar,body.bare .strip,body.bare .cam,body.bare .stats,body.bare .fix,
body.bare .feed,body.bare .flow,body.bare .storeHint,body.bare .helpBtn,
body.bare .collectionCaption,body.bare .views,body.bare .notes,body.bare .tag{display:none!important}
@media (max-width:800px){ .bareBtn{bottom:auto;top:74px;inset-inline-start:12px} }
@media (max-width:800px){ body.bare .bareBtn{top:18px} }

/* ── picking one piece or the pair ─────────────────────────────── */
/* It is a <button>, so without this it carries the browser's own grey
   face — which the old white tick box covered up exactly, and the old
   42%-opacity row hid the rest of the time. Both of those went, and a
   light grey chip appeared where the plus should be. */
.fitPick{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;
  background:none;border:0;padding:0;color:inherit;font:inherit}
.fitPick .box{width:21px;height:21px;border-radius:7px;flex:none;position:relative;
  border:1.5px solid rgba(255,255,255,.35);transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s,opacity .16s}
.fitPick[aria-pressed="true"] .box{background:var(--brass);border-color:var(--brass)}
.fitPick[aria-pressed="true"] .box::after{content:"";position:absolute;inset-inline-start:6.5px;
  top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;rotate:45deg}
/* not ticked: a plus, because the thing to do with it is add it. Two bars,
   not a background-size trick — and left/top rather than the logical
   properties, since a cross through the middle is the middle either way. */
.fitPick[aria-pressed="false"] .box::before,
.fitPick[aria-pressed="false"] .box::after{content:"";position:absolute;left:50%;top:50%;
  translate:-50% -50%;background:rgba(255,255,255,.62);border-radius:1px}
.fitPick[aria-pressed="false"] .box::before{width:9px;height:1.5px}
.fitPick[aria-pressed="false"] .box::after{width:1.5px;height:9px}
/* The half of the set you did not come in for is an offer, not a second
   decision of equal weight: a quiet card with a plus and the reason, and
   no size picker until you have said yes to it. Dimming the whole row to
   42% — which is what this used to do — made it look broken instead of
   optional, and put an unreadable size picker on screen either way. */
.fitRow2[data-off="1"]{border:1px solid rgba(255,255,255,.13);border-radius:14px;
  padding:10px 12px;background:rgba(255,255,255,.035)}
.fitRow2[data-off="1"] .fitSizes,
.fitRow2[data-off="1"] .fitVerdict{display:none}
.fitRow2[data-off="1"] .hd b{font-weight:500;color:rgba(255,255,255,.82)}
.fitRow2[data-off="1"] .hd span.num{color:rgba(255,255,255,.5)}
.fitRow2[data-off="1"] .offerWhy{display:block}
.fitRow2[data-off="1"]:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24)}
.offerWhy{display:none;margin-top:6px;margin-inline-start:30px;font-size:11px;
  color:var(--brass-hi);font-weight:600}
.fitHint{font-size:11px;color:var(--brass-hi);margin-top:9px}


/* ── your measurements, and how a piece will sit on you ────────── */
.meBtn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff;
  border-radius:12px;padding:10px 13px;cursor:pointer;font-size:12.5px;text-align:start}
.meBtn:hover{background:rgba(255,255,255,.14)}
.meBtn b{font-weight:600}
.meBtn .sm{display:block;font-size:10.5px;color:rgba(255,255,255,.5);margin-top:2px}
/* It was a 30%-opacity slab of saturated blue, the biggest block of colour
   in the panel, sitting above the thing you are actually here to press. It
   is a prompt, not the action: a faint wash and an edge down the side it
   starts on say "read me" without competing. */
.meBtn.unset{border-color:rgba(75,143,216,.5);background:rgba(31,95,174,.13);
  border-inline-start:3px solid var(--brass-hi)}
.meBtn.unset:hover{background:rgba(31,95,174,.22)}
.fitVerdict{margin-top:7px;border-top:1px solid rgba(255,255,255,.1);padding-top:7px}
.fitVerdict .top{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-bottom:5px}
.fitVerdict .top .pill{border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:700}
.pill.ok{background:rgba(47,125,85,.9);color:#fff}
.pill.warn{background:rgba(190,140,40,.95);color:#fff}
.pill.bad{background:rgba(192,57,43,.95);color:#fff}
.fitVerdict .area{display:flex;align-items:center;gap:7px;font-size:10.5px;
  color:rgba(255,255,255,.72);padding:1.5px 0}
.fitVerdict .area i{width:7px;height:7px;border-radius:50%;flex:none}
.fitVerdict .vn{color:rgba(255,255,255,.5)}
.fitVerdict .area em{font-style:normal;margin-inline-start:auto;color:rgba(255,255,255,.45);
  font-variant-numeric:tabular-nums;direction:ltr}
.fitAlt{font-size:10.5px;color:var(--brass-hi);margin-top:6px}

.meSheet{position:absolute;inset:0;z-index:5;background:#0b0d10;padding:22px 24px;
  display:none;flex-direction:column;gap:14px;overflow:auto}
.meSheet.on{display:flex;animation:ovIn .24s ease}
/* The sheet covers the whole fitting-room panel, and the only way out of it
   was to press "work out my size" — so anyone who opened it to look had to
   save something to get back. A way out belongs at the top, where you read
   first. The chevron points the way back, which is the other way round in
   Arabic. */
.meBack{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;
  border-radius:99px;padding:7px 13px;font:inherit;font-size:12px;cursor:pointer;
  transition:background-color .16s,border-color .16s}
.meBack:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42)}
.meBack:focus-visible{outline:2px solid #fff;outline-offset:2px}
.meBack svg{display:block;flex:none}
html[dir="rtl"] .meBack svg{transform:scaleX(-1)}
.meSheet h3{margin:0;font-size:20px;font-weight:800}
.meSheet .lede{margin:0;font-size:12px;color:rgba(255,255,255,.55);line-height:1.75}
.meField label{display:block;font-size:11.5px;color:rgba(255,255,255,.6);margin-bottom:6px}
.meField .row{display:flex;align-items:center;gap:10px}
.meField input[type=range]{flex:1;accent-color:#fff}
.meField output{min-width:72px;text-align:center;font-size:15px;font-weight:700;
  background:rgba(255,255,255,.1);border-radius:9px;padding:7px 0;font-variant-numeric:tabular-nums}
.shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.shape{border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);border-radius:13px;
  padding:9px 4px 8px;cursor:pointer;color:#fff;transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s,opacity .16s;text-align:center}
.shape:hover{border-color:rgba(255,255,255,.45)}
.shape[aria-pressed="true"]{border-color:#fff;background:rgba(255,255,255,.14)}
.shape svg{width:100%;height:76px;display:block;margin-bottom:6px}
.shape b{font-size:11.5px;font-weight:600;display:block}
.meSave{margin-top:auto;height:50px;border:0;border-radius:12px;background:#fff;color:#0b0d10;
  font-weight:800;font-size:15px;cursor:pointer}
.meNote{font-size:10.5px;color:rgba(255,255,255,.4);line-height:1.7;margin:0}
@media (max-width:980px){ .meSheet{padding:16px 18px;gap:11px} .shape svg{height:58px} }

/* ── talking to the floor staff ────────────────────────────────── */
.chat{position:fixed;inset:0;z-index:15;display:none;align-items:center;justify-content:center;
  padding:16px;background:rgba(21,26,33,.32);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.chat.on{display:flex;animation:ovIn .26s ease}
.chatCard{position:relative;display:flex;width:min(780px,100%);height:min(566px,calc(100vh - 32px));
  background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(21,26,33,.55);animation:ovUp .3s cubic-bezier(.3,.8,.2,1)}
.chatMain{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
.chatHead{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.chatHead i{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;animation:pulse 2.2s infinite}
.chatHead .ch{flex:1;min-width:0;line-height:1.4}
.chatHead b{display:block;font-size:14.5px;font-weight:600}
.chatHead span{display:block;font-size:11.5px;color:var(--muted)}
.chatLog{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:9px;
  scroll-behavior:smooth}
.msg{max-width:86%;padding:10px 14px;border-radius:15px;font-size:13.5px;line-height:1.8;
  animation:msgIn .28s cubic-bezier(.3,.8,.2,1)}
@keyframes msgIn{from{opacity:0;transform:translateY(7px)}}
.msg.them{background:rgba(21,26,33,.05);border-start-start-radius:5px;align-self:flex-start}
.msg.me{background:var(--ink);color:#fff;border-start-end-radius:5px;align-self:flex-end}
.msg .go{display:inline-flex;align-items:center;gap:6px;margin-top:8px;margin-inline-end:6px;
  border:1px solid rgba(31,95,174,.35);background:rgba(31,95,174,.08);color:var(--brass);
  border-radius:9px;padding:6px 11px;font-size:12px;cursor:pointer;font-weight:600}
.msg .go:hover{background:rgba(31,95,174,.16)}
.typing{align-self:flex-start;background:rgba(21,26,33,.05);border-radius:15px;
  border-start-start-radius:5px;padding:13px 16px;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:dot 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.chatForm{display:flex;gap:8px;padding:0 18px 14px;align-items:center}
.chatForm input{flex:1;min-width:0;height:42px;border:1px solid var(--line);border-radius:999px;
  background:rgba(21,26,33,.04);padding:0 16px;font:inherit;font-size:13.5px;color:inherit}
.chatForm input:focus{outline:none;background:#fff;border-color:rgba(31,95,174,.5)}
.chatForm input::placeholder{color:var(--faint)}
.chatForm button{width:42px;height:42px;flex:none;border:0;border-radius:50%;background:var(--ink);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .16s}
.chatForm button:hover{background:#000}
.chatForm button:disabled{background:var(--faint);cursor:not-allowed}
.chatNote{padding:0 18px 12px;margin:0;font-size:10.5px;color:var(--faint);line-height:1.6}
.chatQ{padding:11px 18px 10px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:7px}
.qb{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;
  font-size:12.5px;cursor:pointer;transition:background-color .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s,opacity .16s}
.qb:hover{background:rgba(21,26,33,.055);border-color:rgba(21,26,33,.2)}
.chatMan{flex:0 0 236px;position:relative;
  background:linear-gradient(168deg,#eef4fa 0%,#dde8f3 60%,#cfdcea 100%)}
#chatCanvas{display:block;width:100%;height:100%}
.chatMan .nm{position:absolute;bottom:14px;inset-inline:14px;text-align:center;font-size:11.5px;
  color:var(--ink-2);background:rgba(255,255,255,.82);border-radius:999px;padding:5px 10px}
.chatClose{position:absolute;top:12px;inset-inline-end:12px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;
  font-size:14px;color:var(--muted);z-index:2}

/* ── back to the start ─────────────────────────────────────────── */
.homeBtn{display:flex;align-items:center;gap:7px;border:1px solid rgba(31,95,174,.3);flex:none;
  background:rgba(31,95,174,.08);color:var(--brass);border-radius:12px;padding:8px 12px;
  cursor:pointer;font-size:12.5px;font-weight:600;white-space:nowrap;transition:background .16s}
.homeBtn:hover{background:rgba(31,95,174,.17)}
.strip .div{width:1px;height:28px;background:var(--line);flex:none;margin:0 3px}

@media (max-width:860px){
  .chatCard{flex-direction:column-reverse;height:min(600px,calc(100vh - 32px))}
  .chatMan{flex:0 0 150px}
  .chatMan .nm{bottom:8px}
}
@media (max-width:1280px){ .fix{width:244px} .feed{width:216px} }
@media (max-width:1080px){
  .stats{display:none} .feed{display:none} .search{max-width:180px} .where{display:none}
  .me div{display:none} .fix{bottom:90px}
}
@media (max-width:860px){
  /* On a phone the piece gets the top half of the screen — it is what you
     came to look at — and the details scroll beneath it, with the type
     tightened so the price and sizes stay close. */
  .ov{padding:11px}
  .ovCard{flex-direction:column;height:calc(100vh - 22px);max-height:none}
  .ovView{flex:0 0 min(44vh,380px)}
  .ovSide{flex:1;padding:13px 15px;gap:7px}
  .ovClose{top:9px;inset-inline-end:9px;width:30px;height:30px}
  .ovCard h2{font-size:18.5px;line-height:1.3} .ovEn{display:none}
  .ovPrice{font-size:20px;margin-top:2px}
  .ovSale{top:10px;inset-inline-start:10px;font-size:10px;padding:4px 9px}
  .ovLive{padding:7px 10px} .ovLive .lh{margin-bottom:5px}
  .ovDesc{font-size:12px;line-height:1.6}
  .specs div{padding:6px 8px} .specs dd{font-size:11px}
  .sw{width:24px;height:24px} .swatches{gap:7px}
  .sz{min-width:40px;height:31px;font-size:12px} .sizes{gap:5px}
  .add,.tryBtn{height:43px;font-size:13.5px} .ghost{height:34px;font-size:12px}
  .ovNote:empty{display:none}
}
@media (max-width:800px){
  .fix{display:none} .cam{display:none} .flow{display:none!important} .strip .sl{display:none}
  .bar{height:54px;gap:7px;padding:0 8px 0 10px}
  .brand .wm{font-size:17px;letter-spacing:.18em} .brand .tl{display:none} .mark{width:28px;height:28px}
  .vr{display:none} .live span:not(.num){display:none} .search{max-width:none}
  .notes{top:auto;bottom:74px;inset-inline:12px;width:auto}
  .strip{bottom:10px;border-radius:14px} .views{bottom:62px;width:min(248px,calc(100vw - 24px))}
}

/* REVERA · the boutique. The room is the main interface. */
:root{--paper:#e8e3da;--ink:#172b3e;--ink-2:#314756;--brass:#46627a;--line:rgba(33,51,65,.13);--line-2:rgba(33,51,65,.075);--muted:#566069;--faint:#5a636d;--panel:rgba(251,249,245,.94);--sh:0 12px 34px -18px rgba(31,39,43,.24),0 1px 2px rgba(31,39,43,.04)}
html,body{height:100%;height:100dvh;overscroll-behavior:none}
body{background:#e6e1d8}
button,input,select{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
.panel{border-color:rgba(69,75,76,.13);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1)}
.vig{background:radial-gradient(ellipse 100% 90% at 50% 50%,transparent 48%,rgba(42,37,30,.10) 100%)}
.bar{top:max(18px,env(safe-area-inset-top));left:22px;right:22px;height:64px;border-radius:18px;padding-inline:16px;gap:15px}
.bar .me,.bar #bellBtn,.bar .where,.bar .vr{display:none}
.bar .brand .wm{font-size:25px;letter-spacing:.22em}
.bar .brand .tl{display:block;font-size:9px;letter-spacing:.09em;margin-top:5px}
.bar .mark{width:36px;height:36px}
.bar .search{max-width:340px;margin-inline-start:14px}
.search input{background:rgba(25,48,68,.035);height:40px;border-radius:11px;font-size:12px}
.search input:focus{border-color:rgba(41,74,101,.5)}
.search kbd{top:10px}
.bar .live{font-size:10px;padding:5px 9px;background:transparent;gap:7px}
.bar .live .num{display:none}
.langBtn,.bagBtn{height:40px;border-radius:11px;background:rgba(255,255,255,.6)}
.bagBtn{gap:8px;padding-inline:12px;font-size:12px}
.bagBtn b{background:#20384d;font-size:10px}
.langBtn b{font:600 12px var(--f);letter-spacing:.02em}
body:not(.storeInformation) .stats,body:not(.storeInformation) .fix,body:not(.storeInformation) .feed{display:none}
.storeInformation .collectionCaption{display:none}
.collectionCaption{position:fixed;inset-inline-start:30px;top:112px;z-index:3;pointer-events:none;max-width:min(360px,calc(100vw - 60px));text-shadow:0 1px 10px rgba(255,255,255,.3)}
.collectionCaption>span{font:600 10px var(--f);letter-spacing:.18em;direction:ltr;display:block;color:#57646a}
.collectionCaption h1{font-size:25px;line-height:1.5;letter-spacing:-.02em;font-weight:500;margin:6px 0 0;color:#1e3548}
html[lang="en"] .collectionCaption h1{font-family:var(--f-latin);font-size:37px;line-height:1.2;letter-spacing:0;font-weight:500}
.collectionCaption p{margin:4px 0 0;font-size:10.5px;color:#5a666d}
.cam{inset-inline-end:22px;padding:7px;gap:4px;border-radius:17px}
.cam button{width:36px;height:37px;color:#4b5c66}
.strip{bottom:22px;padding:0;gap:10px;display:flex;flex-direction:column;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;max-width:calc(100vw - 48px);border-radius:0;z-index:7;align-items:center}
.categoryScroll{position:relative;display:flex;gap:4px;align-items:center;padding:8px;max-width:100%;overflow-x:auto;overflow-y:visible;scrollbar-width:none;scroll-padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.categoryScroll::-webkit-scrollbar{display:none}
.zbtn{border-color:transparent;background:transparent;min-height:47px;padding:5px 10px 5px 7px;border-radius:12px;gap:8px;transition:background .2s,color .2s}
.zbtn img{width:26px;height:34px;background:rgba(29,46,59,.035);border-radius:6px}
.zbtn .zt b{font-size:11.5px;font-weight:600}
.zbtn .zt span{font-size:8.5px;letter-spacing:.02em}
.zbtn .zs{font-size:8px;top:-4px;inset-inline-start:0;padding:1px 5px;background:#557286;border-color:#f7f5f0;line-height:1.5}
.zbtn[aria-current="true"]{background:#213b51;border-color:transparent;color:#fff}
.zbtn:hover{background:rgba(28,47,62,.07)}
.zbtn[aria-current="true"]:hover{background:#29475e}
.stripTools{display:flex;align-items:center;padding:5px;gap:3px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--sh)}
.stripTools .homeBtn{background:transparent;border-color:transparent;color:#405766;font-size:10.5px;padding:6px 12px;min-height:36px;border-radius:9px}
.stripTools .homeBtn:hover{background:rgba(30,55,74,.06)}
.stripTools .homeBtn svg{width:14px;height:14px}
.stripTools .viewBtn{width:35px;height:36px;background:transparent;border-color:transparent;border-radius:9px}
.stripTools .viewBtn[aria-expanded="true"]{background:#213b51;color:white}
.views{bottom:157px;max-height:calc(100dvh - 270px);overflow-y:auto;border-radius:17px;width:275px;padding:10px}
.views h4{font-size:10px;letter-spacing:.02em}
.tgl{padding:8px;font-size:11px;min-height:38px}
.qualityField{display:flex;align-items:center;gap:10px;margin:4px 8px 6px;font-size:11px;border-top:1px solid var(--line);padding-top:10px}
.qualityField>span{flex:1}.qualityField select{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 7px;min-height:34px}
.storeHint{position:fixed;bottom:171px;left:50%;transform:translateX(-50%);font-size:10px;color:#55616a;background:rgba(252,250,246,.79);padding:7px 13px;border:1px solid rgba(80,84,81,.1);border-radius:999px;z-index:3;pointer-events:none;white-space:nowrap;transition:opacity .6s,transform .6s}
.storeHint.away{opacity:0;transform:translate(-50%,5px)}
.helpBtn{background:var(--panel);border-color:var(--line);box-shadow:var(--sh);width:30px;height:30px;bottom:28px;inset-inline-end:26px;font-size:13px}
.stats{top:98px;inset-inline-start:22px}.fix{inset-inline-start:22px;bottom:165px}.feed{inset-inline-end:22px;bottom:165px}
.flow{top:98px;inset-inline-end:80px}
.notes{top:95px;inset-inline-end:22px}
.loading{background:#172e43;color:#f2ede3}
.loading .lb{font-family:var(--f-latin);font-size:40px;font-weight:500;letter-spacing:.25em;
  padding-inline-start:.25em;color:#f2ede3}  /* the splash turns dark here; without this the
     wordmark kept --ink and sat at 1.04:1 on it — invisible */
.loading p{font-size:11px;color:rgba(242,237,227,.65)}
.loading .lt{height:2px;background:rgba(242,237,227,.15)}
.loading .lt i{background:#b9ab90}
.tag{border-color:rgba(70,84,91,.15);box-shadow:var(--sh)}
.contextNotice{position:fixed;inset-inline:16px;top:100px;z-index:60;border:1px solid var(--line);border-radius:12px;padding:12px;background:#faf7f0;box-shadow:var(--sh);font-size:12px;display:flex;gap:14px;align-items:center;justify-content:center}
.contextNotice[hidden]{display:none}.contextNotice button{font:inherit;border:0;background:#1f3b52;color:#fff;border-radius:8px;padding:8px 12px}
.storeFallback{position:fixed;inset:0;overflow-y:auto;background:#eee9df;z-index:50;padding:35px max(20px,5vw)}
.storeFallback header b{font:500 40px var(--f-latin);letter-spacing:.18em}.storeFallback header p{font-size:13px}
.storeFallback>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:15px}
.storeFallback article{padding:15px;border:1px solid var(--line);border-radius:14px;background:#f8f5ef;text-align:center}
.storeFallback img{width:100%;height:200px;object-fit:contain}.storeFallback h2{font-size:13px}.storeFallback article p{font-size:12px}
.no3d .bar,.no3d .strip,.no3d .collectionCaption,.no3d .cam,.no3d .storeHint,.no3d .helpBtn{display:none}
@media(min-width:1600px){.strip{flex-direction:row-reverse}.views{bottom:100px}.storeHint{bottom:111px}}
@media(max-width:800px){
  /* Everything a thumb has to hit is 44px tall here, which is what Apple
     and WCAG both ask for and what this bar did not give: the search
     field, the language button and the bag were all 34. The bar grew
     twenty pixels to hold them, and everything that used to be pinned
     below it by a hard-coded number now hangs off --bar-bottom, which
     the shop measures from the real bar — so it cannot drift again. */
  /* min-height, not height: this bar wraps, and a wrapping box with a
     fixed height cannot tell you it needed more. At 320 the brand, the
     language button and the bag came to 279 in 272, so the bag dropped
     to a second row and pushed the search to a third — which hung 31px
     out of the bottom of a bar still insisting it was 126 tall. Let it
     grow; --bar-bottom is measured off the real box, so everything
     pinned below it follows. */
  .bar{top:max(10px,env(safe-area-inset-top));left:12px;right:12px;padding:10px 12px;height:auto;min-height:126px;gap:7px 9px;border-radius:17px;flex-wrap:wrap;align-content:space-between}
  .bar .brand{margin-inline-end:auto;height:34px}.bar .brand .wm{font-size:21px;letter-spacing:.19em}
  .bar .brand .tl{display:none}.bar .mark{width:31px;height:31px}.bar .brand{gap:8px}
  .bar .search{order:10;width:100%;flex:1 0 100%;max-width:none;margin:0;height:44px}.search input{height:44px;font-size:12.5px;border-radius:11px;padding-inline-end:36px}.search kbd{display:none}
  .bar .spacer,.bar .live{display:none}.bar .langBtn{height:44px;min-width:44px;justify-content:center;padding:0 11px;border-radius:11px}.bar .langBtn svg{display:none}
  .bar .bagBtn{height:44px;padding:0 11px;border-radius:11px;gap:6px}.bar .bagBtn>span{display:none}.bar .bagBtn b{width:20px;min-width:20px;height:20px}
  .collectionCaption{top:calc(var(--bar-bottom, 126px) + 14px);inset-inline-start:22px;max-width:calc(100vw - 65px)}
  .collectionCaption>span{font-size:8px;letter-spacing:.12em}.collectionCaption h1{font-size:20px;margin-top:3px}.collectionCaption p{font-size:9px;margin-top:2px}
  html[lang="en"] .collectionCaption h1{font-size:28px}
  .strip{bottom:calc(12px + env(safe-area-inset-bottom));width:calc(100vw - 24px);max-width:none;gap:8px;flex-direction:column}
  .categoryScroll{width:100%;padding:7px 6px;border-radius:15px;gap:3px;min-height:61px}
  .zbtn{min-width:96px;min-height:45px;padding:5px 8px;border-radius:10px;gap:6px;justify-content:flex-start}.zbtn img{width:23px;height:31px}.zbtn .zt b{font-size:10.5px}.zbtn .zt span{font-size:8px}.zbtn .zs{top:-4px;font-size:7px;padding:1px 4px}
  .stripTools{padding:4px;border-radius:13px}.stripTools .homeBtn{min-height:44px;font-size:10px;padding:6px 13px;gap:6px}.stripTools .viewBtn{height:44px;width:44px}
  .storeHint{bottom:calc(154px + env(safe-area-inset-bottom));font-size:9px;padding:6px 11px}
  .views{bottom:calc(149px + env(safe-area-inset-bottom));max-height:calc(100dvh - 282px);width:min(285px,calc(100vw - 32px));border-radius:15px}
  .helpBtn{top:calc(var(--bar-bottom, 126px) + 11px);bottom:auto;inset-inline-end:18px;width:44px;height:44px;font-size:13px}
  .notes{top:calc(var(--bar-bottom, 126px) + 4px);bottom:auto;inset-inline:12px;max-height:calc(100dvh - 292px);overflow-y:auto}
  .ov{padding:9px}.ovCard{height:calc(100dvh - 18px)}.ovSide{overflow-y:auto;overscroll-behavior:contain}
  .ovView{flex-basis:min(44dvh,380px)}.fitPanel{max-height:100dvh}.chatCard{height:min(640px,calc(100dvh - 20px))}
  .contextNotice{top:calc(var(--bar-bottom, 126px) + 3px)}.results{max-height:36dvh}
}
/* Seven pixels over, on the narrowest phone still sold. Trimming the
   wordmark keeps the bag up on the first row with the brand, so the
   bar stays the two rows it was drawn as. */
@media(max-width:380px){.stripTools .homeBtn{padding-inline:9px;font-size:9.5px}.collectionCaption h1{font-size:18px}
  .bar .brand .wm{font-size:18px;letter-spacing:.13em}.bar .mark{width:29px;height:29px}.bar{gap:7px}}
@media(max-height:520px) and (min-width:600px){
  /* Short and 600-800 wide matches the phone block above as well, and that
     block is building a different bar: the search gets order:10 and
     flex:1 0 100% so it drops onto a row of its own, the brand takes
     margin-inline-end:auto to push the controls over, and the controls
     grow to 44px for a thumb. Half of that survived the 48px bar here —
     the search landed after the bag, held on the line by the 220px cap
     that stopped it ever wrapping, and 44px controls hung seven pixels
     out of the bar. Short and wide is a phone held sideways, so keep the
     44px targets and put the single row back together explicitly: what
     the phone block changes, this has to change back. */
  .bar{height:56px;top:8px;flex-wrap:nowrap;padding:0 8px 0 12px;gap:10px}
  .bar .brand{margin-inline-end:0;height:auto}
  .bar .brand .wm{font-size:21px}.bar .brand .tl{display:none}.bar .mark{width:30px;height:30px}
  .bar .spacer{display:block;flex:1}
  .bar .search{order:0;flex:0 1 240px;width:auto;max-width:240px;min-width:0;margin-inline-start:12px}
  .bar .langBtn svg{display:block}.bar .bagBtn>span{display:block}
  /* Above 800 the phone block stops applying and the controls fall back
     to 40. A short window is usually a phone on its side, so hold them
     at 44 across the whole range instead of at one end of it. */
  .bar .search input,.bar .langBtn,.bar .bagBtn{height:44px}
  .collectionCaption{top:75px}.collectionCaption h1{font-size:18px}.collectionCaption p{display:none}.collectionCaption>span{font-size:8px}
  .strip{bottom:8px;flex-direction:row-reverse;gap:6px}.stripTools .homeBtn{font-size:0;padding:6px 10px}.stripTools .homeBtn svg{width:16px;height:16px}.categoryScroll{padding:4px}.zbtn{min-height:40px}.zbtn img{height:27px}.zbtn .zt span{display:none}.zbtn .zt b{font-size:10px}
  .views{bottom:69px;max-height:calc(100dvh - 145px)}.storeHint{display:none}.cam{display:none}.helpBtn{top:71px;bottom:auto}.stats,.feed,.fix{display:none!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

.categoryScroll{min-width:0}

/* ── the till ────────────────────────────────────────────────────
   Two columns: what you are buying on the reading edge, and the step
   you are on beside it. The basket column comes first in the markup,
   so it lands on the right in Arabic and the left in English without
   either side being hard-coded. ───────────────────────────────── */
.pay{position:fixed;inset:0;z-index:17;display:none;align-items:center;justify-content:center;
  background:rgba(12,16,22,.52);backdrop-filter:blur(7px);padding:18px}
.pay.on{display:flex;animation:ovIn .3s ease}
/* A full-screen backdrop blur costs the compositor a layer the first time
   it is painted, which landed as a stall on the first piece anyone opened.
   This paints it once, invisibly, while the shop is still idle. */
.ov.warm,.pay.warm{display:flex;opacity:.004;pointer-events:none}
.payCard{position:relative;display:flex;width:min(880px,100%);max-height:92vh;
  background:var(--panel);border-radius:22px;overflow:hidden;box-shadow:var(--sh)}
.payX{position:absolute;top:12px;inset-inline-end:14px;z-index:4;width:32px;height:32px;border:0;
  border-radius:50%;background:rgba(21,26,33,.07);color:var(--ink-2);cursor:pointer;font-size:14px}
.payX:hover{background:rgba(21,26,33,.13)}

.payItems{flex:0 0 clamp(214px,32%,286px);min-width:0;padding:20px 18px;background:rgba(21,26,33,.035);
  border-inline-end:1px solid var(--line-2);display:flex;flex-direction:column;gap:10px;overflow:auto}
.payItems h4{margin:0;font-size:11px;letter-spacing:.1em;color:var(--muted);font-weight:700}
.payList{display:flex;flex-direction:column;gap:8px}
.payLine{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-2);
  border-radius:12px;padding:7px 9px}
.payLine img{width:36px;height:46px;object-fit:contain;flex:none}
.payLine .pt{min-width:0;flex:1}
.payLine b{display:block;font-size:12.5px;font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.payLine span{font-size:11px;color:var(--muted)}
.payLine em{font-style:normal;font-size:12.5px;font-weight:700;flex:none}
.paySums{margin:auto 0 0;display:grid;grid-template-columns:1fr auto;gap:5px 10px;
  padding-top:11px;border-top:1px solid var(--line);font-size:12.5px}
.paySums dt{color:var(--muted);margin:0}
.paySums dd{margin:0;text-align:end;font-weight:600}
.paySums .big{font-size:16px;font-weight:800}

.payMain{flex:1;min-width:0;padding:26px 28px 22px;display:flex;flex-direction:column;overflow:auto}
.payStep{display:flex;flex-direction:column;gap:13px;margin:auto 0}
.payStep[hidden]{display:none}
.payKicker{font-size:10.5px;letter-spacing:.14em;color:var(--brass);font-weight:700}
.payMain h2{margin:0;font-size:25px;font-weight:800;line-height:1.3}
.payMain h3{margin:0;font-size:19px;font-weight:700;line-height:1.35}
.payLede{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.75}
.payBig{font-size:32px;font-weight:800;letter-spacing:-.01em}

.payOpt{display:flex;align-items:center;gap:12px;width:100%;text-align:start;cursor:pointer;
  border:1px solid var(--line);background:#fff;border-radius:14px;padding:13px 14px;
  transition:border-color .18s,background .18s}
.payOpt:hover{border-color:var(--ink);background:rgba(21,26,33,.03)}
.payOpt i{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(31,95,174,.09);color:#1f5fae}
.payOpt b{display:block;font-size:14px;font-weight:700}
.payOpt span span{font-size:12px;color:var(--muted)}

.payF{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:600}
.payF input,.payF textarea{font:inherit;font-size:14px;color:var(--ink);font-weight:500;
  border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:#fff;resize:none}
.payF input:focus,.payF textarea:focus{outline:none;border-color:var(--brass)}
.payRow{display:flex;gap:9px;margin-top:3px}
.payRow2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.payNote{margin:0;font-size:11px;color:var(--muted);line-height:1.7;
  background:rgba(21,26,33,.04);border-radius:10px;padding:9px 11px}
.payErr{margin:0;font-size:12.5px;color:var(--bad);font-weight:600}
.payErr[hidden]{display:none}

.payDone{align-items:flex-start;text-align:start}
.payTick{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(47,125,85,.12);color:#2f7d55}
.payOrder{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);
  background:rgba(21,26,33,.04);border-radius:11px;padding:9px 13px}
.payOrder b{font-size:15px;color:var(--ink)}

@media (max-width:760px){
  .pay{padding:0}
  .payCard{flex-direction:column;width:100%;max-height:100dvh;height:100dvh;border-radius:0}
  .payItems{flex:0 0 auto;max-height:34vh;border-inline-end:0;border-bottom:1px solid var(--line-2)}
  .payMain{padding:18px 18px 22px}
  .payMain h2{font-size:21px} .payBig{font-size:27px}
  .payStep{margin:0;gap:11px}
}
/* ── turning, on a phone ─────────────────────────────────────────
   A finger pans and pinches on its own, and Home sits in the bar below,
   but nothing on a touch screen turns the view. The two turn buttons
   come back on small screens as a pill above the collection strip; the
   rest of the camera column stays hidden. */
@media (max-width:800px){
  .cam{display:flex;flex-direction:row;top:auto;translate:0 0;
    bottom:calc(192px + env(safe-area-inset-bottom));inset-inline-end:12px;
    padding:5px;gap:3px;border-radius:15px}
  /* zoom is the thing a finger cannot do precisely, so + and − come back
     beside the turn buttons; wide and home already live in the bar below */
  .cam hr,.cam #cWide,.cam #cHome{display:none}
  .cam button{width:44px;height:44px}   /* the smallest a thumb should have to find */
}
/* a landscape phone has no room for them, and the bar is already tight */
@media(max-height:520px) and (min-width:600px){ .cam{display:none} }

/* ── Two fixed cards in one column will always meet ───────────────────
   The left column hung the stat cards from the top and the tabs card from
   the bottom; the right column centred the camera rail and hung the
   activity feed from the bottom. Nothing told either pair how much room
   the other needed, so on a 1366×720 laptop the tabs card sat on top of
   the fitting-room card and the feed covered the rail completely.

   Nudging the offsets only moves the screen size it breaks at. Two rules
   that cannot break instead:

   · On the right, the rail and the cards get their own lanes. The rail is
     52 px wide inset 22, so anything else starts past 86 and no height
     can bring them together.
   · On the left both cards share one column, so they split the height
     that is actually there and scroll inside their share.

   Only needed above 1080 px: below that the stat cards and the feed are
   hidden, and below 860 the tabs card and the rail are too.
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 1081px){
  :root{
    --col-top: 98px;        /* where the top-anchored card starts */
    --col-bottom: 165px;    /* where the bottom-anchored card ends */
    --col-gap: 14px;        /* air between them, so they read as two cards */
    --rail-lane: 86px;      /* the camera rail's width plus both insets */
  }

  .feed, .notes, .flow{ inset-inline-end: var(--rail-lane); }

  .stats, .fix{
    max-height: calc((100vh - var(--col-top) - var(--col-bottom) - var(--col-gap)) / 2);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* the tabs card keeps its own rounded clipping; its list scrolls inside */
  .fix{ overflow: hidden; }
  .fix .fixBody{ overflow-y: auto; overscroll-behavior: contain; }
}

/* ── Walking controls ─────────────────────────────────────────────
   A thumbstick rather than four arrows: on a phone you steer with one
   thumb without lifting it, and the distance from the centre is how
   fast you go, so edging round a rail is possible at all. The ring is
   132px with a 56px knob — well past the 44px floor, and the whole
   base is the target, not just the knob. */
.walkPad{
  position:fixed; bottom:calc(12px + var(--strip-h, 123px) + 16px);
  inset-inline-start:18px; z-index:8;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
.walkPad[hidden]{display:none}

.stick{
  position:relative; width:132px; height:132px; border-radius:50%;
  display:grid; place-items:center; cursor:grab;
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--sh);
  -webkit-backdrop-filter:blur(14px) saturate(1.25); backdrop-filter:blur(14px) saturate(1.25);
}
.stick:active{cursor:grabbing}
.stick.live{ border-color:#1f5fae }
.stickArrows{
  position:absolute; inset:0; width:100%; height:100%;
  fill:var(--faint); pointer-events:none; transition:fill .15s;
}
.stick.live .stickArrows{ fill:#1f5fae }
.stickKnob{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:var(--muted); border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(22,32,44,.14);
  pointer-events:none; will-change:transform;
  transition:background .14s, color .14s;
}
.stick.live .stickKnob{ background:#1f5fae; color:#fff; border-color:#1f5fae }
.stick:focus-visible{ outline:2px solid #1f5fae; outline-offset:3px }

.walkHint{
  /* Above the tabs, which are above the stick: the hint tells you how to use
     the stick, so sitting on top of it would be its own joke. */
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(12px + var(--strip-h, 123px) + 16px + var(--pad-h, 132px) + 68px);
  z-index:8; font-size:11.5px; color:#55616a; white-space:nowrap;
  background:rgba(252,250,246,.82); padding:7px 14px; border-radius:999px;
  border:1px solid rgba(80,84,81,.1); pointer-events:none;
  transition:opacity .5s;
}
.walkHint[hidden]{display:none}
.walkHint.away{opacity:0}

/* Walking hides the overview's own camera rail: those buttons orbit a
   model you are now standing inside, and they would fight the walk. */
body.walking .cam{ display:none }
body.walking .storeHint{ display:none }

@media (max-width:860px){ .walkPad{ inset-inline-start:12px } }
@media (hover:hover) and (pointer:fine){
  /* a mouse has the keyboard for walking, so the stick is smaller and out
     of the way, but still there for anyone who would rather drag it */
  .stick{ width:104px; height:104px }
  .stickKnob{ width:46px; height:46px }
}

/* The overview's own captions and pins belong to a model you look at. Once
   you are standing in the room they float in front of your face. */
body.walking .collectionCaption{ display:none }

/* ── The three views, named ───────────────────────────────────────
   Under the bar rather than down in the strip: which way you are
   looking at the shop is the first thing to know about it, and a
   button that only shows the OTHER view makes you work out where you
   already are. Brand blue marks the one you are in. */
.viewTabs{
  position:fixed; top:94px; left:50%; translate:-50% 0; z-index:8;
  display:flex; gap:2px; padding:3px;
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--sh);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
}
.viewTabs button{
  border:0; background:none; cursor:pointer; white-space:nowrap;
  font:inherit; font-size:12px; font-weight:600; color:var(--muted);
  padding:8px 15px; border-radius:999px; min-height:36px;
  transition:background .16s, color .16s;
}
.viewTabs button:hover{ color:var(--ink) }
.viewTabs button[aria-selected="true"]{ background:#1f5fae; color:#fff }
.viewTabs button:focus-visible{ outline:2px solid #1f5fae; outline-offset:2px }

@media (max-width:860px){
  .viewTabs button{ font-size:11.5px; padding:10px 12px; min-height:44px }
}
/* the overview's caption sits where the tabs now are */
@media (min-width:861px){ .collectionCaption{ padding-top:34px } }

/* ── Phone placement ──────────────────────────────────────────────
   Two things were in the wrong place on a phone.

   The view tabs sat at the bottom, stacked over the stick and the
   strip in the busiest corner of the screen. Which view you are in is
   a heading, not a control you reach for mid-walk, so it goes under
   the search where it reads as one.

   The hide-interface button sat at top-left on top of the search
   field — measured at 21×31 px of overlap, which is why the search
   placeholder looked clipped. It moves to the bottom right, opposite
   the stick: the two controls your thumbs actually reach for, one
   under each thumb. */
@media (max-width:860px){
  .viewTabs{
    top:calc(var(--bar-bottom, 126px) + 12px);
    bottom:auto;
  }

  .bareBtn{
    top:auto; inset-inline-start:auto;
    inset-inline-end:12px;
    bottom:calc(12px + var(--strip-h, 123px) + 16px);
  }
  /* with the interface hidden there is no strip to sit above */
  body.bare .bareBtn{ top:auto; bottom:18px; inset-inline-end:12px }

  /* the help button keeps the top-right corner to itself */
  .helpBtn{ top:calc(var(--bar-bottom, 126px) + 70px) }
}

/* ── smoothness: no live blur over the moving shop ────────────────────
   A backdrop blur has to be recomputed whenever what is behind it changes,
   and behind every panel here is a 3D view redrawn up to 240 times a
   second. On a 2560×1440 screen that was a dozen full re-blurs a frame —
   work that never shows in a frame timer, only as a shop that does not
   feel smooth. The panels are already 94% opaque, so the blur was barely
   visible; it goes, and the panels become a touch more solid instead.
   Dialog backdrops keep theirs: behind an open dialog the shop is held
   still, so the blur is computed once and kept. */
:root{--panel:rgba(251,249,245,.97)}
.panel,.stat,.ovShots,.helpBtn,.bareBtn,.categoryScroll,.stick,.viewTabs{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* The turn-and-zoom hint sat under the row of photo thumbnails. It goes to
   the top of the picture, between the sale badge and the zoom buttons —
   and on a phone, where the style chips own the top, it is not needed:
   a finger drags without being told to. */
.ovHint{top:16px;bottom:auto}
@media (max-width:860px){ .ovHint{display:none} }
/* in the larger card, the details read top-down instead of being spread
   to fill the height with gaps between them */
@media (min-width:1280px) and (min-height:760px){ .ovSide{justify-content:flex-start;gap:16px} }