/* app.css — interfaccia di LiveYourShop. Sobria, calda, da boutique: avorio su bruno scuro, oro come unico accento.
 * Un solo elemento "parlante": la scheda del prodotto disegnata come un cartellino appeso. Tutto il resto resta in silenzio. */

:root {
  --ink: #f3ece0;
  --ink-2: rgba(243, 236, 224, .76);
  --ink-3: rgba(243, 236, 224, .54);
  --gold: #c9a35e;
  --gold-2: #e8ce97;
  --gold-d: #8f6f3a;
  --bg: #0f0d0b;
  --panel: rgba(22, 18, 15, .78);
  --panel-2: rgba(26, 21, 17, .95);
  --line: rgba(243, 236, 224, .11);
  --line-2: rgba(243, 236, 224, .22);
  --ok: #a7c4a0;
  --warn: #e3ad6d;
  --err: #e39a86;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: Jost, system-ui, -apple-system, "Segoe UI", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --card-w: 400px;
  font-size: 15px;
}
:root.large-text { font-size: 17.5px; }
:root.hc {
  --ink-2: #fff; --ink-3: rgba(255, 255, 255, .85);
  --panel: rgba(6, 5, 4, .96); --panel-2: rgba(6, 5, 4, .99);
  --line: rgba(255, 255, 255, .42); --line-2: rgba(255, 255, 255, .7);
  --gold-2: #ffdf9c;
}
:root.rm *, :root.rm *::before, :root.rm *::after { transition-duration: .01ms !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; color: var(--ink); font: 400 1rem/1.45 var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.ic { width: 22px; height: 22px; display: block; flex: none; }
.muted { color: var(--ink-3); font-size: .84rem; }
.small { font-size: .8rem; }
.noscript { position: fixed; inset: auto 0 20px; text-align: center; color: var(--ink-2); }

canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; user-select: none; -webkit-user-select: none; }
canvas#scene.dragging { cursor: grabbing; }

/* ---------------- caricamento ---------------- */
#load { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 40%, #241d17, #0c0a09); transition: opacity .8s; z-index: 70; }
#load .box { width: min(440px, 84vw); text-align: center; }
#load h1 { font: 600 2.95rem/1.05 var(--serif); margin: 0 0 6px; letter-spacing: .02em; }
#load .sub { color: var(--gold); letter-spacing: .28em; font-size: .8rem; text-transform: uppercase; margin-bottom: 28px; }
#load .bar { height: 2px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
#load .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8f6f3a, #e8ce97); transition: width .4s; }
#load .what { margin-top: 12px; font-size: .88rem; color: var(--ink-2); min-height: 1.4em; }
#load .what.err { color: var(--err); }
#load .phases { list-style: none; margin: 22px auto 0; padding: 0; display: grid; gap: 5px; width: max-content; max-width: 100%; text-align: left; font-size: .8rem; color: rgba(243, 236, 224, .34); }
#load .phases li { display: flex; align-items: center; gap: 10px; transition: color .3s; }
#load .phases li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; flex: none; }
#load .phases li.cur { color: var(--ink); }
#load .phases li.cur::before { background: var(--gold); border-color: var(--gold); }
#load .phases li.done { color: var(--ink-3); }
#load .phases li.done::before { background: var(--gold-d); border-color: var(--gold-d); }
#load .why { margin: 22px auto 0; font-size: .78rem; color: var(--ink-3); max-width: 36ch; }
#load .retry { margin-top: 16px; }
body.ready #load { opacity: 0; pointer-events: none; }
/* [BRAND] logo di LiveYourShop nel caricamento e nel benvenuto (js/brand/loader.js). Il logo è UN file: img/brand/logo.svg
   (maschera per la versione leggera 2D, tracciato per il 3D). Oro metallico: riflesso che scorre; fermo con movimento ridotto.
   [BRAND2 12/10] riflesso del 2D con transform (lavoro del compositore, non del thread principale); benvenuto: logo più grande,
   canvas più largo della scatola (spazio per i granelli d'oro, il logo resta della misura della scatola). */
#load .lys-mark { position: relative; width: 168px; height: 168px; margin: 0 auto 14px; }
#load .lys-word { font: 600 2.95rem/1.05 var(--serif); letter-spacing: .01em; }
.lys-word .lys-y, #vt .vt-entry h2 .lys-y { color: var(--gold-2); font-style: italic; letter-spacing: 0; margin: 0 .05em 0 -.09em; }   /* [BRAND2] crenatura: il corsivo sintetico apriva un vuoto prima di «Your» e chiudeva «rS» */
#load .lys-row { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-top: 12px; }
#load .lys-row .what { margin-top: 0; }
#load .lys-pct { font: 500 .8rem/1 var(--sans); color: var(--gold-2); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.lys-mark .lys-2d { position: absolute; inset: 9%; display: block; overflow: hidden;
  -webkit-mask: url(../img/brand/logo.svg) center / contain no-repeat; mask: url(../img/brand/logo.svg) center / contain no-repeat;
  background: linear-gradient(165deg, #f4d98c 0%, #e0b24e 34%, #c38d2e 66%, #8c601e 100%); transition: opacity .6s; }
.lys-mark .lys-2d::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 70%; will-change: transform;
  background: linear-gradient(100deg, rgba(255, 246, 214, 0) 0%, rgba(255, 246, 214, .9) 50%, rgba(255, 246, 214, 0) 100%);
  animation: lys-sheen 3.6s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes lys-sheen { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(245%); } }
.lys-mark.still .lys-2d::after { animation: none; opacity: 0; }
.lys-mark canvas.lys-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s; }
.lys-mark.is3d canvas.lys-3d { opacity: 1; }
.lys-mark.is3d .lys-2d { opacity: 0; }
.lys-mark.no2d .lys-2d { display: none; }
#vt .vt-entry .lys-mark { position: relative; width: 140px; height: 140px; margin: -8px auto 12px; pointer-events: none; }
#vt .vt-entry .lys-mark canvas.lys-3d { inset: auto; left: -18%; top: -18%; width: 136%; height: 136%; }
#vt .vt-entry .lys-mark .lys-2d { inset: 7%; }
@media (max-width: 560px) { #load .lys-mark { width: 136px; height: 136px; } #load .lys-word { font-size: 2.5rem; } #vt .vt-entry .lys-mark { width: 124px; height: 124px; } }
@media (max-height: 700px) { #load .lys-mark { width: 104px; height: 104px; margin-bottom: 8px; } #vt .vt-entry .lys-mark { width: 92px; height: 92px; margin: -6px auto 6px; } }
@media (max-height: 480px) { #load .lys-mark { width: 60px; height: 60px; margin-bottom: 2px; } #load .lys-word { font-size: 2.1rem; } #load .sub { margin-bottom: 14px; }
  #load .phases, #load .why { display: none; } #vt .vt-entry .lys-mark { display: none; } }   /* telefono in orizzontale: il logo e la riga fase+percentuale bastano */
/* [/BRAND] */

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(120px + var(--safe-t)); background: linear-gradient(180deg, rgba(10, 8, 6, .34), rgba(10, 8, 6, 0)); pointer-events: none; }   /* leggibilità del nome sui soffitti luminosi */
#hud > * { pointer-events: auto; }
body.shot #hud .hint { display: none; }
.hud-tl { position: absolute; top: calc(14px + var(--safe-t)); left: calc(18px + var(--safe-l)); display: grid; justify-items: start; gap: 6px; pointer-events: none; }
.hud-tl > * { pointer-events: auto; }
.brand { display: grid; line-height: 1.1; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); pointer-events: none; }
.brand-name { font: 600 1.4rem/1 var(--serif); letter-spacing: .01em; }
.zone { font-size: .82rem; color: var(--ink-2); margin-top: 3px; min-height: 1.1em; }
.zone.in { animation: zoneIn .7s ease both; }
@keyframes zoneIn { from { opacity: 0; transform: translateY(3px); } }
.sim { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--ink-2); background: rgba(15, 12, 10, .5); border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px 4px 9px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sim.off { display: none; }
.sim-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px rgba(227, 173, 109, .18); flex: none; display: inline-block; }
.hud-tr { position: absolute; top: calc(14px + var(--safe-t)); right: calc(16px + var(--safe-r)); display: flex; gap: 8px; align-items: center; }
.ibtn, .hbtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); color: var(--ink); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; transition: border-color .2s, background .2s; padding: 0; }
.ibtn:hover, .hbtn:hover { border-color: rgba(201, 163, 94, .6); }
.cart .badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--gold); color: #1b140c; font: 600 .7rem/19px var(--sans); text-align: center; display: none; }
.cart.has .badge { display: block; }
.cart.bump { animation: bump .5s ease; }
@keyframes bump { 30% { transform: scale(1.14); } }
.pill { height: 44px; padding: 0 18px; border-radius: 99px; background: var(--panel); border: 1px solid rgba(201, 163, 94, .55); color: var(--gold-2); font-size: .88rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.walking { position: absolute; left: 50%; bottom: calc(var(--dock-h, 0px) + 26px + var(--safe-b)); transform: translate(-50%, 10px); display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: .86rem; color: var(--ink-2); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); white-space: nowrap; max-width: 92vw; }
.walking span { overflow: hidden; text-overflow: ellipsis; }
.walking.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.walking button { height: 32px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font-size: .82rem; }
/* [QA14 23/10] al telefono il cartellino «Sto andando a… · Fermati» (26 px dal fondo, centrato) si sovrapponeva al pad (118 px in basso a
   sinistra): l'arbitro lo zittiva (arb-mute) e durante le camminate (prodotto, accompagnamento alla cassa) «Fermati» non si vedeva. Ora sopra il pad */
body.touch #hud .walking { bottom: calc(var(--dock-h, 0px) + 152px + var(--safe-b)); }
body.touch #hud .walking button { height: 44px; }
.hint { position: absolute; left: 50%; bottom: calc(26px + var(--safe-b)); transform: translate(-50%, 8px); width: max-content; max-width: min(620px, 90vw); text-align: center; font-size: .84rem; line-height: 1.5; color: var(--ink-2); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 9px 16px; opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hint.on { opacity: 1; transform: translate(-50%, 0); }
body.touch .hint { bottom: calc(150px + var(--safe-b)); }
.credit { position: absolute; right: calc(18px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); font-size: .74rem; color: var(--ink-3); text-decoration: none; letter-spacing: .01em; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.credit:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
body.touch #hud .credit, body.inspecting #hud .credit, body.inspecting #hud .hint { display: none; }

/* ---------------- pad (telefono) ---------------- */
#pad { position: fixed; left: calc(22px + var(--safe-l)); bottom: calc(24px + var(--safe-b)); width: 118px; height: 118px; z-index: 15; display: none; touch-action: none; transition: opacity .25s; }
body.touch #pad { display: block; }
body.lefty #pad { left: auto; right: calc(22px + var(--safe-r)); }
body.inspecting #pad, body.modal-open #pad { opacity: 0; pointer-events: none; }
#pad .pad-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(243, 236, 224, .28); background: radial-gradient(circle, rgba(15, 12, 10, .05), rgba(15, 12, 10, .22)); transition: border-color .2s, background .2s; }
#pad .pad-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(243, 236, 224, .26); border: 1px solid rgba(243, 236, 224, .45); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); transition: transform .12s ease-out, background .2s; }
#pad.on .pad-ring { border-color: rgba(232, 206, 151, .6); }
#pad.on .pad-knob { transition: none; background: rgba(232, 206, 151, .45); }

/* ---------------- etichetta e mirino ---------------- */
#tag { position: fixed; left: 0; top: 0; z-index: 8; pointer-events: none; display: grid; justify-items: center; gap: 1px; padding: 6px 12px 7px; border-radius: 10px; background: rgba(18, 15, 12, .82); border: 1px solid var(--line); opacity: 0; transition: opacity .18s; margin-top: -10px; max-width: 260px; text-align: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#tag.on { opacity: 1; }
#tag::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: rgba(18, 15, 12, .82); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
#tag b { font: 600 1.05rem/1.15 var(--serif); }
#tag span { font-size: .8rem; color: var(--gold-2); font-variant-numeric: tabular-nums; }
#tag s { color: var(--ink-3); margin-right: 6px; }
#reticle { position: fixed; left: 50%; top: calc(50% - var(--vo, 0px) / 2); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(243, 236, 224, .85); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); z-index: 8; pointer-events: none; display: none; }
body.kbd #reticle { display: block; }
body.inspecting #reticle, body.modal-open #reticle { display: none; }

/* etichetta «scena simulata» del modulo NPC (vive nel #dock): in alto a sinistra sotto il nome della galleria, lontana dal pad
   del telefono e dal pannello dei dialoghi; nel CORE sostituisce la nostra (stesso significato, un solo segnale) */
#dock .gvn-sim { top: calc(18px + 3.25rem + var(--safe-t)); bottom: auto; left: calc(18px + var(--safe-l)); }

/* ---------------- dock (dialoghi), notifiche, dissolvenza ---------------- */
#dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none; }
#dock > * { pointer-events: auto; }
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h, 0px) + 78px + var(--safe-b)); z-index: 40; display: grid; justify-items: center; gap: 8px; width: min(560px, 92vw); pointer-events: none; }
body.touch #toasts { bottom: calc(var(--dock-h, 0px) + 158px + var(--safe-b)); }
body.inspecting #toasts { bottom: calc(26px + var(--safe-b)); left: calc((100vw - var(--card-w) - 24px) / 2); }
/* [SWEEP 23/10] QV-031 computer, tour in corso col prodotto in mano: l'avviso «... e' nel carrello» stava nella stessa fascia della barra del tour
   (sovrapposto al 90 %, invisibile proprio su «Lo metto nel carrello»): in alto, nella parte libera a sinistra della scheda (body.sw-on: ?sweep=0 = come prima) */
@media (min-width: 760px) and (min-height: 521px) { body.sw-on.tour-on.inspecting #toasts { top: calc(18px + var(--safe-t)); bottom: auto; } }
.toast { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(0, 0, 0, .35); font-size: .9rem; color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: auto; max-width: 100%; }
.toast.in { opacity: 1; transform: none; }
.toast-t { padding-right: 8px; }
.toast-a { background: none; border: 0; color: var(--gold-2); font-weight: 500; font-size: .86rem; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.toast-a:hover { background: rgba(201, 163, 94, .12); }
#fade { position: fixed; inset: 0; background: #070605; opacity: 0; pointer-events: none; z-index: 80; transition: opacity .2s; }
#fade.on { opacity: 1; }

/* ---------------- pulsanti ---------------- */
.btn { height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; font-size: .95rem; letter-spacing: .01em; transition: background .2s, border-color .2s, color .2s, transform .1s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn .ic { width: 20px; height: 20px; }
.btn.primary { background: linear-gradient(180deg, #d8b977, #c29a53); color: #1b140c; border-color: #d9bb7e; box-shadow: 0 6px 18px rgba(201, 163, 94, .2); }
.btn.primary:hover { background: linear-gradient(180deg, #e2c587, #cba35b); }
.btn.primary.done { background: rgba(201, 163, 94, .14); color: var(--gold-2); border-color: rgba(201, 163, 94, .55); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: rgba(243, 236, 224, .45); }
.btn.gold-ghost { background: transparent; color: var(--gold-2); border-color: rgba(201, 163, 94, .6); }
.btn.link { height: auto; padding: 4px 0; background: none; color: var(--gold-2); border: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(232, 206, 151, .4); }
.btn.link.small { font-size: .8rem; }
.btn.wide { width: 100%; }
.row { display: flex; gap: 10px; align-items: center; }
.row.end { justify-content: flex-end; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, .03); max-width: 100%; }
.seg button { flex: 1; min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-size: .88rem; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: rgba(201, 163, 94, .2); color: var(--gold-2); box-shadow: inset 0 0 0 1px rgba(201, 163, 94, .45); }
.seg.small button { min-height: 32px; padding: 0 12px; font-size: .8rem; }
.badge-demo { display: inline-block; font: 600 max(.66rem, 11px)/1 var(--sans); letter-spacing: .08em; padding: 4px 7px 3px; border-radius: 6px; background: var(--gold); color: #1b140c; vertical-align: middle; margin-left: 8px; }

/* ---------------- finestre ---------------- */
#modals { position: relative; z-index: 50; }
.mwrap { position: fixed; inset: 0; display: grid; place-items: center; }
.mwrap:not(.open) { pointer-events: none; }   /* in chiusura non intercetta più i clic sulla scena */
.mwrap .scrim { position: absolute; inset: 0; background: rgba(8, 6, 5, .5); opacity: 0; transition: opacity .25s; }
.mwrap.open .scrim { opacity: 1; }
.modal { position: relative; display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1); color: var(--ink); overflow: hidden; }
#modals .mwrap.open .modal { opacity: 1; transform: none; }   /* più specifico degli stati di partenza (side/center/auto) */
.mwrap.center .modal { width: min(580px, 94vw); max-height: min(90vh, 900px); max-height: min(90dvh, 900px); transform: translateY(14px) scale(.985); }
.mwrap.center.small .modal { width: min(420px, 92vw); }
.mwrap.side { place-items: stretch end; }
.mwrap.side .modal { width: min(430px, 94vw); margin: 12px; margin-right: calc(12px + var(--safe-r)); transform: translateX(28px); }
.m-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 8px 22px; flex: none; }
.m-title { font: 600 1.75rem/1.1 var(--serif); margin: 0; letter-spacing: .005em; }
.m-x { width: 40px; height: 40px; background: transparent; border-color: transparent; backdrop-filter: none; }
.m-x:hover { border-color: var(--line-2); }
.m-body { padding: 6px 22px 22px; overflow: auto; overscroll-behavior: contain; flex: 1; -webkit-overflow-scrolling: touch; }
.confirm p { color: var(--ink-2); margin: 4px 0 20px; line-height: 1.55; }

/* ---------------- schermata d'ingresso ---------------- */
#start { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px 18px; background: radial-gradient(110% 90% at 50% 38%, rgba(30, 24, 19, .45), rgba(10, 8, 7, .86)); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity .7s; overflow: auto; }
#start.in { opacity: 1; }
#start.out { opacity: 0; pointer-events: none; }
.start-top { position: absolute; top: calc(16px + var(--safe-t)); right: calc(16px + var(--safe-r)); }
.start-box { width: min(620px, 100%); text-align: center; }
#start h1 { font: 600 clamp(2.8rem, 8vw, 4.6rem)/1 var(--serif); margin: 0; letter-spacing: .01em; text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
#start .tagline { margin: 10px 0 0; color: var(--gold); letter-spacing: .28em; font-size: .78rem; text-transform: uppercase; }
#start .lead { margin: 22px auto 0; color: var(--ink-2); font-size: 1.04rem; line-height: 1.62; max-width: 46ch; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0 22px; }
.choice { display: grid; gap: 4px; text-align: left; padding: 18px 20px 17px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(20, 16, 13, .6); color: var(--ink); transition: border-color .2s, background .2s, transform .15s; }
.choice:hover { border-color: rgba(201, 163, 94, .6); }
.choice b { font: 600 1.5rem/1.1 var(--serif); }
.choice span { font-size: .86rem; color: var(--ink-2); }
.choice.primary { border-color: rgba(201, 163, 94, .75); background: linear-gradient(160deg, rgba(201, 163, 94, .24), rgba(201, 163, 94, .08)); }
.choice.primary b { color: var(--gold-2); }
.choice.solo { grid-column: 1 / -1; text-align: center; justify-items: center; }
#start .ctrl { margin: 0 auto; max-width: 52ch; font-size: .84rem; line-height: 1.55; color: var(--ink-3); }
#start .note { margin: 14px auto 0; display: inline-flex; gap: 9px; align-items: center; font-size: .78rem; color: var(--ink-2); text-align: left; max-width: 52ch; }
.start-credit { position: static; display: inline-block; margin-top: 26px; }
#start > .start-credit { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--safe-b)); right: auto; margin: 0; white-space: nowrap; }

/* ---------------- scheda prodotto: il cartellino ---------------- */
#card { position: fixed; z-index: 30; top: calc(72px + var(--safe-t)); right: calc(16px + var(--safe-r)); bottom: 16px; width: var(--card-w); display: flex; flex-direction: column; padding: 40px 26px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(36, 29, 23, .95), rgba(21, 17, 14, .96)); border: 1px solid rgba(201, 163, 94, .26); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); opacity: 0; transform: translateX(36px); pointer-events: none; transition: opacity .3s, transform .4s cubic-bezier(.2, .8, .2, 1); }
#card.open { opacity: 1; transform: none; pointer-events: auto; }
#card .tag-hole { position: absolute; top: 15px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: #0c0a08; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 0 0 1px rgba(201, 163, 94, .55); }
#card .tag-hole::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 16px; background: linear-gradient(180deg, rgba(201, 163, 94, 0), rgba(201, 163, 94, .7)); }
#card .card-x { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; background: transparent; border-color: transparent; backdrop-filter: none; }
#card .card-x:hover { border-color: var(--line-2); }
.card-scroll { flex: 1; overflow: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px; }
#card .shop { margin: 0; font-size: .82rem; color: var(--gold-2); letter-spacing: .04em; }
#card .name { font: 600 2.05rem/1.04 var(--serif); margin: 4px 0 14px; letter-spacing: .005em; }
#card .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#card .now { font: 600 2rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
#card .was { color: var(--ink-3); font-size: .95rem; }
#card .sale { font-size: .72rem; color: #1b140c; background: var(--gold-2); border-radius: 6px; padding: 3px 7px 2px; }
#card .vat { margin-left: auto; color: var(--ink-3); font-size: .74rem; }
.stock { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-2); margin: 12px 0 0; }
.stock i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.stock.low i { background: var(--warn); }
.stock.out { color: var(--err); }
#card .desc { margin: 12px 0 0; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.opt { margin-top: 18px; }
.opt-l { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: .8rem; }
.opt-l span { color: var(--ink-3); }
.opt-l b { font-weight: 500; color: var(--ink); text-align: right; }
.swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.sw { width: 30px; height: 30px; border-radius: 50%; padding: 0; border: 0; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 1px 3px rgba(0, 0, 0, .4); outline-offset: 3px; }
.sw[aria-checked="true"] { outline: 1.5px solid var(--gold-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-width: 46px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); font-size: .9rem; font-variant-numeric: tabular-nums; }
.chip[aria-checked="true"] { border-color: var(--gold); background: rgba(201, 163, 94, .16); color: var(--gold-2); }
.card-actions { display: grid; gap: 8px; margin-top: 16px; }
.card-actions .row { justify-content: space-between; }
.card-actions .row .btn { flex: 1; }
.card-actions .page { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-2); text-decoration: none; padding: 8px 4px; white-space: nowrap; }
.card-actions .page .ic { width: 15px; height: 15px; }
.card-actions .page:hover { color: var(--gold-2); }
.btn.add.pulse { animation: addPulse .6s ease; }
@keyframes addPulse { 40% { transform: scale(1.03); } }
#card .demo, .cart-foot .demo { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; font-size: .72rem; color: var(--ink-3); line-height: 1.4; }
.inspect-hint, .inspect-mag { position: fixed; z-index: 29; left: calc((100vw - var(--card-w) - 24px) / 2); transform: translate(-50%, 6px); padding: 7px 14px; border-radius: 99px; background: rgba(15, 12, 10, .6); border: 1px solid var(--line); font-size: .8rem; color: var(--ink-2); opacity: 0; transition: opacity .4s, transform .4s; pointer-events: none; white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.inspect-hint { bottom: calc(28px + var(--safe-b)); }
.inspect-mag { top: calc(76px + var(--safe-t)); color: var(--gold-2); }
.inspect-hint.on, .inspect-mag.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- carrello ---------------- */
.mwrap.cart .modal, .mwrap.menu .modal { display: flex; }
.cart-list { list-style: none; margin: 0; padding: 0; }
.ci { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ci-img { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; padding: 0; border: 1px solid var(--line); background: #16120f; }
.ci-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-name { margin: 0; font: 600 1.14rem/1.15 var(--serif); }
.ci-var { margin: 3px 0 0; font-size: .8rem; color: var(--ink-3); }
.ci-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; height: 34px; }
.qty span { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; font-size: .9rem; }
.qb { width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0; color: var(--ink-2); padding: 0; }
.qb .ic { width: 16px; height: 16px; }
.qb:disabled { opacity: .3; }
.rm { background: none; border: 0; color: var(--ink-3); font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.ci-price { margin: 0; font: 600 1.1rem/1.2 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-foot { padding-top: 16px; display: grid; gap: 10px; }
.cart-foot .sum { display: flex; justify-content: space-between; align-items: baseline; }
.cart-foot .sum span { color: var(--ink-2); }
.cart-foot .sum b { font: 600 1.6rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.cart-foot .muted { margin: 0 0 6px; }
.empty { text-align: center; padding: 34px 10px 20px; color: var(--ink-2); }
.empty-ic { color: var(--gold); display: grid; place-items: center; margin-bottom: 10px; }
.empty-ic .ic { width: 40px; height: 40px; }
.empty p { max-width: 30ch; margin: 0 auto 20px; line-height: 1.55; }

/* ---------------- cassa ---------------- */
.mwrap.checkout .modal { width: min(640px, 94vw); }
.co-demo { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px dashed rgba(201, 163, 94, .5); background: rgba(201, 163, 94, .08); font-size: .82rem; color: var(--ink-2); }
.co-demo .badge-demo { margin: 0; }
.steps { list-style: none; display: flex; gap: 6px; margin: 18px 0 18px; padding: 0; }
.steps li { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: .78rem; color: var(--ink-3); border-top: 2px solid var(--line); padding-top: 8px; }
.steps li > button { all: unset; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.steps li > button:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.steps li i { font-style: normal; font-variant-numeric: tabular-nums; font-size: .72rem; }
.steps li.cur { color: var(--ink); border-top-color: var(--gold); }
.steps li.ok { color: var(--ink-2); border-top-color: var(--gold-d); }
.co-step { display: grid; gap: 12px; }
/* [UI_CAFFE 13/10] QV-049: la colonna dei passi non si allarga più sul contenuto (prima le tre schede del riepilogo, larghe quanto
 * il loro testo più lungo, allargavano TUTTA la colonna oltre il pannello: prezzi, «Totale» e «Modifica» tagliati a destra) */
.co-step { grid-template-columns: minmax(0, 1fr); }
.co-step > * { min-width: 0; }
.co-form { display: grid; gap: 12px; }
.co-fill { display: flex; justify-content: flex-end; margin-top: -4px; }
.co-fill .btn .ic { width: 18px; height: 18px; }
.f { display: grid; gap: 6px; min-width: 0; }
.f > span:first-child { font-size: .8rem; color: var(--ink-2); }
.f input, .f select, .f textarea { width: 100%; min-height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--ink); font-size: 1rem; outline: none; transition: border-color .2s, background .2s; }
.f textarea { padding: 10px 12px; resize: vertical; min-height: 64px; }
.f select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.f select option { background: #1e1813; }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--gold); background: rgba(201, 163, 94, .06); }
.f [aria-invalid="true"] { border-color: var(--err); }
.f .err { color: var(--err); font-size: .78rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 12px; }
.radios { display: grid; gap: 10px; }
.radio { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 14px 16px 14px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .025); color: var(--ink); transition: border-color .2s, background .2s; }
.radio:hover { border-color: rgba(243, 236, 224, .4); }
.radio[aria-checked="true"] { border-color: var(--gold); background: rgba(201, 163, 94, .1); }
.r-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .04); color: var(--gold-2); }
.r-txt { display: grid; gap: 2px; }
.r-txt b { font-weight: 500; font-size: 1rem; }
.r-txt > span { font-size: .82rem; color: var(--ink-2); }
.r-right { font: 600 1.15rem/1 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.co-nav .btn.primary { min-width: 160px; }
.co-nav .place { width: auto; flex: 1; }
/* [UI_CAFFE 13/10] QV-049: «Conferma ordine dimostrativo» va a capo invece di spingere la barra fuori dal pannello stretto */
.co-nav .place { min-width: 0; white-space: normal; height: auto; min-height: 46px; padding-top: 8px; padding-bottom: 8px; line-height: 1.2; text-align: center; }
.co-busy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; background: rgba(20, 16, 13, .9); z-index: 2; color: var(--ink-2); }
.spin { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(201, 163, 94, .25); border-top-color: var(--gold-2); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rv-h { margin: 0; font: 500 .8rem/1 var(--sans); color: var(--ink-3); letter-spacing: .03em; }
.rv-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rv-items li { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; }
.rv-items em { color: var(--ink-3); font-style: normal; }
.rv-items b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rv-blocks section { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: .86rem; line-height: 1.45; }
.rv-blocks header { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.rv-blocks h3 { margin: 0; font: 500 .76rem/1.2 var(--sans); color: var(--ink-3); }
.rv-blocks p { margin: 6px 0 0; }
.rv-blocks .badge-demo { margin-left: 4px; }
/* [UI_CAFFE 13/10] QV-049: colonne che non superano il pannello (minmax 0), la prima più larga per indirizzo ed e-mail; testo lungo
 * (e-mail, nomi) va a capo dentro la scheda; «Modifica» scende sotto il titolo se non ci sta */
.rv-blocks { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.rv-blocks section { min-width: 0; overflow-wrap: anywhere; }
.rv-blocks header { flex-wrap: wrap; row-gap: 2px; }
/* pannello a lato della cassa del tour (460 px al computer): indirizzo a sinistra, consegna e pagamento uno sopra l'altro a destra */
.mwrap.checkout.auto .rv-blocks { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.mwrap.checkout.auto .rv-blocks section:first-child { grid-row: span 2; }
.rv-items li > span { min-width: 0; overflow-wrap: anywhere; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.totals dt { color: var(--ink-2); font-size: .9rem; }
.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-size: .92rem; }
.totals .tot { font: 600 1.55rem/1.1 var(--serif); color: var(--ink); padding-top: 4px; }
.totals .vat { font-size: .76rem; color: var(--ink-3); }
.totals dd { white-space: nowrap; }   /* [UI_CAFFE 13/10] QV-049: un importo non si spezza mai (12.345,90 € intero) */
.terms { margin: 0; }
.co-done { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 18px 4px 6px; }
.co-done p { margin: 0; color: var(--ink-2); max-width: 44ch; line-height: 1.5; }
.done-ic { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold-2); background: rgba(201, 163, 94, .1); margin-bottom: 6px; }
.done-ic .ic { width: 32px; height: 32px; }
.co-done h3 { margin: 0; font: 600 2.05rem/1.1 var(--serif); }
.co-done .order-no { font: 600 1.4rem/1.2 var(--serif); color: var(--gold-2); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.co-done .demo-strong { display: flex; gap: 9px; align-items: center; text-align: left; margin: 10px 0 8px; padding: 10px 14px; border-radius: 12px; background: rgba(201, 163, 94, .08); border: 1px dashed rgba(201, 163, 94, .45); font-size: .84rem; }
.co-done .btn { margin-top: 6px; }

/* cassa dimostrativa guidata dal tour: pannello a lato, scena e barra del tour (in basso) restano libere e cliccabili */
.mwrap.auto { pointer-events: none; place-items: stretch end; }
.mwrap.auto .scrim { display: none; }
.mwrap.center.checkout.auto .modal { pointer-events: auto; margin: calc(72px + var(--safe-t)) calc(16px + var(--safe-r)) calc(100px + var(--safe-b)) 0; width: min(460px, 92vw); max-height: none; transform: translateX(28px); }

/* ---------------- menu, aiuto, crediti ---------------- */
.set-g { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.set-g:first-child { padding-top: 4px; }
.set-g h3 { margin: 0; font: 500 .78rem/1.2 var(--sans); color: var(--ink-3); letter-spacing: .03em; }
.set-l { margin: 0 0 7px; font-size: .86rem; color: var(--ink-2); }
.set .seg { width: 100%; }
.tog { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 4px 0; background: none; border: 0; color: var(--ink); text-align: left; }
.tog-txt { display: grid; gap: 2px; }
.tog-txt b { font-weight: 500; font-size: .96rem; }
.tog-txt span { font-size: .8rem; color: var(--ink-3); }
.sw-track { position: relative; width: 44px; height: 26px; border-radius: 99px; background: rgba(255, 255, 255, .14); flex: none; transition: background .2s; }
.sw-track i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform .2s; }
.tog[aria-checked="true"] .sw-track { background: var(--gold); }
.tog[aria-checked="true"] .sw-track i { transform: translateX(18px); background: #1b140c; }
.link-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; background: none; border: 0; color: var(--ink); font-size: .96rem; text-align: left; }
.link-row .ic { color: var(--gold-2); width: 20px; height: 20px; }
.link-row:hover span { text-decoration: underline; text-underline-offset: 3px; }
.credit.in-menu { position: static; display: block; margin-top: 18px; font-size: .84rem; color: var(--gold-2); text-shadow: none; }
.help dl { display: grid; grid-template-columns: 11rem 1fr; gap: 12px 18px; margin: 4px 0 16px; }
.help dt { font: 600 1.1rem/1.3 var(--serif); }
.help dd { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.help p { margin: 8px 0 0; line-height: 1.5; }
.about p { color: var(--ink-2); line-height: 1.6; margin: 0 0 12px; }
.about .credits { padding-left: 18px; color: var(--ink-2); font-size: .88rem; line-height: 1.7; margin: 0; }
/* [UI2 12/10] link dei crediti CC BY (autore, fonte, licenza): leggibili e toccabili, sottolineati */
.about .credits a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 2px; padding: 4px 0; }
.about .credits a:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 3px; }
.about .credits li[hidden] { display: none; }
.about .about-lic { margin: 10px 0 0; } .about .linklike { background: none; border: 0; padding: 6px 0; color: var(--gold-2); font: inherit; font-size: .84rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }   /* [COORD 16/10] link «Licenze» */
.about .linklike:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 3px; }
.licenze .licenze-full { color: var(--ink-3, var(--ink-2)); font-size: .8rem; }

/* [QA13 17/10] prova da umano al telefono: aree di tocco >= 44 px (prima: X delle finestre 40-42, X della scheda prodotto 38, +/- del
   carrello 32, campioni di colore 30, taglie e scelte 38, «Rimuovi», «Annulla», voci del menu e collegamenti 25-29 px). Aspetto quasi
   invariato: dove il disegno e' piu' piccolo si allarga solo l'area sensibile (::after trasparente). */
@media (pointer: coarse) {
  body .ibtn, body .hbtn, body .m-x { width: 44px; height: 44px; }   /* body: vince anche sul blocco «telefono» piu' in basso (42 px) */
  #card .card-x { width: 44px; height: 44px; top: 6px; right: 6px; }
  .qb { width: 44px; height: 44px; }
  .chip, .seg button { min-height: 44px; }
  .sw { position: relative; }
  .sw::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
  .rm, .toast-a, .link-row, .btn.link, .about .linklike { min-height: 44px; }
  .sim { position: relative; }
  .sim::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
  .set.tog { min-height: 44px; }
  .about .credits a, .licenze .credits a { display: inline-block; padding: 9px 2px; margin: -5px 0; }
  .mwrap input[type=range] { min-height: 44px; }
  /* «Chi è Marco» (stili nella scheda: qui con un selettore piu' forte), configuratore del ledwall */
  body .chs-x { width: 44px; height: 44px; }
  body .chs-tab { min-height: 44px; }
  body .chs-link { position: relative; } body .chs-link::after { content: ""; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; }
  body .lw-seg button, body .lw-d, body .lw-peekb { min-height: 44px; height: auto; }
  body .lw-cfg .btn { height: 44px; }
  /* cassa: al telefono i passi gia' fatti sono solo il numero (16 px): area allargata */
  .steps li > button { position: relative; }
  .steps li > button::after { content: ""; position: absolute; left: -3px; right: -3px; top: -14px; bottom: -14px; }
  /* «Scheda completa» della scheda prodotto (34 px), pillola «Riprendo il tour…» (32 px), dialogo con lo staff (X 36, «Continua» 22 px) */
  .card-actions .page { min-height: 44px; }
  #card .demo, .cart-foot .demo { font-size: 11.5px; }   /* [QA13 23/10] «Prodotto dimostrativo…» 10,8 px */
  #arb-hold button, body .gvd-x, body .gvd-skip { position: relative; }
  #arb-hold button::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
  body .gvd-x::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }   /* [QA14] area misurata 42x42 -> 46 */
  body .gvd-skip::after { content: ""; position: absolute; left: -6px; right: -6px; top: -11px; bottom: -11px; }
  /* [QA14 23/10] risposte del dialogo (Luca, personale, clienti) 40 px; «Vuoi anche tu un sito…» nel menu 18 px */
  body .gvd-opts button { min-height: 44px; }
  .credit.in-menu { padding: 13px 0; margin-top: 5px; }
}
/* [QA13 17/10] credito in basso a destra (computer): sopra il pavimento chiaro della piazza non si leggeva (testo grigio su bianco):
   pillola scura discreta come «Scena simulata» */
#hud .credit { padding: 6px 12px; border-radius: 99px; background: rgba(15, 12, 10, .5); border: 1px solid var(--line); color: var(--ink-2); text-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* [QA13 17/10] amministratore live, pianta grande: nella colonna di 250 px le etichette della legenda («61–120», «121–180») andavano a capo
   e si accavallavano: due righe da tre, etichette su una riga */
.mwrap .gvm-big .gvm-sw { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 12px; justify-content: start; }
.mwrap .gvm-big .gvm-sw span { min-width: 0; white-space: nowrap; }
.mwrap .gvm-big .gvm-sw i { width: 56px; }

/* ---------------- telefono e schermi stretti ---------------- */
@media (max-width: 759px) {
  :root { --card-w: 0px; }
  .brand-name { font-size: 1.22rem; }
  .hud-tr { gap: 6px; }
  .pill { height: 40px; padding: 0 14px; font-size: .8rem; }
  .ibtn, .hbtn { width: 42px; height: 42px; }
  .choices { grid-template-columns: 1fr; }
  .mwrap.side { place-items: end stretch; }
  .mwrap.side .modal { width: 100%; margin: 0; max-height: 88vh; max-height: 88dvh; border-radius: 20px 20px 0 0; transform: translateY(40px); padding-bottom: var(--safe-b); }
  .mwrap.center.checkout .modal, .mwrap.center.help-m .modal { width: 100%; height: 100%; max-height: none; border-radius: 0; padding-top: var(--safe-t); padding-bottom: var(--safe-b); }
  .mwrap.auto { place-items: stretch; }
  .mwrap.center.checkout.auto .modal { width: auto; height: auto; margin: calc(196px + var(--safe-t)) 8px calc(118px + var(--safe-b)); border-radius: 18px; padding: 0; transform: translateY(20px); }
  .m-head { padding: 14px 12px 6px 18px; }
  .m-body { padding: 6px 18px 18px; }
  .m-title { font-size: 1.55rem; }
  #card { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 52vh; max-height: 52dvh; border-radius: 20px 20px 0 0; padding: 30px 18px calc(12px + var(--safe-b)); transform: translateY(40px); background: linear-gradient(180deg, #241d17, #16120f); }
  #card .name { font-size: 1.6rem; margin-bottom: 10px; }
  #card .now { font-size: 1.6rem; }
  #card .desc { font-size: .9rem; }
  .card-actions { margin-top: 12px; }
  #card .demo { margin-top: 8px; }
  .inspect-hint, .inspect-mag { left: 50%; }
  .inspect-hint { top: calc(124px + var(--safe-t)); bottom: auto; }   /* sotto l'HUD e sotto la pillola del tour (66–110px) */
  .inspect-mag { top: calc(162px + var(--safe-t)); }
  body.inspecting #toasts { left: 50%; bottom: auto; top: calc(66px + var(--safe-t)); }
  .grid3 { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
  .grid3 > :nth-child(2) { grid-column: span 2; }
  .rv-blocks, .mwrap.checkout.auto .rv-blocks { grid-template-columns: minmax(0, 1fr); }   /* [UI_CAFFE 13/10] anche la cassa del tour */
  .mwrap.checkout.auto .rv-blocks section:first-child { grid-row: auto; }
  .steps li span { display: none; }
  .steps li.cur span { display: inline; }
  .help dl { grid-template-columns: 1fr; gap: 4px; }
  .help dd { margin-bottom: 10px; }
  .co-nav { position: sticky; bottom: -18px; background: var(--panel-2); padding-bottom: 10px; }
}
@media (max-height: 520px) and (max-width: 1000px) {
  #card { max-height: none; top: calc(64px + var(--safe-t)); bottom: 10px; left: auto; right: 10px; width: min(360px, 48vw); border-radius: 18px; transform: translateX(30px); }
}

/* ================= convivenza fra HUD, dialoghi, scheda prodotto e tour guidato =================
 * body.tour-on (tour in corso, classe del modulo tour): via le parti dell'HUD che si scontrano con barra e sottotitoli
 * (pad, suggerimenti, «sto andando a…», credito: il tour ha la sua chiusura con il contatto) e il pulsante modalità
 * (la barra del tour ha già «Prendo io il comando»). Restano nome, zona, «scena simulata», carrello e menu. */
body.tour-on #pad, body.tour-on #hud .hint, body.tour-on #hud .walking, body.tour-on #hud .credit, body.tour-on #hud .pill.mode, body.tour-on #reticle { display: none !important; }
/* dialogo aperto nel dock: il pad (inutile, il visitatore è fermo) non resta sotto il pannello */
body:has(#dock .gvd.on:not(.min)) #pad, body:has(#dock .gvd.on:not(.min)) #hud .hint { opacity: 0; pointer-events: none; }
/* amministratore live (pannello .gva del modulo admin, sopra l'HUD) e prodotto in mano: un pannello alla volta. Con l'oggetto in mano
   il cruscotto si fa da parte (scheda e «Aggiungi al carrello» restano raggiungibili) e torna quando lo si rimette a posto */
body.inspecting .gva.on { opacity: 0; pointer-events: none; }
@media (min-width: 760px) {
  /* computer: il cruscotto occupa la destra; dialogo, notifiche e «sto andando a…» si centrano nella parte libera (la X del
     dialogo non finisce mai sotto il pannello) */
  body:has(.gva.on) #dock { right: calc(min(380px, 100vw - 24px) + 24px); }
  body:has(.gva.on) #dock .gvd.in-dock { max-width: calc(100% - 16px); }
  body:has(.gva.on) #toasts { left: calc((100vw - min(380px, 100vw - 24px) - 24px) / 2); width: min(560px, calc(100vw - 440px)); }
  body:has(.gva.on) #hud .walking, body:has(.gva.on) #hud .hint { left: calc((100vw - min(380px, 100vw - 24px) - 24px) / 2); }
  /* computer, prodotto in mano con un dialogo aperto: il dialogo si sposta nella parte libera a sinistra della scheda (la sua X non
     finisce sotto il cartellino) e il suggerimento dei gesti sale sopra il dialogo */
  body.inspecting #dock { right: calc(var(--card-w) + 32px); }
  body.inspecting #dock .gvd.in-dock { max-width: calc(100% - 16px); }
  body.inspecting:has(#dock .gvd.on:not(.min)) .inspect-hint { bottom: calc(var(--dock-h, 0px) + 14px + var(--safe-b)); }
  body.inspecting:has(#dock .gvd.on:not(.min)) #toasts { bottom: calc(var(--dock-h, 0px) + 60px + var(--safe-b)); }
}

@media (max-width: 759px) {
  /* scheda prodotto + dialogo aperto: il pannello si compatta (chi parla, due righe, X) e sale sopra il foglio della scheda;
     le scelte tornano appena si rimette a posto il prodotto */
  body.inspecting #dock { bottom: calc(var(--card-h, 46vh) + 6px); }
  body.inspecting #dock .gvd.in-dock { width: calc(100vw - 16px); margin: 0 auto; }
  body.inspecting #dock .gvd-opts, body.inspecting #dock .gvd-foot, body.inspecting #dock .gvd-echo { display: none !important; }
  body.inspecting #dock .gvd-card { padding: 7px 10px 8px; border-radius: 14px; }
  body.inspecting #dock .gvd-head { gap: 9px; }
  body.inspecting #dock .gvd-ava { width: 28px; height: 28px; font-size: 12px; }
  body.inspecting #dock .gvd-name { font-size: 13.5px; }
  body.inspecting #dock .gvd-role { font-size: 11px; }
  body.inspecting #dock .gvd-x { width: 30px; height: 30px; font-size: 19px; }
  body.inspecting #dock .gvd-text { font-size: 13.5px; line-height: 1.4; min-height: 0; margin: 4px 1px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* suggerimenti della presa appena sopra la scheda (in alto restano HUD e notifiche) */
  .inspect-hint { top: auto; bottom: calc(var(--card-h, 46vh) + var(--insp-dock, 0px) + 14px); }
  .inspect-mag { top: calc(88px + var(--safe-t)); }
  body.inspecting #toasts { top: calc(88px + var(--safe-t)); }
  body.inspecting:has(#dock .gvd.on:not(.min)) { --insp-dock: 96px; }
  /* tour in corso sul telefono: la scheda del prodotto e il pannello del titolare stanno sopra la barra dei capitoli */
  body.tour-on #card { bottom: calc(118px + var(--safe-b)); left: 8px; right: 8px; max-height: 36vh; max-height: 36dvh; border-radius: 20px; padding-bottom: 12px; }
  body.tour-on .gva { bottom: calc(118px + var(--safe-b)); height: auto; top: calc(250px + var(--safe-t)); }
  body.tour-on.inspecting #dock { display: none; }
  /* tour in corso: le notifiche (es. «aggiunto al carrello») stanno appena sopra la barra dei capitoli; i sottotitoli salgono */
  body.tour-on:not(.inspecting) #toasts { bottom: calc(124px + var(--safe-b)); }
  /* pannello dell'amministratore live aperto (foglio sotto l'HUD): la pillola del tour in esplorazione libera si fa da parte,
     altrimenti copre il titolo e l'etichetta «DEMO · dati simulati»; torna appena il pannello si chiude */
  body:has(.gva.on) #vt .vt-free { opacity: 0; pointer-events: none; }
  /* telefono: il cruscotto è un foglio grande; se un addetto apre un dialogo il dialogo passa davanti (la X resta sempre
     raggiungibile) e il cruscotto ricompare quando il dialogo si chiude */
  body:has(#dock .gvd.on:not(.min)) .gva.on { opacity: 0; pointer-events: none; }
}
/* telefono in orizzontale: la scheda sta a destra; il dialogo resta nella parte libera a sinistra, compatto */
@media (max-height: 520px) and (max-width: 1000px) {
  body.inspecting #dock { bottom: 0; right: calc(min(360px, 48vw) + 16px); }
  body.inspecting #dock .gvd.in-dock { width: auto; margin: 0 8px 8px; }
  body.inspecting #dock .gvd-opts, body.inspecting #dock .gvd-foot, body.inspecting #dock .gvd-echo { display: none !important; }
  body.inspecting #dock .gvd-card { padding: 7px 10px 8px; }
  body.inspecting #dock .gvd-ava { width: 28px; height: 28px; font-size: 12px; }
  body.inspecting #dock .gvd-text { font-size: 13.5px; line-height: 1.4; min-height: 0; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* notifiche: in basso fra il pad e il bordo destro (in alto c'è la pillola del tour), sopra la barra durante il tour;
     con il prodotto in mano a sinistra della scheda, sotto l'etichetta «scena simulata» */
  body.touch #toasts { bottom: calc(var(--dock-h, 0px) + 12px + var(--safe-b)); width: min(520px, calc(100vw - 300px)); }
  body.touch.tour-on #toasts { bottom: calc(78px + var(--safe-b)); }
  body.inspecting #toasts { left: calc((100vw - min(360px, 48vw) - 20px) / 2); top: calc(92px + var(--safe-t)); bottom: auto; width: min(420px, 50vw); }
  body.inspecting #vt .vt-note { opacity: 0; pointer-events: none; }
  .inspect-hint, .inspect-mag { left: calc((100vw - min(360px, 48vw) - 20px) / 2); }
  .inspect-hint { top: auto; bottom: calc(14px + var(--safe-b)); }
  .inspect-mag { top: calc(66px + var(--safe-t)); }
  body.inspecting:has(#dock .gvd.on:not(.min)) .inspect-hint { display: none; }
  /* prodotto in mano: la pillola del tour (esplorazione libera, in alto al centro) non va sopra la scheda; torna dopo */
  body.inspecting #vt .vt-free { opacity: 0; pointer-events: none; }
  /* dialogo senza scheda: pannello più basso e più stretto, la scena resta visibile sopra */
  #dock .gvd.in-dock { width: min(560px, calc(100vw - 24px)); }
  #dock .gvd-text { min-height: 0; }
}

/* ================= [UI] ARBITRO DEI LIVELLI (ui/arbiter.js) — una sola finestra, una voce alla volta, mai testi sovrapposti =================
 * Classi sul <body> messe dall'arbitro: arb-modal (finestra del visitatore aperta), arb-side (finestra a destra su schermo largo),
 * arb-full (finestra che copre tutto), arb-hold (tour in attesa), arb-chip (pillola di Marco visibile), arb-push (le finestre partono
 * sotto la pillola e gli avvisi: --arb-top), arb-takeover (comandi passati al visitatore durante il tour). */
.mwrap.arb-susp, .mwrap.arb-wait { visibility: hidden !important; pointer-events: none !important; }
.mwrap.arb-susp .modal, .mwrap.arb-wait .modal, .mwrap.arb-susp .scrim, .mwrap.arb-wait .scrim { transition: none !important; }
.gva.arb-susp, #vt .arb-susp, .arb-mute { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: none !important; }

/* finestra del visitatore aperta: pannelli, voci, schede del tour e comandi della scena si fanno da parte (tornano alla chiusura) */
body.arb-modal #dock, body.arb-modal #card, body.arb-modal .inspect-hint, body.arb-modal .inspect-mag, body.arb-modal .gva, body.arb-modal .gva-lab-layer,
body.arb-modal .gvb-layer, body.arb-modal #pad, body.arb-modal #tag, body.arb-modal #reticle, body.arb-modal #hud .hud-tr, body.arb-modal #hud .walking,
body.arb-modal #hud .hint, body.arb-modal #hud .credit, body.arb-modal #vt .vt-sub, body.arb-modal #vt .vt-bar, body.arb-modal #vt .side, body.arb-modal #vt .vt-free,
body.arb-modal #vt .vt-note, body.arb-modal #vt .vt-adm, body.arb-modal #vt .vt-bubs, body.arb-modal #vt .vt-advtag, body.arb-modal #vt .vt-focus, body.arb-modal #vt .vt-ph,
body.arb-full #hud {
  visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: none !important;
}
@media (max-width: 759px) { body.arb-modal #hud { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } }
/* tour in attesa: la battuta in sospeso non resta a mezz'aria (la ripete Marco alla ripresa) */
body.arb-hold #vt .vt-sub { visibility: hidden !important; opacity: 0 !important; transition: none !important; }

/* pillola di Marco: «Fai pure, ti aspetto» · «Riprendo il tour tra 3 s» · Riprendi ora · Resto qui */
#arb-hold { position: fixed; left: 50%; top: calc(14px + var(--safe-t)); z-index: 56; display: flex; align-items: center; gap: 10px; width: max-content;
  max-width: min(560px, calc(100vw - 460px)); padding: 6px 6px 6px 7px; border-radius: 99px; background: var(--panel-2); border: 1px solid rgba(201, 163, 94, .5);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35); color: var(--ink); font-size: .86rem; line-height: 1.3; opacity: 0; transform: translate(-50%, -8px); pointer-events: none;
  transition: opacity .25s, transform .25s; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#arb-hold.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#arb-hold .mono { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1px solid rgba(201, 163, 94, .7); color: var(--gold-2);
  font: 600 .84rem/1 var(--serif); letter-spacing: .04em; background: radial-gradient(circle at 30% 25%, rgba(201, 163, 94, .24), rgba(201, 163, 94, .04)); }
#arb-hold .tx { display: grid; min-width: 0; flex: 1 1 auto; }
#arb-hold .who { font: 600 11px/1.1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; white-space: nowrap; }
#arb-hold .t { min-width: 0; overflow-wrap: anywhere; }
#arb-hold .acts { display: flex; gap: 6px; flex: none; }
#arb-hold button { height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font-size: .8rem; white-space: nowrap; }
#arb-hold button:hover { border-color: rgba(243, 236, 224, .45); }
#arb-hold .b-now { background: linear-gradient(180deg, #d8b977, #c29a53); color: #1b140c; border-color: #d9bb7e; font-weight: 600; }
#arb-hold:not(.count) .b-stay { display: none; }
@media (max-width: 640px) {
  #arb-hold { top: calc(88px + var(--safe-t)); left: 12px; right: 12px; width: auto; max-width: none; transform: translateY(-8px); border-radius: 18px; flex-wrap: wrap; row-gap: 6px; }
  #arb-hold.on { transform: none; }
  #arb-hold .tx { flex: 1 1 190px; }
  #arb-hold .acts { margin-left: auto; }
}
@media (max-height: 520px) and (min-width: 641px) { #arb-hold { top: calc(10px + var(--safe-t)); max-width: calc(100vw - 420px); } }
/* con la pillola: la pillola del tour libero e la nota di Marco tacciono (una voce), finestre e pannelli del tour partono sotto */
body.arb-chip #vt .vt-free, body.arb-chip #vt .vt-note { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
body.arb-push #modals .mwrap { padding-top: var(--arb-top, 0px); }
body.arb-push #modals .mwrap .modal { max-height: calc(100vh - var(--arb-top, 0px) - 14px) !important; max-height: calc(100dvh - var(--arb-top, 0px) - 14px) !important; }
body.arb-chip #vt .vt-set, body.arb-chip #vt .vt-menu { top: var(--arb-top, 70px) !important; max-height: calc(100vh - var(--arb-top, 70px) - 14px); max-height: calc(100dvh - var(--arb-top, 70px) - 14px); overflow: auto; }
@media (max-width: 759px) { body.arb-chip.inspecting #toasts, body.arb-chip.tour-free #toasts { top: var(--arb-top); bottom: auto; } }

/* avvisi con una finestra aperta: sopra il velo, nella parte libera (a sinistra della finestra laterale, altrimenti in alto) */
body.arb-modal #toasts { z-index: 57; }
body.arb-side #toasts { top: auto; bottom: calc(24px + var(--safe-b)); left: calc((100vw - min(430px, 94vw) - 24px) / 2); width: min(520px, calc(100vw - 500px)); }
body.arb-modal:not(.arb-side) #toasts { top: var(--arb-chip-b, calc(12px + var(--safe-t))); bottom: auto; left: 50%; }
#arb-hold:not(.line):not(.count) .who { display: none; }
#arb-hold:not(.line):not(.count) .t { color: var(--ink-2); }
/* tour in attesa: anche le sue schede aspettano (tornano alla ripresa) */
body.arb-hold #vt .side, body.arb-hold #vt .vt-adm, body.arb-hold #vt .vt-ph, body.arb-hold #vt .vt-focus, body.arb-hold .mwrap.auto, body.arb-hold .gva.arb-tour {
  visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: none !important;
}
body.arb-chip #hud .gvs-chip, body.arb-modal #hud .gvs-chip { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
/* finestra aperta dalla scelta d'ingresso («Cosa può fare», «Chi è Marco»): la scheda d'ingresso aspetta dietro, invisibile */
body.arb-modal #vt .vt-entry .card { visibility: hidden !important; }
/* [UI] nome e zona della galleria sotto una finestra (telefono in orizzontale, finestre centrali alte): si fanno da parte */
body.arb-hudtl #hud .hud-tl { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
/* [UI 12/10] pannelli degli altri moduli (app.ui.panel: AUDIO, VOCE…): coperti da una finestra più importante = nascosti, poi tornano */
[data-arb-panel].arb-susp { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: none !important; }
/* con la pillola di Marco in alto il pannello scende sotto di lei (come le finestre: --arb-top) e si accorcia (collaudo ui_scenes: chip×xpanel) */
body.arb-push [data-arb-panel].arb-open { margin-top: var(--arb-top, 0px); max-height: calc(100vh - var(--arb-top, 0px) - 16px) !important; max-height: calc(100dvh - var(--arb-top, 0px) - 16px) !important; overflow: auto; }
/* telefono in orizzontale con una finestra aperta: l'HUD (nome, zona, «Scena simulata») si fa da parte come in verticale */
@media (max-height: 520px) { body.arb-modal #hud { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } }
/* [UI 12/10] dialogo con una persona aperto: la barra del tour si fa da parte (un pannello alla volta; il tour aspetta nella pillola) */
body:has(#dock .gvd.on:not(.min)) #vt .vt-bar { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
/* [UI 12/10] telefono in verticale con una finestra aperta: l'HUD è nascosto, la pillola di Marco sale in cima (più spazio alla finestra) */
@media (max-width: 640px) { body.arb-modal #arb-hold { top: calc(10px + var(--safe-t)); } }
/* [UI 12/10] «Chi è Marco» sotto la pillola o gli avvisi: la scheda si accorcia invece di uscire dallo schermo */
body.arb-push #modals .mwrap.chs-m .chs { height: min(660px, calc(100vh - var(--arb-top, 0px) - 14px)); height: min(660px, calc(100dvh - var(--arb-top, 0px) - 14px)); }
@media (max-width: 559px), (max-width: 759px) and (min-height: 521px) {
  body.arb-push #modals .mwrap.chs-m .modal, body.arb-push #modals .mwrap.chs-m .chs { height: calc(100vh - var(--arb-top, 0px)); height: calc(100dvh - var(--arb-top, 0px)); max-height: none !important; }
}
@media (max-height: 520px) and (min-width: 560px) { body.arb-push #modals .mwrap.chs-m .chs { height: calc(100vh - var(--arb-top, 0px)); height: calc(100dvh - var(--arb-top, 0px)); } }
/* [UI 12/10 11:46] ui_layout 390x844: «Chi è Marco» senza pillola misurava 1952 px (fuori schermo): mai più alta dello schermo, scorre dentro */
@media (max-width: 559px), (max-width: 759px) and (min-height: 521px) {
  #modals .mwrap.chs-m .modal { max-height: 100vh; max-height: 100dvh; }
  #modals .mwrap.chs-m .chs { max-height: calc(100vh - var(--arb-top, 0px)); max-height: calc(100dvh - var(--arb-top, 0px)); overflow: auto; }
}
/* [UI 12/10 11:46] ui_layout 390x844: cruscotto del titolare aperto al telefono = «Scena simulata» dell'HUD sotto il pannello (7 px):
 * si fa da parte (il cruscotto dichiara già «DEMO · dati simulati») */
@media (max-width: 640px) { body:has(.gva.on:not(.arb-susp)) #hud .hud-tl .sim, body:has(.gva.on:not(.arb-susp)) #hud .gvn-sim { visibility: hidden !important; } }
/* [UI 12/10] QV-011: al telefono in verticale la scheda «Si collega al tuo WooCommerce» copriva la testa di Marco (~30 s):
 * più compatta (descrizione solo del passo che Marco sta spiegando, niente etichetta né riga finale): ~200 px invece di ~330 */
@media (max-width: 640px) and (min-height: 521px) {
  body #vt .vt-woo { padding: 10px 14px; }
  body #vt .vt-woo .badge, body #vt .vt-woo .wplus { display: none; }
  body #vt .vt-woo h3 { font-size: 20px; margin: 2px 0 6px; }
  body #vt .wsteps li { padding: 3px 0; }
  body #vt .wsteps li:not(.on) .wt small { display: none; }
  body #vt .wsteps li:not(.on) .wt { align-self: center; }
}
/* [UI 12/10] scelta della voce nella scheda d'ingresso del tour e nelle impostazioni (VOCE: app.voice) */
#vt .vt-entry .vchoice { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0 0 14px; }
#vt .vt-entry .vchoice .segc { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--line-2, rgba(243,236,224,.18)); background: rgba(0,0,0,.18); }
#vt .vt-entry .vchoice .segc button { min-height: 40px; padding: 4px 8px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-2, rgba(243,236,224,.8)); font: 500 13.5px/1.2 Jost, system-ui, sans-serif; cursor: pointer; }
#vt .vt-entry .vchoice .segc button.on { background: rgba(201,163,94,.2); color: var(--ink, #f3ece0); box-shadow: inset 0 0 0 1px rgba(201,163,94,.65); }
#vt .vt-entry .vchoice .segc button:focus-visible { outline: 2px solid var(--gold-2, #e8ce97); outline-offset: 1px; }
#vt .vt-entry .vchoice small { font-size: 11.5px; color: var(--dim, rgba(243,236,224,.6)); letter-spacing: .02em; }
@media (max-height: 520px) { #vt .vt-entry .vchoice { margin: 0 0 8px; gap: 3px; } #vt .vt-entry .vchoice .segc button { min-height: 34px; } }
/* [UI] modalità scatto/collaudo (?shot=1): finestre, avvisi e pillola senza dissolvenze, così le misure vedono lo stato finale */
body.shot .mwrap .modal, body.shot .mwrap .scrim, body.shot .toast, body.shot #arb-hold, body.shot #vt .vt-set, body.shot #vt .vt-menu { transition: none !important; }
body.shot #vt .vt-bar, body.shot #vt .vt-free, body.shot #vt .vt-sub, body.shot #vt .vt-note, body.shot #vt .side, body.shot #card { transition: none !important; }

/* [WEB 31/10] cassa del visitatore: piede della finestra fisso, «Continua» / «Indietro» / «Conferma» sempre visibili anche nelle finestre
 * basse (1920×855: prima il pulsante del passo 1 restava sotto e bisognava scorrere). Il telefono resta com'era (aveva gia' il piede fisso).
 * La classe co-sticky la mette ui/checkout.js; ?cassapiede=0 = come prima. */
.mwrap.checkout.co-sticky .co-nav { position: sticky; bottom: -22px; z-index: 2; background: var(--panel-2); padding-bottom: 14px; box-shadow: 0 -14px 14px -14px rgba(0, 0, 0, .45); }
@media (max-width: 759px) { .mwrap.checkout.co-sticky .co-nav { bottom: -18px; padding-bottom: 10px; box-shadow: none; } }