html.prodotto {
  --terra-finale: #792B0F;
  --terra-chiara: #9A3A14;
  --dolcis: #EE9632;
  --dolcis-chiaro: #F7A24C;
  --dolcis-scuro: #C8611F;
}
html.prodotto body { position: relative; }
:where(html.prodotto) button {
  margin: 0; padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: manipulation;
}
:where(html.prodotto) button:disabled { cursor: default; }


html.mosso [data-compare] {
  transition: opacity .45s linear, transform .8s var(--molla);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.mosso [data-compare]:not(.visto) { opacity: 0; transform: translateY(26px) scale(.96); }
html.mosso .carta-posto[data-compare]:not(.visto) { transform: translateY(40px) rotate(calc(4deg - var(--i, 0) * 4deg)) scale(.9); }
html.mosso .cartellino[data-compare]:not(.visto) { transform: scale(.4) rotate(-10deg); }

.eroe {
  position: relative; overflow: hidden; padding: var(--hud) 0 30px;
  background: radial-gradient(110% 62% at 50% 30%, var(--viola) 0%, var(--notte) 78%);
}
.eroe__cielo { position: absolute; inset: 0; pointer-events: none; }

.vetrina {
  --sotto-eroe: 336px;
  position: relative; height: clamp(270px, calc(var(--alto) - var(--hud) - var(--sotto-eroe)), 600px);
}
.vetrina__quadro { position: absolute; inset: 0; }
.vetrina__alone {
  position: absolute; left: 50%; top: 4%; width: min(92%, 420px); aspect-ratio: 1; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(248, 195, 119, .3), rgba(248, 195, 119, .1) 60%, rgba(248, 195, 119, 0));
}
.vetrina { --calotta: max(17%, 68px); }
.vetrina__pianeta {
  position: absolute; left: -30%; right: -30%; top: calc(100% - var(--calotta)); height: calc(var(--calotta) + 6px);
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 46px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 46px), transparent);
}
.vetrina__sfera {
  position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 4px solid var(--contorno);
  background: radial-gradient(50% 30% at 46% 6%, var(--dolcis-chiaro), var(--dolcis) 70%, var(--dolcis-scuro));
}
.vetrina__sfera i { position: absolute; border-radius: 50%; }
.vetrina__sfera i:nth-child(1) { left: 22%; right: 22%; top: 3.4%; height: 12%; border-top: 5px solid rgba(255, 240, 212, .35); }
.vetrina__sfera i:nth-child(2) { left: 31%; width: 34px; top: 2.6%; height: 11px; background: var(--dolcis-scuro); border: 3px solid var(--contorno); }
.vetrina__sfera i:nth-child(3) { right: 32%; width: 22px; top: 4.2%; height: 8px; background: var(--dolcis-scuro); border: 3px solid var(--contorno); }
.vetrina__posto { position: absolute; left: 0; right: 0; top: 4%; bottom: calc(var(--calotta) - 1.4%); }
.vetrina__posto img { position: absolute; left: 50%; top: 0; height: 100%; width: auto; max-width: none; translate: -50% 0; pointer-events: none; }
.vetrina__posa { display: none; }
html.js:not(.senza-3d) .vetrina__foto { display: none; }
html.js:not(.senza-3d) .vetrina__posa { display: block; transition: opacity .2s linear .05s; }
html.vetrina-3d .vetrina__posa { opacity: 0; }
.vetrina__3d {
  position: absolute; left: 0; right: 0; top: calc(-1 * var(--hud)); bottom: 0; width: 100%; height: calc(100% + var(--hud));
  opacity: 0; transition: opacity .2s linear; pointer-events: none;
}
html.vetrina-3d .vetrina__3d { opacity: 1; }
.vetrina__presa { position: absolute; inset: 0; z-index: 2; touch-action: pan-y; }
html.vetrina-3d .vetrina__presa { cursor: grab; }
html.vetrina-3d .vetrina__presa:active { cursor: grabbing; }

.vetrina__comandi {
  position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 10px;
  display: flex; flex-wrap: wrap-reverse; justify-content: center; align-items: center; gap: 8px; pointer-events: none;
}
.vetrina__comandi > button { pointer-events: auto; }
.invito {
  display: none; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 99px; white-space: nowrap;
  background: var(--contorno); border: 2px solid var(--oro-40); color: var(--oro);
  font-family: var(--display); font-size: 15px; letter-spacing: .03em; text-transform: uppercase; pointer-events: none;
}
html.vetrina-3d .invito { display: inline-flex; }
.invito .icona { width: 19px; height: 19px; }
.invito__mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .invito__dito { display: none; } .invito__mouse { display: inline; } }
.vetrina { container-type: inline-size; }
@container (max-width: 400px) { .invito__lungo { display: none; } }
.spruzza {
  display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 18px 0 13px; border-radius: 99px;
  background: var(--viola); border: 2.5px solid var(--oro); color: var(--crema);
  font-family: var(--display); font-size: 15px; letter-spacing: .03em; text-transform: uppercase;
  transition: transform .4s var(--molla);
}
.spruzza[hidden] { display: none; }
.spruzza .icona { color: var(--oro); }
.spruzza:active { transform: scale(.92); transition-duration: .08s; }

.eroe__testi {
  position: relative; z-index: 2; display: grid; justify-items: center; gap: 6px; text-align: center;
  max-width: 470px; margin: 14px auto 0; padding: 0 var(--m);
}
.occhiello { font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); }
.nome-prodotto { font-size: clamp(2.7rem, 13vw, 3.4rem); line-height: .95; color: var(--oro); letter-spacing: .04em; }
.eroe__sapore { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--crema-80); text-wrap: balance; }
.eroe__sapore strong { font-weight: 750; color: var(--crema); }

.cassa-prodotto {
  width: 100%; margin-top: 10px; display: grid; gap: 12px; padding: 12px 12px 10px;
  background: var(--viola); border: 3px solid var(--oro); border-radius: 26px; scroll-margin-top: 16px;
}
.cassa-prodotto__riga { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cassa-prodotto .moneta { width: 68px; height: 68px; }

.quantita {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 99px;
  background: var(--contorno); border: 2.5px solid var(--oro-40);
}
.quantita__tasto {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--oro); border: 3px solid var(--contorno); color: var(--contorno);
  transition: transform .35s var(--molla), opacity .2s linear;
}
.quantita__tasto .icona { width: 22px; height: 22px; stroke-width: 3; }
.quantita__tasto:active:not(:disabled) { transform: scale(.88); transition-duration: .08s; }
.quantita__tasto:disabled { opacity: .38; }
.quantita__n {
  min-width: 2.1em; text-align: center; font-family: var(--display); font-size: 26px; line-height: 1; color: var(--crema);
  display: inline-block;
}

.bottone--acquista { width: 100%; text-align: center; }
.cassa-prodotto__riga .bottone--acquista { flex: 1; min-width: 0; width: auto; }

.avviso-pagamento {
  display: block; padding: 8px 14px; border-radius: 16px; text-align: center;
  background: var(--contorno); border: 2px dashed var(--oro); color: var(--crema);
  font-size: 15px; font-weight: 650; line-height: 1.35;
}
.avviso-pagamento a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--oro); font-weight: 750; text-underline-offset: 3px; }
.avviso-pagamento a:active { opacity: .6; }
.cassa-prodotto .bollini { margin-top: 2px; }

.corpo { position: relative; }
.sezione { position: relative; max-width: 1160px; margin: 0 auto; padding: 52px var(--m); }
.sezione + .sezione::before {
  content: ""; position: absolute; top: 0; left: var(--m); right: var(--m); border-top: 2px dashed var(--oro-40);
}
.titolo-sezione { font-size: clamp(1.8rem, 7.6vw, 2.5rem); line-height: 1.05; color: var(--crema); text-wrap: balance; text-align: center; }

.descrizione { display: grid; justify-items: center; gap: 18px; max-width: 720px; }
.descrizione__fumetto { width: 100%; }
.consiglio {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 16px; text-align: left;
  border: 2.5px dashed var(--oro); border-radius: 20px; background: rgba(43, 17, 80, .7);
}
.consiglio__segno {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: var(--oro); border: 3px solid var(--contorno); color: var(--contorno);
}
.consiglio__segno .icona { width: 24px; height: 24px; stroke-width: 2.4; }
.consiglio p { font-size: 17px; font-weight: 650; line-height: 1.35; color: var(--crema); }
.descrizione__fatti { font-size: 15px; font-weight: 650; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--crema-60); text-align: center; text-wrap: balance; }
.descrizione__fatti em { font-style: normal; }

.posti { display: grid; gap: 22px; }
.posti__carte { display: grid; gap: 14px; max-width: 560px; width: 100%; margin: 0 auto; }
.carta-posto {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; overflow: hidden;
  border-radius: 22px; background: var(--crema); color: var(--contorno); border: 4px solid var(--contorno);
}
.carta-posto__foto { width: 100%; height: 100%; min-height: 112px; object-fit: cover; object-position: 50% 40%; border-right: 4px solid var(--contorno); }
.carta-posto .carta__stemma { top: 8px; right: auto; left: 8px; width: 38px; height: 38px; }
.carta-posto .carta__stemma .icona { width: 20px; height: 20px; }
.carta-posto__corpo { padding: 12px 14px 13px; display: grid; gap: 4px; }
.carta-posto h3 { font-size: 21px; line-height: 1.05; color: var(--caramello); }
.carta-posto p { font-size: 16px; line-height: 1.35; font-weight: 600; }

.dati { display: grid; gap: 40px; align-items: start; }
.dati__scheda { display: grid; justify-items: center; gap: 16px; }
.dati .scheda { max-width: 560px; }
.dati .riga dd small { font-size: 15px; }

.avvertenze {
  width: 100%; max-width: 560px; justify-self: center; padding: 16px 18px 18px; border-radius: 20px; text-align: left;
  background: rgba(43, 17, 80, .55); border: 2.5px solid var(--viola-chiaro);
}
.avvertenze__testa { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.avvertenze__segni { display: flex; gap: 8px; flex: none; }
.avvertenze__segni svg { display: block; width: 46px; height: 46px; }
.avvertenze__titolo { font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); line-height: 1.3; }
.avvertenze__testo { display: grid; gap: 9px; }
.avvertenze__testo p { font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--crema-80); }
.avvertenze__testo .avvertenze__h { font-size: 16px; font-weight: 750; color: var(--crema); }

.storia { display: grid; justify-items: center; gap: 20px; text-align: center; }
.storia__mondo { position: relative; width: min(100%, 340px); height: 300px; }
.storia__pianeta {
  position: absolute; left: 50%; bottom: 14px; width: 168px; aspect-ratio: 1; translate: -50% 0; overflow: hidden;
  border-radius: 50%; border: 4px solid var(--contorno);
  background: radial-gradient(60% 50% at 36% 26%, var(--dolcis-chiaro), var(--dolcis) 55%, var(--dolcis-scuro));
}
.storia__pianeta i { position: absolute; border-radius: 50%; }
.storia__pianeta i:nth-child(1) { left: 6%; right: 6%; top: 14%; height: 24%; border-top: 5px solid rgba(255, 240, 212, .35); }
.storia__pianeta i:nth-child(2) { left: 20%; width: 20%; top: 40%; height: 10%; background: var(--dolcis-scuro); border: 3px solid var(--contorno); }
.storia__pianeta i:nth-child(3) { right: 18%; width: 13%; top: 58%; height: 7%; background: var(--dolcis-scuro); border: 3px solid var(--contorno); }
.storia__mondo::before, .storia__mondo::after {
  content: ""; position: absolute; left: 50%; bottom: 82px; width: 250px; height: 54px; translate: -50% 50%; rotate: -10deg;
  border-radius: 50%; border: 6px solid var(--oro); box-sizing: border-box;
  clip-path: polygon(-4% 52%, 104% 52%, 104% 110%, -4% 110%);
}
.storia__mondo::before { z-index: 0; width: 258px; height: 62px; border-width: 10px; border-color: var(--contorno); }
.storia__mondo::after { z-index: 1; }
.storia__yumo { position: absolute; left: 50%; bottom: 168px; height: 128px; width: auto; max-width: none; translate: -50% 0; }
.storia__testi { display: grid; justify-items: center; gap: 18px; max-width: 520px; width: 100%; }
.storia .fumetto { width: 100%; }
.gioca {
  display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 22px 0 16px; border-radius: 99px;
  background: var(--contorno); border: 2.5px solid var(--oro); color: var(--crema); text-decoration: none;
  font-family: var(--display); font-size: 16px; letter-spacing: .03em; text-transform: uppercase;
  transition: transform .45s var(--molla);
  text-wrap: balance;
}
.gioca .icona { color: var(--oro); fill: var(--oro); }
.gioca:active { transform: scale(.95); transition-duration: .08s; }

.barretta { display: none; }
@media (max-width: 899px) and (orientation: portrait) {
  .barretta {
    position: sticky; z-index: 20; bottom: 0; display: grid; grid-template-areas: "faccia"; align-items: center;
    height: calc(72px + env(safe-area-inset-bottom)); margin: calc(-72px - env(safe-area-inset-bottom)) auto 0; max-width: 560px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--viola); border: 3px solid var(--oro); border-bottom: 0; border-radius: 22px 22px 0 0;
    transition: opacity .25s linear, transform .45s var(--liscia), visibility 0s;
  }
  html.js .barretta:not(.vista) { opacity: 0; visibility: hidden; transform: translateY(100%); transition: opacity .2s linear, transform .35s var(--liscia), visibility 0s linear .35s; }
}
.barretta__prezzo { display: grid; font-family: var(--display); font-size: 19px; font-size: calc(19px * min(1, 4.5 / var(--cifre, 4))); line-height: 1.05; color: var(--crema); white-space: nowrap; }
.barretta__nome { font-size: 15px; color: var(--oro); -webkit-text-stroke-width: 0; }
.bottone--barretta { flex: 1; min-width: 0; width: auto; border-radius: 20px; }
.bottone--barretta .bottone__faccia { min-height: 48px; margin-bottom: 5px; padding: 6px 16px; font-size: 19px; border-radius: 0 0 16px 16px; }

.barretta > * { grid-area: faccia; min-width: 0; }
.barretta__annuncio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.barretta__aggiungi { width: 100%; transition: opacity .2s linear .1s, transform .5s var(--molla) .06s, visibility 0s; }
.barretta__aggiungi .bottone__faccia { padding-inline: 12px; font-size: clamp(16px, 5vw, 19px); }
.barretta__scritta { display: inline-flex; align-items: center; gap: inherit; transition: opacity .2s linear .1s; }
.barretta__acquista .bottone__faccia { padding-inline: 10px; font-size: clamp(16px, 5vw, 19px); }
.barretta__pieno { display: flex; align-items: center; gap: 12px; padding-left: 8px; visibility: hidden; opacity: 0; transition: opacity .15s linear, visibility 0s linear .3s; }
html.carrello-pieno .barretta__aggiungi { opacity: 0; transform: scale(.94); visibility: hidden; transition: opacity .12s linear .18s, transform .3s var(--liscia), visibility 0s linear .3s; }
html.carrello-pieno .barretta__scritta { opacity: 0; transition: opacity .09s linear; }
html.carrello-pieno .barretta__pieno { visibility: visible; opacity: 1; transition: opacity .1s linear, visibility 0s; }
.barretta__carrello { flex: none; margin-left: 2px; scale: .2; opacity: 0; transition: transform .45s var(--molla), scale .5s var(--molla) .06s, opacity .12s linear .06s; }
.barretta__prezzo, .barretta__acquista { translate: -14px 0; opacity: 0; transition: translate .45s var(--curva) .12s, opacity .2s linear .12s; }
.barretta__acquista { translate: -22px 0; transition-delay: .18s; }
html.carrello-pieno .barretta__carrello { scale: 1; opacity: 1; }
html.carrello-pieno :is(.barretta__prezzo, .barretta__acquista) { translate: 0 0; opacity: 1; }
html.carrello-pieno .barretta__acquista { transition: translate .45s var(--curva) .06s, opacity .16s linear .06s; }
html.carrello-pieno .barretta__prezzo { transition: translate .45s var(--curva) .14s, opacity .2s linear .14s; }
.attesa { display: none; width: 1.05em; height: 1.05em; flex: none; border-radius: 50%; border: 3px solid var(--contorno); border-right-color: transparent; }
.barretta__acquista[aria-busy="true"] .bottone__faccia { transform: translateY(5px); }
.barretta__acquista[aria-busy="true"] .bottone__faccia .icona { display: none; }
.barretta__acquista[aria-busy="true"] .attesa { display: block; animation: attesa .7s linear infinite; }
@keyframes attesa { to { transform: rotate(1turn); } }

.finale {
  position: relative; overflow: hidden; display: grid;
  grid-template-areas: "testa" "scena" "terra"; grid-template-columns: minmax(0, 1fr);
  padding-top: 64px;
  background: linear-gradient(to bottom, var(--notte) 0%, var(--viola) 100%);
}
.finale > .stellina { z-index: 0; }
.finale__testa { grid-area: testa; position: relative; z-index: 2; display: grid; justify-items: center; gap: 8px; padding: 0 var(--m); text-align: center; }
.finale .titolo { font-size: clamp(2.2rem, 10vw, 3.4rem); }
.finale__scena { grid-area: scena; position: relative; z-index: 2; height: 300px; width: min(100%, 420px); margin: 14px auto 0; }
.finale__scena::after {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -24px; width: 120px; height: 24px; translate: -50% 0;
  border-radius: 50%; background: rgba(61, 29, 7, .55);
}
.finale__boccetta { position: absolute; left: 50%; bottom: -16px; height: 274px; width: auto; max-width: none; translate: -50% 0; }
.finale__razzo { position: absolute; left: calc(50% - 158px); bottom: 34px; width: 190px; height: 95px; max-width: none; rotate: -90deg; }
html.mosso .finale__boccetta, html.mosso .finale__razzo { transition: opacity .4s linear, transform .9s var(--molla); }
html.mosso .finale:not(.visto) .finale__boccetta { opacity: 0; transform: translateY(30px) scale(.86); }
html.mosso .finale:not(.visto) .finale__razzo { opacity: 0; transform: translateX(46px); }
html.mosso .finale .finale__razzo { transition-delay: .15s; }

.finale__suolo {
  grid-area: terra; position: relative; z-index: 1; margin-top: -2px;
  border-top: 4px solid var(--contorno); border-radius: 50% 50% 0 0 / 60px 60px 0 0;
  background:
    radial-gradient(circle at 9% 22%, var(--terra-chiara) 0 16px, transparent 17px),
    radial-gradient(circle at 93% 40%, var(--terra-chiara) 0 24px, transparent 25px),
    radial-gradient(circle at 74% 14%, var(--terra-chiara) 0 9px, transparent 10px),
    var(--terra-finale);
}
.finale__cassa {
  grid-area: terra; position: relative; z-index: 2; width: calc(100% - 2 * var(--m)); max-width: 440px; justify-self: center;
  margin: 46px 0 34px; display: grid; gap: 10px; padding: 12px 12px 6px;
  background: var(--viola); border: 3px solid var(--oro); border-radius: 26px;
}
.finale__cassa .moneta { width: 68px; height: 68px; }
.finale__cassa .note a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; margin: 0; }

html.prodotto .piede__isola { display: block; }
html.prodotto .piede__cielo { height: 150px; }

@media (orientation: portrait) and (min-width: 600px) {
  .vetrina { --sotto-eroe: 360px; }
  .eroe__testi { max-width: 520px; }
  .posti__carte { max-width: 620px; }
  .carta-posto { grid-template-columns: 150px minmax(0, 1fr); }
  .carta-posto__foto { min-height: 150px; }
  .fumetto__testo { font-size: 19px; }
}

@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) {
  .eroe {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 2%;
    min-height: var(--alto); padding: var(--hud) 6% 24px 0;
  }
  .vetrina { height: clamp(300px, calc(var(--alto) - var(--hud) - 30px), 860px); }
  .vetrina { --calotta: max(15%, 66px); }
  .vetrina__posto { top: 7%; }
  .vetrina__pianeta { left: -16%; right: -16%; }
  .eroe__testi { justify-items: start; text-align: left; margin: 0; max-width: 520px; padding: 0; gap: 10px; }
  .nome-prodotto { font-size: clamp(3.2rem, min(7vw, 12vh), 6rem); }
  .eroe__sapore { font-size: clamp(17px, 1.5vw, 21px); }
  .cassa-prodotto { padding: 14px 14px 12px; gap: 14px; }
  .cassa-prodotto .moneta { width: 84px; height: 84px; }

  .sezione { padding: 72px var(--m); }
  .fumetto { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
  .avatar { width: 84px; height: 84px; border-width: 4px; }
  .fumetto__testo { font-size: clamp(17px, 1.5vw, 21px); padding: 15px 22px 16px; border-width: 4px; border-radius: 24px; }
  .fumetto__testo::before { bottom: 20px; }
  .consiglio p { font-size: 18px; }

  .posti { gap: 30px; }
  .posti__carte { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 22px; }
  .carta-posto { grid-template-columns: none; grid-template-rows: auto 1fr; align-items: stretch; }
  .carta-posto__foto { height: auto; min-height: 0; aspect-ratio: 1.25; border-right: 0; border-bottom: 4px solid var(--contorno); }
  .carta-posto .carta__stemma { top: 10px; left: auto; right: 10px; width: 46px; height: 46px; }
  .carta-posto .carta__stemma .icona { width: 24px; height: 24px; }
  .carta-posto__corpo { align-content: start; padding: 14px 18px 18px; }
  .carta-posto h3 { font-size: 24px; }
  .carta-posto p { font-size: 17px; }

  .dati .scheda { padding: 16px 22px 10px; }
  .dati .scheda__nome { font-size: clamp(28px, 2.6vw, 38px); }
  .avvertenze { max-width: none; padding: 20px 24px 22px; margin-top: 2px; }
  .avvertenze__segni svg { width: 52px; height: 52px; }

  .storia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; text-align: left; gap: 40px; max-width: 980px; }
  .storia__mondo { width: 100%; max-width: 380px; height: 300px; justify-self: end; }
  .storia__testi { justify-items: start; }
  .storia .titolo-sezione { text-align: left; }

  .finale {
    --scena: clamp(400px, 60vh, 660px);
    --affondo: calc(var(--scena) * .36);
    --titolo: clamp(2.4rem, min(4.6vw, 8.6vh), 4.6rem);
    grid-template-areas: ". testa scena ." "terra terra terra terra";
    grid-template-columns: minmax(var(--m), 1fr) minmax(0, max(460px, calc(var(--titolo) * 7.2))) minmax(0, min(480px, calc(var(--scena) * .85))) minmax(var(--m), 1fr);
    grid-template-rows: auto auto; column-gap: clamp(24px, 3vw, 48px);
    padding: clamp(32px, 5vh, 64px) 0 0;
  }
  .finale__testa { justify-items: start; text-align: left; padding: 0; align-self: end; margin-bottom: clamp(20px, 3vh, 32px); }
  .finale .titolo { font-size: var(--titolo); }
  .finale__scena { height: var(--scena); width: 100%; max-width: none; margin: 0 0 calc(-1 * var(--affondo)); align-self: end; }
  .finale__boccetta { left: 32%; height: calc(100% - 20px); bottom: -14px; }
  .finale__razzo { left: calc(32% - var(--scena) * .02); bottom: calc(var(--scena) * .125 - 12px); width: calc(var(--scena) * .5); height: calc(var(--scena) * .25); }
  .finale__scena::after { left: 32%; width: calc(var(--scena) * .42); height: 30px; bottom: -28px; }
  .finale__suolo {
    grid-row: 2; grid-column: 1 / -1; margin: 0 -30%; border-radius: 50% 50% 0 0 / clamp(150px, 11vw, 320px) clamp(150px, 11vw, 320px) 0 0;
    background:
      radial-gradient(circle at 21.5% 30%, var(--terra-chiara) 0 18px, transparent 19px),
      radial-gradient(circle at 77% 46%, var(--terra-chiara) 0 26px, transparent 27px),
      radial-gradient(circle at 60% 20%, var(--terra-chiara) 0 10px, transparent 11px),
      var(--terra-finale);
  }
  .finale__cassa { grid-row: 2; grid-column: 2; justify-self: start; align-self: start; width: 100%; max-width: 460px; margin: clamp(36px, 5vh, 56px) 0 max(clamp(44px, 7vh, 96px), calc(var(--affondo) - 120px)); }
  html.prodotto .piede__cielo { height: 200px; }
  .finale > .stellina:nth-of-type(3) { left: 4%; top: 20%; }
}

@media (min-width: 1000px) {
  .dati { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; }
  .dati__scheda { justify-items: start; }
  .dati .scheda { max-width: none; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .eroe { min-height: 0; padding-bottom: 16px; }
  .vetrina { height: calc(var(--alto) - var(--hud) - 16px); min-height: 280px; }
  .nome-prodotto { font-size: clamp(2.4rem, 12vh, 3.4rem); }
  .eroe__testi { gap: 6px; padding-top: 8px; }
  .cassa-prodotto { gap: 10px; padding: 10px 10px 8px; margin-top: 4px; }
  .cassa-prodotto .moneta { width: 62px; height: 62px; }
  .bottone--acquista .bottone__faccia { min-height: 50px; font-size: 19px; margin-bottom: 5px; }
  .bollini li { font-size: 15px; }
  .bollino { width: 32px; height: 32px; }
  .finale { --scena: 330px; padding-top: 40px; }
  .finale__testa { margin-bottom: 20px; }
  .finale__cassa { margin: 40px 0 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .spruzza, .quantita__tasto, .gioca { transition: none; }
  .barretta > *, .barretta__pieno > *, .barretta__scritta,
  html.carrello-pieno :is(.barretta__aggiungi, .barretta__scritta, .barretta__pieno, .barretta__prezzo, .barretta__acquista) { transition: none; }
}