/* Guitar Sauce 3D Viewer — token di tema (sovrascrivibili da config/site.json → theme) */
:root {
    --gs-gold: #d0a92c;
    --gs-gold-hi: #e5ba33;
    --gs-red: #bc1541;
    --gs-ink: #0b0b0c;
    --gs-surface: rgba(18, 18, 20, 0.86);
    --gs-surface-solid: #141416;
    --gs-line: rgba(255, 255, 255, 0.1);
    --gs-line-strong: rgba(255, 255, 255, 0.2);
    --gs-text: #f4f1ea;
    --gs-text-dim: rgba(244, 241, 234, 0.62);
    --gs-text-faint: rgba(244, 241, 234, 0.4);
    --gs-measure: #ffd24a;
    --font-head: 'Barlow', system-ui, sans-serif;
    --font-body: 'Roboto', system-ui, sans-serif;
    --radius: 10px;
    --panel-w: 360px;
    --blur: blur(14px) saturate(140%);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--gs-ink); color: var(--gs-text); font-family: var(--font-body); }
button, select, input { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

.gsv { position: fixed; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; background: var(--bg, #0b0b0c); }
.gsv[data-bg="black"] { --bg: #0b0b0c; }
.gsv[data-bg="graphite"] { --bg: #2a2b2e; }
.gsv[data-bg="studio"] { --bg: #8d8f93; }
.gsv[data-bg="white"] { --bg: #f2f1ee; }

#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.gsv.measuring #canvas { cursor: crosshair; }
.grid-overlay, .overlay, .hotspots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ------------------------------------------------------------- top bar */
.topbar {
    position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 16px;
    padding: 14px 18px; background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0)); pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand img { height: 30px; display: block; }
.heading { min-width: 0; flex: 1; border-left: 1px solid var(--gs-line-strong); padding-left: 16px; }
.heading h1 {
    margin: 0; font: 600 18px/1.15 var(--font-head); letter-spacing: 0.02em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.heading p { margin: 3px 0 0; font-size: 12px; color: var(--gs-text-dim); letter-spacing: 0.04em; }
.heading p .badge { color: var(--gs-gold); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.top-actions { display: flex; gap: 8px; align-items: center; }

.icon-btn {
    width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid var(--gs-line); background: var(--gs-surface); backdrop-filter: var(--blur); cursor: pointer;
    transition: border-color .15s, color .15s;
}
.icon-btn:hover { border-color: var(--gs-gold); color: var(--gs-gold-hi); }
.select {
    height: 38px; border-radius: 19px; padding: 0 14px; border: 1px solid var(--gs-line); background: var(--gs-surface-solid);
    cursor: pointer;
}

/* segmented controls */
.seg {
    display: flex; padding: 3px; gap: 2px; border-radius: 999px; border: 1px solid var(--gs-line);
    background: var(--gs-surface); backdrop-filter: var(--blur);
}
.seg button {
    border: 0; background: transparent; padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    font: 500 13px/1 var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gs-text-dim);
    display: flex; align-items: center; gap: 6px; transition: background .15s, color .15s;
}
.seg button svg { width: 17px; height: 17px; }
.seg button:hover { color: var(--gs-text); }
.seg button.active { background: var(--gs-gold); color: #111; }
.seg.lang button { padding: 7px 10px; }

/* ------------------------------------------------------------- toolbar */
.toolbar {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px;
    padding: 6px; border-radius: 16px; border: 1px solid var(--gs-line); background: var(--gs-surface); backdrop-filter: var(--blur);
}
.tool {
    width: 64px; padding: 9px 4px 7px; border: 0; border-radius: 11px; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--gs-text-dim);
    transition: background .15s, color .15s;
}
.tool span { font: 500 10px/1.1 var(--font-head); letter-spacing: 0.05em; text-transform: uppercase; text-align: center; }
.tool:hover { color: var(--gs-text); background: rgba(255,255,255,0.05); }
.tool.active { color: #111; background: var(--gs-gold); }
.tool.toggle.active { color: var(--gs-gold-hi); background: rgba(208,169,44,0.12); }
.tool-sep { height: 1px; margin: 4px 10px; background: var(--gs-line); }

/* ------------------------------------------------------------- view bar */
.viewbar {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center;
    max-width: calc(100% - 32px);
}
.viewbar .views { overflow-x: auto; scrollbar-width: none; }
.viewbar .views::-webkit-scrollbar { display: none; }
#btn-lock.active { background: var(--gs-red); color: #fff; }

/* ------------------------------------------------------------- panel */
.panel {
    position: absolute; top: 72px; right: 16px; bottom: 76px; width: var(--panel-w); display: flex; flex-direction: column;
    border-radius: 16px; border: 1px solid var(--gs-line); background: var(--gs-surface); backdrop-filter: var(--blur);
    box-shadow: 0 20px 60px rgba(0,0,0,0.45); overflow: hidden; user-select: text; -webkit-user-select: text;
    animation: panel-in .18s ease-out;
}
@keyframes panel-in { from { opacity: 0; transform: translateX(12px); } }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px 18px; border-bottom: 1px solid var(--gs-line); }
.panel-head h2 { margin: 0; font: 600 15px/1 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gs-gold-hi); }
.panel-head .icon-btn { width: 32px; height: 32px; }
.panel-body { flex: 1; overflow-y: auto; padding: 14px 18px 20px; font-size: 14px; line-height: 1.45; }
.panel-body h3 {
    margin: 18px 0 8px; font: 600 12px/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gs-text-faint);
}
.panel-body h3:first-child { margin-top: 2px; }
.panel-body p { margin: 0 0 10px; color: var(--gs-text-dim); }
.panel-body .muted { color: var(--gs-text-faint); font-size: 12.5px; }

.row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.row > label { flex: 1; color: var(--gs-text-dim); font-size: 13px; }
.row output { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.row input[type="number"], .row input[type="text"], .field input, .field textarea {
    width: 86px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--gs-line-strong); background: rgba(0,0,0,0.35);
}
.field { margin: 8px 0; }
.field label { display: block; font-size: 12px; color: var(--gs-text-faint); margin-bottom: 4px; }
.field input, .field textarea { width: 100%; }
.field textarea { height: 64px; padding: 6px 8px; resize: vertical; }
input[type="range"] { flex: 1.4; accent-color: var(--gs-gold); }
input[type="checkbox"] { accent-color: var(--gs-gold); width: 16px; height: 16px; }
.check { display: flex; gap: 10px; align-items: center; margin: 8px 0; color: var(--gs-text-dim); font-size: 13px; cursor: pointer; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 9px;
    white-space: nowrap; text-decoration: none;
    border: 1px solid var(--gs-line-strong); background: rgba(255,255,255,0.04); cursor: pointer;
    font: 500 13px/1 var(--font-head); letter-spacing: 0.05em; text-transform: uppercase; transition: border-color .15s, background .15s;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { border-color: var(--gs-gold); }
.btn.primary { background: var(--gs-gold); border-color: var(--gs-gold); color: #111; }
.btn.primary:hover { background: var(--gs-gold-hi); }
.btn.cta-red { background: var(--gs-red); border-color: var(--gs-red); color: #fff; }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.btn-row .btn { flex: 1; }
.seg.block { width: 100%; }
.seg.block button { flex: 1; justify-content: center; }

/* measure list */
.m-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.m-list li {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--gs-line); border-radius: 9px;
    font-variant-numeric: tabular-nums;
}
.m-list li .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gs-measure); color: #111; font: 600 12px var(--font-head); }
.m-list li .v { flex: 1; }
.m-list li .v small { display: block; color: var(--gs-text-faint); font-size: 11.5px; }
.m-list li button { border: 0; background: none; cursor: pointer; color: var(--gs-text-faint); padding: 4px; }
.m-list li button:hover { color: var(--gs-red); }
.calib { padding: 8px 10px; border-radius: 8px; font-size: 12.5px; margin: 6px 0 10px; }
.calib.ok { background: rgba(208,169,44,0.12); color: var(--gs-gold-hi); }
.calib.warn { background: rgba(188,21,65,0.16); color: #ff9db6; }

/* spec sheet */
.spec { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spec th { text-align: left; font-weight: 400; color: var(--gs-text-faint); padding: 7px 10px 7px 0; vertical-align: top; width: 44%; }
.spec td { padding: 7px 0; border-bottom: 1px solid var(--gs-line); }
.spec tr:last-child td { border-bottom: 0; }
.info-tabs { margin-bottom: 14px; }
.spec.luthier th { width: 58%; }
.spec td .src { display: block; font-size: 11px; color: var(--gs-text-faint); margin-top: 2px; }
.lut-note { font-size: 12px; line-height: 1.5; margin-top: 12px; }
.spec-empty { color: var(--gs-text-faint); font-size: 13px; padding: 10px; border: 1px dashed var(--gs-line-strong); border-radius: 9px; }

/* media */
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photos button { padding: 0; border: 1px solid var(--gs-line); border-radius: 9px; overflow: hidden; cursor: pointer; background: #000; aspect-ratio: 4 / 5; position: relative; }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos span { position: absolute; left: 8px; bottom: 6px; font: 600 10px var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 1px 4px #000; }
.video { margin: 8px 0 14px; }
.video video, .video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 9px; background: #000; display: block; }
.video video { aspect-ratio: auto; max-height: 62vh; object-fit: contain; }   /* rotazioni quadrate, promo 16:9 o verticali */
.video p { margin: 6px 0 0; font-size: 13px; color: var(--gs-text); }
.video .kind { display: inline-block; margin-right: 6px; font: 600 10px var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: #111; background: var(--gs-gold); padding: 3px 6px; border-radius: 3px; vertical-align: 1px; }
.info-card { margin: 8px 0 14px; border: 1px solid var(--gs-line); border-radius: 10px; overflow: hidden; }
.info-card img { width: 100%; display: block; }
.info-card div { padding: 10px 12px; }
.info-card h4 { margin: 0 0 4px; font: 600 14px var(--font-head); letter-spacing: 0.03em; }
.info-card p { margin: 0; font-size: 13px; }

/* ------------------------------------------------------------- overlays */
.measure-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m-line { fill: none; stroke: var(--gs-measure); stroke-width: 2; }
.m-line-shadow { fill: none; stroke: rgba(0,0,0,0.55); stroke-width: 4.5; }
.m-dot { fill: var(--gs-measure); stroke: #111; stroke-width: 1.5; }
.m-pending .m-line { stroke-dasharray: 5 4; }
.measure-labels { position: absolute; inset: 0; }
.m-label {
    position: absolute; left: 0; top: 0; margin: -38px 0 0 0; translate: -50% 0; padding: 5px 9px; border-radius: 7px;
    background: rgba(10,10,10,0.88); border: 1px solid rgba(255,210,74,0.5); white-space: nowrap; text-align: center;
    font-variant-numeric: tabular-nums;
}
.m-label b { font: 600 14px var(--font-head); color: var(--gs-measure); letter-spacing: 0.02em; }
.m-label small { display: block; font-size: 10.5px; color: var(--gs-text-dim); }

.hotspot {
    position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; pointer-events: auto;
    border: 2px solid #fff; background: var(--gs-red); color: #fff; cursor: pointer; display: grid; place-items: center;
    font: 600 12px var(--font-head); box-shadow: 0 0 0 4px rgba(188,21,65,0.3), 0 4px 14px rgba(0,0,0,0.5);
    transition: opacity .2s, transform .15s;
}
.hotspot:hover { transform: scale(1.12); }
.hotspot.away { opacity: 0.25; }
.hotspot-tip {
    position: absolute; left: 22px; top: 50%; translate: 0 -50%; white-space: nowrap; padding: 4px 8px; border-radius: 6px;
    background: rgba(10,10,10,0.88); font: 500 12px var(--font-body); opacity: 0; pointer-events: none; transition: opacity .15s;
}
.hotspot:hover .hotspot-tip { opacity: 1; }

.scalebar { position: absolute; right: 20px; bottom: 76px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.scalebar span { font: 500 12px var(--font-body); color: var(--gs-text); text-shadow: 0 1px 3px #000; font-variant-numeric: tabular-nums; }
.scalebar i { display: block; height: 7px; border: 2px solid var(--gs-text); border-top: 0; filter: drop-shadow(0 1px 2px #000); }
.panel:not([hidden]) ~ .scalebar { right: calc(var(--panel-w) + 32px); }

.hint, .toast {
    position: absolute; left: 50%; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px;
    background: rgba(10,10,10,0.88); border: 1px solid var(--gs-line-strong); font-size: 13px; pointer-events: none; white-space: nowrap;
}
.hint { top: 78px; color: var(--gs-measure); }
.toast { bottom: 80px; animation: panel-in .2s; }
.calib-badge {
    position: absolute; right: 20px; bottom: 112px; font-size: 11px; color: var(--gs-text-faint); pointer-events: none; text-align: right;
}
.panel:not([hidden]) ~ .calib-badge { right: calc(var(--panel-w) + 32px); }

/* ------------------------------------------------------------- poster & loading */
.poster { position: absolute; inset: 0; display: grid; place-items: center; background: #050505; z-index: 5; transition: opacity .5s; }
.poster.fade { opacity: 0; pointer-events: none; }
.poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.55; filter: blur(0.5px); }
.poster::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.2), rgba(0,0,0,0.85)); }
.poster-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 24px; }
.poster-logo { height: 34px; }
.poster h2 { margin: 0; font: 600 clamp(18px, 3vw, 28px)/1.2 var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; max-width: 680px; }
.cta {
    display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--gs-gold); color: #111; font: 600 15px var(--font-head); letter-spacing: 0.1em; text-transform: uppercase;
    box-shadow: 0 8px 30px rgba(208,169,44,0.35); transition: transform .15s, background .15s;
}
.cta:hover { background: var(--gs-gold-hi); transform: translateY(-1px); }
.progress { width: min(320px, 70vw); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.progress-bar { width: 100%; height: 3px; background: rgba(255,255,255,0.15); border-radius: 2px; overflow: hidden; }
.progress-bar i { display: block; height: 100%; width: 0; background: var(--gs-gold); transition: width .2s; }
.progress span { font-size: 12px; color: var(--gs-text-dim); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }

.fallback { position: absolute; inset: 0; z-index: 6; background: #000; }
.fallback iframe { width: 100%; height: 100%; border: 0; }
.fallback p { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 12px; color: var(--gs-text-dim); }

/* lightbox */
.lightbox { position: absolute; inset: 0; z-index: 8; background: rgba(0,0,0,0.92); display: grid; place-items: center; padding: 40px; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox .icon-btn { position: absolute; top: 16px; right: 16px; }

.vignette { position: absolute; inset: 0; pointer-events: none; }

/* durante l'orbita resta visibile solo il logo: uscita morbida (con un attimo di ritardo, così i gesti brevi
   non fanno lampeggiare l'interfaccia) e rientro ancora più lento */
.toolbar, .viewbar, .panel, .top-actions, .heading, .scalebar, .calib-badge, .hint, .topbar::before {
    transition: opacity .5s cubic-bezier(.25, .8, .25, 1);
}
.gsv.orbiting .toolbar, .gsv.orbiting .viewbar, .gsv.orbiting .panel, .gsv.orbiting .top-actions,
.gsv.orbiting .heading, .gsv.orbiting .scalebar, .gsv.orbiting .calib-badge, .gsv.orbiting .hint,
.gsv.orbiting .topbar::before {
    opacity: 0; pointer-events: none; transition: opacity .45s ease .08s;
}
/* la sfumatura scura dietro la barra in alto sta in uno pseudo-elemento, così può dissolversi anch'essa */
.topbar { background: none; isolation: isolate; }
.topbar::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0)); }

/* maniglia del pannello (solo telefono) */
.sheet-handle { display: none; place-items: center; height: 22px; cursor: ns-resize; touch-action: none; flex: none; }
.sheet-handle i { width: 44px; height: 5px; border-radius: 3px; background: var(--gs-line-strong); }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }

/* modalità focus: trascinando uno slider resta visibile solo quello, il resto dell'interfaccia si nasconde */
.gsv.adjusting .panel { visibility: hidden; background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.gsv.adjusting .panel .active-row {
    visibility: visible; position: relative; z-index: 2; padding: 8px 12px; margin-inline: -12px; border-radius: 12px;
    background: rgba(10,10,12,0.86); border: 1px solid var(--gs-line-strong); box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.gsv.adjusting .panel .active-row label { color: var(--gs-text); }
.gsv.adjusting .toolbar, .gsv.adjusting .topbar, .gsv.adjusting .scalebar { opacity: 0.12; transition: opacity .35s ease; }
.gsv.adjusting .viewbar, .gsv.adjusting .hint { visibility: hidden; }
.section-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.views-toggle { display: none; }

.light-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.light-tile {
    display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 2px 7px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--gs-line); background: transparent; font: 500 10.5px/1.15 var(--font-head); letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--gs-text-dim); text-align: center;
}
.light-tile i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gs-line-strong); }
.light-tile:hover { color: var(--gs-text); border-color: var(--gs-line-strong); }
.light-tile.active { border-color: var(--gs-gold); color: var(--gs-gold-hi); background: rgba(208,169,44,0.08); }
.light-tile.baked i { border-color: var(--gs-gold); box-shadow: 0 0 0 2px rgba(208,169,44,0.25); }

.section-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.section-readout div { padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(255,210,74,0.35); background: rgba(255,210,74,0.06); }
.section-readout span { display: block; font-size: 11px; color: var(--gs-text-faint); }
.section-readout b { font: 600 17px var(--font-head); color: var(--gs-measure); font-variant-numeric: tabular-nums; }

.capture-preview { grid-template-rows: minmax(0, 1fr) auto; gap: 14px; cursor: default; }
.capture-preview img { box-shadow: 0 10px 40px rgba(0,0,0,0.6); border: 1px solid var(--gs-line); }
.capture-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.capture-actions .muted { font-size: 12px; color: var(--gs-text-dim); }
#guitar-select { max-width: 320px; text-overflow: ellipsis; }

/* margini di sicurezza (notch, barre di sistema) */
.topbar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.viewbar { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.toolbar { left: max(16px, env(safe-area-inset-left, 0px)); }

/* versione base (e-commerce): niente strumenti avanzati, pulsante verso scheda prodotto e acquisto */
/* della barra strumenti resta solo Media (render, video della rotazione, video promozionale) */
.gsv.mode-base .toolbar .tool:not([data-panel="media"]), .gsv.mode-base .toolbar .tool-sep,
.gsv.mode-base #btn-editor, .gsv.mode-base .calib-badge { display: none !important; }
.pill-back {
    height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 10px; border-radius: 19px; text-decoration: none;
    border: 1px solid var(--gs-line); background: var(--gs-surface); backdrop-filter: var(--blur);
    font: 500 13px var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--gs-text);
}
.pill-back:hover { border-color: var(--gs-gold); color: var(--gs-gold-hi); }
.cta-shop {
    position: absolute; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; text-decoration: none;
    background: var(--gs-gold); color: #111; font: 600 14px var(--font-head); letter-spacing: .1em; text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(208,169,44,0.3); transition: background .15s, transform .15s, opacity .5s;
}
.cta-shop:hover { background: var(--gs-gold-hi); transform: translateY(-1px); }
.gsv.orbiting .cta-shop { opacity: 0; pointer-events: none; transition: opacity .45s ease .08s; }
/* con il pannello Media aperto il pulsante lascia spazio (si chiude il pannello e ricompare) */
.gsv.panel-open .cta-shop { opacity: 0; pointer-events: none; }
@media (min-width: 761px) and (max-width: 1240px) { .cta-shop { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 761px) { .gsv.mode-base .scalebar { bottom: 140px; } }

/* minimal UI (embed piccoli): solo viste e caricamento */
.gsv.ui-minimal .toolbar, .gsv.ui-minimal .panel, .gsv.ui-minimal .heading, .gsv.ui-minimal #variant { display: none !important; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 760px) {
    :root { --panel-w: 100%; }
    .topbar { padding: 10px 12px; gap: 10px; }
    .brand img { height: 22px; }
    .heading { padding-left: 10px; }
    .heading h1 { font-size: 14px; }
    .heading p { font-size: 11px; }
    .top-actions .lang, #btn-share { display: none; }
    .gsv.has-picker .heading { display: none; }
    .gsv.has-picker .top-actions { flex: 1; justify-content: flex-end; min-width: 0; }
    #guitar-select { max-width: none; flex: 1; min-width: 0; font-size: 13px; }
    .topbar { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
    .lightbox { padding: 16px; }
    .toolbar {
        top: auto; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
        flex-direction: row; padding: 4px; max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none;
    }
    .tool { width: 56px; padding: 7px 2px 5px; }
    .tool-sep { width: 1px; height: auto; margin: 8px 2px; }
    .viewbar { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); gap: 6px; }

    /* schermo diviso: con un menu aperto il 3D occupa la parte alta, il menu è un pannello in basso che non lo copre */
    .gsv { --sheet-h: 46%; }
    .gsv.panel-open #canvas, .gsv.panel-open .grid-overlay, .gsv.panel-open .overlay,
    .gsv.panel-open .hotspots, .gsv.panel-open .vignette { height: calc(100% - var(--sheet-h)); bottom: auto; }
    /* in modalità focus il 3D torna a schermo intero, con lo slider sospeso in basso */
    .gsv.panel-open.adjusting #canvas, .gsv.panel-open.adjusting .grid-overlay, .gsv.panel-open.adjusting .overlay,
    .gsv.panel-open.adjusting .hotspots, .gsv.panel-open.adjusting .vignette { height: 100%; }
    .gsv.panel-open .toolbar { display: none; }
    .gsv.orbiting.panel-open .panel { opacity: 1; pointer-events: auto; } /* a schermo diviso il menu non copre il 3D */
    .gsv.panel-open .viewbar { bottom: calc(var(--sheet-h) + 8px); }
    .gsv.panel-open .hint { top: auto; bottom: calc(var(--sheet-h) + 58px); }
    .panel {
        top: auto; left: 0; right: 0; bottom: 0; width: auto; height: var(--sheet-h); max-height: none;
        border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: sheet-in .2s ease-out;
    }
    .sheet-handle { display: grid; }
    .panel-head { padding-top: 2px; }
    .seg button { padding: 7px 9px; font-size: 12px; }
    /* viste: pulsante + griglia a comparsa (niente scorrimento orizzontale, problematico su iOS) */
    .views-toggle { display: flex; }
    .views-toggle button { color: var(--gs-text); }
    .viewbar .views {
        position: absolute; left: 0; bottom: calc(100% + 8px); display: none; grid-template-columns: repeat(2, 1fr);
        gap: 4px; padding: 6px; border-radius: 14px; width: max-content; min-width: 220px; overflow: visible;
    }
    .viewbar.views-open .views { display: grid; }
    .viewbar .views button { justify-content: center; padding: 11px 10px; font-size: 13px; }
    .viewbar .views button[data-view="free"] { grid-column: 1 / -1; }
    .light-tiles { grid-template-columns: repeat(4, 1fr); }
    .scalebar { bottom: 140px; right: 12px; }
    .cta-shop { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(66px + env(safe-area-inset-bottom, 0px)); height: 46px; white-space: nowrap; }
    .cta-shop:hover { transform: translateX(-50%); }
    .gsv.mode-base .scalebar { bottom: 124px; }
    .pill-back span { display: none; }
    .pill-back { padding: 0 10px; }
    .panel:not([hidden]) ~ .scalebar { display: none; }
    .calib-badge { display: none; }
    .hint { top: 64px; white-space: normal; text-align: center; width: max-content; max-width: 90vw; }
}