/* =========================================================
   Tradicity — La Fiera dello Stretto
   Foglio di stile principale.
   I blocchi qui sotto sono pensati per essere trasferiti
   1:1 dentro il tema WordPress (assets/css/main.css).
   ========================================================= */

:root{
  /* Palette: i colori vengono dal video — l'abisso dello Stretto
     e l'oro della Madonnina al tramonto. */
  --abyss:  #040d16;
  --deep:   #0a1f33;
  --sea:    #14486b;
  --gold:   #d9a441;
  --gold-2: #f2d493;
  --sand:   #f5ecd9;
  --rust:   #b04a2f;

  --font-display: "Playfair Display", Georgia, serif;
  --font-kicker:  "Cinzel", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--abyss);
  color: var(--sand);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video{ max-width: 100%; display: block; }

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--su-oro);
  padding: 12px 20px; font-weight: 600; text-decoration: none;
}
.skip-link:focus{ left: 0; }

:focus-visible{ outline: 2px solid var(--gold-2); outline-offset: 3px; }

/* ---------- elementi ricorrenti ---------- */

.kicker{
  font-family: var(--font-kicker);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}

.rule{ display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; }
.rule__line{ width: clamp(40px, 8vw, 90px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.rule__line:last-child{ background: linear-gradient(90deg, var(--gold), transparent); }
.rule__gem{ color: var(--gold); font-size: 9px; }

.btn{
  display: inline-block;
  padding: 15px 34px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .06em;
  text-decoration: none;
  border: 0;                     /* anche come <button> (il form di WooCommerce) resta identico al link */
  background: none;
  cursor: pointer;
  border-radius: 999px;
  transition: transform .3s var(--ease-out), background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn:hover{ transform: translateY(-2px); }
.btn--gold{ background: var(--gold); color: var(--su-oro); font-weight: 600; }
.btn--gold:hover{ background: var(--gold-2); }
.btn--ghost{ border: 1px solid var(--bordo-ghost); color: var(--sand); }
.btn--ghost:hover{ border-color: var(--gold); color: var(--gold-2); }

/* grana filmica: tiene insieme video e illustrazioni */
.grain{
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- NAV ----------
   Sta sopra l'hero, trasparente, fissa in alto fin dal primo istante.
   Quando la scena dell'hero scorre via, sparisce: sotto non c'e'. */

.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 32px;
  padding: 22px var(--gutter);
  background: transparent;
  transition: opacity .35s ease;
}
.nav.is-hidden{ opacity: 0; pointer-events: none; }

.nav__brand{
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: .02em;
  color: var(--sand); text-decoration: none;
  text-shadow: 0 1px 12px rgba(4,13,22,.45);
}
.nav__links{ display: flex; gap: 28px; margin-left: auto; }
.nav__links a{
  color: var(--sand); text-decoration: none;
  font-size: 14.5px; font-weight: 600; letter-spacing: .04em;
  text-shadow: 0 1px 12px rgba(4,13,22,.45);   /* sul cielo chiaro dell'apertura */
  transition: color .25s;
}
.nav__links a:hover{ color: var(--gold-2); }
.nav__cta{ padding: 11px 24px; font-size: 13px; }

@media (max-width: 820px){
  .nav__links{ display: none; }
  .nav__cta{ margin-left: auto; }
}

/* ---------- HERO ---------- */

/* L'altezza di .hero e' la lunghezza dello scroll a disposizione
   dell'immersione: piu' e' alta, piu' il video avanza lentamente. */
.hero{ position: relative; height: 480vh; }

.hero__stage{
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--abyss);
}

.hero__media{ position: absolute; inset: 0; }

.hero__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; z-index: 0;
  /* Il cambio e' quasi un taglio, e deve restarlo. I tre clip sono girati
     dalla stessa camera ferma: al passaggio la citta' e il cielo combaciano
     fotogramma per fotogramma, l'unica cosa che cambia e' l'acqua in primo
     piano. Su una differenza di sola texture una dissolvenza non nasconde
     niente, ci sovrappone due acque diverse e si vede il fantasma; mezzo
     secondo di fantasma era proprio cio' che si notava. Questi 0,18s bastano
     a coprire l'1,5% di stacco di luminosita' fra la discesa e il fondale,
     che e' rigradato piu' scuro. */
  transition: opacity .18s ease;
}
.hero__video.is-on{ opacity: 1; z-index: 1; }

/* Chi esce resta pieno SOTTO chi entra, finche' l'altro non e' salito del
   tutto. Sfumare l'uno mentre sfuma l'altro sembra la cosa giusta e invece a
   meta' strada sono trasparenti tutti e due insieme: sotto si scopre lo sfondo
   scuro dell'hero e si vede passare un lampo nero. */
.hero__video.is-uscente{ opacity: 1; z-index: 0; transition: none; }

/* scurisce sopra e sotto: il testo resta leggibile su qualunque frame */
.hero__veil{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,13,22,.55) 0%, rgba(4,13,22,0) 26%, rgba(4,13,22,0) 58%, rgba(4,13,22,.82) 100%),
    radial-gradient(120% 80% at 50% 45%, rgba(4,13,22,0) 40%, rgba(4,13,22,.5) 100%);
}

.hero__content{
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  padding: 0 var(--gutter);
  text-align: center;
}

/* I due atti occupano la stessa cella: JS li incrocia in dissolvenza. */
.act{ grid-area: 1 / 1; will-change: opacity, transform; }

/* L'apertura sta in basso a sinistra, allineata a sinistra, come nella
   reference del cliente: il titolo poggia sul mare aperto e lascia libero
   il forte con la Madonnina, che nel video sta a destra. Le radici restano
   al centro, sono un'altra composizione. */
.act--surface{
  align-self: end; justify-self: start;
  text-align: left;
  /* il margine del gutter si ferma a 72px, la reference vuole il 5,7% dello
     schermo: la differenza si recupera qui, a ogni larghezza */
  margin-left: max(0px, calc(5.7vw - var(--gutter)));
  padding-bottom: clamp(130px, 16vh, 175px);   /* sotto passa l'invito a scorrere */
  max-width: min(820px, 100%);
}
.act--surface .hero__badge{ margin-left: 0; margin-right: 0; }

.hero__title{
  font-family: var(--font-display);
  font-weight: 900;
  /* 9,2vw tiene la parola "Tradicity" larga il 38% dello schermo a qualunque
     larghezza: e' la proporzione della reference del cliente. Prima era
     bloccata a 148px, quindi su un monitor largo rimpiccioliva. */
  font-size: clamp(52px, 9.2vw, 210px);
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--sand);
  text-shadow: 0 8px 60px rgba(4,13,22,.75);
}
.hero__title--alt{ font-size: clamp(40px, 7.4vw, 104px); line-height: 1.02; }

.hero__sub{
  font-family: var(--font-display);
  font-size: clamp(18px, 1.95vw, 46px);
  font-weight: 600;
  color: var(--gold-2);
  /* la discendente della "y" di Tradicity esce dalla riga (line-height .95),
     quindi serve piu' aria di quanta ne sembri: nella reference fra i due
     testi ci sono 40px su 1080 */
  margin: clamp(14px, 2.1vw, 48px) 0 0;
}

.hero__lead{
  font-size: clamp(15px, 1.6vw, 19px);
  color: rgba(245,236,217,.86);
  margin: 22px auto 0;
  max-width: 44ch;
}

.hero__actions{
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; margin-top: 38px;
}

.hero__hint{
  position: absolute; z-index: 5;
  left: 50%; bottom: 34px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-kicker);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(245,236,217,.6);
  transition: opacity .4s ease;
}
.hero__hint-arrow{
  width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: drift 2.4s ease-in-out infinite;
}
@keyframes drift{
  0%, 100%{ transform: scaleY(.4); transform-origin: top; opacity: .4; }
  50%     { transform: scaleY(1);  transform-origin: top; opacity: 1; }
}

/* In verticale il video orizzontale viene ritagliato e si tiene il lato
   destro, perche' li' c'e' la punta della falce con la Madonnina: sul
   fotogramma la statua sta a 1590 su 1920, e un ritaglio centrato la
   lasciava fuori schermo di duecento pixel. A filo destro la statua cade
   a 132px dal bordo, cioe' appena a sinistra del fregio, che altrimenti
   gliela coprirebbe: un ritaglio intermedio la centra ma glielo mette
   davanti. Vale per tutti e tre i video, radici comprese: l'ultimo
   fotogramma dell'immersione e il loop finale sono la stessa scena, e un
   ritaglio diverso fra i due si vedrebbe come uno scarto. */
@media (orientation: portrait){
  .hero__video{ object-position: 94% 50%; }
  /* In verticale l'apertura torna al centro: la reference e' un fotogramma
     16:9, e su uno schermo stretto il blocco a sinistra si accalca su un
     lato solo. Qui si annulla tutto cio' che lo manda in basso a sinistra. */
  /* Composizione della reference del cliente (hero-mob.png): il fregio sta
     SOPRA la testa della Madonnina e il titolo SOTTO, con la colonna che
     passa dietro le scritte. In verticale il video copre sempre l'altezza
     esatta, quindi la statua cade sempre fra il 41% e il 46% dello schermo,
     qualunque sia il telefono: il fregio finisce prima del 40%, il titolo
     comincia dopo il 47%, e lei resta nel vuoto in mezzo. */
  .act--surface{
    position: relative;
    align-self: start; justify-self: center;
    text-align: center;
    margin-left: 0;
    padding-top: 28svh;
    padding-bottom: 0;
    max-width: 100%;
  }
  @supports not (height: 1svh){ .act--surface{ padding-top: 28vh; } }
  .act--surface .hero__badge{ margin-left: auto; margin-right: auto; margin-bottom: 13svh; }
  @supports not (height: 1svh){ .act--surface .hero__badge{ margin-bottom: 13vh; } }
  /* e piu' grande: in verticale non vale la proporzione della reference
     orizzontale, e su uno schermo stretto il blocco puo' prendersi spazio */
  .act--surface .hero__badge{ width: clamp(76px, 19vw, 120px); }
  .act--surface .hero__title{ font-size: clamp(58px, 15.5vw, 110px); }
  .act--surface .hero__sub{ font-size: clamp(21px, 5.4vw, 34px); }

  /* Leggibilita'. Qui le scritte cadono sul forte e sul porto, chiari e
     pieni di dettaglio, e un'ombra sola non basta: tre strati, una vicina e
     netta che stacca i bordi delle lettere, due larghe che abbassano il
     fondo attorno. Solo ombre: un alone dietro al blocco e' stato provato e
     bocciato, si vedeva la macchia. */
}

/* ---------- sezione di prova sotto l'hero ---------- */

.section{
  position: relative; z-index: 6;
  background: var(--abyss);
  padding: clamp(90px, 14vh, 180px) var(--gutter);
  max-width: 900px; margin: 0 auto;
  text-align: center;
}
.section__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.12;
  margin: 0 0 26px;
}
.section__text{ color: var(--testo-2); max-width: 56ch; margin: 0 auto; }
.placeholder{
  margin-top: 70px; padding-top: 26px;
  border-top: 1px solid var(--linea);
  font-size: 12.5px; letter-spacing: .08em;
  color: var(--testo-3);
}

/* ---------- accessibilita' ---------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .hero{ height: 100svh; }
  .hero__hint{ display: none; }
  .hero__hint-arrow{ animation: none; }
  .hero__video{ transition: none; }
}

/* =========================================================
   PARTE 2 — le sezioni del sito e le pagine interne
   Palette ufficiale del gioco (Codici colori.docx):
   rosso #7E1E22 · corallo #CA5039 · ocra #B17F25 · oro #ECD16C
   ========================================================= */

:root{
  --rosso:   #7e1e22;
  --corallo: #ca5039;
  --ocra:    #b17f25;
  --oro:     #ecd16c;
  --linea:   rgba(236,209,108,.16);
  --testo-2: rgba(245,236,217,.74);
  --testo-3: rgba(245,236,217,.54);   /* note, didascalie, righe legali: 5,2:1 sul fondo */
  --linea-oro: rgba(236,209,108,.32);
  --velo-oro:  rgba(236,209,108,.05); /* il fondo appena acceso delle schede */
  --velo-nav:  rgba(4,13,22,.82);
  --velo-carta: rgba(4,13,22,.55);    /* sopra il dorso, dove sta il "?" */
  --velo-testata: rgba(126,30,34,.34);
  --velo-lightbox: rgba(4,13,22,.92);
  --campo: rgba(245,236,217,.04);     /* fondo dei campi del form */
  --ombra-forte: rgba(0,0,0,.55);
  --ombra-media: rgba(0,0,0,.35);
  --su-oro: var(--abyss);             /* testo sopra un fondo oro pieno */
  --bordo-ghost: rgba(245,236,217,.35);
  --linea-forte: rgba(245,236,217,.22);   /* le righe da compilare del modulo di recesso */
  --velo-toggle: rgba(4,13,22,.35);
  --velo-pannello: rgba(4,13,22,.96);   /* il menu a tendina dei telefoni */
  --max:     1180px;
}

/* ---------- elementi comuni ---------- */
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.blocco{ position: relative; z-index: 6; background: var(--abyss); padding: clamp(80px, 12vh, 150px) 0; }
.blocco--linea{ border-top: 1px solid var(--linea); }
.blocco__testa{ max-width: 720px; margin-bottom: clamp(36px, 6vh, 64px); }
.blocco__testa.centro{ margin-left: auto; margin-right: auto; text-align: center; }
.titolo{ font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.1; margin: 0 0 20px; }
.titolo em{ font-style: normal; color: var(--oro); }
.sotto{ color: var(--testo-2); font-size: clamp(16px, 1.35vw, 19px); max-width: 60ch; margin: 0; }
.sotto > p{ margin: 0; }                              /* quando il sottotitolo arriva gia' in paragrafi (WooCommerce) */
.sotto > p + p{ margin-top: .7em; }
.blocco__testa.centro .sotto{ margin-left: auto; margin-right: auto; }
.btn--rosso{ background: var(--corallo); color: #fff; font-weight: 600; }
.btn--rosso:hover{ background: #d9603f; }
.btn--sm{ padding: 11px 22px; font-size: 13px; }
.link-oro{ color: var(--oro); text-decoration: none; border-bottom: 1px solid var(--linea-oro); padding-bottom: 2px; }
.link-oro:hover{ border-color: var(--oro); }

/* ---------- STORIA ---------- */
.storia{ display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.storia__testo p{ color: var(--testo-2); font-size: clamp(16px, 1.3vw, 18px); margin: 0 0 18px; }
.storia__testo p strong{ color: var(--sand); font-weight: 500; }
.storia__cit{ font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 26px); line-height: 1.35; color: var(--oro); border-left: 2px solid var(--ocra); padding-left: 22px; margin: 28px 0; }
.storia__foto{ position: relative; }
.storia__foto img{ border-radius: 22px; box-shadow: 0 30px 80px var(--ombra-forte); width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover; }   /* dimensione nota prima del caricamento: niente scarti di layout */
.storia__foto::after{ content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--linea); border-radius: 22px; z-index: -1; }

/* ---------- MAZZO (anteprima no-spoiler) ---------- */
.mazzo{ text-align: center; }
.ventaglio{ display: flex; justify-content: center; gap: clamp(10px, 1.6vw, 22px); margin: 0 auto 26px; max-width: 1080px; perspective: 1200px; }
.carta{ flex: 1 1 0; max-width: 190px; aspect-ratio: 650 / 985; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.6); transition: transform .5s var(--ease-out), box-shadow .5s; background: var(--deep); }
.carta img{ width: 100%; height: 100%; object-fit: cover; }
.carta:hover{ transform: translateY(-14px) rotateX(4deg); box-shadow: 0 34px 70px rgba(0,0,0,.7); }
.carta--coperta{ position: relative; }
.carta--coperta::after{ content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 64px; color: var(--oro); background: var(--velo-carta); }
.ventaglio__note{ display: flex; justify-content: center; gap: clamp(10px, 1.6vw, 22px); max-width: 1080px; margin: 0 auto 36px; }
.ventaglio__note span{ flex: 1 1 0; max-width: 190px; font-family: var(--font-kicker); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--testo-2); }
.mazzo__contatore{ display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px; border: 1px solid var(--linea); border-radius: 999px; color: var(--testo-2); font-size: 14px; }
.mazzo__contatore b{ font-family: var(--font-display); font-size: 22px; color: var(--oro); font-weight: 700; }

/* ---------- COME SI GIOCA ---------- */
.fasi{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.fase{ padding: 34px 30px; border: 1px solid var(--linea); border-radius: 22px; background: linear-gradient(180deg, var(--velo-oro), transparent); }
.fase__n{ font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--oro); font-weight: 700; margin: 0 0 14px; }
.fase h3{ font-family: var(--font-display); font-size: 22px; margin: 0 0 12px; font-weight: 700; }
.fase p{ color: var(--testo-2); font-size: 15.5px; margin: 0; }
.fase__metodi{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fase__metodi span{ font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--linea-oro); border-radius: 999px; color: var(--oro); }
.scheda{ display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 72px); justify-content: center; margin-top: clamp(40px, 6vh, 64px); padding-top: 36px; border-top: 1px solid var(--linea); }
.scheda div{ text-align: center; }
.scheda b{ display: block; font-family: var(--font-display); font-size: 34px; color: var(--oro); font-weight: 700; }
.scheda span{ font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-2); }

/* ---------- PRODOTTO / SHOP ---------- */
.prodotto{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.prodotto__galleria{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prodotto__galleria img{ border-radius: 16px; aspect-ratio: 4/3; object-fit: cover; width: 100%; height: auto; }   /* height:auto: l'attributo height di WordPress non deve vincere sulla proporzione */
.prodotto__galleria img:first-child{ grid-column: 1 / -1; aspect-ratio: 16/10; }
.prezzo{ display: flex; align-items: baseline; gap: 12px; margin: 24px 0 8px; }
.prezzo b{ font-family: var(--font-display); font-size: 48px; color: var(--sand); font-weight: 700; white-space: nowrap; }
.prezzo span{ color: var(--testo-2); font-size: 14px; }
.contiene{ list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 10px; }
.contiene li{ display: flex; gap: 12px; align-items: baseline; color: var(--testo-2); font-size: 15.5px; }
.contiene li > span{ flex: 1; }
.contiene li::before{ content: "◆"; color: var(--oro); font-size: 9px; }
.prodotto__azioni{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
.nota-piccola{ font-size: 12.5px; color: var(--testo-3); margin-top: 14px; }

/* ---------- FAQ ---------- */
.faq{ max-width: 820px; margin: 0 auto; }
.faq details{ border-top: 1px solid var(--linea); }
.faq details:last-child{ border-bottom: 1px solid var(--linea); }
.faq summary{ cursor: pointer; list-style: none; padding: 22px 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{ content: "+"; color: var(--oro); font-size: 26px; font-weight: 300; transition: transform .3s; }
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq p{ color: var(--testo-2); margin: 0 0 24px; font-size: 15.5px; }

/* ---------- FOOTER ---------- */
.footer{ position: relative; z-index: 6; background: var(--abyss); border-top: 1px solid var(--linea); padding: 56px 0 32px; }
.footer__griglia{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer__brand img{ width: 210px; margin-bottom: 14px; }
.footer__brand p{ color: var(--testo-2); font-size: 14px; max-width: 34ch; margin: 0; }
.footer h4{ font-family: var(--font-kicker); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--oro); margin: 0 0 16px; }
.footer ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a{ color: var(--testo-2); text-decoration: none; font-size: 14px; }
.footer a:hover{ color: var(--sand); }
.footer__legale{ border-top: 1px solid var(--linea); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; font-size: 12px; color: var(--testo-3); }
.footer__legale p{ margin: 0; max-width: 78ch; }

/* ---------- pagine interne ---------- */
body.interna .nav{ background: var(--velo-nav); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); padding: 16px var(--gutter); }
body.interna .nav.is-hidden{ opacity: 1; pointer-events: auto; }
.testata{ position: relative; padding: clamp(150px, 22vh, 220px) 0 clamp(50px, 8vh, 80px); overflow: hidden; }
.testata::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 70% 0%, var(--velo-testata), transparent 60%); pointer-events: none; }
.testata .kicker{ margin-bottom: 14px; }
.testata h1{ font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 6.5vw, 84px); line-height: 1; letter-spacing: -.02em; margin: 0 0 18px; }
.testata .sotto{ font-size: clamp(17px, 1.5vw, 21px); }
.nav__links a.is-here{ color: var(--oro); }

/* pagina prodotto */
.prodotto--pagina{ align-items: start; }
.specifiche{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 30px 0; }
.specifiche div{ border: 1px solid var(--linea); border-radius: 16px; padding: 16px; }
.specifiche b{ display: block; font-family: var(--font-display); font-size: 26px; color: var(--oro); }
.specifiche span{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-2); }
.strisce{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.strisce img{ border-radius: 14px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* pagina regolamento */
.regolamento, .documento{ display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.indice{ position: sticky; top: 110px; border-left: 1px solid var(--linea); padding-left: 18px; display: grid; gap: 12px; }
.indice a{ color: var(--testo-2); text-decoration: none; font-size: 14px; }
.indice a:hover{ color: var(--oro); }
.regola h2, .doc h2{ font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); margin: 56px 0 14px; color: var(--sand); scroll-margin-top: 110px; }
.regola h2:first-child, .doc h2:first-child{ margin-top: 0; }
.regola h3, .doc h3{ font-family: var(--font-kicker); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--oro); margin: 28px 0 10px; }
.regola p, .regola li, .doc p, .doc li{ color: var(--testo-2); font-size: 16px; }
.regola ul, .doc ul{ padding-left: 20px; }
.regola strong, .doc strong{ color: var(--sand); font-weight: 500; }
.regola .metodo{ border: 1px solid var(--linea); border-radius: 18px; padding: 20px 22px; margin: 14px 0; }
.regola .metodo h4{ margin: 0 0 8px; font-family: var(--font-display); font-size: 19px; color: var(--oro); }
.regola .metodo p{ margin: 0; font-size: 15px; }

/* pagina chi siamo */
.fondatori{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: 40px; }
.fondatore{ border: 1px solid var(--linea); border-radius: 24px; padding: 34px; }
.fondatore__foto{ width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(135deg, var(--rosso), var(--corallo)); display: grid; place-items: center; font-family: var(--font-display); font-size: 30px; color: #fff; margin-bottom: 22px; }
.fondatore h3{ font-family: var(--font-display); font-size: 26px; margin: 0 0 4px; }
.fondatore small{ display: block; color: var(--oro); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px; }
.fondatore p{ color: var(--testo-2); font-size: 15.5px; margin: 0 0 12px; }
.valori{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 40px; }
.valori div{ border-top: 2px solid var(--ocra); padding-top: 16px; }
.valori b{ display: block; font-family: var(--font-display); font-size: 20px; margin-bottom: 6px; }
.valori span{ color: var(--testo-2); font-size: 14.5px; }
.pilastri{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.pilastri:has(> .fase:nth-child(4):last-child){ grid-template-columns: repeat(4, 1fr); }   /* quattro pilastri su una riga */

/* pagina contatti */
.contatti{ display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.recapiti{ display: grid; gap: 26px; }
.recapiti h4{ font-family: var(--font-kicker); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--oro); margin: 0 0 8px; }
.recapiti p, .recapiti a{ color: var(--testo-2); margin: 0; font-size: 16px; text-decoration: none; }
.recapiti a:hover{ color: var(--sand); }
.social{ display: flex; gap: 12px; }
.social a{ width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 50%; display: grid; place-items: center; color: var(--sand); }
.social a:hover{ border-color: var(--oro); color: var(--oro); }
.social svg{ width: 18px; height: 18px; fill: currentColor; }
.form{ display: grid; gap: 16px; }
.form label{ display: grid; gap: 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--testo-2); }
.form input, .form textarea, .form select{ background: var(--campo); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; color: var(--sand); font: 400 15px var(--font-body); }
.form input:focus, .form textarea:focus, .form select:focus{ outline: none; border-color: var(--oro); }
.form textarea{ min-height: 150px; resize: vertical; }
.form__riga{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__ok{ display: none; padding: 18px 22px; border: 1px solid var(--oro); border-radius: 18px; color: var(--oro); }
.form.is-sent .form__ok{ display: block; }
.form.is-sent > :not(.form__ok){ display: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .storia, .prodotto, .contatti, .fondatori, .regolamento, .documento{ grid-template-columns: 1fr; }   /* .documento: le pagine legali e il widget del regolamento */
  .fasi, .pilastri, .pilastri:has(> .fase:nth-child(4):last-child){ grid-template-columns: 1fr; }
  .footer__griglia{ grid-template-columns: 1fr 1fr; }
  .indice{ position: static; border-left: 0; padding-left: 0; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--linea); padding-bottom: 20px; }
  .ventaglio{ flex-wrap: wrap; }
  .carta{ flex: 0 0 calc(33.333% - 12px); max-width: none; }
  .ventaglio__note{ display: none; }
  .form__riga{ grid-template-columns: 1fr; }
  .storia__foto::after{ display: none; }
}
@media (max-width: 560px){
  .footer__griglia{ grid-template-columns: 1fr; gap: 28px; }
  .carta{ flex: 0 0 calc(50% - 8px); }
  .strisce{ grid-template-columns: 1fr; }
}

/* =========================================================
   PARTE 3 — animazioni
   ========================================================= */

/* reveal allo scroll */
.motion [data-reveal]{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.motion [data-reveal].is-in{ opacity: 1; transform: none; }
.motion [data-reveal-child]{ opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.motion [data-reveal-child].is-in{ opacity: 1; transform: none; }
.motion [data-reveal="sinistra"]{ transform: translateX(-24px); }
.motion [data-reveal="destra"]{ transform: translateX(24px); }
/* i blocchi ritagliano di lato cio' che aspetta il reveal; NON il blocco con lo sticky dell'acquisto */
.blocco:not(.blocco--sticky){ overflow-x: clip; }
.motion [data-reveal="zoom"]{ transform: scale(.94); }

/* mazzo: ventaglio, fluttuazione, tilt, carta che si gira */
.mazzo{ position: relative; overflow: hidden; }
.mazzo > .wrap{ position: relative; z-index: 2; }
.mazzo__cielo{ position: absolute; inset: -10% 0; z-index: 1; pointer-events: none; }
.mazzo__cielo img{ position: absolute; width: 150px; aspect-ratio: 650/985; border-radius: 8px; transform: translateY(var(--py, 0)) rotate(var(--r)) scale(var(--s)); filter: blur(calc((1 - var(--s)) * 3px)); will-change: transform; }
.mazzo::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 50% at 50% 55%, transparent 30%, var(--abyss) 100%); }

.motion .ventaglio .carta{
  --tx: 0deg; --ty: 0deg; --gx: 50%; --gy: 50%;
  opacity: 0; transform: translateY(80px) rotate(var(--rot, 0deg)) scale(.9);
  transition: opacity .8s var(--ease-out), transform 1s var(--ease-out);
  transform-style: preserve-3d;
}
.motion .ventaglio.is-in .carta{ opacity: 1; transform: none; animation: fluttua var(--dur, 6s) ease-in-out var(--fase, 0s) infinite; }
.motion .ventaglio.is-in .carta:nth-child(1){ transition-delay: 0s }
.motion .ventaglio.is-in .carta:nth-child(2){ transition-delay: .08s }
.motion .ventaglio.is-in .carta:nth-child(3){ transition-delay: .16s }
.motion .ventaglio.is-in .carta:nth-child(4){ transition-delay: .24s }
.motion .ventaglio.is-in .carta:nth-child(5){ transition-delay: .32s }
.motion .ventaglio.is-in .carta:nth-child(6){ transition-delay: .40s }
@keyframes fluttua{
  0%, 100%{ transform: translateY(0) rotate(0deg) rotateY(var(--tx)) rotateX(var(--ty)); }
  50%     { transform: translateY(-14px) rotate(-1.2deg) rotateY(var(--tx)) rotateX(var(--ty)); }
}
.motion .ventaglio.is-in .carta:hover{ animation-play-state: paused; transform: translateY(-18px) scale(1.06) rotateY(var(--tx)) rotateX(var(--ty)); z-index: 3; }
.carta{ position: relative; }
.carta::before{ /* riflesso che segue il mouse */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.28), transparent 55%);
  transition: opacity .35s;
}
.carta:hover::before{ opacity: 1; }

/* la carta coperta si gira: davanti il dorso col "?", dietro un "presto" */
.carta--coperta{ background: transparent; box-shadow: none; overflow: visible; }
.carta--coperta::after{ display: none; }
.carta__fronte, .carta__retro{ position: absolute; inset: 0; border-radius: 10px; overflow: hidden; backface-visibility: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.carta__fronte img{ width: 100%; height: 100%; object-fit: cover; }
.carta__fronte::after{ content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 64px; color: var(--oro); background: var(--velo-carta); }
.carta__retro{ transform: rotateY(180deg); background: linear-gradient(160deg, var(--rosso), #4a1014); display: grid; place-items: center; text-align: center; padding: 18px; }
.carta__retro b{ font-family: var(--font-display); font-size: 34px; color: var(--oro); display: block; line-height: 1; }
.carta__retro span{ font-family: var(--font-kicker); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--testo-2); display: block; margin-top: 10px; }
.carta--coperta .carta__pivot{ position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s var(--ease-out); }
.carta--coperta:hover .carta__pivot{ transform: rotateY(180deg); }

/* contatore */
[data-conta]{ font-variant-numeric: tabular-nums; }

/* ---------- PRODOTTO (pagina) — layout e-commerce ---------- */
.shop{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
/* la cornice prende la proporzione delle foto (--galleria-ratio, dal tema o da pagina.js):
   una foto quadrata resta intera, niente tagli. Le miniature seguono la stessa proporzione. */
.galleria__main{ position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: var(--galleria-ratio, 4/3); background: var(--abyss); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* le foto scorrono davvero: una pista che trasla (pagina.js la costruisce e la muove, anche sotto il dito) */
.galleria__pista{ display: flex; height: 100%; will-change: transform; transition: transform .55s var(--ease-out); }
.galleria__pista img{ flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
/* senza JavaScript le foto restano sovrapposte e si vede la prima */
.galleria__main > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.galleria__main > img.is-on{ opacity: 1; }
@media (prefers-reduced-motion: reduce){ .galleria__pista{ transition: none; } }
.galleria__freccia{ position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: #fff; color: #14202c; box-shadow: 0 6px 20px rgba(0,0,0,.18); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .25s, transform .25s var(--ease-out), background-color .25s; }
.galleria__freccia svg{ width: 18px; height: 18px; display: block; }
.galleria__freccia--prev{ left: 14px; } .galleria__freccia--next{ right: 14px; }
.galleria__main:hover .galleria__freccia, .galleria__freccia:focus-visible{ opacity: 1; }
.galleria__freccia:hover{ background: var(--gold); transform: scale(1.06); }
@media (hover: none){ .galleria__freccia{ display: none; } }     /* col dito si scorre: le frecce non servono */
.galleria__thumbs{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 10px; }
.galleria__thumbs button{ padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: none; cursor: pointer; aspect-ratio: var(--galleria-ratio, 4/3); opacity: .6; transition: opacity .25s, border-color .25s; }
.galleria__thumbs button img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.galleria__thumbs button.is-on, .galleria__thumbs button:hover{ opacity: 1; border-color: var(--oro); }
.acquisto{ position: sticky; top: 100px; border: 1px solid var(--linea); border-radius: 26px; padding: 30px; background: linear-gradient(180deg, var(--velo-oro), transparent); }
.acquisto h1{ font-family: var(--font-display); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; margin: 0 0 6px; }
.acquisto .ediz{ font-family: var(--font-kicker); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--oro); margin: 0 0 18px; }
.acquisto .prezzo{ margin: 10px 0 4px; }
.acquisto .prezzo b{ font-size: 40px; }
.stelle{ display: flex; align-items: center; gap: 8px; color: var(--oro); font-size: 14px; margin-bottom: 14px; }
.stelle span{ color: var(--testo-2); font-size: 13px; }
.dispo{ display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--testo-2); margin: 6px 0 20px; }
.dispo::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 4px var(--velo-oro); }
.qta{ display: flex; align-items: center; gap: 0; border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; width: max-content; margin-bottom: 14px; }
.qta button{ width: 42px; height: 44px; background: none; border: 0; color: var(--sand); font-size: 20px; cursor: pointer; }
.qta input{ width: 48px; height: 44px; background: none; border: 0; border-left: 1px solid var(--linea); border-right: 1px solid var(--linea); color: var(--sand); text-align: center; font: 500 16px var(--font-body); }
.acquisto .btn{ width: 100%; text-align: center; }
.acquisto .btn + .btn{ margin-top: 10px; }
.garanzie{ list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; border-top: 1px solid var(--linea); padding-top: 18px; }
.garanzie li{ display: flex; gap: 12px; align-items: center; font-size: 13.5px; color: var(--testo-2); }
.garanzie svg{ width: 18px; height: 18px; flex: none; stroke: var(--oro); fill: none; stroke-width: 1.6; }
.tabs{ margin-top: clamp(50px, 8vh, 90px); border-top: 1px solid var(--linea); }
.tabs__nav{ display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--linea); }
.tabs__nav button{ background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 18px 22px; border-radius: 999px 999px 0 0; color: var(--testo-2); font: 500 14px var(--font-body); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.tabs__nav button.is-on{ color: var(--oro); border-color: var(--oro); }
.tabs__pane{ display: none; padding: 40px 0 10px; }
.tabs__pane.is-on{ display: block; }
.tabs__pane h3{ font-family: var(--font-display); font-size: 24px; margin: 0 0 12px; }
.tabs__pane p + h3, .tabs__pane ul + h3{ margin-top: 28px; }
.tabs__pane p{ color: var(--testo-2); font-size: 16px; max-width: 72ch; }
.tabs__pane p strong{ color: var(--sand); font-weight: 500; }
.duecol{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.contiene--grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
.contiene--grid li{ border: 1px solid var(--linea); border-radius: 16px; padding: 16px 18px; align-items: start; }
.contiene--grid li b{ color: var(--sand); font-weight: 500; display: block; margin-bottom: 4px; }
.tabella{ width: 100%; border-collapse: collapse; font-size: 15px; }
.tabella td{ padding: 12px 0; border-bottom: 1px solid var(--linea); color: var(--testo-2); }
.tabella td:first-child{ color: var(--sand); width: 40%; }
.mini-carte{ display: flex; gap: 10px; margin-top: 18px; }
.mini-carte img{ width: 18%; border-radius: 6px; box-shadow: 0 10px 30px var(--ombra-media); transition: transform .4s var(--ease-out); }
.mini-carte img:hover{ transform: translateY(-8px) rotate(-2deg); }
@media (max-width: 900px){
  .shop{ grid-template-columns: 1fr; }
  .acquisto{ position: static; }
  .duecol{ grid-template-columns: 1fr; }
  .contiene--grid{ grid-template-columns: 1fr; }
}


/* ---------- IL MAZZO: volo attraverso le carte ---------- */
.volo{ position: relative; z-index: 6; height: 320vh; background: var(--abyss); }
.volo__palco{ position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--abyss); }
.volo__tinta{ position: absolute; inset: 0; background: var(--abyss); transition: background-color 1.1s ease; }
.volo__tinta::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, transparent 20%, var(--abyss) 100%); }
.volo__scena{ position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 50%; contain: layout style; }   /* stacking piatto: ordine per z-index, niente tagli fra piani */
.volo__carta{ position: absolute; left: 50%; top: 50%; width: 190px; aspect-ratio: 650/985; margin: 0; border-radius: 10px; overflow: visible; will-change: transform, opacity; }
.volo__carta img{ width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 16px 36px rgba(0,0,0,.55); display: block; }   /* ombra piu' contenuta: livelli GPU piu' piccoli */
.volo__carta figcaption{ position: absolute; left: 50%; top: 100%; transform: translate(-50%, 14px); white-space: nowrap; font-family: var(--font-kicker); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.volo__testa{ position: absolute; left: 0; right: 0; top: 10vh; text-align: center; padding: 0 var(--gutter); z-index: 3; pointer-events: none; text-shadow: 0 4px 30px rgba(4,13,22,.9); }
.volo__testa .sotto{ margin: 0 auto; }
.volo__coda{ position: absolute; left: 0; right: 0; bottom: 8vh; text-align: center; z-index: 3; opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s var(--ease-out); }
.volo__coda.is-in{ opacity: 1; transform: none; }
.volo__palco::after{ content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--abyss) 0%, transparent 22%, transparent 78%, var(--abyss) 100%); }
@media (max-width: 700px){ .volo__carta{ width: 130px; } .volo__testa{ top: 9vh; } .volo__carta figcaption{ white-space: normal; width: 150px; text-align: center; line-height: 1.5; } }
.no-motion .volo{ height: auto; } .no-motion .volo__palco{ position: static; height: auto; padding: 80px 0; } .no-motion .volo__scena{ display: none; }

/* ---------- loghi ---------- */
.nav__brand img{ height: 40px; width: auto; display: block; }
.hero__badge{ width: clamp(64px, 6.7vw, 140px); height: auto; margin: 0 auto 18px; display: block; filter: drop-shadow(0 6px 24px rgba(0,0,0,.5)); }
.acquisto__badge{ width: 54px; height: 54px; margin-bottom: 14px; }
.testata__badge{ width: 72px; height: 72px; margin-bottom: 18px; }

/* =========================================================
   PARTE 4 — revisione dopo il feedback del cliente (17/09)
   ========================================================= */
.btn--lg{ padding: 18px 44px; font-size: 15.5px; box-shadow: 0 14px 40px rgba(217,164,65,.28); }

/* value proposition */
.vp{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 34px); }
.vp__voce{ border: 1px solid var(--linea); border-radius: 24px; padding: 34px 30px; background: linear-gradient(180deg, var(--velo-oro), transparent); }
.vp__n{ font-family: var(--font-kicker); font-size: 12px; letter-spacing: .3em; color: var(--oro); }
.vp__voce h3{ font-family: var(--font-display); font-size: 24px; line-height: 1.15; margin: 14px 0 12px; }
.vp__voce p{ color: var(--testo-2); font-size: 15.5px; margin: 0; }

/* experience */
.momenti{ list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 22px; }
.momenti li{ border-left: 2px solid var(--ocra); padding-left: 20px; }
.momenti b{ display: block; font-family: var(--font-display); font-size: 20px; margin-bottom: 4px; }
.momenti span{ color: var(--testo-2); font-size: 15.5px; }

/* storia breve, senza foto */
.storia__solo{ max-width: 760px; margin: 0 auto; }
.storia__solo p{ color: var(--testo-2); font-size: clamp(16px, 1.3vw, 18px); margin: 0 0 18px; }
.storia__solo p strong{ color: var(--sand); font-weight: 500; }

/* cta finale */
.finale{ text-align: center; background: radial-gradient(70% 90% at 50% 100%, var(--velo-testata), transparent 65%), var(--abyss); }
.finale .sotto{ margin: 0 auto; }
.finale__badge{ width: 84px; height: 84px; margin: 0 auto 22px; display: block; }

.footer__claim{ margin-top: 12px !important; color: var(--oro) !important; font-family: var(--font-display); font-size: 16px !important; }

/* work in progress */
.wip{ min-height: 70vh; display: grid; align-items: center; }

/* tab del prodotto: pillole che vanno a capo, nessuna barra di scorrimento */
.tabs__nav{ flex-wrap: wrap; gap: 10px; overflow: visible; border-bottom: 0; padding: 26px 0 4px; }
.tabs__nav button{ border: 1px solid var(--linea); border-radius: 999px; margin: 0; padding: 11px 20px; font-size: 13px; }
.tabs__nav button.is-on{ background: var(--oro); border-color: var(--oro); color: var(--su-oro); }
.tabs__pane{ padding-top: 30px; }

/* carte ingrandibili */
.mini-carte img{ cursor: zoom-in; }
.lightbox{ position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--velo-lightbox); padding: 24px; opacity: 0; pointer-events: none; transition: opacity .3s ease; cursor: zoom-out; }
.lightbox.is-on{ opacity: 1; pointer-events: auto; }
.lightbox img{ max-height: 88vh; max-width: min(92vw, 520px); border-radius: 18px; box-shadow: 0 40px 120px rgba(0,0,0,.7); transform: scale(.94); transition: transform .35s var(--ease-out); }
.lightbox.is-on img{ transform: none; }
.lightbox__chiudi{ position: absolute; top: 22px; right: 22px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linea); background: none; color: var(--sand); font-size: 22px; cursor: pointer; }

/* il testo d'apertura del mazzo resta leggibile: alone scuro dietro */
.volo__testa::before{ content: ""; position: absolute; inset: -40px -10% -60px; z-index: -1; background: radial-gradient(60% 70% at 50% 45%, rgba(4,13,22,.82), transparent 75%); pointer-events: none; }

/* ---------- menu mobile ---------- */
.nav__toggle{ display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--bordo-ghost); background: var(--velo-toggle); padding: 0; cursor: pointer; position: relative; z-index: 3; }
.nav__toggle span{ position: absolute; left: 28%; right: 28%; height: 2px; background: var(--sand); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .2s; }
.nav__toggle span:nth-child(1){ top: calc(50% - 7px); } .nav__toggle span:nth-child(2){ top: calc(50% - 1px); } .nav__toggle span:nth-child(3){ top: calc(50% + 5px); }
.nav.is-open .nav__toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 820px){
  .nav{ gap: 10px; }
  .nav__toggle{ display: block; order: 3; }
  .nav__cta{ order: 2; margin-left: auto; position: relative; z-index: 3; padding: 10px 18px; font-size: 12.5px; }
  /* bottone e cerchi a misura fissa: e' il logo a prendere lo spazio che resta, senza schiacciare nessuno */
  .nav__cta, .nav__toggle, .nav__carrello{ flex-shrink: 0; }
  .nav__toggle, .nav__carrello{ width: 42px; height: 42px; }
  .nav__brand{ position: relative; z-index: 3; flex: 1 1 0; min-width: 0; }
  .nav__brand img{ height: 34px; max-width: 100%; object-fit: contain; object-position: left center; }
  body.interna .nav{ backdrop-filter: none; background: var(--velo-pannello); }   /* il blur farebbe da contenitore al pannello fisso */
  .nav__links{
    display: flex; position: fixed; inset: 0; z-index: 2; margin: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: 30px;
    background: var(--velo-pannello);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
  }
  .nav__links a{ font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: 0; text-shadow: none; }
  .nav.is-open .nav__links{ opacity: 1; visibility: visible; }
  .nav.is-open{ opacity: 1 !important; pointer-events: auto !important; }
  html.menu-open{ overflow: hidden; }

  .vp{ grid-template-columns: 1fr; }
}
/* su telefono la prima sezione sale sopra la coda scura dell'hero: meno nero fra radici e contenuto */
@media (max-width: 700px){
  .blocco{ padding: 64px 0; }
  #perche{ margin-top: -16vh; padding-top: 56px; border-radius: 28px 28px 0 0; }
  .acquisto{ padding: 24px; }
  .tabella td:first-child{ width: 46%; }
}

/* prodotto su telefono: galleria -> acquisto -> descrizione. La colonna sinistra
   contiene galleria e tab: la "apro" e riordino i pezzi. */
@media (max-width: 900px){
  .shop{ display: flex; flex-direction: column; gap: 22px; }
  .shop > div:first-child{ display: contents; }
  .galleria__main{ order: 1; flex: 0 0 auto; width: 100%; } .galleria__thumbs{ order: 2; margin-top: -12px; }
  .acquisto{ order: 3; } .tabs{ order: 4; margin-top: 10px; }
}

/* =========================================================
   PARTE 5 — ritratti dei fondatori, versione demo (fiera)
   ========================================================= */
.fondatore{ overflow: hidden; }
/* col genitore davanti: dentro Elementor ".elementor img{max-width:100%}" vincerebbe e il ritratto non riempirebbe la scheda */
.fondatore .fondatore__ritratto{ display: block; width: calc(100% + 68px); max-width: none; margin: -34px -34px 26px; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 50% 18%; }
@keyframes pulsa{ 0%{ box-shadow: 0 0 0 0 rgba(236,209,108,.55); } 100%{ box-shadow: 0 0 0 14px rgba(236,209,108,0); } }
.social--centro{ justify-content: center; margin-top: 30px; }
.social--centro a{ width: 52px; height: 52px; }
.social--centro svg{ width: 20px; height: 20px; }
.nav--solo{ justify-content: flex-start; }
@media (prefers-reduced-motion: reduce){ .volo__tinta{ transition: none; } }
/* footer a tre colonne (versione demo): niente vuoto a destra */
.footer__griglia:has(> div:nth-child(3):last-child){ grid-template-columns: 1.7fr 1fr 1fr; }
@media (max-width: 900px){ .footer__griglia:has(> div:nth-child(3):last-child){ grid-template-columns: 1fr 1fr; } .footer__griglia:has(> div:nth-child(3):last-child) .footer__brand{ grid-column: 1 / -1; } }

/* revisione del 19/09 */
@media (orientation: portrait){ .a-capo-portrait{ display: block; } }
/* in testa al footer sta il logotipo aziendale Tradicity(TM), non la scritta del gioco */
.footer__brand img.footer__logo{ width: 230px; height: auto; margin-bottom: 18px; }


/* ---------- pagine legali (privacy, cookie, termini, recesso) ---------- */
.testata--doc{ padding-bottom: clamp(30px, 5vh, 50px); }
.testata--doc h1{ font-size: clamp(32px, 4.6vw, 60px); }
.doc__data{ margin: 22px 0 0; font-size: 13px; color: var(--testo-3); }
.doc h2{ font-size: clamp(22px, 2.4vw, 30px); }
.doc p, .doc li{ line-height: 1.75; }
.doc a{ overflow-wrap: anywhere; }                     /* gli indirizzi lunghi non sfondano la colonna */
.doc .tabella{ margin: 18px 0 8px; }
.doc .tabella td{ vertical-align: top; line-height: 1.6; }
.doc .tabella td:first-child{ width: 48%; padding-right: 26px; }
.modulo-recesso{ border: 1px solid var(--linea); border-radius: 20px; padding: 28px 30px; margin: 20px 0 8px; background: rgba(236,209,108,.04); }
.modulo-recesso p{ margin: 0 0 14px; }
.modulo-recesso .riga{ border-bottom: 1px solid var(--linea-forte); height: 46px; }
.modulo-recesso .riga-inline{ display: inline-block; min-width: 190px; border-bottom: 1px solid var(--linea-forte); }
.modulo-recesso .nota{ margin: 18px 0 0; font-size: 13px; color: var(--testo-3); }
@media (max-width: 900px){ .doc .tabella td:first-child{ width: 42%; padding-right: 16px; } }
/* =========================================================
   TEMA CHIARO — tutte le pagine tranne la home
   Si accende con class="chiaro" sull'<html>. Non tocca nessuna regola:
   ridefinisce soltanto i colori, che il resto del foglio usa gia' per nome.
   La home resta scura perche' vive sopra il video; le pagine interne sono
   testo da leggere.

   Bianco, e i due colori dei dorsi delle carte: il rosso (#e84a3c sul
   campo, #8a1a28 nell'ornato) e il giallo (#f6d55a, ornato #b87818).
   Il giallo su bianco non si legge (1,5:1), quindi non e' mai una
   scritta: e' il pieno dei bottoni, con il testo scuro sopra (11:1). Il
   rosso e' l'accento delle scritte, appena scurito a #d9382c perche'
   quello del campo si ferma a 3,8:1 e per un testo piccolo servono 4,5.
   Niente tinte calde sui fondi: le superfici sono grigio neutro.
   ========================================================= */
html.chiaro{
  --abyss:  #ffffff;
  --deep:   #f4f4f2;   /* superfici appena staccate dal fondo, neutre */
  --sand:   #14202c;   /* il testo forte: il blu profondo del marchio */
  --oro:    #d9382c;   /* accento delle scritte: il rosso delle carte, 4,6:1 */
  --gold:   #f6d55a;   /* pieno dei bottoni: il giallo delle carte */
  --gold-2: #eec437;   /* lo stesso giallo, per l'hover */
  --rosso:  #b8261f;
  --corallo: #d9382c;
  --ocra:   #f2cc45;   /* i filetti decorativi (citazione, valori, momenti) */
  --testo-2: rgba(20,32,44,.82);
  --testo-3: rgba(20,32,44,.66);   /* 5,3:1: le note restano leggibili */
  --linea:   rgba(20,32,44,.14);
  --linea-oro: rgba(217,56,44,.4);
  --velo-oro:  rgba(20,32,44,.03); /* le schede: un velo neutro, non crema */
  --velo-nav:  rgba(255,255,255,.9);
  --velo-pannello: rgba(255,255,255,.98);
  --velo-toggle: rgba(255,255,255,.6);
  --velo-carta: rgba(20,32,44,.55);
  --velo-testata: rgba(232,74,60,.09);
  --velo-lightbox: rgba(20,32,44,.9);
  --campo: #ffffff;
  --ombra-forte: rgba(20,32,44,.18);
  --ombra-media: rgba(20,32,44,.12);
  --su-oro: #14202c;              /* sul giallo ci va lo scuro */
  --bordo-ghost: rgba(20,32,44,.3);
  --linea-forte: rgba(20,32,44,.4);
}
html.chiaro body{ background: var(--abyss); color: var(--sand); }

/* i kicker sono scritti col --gold, che qui e' giallo: per le scritte c'e' il rosso */
html.chiaro .kicker{ color: var(--oro); }
html.chiaro :focus-visible{ outline-color: var(--oro); }
/* la linguetta attiva delle schede prodotto: gialla come i bottoni, non rossa col testo scuro */
html.chiaro .tabs__nav button.is-on{ background: var(--gold); border-color: var(--gold); }
/* nessun bagliore da schiarire: sotto c'e' bianco, non il video */
html.chiaro .nav__brand, html.chiaro .nav__links a{ text-shadow: none; }
html.chiaro .nav__links a:hover{ color: var(--oro); }
/* le ombre profonde delle carte, su bianco, diventano un alone sporco */
html.chiaro .carta, html.chiaro .carta__fronte, html.chiaro .carta__retro{ box-shadow: 0 14px 34px var(--ombra-forte); }
html.chiaro .carta:hover{ box-shadow: 0 26px 52px var(--ombra-forte); }
html.chiaro .btn--lg{ box-shadow: 0 12px 30px rgba(246,213,90,.5); }
/* la grana serve a sposare video e illustrazioni: qui non c'e' video */
html.chiaro .grain{ display: none; }

/* ---------- conto alla rovescia dei preordini (pagina prodotto) ---------- */
.conto{ margin: 6px 0 22px; padding: 18px 18px 14px; border: 1px solid var(--linea); border-radius: 20px; background: var(--campo); }
.conto__testa{ display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--font-kicker); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--oro); }
.conto__testa span{ width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(246,213,90,.7); animation: pulsa 2.2s ease-out infinite; }
.conto__cifre{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.conto__cifre div{ text-align: center; padding: 12px 4px 10px; border-radius: 14px; background: var(--abyss); border: 1px solid var(--linea); }
.conto__cifre b{ display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; color: var(--sand); font-variant-numeric: tabular-nums; transition: transform .25s var(--ease-out); }
.conto__cifre b.is-tick{ transform: scale(1.12); }
.conto__cifre span{ display: block; margin-top: 6px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--testo-3); }
.conto__data{ margin: 14px 0 0; font-size: 13px; color: var(--testo-2); }
.conto--aperto{ display: none; }
/* la riga "preordini aperti" ha display proprio, che vince sull'attributo hidden: va detto esplicitamente */
.dispo[hidden]{ display: none; }
@media (prefers-reduced-motion: reduce){ .conto__testa span{ animation: none; } .conto__cifre b{ transition: none; } }

/* ---------- sicurezza e conformita' (pagina prodotto) ---------- */
.conformita{ display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linea); }
.conformita svg{ flex: none; height: 38px; width: auto; }
.conformita__ce{ color: var(--sand); }
.conformita__eta{ color: var(--corallo); }
.conformita p{ margin: 0; font-size: 12px; line-height: 1.5; color: var(--testo-3); }
.conformita p strong{ color: var(--sand); font-weight: 600; }

/* ---------- recensioni (home e prodotto) ---------- */
.recensioni{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.recensione{ display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 28px 26px; border: 1px solid var(--linea); border-radius: 22px; background: linear-gradient(180deg, var(--velo-oro), transparent); }
.recensione__stelle{ margin: 0; color: var(--oro); font-size: 15px; letter-spacing: .14em; }
.recensione__vuota{ color: var(--linea-forte); }
.recensione__testo{ flex: 1; margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; color: var(--sand); }
.recensione__chi{ display: flex; align-items: center; gap: 12px; }
.recensione__iniziali{ flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--su-oro); display: grid; place-items: center; font: 600 13px var(--font-body); letter-spacing: .04em; }
.recensione__chi b{ display: block; font-weight: 600; font-size: 14px; color: var(--sand); }
.recensione__chi span{ font-size: 12.5px; color: var(--testo-3); }
.recensioni--lista{ grid-template-columns: 1fr; }
.recensioni--lista .recensione{ flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
.recensioni--lista .recensione__stelle{ flex: 0 0 100%; }
.recensioni--lista .recensione__chi{ flex: 0 0 100%; }
.stelle{ text-decoration: none; }
/* il riepilogo della pagina prodotto */
.rec{ display: grid; grid-template-columns: 280px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.rec__riepilogo{ position: sticky; top: 100px; padding: 28px 26px; border: 1px solid var(--linea); border-radius: 22px; }
.rec__media{ display: block; font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 1; color: var(--sand); }
.rec__riepilogo .recensione__stelle{ margin-top: 8px; }
.rec__n{ margin: 4px 0 18px; font-size: 13.5px; color: var(--testo-2); }
.rec__barre{ list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
.rec__barre li{ display: grid; grid-template-columns: 14px 1fr 24px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--testo-3); }
.rec__barre small{ font-size: 12.5px; text-align: right; }
.rec__barre i{ display: block; height: 8px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.rec__barre i::after{ content: ""; display: block; height: 100%; width: var(--q, 0%); background: var(--gold); border-radius: 999px; }
.rec__riepilogo .btn{ width: 100%; text-align: center; }
/* l'etichetta che dichiara gli esempi: sparisce quando arrivano le recensioni vere */
.esempio{ display: inline-flex; align-items: center; margin: 0; padding: 7px 14px; border: 1px dashed var(--linea-oro); border-radius: 999px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-3); }
@media (max-width: 900px){
  .recensioni{ grid-template-columns: 1fr; }
  .rec{ grid-template-columns: 1fr; }
  .rec__riepilogo{ position: static; }
}

/* ---------- il modulo dei contatti quando lo fa un plugin (Contact Form 7, Fluent Forms) ---------- */
.form--plugin p, .form--plugin .wpcf7-form-control-wrap, .form--plugin .ff-el-group{ margin: 0; }
.form--plugin label{ display: grid; gap: 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--testo-2); }
.form--plugin input:not([type="submit"]):not([type="checkbox"]), .form--plugin textarea, .form--plugin select{ width: 100%; background: var(--campo); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; color: var(--sand); font: 400 15px var(--font-body); }
.form--plugin input[type="submit"], .form--plugin button[type="submit"]{ display: inline-block; padding: 15px 34px; border: 0; border-radius: 999px; background: var(--gold); color: var(--su-oro); font: 600 14px var(--font-body); letter-spacing: .06em; cursor: pointer; }
.form--plugin .wpcf7-response-output, .form--plugin .ff-message-success{ margin: 16px 0 0; padding: 18px 22px; border: 1px solid var(--oro); border-radius: 18px; color: var(--oro); }
.form--plugin .wpcf7-spinner{ display: none; }

/* ---------- WooCommerce: avvisi, carrello e checkout (i blocchi di Woo) vestiti col sito ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error{ margin: 0 0 14px; padding: 14px 18px; border: 1px solid var(--linea-oro); border-radius: 16px; font-size: 14px; color: var(--sand); list-style: none; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a{ color: var(--oro); }
.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button{ background: var(--gold) !important; color: var(--su-oro) !important; border-radius: 999px !important; font: 600 14px var(--font-body) !important; letter-spacing: .06em; }
.wc-block-components-button:not(.is-link):hover{ background: var(--gold-2) !important; }
.wc-block-components-text-input input, .wc-block-components-select .components-custom-select-control__button, .wc-block-components-totals-coupon__input input{ border-radius: 16px !important; border-color: var(--linea) !important; }
.wc-block-components-title, .wc-block-components-checkout-step__title, .wc-block-components-order-summary__title, .wc-block-components-totals-item__label, .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{ font-family: var(--font-display); }
.wc-block-components-order-summary-item__quantity{ background: var(--oro) !important; border-color: var(--oro) !important; color: #fff !important; }

/* Nell'anteprima dell'editor di Elementor i blocchi devono vedersi subito:
   il reveal allo scroll non scatta li' dentro e lasciava i widget bianchi. */
.elementor-editor-active [data-reveal], .elementor-editor-active [data-reveal-child],
.elementor-editor-active .motion [data-reveal], .elementor-editor-active .motion [data-reveal-child]{ opacity: 1 !important; transform: none !important; }

/* ========================================================
   NEGOZIO (WordPress): icona del carrello, carrello, checkout
   ======================================================== */

/* l'icona nell'header, con il contatore */
.nav__carrello{ position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bordo-ghost); display: grid; place-items: center; color: var(--sand); text-decoration: none; margin-left: 4px; transition: border-color .25s, color .25s; }
.nav__carrello:hover{ border-color: var(--gold); color: var(--gold-2); }
.nav__carrello svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.nav__carrello-n{ position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--su-oro); font: 600 11px/19px var(--font-body); text-align: center; }
.nav__carrello-n[data-n="0"]{ display: none; }
/* sul telefono l'header riordina con order: il tasto Acquista e' 2 e il menu 3, l'icona sta fra i due */
@media (max-width: 820px){ .nav__carrello{ order: 2; margin-left: 0; width: 42px; height: 42px; z-index: 3; } }   /* sopra il pannello del menu, come logo e Acquista */
/* telefoni in verticale (375-414px): tutto un filo piu' compatto, cosi' il logo resta intero */
@media (max-width: 414px){
  .nav{ gap: 8px; }
  .nav__brand img{ height: 30px; }
  .nav__cta{ padding: 9px 14px; }
  .nav__toggle, .nav__carrello{ width: 40px; height: 40px; }
}

/* la testata delle pagine del negozio e' piu' corta */
/* carrello, checkout, negozio: una testata leggera, il titolo e basta */
.testata--negozio{ padding-top: clamp(104px, 13vh, 130px); padding-bottom: clamp(16px, 3vh, 26px); }
.testata--negozio::before{ display: none; }
.testata--negozio h1{ font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.01em; margin: 0; }
/* il negozio: griglia di schede */
.negozio__griglia{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(18px, 2.6vw, 32px); }
.scheda-prodotto{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-decoration: none; color: var(--sand); }
.scheda-prodotto__foto{ width: 100%; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: var(--deep); margin-bottom: 8px; }
.scheda-prodotto__foto img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.scheda-prodotto:hover .scheda-prodotto__foto img{ transform: scale(1.04); }
.scheda-prodotto__nome{ font-family: var(--font-display); font-size: 22px; line-height: 1.15; margin: 0; }
.scheda-prodotto__nome em{ display: block; font-style: normal; color: var(--oro); }
.scheda-prodotto__prezzo{ margin: 0 0 6px; font-size: 15px; color: var(--testo-2); }
.scheda-prodotto__prezzo del{ color: var(--testo-3); margin-right: 6px; }
.negozio .woocommerce-pagination{ margin-top: 36px; }
.negozio .woocommerce-pagination ul{ list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; justify-content: center; }
.negozio .woocommerce-pagination a, .negozio .woocommerce-pagination span{ display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linea); color: var(--sand); text-decoration: none; font-size: 14px; }
.negozio .woocommerce-pagination .current{ background: var(--gold); border-color: var(--gold); color: var(--su-oro); }
@media (max-width: 600px){ .negozio__griglia{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .scheda-prodotto__nome{ font-size: 18px; } .scheda-prodotto .btn{ width: 100%; text-align: center; white-space: nowrap; padding: 10px 10px; font-size: 12px; } }

/* ---------- carrello ---------- */
.woocommerce-cart .negozio .woocommerce{ display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.woocommerce-checkout .negozio .woocommerce{ display: block; }
.negozio .woocommerce-notices-wrapper{ grid-column: 1 / -1; }
.negozio .woocommerce-notices-wrapper:empty{ display: none; }
.carrello__lista{ border-top: 1px solid var(--linea); }
.carrello__voce{ display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto 28px; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.carrello__foto img{ width: 96px; height: 96px; object-fit: cover; border-radius: 14px; background: var(--deep); }
.carrello__info h3{ font-family: var(--font-display); font-size: 20px; margin: 0 0 4px; }
.carrello__info h3 a{ color: var(--sand); text-decoration: none; }
.carrello__nota{ margin: 0; font-size: 12.5px; color: var(--oro); }
.carrello__prezzo{ margin: 6px 0 0; font-size: 14px; color: var(--testo-2); }
.carrello__prezzo span{ color: var(--testo-3); }
.carrello__qta{ margin: 0; }
.carrello__tot{ margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--sand); min-width: 90px; text-align: right; }
.carrello__via{ width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linea); display: grid; place-items: center; color: var(--testo-3); text-decoration: none; font-size: 18px; line-height: 1; }
.carrello__via:hover{ border-color: var(--corallo); color: var(--corallo); }
.carrello__azioni{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; align-items: center; margin-top: 18px; }
.carrello__coupon-nascosto{ display: none; }
/* il codice sconto, nel riepilogo tra il totale e "Vai al pagamento" */
.riepilogo__coupon{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.riepilogo__coupon input{ flex: 1 1 120px; min-width: 0; background: var(--campo); border: 1px solid var(--linea); border-radius: 999px; padding: 10px 16px; font: 400 14px var(--font-body); color: var(--sand); }
.riepilogo__coupon input:focus{ outline: none; border-color: var(--oro); }
.riepilogo__coupon input.has-error{ border-color: var(--corallo); }
.riepilogo__coupon .coupon-error-notice{ flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--corallo); }
.riepilogo .cart-discount td{ color: var(--oro); }
.riepilogo .woocommerce-remove-coupon{ margin-left: 6px; font-size: 12px; color: var(--testo-3); }
/* nel checkout: un link che apre lo stesso blocco, tra i totali e il pagamento */
.riepilogo__sconto{ margin-top: 14px; }
.riepilogo__sconto-testo{ margin: 0; font-size: 13.5px; color: var(--testo-2); }
.riepilogo__sconto-apri{ font-weight: 500; color: var(--oro); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.riepilogo__sconto .riepilogo__coupon{ margin-top: 12px; }
.riepilogo__sconto .woocommerce-message, .riepilogo__sconto .is-success{ margin: 12px 0 0; padding: 10px 14px; font-size: 13px; }
.carrello__aggiorna[disabled]{ opacity: .4; }
.carrello__vuoto{ grid-column: 1 / -1; text-align: center; padding: 20px 0 40px; }
.carrello__vuoto .titolo{ margin-top: 10px; }
.carrello__vuoto .sotto{ margin: 0 auto; }
/* il riepilogo: la scheda a destra, fissa */
.riepilogo{ position: sticky; top: 100px; border: 1px solid var(--linea); border-radius: 24px; padding: 26px 26px 22px; background: linear-gradient(180deg, var(--velo-oro), transparent); }
.riepilogo__titolo{ font-family: var(--font-display); font-size: 24px; margin: 0 0 14px; }
.riepilogo__tabella{ width: 100%; border-collapse: collapse; }
.riepilogo__tabella th, .riepilogo__tabella td{ padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 14.5px; text-align: left; font-weight: 400; color: var(--testo-2); vertical-align: top; }
.riepilogo__tabella td{ text-align: right; color: var(--sand); }
.riepilogo__tabella .order-total th, .riepilogo__tabella .order-total td{ border-bottom: 0; padding-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--sand); }
.riepilogo__tabella ul{ list-style: none; padding: 0; margin: 0; }
.riepilogo__tabella li{ margin: 0 0 6px; }
.riepilogo__tabella label{ font-size: 14px; }
.riepilogo .wc-proceed-to-checkout{ margin-top: 18px; }
.riepilogo .wc-proceed-to-checkout .btn{ display: block; text-align: center; }
.riepilogo .garanzie{ margin-top: 18px; padding-top: 16px; }
.riepilogo .woocommerce-shipping-destination, .riepilogo .shipping-calculator-button{ font-size: 13px; color: var(--testo-3); }
.riepilogo .shipping-calculator-button{ color: var(--oro); }
.riepilogo .shipping-calculator-form{ margin-top: 10px; }
.riepilogo .shipping-calculator-form .form-row{ margin: 0 0 8px; }
.riepilogo .shipping-calculator-form input, .riepilogo .shipping-calculator-form select{ width: 100%; background: var(--campo); border: 1px solid var(--linea); border-radius: 12px; padding: 9px 12px; font: 400 14px var(--font-body); color: var(--sand); }
.riepilogo .shipping-calculator-form .button{ margin-top: 6px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--bordo-ghost); background: none; color: var(--sand); font: 500 13px var(--font-body); cursor: pointer; }
.riepilogo .select2-container .select2-selection--single{ height: 40px; border: 1px solid var(--linea); border-radius: 12px; background: var(--campo); }
.riepilogo .select2-container .select2-selection--single .select2-selection__rendered{ line-height: 38px; padding-left: 12px; color: var(--sand); }
.riepilogo .select2-container .select2-selection--single .select2-selection__arrow{ height: 38px; }

/* ---------- ordine ricevuto ---------- */
.grazie{ padding-top: clamp(104px, 13vh, 130px); }
.grazie__corpo{ max-width: 820px; margin: 0 auto; }
.grazie__testa{ text-align: center; margin-bottom: 30px; }
.grazie__testa .kicker{ margin-bottom: 12px; }
.grazie__testa h1{ font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 16px; }
.grazie__testa h1 em{ font-style: normal; color: var(--oro); }
.grazie__testa .sotto{ margin: 0 auto; max-width: 58ch; }
/* le due carte a ventaglio: partono sovrapposte e si aprono */
.grazie__carte{ position: relative; width: 190px; height: 196px; margin: 0 auto 24px; }
.grazie__carta{ position: absolute; left: 50%; top: 0; width: 112px; height: auto; margin-left: -56px; border-radius: 8px; box-shadow: 0 18px 40px rgba(20,32,44,.22); transform-origin: 50% 115%; animation: grazie-ventaglio .9s var(--ease-out) both; }
.grazie__carta--rossa{ --giro: -14deg; animation-delay: .15s; }
.grazie__carta--oro{ --giro: 11deg; animation-delay: .25s; }
@keyframes grazie-ventaglio{ from{ transform: rotate(0) translateY(14px); opacity: 0; } to{ transform: rotate(var(--giro)); opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .grazie__carta{ animation: none; transform: rotate(var(--giro)); } }
/* i dati dell'ordine in quattro riquadri */
.grazie__dati{ list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.grazie__dati li{ border: 1px solid var(--linea); border-radius: 18px; padding: 14px 16px; background: linear-gradient(180deg, var(--velo-oro), transparent); }
.grazie__dati span{ display: block; font-family: var(--font-kicker); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-3); }
.grazie__dati strong{ display: block; margin-top: 6px; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--sand); }
/* le istruzioni del pagamento (il bonifico stampa le coordinate) */
.grazie__istruzioni{ border: 1px solid var(--linea-oro); border-radius: 22px; padding: 22px 26px; margin: 0 0 22px; background: linear-gradient(180deg, var(--velo-oro), transparent); }
.grazie__istruzioni p{ margin: 0 0 12px; color: var(--testo-2); font-size: 15px; }
.grazie__istruzioni h2{ font-family: var(--font-display); font-size: 22px; margin: 6px 0 10px; }
.grazie__istruzioni h3{ font-size: 15px; font-weight: 600; margin: 12px 0 8px; color: var(--sand); }
.grazie__istruzioni ul{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.grazie__istruzioni li{ font-size: 14px; color: var(--testo-2); overflow-wrap: anywhere; }
.grazie__istruzioni li strong{ color: var(--sand); font-weight: 600; }
/* il riepilogo e gli indirizzi */
.grazie__dettagli, .grazie__indirizzi > div{ border: 1px solid var(--linea); border-radius: 22px; padding: 22px 26px; }
.grazie__dettagli{ margin-bottom: 22px; }
.grazie__titolo{ font-family: var(--font-display); font-size: 22px; margin: 0 0 10px; }
.grazie__tabella{ width: 100%; border-collapse: collapse; }
.grazie__tabella th, .grazie__tabella td{ padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 14.5px; text-align: left; font-weight: 400; color: var(--testo-2); vertical-align: top; }
.grazie__tabella td{ text-align: right; color: var(--sand); }
.grazie__tabella td.product-name{ text-align: left; }
.grazie__tabella td.product-name a{ color: var(--sand); text-decoration: none; }
.grazie__tabella .product-quantity{ font-weight: 400; color: var(--testo-3); }
.grazie__tabella .grazie__prenotazione{ margin: 3px 0 0; font-size: 12.5px; color: var(--oro); }
.grazie__riga--order_total th, .grazie__riga--order_total td{ padding-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--sand); }
.grazie__tabella tfoot tr:last-child th, .grazie__tabella tfoot tr:last-child td{ border-bottom: 0; }
.grazie__riga--azioni td{ display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.grazie__indirizzi{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 30px; }
.grazie__indirizzi h3{ font-family: var(--font-display); font-size: 18px; margin: 0 0 8px; }
.grazie__indirizzi address{ font-style: normal; line-height: 1.7; font-size: 14.5px; color: var(--testo-2); }
.grazie__indirizzi address p{ margin: 0; }
.grazie__azioni{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 30px 0 0; }
@media (max-width: 700px){
  .grazie__dati{ grid-template-columns: 1fr 1fr; }
  .grazie__istruzioni ul{ grid-template-columns: 1fr; }
  .grazie__indirizzi{ grid-template-columns: 1fr; }
  .grazie__dettagli, .grazie__indirizzi > div, .grazie__istruzioni{ padding: 18px 18px; }
}

/* ---------- checkout ---------- */
.checkout__griglia{ display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.checkout--sito h3, .woocommerce-billing-fields > h3, .woocommerce-shipping-fields > h3, .woocommerce-additional-fields > h3{ font-family: var(--font-display); font-size: 22px; margin: 0 0 16px; }
.woocommerce-shipping-fields > h3, .woocommerce-additional-fields > h3{ margin-top: 30px; }
.woocommerce-shipping-fields > h3 label{ font-family: var(--font-body); font-size: 14px; font-weight: 500; display: inline-flex; gap: 8px; align-items: center; }
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.checkout--sito .form-row{ margin: 0 0 14px; }
.checkout--sito .form-row-wide, .checkout--sito .form-row.notes{ grid-column: 1 / -1; }
.checkout--sito .form-row label{ display: block; margin-bottom: 7px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--testo-2); }
.checkout--sito .form-row label .optional{ text-transform: none; letter-spacing: 0; color: var(--testo-3); }
.checkout--sito .form-row label .required{ color: var(--corallo); text-decoration: none; }
.checkout--sito .form-row .input-text, .checkout--sito .form-row select, .checkout--sito .form-row textarea{ width: 100%; background: var(--campo); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; color: var(--sand); font: 400 15px var(--font-body); }
.checkout--sito .form-row .input-text:focus, .checkout--sito .form-row textarea:focus{ outline: none; border-color: var(--oro); }
.checkout--sito .form-row textarea{ min-height: 110px; resize: vertical; }
.checkout--sito .form-row.woocommerce-invalid .input-text{ border-color: var(--corallo); }
.checkout--sito .woocommerce-input-wrapper{ display: block; }
.checkout--sito .select2-container .select2-selection--single{ height: 50px; border: 1px solid var(--linea); border-radius: 16px; background: var(--campo); }
.checkout--sito .select2-container .select2-selection--single .select2-selection__rendered{ line-height: 48px; padding-left: 16px; color: var(--sand); font-size: 15px; }
.checkout--sito .select2-container .select2-selection--single .select2-selection__arrow{ height: 48px; right: 8px; }
.select2-dropdown{ border: 1px solid var(--linea) !important; border-radius: 16px !important; overflow: hidden; font: 400 15px var(--font-body); }
.select2-results__option--highlighted{ background: var(--gold) !important; color: var(--su-oro) !important; }
.checkout--sito .checkbox input{ margin-right: 8px; }
/* il riepilogo dell'ordine e il pagamento */
.checkout__lato .woocommerce-checkout-review-order-table{ width: 100%; border-collapse: collapse; }
.checkout__lato .woocommerce-checkout-review-order-table th, .checkout__lato .woocommerce-checkout-review-order-table td{ padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 14.5px; text-align: left; font-weight: 400; color: var(--testo-2); vertical-align: top; }
.checkout__lato .woocommerce-checkout-review-order-table thead{ display: none; }
.checkout__lato .woocommerce-checkout-review-order-table td.product-name{ color: var(--sand); }
.checkout__lato .woocommerce-checkout-review-order-table .product-quantity{ color: var(--testo-3); }
.checkout__lato .woocommerce-checkout-review-order-table td.product-total, .checkout__lato .woocommerce-checkout-review-order-table tfoot td{ text-align: right; color: var(--sand); }
.checkout__lato .woocommerce-checkout-review-order-table .order-total th, .checkout__lato .woocommerce-checkout-review-order-table .order-total td{ border-bottom: 0; padding-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--sand); }
.checkout__lato .woocommerce-checkout-review-order-table ul{ list-style: none; padding: 0; margin: 0; }
.checkout__lato .woocommerce-checkout-review-order-table li{ margin: 0 0 6px; }
.checkout__lato .woocommerce-checkout-review-order-table .woocommerce-shipping-totals label{ font-size: 14px; }
.checkout__lato .backorder_notification, .checkout__lato .variation{ font-size: 12.5px; color: var(--oro); margin: 4px 0 0; }
#payment{ margin-top: 18px; border-top: 1px solid var(--linea); padding-top: 18px; }
.wc_payment_methods{ list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.wc_payment_method{ border: 1px solid var(--linea); border-radius: 16px; padding: 12px 14px; }
.wc_payment_method > label{ display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--sand); cursor: pointer; }
.wc_payment_method > label img{ max-height: 22px; }
.wc_payment_method .payment_box{ margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--deep); font-size: 13.5px; color: var(--testo-2); }
.wc_payment_method .payment_box p{ margin: 0; }
.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper{ font-size: 12.5px; color: var(--testo-3); }
.woocommerce-privacy-policy-text a, .woocommerce-terms-and-conditions-wrapper a{ color: var(--oro); }
.woocommerce-terms-and-conditions-checkbox-text{ font-size: 13px; }
.place-order{ margin-top: 14px; }
#place_order{ display: block; width: 100%; padding: 17px 34px; border: 0; border-radius: 999px; background: var(--gold); color: var(--su-oro); font: 600 15px var(--font-body); letter-spacing: .06em; cursor: pointer; transition: background-color .3s, transform .3s var(--ease-out); }
#place_order:hover{ background: var(--gold-2); transform: translateY(-2px); }
.blockUI.blockOverlay{ border-radius: 24px; }
/* accedi / coupon nel checkout, e gli avvisi di errore */
.woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-form-login-toggle .woocommerce-info{ margin-bottom: 18px; }
.woocommerce-error{ border-color: var(--corallo); }
.woocommerce-error li{ margin: 0; }
/* ordine ricevuto */
.woocommerce-order .woocommerce-thankyou-order-received{ font-family: var(--font-display); font-size: 22px; }
.woocommerce-order-overview{ list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.woocommerce-order-overview li{ border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-3); }
.woocommerce-order-overview li strong{ display: block; margin-top: 4px; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--sand); }
.woocommerce-order .woocommerce-table, .woocommerce-order .woocommerce-customer-details address{ width: 100%; border-collapse: collapse; font-size: 14.5px; }
.woocommerce-order .woocommerce-table th, .woocommerce-order .woocommerce-table td{ padding: 10px 0; border-bottom: 1px solid var(--linea); text-align: left; }
.woocommerce-order h2, .woocommerce-order h3{ font-family: var(--font-display); margin: 28px 0 10px; }
@media (max-width: 900px){
  .woocommerce-cart .negozio .woocommerce, .checkout__griglia{ grid-template-columns: 1fr; }
  .riepilogo{ position: static; }
  .carrello__voce{ grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "foto info via" "qta qta tot"; gap: 14px; }
  .carrello__tot{ min-width: 0; justify-self: end; }
  .carrello__via{ justify-self: end; }
  .carrello__foto{ grid-area: foto; } .carrello__foto img{ width: 72px; height: 72px; }
  .carrello__info{ grid-area: info; } .carrello__via{ grid-area: via; }
  .carrello__qta{ grid-area: qta; } .carrello__tot{ grid-area: tot; }
  .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper{ grid-template-columns: 1fr; }
}