/* ==========================================================================
   DESIGN YOUR SPACE - visualizer (loaded on visualize.html only)
   ========================================================================== */
.wrap--wide{max-width:1600px}
.vz-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.vz-bar .sp{flex:1}
.vz-privacy{display:flex;align-items:center;gap:.5em}
.vz-privacy svg{flex:0 0 auto;color:var(--sage)}
.vz-grid{display:grid;grid-template-columns:230px minmax(0,1fr) 290px;gap:20px;align-items:start}
.vz-panel{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--rad);padding:18px;position:sticky;top:calc(var(--nav-h) + 12px)}
@media(max-width:1180px){
  .vz-grid{grid-template-columns:minmax(0,1fr)}
  .vz-main{order:1}.vz-tray{order:2}.vz-insp{order:3}
  .vz-panel{position:static}
}

/* ---- tray ---- */
.vz-tray-list{display:grid;gap:9px;margin:12px 0 10px}
@media(max-width:1180px){.vz-tray-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.vz-card{
  display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:var(--rad);
  background:var(--ivory);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:border-color .3s,box-shadow .3s,transform .3s;
}
.vz-card:hover,.vz-card:focus-visible{border-color:var(--sage-light);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.vz-card:active{cursor:grabbing}
.vz-card img{width:52px;height:52px;object-fit:contain;flex:0 0 auto;pointer-events:none}
.vz-card b{display:block;font-weight:400;color:var(--ink);font-size:.86rem;line-height:1.25}
.vz-card span{font-size:.7rem;color:var(--ink-mute)}
.vz-card i{font-style:normal;font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;background:var(--sage-wash);color:var(--sage);padding:.22em .55em;border-radius:20px;margin-left:5px;vertical-align:2px}
.vz-ghost{position:fixed;z-index:2000;pointer-events:none;width:120px;opacity:.9;transform:translate(-50%,-85%);filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}

/* ---- stage ---- */
.vz-stagewrap{display:flex;align-items:center;justify-content:center;background:#1d1a16;border-radius:var(--rad);min-height:360px;overflow:hidden;position:relative}
.vz-stage{position:relative;overflow:hidden;touch-action:none;background:#26221d;user-select:none;-webkit-user-select:none}
.vz-bg{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.vz-stage.has-bg .vz-bg{display:block}
.vz-layer{position:absolute;inset:0;z-index:1;isolation:isolate;pointer-events:none}
.vz-stage.drop-ok{box-shadow:inset 0 0 0 3px var(--sage)}
.vz-drop{
  position:absolute;inset:12px;border:2px dashed rgba(251,248,243,.8);border-radius:4px;display:none;
  place-items:center;color:#FBF8F3;font-family:var(--display);font-size:1.8rem;background:rgba(22,19,15,.6);z-index:5000;
}
.vz-stage.file-over .vz-drop{display:grid}
.vz-empty{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;padding:28px;color:#D9D2C7;
  background:radial-gradient(ellipse at 50% 40%,#3a342c 0%,#1d1a16 70%)}
.vz-stage.has-bg .vz-empty{display:none}
.vz-empty h2{color:#FBF8F3;margin:1rem 0 .6rem}
.vz-empty p{max-width:44ch;margin-inline:auto;color:#B9B0A3}
.vz-empty .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}

.vz-item{position:absolute;transform-origin:50% 100%;cursor:move;touch-action:none;pointer-events:auto}
.vz-item img{position:relative;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.vz-shadow{position:absolute;left:6%;right:6%;bottom:-4%;height:8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.45),rgba(0,0,0,0))}
.no-shadows .vz-shadow{display:none}
.vz-item.sel{outline:1px dashed rgba(255,255,255,.95);outline-offset:4px}
.vz-item.loading img{opacity:.35}
.vz-item.loading::before{
  content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;z-index:2;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:vzspin .8s linear infinite}
@keyframes vzspin{to{transform:rotate(360deg)}}
.vz-h{position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--sage);
  padding:0;display:none;touch-action:none;box-shadow:0 2px 8px rgba(0,0,0,.35);z-index:3}
.vz-item.sel .vz-h{display:block}
.vz-h--size{right:-14px;top:-14px;cursor:nesw-resize}
.vz-h--rot{left:50%;top:-44px;margin-left:-10px;cursor:grab}
.vz-h--rot::after{content:"";position:absolute;left:50%;top:18px;width:1px;height:24px;background:rgba(255,255,255,.9)}
@media(pointer:coarse){.vz-h{width:28px;height:28px}.vz-h--rot{margin-left:-14px;top:-52px}.vz-h--rot::after{top:26px}}

.vz-hint{position:absolute;left:50%;bottom:14px;transform:translate(-50%,20px);opacity:0;z-index:4000;pointer-events:none;
  background:rgba(22,19,15,.82);color:#FBF8F3;padding:.7em 1.2em;border-radius:100px;font-size:.74rem;letter-spacing:.04em;
  white-space:nowrap;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.vz-hint.on{opacity:1;transform:translate(-50%,0)}
/* sits on a pale chip over the photo, so it stays dark in both themes */
.vz-sample-tag{position:absolute;left:12px;top:12px;z-index:3900;display:none;background:rgba(251,248,243,.92);
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;padding:.5em .9em;border-radius:100px;pointer-events:none;color:#16130F}
.is-sample .vz-sample-tag{display:block}

/* ---- inspector ---- */
.vz-row{margin-bottom:14px}
.vz-row label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.35rem}
.vz-row output{font-family:var(--sans);font-size:.72rem;letter-spacing:0;text-transform:none;color:var(--ink)}
.vz-panel input[type=range]{width:100%;accent-color:var(--sage)}
.vz-tog{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--ink);cursor:pointer}
.vz-tog input{accent-color:var(--sage);width:16px;height:16px}
.vz-seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;margin-bottom:16px}
.vz-seg button{background:var(--paper);border:0;padding:.7em .5em;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);cursor:pointer;transition:background .3s,color .3s}
.vz-seg button+button{border-left:1px solid var(--line)}
.vz-seg button.on{background:var(--ink);color:var(--ivory)}
.vz-seg button:disabled{opacity:.4;cursor:not-allowed}
.vz-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.vz-btns .btn{padding:.8em .6em}
.vz-del{--fg:#9C4A3F;--bd:rgba(156,74,63,.35)}
.vz-tips{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.82rem;line-height:1.55;color:var(--ink-soft)}
.vz-tips li{padding-left:1rem;position:relative}
.vz-tips li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--sage-light)}
kbd{font-family:var(--sans);font-size:.72rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:0 .35em;background:var(--ivory)}

/* ---- summary ---- */
.vz-summary{margin-top:16px;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--rad);padding:18px 20px}
.vz-sum-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.8rem}
.vz-sum-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.vz-sum-list li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.vz-sum-list img{width:40px;height:40px;object-fit:contain}
.vz-sum-n{flex:1;display:flex;flex-direction:column}
.vz-sum-n b{font-weight:400;color:var(--ink);font-size:.92rem}
.vz-sum-ft{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:14px}
.vz-sum-ft .price{margin:.3rem 0 .4rem}
.vz-sum-ft .fine{max-width:42ch}
.vz-sum-cta{display:flex;gap:10px;flex-wrap:wrap}
@media(pointer:coarse){.vz-card{touch-action:manipulation}}