/* =========================================================================
   SPATIOLOOK — design system
   Editorial, warm-dark fashion aesthetic. Fraunces (display serif) carries
   personality on headlines; Inter stays quiet and functional everywhere
   else. Brass is the single warm accent; glass-blue marks anything live
   or camera/scan related. Corners stay near-sharp — this is a fitting
   room, not a SaaS dashboard.
   ========================================================================= */

:root{
  --bg:        #0d0c0b;
  --surface:   #171512;
  --surface-2: #1e1b17;
  --line:      #322c24;
  --line-soft: #241f1a;

  --ink:       #f4efe4;
  --ink-dim:   #a89d8b;
  --ink-faint: #6f6656;

  --brass:     #bd935c;
  --brass-ink: #1a1309;
  --brass-dim: #7d6440;
  --brass-wash: rgba(189,147,92,.10);

  --glass:     #85acc0;
  --glass-dim: #506a78;
  --glass-wash: rgba(133,172,192,.10);

  --danger:    #c26454;
  --ok:        #7fae7a;

  --radius-s: 2px;
  --radius-m: 3px;
  --radius-l: 5px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-s: .18s;
  --dur-m: .32s;
  --dur-l: .6s;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-s:0s; --dur-m:0s; --dur-l:0s; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter','Noto Sans JP',sans-serif;
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family:'Inter','Noto Sans JP',sans-serif; cursor:pointer; }
input,select{ font-family:'Inter','Noto Sans JP',sans-serif; }
a{ color:var(--glass); }

h1,h2,h3{
  font-family:'Fraunces','Noto Sans JP',serif;
  font-weight:500;
  font-optical-sizing:auto;
  letter-spacing:-0.01em;
  margin:0;
}
.brand-mark{ font-family:'Fraunces','Noto Sans JP',serif; font-weight:600; font-style:italic; }

:focus-visible{ outline:2px solid var(--glass); outline-offset:3px; }

.hidden{ display:none !important; }
.muted{ color:var(--ink-dim); font-size:14px; }
.muted.small{ font-size:12.5px; }

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:var(--space-6);
  padding:16px clamp(18px,4vw,32px);
  background:rgba(13,12,11,.90);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.brand-mark{ background:none; border:none; color:var(--ink); font-size:19px; padding:0; }
.topnav{ display:flex; gap:2px; flex:1; flex-wrap:wrap; }
.topnav button{
  background:none; border:none; color:var(--ink-dim); font-size:13.5px;
  padding:8px 12px; border-radius:var(--radius-m);
  transition:color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.topnav button:hover{ color:var(--ink); background:var(--surface); }
.topnav button.active{ color:var(--ink); background:var(--surface-2); }

/* ---------- "More" secondary nav dropdown ---------- */
.nav-more{ position:relative; }

/* ---------- Saved Looks trigger + drawer ---------- */
.saved-looks-trigger{
  position:relative; background:none; border:none; color:var(--ink-dim); font-size:13.5px;
  padding:8px 12px; border-radius:var(--radius-m); cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.saved-looks-trigger:hover{ color:var(--ink); background:var(--surface); }
.saved-looks-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--brass); color:var(--brass-ink); font-size:10.5px; font-weight:600;
}
.drawer-overlay{
  position:fixed; inset:0; background:rgba(6,7,9,.6); opacity:0; pointer-events:none; z-index:40;
  transition:opacity var(--dur-m) var(--ease);
}
.drawer-overlay.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px, 92vw); background:var(--bg); border-left:1px solid var(--line);
  z-index:41; display:flex; flex-direction:column; transform:translateX(100%); transition:transform var(--dur-m) var(--ease);
  box-shadow:-20px 0 50px -20px rgba(0,0,0,.6);
}
.drawer.open{ transform:none; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line-soft); }
.drawer-head h3{ font-family:'Fraunces','Noto Sans JP',serif; font-size:19px; font-weight:500; }
.drawer-close{ background:none; border:1px solid var(--line); border-radius:50%; width:32px; height:32px; color:var(--ink); cursor:pointer; }
.drawer-body{ padding:18px 20px; overflow-y:auto; flex:1; }
.nav-more-toggle{
  background:none; border:none; color:var(--ink-dim); font-size:13.5px;
  padding:8px 12px; border-radius:var(--radius-m); cursor:pointer;
  transition:color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.nav-more-toggle:hover, .nav-more-toggle[aria-expanded="true"]{ color:var(--ink); background:var(--surface); }
.nav-more-menu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:160px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-m); padding:6px;
  display:flex; flex-direction:column; gap:1px; opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease); z-index:30;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
}
.nav-more-menu.open{ opacity:1; visibility:visible; transform:none; }
.nav-more-menu button{ text-align:left; width:100%; }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.pill{ font-size:11.5px; padding:5px 10px; border-radius:2px; border:1px solid var(--line); color:var(--ink-dim); white-space:nowrap; }
.pill.sim{ color:var(--glass); border-color:var(--glass-dim); }

/* ---------- scan-room "pick a garment first" guidance ---------- */
.no-select-banner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;
  margin:var(--space-4) 0 var(--space-6); padding:14px 18px; border:1px solid var(--brass-dim);
  background:var(--brass-wash); border-radius:var(--radius-m); font-size:13.5px; color:var(--ink);
}
.disabled-block{ opacity:.4; pointer-events:none; }

/* ---------- language switch ---------- */
.lang-switch{ display:flex; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.lang-switch button{
  background:none; border:none; color:var(--ink-dim); font-size:11.5px; letter-spacing:.04em;
  padding:5px 10px; cursor:pointer; transition:color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.lang-switch button + button{ border-left:1px solid var(--line); }
.lang-switch button.active{ color:var(--brass-ink); background:var(--brass); }
.lang-switch button:hover:not(.active){ color:var(--ink); }

/* ---------- showroom video-window installation ---------- */
.fashion-windows{ margin-top:var(--space-6); padding-bottom:var(--space-7); border-bottom:1px solid var(--line-soft); }
.fashion-windows-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-5); }
.balilty-logo{ height:52px; width:auto; border-radius:var(--radius-s); flex-shrink:0; }
.windows-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); margin-top:var(--space-5); }
.videos-page .windows-row{ max-width:900px; }
.videos-page .fwindow-frame{ max-height:60vh; }
.fwindow{ margin:0; }
.fwindow-frame{
  position:relative; aspect-ratio:9/16; overflow:hidden; border-radius:var(--radius-l);
  border:1px solid var(--brass-dim); background:var(--surface-2);
  box-shadow:0 0 0 1px var(--line-soft), 0 18px 40px -22px rgba(0,0,0,.6);
}
.fwindow-media{ width:100%; height:100%; object-fit:contain; background:#f4f3ef; display:block; }
.fwindow-pending{
  position:absolute; inset:auto 0 0 0; padding:10px 14px; font-size:11.5px; color:var(--ink-dim);
  background:linear-gradient(0deg, rgba(13,12,11,.86), rgba(13,12,11,0)); text-align:center;
}
.fwindow figcaption{
  margin-top:10px; font-size:12.5px; letter-spacing:.03em; color:var(--ink-dim); text-align:center;
}
@media (max-width:820px){ .windows-row{ grid-template-columns:1fr; } }

/* ---------- video Play/Pause + Sound controls (reusable) ---------- */
.video-controls{
  position:absolute; right:10px; bottom:10px; display:flex; gap:6px; z-index:5;
}
.vc-volume{
  width:88px;
  min-width:64px;
  accent-color:#fff;
  cursor:pointer;
}
.vc-volume:disabled{ opacity:.45; cursor:not-allowed; }
@media (max-width:640px){
  .vc-volume{ width:68px; }
}
.vc-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  background:rgba(10,12,15,.68); color:var(--ink); font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  backdrop-filter:blur(4px); transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.vc-btn:hover{ background:rgba(10,12,15,.88); border-color:rgba(255,255,255,.4); }
.vc-btn.vc-sound.is-on{ border-color:var(--brass); color:var(--brass); }
.vc-btn.vc-nosource{ opacity:.4; cursor:not-allowed; }

/* ---------- BALILTY back-view gallery ---------- */
.back-gallery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:26px}
.back-gallery-thumb{border:1px solid var(--line);background:var(--panel);padding:0;cursor:pointer;aspect-ratio:3/4;overflow:hidden}
.back-gallery-thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#f3f2ef}
.back-gallery-thumb:hover,.back-gallery-thumb:focus-visible{border-color:var(--brass)}
.gallery-lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,6,7,.94);display:grid;grid-template-columns:64px minmax(0,1fr) 64px;grid-template-rows:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:56px 24px 24px}
.gallery-lightbox.hidden{display:none}
.gallery-lightbox img{grid-column:2;grid-row:1;max-width:100%;max-height:72vh;justify-self:center;object-fit:contain}
.gallery-arrow,.gallery-close{border:1px solid rgba(255,255,255,.3);background:rgba(12,13,15,.72);color:#fff;cursor:pointer;font-size:34px;min-height:52px}
.gallery-prev{grid-column:1;grid-row:1}.gallery-next{grid-column:3;grid-row:1}
.gallery-close{position:absolute;right:20px;top:18px;width:44px;height:44px;font-size:18px}
.gallery-count{grid-column:2;grid-row:2;text-align:center;color:var(--ink-dim)}
.gallery-scan{grid-column:2;grid-row:3;justify-self:center;min-width:210px}
@media(max-width:900px){.back-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.back-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-lightbox{grid-template-columns:44px minmax(0,1fr) 44px;padding:64px 8px 18px}.gallery-arrow{font-size:28px}}

/* ---------- "select this look" affordance on clickable fashion windows ---------- */
.fwindow.selectable{ cursor:pointer; }
.fwindow-select-cta{
  position:absolute; inset:0 0 auto 0; padding:12px 14px 24px; text-align:center;
  font-size:12.5px; letter-spacing:.03em; color:#fff;
  background:linear-gradient(180deg, rgba(13,12,11,.88), rgba(13,12,11,0) 70%);
  opacity:0; transform:translateY(-6px); transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
  pointer-events:none;
}
.fwindow.selectable:hover .fwindow-select-cta,
.fwindow.selectable:focus-within .fwindow-select-cta{ opacity:1; transform:translateY(0); }
.fwindow.selectable .fwindow-frame{ outline:1px solid transparent; transition:outline-color var(--dur-s) var(--ease); }
.fwindow.selectable:hover .fwindow-frame{ outline-color:var(--brass-dim); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line); color:var(--ink);
  width:38px; height:34px; padding:0; border-radius:var(--radius-m); position:relative; flex-shrink:0;
}
.nav-toggle span{
  position:absolute; left:9px; right:9px; height:2px; background:var(--ink); border-radius:1px;
  transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.nav-toggle span:nth-child(1){ top:11px; }
.nav-toggle span:nth-child(2){ top:16px; }
.nav-toggle span:nth-child(3){ top:21px; }
.nav-toggle.open span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ---------- layout ---------- */
#app{ max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,32px); }
.screen{ padding:clamp(36px,6vw,56px) 0 96px; animation:rise var(--dur-l) var(--ease); }
.screen-center{ text-align:center; padding-top:clamp(64px,14vw,120px); }
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.eyebrow{ font-size:13px; color:var(--brass); margin:0 0 14px; }
h2{ font-size:clamp(26px,4vw,34px); margin-bottom:14px; }
.lede{ color:var(--ink-dim); font-size:16px; max-width:620px; margin:0 0 var(--space-7); }

/* ---------- home ---------- */
.visual-hero{
  margin:var(--space-5) 0 var(--space-6); position:relative; overflow:hidden;
  background:#07090b; aspect-ratio:16/9; max-height:52vh; border:1px solid var(--line-soft);
}
.visual-hero img, .visual-hero video{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  animation:hero-reveal 1.1s var(--ease) both;
  background:#07090b;
}
@keyframes hero-reveal{ from{ opacity:0; transform:scale(1.045); } to{ opacity:1; transform:scale(1); } }
.visual-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(4,6,8,.78) 0%,rgba(4,6,8,.18) 48%,rgba(4,6,8,.05) 100%); pointer-events:none; }
.visual-hero-copy{ position:absolute; left:clamp(18px,3vw,32px); bottom:30px; z-index:2; display:flex; flex-direction:column; gap:8px; max-width:520px; }
.visual-hero-copy .pill{ align-self:flex-start; }
.visual-hero-copy strong{ font-family:'Fraunces','Noto Sans JP',serif; font-weight:500; font-size:clamp(22px,3vw,30px); color:#fff; }
.visual-hero-copy span:last-child{ font-size:13.5px; color:#c9cdd2; }

.journey-map{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft); margin:0 0 var(--space-7);
}
.jstep{
  background:var(--bg); border:none; text-align:left; padding:22px 18px;
  display:flex; flex-direction:column; gap:5px; color:var(--ink);
  transition:background var(--dur-s) var(--ease);
}
.jstep:hover{ background:var(--surface); }
.jn{ font-family:'Fraunces','Noto Sans JP',serif; font-size:13px; color:var(--glass); }
.jt{ font-size:15px; font-weight:500; }
.jd{ font-size:12.5px; color:var(--ink-dim); }
.home-foot{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; font-size:14px; font-weight:500;
  border-radius:var(--radius-m); border:1px solid var(--ink); color:var(--ink); background:none;
  transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.btn.big{ padding:16px 32px; font-size:16px; }
.btn:active{ transform:scale(.98); }
.btn.primary{ background:var(--brass); border-color:var(--brass); color:var(--brass-ink); }
.btn.primary:hover:not(:disabled){ background:#cba572; border-color:#cba572; }
.btn.primary:disabled{ background:var(--surface-2); border-color:var(--line); color:var(--ink-faint); cursor:not-allowed; }
.btn.ghost{ border-color:var(--line); color:var(--ink-dim); }
.btn.ghost:hover{ color:var(--ink); border-color:var(--ink); }
.nav-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--space-8); gap:16px; flex-wrap:wrap; }

/* ---------- forms / cards ---------- */
.panel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); margin-bottom:var(--space-5); align-items:start; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); padding:26px; }
.tag{ font-size:12px; color:var(--brass-dim); margin:0 0 10px; }
label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-dim); margin-bottom:16px; }
input[type=number],input[type=text],select{
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  padding:10px 12px; border-radius:var(--radius-m); font-size:15px; font-family:'Inter','Noto Sans JP',sans-serif;
  transition:border-color var(--dur-s) var(--ease);
}
input:focus,select:focus{ border-color:var(--glass); }
.checkline{ flex-direction:row; align-items:center; gap:10px; font-size:14px; color:var(--ink); }
.checkline input{ width:16px; height:16px; accent-color:var(--brass); }
.card-actions{ display:flex; gap:12px; margin-top:6px; flex-wrap:wrap; }
.summary{ font-size:15px; color:var(--ink); }
.summary.muted{ color:var(--ink-dim); font-size:14px; }
.log{ font-size:13px; color:var(--ink-dim); display:flex; flex-direction:column; gap:8px; max-height:240px; overflow-y:auto; }
.log .entry{ border-bottom:1px solid var(--line-soft); padding-bottom:8px; }

/* ---------- catalogue ---------- */
.brand-row{ display:flex; gap:10px; margin-bottom:var(--space-5); flex-wrap:wrap; }
.brand-chip{
  padding:8px 16px; border-radius:20px; border:1px solid var(--line);
  background:none; color:var(--ink-dim); font-size:13px; transition:all var(--dur-s) var(--ease);
}
.brand-chip.active{ color:var(--ink); border-color:var(--brass); background:var(--brass-wash); }
.garment-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:0; overflow:hidden; text-align:left; color:var(--ink);
  transition:border-color var(--dur-s) var(--ease);
}
.gcard:hover{ border-color:var(--ink-faint); }
.gcard.selected{ border-color:var(--brass); box-shadow:0 0 0 1px var(--brass) inset; }
.gcard.selected .ginfo::after{ content:"✓"; position:absolute; top:8px; right:10px; color:var(--brass); font-size:13px; }
.gcard .swatch{ height:260px; background:#12161b; overflow:hidden; display:block; }
.gcard .swatch img{ width:100%; height:100%; object-fit:contain; background:#f4f3ef; display:block; transition:transform var(--dur-m) var(--ease); }
.gcard:hover .swatch img{ transform:scale(1.035); }
.gcard .ginfo{ padding:14px 16px; position:relative; }
.gcard .gname{ font-size:14px; font-weight:500; }
.gcard .gbrand{ font-size:12px; color:var(--ink-dim); margin-top:2px; }

/* ---------- compact "application" showroom layout ---------- */
.showroom-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--space-6); align-items:start; margin-top:var(--space-5); }
@media (min-width:981px){
  .showroom-layout.scanner-expanded{ grid-template-columns:minmax(0,1fr) min(390px, 38vw); }
}

/* ---------- Homepage: video + Scanner side by side in the first frame ---------- */
.home-experience{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(360px,0.88fr);
  align-items:start; gap:clamp(20px,2.5vw,40px); margin-top:var(--space-5);
}
.home-experience-media{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.home-experience-media .visual-hero.home-hero{ margin:0; }
.home-experience-media h1{ font-size:clamp(24px,2.6vw,34px); }
.home-experience .showroom-scanner.home-scanner{
  min-height:min(680px, calc(100vh - 160px)); width:100%;
}
.marketplace-statement{ margin-top:var(--space-6); font-size:13px; color:var(--ink-dim); text-align:center; }
.view-full-shop{ align-self:flex-start; color:var(--ink-dim); text-decoration:underline; text-underline-offset:2px; font-size:13px; }
.view-full-shop:hover{ color:var(--ink); }

/* ---------- marketplace-in-Scanner (shared component, Home + Shop) ---------- */
.scanner-marketplace{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); }
.scanner-marketplace__toggle{
  width:100%; background:none; border:1px solid var(--line); border-radius:var(--radius-m); color:var(--ink-dim);
  padding:10px 12px; font-size:12.5px; cursor:pointer;
}
.scanner-marketplace__toggle:hover{ color:var(--ink); border-color:var(--ink-faint); }
.scanner-marketplace__panel{ margin-top:10px; }
.scanner-brand-grid, .scanner-garment-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.scanner-brand-tile, .scanner-garment-tile{
  min-width:0; padding:0; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;
  background:#111315; color:var(--ink-dim); cursor:pointer; font-size:10.5px; text-align:center;
}
.scanner-brand-tile img, .scanner-garment-tile img{ width:100%; aspect-ratio:4/5; object-fit:contain; background:#f4f3ef; display:block; }
.scanner-brand-tile span, .scanner-garment-tile span{ display:block; padding:5px 3px; }
.scanner-brand-back{ grid-column:1/-1; background:none; border:none; color:var(--ink-dim); font-size:11.5px; text-align:left; cursor:pointer; padding:2px 0 6px; }
.marketplace-disclaimer{ display:block; margin-top:8px; color:var(--ink-faint); font-size:10.5px; }

@media (max-width:980px){
  .home-experience{ grid-template-columns:1fr; }
  .home-experience .showroom-scanner.home-scanner{ min-height:auto; position:static; }
}
.showroom-left{ min-width:0; }

/* Compact garment grid: smaller thumbnails, more per row, no scroll-heavy
   catalogue feel — brief §1 ("smaller thumbnails", "more items visible",
   "avoid forcing a long scroll"). */
.garment-grid.compact{ grid-template-columns:repeat(5,1fr); gap:10px; }
.garment-grid.compact .gcard .swatch{ height:118px; }
.garment-grid.compact .gcard .ginfo{ padding:8px 9px; }
.garment-grid.compact .gcard .gname{ font-size:11.5px; line-height:1.25; }
.garment-grid.compact .gcard .gbrand{ font-size:10px; margin-top:1px; }
.garment-grid.compact .gcard .gprice{ font-size:10.5px; color:var(--brass); margin-top:2px; }

/* ---------- permanent SPATIOLOOK scanner panel ---------- */
.showroom-scanner{
  position:sticky; top:68px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-l); padding:18px; display:flex; flex-direction:column; gap:12px;
  max-height:calc(100vh - 88px); overflow-y:auto;
}

/* V12 §1: slightly denser typography/controls so the scanner fits without
   excessive internal scrolling — the image itself keeps its full size. */
.home-scanner{ font-size:.94rem; }
.home-scanner .scanner-head{ font-size:clamp(1.05rem, 1.7vw, 1.3rem); text-transform:none; letter-spacing:0; padding-bottom:8px; }
.home-scanner #scanner-body{ display:flex; flex-direction:column; gap:.7rem; }
.home-scanner button, .home-scanner select{ min-height:42px; padding:.65rem .85rem; }
.home-scanner .scanner-info{ line-height:1.3; }
.home-scanner .scanner-name{ font-size:15px; }
.home-scanner .scanner-brand, .home-scanner .scanner-price{ font-size:11.5px; }
.home-scanner .scanner-primary-button{ min-height:42px; padding:.6rem .85rem; }
.scanner-head{
  display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass); padding-bottom:10px; border-bottom:1px solid var(--line-soft);
}
.scanner-dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-faint); flex-shrink:0; }
.scanner-dot.ready{ background:var(--ok); box-shadow:0 0 8px var(--ok); }
.scanner-preview{
  aspect-ratio:3/4; border-radius:var(--radius-m); background:#0b0d10;
  border:1px dashed var(--line); display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.scanner-preview img{ width:100%; height:100%; object-fit:contain; background:#f4f3ef; display:block; }
.scanner-preview .scanner-empty-icon{ color:var(--ink-faint); font-size:28px; }
.scanner-preview .scanner-corner{
  position:absolute; width:16px; height:16px; border:1.5px solid var(--brass-dim); opacity:.7;
}
.scanner-preview .scanner-corner.tl{ top:8px; left:8px; border-right:none; border-bottom:none; }
.scanner-preview .scanner-corner.tr{ top:8px; right:8px; border-left:none; border-bottom:none; }
.scanner-preview .scanner-corner.bl{ bottom:8px; left:8px; border-right:none; border-top:none; }
.scanner-preview .scanner-corner.br{ bottom:8px; right:8px; border-left:none; border-top:none; }
.scanner-name{ font-family:'Fraunces','Noto Sans JP',serif; font-size:16px; font-weight:500; }
.scanner-brand{ font-size:12px; color:var(--ink-dim); margin-top:2px; }
.scanner-price{ font-size:14px; color:var(--brass); margin-top:4px; font-weight:500; }
.scanner-status{
  font-size:11.5px; color:var(--ink-dim); padding:8px 10px; border:1px solid var(--line-soft);
  border-radius:var(--radius-m); text-align:center; background:var(--surface-2);
}
.scanner-status.ready{ color:var(--ok); border-color:rgba(127,174,122,.35); }
.scanner-continue{ width:100%; }

/* ---------- V12: one persistent green action, sticky at the panel's
   bottom edge so it's never lost below an internal scroll ---------- */
.scanner-sticky-action{
  position:sticky; bottom:0; z-index:20; margin:10px -4px -4px; padding:10px 4px 4px;
  background:linear-gradient(to top, var(--surface) 75%, rgba(20,22,20,0) 100%);
}
.scanner-primary-button{
  width:100%; min-height:44px; padding:0.6rem 0.85rem; border-radius:var(--radius-m);
  color:#b8ff9b; border:1px solid #72d85d; background:rgba(66,130,52,.16);
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  transition:background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.scanner-primary-button:hover:not(:disabled){ background:rgba(66,130,52,.28); border-color:#8ef07a; }
.scanner-primary-button:active:not(:disabled){ transform:translateY(1px); }
.scanner-primary-button:disabled{ opacity:.55; cursor:not-allowed; }

.scanner-secondary-link{
  display:block; width:100%; text-align:center; background:none; border:none; color:var(--ink-dim);
  font-size:11.5px; text-decoration:underline; text-underline-offset:2px; cursor:pointer; padding:4px 0 0;
}
.scanner-secondary-link:hover{ color:var(--ink); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- visible scanning sweep (V12 §4) ---------- */
.scanner-visual{ position:relative; overflow:hidden; isolation:isolate; }
.scanner-sweep{
  position:absolute; left:3%; right:3%; top:0; height:3px; opacity:0; z-index:4; pointer-events:none;
  background:#8cff74; box-shadow:0 0 10px #8cff74, 0 0 24px rgba(140,255,116,.75);
}
.scanner-visual.is-scanning::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:rgba(120,255,100,.06); animation:scannerGlow 1.2s ease-in-out infinite alternate;
}
.scanner-visual.is-scanning .scanner-sweep{ opacity:1; animation:scannerSweep 1.25s linear 2; }
@keyframes scannerSweep{ from{ top:2%; } to{ top:calc(98% - 3px); } }
@keyframes scannerGlow{ from{ opacity:.25; } to{ opacity:.8; } }
@media (prefers-reduced-motion: reduce){
  .scanner-visual.is-scanning .scanner-sweep{ animation:none; top:50%; }
}

/* ---------- compact variants for the embedded scanner panel ---------- */
.mode-choice.compact{ grid-template-columns:1fr; gap:8px; margin-bottom:0; }
.mode-choice.compact .mode-card{ padding:14px; }
.scanner-choose-label{ font-size:12px; color:var(--ink-dim); margin:2px 0 8px; }
.scanner-back{ width:100%; margin-top:4px; }
.consent-gate.compact{ padding:14px; border:1px solid var(--line); border-radius:var(--radius-m); }
.consent-gate.compact p{ margin:6px 0 12px; font-size:12.5px; }
.camera-active.compact .camera-frame{ aspect-ratio:3/4; height:auto; }
.camera-active.compact .camera-frame{ position:relative; background:#090b0d; }
.body-guide{ position:absolute; inset:7% 21%; pointer-events:none; opacity:.72; }
.body-guide__head{ position:absolute; top:0; left:50%; width:17%; aspect-ratio:1; transform:translateX(-50%); border:1px solid rgba(184,255,155,.75); border-radius:50%; }
.body-guide__line{ position:absolute; top:14%; bottom:0; left:50%; width:44%; transform:translateX(-50%); border:1px solid rgba(184,255,155,.55); border-radius:46% 46% 28% 28% / 18% 18% 9% 9%; }
.capture-readiness{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:8px; }
.capture-readiness span{ padding:6px 4px; border:1px solid var(--line-soft); color:var(--ink-dim); font-size:10px; text-align:center; border-radius:3px; }
.photo-quality{ display:grid; grid-template-columns:1fr 1fr; gap:4px 8px; padding:9px 10px; border:1px solid var(--line); border-radius:var(--radius-m); font-size:10.5px; }
.photo-quality strong{ grid-column:1/-1; font-size:11.5px; }
.photo-quality.good{ color:var(--ok); border-color:rgba(127,174,122,.4); background:rgba(127,174,122,.06); }
.photo-quality.warning{ color:var(--brass); border-color:rgba(197,160,89,.45); background:rgba(197,160,89,.06); }
#sp-size-rec strong, #sp-size-rec span{ display:block; }
#sp-size-rec span{ margin-top:.3rem; color:var(--muted); font-size:.72rem; font-weight:400; line-height:1.45; }
.camera-active.compact .camera-controls{ margin-top:10px; gap:8px; }
.camera-active.compact .camera-controls .btn{ padding:8px 12px; font-size:12px; }
.scanner-continue[disabled]{ opacity:.45; cursor:not-allowed; }
.scan-visual.small{ width:100px; height:140px; margin:0 auto 12px; }
.view-toggle.compact{ justify-content:center; }
.viewer-frame.compact{ min-height:220px; padding:10px; }
.viewer-frame.compact img{ max-height:220px; }
.compare-pair.compact{ gap:6px; }
.compare-pair.compact img{ max-height:150px; }
.result-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.result-row label{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--ink-dim); }
.purchase-actions{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.purchase-actions .btn{ width:100%; }
.purchase-demo-note{ font-size:10.5px; color:var(--ink-faint); text-align:center; margin:-2px 0 2px; }

/* ---------- compact "My measurements" drawer ---------- */
.measure-panel{ margin-bottom:var(--space-5); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
.measure-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); border:none; padding:12px 16px; color:var(--ink); font-size:13.5px; cursor:pointer;
}
.measure-toggle:hover{ background:var(--surface-2); }
.measure-status{ font-size:11.5px; color:var(--ink-dim); }
.measure-status.done{ color:var(--ok); }
.measure-body{
  padding:16px; border-top:1px solid var(--line-soft); display:grid; grid-template-columns:1fr 1fr; gap:12px 16px;
  background:var(--surface-2);
}
.measure-body label{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--ink-dim); }
.measure-body .checkline{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:8px; font-size:12.5px; }
.measure-body #m-save{ grid-column:1 / -1; }
.measure-body.hidden{ display:none; }

/* ---------- View more / show less ---------- */
.view-more-btn{
  display:block; margin:18px auto 0; padding:10px 20px; background:none; border:1px solid var(--line);
  border-radius:20px; color:var(--ink-dim); font-size:12.5px; cursor:pointer;
  transition:color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.view-more-btn:hover{ color:var(--ink); border-color:var(--ink-faint); }

@media (max-width:980px){
  .showroom-layout{ grid-template-columns:1fr; }
  .showroom-scanner{
    position:sticky; bottom:0; top:auto; z-index:20; flex-direction:row; align-items:center;
    border-radius:var(--radius-l) var(--radius-l) 0 0; box-shadow:0 -12px 30px -12px rgba(0,0,0,.5);
    margin:0 calc(-1 * clamp(18px,4vw,32px)) 0; padding:12px clamp(18px,4vw,32px);
  }
  .scanner-head{ display:none; }
  .scanner-preview{ width:56px; height:56px; aspect-ratio:auto; flex-shrink:0; }
  .scanner-info{ flex:1; min-width:0; margin:0 10px; }
  .scanner-name{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .scanner-status{ display:none; }
  .scanner-continue{ width:auto; flex-shrink:0; padding:10px 16px; font-size:13px; }
  /* Once the panel has real content (garment_selected/camera/scanning/
     result), drop the sticky-bottom-bar treatment — it becomes a normal
     block directly under the grid instead of a fixed strip, so it has
     room to show the mode buttons, camera, or result without covering
     the rest of the page. */
  .showroom-scanner.expanded{
    position:static; flex-direction:column; align-items:stretch; margin:var(--space-5) 0 0;
    border-radius:var(--radius-l); box-shadow:none; padding:18px;
  }
  .showroom-scanner.expanded .scanner-head{ display:flex; }
  .showroom-scanner.expanded .scanner-preview{ width:100%; height:auto; aspect-ratio:3/4; }
  .showroom-scanner.expanded .scanner-info{ margin:0; }
  .showroom-scanner.expanded .scanner-name{ white-space:normal; }
  .showroom-scanner.expanded .scanner-status{ display:block; }
  .showroom-scanner.expanded .scanner-continue{ width:100%; }
}
@media (max-width:480px){
  .garment-grid.compact{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- scan room ---------- */
.mode-choice{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:var(--space-7); }
.mode-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:28px; text-align:left; color:var(--ink); display:flex; flex-direction:column; gap:6px;
  transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.mode-card:hover{ border-color:var(--glass-dim); }
.mode-card.active{ border-color:var(--glass); background:var(--glass-wash); }
.mc-label{ font-size:17px; font-weight:500; font-family:'Fraunces','Noto Sans JP',serif; }
.mc-sub{ font-size:13px; color:var(--ink-dim); }
.mode-index{ font-size:11px; letter-spacing:.1em; color:var(--brass); margin-bottom:16px; }

.room-heading{ display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:var(--space-5); }
.room-garment{ margin:0; text-align:right; color:var(--ink-dim); font-size:13px; max-width:300px; }
.room-garment strong{ color:var(--ink); font-size:15px; }
.scan-stage{ position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line); background:#07090b; }
.scan-stage-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; background:#07090b; }
.hero-media{ display:block; }
@media (prefers-reduced-motion: reduce){ .hero-media{ animation:none !important; } }
.scan-stage-shade{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,7,9,.86) 0%,rgba(6,7,9,.24) 56%,rgba(6,7,9,.4) 100%); }
.scan-stage-copy{ position:absolute; left:28px; bottom:30px; max-width:430px; display:flex; flex-direction:column; gap:7px; }
.scan-stage-copy strong{ font:500 clamp(22px,3vw,30px)/1.15 'Fraunces',serif; }
.scan-stage-copy span:last-child{ color:#c4c5c3; font-size:14px; }
.room-number{ color:var(--brass); font-size:11px; letter-spacing:.14em; }
.scan-stage-status{ position:absolute; right:20px; top:20px; display:flex; align-items:center; gap:9px; background:rgba(10,12,15,.8); border:1px solid rgba(255,255,255,.14); padding:9px 12px; font-size:12px; backdrop-filter:blur(6px); }
.status-light{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); }
.status-light.busy{ background:var(--brass); box-shadow:0 0 10px var(--brass); animation:pulse 1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.room-workspace{ background:var(--surface); border:1px solid var(--line); border-top:0; padding:var(--space-5); }
.room-workspace .mode-choice{ margin:0; }
.scan-facts{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line-soft); margin-top:var(--space-5); padding-top:16px; color:var(--ink-dim); font-size:11px; letter-spacing:.08em; }
.scan-actions{ margin-top:var(--space-6); }

.camera-block{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); padding:26px; margin-bottom:var(--space-5); }
.consent-gate p{ margin:8px 0 20px; }
.camera-frame{
  width:100%; max-width:420px; aspect-ratio:3/4; background:#000; border-radius:var(--radius-m); overflow:hidden;
  margin:0 auto 18px; position:relative; border:1px solid var(--line);
}
.camera-frame video{ width:100%; height:100%; object-fit:cover; }
.camera-frame img{ width:100%; height:100%; object-fit:contain; background:#090b0d; }
.camera-controls{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.upload-btn{ position:relative; overflow:hidden; }
.cam-status{ text-align:center; margin-top:14px; }

/* ---------- scanning ---------- */
.scan-visual{
  width:184px; height:264px; margin:0 auto var(--space-6); position:relative;
  border:1px solid var(--line); overflow:hidden; background:var(--surface);
}
.scan-figure{
  position:absolute; inset:20px; border:1px dashed var(--line); border-radius:60px 60px 8px 8px;
}
.scan-figure.has-person-image{ inset:8px; border-radius:2px; background-size:cover; background-position:center; border:0; opacity:.75; }
.scan-line{
  position:absolute; left:0; right:0; height:2px; background:var(--glass);
  box-shadow:0 0 14px var(--glass); animation:scan 1.6s ease-in-out infinite;
}
@keyframes scan{ 0%{ top:6%; } 50%{ top:92%; } 100%{ top:6%; } }
.progress{ width:280px; height:2px; background:var(--surface-2); margin:24px auto 0; overflow:hidden; }
.progress-bar{ height:100%; width:0%; background:var(--brass); transition:width .2s linear; }
.scan-engine-badge{
  display:inline-flex; align-items:center; gap:8px; margin:0 auto 18px; padding:6px 14px;
  border:1px solid var(--brass-dim); border-radius:20px; font-size:11.5px; letter-spacing:.06em;
  color:var(--brass); background:var(--brass-wash);
}

/* ---------- fitting ---------- */
.fitting-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--space-5); }
.view-toggle{ display:flex; gap:8px; margin-bottom:14px; }
.vtbtn{ background:none; border:1px solid var(--line); color:var(--ink-dim); padding:8px 16px; border-radius:20px; font-size:13px; transition:all var(--dur-s) var(--ease); }
.vtbtn.active{ color:var(--ink); border-color:var(--brass); }
.viewer-frame{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  min-height:420px; display:flex; align-items:center; justify-content:center;
  padding:16px; position:relative;
}
.viewer-frame img{ max-width:100%; max-height:420px; border-radius:var(--radius-m); animation:rise var(--dur-m) var(--ease); }
.viewer-frame .overlay-tag{
  position:absolute; bottom:16px; left:16px; background:rgba(18,17,15,.75);
  color:var(--glass); font-size:12px; padding:6px 10px; border-radius:var(--radius-m);
}
.garment-preview-card{ position:absolute; right:12px; bottom:12px; width:128px; padding:8px; background:rgba(11,10,9,.92); border:1px solid rgba(189,147,92,.5); text-align:left; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.garment-preview-card span{ display:block; color:var(--brass); font-size:9px; letter-spacing:.08em; margin-bottom:6px; }
.garment-preview-card img{ width:100%; height:120px; object-fit:cover; display:block; }
.garment-preview-card strong{ display:block; font-size:10px; font-weight:500; margin-top:6px; color:var(--ink); }
.back-unavailable{ max-width:320px; margin:0 auto; padding:28px 20px; border:1px dashed var(--line); border-radius:var(--radius-m); }
.back-unavailable span{ display:block; font-size:11px; letter-spacing:.08em; color:var(--brass); margin-bottom:8px; }
.back-unavailable strong{ display:block; font-family:'Fraunces','Noto Sans JP',serif; font-size:17px; font-weight:500; margin-bottom:8px; }
.back-unavailable code{ background:var(--surface-2); padding:1px 5px; border-radius:2px; font-size:12px; }
.compare-pair{ display:flex; gap:10px; width:100%; }
.compare-pair > div{ flex:1; text-align:center; }
.compare-pair img{ max-height:340px; border-radius:var(--radius-m); }
.fitting-side{ display:flex; flex-direction:column; gap:16px; }
.size-rec{ font-size:36px; font-family:'Fraunces','Noto Sans JP',serif; font-weight:500; color:var(--ink); margin:8px 0 6px; }

/* ---------- result room / My Looks drawer ---------- */
.looks-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:var(--space-5); }
#saved-looks-body .looks-grid{ grid-template-columns:1fr; gap:14px; }
.look-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); overflow:hidden; animation:rise var(--dur-m) var(--ease); }
.look-card.selected, .look-card.in-compare{ border-color:var(--brass); }
.look-card img{ width:100%; height:220px; object-fit:contain; background:#f4f3ef; display:block; }
.look-card .lc-body{ padding:12px 14px; }
.look-card .lc-name{ font-size:14px; font-weight:500; }
.look-card .lc-meta{ font-size:12px; color:var(--ink-dim); margin-top:2px; }
.look-card .lc-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.look-card .lc-actions button, .look-card .lc-actions a{
  flex:1 1 calc(50% - 4px); min-width:80px; text-align:center; font-size:11.5px; padding:7px 4px; border-radius:var(--radius-s); border:1px solid var(--line);
  background:none; color:var(--ink-dim); transition:color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease); text-decoration:none;
}
.look-card .lc-actions button:hover, .look-card .lc-actions a:hover{ color:var(--ink); }
.look-card .lc-actions [data-act="compare"]{ border-color:var(--brass-dim); }

.looks-empty-title{ font-family:'Fraunces','Noto Sans JP',serif; font-size:17px; font-weight:500; margin-bottom:6px; }

.saved-looks-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.saved-looks-header .btn{ flex-shrink:0; }

.look-comparison-head{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); margin:20px 0 10px; }
.look-comparison{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.look-compare-card{ border:1px solid var(--line); border-radius:var(--radius-m); padding:12px; background:var(--surface-2); }
.look-compare-card img{ width:100%; aspect-ratio:3/4; object-fit:contain; background:#f4f3ef; border-radius:var(--radius-s); display:block; margin-bottom:8px; }
.look-compare-card .lc-name{ font-size:13.5px; font-weight:500; margin-bottom:6px; }
.compare-table{ width:100%; border-collapse:collapse; font-size:11.5px; margin-bottom:8px; }
.compare-table th{ text-align:left; color:var(--ink-dim); font-weight:400; padding:3px 6px 3px 0; white-space:nowrap; }
.compare-table td{ text-align:right; padding:3px 0; }
@media (max-width:680px){ .look-comparison{ grid-template-columns:1fr; } }

.look-card .lc-actions button.danger:hover{ color:var(--danger); border-color:var(--danger); }

/* ---------- store console ---------- */
.store-queue{ display:flex; flex-direction:column; gap:10px; }
.req-row{
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr auto; gap:16px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); padding:16px 20px;
  transition:opacity var(--dur-m) var(--ease);
}
.req-row .rlabel{ font-size:11px; color:var(--ink-dim); display:block; margin-bottom:2px; }
.req-row .rval{ font-size:14px; color:var(--ink); }
.req-row button{ font-size:12px; padding:8px 14px; border-radius:var(--radius-s); border:1px solid var(--line); background:none; color:var(--ink-dim); }
.req-row button.done{ color:var(--ok); border-color:var(--ok); }
.req-row.fulfilled{ opacity:.55; }

/* ---------- session hand-off ---------- */
.session-demo{ display:grid; grid-template-columns:220px 1fr; gap:var(--space-6); align-items:start; }
.qr-block{ text-align:center; }
.qr-fake{
  width:200px; height:200px; background:var(--surface); border:1px solid var(--line);
  margin:0 auto 10px;
  background-image:
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(0deg, var(--line) 1px, transparent 1px);
  background-size:20px 20px;
  position:relative;
}
.qr-fake::before, .qr-fake::after{ content:""; position:absolute; width:36px; height:36px; border:6px solid var(--ink); }
.qr-fake::before{ top:14px; left:14px; }
.qr-fake::after{ top:14px; right:14px; }
.session-status-block .btn{ margin-top:6px; }

/* ---------- toast ---------- */
.toast-stack{ position:fixed; right:20px; bottom:20px; z-index:80; display:flex; flex-direction:column; gap:8px; }
.toast{
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink); font-size:13px;
  padding:12px 16px; border-radius:var(--radius-m); box-shadow:0 12px 30px rgba(0,0,0,.4);
  animation:toast-in var(--dur-m) var(--ease);
  max-width:300px;
}
.toast.out{ animation:toast-out var(--dur-m) var(--ease) forwards; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes toast-out{ to{ opacity:0; transform:translateY(8px); } }

/* ---------- footer ---------- */
.site-foot{ border-top:1px solid var(--line-soft); padding:22px clamp(18px,4vw,32px); color:var(--ink-faint); font-size:12px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot-links{ display:flex; gap:14px; }
.foot-links a{ color:var(--ink-dim); text-decoration:underline; text-underline-offset:2px; }
.foot-links a:hover{ color:var(--ink); }
.foot-clarify{ width:100%; font-size:11px; color:var(--ink-faint); }

.nav-more-divider{ height:1px; background:var(--line-soft); margin:4px 2px; }
.nav-more-menu a{ display:block; padding:8px 10px; border-radius:var(--radius-m); color:var(--ink-dim); font-size:13.5px; text-decoration:none; }
.nav-more-menu a:hover{ color:var(--ink); background:var(--surface-2); }

/* ---------- responsive ---------- */
@media (max-width:860px){
  /* backdrop-filter on .topbar creates a new containing block for any
     position:fixed descendant (per spec, same as transform/filter) — since
     #topnav lives inside <header> and becomes position:fixed at this
     breakpoint, it would otherwise be confined to the header's own ~60px
     box instead of the full viewport. Disabling the blur only here (kept
     everywhere else) is the fix, not a cosmetic downgrade. */
  .topbar{ backdrop-filter:none; }
  .nav-toggle{ display:block; }
  .topnav{
    position:fixed; top:60px; right:0; bottom:0; left:0; background:var(--bg); flex-direction:column; flex-wrap:nowrap; gap:0;
    padding:8px clamp(18px,4vw,32px) 24px; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease); overflow-y:auto;
  }
  .topnav.open{ opacity:1; transform:none; pointer-events:auto; z-index:25; }
  .topnav button{ text-align:left; padding:14px 4px; border-bottom:1px solid var(--line-soft); border-radius:0; font-size:15px; width:100%; flex-shrink:0; }
  /* On mobile the whole nav is already a full-screen stacked list, so the
     "More" dropdown just becomes an inline, always-expanded group instead
     of a second nested popover. */
  .nav-more-toggle{ display:none; }
  .nav-more-menu{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:none; padding:0; background:none; width:100%;
  }
  .nav-more-menu button{ padding:14px 4px; border-bottom:1px solid var(--line-soft); border-radius:0; font-size:15px; }
  .journey-map{ grid-template-columns:repeat(2,1fr); }
  .garment-grid.compact{ grid-template-columns:repeat(4,1fr); }
  .panel-grid,.mode-choice,.fitting-layout,.session-demo{ grid-template-columns:1fr; }
  .req-row{ grid-template-columns:1fr 1fr; }
  .looks-grid{ grid-template-columns:repeat(2,1fr); }
  .scan-stage{ min-height:0; aspect-ratio:3/4; }
  .room-heading{ align-items:start; flex-direction:column; }
  .room-garment{ text-align:left; }
  .visual-hero{ min-height:0; aspect-ratio:4/3; max-height:34vh; }
  .screen-home .lede{ font-size:14px; }
  .screen-home .home-foot{ margin-top:14px; }
  .visual-hero-copy{ left:16px; right:16px; bottom:16px; }
  /* The "Prototype · simulated engines" status pill is decorative, not
     navigation — first thing to drop when the top bar is tight, so the
     language switch (functional) always stays fully visible. */
  .topbar-right .pill.sim{ display:none; }
  .fashion-windows-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .balilty-logo{ height:40px; }
  .measure-body{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .journey-map,.looks-grid,.req-row{ grid-template-columns:1fr; }
}

/* Paired garment browsing stays inside the scanner. */
.scanner-paired-products{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}
.scanner-paired-product{padding:3px;background:transparent;border:1px solid var(--line,#777);border-radius:8px;cursor:pointer;min-width:0}
.scanner-paired-product[aria-pressed="true"]{border:2px solid var(--gold,#c7aa70)}
.scanner-paired-product img{display:block;width:100%;height:66px;object-fit:contain;border-radius:5px}
.scanner-garment-views{display:flex;gap:8px;margin:12px 0}
.scanner-garment-views button{flex:1;padding:10px;font:inherit;font-size:14px;color:inherit;background:transparent;border:1px solid var(--line,#777);border-radius:7px;cursor:pointer}
.scanner-garment-views button[aria-pressed="true"]{background:var(--gold,#c7aa70);color:#101010}
.scanner-paired-product:focus-visible,.scanner-garment-views button:focus-visible{outline:2px solid var(--gold,#c7aa70);outline-offset:3px}

.store-coming-soon{position:fixed;top:82px;right:20px;z-index:100;padding:10px 18px;border-radius:10px;background:#101924;color:#fff;border:1px solid #547082;font-size:14px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s}.store-coming-soon.visible{opacity:1;visibility:visible}

.about-page{max-width:850px;margin-inline:auto}.about-page h2{margin-top:32px}.about-page p{line-height:1.75}

.mannequin-page{max-width:1100px;margin-inline:auto}.mannequin-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:24px}.mannequin-layout form{display:grid;gap:16px}.mannequin-layout label{display:grid;gap:6px;font-size:1rem}.avatar-measurements{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mannequin-layout input,.mannequin-layout select{width:100%;min-height:44px}.mannequin-layout .avatar-consent{display:flex;align-items:flex-start;gap:10px;font-size:.875rem;line-height:1.5}.avatar-consent input{width:20px;min-height:20px;flex-shrink:0}.mannequin-preview figure{margin:0 0 20px}.mannequin-preview img{width:100%;max-height:600px;object-fit:contain}.mannequin-preview figcaption{font-size:.875rem;line-height:1.6;margin-top:12px}.mannequin-preview img[hidden]{display:none}@media(max-width:700px){.mannequin-layout{grid-template-columns:1fr}.avatar-measurements{grid-template-columns:1fr 1fr}}
.mannequin-garments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:24px}.mannequin-card{display:flex;flex-direction:column;gap:8px;text-align:left;padding:8px;min-width:0;border:1px solid var(--line,#38342a);border-radius:8px;background:transparent;color:inherit}.mannequin-card img{width:100%;height:140px;object-fit:contain;background:#e9e9e9;border-radius:4px}.mannequin-card span{font-size:.875rem;line-height:1.35}.mannequin-card.selected{border:2px solid var(--gold,#b9945e);padding:7px}.mannequin-card:focus-visible{outline:2px solid #b9945e;outline-offset:3px}.mannequin-layout form{align-content:start}.mannequin-preview h2{margin-top:0}@media(max-width:420px){.mannequin-garments{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mannequin-selection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.mannequin-selection img{width:100%;height:280px;object-fit:contain}.mannequin-selection figcaption{font-size:.875rem;line-height:1.4}

/* Shop album and contained merchant browsing */
.shops-screen{max-width:1440px;margin:auto;padding:28px 24px}.shops-album{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:24px 0}.shop-tile{overflow:hidden;min-width:0;border:1px solid #77613c;border-radius:12px;background:#111;color:#e9d4a0;text-align:left;padding:0;cursor:pointer}.shop-tile img{display:block;width:100%;height:240px;object-fit:cover}.shop-tile-copy{display:flex;flex-direction:column;gap:8px;padding:18px;font-size:14px}.shop-tile-copy strong{font-size:20px}.shop-tile-soon{display:flex;align-items:center;justify-content:center;min-height:320px;border-style:dashed;color:#b7ad98;cursor:default;font-size:16px}.shop-frame-bar{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:18px}.shop-frame-bar h1{flex:1;margin:0;font-size:26px}.shop-frame-actions{display:flex;gap:10px;flex-wrap:wrap}.shop-frame{display:block;width:100%;height:calc(100dvh - 210px);min-height:480px;background:#030303;border:1px solid #77613c;border-radius:12px}.shop-frame-help{font-size:14px;color:#b7ad98;margin-top:12px}@media(max-width:900px){.shops-album{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:540px){.shops-screen{padding:20px 14px}.shops-album{gap:12px}.shop-tile img{height:180px}.shop-tile-soon{min-height:256px}.shop-tile-copy{padding:12px}.shop-tile-copy strong{font-size:17px}.shop-frame-actions{width:100%}.shop-frame{height:70dvh;min-height:420px}}

/* Keep homepage garment browsing visible without changing the hero or palette. */
.home-scanner #scanner-body{min-width:0}
.home-scanner .scanner-browse-controls{position:sticky;top:-18px;z-index:2;background:var(--surface);padding:8px 0;flex-shrink:0}
.home-scanner .scanner-paired-products{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72px;gap:8px;overflow-x:auto;margin:0;max-width:100%;padding-bottom:4px}
.home-scanner .scanner-paired-product{padding:3px;min-height:0}
.home-scanner .scanner-garment-views{margin:8px 0 0}

/* Fit the whole garment in the homepage scanner viewport. */
.home-scanner .scanner-browse-controls + .scanner-preview{height:clamp(180px,calc(100dvh - 430px),440px);aspect-ratio:auto;flex-shrink:0}

/* Show the full homepage garment on the BALILTY shop tile. */
.shops-album .shop-tile[data-nav="balilty-shop"] img{object-fit:contain}