/* /customize: see the Remster nightstand in your room with AR.
   (The version with the photo upload is kept in customize-photo-version.css, switched off.) */
:root{
  --bg:#08090b;--surface:#111318;--line:rgba(255,255,255,.09);--line-strong:rgba(255,255,255,.18);
  --text:#f4f1ec;--dim:#a2a6ae;--gold1:#ffd27a;--gold2:#f0a02a;--r:24px;
  --logo-row:clamp(64px,6vw,84px);--gutter:clamp(16px,3vw,40px)
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;background:var(--bg);color:var(--text);font:400 15px/1.55 Inter,system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,dt{font-family:'Plus Jakarta Sans',Inter,sans-serif}
h1,p,dl,ol{margin:0}
[hidden]{display:none !important}

/* one soft warm light behind the product; everything else stays black */
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(700px 520px at 30% 42%,rgba(245,166,35,.07),transparent 65%),var(--bg)}

.top{display:flex;align-items:center;justify-content:center;height:var(--logo-row);padding:0 var(--gutter);max-width:1240px;margin:0 auto}
.logo{display:flex;align-items:center;line-height:0;border-radius:8px}
.logo img{height:clamp(46px,4.4vw,64px);width:auto;display:block}
.logo:focus-visible{outline:2px solid var(--gold1);outline-offset:4px}
@media(max-width:640px){:root{--logo-row:56px}.logo img{height:34px}}

.wrap{max-width:1240px;margin:0 auto;padding:4px var(--gutter) 56px}
.grid{display:grid;gap:26px}
@media(min-width:960px){.grid{grid-template-columns:minmax(0,1.3fr) minmax(330px,.8fr);gap:56px;align-items:center;min-height:calc(100svh - var(--logo-row) - 64px)}}

/* the stage: the 3D nightstand, with the finish options on it */
.stage{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(80% 62% at 50% 42%,rgba(255,200,120,.12),transparent 68%),linear-gradient(180deg,#15171c,#0b0c0f);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
model-viewer{display:block;position:relative;width:100%;height:clamp(420px,70vh,680px);--poster-color:transparent;--progress-bar-color:transparent;background:transparent;outline:none}
.no-bar,.ar-slot-btn{display:none}
@media(max-width:959px){model-viewer{height:clamp(300px,44svh,460px)}}

.chip{position:absolute;left:16px;top:16px;z-index:3;margin:0;padding:7px 13px;border-radius:999px;font:600 12.5px/1 Inter,sans-serif;color:#e9e6e0;background:rgba(10,12,16,.6);border:1px solid var(--line-strong);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none;transition:opacity .5s}
.chip.gone{opacity:0}

.loader{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:14px;background:linear-gradient(180deg,#15171c,#0b0c0f);color:var(--dim);font-size:14px;transition:opacity .4s}
.loader.done{opacity:0;pointer-events:none}
.loader i{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--gold2);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fail{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:16px;background:#0e1014;text-align:center;padding:24px;color:var(--dim)}

/* finish options: in the text column, under the line */
.finish{display:grid;gap:12px;justify-items:start}
.swatches{display:flex;gap:14px;flex-wrap:wrap}
.sw{--c:#888;position:relative;width:44px;height:44px;border-radius:50%;border:0;padding:0;cursor:pointer;flex:none;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.5),transparent 38%),radial-gradient(circle at 70% 80%,rgba(0,0,0,.45),transparent 55%),var(--c);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),0 6px 14px -6px rgba(0,0,0,.8);transition:transform .2s,box-shadow .2s}
.sw:hover{transform:scale(1.08)}
.sw[aria-checked="true"]{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),0 0 0 3px var(--bg),0 0 0 5px #fff}
.sw:focus-visible{outline:2px solid var(--gold1);outline-offset:6px}
.sel{margin:0;font-size:14px;color:var(--dim)}
.sel b{font:700 15px 'Plus Jakarta Sans',sans-serif;color:var(--text);margin-right:8px}
@media(max-width:420px){.swatches{gap:11px}.sw{width:40px;height:40px}.sel span{display:none}}

/* the text next to it */
.panel{display:grid;gap:22px;align-content:center}
h1{font-size:clamp(30px,4.4vw,54px);line-height:1.04;font-weight:800;letter-spacing:-.03em}
.lead{color:#c9c6bf;font-size:16.5px;max-width:42ch}

.btn{appearance:none;border:1px solid var(--line-strong);background:rgba(255,255,255,.06);color:var(--text);font:600 15px/1 Inter,sans-serif;padding:15px 20px;border-radius:14px;cursor:pointer;text-align:center;transition:background .2s,transform .2s,box-shadow .2s}
.btn:hover{background:rgba(255,255,255,.12)}
.btn.light{background:#fff;border-color:transparent;color:#0b0c0f;font-size:16px;font-weight:700;padding:17px 22px;box-shadow:0 14px 36px -16px rgba(255,255,255,.45)}
.btn.light:hover{background:#f1efea;transform:translateY(-1px)}
.btn.wide{display:block;width:100%}
.btn.small{padding:10px 14px;font-size:13px;border-radius:11px}
.btn:focus-visible{outline:2px solid var(--gold1);outline-offset:3px}
.btn:disabled{opacity:.5;cursor:wait;transform:none}

.block{display:block}
.note-box{padding:16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04);display:grid;gap:14px}
.note-box p{color:#cfccc5;font-size:14px}
.qr-box{display:flex;gap:18px;align-items:center;padding:16px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.qr{flex:none;width:132px;height:132px;padding:10px;border-radius:14px;background:#fff}
.qr svg{display:block;width:100%;height:100%}
.qr-text{display:grid;gap:8px;justify-items:start}
.qr-text p{font-size:14px;color:#cfccc5}
.qr-text b{color:var(--text);font-size:15px}

.steps{list-style:none;padding:0;display:grid;gap:12px}
.steps li{display:flex;gap:12px;align-items:flex-start;color:#d4d1ca;font-size:14.5px}
.steps span{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);color:var(--gold1);font:700 12px/1 Inter,sans-serif;margin-top:1px}
.fine{color:var(--dim);font-size:13px;max-width:46ch}

/* phones: the thumb button is always there; the one in the text column is for computers' wider layout */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(8,9,11,0),rgba(8,9,11,.94) 42%)}
.dock .btn{width:100%}
@media(min-width:960px){.dock{display:none}}
body.has-dock{padding-bottom:96px}
@media(min-width:960px){body.has-dock{padding-bottom:0}}
@media(max-width:959px){#blockAr{display:none}}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom));z-index:30;margin:0;max-width:min(92vw,420px);padding:12px 16px;border-radius:14px;background:#1b1d23;border:1px solid var(--line-strong);color:var(--text);font-size:14px;text-align:center;box-shadow:0 20px 50px -20px rgba(0,0,0,.9)}

@media(prefers-reduced-motion:reduce){.loader i{animation-duration:3s}.sw,.btn,.chip,.loader{transition:none}}