/* ============================================================================
   RIVANDO MALL — HUD del centro commerciale 3D walkable
   ========================================================================== */
.rv3d-mount{ position:fixed; inset:0; z-index:1; background:#0a0907; overflow:hidden; touch-action:none; cursor:grab; }
.rv3d-mount:active{ cursor:grabbing; }
.rv3d-mount canvas{ display:block; width:100%; height:100%; }

/* topbar sopra al canvas */
.rv3d-topbar{ position:fixed; top:0; left:0; right:0; z-index:var(--rv-z-hud); background:linear-gradient(180deg, rgba(10,9,7,.8), transparent); }

/* HUD overlay */
.rv3d-hud{ position:fixed; inset:0; z-index:40; pointer-events:none; }
.rv3d-hud > *{ pointer-events:auto; }

/* reticolo di mira */
.rv3d-reticle{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none; }
.rv3d-dot{ width:10px; height:10px; border-radius:50%; border:2px solid rgba(255,255,255,.55); transition:.18s; }
.rv3d-reticle.on .rv3d-dot{ width:16px; height:16px; border-color:var(--rv-gold-soft); box-shadow:0 0 16px var(--rv-gold); background:rgba(200,164,92,.25); }
.rv3d-label{ font-size:13px; font-weight:700; color:var(--rv-gold-soft); text-shadow:0 1px 6px #000; opacity:0; transform:translateY(4px); transition:.18s; max-width:60vw; text-align:center; }
.rv3d-reticle.on .rv3d-label{ opacity:1; transform:none; }

/* breadcrumb negozio + uscita */
.rv3d-crumb{ position:fixed; top:64px; left:50%; transform:translateX(-50%); font-size:18px; color:var(--rv-ink); text-shadow:0 2px 10px #000; }
.rv3d-exit{ position:fixed; top:60px; left:22px; padding:9px 15px; border-radius:10px; border:1px solid var(--rv-line-strong); background:rgba(8,8,8,.55); color:var(--rv-ink); cursor:pointer; font-weight:600; backdrop-filter:blur(6px); }
.rv3d-exit:hover{ border-color:var(--rv-gold-deep); }
.rv3d-notify{ position:fixed; bottom:30px; left:50%; transform:translateX(-50%); }

/* joystick mobile */
.rv3d-joy{ position:fixed; left:22px; bottom:22px; width:118px; height:118px; border-radius:50%; border:1px solid var(--rv-line-strong); background:radial-gradient(circle, rgba(0,0,0,.4), rgba(0,0,0,.15)); display:none; place-items:center; touch-action:none; }
.rv3d-joy-knob{ width:50px; height:50px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--rv-gold-soft), var(--rv-gold-deep)); box-shadow:var(--rv-shadow-glow); }
@media (pointer:coarse){ .rv3d-joy{ display:grid; } }

/* fade di transizione tra ambienti */
.rv3d-fade{ position:fixed; inset:0; background:#0a0907; opacity:0; pointer-events:none; transition:opacity .38s var(--rv-ease); }
.rv3d-fade.on{ opacity:1; }

/* intro */
.rv3d-intro{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(8,8,7,.6); backdrop-filter:blur(8px); transition:opacity .4s; }
.rv3d-intro.gone{ opacity:0; }
.rv3d-intro-card{ max-width:520px; text-align:center; padding:34px; background:var(--rv-bg-2); border:1px solid var(--rv-line-strong); border-radius:var(--rv-r-lg); box-shadow:var(--rv-shadow-2); }
.rv3d-intro-card h2{ font-size:34px; margin:.2em 0 .4em; }
.rv3d-intro-card p{ color:var(--rv-ink-soft); line-height:1.9; margin:0 0 22px; }

/* fallback catalogo (no WebGL) */
.rv3d-fallback{ position:relative; z-index:2; max-width:1100px; margin:0 auto; padding:90px 22px 60px; }
.rv3d-fallback h2{ font-size:30px; margin:.2em 0; }
.rv3d-fallback p{ color:var(--rv-ink-mute); max-width:640px; }
.rv3d-fb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; margin-top:24px; }

@media (max-width:640px){ .rv3d-crumb{ font-size:15px; top:58px; } }

/* ---------- Showcase 3D (orbit: manichino / auto) ---------- */
.rv-showcase{ position:fixed; inset:0; z-index:340; display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .3s; }
.rv-showcase.on{ opacity:1; pointer-events:auto; }
.rv-sc-shell{ position:relative; width:min(1120px,95vw); height:min(700px,90vh); display:grid; grid-template-columns:1fr 320px; background:var(--rv-bg-2); border:1px solid var(--rv-line-strong); border-radius:var(--rv-r-lg); overflow:hidden; box-shadow:var(--rv-shadow-2); transform:scale(.97); transition:transform .3s var(--rv-ease); }
.rv-showcase.on .rv-sc-shell{ transform:scale(1); }
.rv-sc-stage{ position:relative; background:radial-gradient(70% 70% at 50% 35%, #1b1c1f, #0c0c0e); cursor:grab; touch-action:none; }
.rv-sc-stage:active{ cursor:grabbing; }
.rv-sc-stage canvas{ display:block; width:100%; height:100%; }
.rv-sc-close{ position:absolute; top:12px; right:12px; z-index:5; }
.rv-sc-hint{ position:absolute; left:16px; bottom:14px; font-size:12px; color:var(--rv-ink-mute); background:rgba(0,0,0,.4); padding:6px 11px; border-radius:999px; pointer-events:none; }
.rv-sc-panel{ padding:26px 22px; overflow-y:auto; border-left:1px solid var(--rv-line); display:flex; flex-direction:column; gap:10px; }
.rv-sc-title{ font-size:24px; margin:2px 0; }
.rv-sc-price{ font-size:20px; font-weight:800; color:var(--rv-gold-soft); }
.rv-sc-sub{ font-size:12px; color:var(--rv-ink-mute); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }
.rv-sc-strip{ display:flex; gap:8px; flex-wrap:wrap; max-height:170px; overflow-y:auto; }
.rv-sc-thumb{ width:54px; height:54px; border-radius:9px; overflow:hidden; border:1px solid var(--rv-line); background:none; cursor:pointer; padding:0; transition:.15s; }
.rv-sc-thumb.on{ border-color:var(--rv-gold); box-shadow:0 0 0 2px rgba(200,164,92,.3); }
.rv-sc-thumb img{ width:100%; height:100%; object-fit:cover; }
.rv-sc-swatches{ display:flex; gap:9px; flex-wrap:wrap; }
.rv-sc-swatch{ width:30px; height:30px; border-radius:50%; border:2px solid rgba(255,255,255,.4); cursor:pointer; transition:transform .15s; }
.rv-sc-swatch:hover{ transform:scale(1.15); }
.rv-sc-specs{ display:flex; flex-direction:column; gap:6px; margin:6px 0; }
.rv-sc-spec{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid var(--rv-line); }
.rv-sc-spec b{ color:var(--rv-ink); }
.rv-sc-actions{ display:flex; flex-direction:column; gap:9px; margin-top:auto; padding-top:12px; }
@media (max-width:760px){ .rv-sc-shell{ grid-template-columns:1fr; grid-template-rows:1fr auto; } .rv-sc-panel{ border-left:0; border-top:1px solid var(--rv-line); max-height:42vh; } }
.rv-detail-actions2{ display:flex; gap:8px; flex-wrap:wrap; }
.rv-detail-actions2 .rv-btn{ flex:1; min-width:120px; }