/* StoreSuite Vetrina – pannello neutro, prende l'accento del tema se c'è. */
.ssv { --ssv-acc: var(--sl-accent, #2563eb); --ssv-bg: #111318; --ssv-soft: #1b1e26; --ssv-line: #2c313c; --ssv-ink: #f3f4f6; --ssv-muted: #9ca3af; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
.ssv-linguetta { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 99990; writing-mode: vertical-rl; rotate: 180deg; display: flex; align-items: center; gap: 10px; padding: 18px 10px; border: 0; border-radius: 0 10px 10px 0; background: var(--ssv-acc); color: #fff; font: 700 13px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,.3); }
.ssv-linguetta:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.ssv-conta { writing-mode: horizontal-tb; rotate: 180deg; display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 99px; background: #fff; color: #111; font-size: 12px; }
.ssv.aperto .ssv-linguetta { right: min(400px, 100vw); }
.ssv-pannello { position: fixed; top: 0; right: 0; bottom: 0; z-index: 99991; width: min(400px, 100vw); overflow-y: auto; background: var(--ssv-bg); color: var(--ssv-ink); box-shadow: -10px 0 40px rgba(0,0,0,.45); padding: 20px 20px 28px; display: flex; flex-direction: column; gap: 14px; }
.ssv-pannello[hidden] { display: none; }
.ssv-pannello header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ssv-pannello small { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--ssv-acc); font-weight: 700; }
.ssv-pannello h2, .ssv-pannello h3, .ssv-pannello p, .ssv-pannello strong { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: normal; text-transform: none; }
.ssv-pannello h2 { margin: 2px 0 0; font-size: 20px; line-height: 1.2; font-weight: 800; color: var(--ssv-ink); }
.ssv-pannello h3 { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ssv-muted); }
.ssv-chiudi { border: 0; background: transparent; color: var(--ssv-ink); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ssv-intro { margin: 0; color: var(--ssv-muted); font-size: 14px; }
.ssv-preset { display: flex; flex-wrap: wrap; gap: 6px; }
.ssv-preset button { border: 1px solid var(--ssv-line); background: var(--ssv-soft); color: var(--ssv-ink); border-radius: 99px; padding: 7px 12px; font: 600 13px/1 system-ui, sans-serif; cursor: pointer; }
.ssv-preset button:hover { border-color: var(--ssv-acc); }
.ssv-pannello ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ssv-pannello li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--ssv-line); border-radius: 12px; background: var(--ssv-soft); }
.ssv-pannello li.off { opacity: .72; }
.ssv-pannello li strong { color: var(--ssv-ink); font-size: 14.5px; }
.ssv-pannello li p { margin: 3px 0 0; font-size: 13px; color: var(--ssv-muted); }
.ssv-pannello li em { display: block; margin-top: 4px; font-size: 12px; color: var(--ssv-muted); font-style: normal; }
.ssv-pannello li em::before { content: "↳ "; }
.ssv-prezzo { float: right; margin-left: 8px; font-weight: 700; font-size: 13px; color: var(--ssv-ink); }
.ssv-switch { flex: none; position: relative; width: 44px; height: 26px; margin-top: 1px; border-radius: 99px; border: 0; background: #4b5160; cursor: pointer; transition: background .15s; }
.ssv-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ssv-switch[aria-checked="true"] { background: var(--ssv-acc); }
.ssv-switch[aria-checked="true"]::after { transform: translateX(18px); }
.ssv-switch:disabled { opacity: .4; cursor: not-allowed; }
.ssv-switch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ssv-pannello footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ssv-line); }
.ssv-pannello footer p { margin: 0 0 10px; font-size: 13px; color: var(--ssv-muted); }
.ssv-pannello footer strong { color: var(--ssv-ink); }
.ssv-cta { display: block; text-align: center; padding: 13px; border-radius: 10px; background: var(--ssv-acc); color: #fff !important; font-weight: 700; text-decoration: none; }
.ssv .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Segnaposto al posto di una funzione spenta. */
.ssv-vuoto { display: flex; gap: 16px; align-items: flex-start; padding: 22px; margin: 12px 0; border: 2px dashed color-mix(in srgb, currentColor 30%, transparent); border-radius: 14px; font: 15px/1.5 system-ui, sans-serif; }
.ssv-vuoto p { margin: 4px 0 12px; opacity: .8; }
.ssv-spina { font-size: 26px; line-height: 1; opacity: .6; }
.ssv-accendi { font: 700 14px/1 system-ui, sans-serif; padding: 11px 16px; border: 0; border-radius: 8px; background: var(--sl-accent, #2563eb); color: #fff; cursor: pointer; }
@media (max-width: 600px) { .ssv-linguetta { padding: 14px 8px; font-size: 11px; } }
@media print { .ssv { display: none; } }
.ssv-pannello .ssv-vedi { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--ssv-acc); text-decoration: none; filter: brightness(1.35); }
.ssv-pannello .ssv-vedi:hover { text-decoration: underline; }