/* yesjo.au — shared 3D hero-viewer styles. Product pages link this + supply a
   config to app/viewer.js. */
:root{ --ink:#f3f1ec; --soft:rgba(243,241,236,.62); --accent:#c9a96a; --hair:rgba(243,241,236,.16); }
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; background:#0b0c0e; }
body{ font-family:"Inter Tight",system-ui,sans-serif; color:var(--ink);
  background:radial-gradient(120% 90% at 50% 30%, #23262c 0%, #15171b 45%, #0b0c0e 100%); }
#stage{ position:fixed; inset:0; z-index:1; }
canvas{ display:block; touch-action:none; }
/* Try-in-your-space: live camera fills the background, the 3D model (on the
   transparent canvas) composites over it. */
#tryon-video{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
body.tryon{ background:#000; }

.ui{ position:fixed; inset:0; pointer-events:none; z-index:2; }
.ui > *{ pointer-events:auto; }
.brand{ position:absolute; top:clamp(16px,2.4vw,30px); left:clamp(18px,2.6vw,34px);
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); text-decoration:none; }
.brand b{ color:var(--ink); font-weight:500; }
.brand__logo{ height:20px; width:auto; vertical-align:middle; margin-right:9px; display:inline-block; }

.caption{ position:absolute; left:clamp(18px,2.6vw,34px); bottom:clamp(18px,4vh,34px); max-width:60vw; }
.caption h1{ font-family:"Cormorant Garamond",serif; font-weight:500; font-size:clamp(1.6rem,1.2rem+2.4vw,2.8rem); line-height:1; }
.caption .price{ margin-top:.2rem; font-size:clamp(.95rem,.9rem+.3vw,1.15rem); color:var(--accent); }
.caption .hint{ margin-top:.5rem; font-size:.76rem; letter-spacing:.04em; color:var(--soft); }
.cap-link{ display:inline-block; margin-top:.7rem; font-size:.8rem; letter-spacing:.04em; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:2px; transition:color .2s; }
.cap-link:hover{ color:var(--accent); }
.cap-link[hidden]{ display:none; }

.chips{ position:absolute; top:clamp(14px,2.4vw,28px); right:clamp(14px,2.6vw,28px); display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.row{ display:flex; gap:6px; }
.chip{ font:500 .76rem/1 "Inter Tight",sans-serif; letter-spacing:.04em; color:var(--ink);
  background:rgba(255,255,255,.06); border:1px solid var(--hair); border-radius:999px; padding:8px 13px; cursor:pointer;
  backdrop-filter:blur(6px); transition:background .2s,border-color .2s,color .2s; white-space:nowrap; }
.chip:hover{ background:rgba(255,255,255,.12); border-color:var(--accent); }
.chip[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); background:rgba(201,169,106,.12); }
.chip[hidden]{ display:none; }
.chip-label{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); margin:2px 4px 0 0; align-self:center; }

.controls{ position:absolute; right:clamp(16px,2.6vw,30px); bottom:clamp(18px,4vh,34px); display:flex; gap:10px; }
.ctl{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--hair); color:var(--ink);
  font-size:1.05rem; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s,transform .2s; }
.ctl:hover{ background:rgba(255,255,255,.12); border-color:var(--accent); }
.ctl:active{ transform:scale(.93); }
.ctl[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); }

.open-btn{ position:absolute; left:50%; bottom:clamp(86px,15vh,140px); transform:translateX(-50%);
  font:500 .84rem/1 "Inter Tight",sans-serif; letter-spacing:.05em; color:#0b0c0e; background:var(--accent);
  border:0; border-radius:999px; padding:12px 22px; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:transform .2s, background .2s; animation:pulse 2.4s ease-in-out infinite; }
.open-btn:hover{ transform:translateX(-50%) scale(1.05); background:#d8bd86; animation:none; }
.open-btn[hidden]{ display:none; }
@keyframes pulse{ 0%,100%{ box-shadow:0 8px 24px rgba(0,0,0,.45); } 50%{ box-shadow:0 8px 30px rgba(201,169,106,.5); } }

.loader{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem;
  background:#0b0c0e; z-index:5; transition:opacity .6s ease; }
.loader.hide{ opacity:0; pointer-events:none; }
.spinner{ width:34px; height:34px; border:2px solid var(--hair); border-top-color:var(--accent); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loader span{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); }
@media (max-width:560px){ .caption{ max-width:48vw; } .chip{ padding:7px 10px; font-size:.7rem; } .vnav{ display:none; } }

/* ── light theme (shared 'yj.theme' key; class set on <html>) ── */
html.theme-light{ --ink:#1c1813; --soft:rgba(28,24,19,.62); --accent:#9c7c3f; --hair:rgba(40,32,16,.18); background:#f4eee2; }
html.theme-light body{ background:radial-gradient(120% 90% at 50% 30%, #fffdf8 0%, #f2ece0 48%, #e8e1d2 100%); }
html.theme-light .chip{ background:rgba(0,0,0,.05); }
html.theme-light .chip:hover{ background:rgba(0,0,0,.09); }
html.theme-light .ctl{ background:rgba(0,0,0,.05); }
html.theme-light .ctl:hover{ background:rgba(0,0,0,.09); }
html.theme-light .loader{ background:#f4eee2; }

/* ── unified cross-nav under the brand ── */
.vnav{ position:absolute; top:clamp(38px,5.2vw,58px); left:clamp(18px,2.6vw,34px); display:flex; gap:16px; z-index:3; }
.vnav a{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); text-decoration:none; transition:color .2s; }
.vnav a:hover{ color:var(--accent); }