/* © 2024–2026 Andrea Taliento (ANDRYXify) — Tutti i diritti riservati — socialbot.live */
/* Proprieta intellettuale · ANDRYX-IP::a7f39c1e8b424d90-4f7b-taliento::socialbot.live */

body.vetrina {
  --vio: var(--g-bot);
  --v-alone-caldo: radial-gradient(46% 48% at 22% 18%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 68%);
  --v-alone-freddo: radial-gradient(42% 44% at 82% 30%, color-mix(in srgb, var(--g-vetrina) 20%, transparent), transparent 70%);

  background: var(--bg);
  color: var(--testo);
}

body.vetrina #anime-sfondo { background: var(--bg); }
body.vetrina #anime-sfondo::after,
body.vetrina #an-campo { opacity: .5; }
body.vetrina .barra-top {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom-color: transparent;
}
body.vetrina .contenuto { max-width: 1180px; padding-inline: clamp(1.1rem, 4vw, 2.6rem); }
body.vetrina .pagina-testata { display: none; }
body.vetrina #cerca-lancia, body.vetrina #plancia-lancia { display: none !important; }

body.vetrina { font-family: var(--testo-font); }
body.vetrina .vt-btn, body.vetrina .vt-mappa a { font-family: var(--mano); }
body.vetrina h1, body.vetrina h2, body.vetrina h3, body.vetrina .vt-num,
body.vetrina .vt-titolo, body.vetrina .vt-tit {
  font-family: var(--mano);
  font-stretch: normal;
  letter-spacing: -.01em;
}
body.vetrina h1 em, body.vetrina h2 em, body.vetrina h3 em,
body.vetrina .vt-titolo em, body.vetrina .vt-tit em {
  font-family: var(--mano); font-style: normal; font-weight: 800;
}
body.vetrina em, body.vetrina .vt-corsivo {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic; font-weight: 400; font-stretch: normal;
  letter-spacing: -.01em;
}

.vt-scena {
  position: relative; isolation: isolate;
  min-height: min(94svh, 900px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.4rem, 7vh, 5rem) 0 clamp(2rem, 5vh, 3.4rem);
}
.vt-scena::before {
  content: ""; position: absolute; inset: -34% -50vw -12%;
  background-image: var(--cinetiche);
  opacity: var(--cinetiche-forza); z-index: -2; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, transparent 40%, #000 78%, transparent 96%);
  mask-image: radial-gradient(closest-side, transparent 40%, #000 78%, transparent 96%);
}
.vt-scena::after {
  content: ""; position: absolute; inset: -18% -50vw; z-index: -1; pointer-events: none;
  background-image: var(--retino); background-size: var(--retino-passo);
  opacity: calc(var(--retino-forza) * .55);
  -webkit-mask-image: radial-gradient(70% 58% at 50% 34%, #000 12%, transparent 76%);
  mask-image: radial-gradient(70% 58% at 50% 34%, #000 12%, transparent 76%);
}

.vt-barra {
  width: 100%; align-self: stretch;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(.6rem, 2vw, 1.4rem);
  margin-bottom: clamp(1.4rem, 4vh, 2.6rem); flex-wrap: wrap;
}
.vt-marchio { display: inline-flex; align-items: center; text-decoration: none; }
.vt-marchio img { display: block; height: 30px; width: auto; }
.vt-mappa { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.3rem); flex-wrap: wrap; justify-content: center; }
.vt-mappa a {
  font-family: Archivo, system-ui, sans-serif; font-size: .88rem; font-weight: 600;
  color: var(--testo-2); text-decoration: none; padding: .3rem .1rem;
  border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease;
}
@media (hover: hover) {
.vt-mappa a:hover { color: var(--testo); border-bottom-color: var(--acc); }
}
.vt-strumenti { display: flex; align-items: center; justify-content: center; gap: 10px; }
@media (max-width: 720px) {
  .vt-barra { justify-content: center; gap: .7rem .9rem; }
  .vt-mappa { order: 3; width: 100%; }
}

.vt-occhiello {
  display: inline-flex; align-items: center; gap: .5rem; align-self: center;
  font-family: var(--mano);
  font-size: .68rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--testo-2);
  padding: .42rem .95rem .42rem .8rem; border-radius: var(--ang-mano-l);
  border: var(--contorno-sp) solid var(--contorno); border-width: var(--tratto-mano);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: var(--alone-contorno), var(--ombra-ink);
}
.vt-occhiello .vivo { color: var(--acc); }

.vt-titolo {
  margin: clamp(1.1rem, 3vh, 1.9rem) 0 0;
  text-align: center; text-wrap: balance;
  font-family: var(--mano);
  font-size: clamp(2.15rem, 6.3vw, 4.7rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -.012em;
}
.vt-titolo em {
  letter-spacing: -.02em;
  background: var(--rampa); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--acc);
  background-size: 220% 100%; background-position: 100% 0;
  animation: vt-colora .8s .3s var(--su-due) both;
}
@keyframes vt-colora {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vt-titolo em { animation: none; background-position: 0 0; }
}
@supports not (background-clip: text) { .vt-titolo em { -webkit-text-fill-color: currentColor; color: var(--acc); } }

.vt-sub {
  margin: clamp(1rem, 2.4vh, 1.5rem) auto 0; max-width: 62ch; text-align: center;
  font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.6; color: var(--testo-2);
}
.vt-sub strong { color: var(--testo); font-weight: 600; }

.vt-azioni {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: clamp(1.5rem, 3.4vh, 2.2rem) 0 0;
}
.vt-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: 0 1.6rem; border-radius: var(--ang-mano-l);
  font-family: Archivo, system-ui, sans-serif;
  font-size: 1rem; font-weight: 600; letter-spacing: -.005em; text-decoration: none;
  border: var(--contorno-sp) solid var(--contorno); border-width: var(--tratto-mano);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--testo);
  transition: transform .18s var(--molla-lieve), border-color .24s ease, background .24s ease, color .24s ease;
}
.vt-btn { box-shadow: var(--ombra-ink); }
@media (hover: hover) {
.vt-btn:hover { border-color: var(--contorno); background: var(--surface); color: var(--testo); transform: translate(-1px, -2px); box-shadow: var(--ombra-ink-alta); }
}
.vt-btn:active { transform: translate(2px, 3px); box-shadow: var(--ombra-ink-timbro); }
.vt-btn-primo {
  border: var(--contorno-sp) solid var(--contorno); border-width: var(--tratto-mano); color: var(--su-acc); font-weight: 700;
  font-family: var(--mano);
  background: var(--acc);
  box-shadow: var(--alone-contorno), var(--ombra-ink);
}
@media (hover: hover) {
.vt-btn-primo:hover {
  color: var(--su-acc); background: var(--acc);
  box-shadow: var(--alone-contorno), var(--ombra-ink-alta);
}
}
.vt-btn-primo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; border-radius: inherit; overflow: hidden;
  background-image: var(--tono-carta);
  background-size: var(--tono-passo);
  transition: opacity .2s ease;
}
@media (hover: hover) {
.vt-btn-primo:hover::after { opacity: .7; }
}

.vt-sotto {
  margin: 1rem 0 0; text-align: center; font-size: .86rem; color: var(--testo-3);
}
.vt-sotto a { color: var(--testo-2); text-underline-offset: 3px; }
@media (hover: hover) {
.vt-sotto a:hover { color: var(--acc); }
}
.vt-sotto b { color: var(--testo-2); font-weight: 600; }

.vt-vetro {
  position: relative; margin: clamp(2rem, 5vh, 3.4rem) auto 0; width: min(100%, 940px);
  border-radius: 18px; padding: 10px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--acc) 26%, transparent), transparent 44%, color-mix(in srgb, var(--vio) 24%, transparent));
  box-shadow: var(--om-l);
}
.vt-schermo {
  --surface: #141112; --surface-2: #1b1718; --surface-3: #241e21;
  --border: #292225; --border-2: #3a3135;
  --testo: #f1edef; --testo-2: #a39d9f; --testo-3: #6b6668;

  position: relative; overflow: hidden; border-radius: 12px;
  aspect-ratio: 16 / 9; min-height: 220px;
  background:
    radial-gradient(70% 90% at 28% 12%, #3a1030, transparent 62%),
    radial-gradient(60% 80% at 84% 82%, #281a20, transparent 66%),
    linear-gradient(168deg, #190e13, #0a0909);
  border: 1px solid var(--border);
}
.vt-gioco {
  position: absolute; inset: -14%;
  background:
    conic-gradient(from 210deg at 42% 44%, rgba(247, 47, 167, .46), rgba(255, 122, 90, .34), rgba(110, 231, 255, .28), rgba(247, 47, 167, .46));
  filter: blur(38px); opacity: .95;
}
.vt-schermo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    radial-gradient(120% 92% at 50% 42%, transparent 42%, rgba(7, 5, 6, .82) 100%);
}
.vt-scena-eti {
  position: absolute; z-index: 2; inset: 0; display: grid; place-items: center;
  font-family: Archivo, system-ui, sans-serif; font-size: clamp(.7rem, 1.5vw, .95rem);
  font-weight: 700; letter-spacing: .46em; text-transform: uppercase;
  color: rgba(239, 238, 239, .13); padding-bottom: 8%;
}
.vt-etichetta {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .4rem;
  font-family: Archivo, system-ui, sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: .34rem .7rem; border-radius: 999px;
  background: rgba(10, 9, 9, .72); border: 1px solid var(--border-2); color: var(--testo);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.vt-live { top: 14px; left: 14px; color: #ff6a52; border-color: rgba(255, 106, 82, .4); }
.vt-spett { top: 14px; right: 14px; color: var(--testo-2); font-variant-numeric: tabular-nums; }

@property --vt-n { syntax: '<integer>'; inherits: false; initial-value: 1284; }
.vt-spett i { font-style: normal; counter-reset: vtn var(--vt-n); }
.vt-spett i::after { content: counter(vtn); }

.vt-alert {
  position: absolute; z-index: 4; top: 52px; left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: .6rem;
  padding: .62rem 1rem .62rem .8rem; border-radius: 12px; white-space: nowrap;
  background: linear-gradient(150deg, rgba(37, 25, 31, .96), rgba(20, 16, 17, .96));
  border: 1px solid var(--acc-bordo); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .9);
  font-size: .86rem; color: var(--testo); opacity: 0;
}
.vt-alert b { color: var(--acc); font-weight: 700; }
.vt-alert .vt-stella { width: 16px; height: 16px; color: var(--ambra); flex: 0 0 auto; }

.vt-chat {
  position: absolute; z-index: 3; left: 14px; bottom: 14px; right: 34%;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
  min-height: 108px;
}
.vt-chat li {
  align-self: flex-start; max-width: 100%;
  padding: .3rem .62rem; border-radius: 9px; font-size: .8rem; line-height: 1.35;
  background: rgba(10, 9, 9, .68); border: 1px solid var(--border);
  color: var(--testo-2); opacity: 0;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vt-chat b { font-weight: 700; }
.vt-chat .n1 { color: #ff7ab6; } .vt-chat .n2 { color: #7ad3ff; }
.vt-chat .n3 { color: #8de08a; } .vt-chat .n4 { color: var(--vio); }
.vt-chat li.bot { border-color: var(--acc-bordo); background: rgba(34, 17, 25, .8); color: var(--testo); }
.vt-chat li.bot b { color: var(--acc); }

.vt-cam {
  position: absolute; z-index: 3; right: 14px; bottom: 14px; width: 27%; aspect-ratio: 4 / 3;
  border-radius: 10px; border: 1px solid var(--border-2);
  background: radial-gradient(70% 70% at 50% 34%, #35212a, #140d10);
  display: grid; place-items: center; font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--testo-3);
}
.vt-didascalia { margin: .95rem 0 0; text-align: center; font-size: .82rem; color: var(--testo-3); }

@media not (prefers-reduced-motion: reduce) {
  .vt-chat li { animation: vt-msg 13s cubic-bezier(.2, .8, .3, 1) infinite; }
  .vt-chat li:nth-child(1) { animation-delay: .4s; }
  .vt-chat li:nth-child(2) { animation-delay: 2.1s; }
  .vt-chat li:nth-child(3) { animation-delay: 3.6s; }
  .vt-chat li:nth-child(4) { animation-delay: 5.4s; }
  .vt-chat li:nth-child(5) { animation-delay: 7.2s; }
  @keyframes vt-msg {
    0% { opacity: 0; transform: translate3d(-14px, 8px, 0); }
    4%, 62% { opacity: 1; transform: none; }
    72%, 100% { opacity: 0; transform: translate3d(0, -6px, 0); }
  }
  .vt-alert { animation: vt-avviso 13s cubic-bezier(.2, .9, .28, 1) infinite; }
  @keyframes vt-avviso {
    0%, 40% { opacity: 0; transform: translate3d(0, -14px, 0) scale(.96); }
    46%, 66% { opacity: 1; transform: none; }
    74%, 100% { opacity: 0; transform: translate3d(0, -10px, 0) scale(.98); }
  }
  .vt-gioco { animation: vt-deriva 26s linear infinite; }
  @keyframes vt-deriva { to { transform: rotate(1turn); } }
  .vt-spett i { animation: vt-conta 13s steps(1) infinite; }
  @keyframes vt-conta {
    0% { --vt-n: 1284; } 24% { --vt-n: 1291; } 48% { --vt-n: 1288; }
    66% { --vt-n: 1305; } 84% { --vt-n: 1312; }
  }
}

.vt-sez { position: relative; padding: clamp(3.4rem, 11vh, 7rem) 0 0; }
.vt-testa { max-width: 46ch; margin: 0 0 clamp(1.6rem, 4vh, 2.6rem); }
.vt-testa.centro { margin-inline: auto; text-align: center; }
.vt-occhio {
  display: block; font-family: Archivo, system-ui, sans-serif;
  font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--acc); margin-bottom: .7rem;
}
.vt-tit {
  margin: 0; font-size: clamp(1.7rem, 3.6vw, 2.9rem); font-weight: 700;
  line-height: 1.06; letter-spacing: -.028em; text-wrap: balance;
}
.vt-tit em { color: var(--acc); }
.vt-testo { margin: .85rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--testo-2); }

.vt-griglia { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 14px; }
.vt-griglia > * { flex: 1 1 clamp(258px, 30%, 340px); min-width: 0; }
.vt-carta {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 1.3rem 1.35rem 1.45rem; border-radius: 14px;
  border: 1px solid var(--border); background: linear-gradient(168deg, var(--surface-2-tinta), var(--surface));
  transition: border-color .3s ease, transform .3s var(--molla-lieve);
}
@media (hover: hover) {
.vt-carta:hover { border-color: var(--border-2); transform: translateY(-2px); }
}
.vt-carta::before {
  content: ""; position: absolute; inset: -1px -1px auto; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 70%, transparent), transparent);
  opacity: .5;
}
.vt-carta-ico {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: .85rem;
  border-radius: 10px; color: var(--acc);
  background: var(--acc-tint); border: 1px solid var(--acc-bordo);
}
.vt-carta-ico svg { width: 19px; height: 19px; }
.vt-carta h3 { margin: 0 0 .35rem; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.vt-carta p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--testo-2); }

.vt-passi { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px; counter-reset: vp; }
.vt-passi > * { flex: 1 1 clamp(250px, 30%, 360px); min-width: 0; }
.vt-passo {
  position: relative; padding: 1.3rem 1.35rem; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface);
}
.vt-passo .vt-num {
  display: block; font-size: 2.1rem; font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--acc-bordo); margin-bottom: .6rem;
}
.vt-passo strong { display: block; font-size: 1rem; margin-bottom: .3rem; }
.vt-passo p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--testo-2); }

.vt-store { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
.vt-piano {
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.5rem 1.5rem 1.6rem; border-radius: 16px;
  border: 1px solid var(--border); background: linear-gradient(168deg, var(--surface-2-tinta), var(--surface));
}
.vt-piano.punta { border-color: var(--acc-bordo); box-shadow: 0 0 0 1px var(--acc-tint), 0 30px 70px -40px var(--acc-tint); }
.vt-piano-tag {
  align-self: flex-start; font-family: Archivo, system-ui, sans-serif;
  font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  padding: .26rem .6rem; border-radius: 999px; color: var(--acc);
  background: var(--acc-tint); border: 1px solid var(--acc-bordo);
}
.vt-piano h3 { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.vt-prezzo { display: flex; align-items: baseline; gap: .35rem; font-variant-numeric: tabular-nums; }
.vt-prezzo b { font-family: Archivo, system-ui, sans-serif; font-size: 2.5rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.vt-prezzo span { font-size: .88rem; color: var(--testo-3); }
.vt-piano > p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--testo-2); }
.vt-elenco { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .48rem; }
.vt-elenco li { display: flex; gap: .55rem; font-size: .88rem; line-height: 1.45; color: var(--testo-2); }
.vt-elenco svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: .16rem; color: var(--verde); }
.vt-piano .vt-btn { margin-top: auto; width: 100%; }

.vt-pacchi { margin-top: 18px; }
.vt-pacchi-tit {
  margin: 0 0 .7rem; font-family: Archivo, system-ui, sans-serif;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--testo-2);
}
.vt-pacchi-tit span {
  display: inline-block; margin-left: .55rem; font-family: inherit;
  font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--testo-3);
}
.vt-pacco {
  display: flex; flex-direction: column; gap: .35rem; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  padding-right: 4.6rem;
}
.vt-pacco > h3 { margin: 0; }
.vt-pacco > p { flex: 1 1 auto; }
.vt-pacco-sconto {
  position: absolute; top: .95rem; right: 1rem; z-index: 2;
  font-family: Archivo, system-ui, sans-serif; font-size: .66rem; font-weight: 700;
  letter-spacing: .06em; padding: .2rem .5rem; border-radius: 999px;
  color: var(--verde); background: var(--verde-soft); border: 1px solid var(--verde-bordo);
  font-variant-numeric: tabular-nums;
}
.vt-pacco-prezzo {
  display: flex; align-items: baseline; gap: .4rem; margin-top: .75rem;
  font-variant-numeric: tabular-nums;
}
.vt-pacco-prezzo s { font-size: .82rem; color: var(--testo-3); text-decoration-thickness: 1px; }
.vt-pacco-prezzo b { font-family: Archivo, system-ui, sans-serif; font-size: 1.32rem; font-weight: 700; letter-spacing: -.03em; }
.vt-pacco-prezzo i { font-style: normal; font-size: .8rem; color: var(--testo-3); }
.vt-pacco:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.vt-pacco.on { border-color: var(--acc-bordo); background: linear-gradient(168deg, var(--acc-soft), var(--surface)); }
.vt-pacco.on::before { opacity: 1; }
.vt-pacco.on .vt-pacco-sconto { color: var(--acc); background: var(--acc-tint); border-color: var(--acc-bordo); }
.vt-pacco.on .vt-pacco-prezzo b { color: var(--acc); }

.vt-community {
  margin: 18px 0 0; padding: .95rem 1.15rem; border-radius: 12px;
  font-size: .9rem; line-height: 1.6; color: var(--testo-2);
  border: 1px solid var(--verde-bordo); background: var(--verde-soft);
}
.vt-community strong { color: var(--verde); font-weight: 600; }
.vt-community a { color: var(--verde); }

.vt-cap {
  padding: 1.15rem 1.35rem 1.25rem; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface);
}
.vt-cap-conta {
  margin: 0 0 .35rem; font-size: .88rem; line-height: 1.7; color: var(--testo-2);
  font-variant-numeric: tabular-nums;
}
.vt-cap-conta b {
  font-family: Archivo, system-ui, sans-serif; font-size: 1.15rem;
  font-weight: 700; letter-spacing: -.02em; color: var(--testo);
}
.vt-cap-conta span { color: var(--testo-3); margin: 0 .35rem; }
.vt-cap .cap-area:first-of-type { border-top: 0; }
.vt-cap .cap-elenco { margin-bottom: .6rem; }

.vt-comp-guscio { margin-top: 18px; }
.vt-comp-tit { margin: 0 0 .4rem; font-size: 1.16rem; font-weight: 700; letter-spacing: -.02em; }
.vt-comp .vt-testo { margin-top: 0; font-size: .9rem; }
.vt-conto-nota { font-size: .84rem; color: var(--testo-3); }
.vt-btn:disabled { opacity: .45; pointer-events: none; }
.vt-btn-spento { opacity: .45; pointer-events: none; cursor: default; }
.vt-comp { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 1.4rem 1.4rem 1.5rem; }
.vt-comp-griglia { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 9px; margin: 1rem 0 0; }
.vt-comp-griglia > * { flex: 1 1 clamp(300px, 31%, 420px); min-width: 0; }
.vt-extra {
  display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  padding: .8rem .9rem; border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface-2); transition: border-color .22s ease, background .22s ease;
}
@media (hover: hover) {
.vt-extra:hover { border-color: var(--border-2); }
}
.vt-extra input { position: absolute; opacity: 0; width: 0; height: 0; }
.vt-spunta {
  flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; margin-top: .1rem;
  border-radius: 6px; border: 1.5px solid var(--testo-3); background: var(--surface-3);
  transition: background .2s var(--molla-lieve), border-color .2s ease;
}
.vt-spunta svg { width: 12px; height: 12px; color: var(--su-acc); opacity: 0; transform: scale(.5); transition: opacity .18s ease, transform .22s var(--molla-lieve); }
.vt-extra:has(input:checked) { border-color: var(--acc-bordo); background: var(--acc-soft); }
.vt-extra:has(input:checked) .vt-spunta { background: var(--acc); border-color: var(--acc); }
.vt-extra:has(input:checked) .vt-spunta svg { opacity: 1; transform: none; }
.vt-extra:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.vt-extra-corpo { min-width: 0; }
.vt-extra-corpo strong { display: block; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.vt-extra-corpo span { display: block; font-size: .8rem; line-height: 1.45; color: var(--testo-3); margin-top: .12rem; }
.vt-extra-prezzo { margin-left: auto; align-self: flex-start; font-size: .84rem; font-weight: 600; color: var(--testo-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.vt-conto {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 1.15rem 0 0; padding: 1rem 1.1rem; border-radius: 12px;
  border: 1px solid var(--border-2); background: var(--surface-2);
}
.vt-conto-tot { font-variant-numeric: tabular-nums; }
.vt-conto-tot b { font-family: Archivo, system-ui, sans-serif; font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; }
.vt-conto-tot span { font-size: .82rem; color: var(--testo-3); margin-left: .3rem; }
.vt-conto .vt-btn { margin-left: auto; min-height: 46px; }
.vt-risparmio[hidden] { display: none; }
.vt-risparmio {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  font-size: .86rem; color: var(--verde);
  padding-top: .9rem; border-top: 1px dashed var(--border-2);
}
.vt-risparmio button {
  font: inherit; font-weight: 600; cursor: pointer; color: var(--bg);
  background: var(--verde); border: 0; border-radius: 8px; padding: .32rem .8rem;
}

.vt-faq { display: grid; gap: 8px; }
.vt-faq details {
  border: var(--contorno-sp) solid var(--contorno); border-width: var(--tratto-mano);
  border-radius: var(--ang-mano-l); background: var(--surface);
  box-shadow: var(--ombra-ink);
}
.vt-faq summary { font-family: var(--mano); }
.vt-faq summary {
  list-style: none; cursor: pointer; padding: 1rem 1.15rem; font-weight: 600; font-size: .97rem;
  display: flex; align-items: center; gap: .8rem;
}
.vt-faq summary::-webkit-details-marker { display: none; }
.vt-faq summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 1.8px solid var(--testo-3); border-bottom: 1.8px solid var(--testo-3);
  rotate: 45deg; transition: rotate .26s var(--molla-lieve), border-color .2s ease;
}
.vt-faq details[open] summary::after { rotate: -135deg; border-color: var(--acc); }
.vt-faq p { margin: 0; padding: 0 1.15rem 1.15rem; font-size: .92rem; line-height: 1.62; color: var(--testo-2); }
.vt-faq a { color: var(--acc); }

.vt-fine {
  margin: clamp(3.4rem, 10vh, 6rem) 0 clamp(2rem, 6vh, 3.5rem);
  padding: clamp(2rem, 6vw, 3.4rem); border-radius: 20px; text-align: center;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, var(--surface-2-tinta), var(--surface)), var(--v-alone-caldo);
  background-blend-mode: normal;
}
.vt-fine .vt-tit { margin-bottom: .7rem; }
.vt-fine .vt-azioni { margin-top: 1.4rem; }
.vt-fine .vt-testo { margin-inline: auto; max-width: 52ch; }

@media not (prefers-reduced-motion: reduce) {
  body.vetrina .vt-scena .vt-occhiello,
  body.vetrina .vt-scena .vt-titolo,
  body.vetrina .vt-scena .vt-sub,
  body.vetrina .vt-scena .vt-azioni > *,
  body.vetrina .vt-scena .vt-sotto {
    animation: shonen-entra var(--colpo) var(--su-due) both;
    animation-delay: var(--posa, 0ms);
  }
  body.vetrina .vt-scena .vt-titolo { --posa: 70ms; }
  body.vetrina .vt-scena .vt-sub { --posa: 140ms; }
  body.vetrina .vt-scena .vt-azioni > * { --posa: 210ms; }
  body.vetrina .vt-scena .vt-azioni > * + * { --posa: 270ms; }
  body.vetrina .vt-scena .vt-sotto { --posa: 330ms; }

  @supports (animation-timeline: view()) {
    body.vetrina .vt-rivela {
      animation: vt-appare var(--su-due) both;
      animation-timeline: view();
      animation-range: entry 4% cover 32%;
    }
    @keyframes vt-appare {
      from { opacity: 0; transform: translate3d(0, 30px, 0) scale(.988); }
      to { opacity: 1; transform: none; }
    }
    body.vetrina .vt-griglia > *,
    body.vetrina .vt-passi > *,
    body.vetrina .vt-store > * {
      animation: vt-appare var(--su-due) both;
      animation-timeline: view();
      animation-range: entry calc(2% + var(--i, 0) * 5%) cover calc(30% + var(--i, 0) * 5%);
    }
    body.vetrina .vt-vetro {
      animation: vt-allontana linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 92%;
      transform-origin: 50% 0;
    }
    @keyframes vt-allontana {
      to { opacity: .18; transform: translate3d(0, -28px, 0) scale(.94); }
    }
    body.vetrina .vt-tit em {
      animation: vt-accende var(--su-due) both;
      animation-timeline: view();
      animation-range: entry 10% cover 38%;
    }
    @keyframes vt-accende {
      from { color: var(--testo-3); }
      to { color: var(--acc); }
    }
  }
}

@media (max-width: 760px) {
  body.vetrina .contenuto { padding-bottom: 2rem; }
  .vt-scena { min-height: auto; padding-top: 1.4rem; }
  .vt-titolo { font-size: clamp(2.1rem, 10.5vw, 3.2rem); letter-spacing: -.03em; }
  .vt-occhiello { font-size: .58rem; letter-spacing: .18em; padding: .38rem .8rem .38rem .7rem; }
  .vt-etichetta { font-size: .6rem; letter-spacing: .08em; }
  .vt-sub { font-size: .97rem; }
  .vt-azioni { flex-direction: column; align-items: stretch; }
  .vt-btn { width: 100%; }
  .vt-vetro { padding: 7px; border-radius: 14px; }
  .vt-schermo { aspect-ratio: 4 / 3; }
  .vt-chat { right: 14px; min-height: 84px; }
  .vt-chat li { font-size: .74rem; }
  .vt-cam { display: none; }
  .vt-alert { font-size: .78rem; padding: .5rem .8rem; max-width: 88%; white-space: normal; }
  .vt-conto .vt-btn { margin-left: 0; width: 100%; }
  .vt-comp, .vt-piano { padding: 1.1rem 1.1rem 1.2rem; }
  .vt-cap { padding: 1rem 1rem 1.1rem; }
  .vt-pacco { padding-right: 1.35rem; }
  .vt-pacco-sconto { position: static; align-self: flex-start; margin-bottom: .5rem; }
  .vt-pacchi-tit span { display: block; margin-left: 0; margin-top: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vt-chat li, .vt-alert { opacity: 1; }
  .vt-gioco { animation: none; }
}
.vt-serata { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 720px; }
.vt-serata li { display: grid; grid-template-columns: 4.4rem 1fr; gap: 1rem; align-items: baseline; }
.vt-serata time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--acc); }
.vt-serata p { margin: 0; }
@media (max-width: 600px) { .vt-serata li { grid-template-columns: 3.6rem 1fr; gap: .7rem; } }