/* 3D garage visualizer. Builds on viz.css (same panel, swatches, buttons); only the 3D stage and the room picker live here. */
.vz3-view{display:block;background:#15181b;touch-action:none}
.vz3-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none;opacity:0;transition:opacity .35s var(--ease-standard)}
.vz3-canvas:active{cursor:grabbing}
.vz3-canvas:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.vz3-view[data-state="live"] .vz3-canvas{opacity:1}
.vz3-poster{position:absolute;inset:0;z-index:2;background:#15181b}
.vz3-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vz3-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.05) 40%,rgba(10,10,10,.72));pointer-events:none}
.vz3-poster__cta{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 16px 22px;text-align:center}
.vz3-poster__cta .vz-fine{margin:0;color:#e8e8e4;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.vz3-view:not([data-state="poster"]) .vz3-poster{display:none}
.vz3-view[data-state="poster"] .vz-caption,.vz3-view[data-state="poster"] .vz3-help{display:none}
.vz3-tools[hidden]{display:none}
.vz3-tools{max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:flex-end}
.vz3-help{position:absolute;right:12px;bottom:12px;margin:0;max-width:min(46%,420px);padding:6px 10px;border-radius:8px;background:rgba(14,14,14,.7);color:#d6d6d2;font:500 12px/1.35 var(--font-body);text-align:right;pointer-events:none;transition:opacity .5s var(--ease-standard)}
.vz3-view.is-touched .vz3-help{opacity:0}
.vz3-fail{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;background:rgba(14,14,14,.94)}
.vz3-fail[hidden]{display:none}
.vz3-fail .vz-h{margin:0}.vz3-fail .vz-note{max-width:34em}
.vz3-tabs button{--fs:12.5px}
.vz3-rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vz3-room{--bg:var(--vz-bg);--fg:#fff;--fs:13px;display:flex!important;flex-direction:column;align-items:flex-start;gap:3px;min-height:64px;padding:10px 10px!important;border:2px solid var(--vz-line)!important;border-radius:10px!important;text-align:left;cursor:pointer}
.vz3-room small{display:block;color:var(--vz-soft);font:500 11.5px/1.25 var(--font-body)}
.vz3-room[aria-checked="true"]{--bg:#fff;border-color:#fff!important;--fg:var(--ink)}
.vz3-room[aria-checked="true"] small{color:#444}
.vz3-room:hover:not([aria-checked="true"]){border-color:var(--vz-line-2)!important}
.vz3-room:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vz-seg button:disabled{opacity:.4;cursor:not-allowed}
@media (max-width:899px){
  .vz3-rooms{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vz3-room{min-height:60px;padding:8px!important}
  .vz3-help{display:none}
  .vz3-tools{top:8px;right:8px;gap:5px}
  .vz-tools button.is-labeled{padding:0 9px 0 8px;gap:5px}
  .vz3-poster__cta{padding-bottom:14px}
  .vz3-poster__cta .vz-fine{display:none}
}
@media (max-width:420px){
  .vz-tools button.is-labeled{font-size:11.5px!important;padding:0 8px 0 7px}
  .vz3-tools #vz3-reset span,.vz3-tools #vz3-door span{display:none}
  .vz3-tools #vz3-reset,.vz3-tools #vz3-door{padding:0;width:38px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.vz3-canvas,.vz3-help{transition:none}}
.vz3 .vz-head{flex-wrap:wrap;row-gap:6px}