/* ════════════════════════════════════════════════════════════════════════
   SKIN EDITORIALE TAVOLATA — convivialità editoriale italiana.
   Stessa ossatura del design system, pelle completamente diversa:
   carta calda, serif con corsivi oro, filetti, ✦, bottoni squadrati.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --radius:12px;
  --oro-scuro:#AB742C;           /* accento su fondi chiari (dalla landing light) */
  --ombra:0 1px 2px rgb(43 33 24/.05),0 12px 28px rgb(43 33 24/.10);
  --ombra-su:0 6px 14px rgb(43 33 24/.08),0 22px 46px rgb(43 33 24/.15);
}
body{background:#FFFEFB} /* bianco caldo: le sezioni si alternano bianco/panna */
/* grana fotografica leggerissima, firma della landing */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sezione--crema{background:var(--crema)}
h1,h2,h3,h4{font-weight:600;line-height:1.1}
h1 em,h2 em,h3 em{font-style:italic;font-weight:500;color:var(--oro-scuro)}
.hero-titolo em{color:#E9BE79}

/* eyebrow: maiuscoletto spaziato con ✦ */
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--oro-scuro)}
.eyebrow::before{content:"✦";width:auto;height:auto;background:none;border-radius:0;font-size:.85em}
.eyebrow--chiaro{color:#E9BE79}
.eyebrow--chiaro::before{background:none}

/* bottoni squadrati; il primario è ORO con testo espresso */
.btn{border-radius:10px;letter-spacing:.02em}
.btn-primario,.btn-acquista{background:var(--ambra);color:#221A12}
.btn-primario:hover,.btn-acquista:hover{background:#EDB56B;color:#221A12;box-shadow:0 12px 30px rgb(224 164 88/.4)}
.header-cerca button{background:var(--ambra);color:#221A12}
.header-cerca button:hover{background:#EDB56B}

/* etichette: maiuscoletto su vetro scuro, niente pillole */
.badge-formato{
  background:rgb(22 18 16/.55);color:#F4ECDD;border:1px solid rgb(244 236 221/.4);
  backdrop-filter:blur(6px);border-radius:8px;box-shadow:none;
  text-transform:uppercase;letter-spacing:.09em;font-size:.6rem;font-weight:600;
}
.badge-formato--bordo{background:var(--bianco);color:var(--ink);border:1px solid var(--bordo)}
.timbro{border-radius:8px;text-transform:uppercase;letter-spacing:.07em;font-size:.62rem}
.data-badge{border-radius:8px;background:rgb(255 250 241/.97)}
.data-badge-giorno{font-weight:600}
.data-badge-mese{color:var(--oro-scuro)}
.chip,.hero-chip,.citta-pill,.filtro-attivo{border-radius:10px}
.citta-pill-sigla,.tratta-sigla{border-radius:6px;color:var(--oro-scuro);background:rgb(171 116 44/.12)}
.tratta:hover .tratta-sigla,.citta-pill:hover .citta-pill-sigla{background:var(--oro-scuro);color:#FFF8EC}
.tratta:hover{background:rgb(171 116 44/.07)}
.tratta-num--arrivo{color:var(--oro-scuro);background:rgb(171 116 44/.12)}
.chip.is-attivo{background:var(--espresso);border-color:var(--espresso)}
.event-card-cat{color:var(--oro-scuro)}

/* footer: il padding orizzontale del container va ripristinato
   (la regola .footer-panel dell'ossatura lo azzerava) */
.site-footer .footer-panel{padding-inline:28px}

/* social nel footer (7 ago): icone tonde nel linguaggio del pannello scuro */
.footer-social{display:flex;gap:10px}
.footer-social a{
  width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  border:1px solid var(--filetto-scuro);color:var(--su-scuro-soft);
  transition:color var(--t),border-color var(--t),background var(--t);
}
.footer-social a:hover{color:#fff;border-color:var(--ambra);background:rgb(224 164 88/.14)}

/* header su pagine chiare: carta, non bianco freddo */
.site-header.is-scrolled{background:rgb(255 254 251/.94)}
.barra-filtri-card{background:rgb(255 250 241/.96)}

/* hero: taglio cinematografico allineato a sinistra, ricerca su vetro scuro */
.hero-inner{align-items:flex-start;text-align:left;max-width:1240px;margin-inline:auto;padding-inline:28px;gap:26px}
.hero-kicker{
  font-size:.78rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:#E9BE79;display:inline-flex;align-items:center;gap:12px;
}
.hero-kicker::before{content:"";width:34px;height:1px;background:#E9BE79}
.hero-titolo{font-weight:600;font-size:clamp(2.6rem,5.6vw,4.2rem);line-height:1.04;text-wrap:balance}
.hero-sub{max-width:54ch}
.hero-cerca{
  background:rgb(22 18 16/.55);backdrop-filter:blur(12px);
  border:1px solid rgb(244 236 221/.28);border-radius:14px;box-shadow:none;
}
.hero-cerca-campo{border-right-color:rgb(244 236 221/.18)}
.hero-cerca-label{color:#E9BE79}
.hero-cerca-select{color:#F4ECDD}
.hero-cerca-select option{color:var(--ink)}
.hero-cerca-pin{color:#E0A458}
.hero-cerca-btn{border-radius:9px}
/* campo libero al posto del select (5 ago): stesse classi, più le regole
   che un input non eredita dal select */
.hero-cerca-testo{border:0;background:none;outline:none;width:100%}
.hero-cerca-testo::placeholder{color:rgb(244 236 221/.55)}
.hero-cerca-testo::-webkit-search-cancel-button{display:none}
/* città in hero: link corsivi con filetto oro, niente pillole */
.hero-chips{justify-content:flex-start;gap:8px 20px;align-items:baseline}
.hero-chips-label{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#E9BE79;margin-right:4px}
.hero-chip{
  background:none;border:0;border-radius:0;padding:0 0 3px;backdrop-filter:none;
  font-family:var(--font-display);font-style:italic;font-size:1.1rem;font-weight:500;color:#F4ECDD;
  border-bottom:1px solid rgb(233 190 121/.45);gap:6px;
}
.hero-chip:hover{background:none;border-color:#E9BE79;color:#E9BE79}
.hero-chip-num{
  background:none;color:#E9BE79;min-width:0;height:auto;border-radius:0;
  font-family:var(--font-ui);font-style:normal;font-size:.68rem;font-weight:700;
}
.hero-palco::before{
  background:
    linear-gradient(180deg,rgb(22 18 16/.55) 0%,rgb(22 18 16/.25) 45%,rgb(22 18 16/.78) 100%),
    linear-gradient(100deg,rgb(22 18 16/.55) 0%,transparent 55%);
}

/* strip fiducia: banda espresso, non chiara */
.strip-fiducia{background:var(--espresso);border-bottom:0}
.strip-fiducia-inner{color:#B6A892}
.strip-fiducia-inner strong{color:#F4ECDD}
.strip-fiducia-inner svg{color:#E0A458}

/* cos'è il format: split editoriale foto + copy */
.format-split{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.format-foto{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--ombra-su);margin:0}
.format-foto img{width:100%;aspect-ratio:4/4.6;object-fit:cover}
.format-foto figcaption{
  position:absolute;left:14px;bottom:14px;
  font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#F4ECDD;
  background:rgb(22 18 16/.55);backdrop-filter:blur(6px);border:1px solid rgb(244 236 221/.25);
  border-radius:8px;padding:.6em 1em;
}
.format-testi{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.format-testi .btn{margin-top:8px}
.check-lista{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.check-lista li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:var(--ink-soft)}
.check-lista svg{flex:0 0 auto;margin-top:3px;color:var(--oro-scuro)}
.check-lista strong{color:var(--ink)}

/* fascia academy + logo lockup */
.academy-logo{height:76px;width:auto}
.academy-logo--scuro{height:84px}
.banner-regalo .academy-logo{height:64px;margin-bottom:4px}

/* timeline con orario nel tondo */
.tappa-icona--ora{font-size:.66rem;font-weight:700;letter-spacing:.02em;color:var(--oro-scuro)}

/* dove si cena (locale sempre in chiaro) */
.dove-nota{color:var(--ink-soft);font-size:.95rem;max-width:64ch;margin-bottom:4px}

/* ════ ACCOUNT & ACADEMY (layout "Mio account" alla WooCommerce) ════ */
.pagina-account{padding:calc(var(--header-h) + 48px) 0 96px;min-height:70vh}
.account-titolo{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:26px}
.account-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;align-items:start}
.account-nav{
  position:sticky;top:calc(var(--header-h) + 22px);
  background:var(--bianco);border:1px solid var(--bordo);border-radius:12px;
  box-shadow:var(--ombra);overflow:hidden;
}
.account-utente{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--bordo)}
.account-avatar{
  width:42px;height:42px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.2rem;font-weight:600;
  color:#FFF8EC;background:var(--oro-scuro);
}
.account-utente-testi{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.account-utente-testi strong{font-size:.95rem}
.account-utente-testi span{font-size:.76rem;color:var(--ink-tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-nav ul{display:flex;flex-direction:column}
.account-nav li a{
  display:flex;align-items:center;gap:8px;padding:13px 18px;
  font-size:.92rem;font-weight:500;color:var(--ink-soft);
  border-bottom:1px solid var(--bordo);border-left:3px solid transparent;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.account-nav li:last-child a{border-bottom:0}
.account-nav li a:hover{background:rgb(171 116 44/.06);color:var(--ink)}
.account-nav li a.is-attiva{
  color:var(--oro-scuro);font-weight:700;
  border-left-color:var(--oro-scuro);background:rgb(171 116 44/.08);
}
.account-nav-tag{
  font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#221A12;background:var(--ambra);border-radius:6px;padding:.2em .5em;
}
.account-esci{color:var(--ink-tenue)!important}
.account-contenuto{display:flex;flex-direction:column;gap:18px;min-width:0}
.account-benvenuto{color:var(--ink-soft);font-size:.98rem}
.account-sezione-titolo{font-size:1.5rem}
.account-nota-demo{font-size:.78rem;color:var(--ink-tenue)}
.biglietto-card--vuota{border-style:dashed;box-shadow:none;background:transparent}
/* tabella ordini */
.woo-tabella-scroll{overflow-x:auto;border:1px solid var(--bordo);border-radius:12px;background:var(--bianco);box-shadow:var(--ombra)}
.woo-tabella{width:100%;border-collapse:collapse;font-size:.92rem}
.woo-tabella th{
  text-align:left;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-tenue);padding:14px 18px;border-bottom:1px solid var(--bordo);
}
.woo-tabella td{padding:14px 18px;border-bottom:1px solid var(--bordo);vertical-align:middle}
.woo-tabella tr:last-child td{border-bottom:0}
.woo-tabella-nota{font-size:.78rem;color:var(--ink-tenue)}
.indirizzi-griglia{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* form dettagli */
.account-form{display:flex;flex-direction:column;gap:14px;max-width:560px}
.account-form label{display:flex;flex-direction:column;gap:6px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tenue)}
.account-form input{
  background:var(--bianco);border:1px solid var(--bordo-forte);border-radius:10px;
  padding:.8em 1em;font-size:.95rem;color:var(--ink);
}
.account-form .btn{align-self:flex-start;margin-top:6px}
.account-form-riga{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.academy-intesta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:10px}

/* ════ PAGINA EVENTO: scena split + invito centrale ════ */
.evento-scena{
  display:grid;grid-template-columns:1.05fr 1fr;min-height:580px;
  background:var(--espresso);color:var(--su-scuro);
}
.evento-scena-testi{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;
  padding:calc(var(--header-h) + 56px) 56px 64px max(28px,calc((100vw - 1240px)/2 + 28px));
}
.evento-scena-testi h1{font-size:clamp(2.2rem,4.2vw,3.6rem);color:#F4ECDD;line-height:1.05;text-wrap:balance}
.evento-scena-testi h1 em{color:#E9BE79}
.evento-scena-intro{color:#DDD1BC;font-size:1rem;max-width:52ch}
.evento-scena-azioni{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.evento-scena-prezzo{font-size:.88rem;color:#B6A892}
.evento-scena-prezzo strong{font-family:var(--font-display);font-size:1.15rem;color:#221A12;background:var(--ambra);border-radius:6px;padding:.1em .45em}
.evento-scena-foto{margin:0;overflow:hidden;position:relative}
.evento-scena-foto img{width:100%;height:100%;object-fit:cover;min-height:100%}
.evento-scena-foto::before{ /* la foto sfuma nell'espresso, mai stacco netto */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--espresso) 0%,transparent 26%);
}
.evento-scena .briciole,.evento-scena .briciole a{color:#B6A892}
.evento-scena .briciole a:hover{color:#F4ECDD}

/* il grande invito con la biglietteria dentro */
.invito-xl{
  position:relative;max-width:640px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  background:var(--bianco);border:1px solid rgb(171 116 44/.45);border-radius:14px;
  padding:44px 46px 34px;box-shadow:var(--ombra-su);
}
.invito-xl::before{
  content:"";position:absolute;inset:9px;border:1px solid rgb(171 116 44/.3);
  border-radius:9px;pointer-events:none;
}
.invito-xl .tavola-data strong{font-size:2.3rem}
.invito-xl .tavola-citta{font-size:2rem}
.invito-nota{color:var(--ink-soft);font-size:.95rem;max-width:44ch}
.invito-xl .avvisami{margin-top:10px;text-align:left}
.invito-form{display:flex;flex-direction:column;gap:14px;width:100%;margin-top:14px;text-align:left}
.invito-scelta{font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.invito-form .btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.invito-form .riga-bigl{border-top:1px solid var(--bordo)}
/* scarcity ben visibile (cliente, 8 ago: "aumentiamo la visibilità"):
   da riga di testo a FASCIA d'urgenza a tutta larghezza — fondo rosso
   tenue, bordo rosso, maiuscoletto e pallino pulsante (keyframes
   `lampeggia` già nell'ossatura, col reduced-motion suo). */
.invito-xl .acquisto-posti{
  align-self:stretch;margin:2px 0 4px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:rgb(194 69 60/.09);border:1px solid rgb(194 69 60/.35);
  border-radius:10px;padding:11px 14px;
  font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rosso);
}
.invito-xl .acquisto-posti::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--rosso);animation:lampeggia 1.6s infinite;
}
@media (prefers-reduced-motion:reduce){.invito-xl .acquisto-posti::before{animation:none}}

/* la serata: collage fotografico + programma */
.serata-split{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:start}
.serata-collage{position:relative;padding-bottom:64px}
.collage-grande{width:88%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;box-shadow:var(--ombra-su)}
.collage-piccola{
  position:absolute;right:0;bottom:0;width:52%;aspect-ratio:4/3;object-fit:cover;
  border-radius:12px;box-shadow:var(--ombra-su);border:5px solid var(--crema);
}
.titolo-sezione--piccolo{font-size:clamp(1.5rem,2.6vw,2rem);margin:10px 0 18px}
.programma{display:flex;flex-direction:column;align-items:flex-start}
.programma-ore{display:flex;flex-direction:column;width:100%}
.programma-voce{display:flex;gap:22px;padding:16px 0;border-top:1px solid var(--bordo-forte)}
.programma-ora{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:1.5rem;line-height:1.2;color:var(--oro-scuro);flex:0 0 74px;
}
.programma-voce h3{font-size:1.15rem;margin-bottom:4px}
.programma-voce p{font-size:.92rem;color:var(--ink-soft)}
.programma-divisorio{margin:26px 0 18px}
.programma-menu-titolo{font-size:1.3rem;margin-bottom:14px}
/* il menù come un vero menù di sala: portata in maiuscoletto, piatto in serif */
.menu-serata{display:flex;flex-direction:column;width:100%;margin:0 0 14px}
.menu-portata{display:flex;flex-direction:column;gap:3px;padding:11px 0}
.menu-portata + .menu-portata{border-top:1px dotted var(--bordo-forte)}
.menu-portata dt{font-size:.62rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--oro-scuro)}
.menu-portata dd{font-family:var(--font-display);font-size:1.18rem;font-weight:500;line-height:1.3;color:var(--ink);margin:0}
.menu-nota{font-size:.8rem;color:var(--ink-tenue);max-width:56ch}

/* dove si cena: reveal in 3 passi + mappa */
.dove-griglia{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.dove-testi{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.dove-espresso-nota{color:#DDD1BC;font-size:.98rem;max-width:52ch}
.dove-espresso-nota strong{color:#F4ECDD}
.reveal-passi{display:flex;flex-direction:column;width:100%;counter-reset:passo}
.reveal-passi li{
  counter-increment:passo;display:flex;flex-direction:column;gap:2px;
  padding:14px 0 14px 44px;position:relative;border-top:1px solid rgb(244 236 221/.16);
}
.reveal-passi li::before{
  content:counter(passo);position:absolute;left:0;top:14px;
  font-family:var(--font-display);font-style:italic;font-size:1.5rem;color:#E9BE79;
}
.reveal-passi strong{color:#F4ECDD;font-size:.98rem}
.reveal-passi span{color:#B6A892;font-size:.88rem}
.dove-griglia .locale-mappa{border-color:rgb(244 236 221/.2);margin-top:0}
.dove-griglia .locale-mappa iframe{height:360px}
/* FAQ in colonna unica stretta */
.faq-stretta{max-width:780px}
.faq-stretta .faq-lista{max-width:none}

@media (max-width:900px){
  .evento-scena{grid-template-columns:1fr;min-height:0}
  .evento-scena-testi{padding:calc(var(--header-h) + 40px) 20px 40px}
  .evento-scena-foto img{aspect-ratio:16/10;min-height:0}
  .evento-scena-foto::before{background:linear-gradient(180deg,var(--espresso) 0%,transparent 34%)}
  .serata-split{grid-template-columns:1fr;gap:40px}
  .serata-collage{max-width:440px}
  .dove-griglia{grid-template-columns:1fr;gap:34px}
  .invito-xl{padding:32px 20px 24px}
}
@media (max-width:560px){
  .programma-ora{flex-basis:58px;font-size:1.25rem}
}
.account-demo-nota{
  font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--oro-scuro);
  background:rgb(171 116 44/.1);border:1px solid rgb(171 116 44/.25);border-radius:10px;
  padding:.7em 1.1em;margin-bottom:26px;width:fit-content;
}
.account-testa{margin-bottom:34px}
.account-testa h1{font-size:clamp(2rem,4vw,2.9rem);margin:10px 0 8px}
.account-griglia{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:start}
.account-col{display:flex;flex-direction:column;gap:16px}
.biglietto-card{
  background:var(--bianco);border:1px solid var(--bordo);border-radius:var(--radius);
  box-shadow:var(--ombra);padding:22px 24px;display:flex;flex-direction:column;gap:8px;
}
.biglietto-card--passata{opacity:.75}
.biglietto-card-testa{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.biglietto-eti{font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-tenue)}
.biglietto-card h3{font-size:1.35rem;margin:0}
.biglietto-dati{font-size:.9rem;color:var(--ink-soft)}
.biglietto-azioni{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.academy-card-account{
  background:var(--bianco);border:1px solid var(--bordo);border-radius:var(--radius);
  box-shadow:var(--ombra-su);padding:26px 24px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.academy-progress{width:100%;height:8px;border-radius:999px;background:var(--crema);border:1px solid var(--bordo);overflow:hidden}
.academy-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--oro-scuro),var(--ambra));border-radius:999px}
.academy-progress--grande{max-width:420px}
.academy-progress-testo{font-size:.88rem;color:var(--ink-soft)}
.academy-progress-testo strong{color:var(--ink)}
.academy-prossima{font-size:.85rem;color:var(--ink-soft)}
.academy-testa{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:18px 0 40px;max-width:640px}
.modulo{margin-bottom:44px}
.modulo-testa{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.modulo-sub{color:var(--ink-soft);font-size:.95rem}
.lezioni-lista{display:flex;flex-direction:column;gap:10px}
.lezione-riga{
  display:flex;align-items:center;gap:16px;
  background:var(--bianco);border:1px solid var(--bordo);border-radius:12px;
  padding:14px 18px;color:var(--ink);box-shadow:var(--ombra);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.lezione-riga:hover{transform:translateY(-2px);box-shadow:var(--ombra-su);border-color:var(--bordo-forte);color:var(--ink)}
.lezione-stato{
  width:36px;height:36px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  color:var(--oro-scuro);background:rgb(171 116 44/.12);
}
.lezione-riga.is-vista .lezione-stato{color:#FFF8EC;background:var(--verde)}
.lezione-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.lezione-info strong{font-size:.98rem}
.lezione-desc{font-size:.82rem;color:var(--ink-tenue)}
.lezione-durata{font-size:.78rem;font-weight:700;color:var(--ink-tenue);flex:0 0 auto}
/* singola lezione */
.container-lezione{max-width:880px}
.lezione-testa{margin:18px 0 22px;display:flex;flex-direction:column;gap:10px}
.lezione-testa h1{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.lezione-player{
  position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:radial-gradient(ellipse at 30% 20%,#2E241B,var(--espresso) 70%);
  box-shadow:var(--ombra-su);display:grid;place-items:center;
}
.lezione-player-play{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  background:var(--ambra);color:#221A12;box-shadow:0 14px 40px rgb(224 164 88/.4);
}
.lezione-player-durata{position:absolute;right:16px;bottom:14px;font-size:.75rem;font-weight:700;color:#F4ECDD;background:rgb(22 18 16/.7);border-radius:6px;padding:.35em .7em}
.lezione-player-nota{position:absolute;left:16px;bottom:14px;font-size:.72rem;color:#B6A892}
.lezione-descrizione{margin:20px 0 24px;color:var(--ink-soft);max-width:70ch}
.ebook-card{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--bianco);border:1px solid var(--bordo);border-radius:12px;
  padding:16px 20px;box-shadow:var(--ombra);
}
.ebook-icona{width:44px;height:44px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;color:var(--oro-scuro);background:rgb(171 116 44/.12)}
.ebook-testi{display:flex;flex-direction:column;gap:2px;flex:1;min-width:200px}
.ebook-testi span{font-size:.85rem;color:var(--ink-soft)}
.ebook-demo{font-style:normal;color:var(--ink-tenue)}
.lezione-nav{display:flex;justify-content:space-between;gap:14px;margin-top:28px}
.pagina-account .briciole,.pagina-account .briciole a{color:var(--ink-tenue)}
.pagina-account .briciole a:hover,.pagina-account .briciole [aria-current]{color:var(--ink)}

@media (max-width:1080px){
  .format-split{grid-template-columns:1fr;gap:32px}
  .format-foto{max-width:520px}
  .account-layout{grid-template-columns:1fr;gap:22px}
  .account-nav{position:static}
  /* menu account: tab su UNA riga a scorrimento */
  .account-nav ul{
    flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    gap:6px;padding:10px;-webkit-overflow-scrolling:touch;
  }
  .account-nav ul::-webkit-scrollbar{display:none}
  .account-nav li{flex:0 0 auto}
  .account-nav li a{
    white-space:nowrap;border-bottom:0;border-left:0;border-radius:9px;
    border:1px solid var(--bordo);padding:9px 14px;background:var(--bianco);
  }
  .account-nav li a.is-attiva{border:1px solid rgb(171 116 44/.45);background:rgb(171 116 44/.1)}
  .account-utente{border-bottom:1px solid var(--bordo)}
  .indirizzi-griglia{grid-template-columns:1fr}
  .account-form-riga{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero-inner{gap:20px}
  .hero-titolo{font-size:clamp(2.5rem,11vw,3.2rem)}
  .strip-fiducia::after{background:linear-gradient(90deg,transparent,var(--espresso) 78%)}
  .academy-logo{height:58px}
  .academy-logo--scuro{height:64px}
  .lezione-nav{flex-direction:column}
  .lezione-nav .btn{width:100%}
  .biglietto-azioni .btn{flex:1;justify-content:center}
  /* footer mobile: colonne ordinate, "Per i locali" a tutta riga.
     Bug reale scoperto in Task 12 (probabile causa del "logo tagliato a 390px"
     segnalato nei report precedenti, che punta erroneamente all'header — l'header
     .brand-logo è a posto, verificato con screenshot 390px reali su 3 tipi di
     pagina): l'ossatura mette `.footer-panel{grid-template-columns:1fr}` sotto
     760px (style.css:1037), quindi il grid DIVENTA a una colonna — ma quella
     colonna non ha `minmax(0,…)`, e `.footer-newsform{width:100%;max-width:400px}`
     (style.css:536) ha un max-width FISSO di 400px senza override mobile: con
     width percentuale + max-width assoluto, gli algoritmi min/max-content del
     browser usano il max-width come contributo intrinseco del figlio, quindi la
     colonna del grid (e con essa .footer-brandcol, .footer-logo, gli input) viene
     forzata larga almeno ~400px, più dei ~350px disponibili a 390px di viewport
     → overflow orizzontale reale di tutto il pannello footer (non solo del logo),
     riprodotto e misurato con screenshot 390px pixel-per-pixel (non un artefatto
     di calibrazione: qui la larghezza assoluta del box, 400px fissi, eccede il
     viewport indipendentemente da qualunque discrepanza di misura dello strumento
     di screenshot). Fix: azzerare il tetto assoluto sotto 760px + track esplicito
     `minmax(0,1fr)` sul grid, stesso pattern già usato per .footer-cols qui sotto. */
  .footer-panel{grid-template-columns:minmax(0,1fr);gap:32px;padding:40px 20px 20px}
  .site-footer .footer-panel{padding-inline:20px}
  .footer-logo{height:38px}
  .footer-newsform{max-width:none}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  .footer-col:last-child{grid-column:1/-1;padding-top:20px;border-top:1px solid var(--filetto-scuro)}
  .footer-col h3{margin-bottom:4px}
  .footer-col a{padding:2px 0}
  .footer-prov{padding-top:20px}
  .footer-bar{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ════════════════════════════════════════════════════════════════════════
   COMPONENTI PROPRI DELLA TAVOLATA (nessun equivalente nell'altro portale)
   ════════════════════════════════════════════════════════════════════════ */

/* card-invito: doppia cornice da segnaposto, tipografia al centro, niente foto */
.tavola-card-link{display:block;color:inherit;height:100%}
.tavola-cornice{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  background:var(--bianco);border:1px solid var(--bordo);border-radius:12px;
  padding:30px 22px 18px;box-shadow:var(--ombra);height:100%;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.tavola-cornice::before{
  content:"";position:absolute;inset:7px;border:1px solid rgb(171 116 44/.4);
  border-radius:8px;pointer-events:none;
}
.tavola-card-link:hover .tavola-cornice{transform:translateY(-5px);box-shadow:var(--ombra-su);border-color:var(--bordo-forte)}
.tavola-timbro{position:absolute;top:-11px;left:50%;transform:translateX(-50%)}
.is-soldout .tavola-cornice{opacity:.8}
/* Lockup data (round 8 ago: il "25" nudo si leggeva come cifra, non come
   data; round 2: "troppo impattante" → compattato): "25 agosto" insieme
   col mese in corsivo oro, sotto UNA riga con settimana e orario. */
.tavola-data{display:flex;flex-direction:column;align-items:center;line-height:1;gap:5px}
.tavola-data strong{font-family:var(--font-display);font-size:2rem;font-weight:600;color:var(--ink)}
.tavola-data strong em{font-style:italic;font-weight:500;color:var(--oro-scuro)}
.tavola-data-sub{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-tenue)}
.tavola-rule{display:flex;align-items:center;gap:12px;width:100%;justify-content:center;color:var(--oro-scuro);font-size:.68rem}
.tavola-rule::before,.tavola-rule::after{content:"";height:1px;flex:1;max-width:52px;background:var(--bordo-forte)}
.tavola-citta{font-size:1.55rem;font-weight:600;line-height:1.08}
.tavola-zona{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-tenue)}
.tavola-dett{font-size:.85rem;color:var(--ink-soft)}
.tavola-piede{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--bordo);
}
.tavola-prezzo{font-size:.8rem;color:var(--ink-soft);white-space:nowrap}
/* prezzo solo tipografico (23 lug: i chip oro sembravano bottoni) */
.tavola-prezzo strong{font-family:var(--font-display);font-size:1.18rem;font-weight:600;color:var(--oro-scuro)}
.tavola-cta{font-size:.85rem;font-weight:700;color:var(--oro-scuro);transition:transform var(--t)}
.tavola-card-link:hover .tavola-cta{transform:translateX(3px)}

@keyframes tds-scorri{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track,.nastro-track{animation:none}}

/* come funziona: passi numerati come nella landing */
.steps-tds{display:grid;grid-template-columns:repeat(4,1fr);gap:38px;margin-top:10px}
.steps-tds--3{grid-template-columns:repeat(3,1fr)}
.step-tds{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--bordo-forte);padding-top:18px}
.step-num{font-family:var(--font-display);font-style:italic;font-size:2.3rem;font-weight:500;color:var(--oro-scuro);line-height:1}
.step-tds h3{font-size:1.4rem;font-weight:600}
.step-tds p{font-size:.93rem;color:var(--ink-soft)}

/* indice province: da libro, con puntini */
.indice-province{columns:4;column-gap:44px;margin-top:8px}
.indice-voce{
  display:flex;align-items:baseline;gap:8px;break-inside:avoid;
  padding:9px 2px;border-bottom:1px dotted var(--bordo-forte);
  color:var(--ink);font-size:.95rem;font-weight:500;
}
.indice-voce::after{content:"";flex:1;order:2}
.indice-nome{order:1}
.indice-num{order:3;font-weight:700;color:var(--oro-scuro);font-size:.85rem}
.indice-num--presto{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--ink-tenue)}
.indice-voce:hover{color:var(--oro-scuro)}

/* gallery a nastro continuo */
.nastro{overflow:hidden;margin-top:40px}
.nastro-track{display:flex;gap:14px;width:max-content;animation:tds-scorri 48s linear infinite}
.nastro:hover .nastro-track{animation-play-state:paused}
.nastro-track img{height:270px;width:auto;border-radius:12px;box-shadow:var(--ombra)}

/* recensioni: fascia espresso con volti veri e citazioni serif */
.sezione--espresso{background:var(--espresso)}
.titolo-sezione--chiaro{color:#F4ECDD}
.titolo-sezione--chiaro em{color:#E9BE79}
.recensioni-tds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.recensione-tds{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  background:var(--bianco);border:1px solid rgb(224 164 88/.4);border-radius:12px;
  padding:30px 26px 20px;box-shadow:0 18px 44px rgb(0 0 0/.35);height:100%;
}
.recensione-tds::before{
  content:"";position:absolute;inset:7px;border:1px solid rgb(171 116 44/.3);
  border-radius:8px;pointer-events:none;
}
.citazione-stelle{color:var(--ambra);font-size:.92rem;letter-spacing:.2em}
.recensione-tds blockquote{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:1.14rem;line-height:1.45;color:var(--ink);text-wrap:balance;
}
.recensione-tds blockquote::before{content:"“";color:var(--oro-scuro)}
.recensione-tds blockquote::after{content:"”";color:var(--oro-scuro)}
.recensione-tds figcaption{
  margin-top:auto;padding-top:14px;width:100%;border-top:1px solid var(--bordo);
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-scuro);
}

/* manifesto (dalla landing) */
.manifesto{max-width:680px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.manifesto-rule{color:var(--oro-scuro);font-size:.85rem}
.manifesto-kicker{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--oro-scuro)}
.manifesto-testo{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(1.5rem,3vw,2rem);line-height:1.3}
.manifesto-sub{color:var(--ink-soft);font-size:.95rem}
.manifesto .btn{margin-top:10px}

/* ════ ACADEMY: programma del corso, non lista-app ════ */
/* testa compatta (7 ago): titolo testuale al posto del logo piccolo,
   margini stretti così le prime lezioni si vedono senza scendere */
.academy-testa--centro{align-items:center;text-align:center;gap:6px;margin:0 auto 26px}
.academy-titolo{font-size:1.9rem;line-height:1.15}
.academy-testa--centro .academy-progress{margin-inline:auto}
.modulo-testa--centro{align-items:center;text-align:center;gap:8px;margin-bottom:20px}
.modulo-testa--centro .evento-titolo{margin-bottom:0}
.modulo-rule{display:flex;align-items:center;gap:14px;color:var(--oro-scuro);font-size:.7rem;width:100%;max-width:360px;margin-inline:auto}
.modulo-rule::before,.modulo-rule::after{content:"";height:1px;flex:1;background:var(--bordo-forte)}
.lezioni-griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lezione-card{
  position:relative;display:flex;gap:18px;align-items:flex-start;
  background:var(--bianco);border:1px solid var(--bordo);border-radius:12px;
  padding:20px 22px;color:var(--ink);box-shadow:var(--ombra);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.lezione-card::before{content:"";position:absolute;inset:6px;border:1px solid rgb(171 116 44/.22);border-radius:8px;pointer-events:none}
.lezione-card:hover{transform:translateY(-3px);box-shadow:var(--ombra-su);border-color:var(--bordo-forte);color:var(--ink)}
.lezione-card .lezione-num{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:2.2rem;line-height:1;color:var(--oro-scuro);flex:0 0 auto;min-width:1.4ch;text-align:center;
}
.lezione-card-testi{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.lezione-card-testi h3{font-family:var(--font-ui);font-size:.98rem;font-weight:700;line-height:1.35}
.lezione-card-desc{font-size:.82rem;color:var(--ink-tenue)}
.lezione-card-meta{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-tenue)}
.lezione-card-meta .vista{color:var(--verde)}
.lezione-card-meta .da-vedere{color:var(--oro-scuro)}

@media (max-width:1080px){
  .steps-tds{grid-template-columns:repeat(2,1fr);gap:28px}
  .indice-province{columns:3}
  .lezioni-griglia{grid-template-columns:1fr}
}
@media (max-width:760px){
  .steps-tds{grid-template-columns:1fr}
  .indice-province{columns:2;column-gap:26px}
  .nastro-track img{height:190px}
  .citazioni-minori{grid-template-columns:1fr}
  .tavola-data strong{font-size:2rem}
  .tavola-citta{font-size:1.5rem}
  /* listing mobile a 2 colonne: invito compatto — il padding tiene i testi
     staccati dalla cornice dorata interna (inset 7px)
     (le regole di data/CTA mobile stanno nel blocco ≤760 in coda al file) */
  .listing-risultati .tavola-corpo{padding:13px 16px 13px;gap:5px}
  .listing-risultati .tavola-citta{font-size:1.08rem}
  .listing-risultati .tavola-zona{font-size:.55rem}
  .listing-risultati .tavola-prezzo{font-size:.68rem}
  .listing-risultati .tavola-prezzo strong{font-size:.95rem}
  .listing-risultati .tavola-piede{padding-top:9px}
}

/* ════════════════════════════════════════════════════════════════════════
   CARD-INVITO CON FOTO DEL LOCALE (richiesta del committente, 23 lug 2026)
   La cornice dorata resta e incornicia anche la foto, come una cartolina.
   ════════════════════════════════════════════════════════════════════════ */
.tavola-cornice{padding:0;gap:0}
.tavola-cornice::before{z-index:2}
.tavola-foto{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:11px 11px 0 0}
.tavola-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tavola-card-link:hover .tavola-foto img{transform:scale(1.045)}
.tavola-corpo{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:16px 18px 14px;flex:1;width:100%;
}
/* card compatta (23 lug): niente numerone — la data è una riga corsiva oro */
.tavola-corpo .tavola-citta{font-size:1.32rem}
.tavola-quando{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:1.05rem;line-height:1.2;color:var(--oro-scuro);
}
.tavola-corpo .tavola-piede{padding-top:12px}
/* su desktop la CTA è testuale, l'icona compare solo su mobile */
.tavola-cta-icona{display:none}

/* ════════════════════════════════════════════════════════════════════════
   SCHEDA PRODOTTO (struttura del committente, 23 lug 2026)
   ════════════════════════════════════════════════════════════════════════ */
.btn-caps{text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;font-weight:700}

/* barra acquisto: prezzo solo tipografico color oro scuro —
   il chip con fondo sembrava un secondo tasto accanto a "Prenota" */
.acquisto-bar-prezzo strong{background:none;padding:0;border-radius:0;font-size:1.35rem;font-weight:600;color:var(--oro-scuro)}
/* iPhone (round 4, 8 ago — ricostruzione tempi di deploy): la combinazione
   MAI provata sul telefono era fixed + viewport-fit=cover, cioè il pattern
   documentato da Apple per il Safari con la barra flottante: col cover il
   layout viewport arriva al bordo fisico, fixed bottom:0 ci si aggancia, e
   il padding env(safe-area-inset-bottom) della barra (style.css) tiene i
   contenuti sopra l'indicatore — la pillola di Safari fluttua SOPRA il
   fondo bianco della barra, come nelle app native. Lo sticky del round 3
   era un errore: si aggancia al viewport VISUALE, che iOS taglia sopra la
   pillola — riproduceva esattamente il sintomo. Resta: niente blur (fondo
   quasi opaco basta). Il pill desktop (≥901px) è fixed da sempre. */
/* ═══ VERDETTO iPhone (round 6, chiuso col test diagnostico dell'8 ago) ═══
   Il test coda-rossa + bordo-blu ha dimostrato che Safari iOS CLIPPA il
   layer degli elementi fissi al bordo del suo viewport visuale: la
   striscia di pagina attorno alla pillola dei comandi è disegnata dal
   layer di scroll — fuori dalla tela del sito, nessun CSS può coprirla,
   identico su ogni sito. SOLUZIONE DI DESIGN (proposta di Davide, round
   7): la barra diventa una PILLOLA FLOTTANTE staccata da lati e fondo,
   bordi tondi — la pagina che si vede attorno diventa una scelta voluta,
   stesso linguaggio della pill desktop e della pillola di Safari. */
@media (max-width:900px){
  .acquisto-bar{
    left:max(14px,env(safe-area-inset-left));
    right:max(14px,env(safe-area-inset-right));
    bottom:calc(12px + env(safe-area-inset-bottom));
    background:rgb(255 250 241/.97);backdrop-filter:none;
    border:1px solid rgb(171 116 44/.5);border-radius:999px;
    box-shadow:0 14px 36px rgb(43 33 24/.28);
    padding:8px 9px 8px 20px;
  }
  .acquisto-bar .btn{border-radius:999px;padding:.8em 1.4em}
  /* pillola flottante = copre di più a fine pagina: più pavimento */
  .pagina-evento{padding-bottom:88px}
}
/* viewport-fit=cover (header.php): in landscape sui telefoni col notch le
   safe-area laterali entrano nella pagina — i due elementi full-bleed
   fissi le rispettano (max() = mai meno del padding di design) */
.site-header .header-inner{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
/* (la barra mobile gestisce le safe-area laterali coi suoi offset
   left/right da pillola flottante — vedi blocco qui sopra) */
.acquisto-bar-testi{display:flex;flex-direction:column;line-height:1.3}
.acquisto-bar-evento{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-tenue)}
/* su desktop la barra diventa una pill flottante in basso a destra, mostrata
   via JS solo tra la hero e la sezione #prenota (mai invadente) */
@media (min-width:901px){
  .acquisto-bar{
    display:flex;left:auto;right:26px;bottom:24px;width:auto;
    background:rgb(255 250 241/.97);
    border:1px solid rgb(171 116 44/.5);border-radius:999px;
    box-shadow:0 18px 44px rgb(43 33 24/.3);
    padding:8px 9px 8px 22px;gap:18px;
    opacity:0;transform:translateY(14px);pointer-events:none;
    transition:opacity .35s ease,transform .35s ease;
  }
  .acquisto-bar.is-mostrata{opacity:1;transform:none;pointer-events:auto}
  .acquisto-bar .btn{border-radius:999px;padding:.75em 1.5em}
}

/* 1 · hero su foto del locale */
.scheda-hero{position:relative;display:flex;align-items:center;min-height:620px;background:var(--espresso);color:var(--su-scuro);overflow:hidden}
.scheda-hero-foto{position:absolute;inset:0}
.scheda-hero-foto img{width:100%;height:100%;object-fit:cover}
.scheda-hero-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(22 18 16/.74) 0%,rgb(22 18 16/.42) 45%,rgb(22 18 16/.84) 100%);
}
.scheda-hero-inner{
  position:relative;z-index:1;width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(430px,44vw,640px);gap:48px;align-items:center;
  padding-top:calc(var(--header-h) + 48px);padding-bottom:64px;
}
.scheda-hero-testi{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:18px}
.scheda-hero h1{font-size:clamp(2.3rem,4.2vw,3.6rem);color:#F4ECDD;line-height:1.05;text-wrap:balance}
.scheda-hero h1 em{color:#E9BE79}
.scheda-hero .briciole,.scheda-hero .briciole a{color:#B6A892}
.scheda-hero .briciole a:hover{color:#F4ECDD}
.scheda-meta{display:flex;flex-wrap:wrap;gap:10px 12px;max-width:640px}
.scheda-meta li{
  display:flex;align-items:center;gap:9px;font-size:.88rem;font-weight:500;color:#F4ECDD;
  background:rgb(22 18 16/.55);border:1px solid rgb(244 236 221/.22);
  border-radius:10px;padding:.55em 1em;backdrop-filter:blur(8px);
}
.scheda-meta li svg{color:#E9BE79;flex:0 0 auto}
/* prezzo: solo tipografia bianca — l'unico blocco oro della hero è il bottone */
.scheda-prezzo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.scheda-prezzo s{color:#B6A892;font-size:1.05rem}
.scheda-prezzo strong{font-family:var(--font-display);font-size:2.7rem;font-weight:600;line-height:1.1;color:#F4ECDD}
.scheda-prezzo span{font-size:.85rem;color:#DDD1BC}
.scheda-hero-azioni{margin-top:2px}
/* la VSL di Eros vive nella hero, a destra: video 16:9 con cornice carta
   sottile (stile stampa) e titolo in overlay sulla sfumatura — niente box */
.scheda-hero-vsl{width:min(100%,640px)}
.player-vsl{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:var(--espresso);border:7px solid #FFFAF1;
  box-shadow:0 0 0 1px rgb(171 116 44/.5),0 30px 70px rgb(0 0 0/.6);
  display:grid;place-items:center;cursor:pointer;
}
.player-vsl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* il poster di Eros è un frame verticale: l'inquadratura punta al viso */
.scheda-hero-vsl .player-vsl img{object-position:50% 16%}

/* modale video (come nella landing): popup 9:16 su sfondo scuro sfocato */
.video-modale{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:20px}
.video-modale[hidden]{display:none}
.video-modale-sfondo{position:absolute;inset:0;background:rgb(12 8 5/.88);backdrop-filter:blur(8px)}
.video-popup{position:relative;width:min(calc(min(82vh,740px) * 9 / 16),calc(100vw - 2.5rem));aspect-ratio:9/16}
/* variante orizzontale per le videolezioni 16:9 */
.video-popup--orizzontale{aspect-ratio:16/9;width:min(calc(min(80vh,560px) * 16 / 9),calc(100vw - 2.5rem))}
.video-popup-frame{
  width:100%;height:100%;background:#000;border-radius:18px;overflow:hidden;
  border:1px solid rgb(244 236 221/.16);box-shadow:0 40px 120px rgb(0 0 0/.55);
}
.video-popup-frame iframe{width:100%;height:100%;display:block;border:0;background:#000}
.video-popup-close{
  position:absolute;top:.9rem;right:.9rem;z-index:2;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-size:1.5rem;line-height:1;color:#F4ECDD;
  background:rgb(22 18 16/.8);border:1px solid rgb(244 236 221/.3);cursor:pointer;
  transition:transform .25s ease,border-color .2s ease;
}
.video-popup-close:hover{transform:rotate(90deg);border-color:var(--ambra)}

/* invito al video FAQ dentro le FAQ scritte */
.faq-video-cta{
  display:flex;align-items:center;gap:14px;
  width:100%;max-width:560px;margin:0 auto 26px;text-align:left;
  background:var(--bianco);border:1px solid rgb(171 116 44/.45);border-radius:999px;
  padding:9px 20px 9px 9px;box-shadow:var(--ombra);cursor:pointer;
  transition:transform var(--t),box-shadow var(--t);
}
.faq-video-cta:hover{transform:translateY(-2px);box-shadow:var(--ombra-su)}
.faq-video-play{
  width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--ambra);color:#221A12;
}
.faq-video-testi{flex:1;font-size:.9rem;color:var(--ink-soft)}
.faq-video-testi strong{color:var(--ink)}
.faq-video-durata{font-size:.75rem;font-weight:700;color:var(--ink-tenue)}
.player-vsl .player-play{position:relative;z-index:1;width:68px;height:68px;margin-bottom:34px}
.vsl-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:3px;text-align:left;
  padding:46px 16px 13px;
  background:linear-gradient(180deg,transparent,rgb(22 18 16/.92));
  pointer-events:none;
}
.vsl-overlay strong{font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:1.15;color:#F4ECDD}
.vsl-overlay strong em{font-style:italic;font-weight:500;color:#E9BE79}
.vsl-overlay span{font-size:.78rem;color:#DDD1BC}
.player-vsl .player-durata{top:10px;right:10px;bottom:auto}
.player-vsl .player-demo-nota{bottom:auto;top:12px}
/* variante video FAQ: stesso 16:9 in cornice carta, senza overlay testi */
.player-vsl--faq{aspect-ratio:16/9}
.player-vsl--faq .player-play{margin-bottom:0}

/* pulsante play condiviso dai player della scheda */
.player-play{
  position:relative;z-index:2;width:78px;height:78px;border-radius:50%;
  display:grid;place-items:center;background:var(--ambra);color:#221A12;
  box-shadow:0 14px 40px rgb(224 164 88/.45);transition:transform var(--t);
}
.player-vsl:hover .player-play,.lezione-player:hover .player-play{transform:scale(1.06)}
.player-durata{
  position:absolute;right:14px;bottom:12px;z-index:2;font-size:.75rem;font-weight:700;
  color:#F4ECDD;background:rgb(22 18 16/.72);border-radius:6px;padding:.35em .7em;
}
.player-demo-nota{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  width:max-content;max-width:88%;text-align:center;font-size:.72rem;font-weight:600;color:#F4ECDD;
  background:rgb(22 18 16/.88);border:1px solid rgb(233 190 121/.5);border-radius:8px;padding:.6em 1em;
}

/* 3 · immagina la tua serata: 5 card orizzontali */
.serata-passi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.serata-passo{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  background:var(--bianco);border:1px solid var(--bordo);border-radius:12px;
  padding:26px 18px 22px;box-shadow:var(--ombra);
}
.serata-passo::before{content:"";position:absolute;inset:6px;border:1px solid rgb(171 116 44/.22);border-radius:8px;pointer-events:none}
.serata-num{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.55rem;line-height:1;
  color:var(--oro-scuro);background:var(--crema);border:1px solid var(--bordo-forte);
}
.serata-passo h3{font-size:1.12rem}
.serata-passo p{font-size:.86rem;color:var(--ink-soft)}

/* 3 · videorecensioni: 4 card con anteprima che aprono il modale 9:16 */
.sez-testa-sub--chiara{color:#DDD1BC}
.recensioni-video{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.recensione-video{padding:14px 14px 16px;gap:10px;cursor:pointer}
.video-rec-poster{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:8px;overflow:hidden}
.video-rec-poster img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.recensione-video:hover .video-rec-poster img{transform:scale(1.04)}
.video-rec-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgb(22 18 16/.45))}
.player-play--mini{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--ambra);color:#221A12;box-shadow:0 10px 26px rgb(0 0 0/.35);
  transition:transform var(--t);
}
.recensione-video:hover .player-play--mini{transform:translate(-50%,-50%) scale(1.1)}
.video-rec-poster .player-durata{right:8px;bottom:8px;top:auto;z-index:1}
/* play inline: l'iframe Bunny copre il poster dentro la card */
.video-rec-poster iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:2}
.recensione-video.is-riproduzione{cursor:default}

/* 4 · gallery: nastro fotografico in linea (riusa .nastro; il masonry occupava troppo) */

/* 6 · video FAQ: testi + player mini */
.videofaq-split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.videofaq-testi{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.videofaq-lista{display:flex;flex-direction:column;width:100%;margin-top:8px}
.videofaq-lista li{
  display:flex;align-items:baseline;gap:12px;padding:12px 2px;border-top:1px solid var(--bordo-forte);
  font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.22rem;color:var(--ink);
}
.videofaq-lista li::before{content:"✦";font-size:.7rem;color:var(--oro-scuro);font-style:normal}

/* 7 · bonus Academy: prima lezione gratuita (poster fotografico + sfumatura) */
.bonus-academy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.bonus-academy .academy-logo{height:124px;margin-bottom:6px}
.bonus-player{width:min(100%,760px);margin-top:14px;cursor:pointer}
.bonus-player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bonus-player::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(22 18 16/.3) 0%,rgb(22 18 16/.12) 45%,rgb(22 18 16/.6) 100%)}
.bonus-player .player-play,.bonus-player .lezione-player-durata{position:relative;z-index:2}
.bonus-player .lezione-player-durata{position:absolute}
.bonus-eti{
  position:absolute;left:14px;top:12px;z-index:2;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#221A12;background:var(--ambra);border-radius:8px;padding:.5em .9em;
}
.bonus-lezione{font-family:var(--font-display);font-size:1.3rem;font-weight:500;color:#F4ECDD}
.bonus-lezione em{color:#E9BE79}
.bonus-punti{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 36px;margin-top:6px;text-align:left}
.bonus-punti li{display:flex;align-items:center;gap:10px;font-size:.92rem;color:#DDD1BC}
.bonus-punti svg{color:var(--ambra);flex:0 0 auto}

/* 9 · CTA finale su foto piena + riepilogo */
.cta-finale{position:relative;overflow:hidden;background:var(--espresso);padding:108px 0 88px}
.cta-finale-foto{position:absolute;inset:0}
.cta-finale-foto img{width:100%;height:100%;object-fit:cover}
.cta-finale-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(22 18 16/.84),rgb(22 18 16/.55) 50%,rgb(22 18 16/.86));
}
.cta-finale-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.cta-finale h2{font-size:clamp(2.1rem,4.4vw,3.4rem);color:#F4ECDD;text-wrap:balance}
.cta-finale h2 em{color:#E9BE79}
.cta-finale p{color:#DDD1BC;font-size:1.02rem}
.riepilogo-finale{
  display:flex;flex-wrap:wrap;justify-content:center;margin-top:26px;
  background:rgb(22 18 16/.62);border:1px solid rgb(244 236 221/.2);
  border-radius:12px;backdrop-filter:blur(8px);overflow:hidden;
}
.riepilogo-finale > div{display:flex;align-items:center;gap:9px;padding:14px 22px;border-left:1px solid rgb(244 236 221/.14)}
.riepilogo-finale > div:first-child{border-left:0}
.riepilogo-finale dt{display:grid;place-items:center;color:#E9BE79;line-height:1}
.riepilogo-finale dd{margin:0;font-size:.85rem;font-weight:600;color:#F4ECDD}

@media (max-width:1080px){
  /* le 5 card della serata scorrono in orizzontale; il fuori-scala combacia
     col padding del container (28px, 20px sotto i 760) e lascia aria alle ombre */
  .serata-passi{
    display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x proximity;
    margin:0 -28px -22px;padding:14px 28px 44px;scroll-padding-inline:28px;
    scrollbar-width:none;
  }
  .serata-passi::-webkit-scrollbar{display:none}
  .serata-passo{flex:0 0 250px;scroll-snap-align:start}
  /* videorecensioni: sotto i 1080 SEMPRE swiper, mai impilate */
  .recensioni-video{display:flex}
  .swiper-audio{overflow:hidden;margin:-10px -28px -30px;padding:10px 28px 30px}
}
@media (max-width:900px){
  .videofaq-split{grid-template-columns:1fr;gap:34px}
  .scheda-hero-inner{grid-template-columns:1fr;gap:34px;padding-bottom:0}
  /* la card di Eros sborda a cavallo tra la hero e la sezione dopo;
     video quadrato (più alto del 16:9) così play e testi non si toccano */
  .scheda-hero{overflow:visible}
  .scheda-hero-vsl{justify-self:center;position:relative;z-index:2;margin-bottom:-92px}
  .player-vsl{aspect-ratio:1/1}
  .scheda-hero + .sezione{padding-top:150px}
  .riepilogo-finale{flex-direction:column;align-items:stretch}
  .riepilogo-finale > div{border-left:0;border-top:1px solid rgb(244 236 221/.14);justify-content:flex-start}
  .riepilogo-finale > div:first-child{border-top:0}
}
@media (max-width:760px){
  .scheda-hero{min-height:0}
  .scheda-hero-inner{padding-top:calc(var(--header-h) + 40px);padding-bottom:0;gap:28px}
  .scheda-hero-testi{gap:14px}
  .scheda-meta{gap:8px}
  .scheda-meta li{font-size:.78rem;padding:.5em .8em}
  .scheda-prezzo strong{font-size:2.1rem}
  .player-vsl{border-width:5px}
  .vsl-overlay strong{font-size:1.15rem}
  .serata-passi{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
  .swiper-audio{margin-inline:-20px;padding-inline:20px}
  /* CTA di sezione full width su mobile (richiesta 23 lug) — restano inline
     solo i bottoni dentro form, barre e stepper */
  .format-testi .btn,.sez-azione .btn,.manifesto .btn,.banner-regalo .btn,
  .pannello-locali .btn,.footer-cta .btn,.scheda-hero-azioni .btn,
  .cta-finale .btn,main.pagina-404 .btn{width:100%;justify-content:center}
  .scheda-hero-azioni{width:100%}

  /* card mobile: data in testo semplice, niente CTA (tutta la card è cliccabile),
     prezzo centrato nel piede */
  .tavola-quando{font-family:var(--font-ui);font-style:normal;font-weight:600;font-size:.76rem;color:var(--ink-soft)}
  .tavola-cta{display:none}
  .tavola-corpo .tavola-piede{justify-content:center}
  .listing-risultati .tavola-quando{font-size:.66rem}
  .videofaq-lista li{font-size:1.08rem}
  .cta-finale{padding:78px 0 62px}
  .bonus-punti{grid-template-columns:1fr}
  .bonus-academy .academy-logo{height:96px}
}

/* ════════════════════════════════════════════════════════════════════════
   SKIN BIGLIETTERIA PLUGIN (tck) — Task 9
   Il form di woosdl-ticketing (shortcode [tck_biglietteria], dentro
   l'invito-xl) arriva col suo assets/style.css (handle tckeventscss,
   caricato PRIMA di questo foglio — inc/setup.php) e markup fisso che NON
   possiamo toccare (vincolo globale: mai modificare il plugin). Qui lo
   "vestiamo" perché sembri parte dell'invito-xl: carta, filetti oro, serif
   nei titoli, stepper come quelli del mockup, CTA = pillola oro con testo
   espresso. Selettori allineati (o resi più specifici) di proposito rispetto
   a quelli del plugin, per vincere sulla cascata SENZA bisogno di !important
   — vedi i commenti puntuali sotto per i casi dove la specificità conta
   (record assicurazione, #no-tickets-message).
   NON si tocca mai `display` su #submit-button o .tck-record.is-insurance:
   quelle visibilità sono gestite via jQuery show()/hide() (style inline,
   assets/script.js:319-378) — un #submit-button{display:...} qui vincerebbe
   per specificità sull'ID anche PRIMA che il JS giri, con un flash indesiderato.
   ════════════════════════════════════════════════════════════════════════ */

/* il wrapper vive dentro .invito-xl: nessuno sfondo/ombra propri, solo respiro
   e testo allineato a sinistra come .invito-form (l'invito-xl è centrato) */
.invito-xl .wrapper-tck-biglietteria{
  margin-top:18px;width:100%;text-align:left;background:none;box-shadow:none;
}
.wrapper-tck-biglietteria .m-title{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:1.15rem;line-height:1.25;color:var(--ink);
  text-transform:none;letter-spacing:0;margin:2px 0 16px;
}

/* la card bianca + ombra grigia del plugin (fondo #fff, box-shadow 0 0 25px
   rgba(150,150,150,.25), radius 5px, overflow hidden, margin 20px 0 0) NON
   stanno su .carrello-form da sola: stanno su .biglietteria-std .carrello-form
   (assets/style.css:1336, specificità 0,2,0 — .wrapper-tck-biglietteria e
   .biglietteria-std sono la STESSA classe sull'elemento, non due wrapper
   annidati). Un `.carrello-form{margin:0}` isolato (0,1,0) perde sempre
   contro quella regola: qui si pareggia la stessa coppia di classi e si sale
   di specificità con .invito-xl davanti (0,3,0), così i .tck-record
   diventano righe come .riga-bigl invece di restare dentro una card. */
.invito-xl .biglietteria-std .carrello-form{
  background:none;box-shadow:none;border-radius:0;margin:0;overflow:visible;
}
.carrello-form .tck-record{
  padding:16px 2px;border-bottom:1px solid var(--bordo);border-top:0;
}
.carrello-form .tck-record:first-child{border-top:1px solid var(--bordo)}

/* thumb assicurazione (icona scudo del plugin): oro invece del nero di default */
.carrello-form .tck-record.is-insurance svg{color:var(--oro-scuro)}
.carrello-form .thumb-img img{border-radius:8px}

/* titolo/descrizione del tagliando (h4.title del plugin) in Fraunces, come le
   altre intestazioni della scheda — più specifico di ".carrello-form .title"
   del plugin apposta, così vince a prescindere dall'ordine nel foglio */
.carrello-form .tck-heading .title{
  font-family:var(--font-display);font-weight:600;font-size:1.08rem;
  line-height:1.25;color:var(--ink);margin-bottom:4px;
}
.carrello-form .tck-heading .desc{
  font-family:var(--font-ui);color:var(--ink-soft);font-size:.85rem;opacity:1;
}
.carrello-form .tck-heading .desc a{color:var(--vino)}
.carrello-form .tck-heading .tck-flex-center.tck-gap10{color:var(--ink-tenue);font-size:.8rem}
.carrello-form .tck-heading svg{color:var(--oro-scuro)}
.carrello-form .price-promo-txt{color:var(--verde);font-weight:600;font-size:.78rem}

/* prezzo: solo tipografia oro scuro, MAI chip — coerente con .scheda-prezzo */
.carrello-form .tck-footer .tck-price{
  font-family:var(--font-display);font-weight:600;font-size:1.3rem;
  line-height:1.15;color:var(--oro-scuro);text-align:right;
}
.carrello-form .tck-footer .tck-price del{color:var(--ink-tenue);font-weight:400}
.carrello-form .tck-footer .tck-price .sale{color:var(--ink-soft)}

/* stepper ±: stessa forma di .stepper (mockup/style.css), cifra in grassetto
   sans — i selettori con .quantity-btn/.quantity-input (classi) battono per
   specificità quelli del plugin basati sul tipo (button/input) */
.carrello-form .quantity-buttons{
  display:flex;align-items:center;gap:2px;
  border:1px solid var(--bordo-forte);border-radius:999px;padding:3px;
}
.carrello-form .quantity-buttons .quantity-btn{
  width:30px;height:30px;max-height:none;border-radius:50%;
  display:grid;place-items:center;padding:0;
  font-size:1.05rem;font-weight:600;line-height:1;color:var(--vino);background:var(--vino-bg);
  transition:background var(--t),color var(--t);
}
.carrello-form .quantity-buttons .quantity-btn:hover{background:var(--vino);color:#fff}
.carrello-form .quantity-buttons .quantity-input{
  min-width:2.4ch;max-width:2.4ch;width:2.4ch;max-height:none;padding:0;
  text-align:center;font-family:var(--font-ui);font-weight:700;font-size:.95rem;
  border:0;background:none;-moz-appearance:textfield;
}
.carrello-form .quantity-buttons .quantity-input::-webkit-outer-spin-button,
.carrello-form .quantity-buttons .quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* varianti Donna/Uomo: righe come .riga-bigl, non più il box grigio del plugin */
.carrello-form .tck-variants{background:none;padding:0;margin:10px 0 0;border-radius:0}
.carrello-form .tck-variants .tck-variant-item{padding:12px 2px;border-top:1px solid var(--bordo)}
.carrello-form .tck-variants .tck-variant-item + .tck-variant-item{margin-top:0;padding-top:12px;border-top:1px solid var(--bordo)}
.carrello-form .tck-variants .variant-name{font-family:var(--font-ui);font-weight:600;font-size:.95rem;color:var(--ink)}

/* riga assicurazione: card crema come .assicurazione del mockup, non più il
   verde acceso del plugin — selettore a 3 classi come l'originale del plugin
   (.carrello-form .tck-record.is-insurance) per pareggiarne la specificità:
   qui vince perché dichiarato dopo, MAI perché "più preciso" */
.carrello-form .tck-record.is-insurance{
  background:var(--crema);border:1px solid var(--bordo);border-radius:10px;
  padding:14px 16px;margin-top:10px;border-bottom:0;
}
.carrello-form .tck-record.is-insurance:first-child{border-top:1px solid var(--bordo)}

/* CTA finale: stessa pillola oro con testo espresso di .btn.btn-primario —
   sull'elemento <button> (mai toccato da show()/hide(), solo il div
   #submit-button lo è) possiamo styleare anche il layout senza rischi.
   Il div #submit-button ha anche class="submit": il plugin gli dà
   padding:10px (assets/style.css:1082-1084, 0,2,0) — bottone a filo come il
   .btn-block del mockup, non più "annegato" nel padding del plugin. */
.invito-xl .carrello-form .submit{padding:0}
#submit-button{margin-top:18px}
#submit-button button{
  display:flex;align-items:center;justify-content:center;gap:.55em;width:100%;
  font-family:var(--font-ui);font-weight:700;font-size:.82rem;line-height:1;
  text-transform:uppercase;letter-spacing:.12em;
  padding:1.05em 1.7em;border-radius:10px;border:1px solid transparent;
  background:var(--ambra);color:#221A12;cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t);
}
#submit-button button:hover{background:#EDB56B;color:#221A12;box-shadow:0 12px 30px rgb(224 164 88/.4);transform:translateY(-2px)}

/* nota "combinazione sold out": stile discreto — selettore allineato a quello
   del plugin (.select-ticket-options #no-tickets-message) per specificità pari */
.select-ticket-options #no-tickets-message{
  font-family:var(--font-ui);font-size:.82rem;color:var(--ink-tenue);
  text-align:center;margin-top:16px;padding:10px;background:var(--crema);border-radius:10px;
}

/* breakpoint 787px: NON è un valore scelto dal tema, è quello del plugin
   stesso (assets/style.css:2015, @media(max-width:787px)) — sotto quella
   soglia il plugin impila .tck-record-single in colonna (titolo sopra,
   footer sotto) e centra .carrello-form .tck-footer per intero
   (justify-content:center, width:100%): il prezzo finiva "isola" al centro
   della riga invece che allineato a sinistra come nel mockup. Blocco DOPO
   le regole base della skin (gotcha di cascata già documentato in cima al
   file) così vince a specificità pari sul selettore del plugin. */
@media (max-width:787px){
  .carrello-form .tck-footer{justify-content:flex-start}
  .carrello-form .tck-footer .tck-price{text-align:left}
}

@media (max-width:760px){
  .wrapper-tck-biglietteria .m-title{font-size:1.05rem}
  .carrello-form .tck-record{padding:14px 0}
  .carrello-form .tck-heading .title{font-size:1rem}
  .carrello-form .tck-footer .tck-price{font-size:1.15rem;text-align:left}
  .carrello-form .quantity-buttons .quantity-btn{width:32px;height:32px}
}

/* ════════════════════════════════════════════════════════════════════════
   SKIN WOO (checkout + account) — Task 10
   Carrello, checkout e "il mio account" sono pagine Woo native (page.php,
   shortcode [woocommerce_cart]/[woocommerce_checkout]/[woocommerce_my_account]
   dentro le Pagine create da WC_Install::create_pages(), vedi tools/
   seed-woo-pagine.php) — NESSUN template Woo copiato nel tema: qui si veste
   il markup REALE che WooCommerce e il plugin woosdl-ticketing stampano di
   loro (mai modificati, vincolo globale), non le vecchie classi demo del
   mockup (.checkout-card, .account-nav, .woo-tabella… in "ACCOUNT & ACADEMY"
   e "checkout demo" più sopra in questo file/in style.css: restano lì
   invariate ma NON sono più quelle che il browser vede su queste pagine —
   nessuna pagina del tema le stampa più, cambio deciso dal controller nel
   Task 10, non toccato qui perché fuori dal file scope di questo step).
   Stessi token della skin (--oro-scuro, --bianco, --bordo, --ombra, --crema,
   --font-display/--font-ui) e stessa tecnica del blocco SKIN BIGLIETTERIA
   qui sopra: selettori allineati (stessa forma: elemento+classe) o più
   specifici di quelli di WooCommerce per vincere sulla cascata SENZA
   !important — WooCommerce carica prima (wp_enqueue_scripts priorità 10),
   questo foglio dopo (priorità 20, inc/setup.php). Elementi con display
   gestito via JS inline (.payment_box, #woocommerce-checkout-form-coupon)
   NON vengono mai toccati su `display` qui, stesso motivo del gotcha
   #submit-button documentato sopra. */

/* pagina generica (page.php): wrapper di TUTTE le pagine Woo, niente hero
   fotografica → un minimo di respiro sotto l'header fisso e un pavimento
   perché il footer non salga su contenuti corti (login, carrello vuoto) */
.pagina-generica{min-height:60vh}
.pagina-generica-titolo{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:28px}

/* ════ TESTATA WOO: account, carrello, cassa (7 ago) ════
   Il titolo "sembrava flottante" sul fondo carta: banda espresso come il
   footer con briciole + titolo serif. In page.php queste tre pagine passano
   header_fisso:false — l'header parte trasparente sopra la banda (le
   briciole ereditano già i colori su-scuro pensati per le hero scure). */
.woo-testata{
  background:linear-gradient(130deg,var(--espresso) 30%,var(--espresso-2) 75%,#2A2018);
  color:var(--su-scuro);
  padding:calc(var(--header-h) + 42px) 0 40px;
}
.woo-testata-inner{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.woo-testata h1{font-size:clamp(2rem,4vw,2.8rem);color:#fff;letter-spacing:0}
/* col titolo in testata la sezione contenuto non deve ridarsi 96px d'aria */
.pagina-woo .sezione{padding-top:48px}
@media (max-width:760px){
  .woo-testata{padding:calc(var(--header-h) + 24px) 0 28px}
  .pagina-woo .sezione{padding-top:32px}
}

/* BUG preesistente del tema (header.php/style.css, Task 2 — non introdotto
   qui) reso visibile per la prima volta da questo task: su ogni pagina Woo
   il <body> porta la classe woocommerce-page (aggiunta da WooCommerce via
   body_class, indipendente dal template) e il foglio di WooCommerce
   (woocommerce-layout.css, caricato PRIMA di tv-skin) contiene
   `.woocommerce-page img{height:auto;max-width:100%}` — specificità (0,1,1),
   UN PUNTO più della nostra `.brand-logo{height:38px}` (0,1,0): vince lei
   anche se dichiarata prima, e il logo (entrambe le varianti, .brand-logo
   -chiaro o -blu, qualunque sia quella visibile) torna alla sua dimensione
   nativa (600×181/183) invece di 38px, sfondando fuori dall'header fisso.
   Verificato isolando i fogli via document.styleSheets in Edge headless:
   con SOLO tv-ossatura+tv-skin il logo è 38px; riabilitando anche
   woocommerce-layout.css torna a 183px — nessun altro dei 21 fogli della
   pagina causa lo stesso effetto. Fix: stessa proprietà, un ancestor in più
   (.site-header .brand-logo, specificità 0,2,0) per superare (0,1,1) senza
   !important — coerente con la tecnica del resto di questo file. Innocuo
   sulle pagine non-Woo (nessuna classe woocommerce-page, la regola in più
   semplicemente non serve lì). Probabile causa anche del logo tagliato a
   390px sulla scheda evento notato "fuori scope" nel report del Task 9
   (stessa classe woocommerce-page su is_product()): non riverificato qui,
   fuori dai file di questo task, ma segnalato nel report. */
.site-header .brand-logo{height:38px;width:auto}

/* notices Woo (messaggi/errori/info) in stile "nota carta": bianco, filetto
   colorato a sinistra, MAI la pillola viola di default. .woocommerce-message
   e .woocommerce-info sono <div> (uno per notice), .woocommerce-error è un
   <ul> con più <li> (una per errore di validazione) — stesso guscio per i
   tre, il colore del filetto cambia per tipo. */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  list-style:none;background:var(--bianco);border:1px solid var(--bordo);
  border-left:3px solid var(--oro-scuro);border-radius:10px;
  padding:16px 20px;margin:0 0 22px;box-shadow:var(--ombra);
  font-family:var(--font-ui);font-size:.92rem;color:var(--ink-soft);
}
.woocommerce-message{border-left-color:var(--verde)}
.woocommerce-error{border-left-color:var(--rosso);flex-direction:column;align-items:flex-start}
/* niente glifo di serie Woo (::before assoluto): si sovrapponeva al testo
   (segnalato 5 ago) e il tipo lo dice già il filetto colorato a sinistra */
.woocommerce-message::before,.woocommerce-info::before,
.woocommerce-error::before,.woocommerce-error li::before{content:none}
.woocommerce-error li{list-style:none;padding:0;width:100%}
.woocommerce-error li + li{margin-top:6px;padding-top:6px;border-top:1px solid var(--bordo)}
/* .woocommerce ancestor in più apposta: senza, pareggerebbe (0,2,1) con
   ".woocommerce a.button" (BOTTONI Woo generici, più sotto in questo file)
   e perderebbe per ordine dichiarativo (quella regola viene dopo). */
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .woocommerce-error a.button{
  float:none;display:inline-flex;align-items:center;margin:0;
  font-family:var(--font-ui);font-weight:600;font-size:.78rem;letter-spacing:.02em;
  padding:.5em 1.1em;border-radius:8px;border:1px solid var(--bordo-forte);
  color:var(--ink);background:var(--bianco);transition:border-color var(--t),color var(--t);
}
.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-info a.button:hover,
.woocommerce .woocommerce-error a.button:hover{
  border-color:var(--ink);color:var(--ink);background:var(--bianco);
}
/* "Hai un coupon? Clicca per inserire il codice" (checkout/form-coupon.php)
   arriva già dentro un .woocommerce-info tramite wc_print_notice(): qui si
   skinna solo il link toggle .showcoupon, MAI il display del form
   (#woocommerce-checkout-form-coupon parte con style="display:none" inline,
   lo apre js/woocommerce.js — stesso gotcha di .payment_box più sotto). */
.woocommerce-info a.showcoupon{font-weight:700;color:var(--oro-scuro);text-decoration:underline;text-underline-offset:2px}

/* ════ FORM (checkout, login, edit account, edit address) ════
   Stesso guscio di .account-form in "ACCOUNT & ACADEMY" (bianco, bordo-forte,
   radius 10px) ma sui selettori REALI di woocommerce_form_field(): <p
   class="form-row …"> con <label> + input.input-text/select/textarea diretti
   (questa versione di WooCommerce non avvolge l'input in
   .woocommerce-input-wrapper). I wrapper dei campi diventano flex-wrap:
   form-row-first/last = due colonne, form-row-wide = riga intera — al posto
   dei float 48%/47% di WooCommerce (woocommerce-layout.css), che un item
   flex ignorerebbe comunque ma con width ereditata sbagliata: width:auto
   qui sotto la neutralizza. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-EditAccountForm,
.checkout_coupon.woocommerce-form-coupon{
  display:flex;flex-wrap:wrap;gap:16px 18px;align-items:flex-start;
}
.woocommerce-EditAccountForm fieldset{
  flex:1 1 100%;display:flex;flex-wrap:wrap;gap:16px 18px;
  border:0;margin:8px 0 0;padding:20px 0 0;border-top:1px solid var(--bordo);
}
.woocommerce-EditAccountForm fieldset legend{
  width:100%;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);padding:0;margin-bottom:2px;
}
.form-row{padding:0;margin:0;flex:1 1 100%;width:auto;float:none}
.form-row-first,.form-row-last{flex:1 1 calc(50% - 9px);width:auto;float:none}
.form-row-wide{flex:1 1 100%;width:auto;float:none}
.woocommerce div.clear,.woocommerce-EditAccountForm div.clear{display:none}
.checkout_coupon .form-row-first{flex:1 1 220px}
.checkout_coupon .form-row-last{flex:0 0 auto}

.woocommerce form .form-row label:not(.checkbox){
  display:block;margin-bottom:6px;
  font-family:var(--font-ui);font-size:.76rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-tenue);line-height:1.3;
}
.woocommerce form .form-row label .required{color:var(--rosso);text-decoration:none}
.woocommerce form .form-row label .optional{text-transform:none;font-weight:400;letter-spacing:0;color:var(--ink-tenue)}
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select:not(.select2-hidden-accessible),
.woocommerce form .form-row textarea{
  width:100%;background:var(--bianco);border:1px solid var(--bordo-forte);border-radius:8px;
  padding:.8em 1em;font-family:var(--font-ui);font-size:.95rem;color:var(--ink);
  transition:border-color var(--t);
}
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus{border-color:var(--oro-scuro);outline:0}
.woocommerce form .form-row textarea{min-height:90px;resize:vertical}

/* checkbox (crea account, spedisci a un indirizzo diverso, termini) */
.woocommerce form .form-row label.checkbox,
.woocommerce-form__label-for-checkbox{
  display:flex;align-items:flex-start;gap:8px;
  font-family:var(--font-ui);font-size:.85rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ink-soft);cursor:pointer;
}
.woocommerce form .input-checkbox,.woocommerce-form__input-checkbox{
  margin-top:3px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--oro-scuro);cursor:pointer;
}
.woocommerce-terms-and-conditions-wrapper{margin-top:6px}
#ship-to-different-address{border:0;padding:0;margin:0 0 4px;flex:1 1 100%}
#ship-to-different-address label{text-transform:none;font-weight:400}

/* select2 (paese/regione fatturazione): stesso involucro degli input, mai il blu di default */
.select2-container--default .select2-selection--single{
  background:var(--bianco);border:1px solid var(--bordo-forte);border-radius:8px;height:47px;
}
/* FIX (round 2, punto 3 — "Torino" disallineata nella select provincia):
   __rendered arrivava con padding-top/padding-bottom:.5em (7.6px ciascuno)
   dal foglio nativo `:where(.woocommerce) .select2-container
   .select2-selection--single .select2-selection__rendered` (woocommerce.css
   — :where() azzera la specificità del prefisso, quindi la selettore pesa
   come i suoi 3 discendenti-classe, 0,3,0). Il NOSTRO stesso selettore ha
   PARI specificità (0,3,0 anche): sulla proprietà `padding-left` vincevamo
   già (dichiarata qui sotto, ultima nel cascade), ma padding-top/bottom non
   li toccavamo affatto — restavano quelli nativi. Risultato verificato in
   sessione reale: line-height:47px (giusto) + padding verticale 7.6+7.6 in
   più ⇒ il rendered alto 62px dentro un contenitore di 47px, testo spinto
   verso l'alto invece che centrato. Fix: padding-top/bottom:0 espliciti, la
   riga si centra SOLO con line-height (tecnica standard su singola riga).
   padding-right esplicito per lasciare fiato alla freccetta invece di
   dipendere dall'ordine fra select2.css e woocommerce.css. */
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:47px;padding-left:14px;padding-right:34px;padding-top:0;padding-bottom:0;
  color:var(--ink);font-family:var(--font-ui);font-size:.95rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:45px;right:6px}
/* stato focus/aperto coerente con gli altri input del form (nessuna regola
   nativa lo copre per la variante --single: verificato, esiste solo per
   --multiple con un default nero secco). */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--oro-scuro)}
.select2-container--open .select2-dropdown,.select2-dropdown{border-color:var(--bordo-forte);font-family:var(--font-ui)}
.select2-results__option{padding:8px 14px;font-size:.92rem;color:var(--ink)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:var(--oro-scuro);color:#FFF8EC}
.select2-search--dropdown{padding:8px}
.select2-search--dropdown .select2-search__field{
  border:1px solid var(--bordo-forte);border-radius:6px;padding:.5em .7em;
  font-family:var(--font-ui);font-size:.88rem;color:var(--ink);
}

/* FIX (round 2, punto 4 — telefono: bandiera e prefisso sovrapposti al
   numero). Libreria intl-tel-input (woosdl-ticketing, handle phoneint-js):
   monta un wrapper .iti attorno a input#billing_phone con dentro
   .iti__flag-container (position:absolute, left:0, width 48px — bandiera +
   freccetta del menu a tendina paesi). La libreria riserva lo spazio con la
   sua stessa regola `.iti--allow-dropdown input{padding-left:52px}`
   (intlTelInput.min.css, 0,1,1) — ma il nostro
   `.woocommerce form .form-row .input-text{padding:.8em 1em}` (0,3,1) la
   batte per specificità e riporta il padding-left a 1em (15.2px). Con appena
   15.2px di spazio l'inizio del testo/placeholder finisce SOTTO il
   flag-container (che in stacking order, essendo dopo l'input nel DOM,
   dipinge sopra): bandiera e cifre si accavallano e si clippano a vicenda —
   verificato in sessione reale con getBoundingClientRect (flag-container
   0-48px, input padding-left 15.2px) e getComputedStyle(input,'style') (NON
   c'è alcun padding inline settato dalla libreria in questa versione, quindi
   niente da rispettare: il valore in gioco è solo quello dei fogli CSS).
   La verticale del flag è già corretta di suo (.iti__selected-flag è
   display:flex;align-items:center della libreria, centrato senza bisogno di
   ritocchi — verificato: bandiera e contenitore condividono lo stesso
   centro). Fix mirato: si allarga SOLO il padding-left, scoped a `.iti`
   perché il selettore vale per qualunque campo telefono con questo widget
   (checkout, edit-address), non solo billing_phone. */
.woocommerce form .form-row .iti input.input-text{padding-left:56px}
/* dropdown bandiere: font coerente col resto del form, mai il default del
   browser (nessun default Woo lo tocca, la libreria imposta solo posizione/
   ombra/bordo — vedi intlTelInput.min.css, invariati). */
.iti__country-list{font-family:var(--font-ui);font-size:.88rem;color:var(--ink)}

/* ════ BOTTONI Woo generici: fantasma per le azioni secondarie (aggiorna
   carrello, applica coupon, vedi/annulla ordine…), oro pieno per la CTA
   principale (.alt — procedi al checkout, effettua ordine, paga ordine).
   Selettore nella stessa forma di quello di WooCommerce (elemento+classe,
   dentro .woocommerce) per pareggiarne la specificità: qui vince perché
   dichiarato dopo (tv-skin carica dopo gli stili Woo), MAI per !important. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
  float:none;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-ui);font-weight:600;font-size:.85rem;line-height:1;
  padding:.85em 1.5em;border-radius:10px;border:1px solid var(--bordo-forte);
  background:var(--bianco);color:var(--ink);box-shadow:none;text-shadow:none;
  transition:border-color var(--t),color var(--t),background var(--t);
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{
  border-color:var(--ink);color:var(--ink);background:var(--bianco);
}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
#place_order{
  border-color:transparent;background:var(--ambra);color:#221A12;font-weight:700;
  letter-spacing:.02em;padding:1.05em 1.9em;
  transition:transform var(--t),box-shadow var(--t),background var(--t);
}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
#place_order:hover{
  background:#EDB56B;color:#221A12;box-shadow:0 12px 30px rgb(224 164 88/.4);transform:translateY(-2px);
}
.woocommerce table.my_account_orders .button.pay{border-color:transparent;background:var(--ambra);color:#221A12;font-weight:700}
.woocommerce table.my_account_orders .button.pay:hover{background:#EDB56B}

/* ════ CARRELLO + CHECKOUT: tabelle in stile "carta" ════
   table.shop_table è condivisa da carrello, riepilogo checkout E tabella
   ordini di "il mio account" (stessa classe nei rispettivi template Woo):
   un solo blocco veste tutte e tre. border-collapse:separate + border-spacing:0
   restano quelli di WooCommerce (woocommerce.css) apposta: con quelli
   overflow:hidden ritaglia davvero gli angoli arrotondati, cosa che NON
   succede in modo affidabile con border-collapse:collapse. */
table.shop_table{
  border:1px solid var(--bordo);border-radius:12px;border-spacing:0;
  margin:0 0 24px;background:var(--bianco);box-shadow:var(--ombra);overflow:hidden;
  font-family:var(--font-ui);
}
table.shop_table th{
  font-family:var(--font-ui);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-tenue);padding:14px 18px;background:var(--crema);border-top:0;
}
table.shop_table td{padding:14px 18px;border-top:1px solid var(--bordo);color:var(--ink-soft);vertical-align:middle}
table.shop_table tbody tr:first-child td{border-top:0}
table.shop_table .product-name a{color:var(--ink);font-weight:600}
table.shop_table .product-name a:hover{color:var(--oro-scuro)}
table.shop_table .product-thumbnail img{border-radius:8px;width:64px;height:auto}
/* colonne remove/thumbnail STRETTE (richiesta committente 4 ago): il vero
   bug del carrello (spazio enorme, vedi commento su td.actions più sotto)
   non è la mancanza di queste larghezze, ma senza un hint esplicito
   product-remove riceverebbe comunque più spazio del necessario da
   table-layout:auto anche a bug risolto — qui si fissano a un valore
   contenuto e prevedibile. */
table.shop_table.cart .product-remove{width:46px}
table.shop_table.cart .product-thumbnail{width:88px}
table.shop_table .remove{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;color:var(--ink-tenue);font-size:1.15rem;line-height:1;text-decoration:none;
  transition:background var(--t),color var(--t);
}
table.shop_table .remove:hover{background:rgb(194 69 60/.12);color:var(--rosso)}
table.shop_table tr.order-total th,table.shop_table tr.order-total td,
.woocommerce-checkout-review-order-table tr.order-total th,.woocommerce-checkout-review-order-table tr.order-total td{
  border-top:1px solid var(--bordo);padding-top:16px;
  font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--ink);
}
table.shop_table tr.order-total td{color:var(--oro-scuro)}
.woocommerce-Price-amount{font-weight:inherit}

/* riga azioni carrello (coupon + aggiorna carrello) — CAUSA VERA
   dell'enorme spazio vuoto segnalato dal committente (4 ago): td.actions ha
   colspan="6" (span su tutte le colonne della riga). Renderlo display:flex
   "blockifica" la cella (una internal-display table-cell non può restare
   tale con un display esterno diverso) e Chrome smette di trattarla come
   una vera table-cell ai fini dell'algoritmo di table-layout:auto: tutta la
   larghezza richiesta dal contenuto (form coupon + bottone) viene scaricata
   sulla PRIMA delle 6 colonne dello span (product-remove), che passava da
   ~40px "naturali" a ~500px — schiacciando nome/prezzo/quantità/subtotale
   sulla destra. Verificato in sessione reale con getBoundingClientRect:
   forzare `display:table-cell` sulla cella riporta l'intera riga a 1182px
   (tutta la tabella) invece di 44px. Fix: NIENTE display qui apposta (resta
   table-cell, l'unico modo per spaziare correttamente sul colspan) — coupon
   e bottone "Aggiorna carrello" restano affiancati mettendo .coupon in
   inline-flex (box inline, non blockifica l'ancestor) accanto al bottone
   (già inline-flex per la regola generica dei bottoni Woo più sopra): due
   box inline vanno a capo da soli a corto di spazio, come due parole in un
   paragrafo, senza bisogno di flex-wrap su un genitore. */
.woocommerce-cart-form td.actions{padding:20px 18px}
/* .coupon (e il suo input) non passano MAI da .form-row: sono figli diretti
   di td.actions, quindi non ricevono l'aspetto "form" definito più sopra
   (bordo-forte arrotondato, padding) né le nostre regole di larghezza —
   perdono contro woocommerce-layout.css/woocommerce.css che hanno selettori
   più specifici (`.woocommerce table.cart td.actions .coupon{float:left}`,
   `.woocommerce-cart table.cart td.actions .coupon .input-text{width:80px;
   float:left;border:1px solid #cfc8d8}` — verificato enumerando
   document.styleSheets in sessione reale). Qui sotto si ricalca lo STESSO
   selettore nativo (stessa specificità, vince per ordine: questo foglio è
   accodato dopo) invece di alzare specificità con selettori ad hoc. */
.woocommerce table.cart td.actions .coupon,
.woocommerce-page table.cart td.actions .coupon{
  float:none;display:inline-flex;align-items:center;gap:8px;
  vertical-align:middle;margin:0 14px 10px 0;
}
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout table.cart td.actions .coupon .input-text{
  float:none;width:200px;margin:0;
  border:1px solid var(--bordo-forte);border-radius:8px;
  padding:.65em .9em;font-family:var(--font-ui);font-size:.9rem;color:var(--ink);
}
.woocommerce-cart-form td.actions>button.button{vertical-align:middle;margin-bottom:10px}
.quantity .qty{
  width:64px;background:var(--bianco);border:1px solid var(--bordo-forte);border-radius:8px;
  padding:.6em .5em;text-align:center;font-family:var(--font-ui);font-weight:700;color:var(--ink);
}

/* riepilogo totali carrello: stessa card "acquisto" del resto del sito */
.cart_totals{
  background:var(--bianco);border:1px solid var(--bordo);border-radius:var(--radius);
  padding:22px 24px 24px;box-shadow:var(--ombra-su);
}
.cart_totals h2{font-family:var(--font-display);font-size:1.3rem;margin-bottom:14px}
.cart_totals table.shop_table{background:none;border:0;box-shadow:none;border-radius:0;margin:0}
.cart_totals table.shop_table th,.cart_totals table.shop_table td{background:none;padding:11px 0}
.wc-proceed-to-checkout{margin-top:16px}
.wc-proceed-to-checkout .checkout-button{width:100%}

/* checkout: due colonne (fatturazione | note e intolleranze del plugin) —
   CAUSA VERA delle colonne sfasate segnalate dal committente (4 ago):
   #customer_details porta anche la classe nativa `col2-set` di WooCommerce,
   che in woocommerce-layout.css include un clearfix
   (`.col2-set::before,.col2-set::after{content:" ";display:table}`) pensato
   per i float 48%/48% di default. Sotto `display:grid` quei DUE
   pseudo-elementi diventano ITEM FANTASMA della griglia — stesso bug già
   isolato e risolto qui sotto per `.woocommerce-account .woocommerce`
   (vedi commento "clearfix nativo Woo... item fantasma"), MAI applicato
   però a questo selettore. Con 2 colonne e 4 item totali (::before, .col-1,
   .col-2, ::after) il piazzamento automatico per righe manda ::before in
   riga1/colonna1 (vuota a vista), .col-1 (fatturazione) in riga1/colonna2
   — cioè A DESTRA — e .col-2 (spedizione + campi aggiuntivi del plugin) in
   riga2/colonna1, sotto e a sinistra: esattamente lo screenshot del
   committente (fatturazione a destra, metà sinistra vuota). Verificato con
   getBoundingClientRect in sessione reale: col-1 a x=731 (destra) prima del
   fix, x=121 (sinistra, stessa riga di col-2 a x=731) dopo. Fix: content:none
   sui due pseudo-elementi, stessa tecnica già in uso più sotto in questo
   file. */
.woocommerce-checkout #customer_details.col2-set{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;width:auto;
}
.woocommerce-checkout #customer_details.col2-set::before,
.woocommerce-checkout #customer_details.col2-set::after{content:none}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{float:none;width:auto}
.woocommerce-billing-fields h3,.woocommerce-shipping-fields h3,.woocommerce-additional-fields h3,
#order_review_heading{
  font-family:var(--font-display);font-weight:600;font-size:1.3rem;color:var(--ink);margin:0 0 18px;
}
/* #order_review_heading segue SUBITO #customer_details (fuori dal
   col2-set, verificato nel DOM: niente wrapper/gap nativo tra i due) — senza
   uno stacco il titolo "Il tuo ordine" toccava letteralmente i campi di
   fatturazione sopra. Un filo di respiro editoriale prima della nuova
   sezione, coerente con gap:36px già usato altrove in questa skin. */
#order_review_heading{margin-top:36px}
#ship-to-different-address{margin-bottom:18px}
/* i campi Intolleranze/Note del plugin (#custom_checkout_fields, dentro
   .woocommerce-additional-fields insieme a "Note sull'ordine") arrivano già
   dentro __field-wrapper flex qui sopra: bastano un piccolo distacco visivo
   e la stessa nota a matita per il testo di aiuto sotto ogni campo. */
#custom_checkout_fields{
  flex:1 1 100%;display:flex;flex-wrap:wrap;gap:16px 18px;
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--bordo);
}
#custom_checkout_fields small{font-family:var(--font-ui);font-size:.76rem;color:var(--ink-tenue)}
.woocommerce-additional-fields > p:has(small){flex:1 1 100%;margin:-8px 0 0}

/* riepilogo ordine + pagamento: un'unica card, come .acquisto-card */
#order_review.woocommerce-checkout-review-order{
  background:var(--bianco);border:1px solid var(--bordo);border-radius:var(--radius);
  padding:24px 24px 20px;box-shadow:var(--ombra-su);
}
/* FIX (round 2, punto 1 — "Il tuo ordine" a doppio guscio): la tabella di
   riepilogo restava incorniciata DENTRO la card, un guscio nel guscio.
   Causa: gli stessi selettori qui sotto, con prefisso bare
   `.woocommerce-checkout-review-order-table` (0,1,0), perdevano contro il
   nativo `.woocommerce table.shop_table` (woocommerce.css — border in
   color-mix(), border-radius:5px, box-shadow — specificità 0,2,1):
   verificato enumerando document.styleSheets in sessione reale, bordo/ombra/
   radius del default Woo restavano sovrapposti a quelli della card. Fix:
   si scopa sotto #order_review (l'ID del contenitore, già nel markup, MAI
   aggiunto ad hoc) invece di alzare la specificità con selettori inventati —
   1,1,0 batte 0,2,1 senza sforzo. Stesso destino per #payment qui sotto,
   figlio dello stesso #order_review (ci arriva woocommerce_checkout_payment()
   via l'action 'woocommerce_checkout_order_review'): il nativo
   `.woocommerce-checkout #payment{background:rgba(129,110,153,.14);
   border-radius:5px}` (1,1,0) va spento con lo STESSO selettore per pareggiare
   e vincere per ordine (skin-tavolata.css accodato dopo woocommerce.css),
   altrimenti restava un secondo guscio lilla-grigio sotto la tabella. */
#order_review .woocommerce-checkout-review-order-table{background:none;border:0;box-shadow:none;border-radius:0;margin:0 0 18px}
#order_review .woocommerce-checkout-review-order-table th,
#order_review .woocommerce-checkout-review-order-table td{background:none;padding:11px 0}
#order_review .woocommerce-checkout-review-order-table thead th{background:none;padding-bottom:10px}
.woocommerce-checkout #payment{background:none;border-radius:0}

/* metodi di pagamento: righe come .riga-bigl, non la lista puntata di default */
ul.wc_payment_methods{list-style:none;margin:0;padding:0}
li.wc_payment_method{padding:12px 0;border-top:1px solid var(--bordo)}
li.wc_payment_method label{font-family:var(--font-ui);font-weight:600;font-size:.92rem;color:var(--ink);display:inline-flex;align-items:center;gap:8px;cursor:pointer}
li.wc_payment_method input.input-radio{width:16px;height:16px;accent-color:var(--oro-scuro);cursor:pointer}
/* FIX (round 2, punto 2 — payment_box ancora lilla con la freccetta): il
   selettore nativo è `.woocommerce-checkout #payment div.payment_box`
   (woocommerce.css — background:rgba(129,110,153,.14), radius:2px —
   specificità 1,2,1), e per la freccetta `…div.payment_box::before`
   (1,2,2, content/border-color che disegnano il triangolo). Il nostro
   `.payment_box` bare (0,1,0) perdeva su entrambi. Fix: si ricalca lo STESSO
   selettore nativo (stessa specificità, vince per ordine — MAI !important) —
   tecnica già in uso più sopra in questo file (vedi .coupon in "riga azioni
   carrello"). .payment_box: SOLO aspetto, mai `display` (il plugin/Woo lo
   apre-chiude via jQuery slideDown/slideUp con style inline sull'elemento). */
.woocommerce-checkout #payment div.payment_box{
  background:var(--crema);border-radius:10px;padding:14px 16px;margin-top:8px;
  font-family:var(--font-ui);font-size:.85rem;color:var(--ink-soft);
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
/* eventuali campi dentro un metodo di pagamento (es. bonifico/carta): stesso
   bordo tenue degli altri input invece del lilla di default Woo. */
.woocommerce-checkout #payment div.payment_box input.input-text,
.woocommerce-checkout #payment div.payment_box textarea{border-color:var(--bordo-forte)}
.payment_box p{margin:0 0 8px}
.payment_box p:last-child{margin-bottom:0}
/* FIX (round 2): la riga "Effettua ordine" teneva il padding:1em di default
   Woo (`.woocommerce-checkout #payment div.form-row`, woocommerce.css,
   1,2,1) sopra il nostro `.woocommerce-checkout-payment .form-row.place-order`
   (0,3,0, perdente sulla sola proprietà padding — margin-top e border-top,
   dichiarati SOLO qui, restavano applicati senza contesa). Stesso rimedio:
   selettore nativo scope, con `.place-order` in più per battere 1,2,1. */
.woocommerce-checkout #payment div.form-row.place-order{padding:18px 0 0;margin-top:18px;border-top:1px solid var(--bordo)}
#place_order{width:100%}
.woocommerce-terms-and-conditions-checkbox-text a{color:var(--vino)}
/* testo privacy sotto "Effettua ordine": nota tenue come le altre, non un
   paragrafo a piena forza (nessun default Woo lo tocca, nessuna lotta di
   specificità qui). */
.woocommerce-privacy-policy-text{font-size:.76rem;color:var(--ink-tenue);line-height:1.5}

/* ════ MY ACCOUNT: sidebar come account-nav del mockup + contenuto ════ */
/* FIX (review finale, finding #3): la grid a due colonne si applicava anche
   da SLOGGATI, dove /mio-account/ mostra solo il form di login/registrazione
   (WC_Shortcode_My_Account::output() ritorna dopo wc_get_template(
   'myaccount/form-login.php' ) senza mai chiamare my_account() — niente
   .woocommerce-MyAccount-navigation/-content in quello stato, verificato in
   includes/shortcodes/class-wc-shortcode-my-account.php:44-58). Il div
   .woocommerce conteneva quindi UN SOLO figlio (il blocco di login), che la
   grid piazzava comunque nella prima colonna esplicita (250px): il form
   veniva schiacciato invece di restare a larghezza piena. Scope a
   '.logged-in.woocommerce-account' (classe body nativa di WP per utenti
   autenticati, via body_class() in header.php): la grid due colonne resta
   intatta per chi è loggato, da sloggati il div torna a un blocco normale a
   piena larghezza — le notice di errore login (.woocommerce-error, regola
   più sopra in questo file) ne beneficiano di conseguenza, nessuna regola
   dedicata necessaria. Le regole di piazzamento dei VERI figli (float-reset,
   clearfix, grid-column) restano sotto '.woocommerce-account' senza
   '.logged-in': sono no-op quando quegli elementi non esistono (sloggato),
   quindi non serve scoparle — verificato che non causano nessun effetto
   visibile in quello stato. */
.logged-in.woocommerce-account .woocommerce{
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;align-items:start;
}
/* woocommerce-layout.css impone .woocommerce-account .woocommerce-MyAccount-navigation
   {float:left;width:30%} e .woocommerce-account .woocommerce-MyAccount-content
   {float:right;width:68%} (l'ancestor .woocommerce-account è GIÀ nel selettore
   nativo, non l'abbiamo aggiunto noi): in un contenitore grid il float viene
   ignorato ma la width resta, schiacciando la nav a ~30% dei 250px della
   colonna. Stesso pattern già usato sopra per #customer_details .col-1/.col-2
   e per #customer_login .col-1/.col-2, ma qui NON è una vittoria per
   specificità maggiore: il nostro selettore qui sotto ha la STESSA specificità
   del nativo (0,2,0 contro 0,2,0 — pareggio, verificato leggendo
   woocommerce-layout.css). Vince perché skin-tavolata.css è accodato da
   inc/setup.php su 'wp_enqueue_scripts' a priorità 20, DOPO l'enqueue di
   WooCommerce (priorità di default 10): a parità di specificità decide
   l'ordine dei <link> nell'head, e tv-skin-css è stampato dopo
   woocommerce-layout-css (verificato nell'HTML servito). */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto}
/* FIX (review round 1, task 11): il clearfix nativo Woo
   (.woocommerce:before/:after{content:" ";display:table}, in
   woocommerce.css) sopravvive sotto display:grid e diventa un grid-item
   fantasma che occupa la cella 1,1: nav viene auto-piazzata in colonna 2
   (larga, ~898px) e il contenuto in colonna 1 (stretta, 250px) alla riga
   sotto — confermato con getComputedStyle(wc,'::before') e
   getBoundingClientRect() su sessione autenticata reale, sia su
   /mio-account/ che /mio-account/academy/. content:none toglie il box
   fantasma dal grid; il piazzamento esplicito sui due VERI figli regge
   comunque anche se in futuro comparisse/sparisse un altro elemento
   diretto (qui il notices-wrapper vive DENTRO
   .woocommerce-MyAccount-content, non come fratello, ma non ci si affida
   a questo dettaglio). */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after{content:none}
.woocommerce-account .woocommerce-MyAccount-navigation{grid-column:1;grid-row:1}
.woocommerce-account .woocommerce-MyAccount-content{grid-column:2;grid-row:1}
.woocommerce-MyAccount-navigation{
  position:sticky;top:calc(var(--header-h) + 22px);
  background:var(--bianco);border:1px solid var(--bordo);border-radius:12px;
  box-shadow:var(--ombra);overflow:hidden;
}
.woocommerce-MyAccount-navigation ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--bordo);list-style:none}
.woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
.woocommerce-MyAccount-navigation li a{
  display:flex;align-items:center;padding:13px 18px;
  font-family:var(--font-ui);font-size:.92rem;font-weight:500;color:var(--ink-soft);
  border-left:3px solid transparent;transition:background var(--t),color var(--t),border-color var(--t);
}
.woocommerce-MyAccount-navigation li a:hover{background:rgb(171 116 44/.06);color:var(--ink)}
.woocommerce-MyAccount-navigation li.is-active a{
  color:var(--oro-scuro);font-weight:700;border-left-color:var(--oro-scuro);background:rgb(171 116 44/.08);
}
.woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--ink-tenue)}
.woocommerce-MyAccount-content{min-width:0}
.woocommerce-MyAccount-content > p{color:var(--ink-soft);margin:0 0 16px}
.woocommerce-MyAccount-content > p:first-child{
  font-family:var(--font-display);font-size:1.1rem;color:var(--ink);
}

/* "Scarica i tuoi biglietti" (plugin, dashboard account e pagina ordine):
   div.wrapper-download-biglietti > h2 + p (span.title + link svg) — mai
   toccato nel markup, solo vestito come una card carta con righe. */
.wrapper-download-biglietti{
  background:var(--bianco);border:1px solid var(--bordo);border-radius:12px;
  padding:20px 22px;box-shadow:var(--ombra);margin:20px 0 0;
}
.wrapper-download-biglietti h2{font-family:var(--font-display);font-size:1.15rem;margin:0 0 12px}
.wrapper-download-biglietti p{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--bordo);
  font-family:var(--font-ui);font-size:.88rem;color:var(--ink-soft);margin:0;
}
.wrapper-download-biglietti p:last-child{border-bottom:0}
.wrapper-download-biglietti .title{color:var(--ink);line-height:1.4}
.wrapper-download-biglietti a{
  flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:var(--oro-scuro);background:rgb(171 116 44/.1);transition:background var(--t),color var(--t);
}
.wrapper-download-biglietti a:hover{background:var(--oro-scuro);color:#FFF8EC}

/* edit-account / edit-address / login / register: stesso .btn oro del resto
   del sito. .woocommerce-form-login__submit e .woocommerce-form-register__submit
   sono classi BARE (0,1,0) — da sole perdono contro il ghost generico
   ".woocommerce button.button" qui sopra (0,2,1, dichiarato prima ma più
   specifico): il bottone <button class="woocommerce-button button
   woocommerce-form-login__submit"> porta ANCHE class="button", quindi si
   pareggia la stessa coppia .woocommerce + button (0,2,1) e si vince per
   ordine, come .woocommerce-EditAccountForm button[type="submit"] già sopra. */
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-address-fields button[type="submit"],
.woocommerce button.woocommerce-form-login__submit,
.woocommerce button.woocommerce-form-register__submit{
  border-color:transparent;background:var(--ambra);color:#221A12;font-weight:700;
}
.woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-address-fields button[type="submit"]:hover,
.woocommerce button.woocommerce-form-login__submit:hover,
.woocommerce button.woocommerce-form-register__submit:hover{background:#EDB56B;color:#221A12}
.woocommerce-LostPassword{margin-top:14px;font-size:.85rem}
.woocommerce-LostPassword a{color:var(--vino)}
#customer_login .col-1,#customer_login .col-2{float:none;width:auto}
#customer_login.u-columns.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
/* TERZA occorrenza del clearfix-fantasma Woo dentro grid (dopo MyAccount
   loggato e #customer_details del checkout, stessi commenti sopra): il
   ::before di col2-set occupava la cella 1,1 spingendo "Accedi" a destra e
   "Registrati" alla riga sotto (segnalato 5 ago). Spento + piazzamento
   esplicito dei veri figli. */
#customer_login.u-columns.col2-set::before,
#customer_login.u-columns.col2-set::after{content:none}
#customer_login.u-columns.col2-set .col-1{grid-column:1;grid-row:1}
#customer_login.u-columns.col2-set .col-2{grid-column:2;grid-row:1}
#customer_login h2{font-family:var(--font-display);font-size:1.3rem;margin:0 0 16px}

/* breakpoint 760px: NUOVO, dichiarato DOPO tutte le regole base della skin
   Woo qui sopra (stesso ordine imposto dal blocco 787/760px del plugin più
   in alto in questo file) — colonne che tornano a impilarsi, sidebar account
   non più sticky, tipografia dei totali un filo più piccola. */
@media (max-width:760px){
  /* stesso fix di specificità di cui sopra (.woocommerce-page img vs
     .brand-logo), versione mobile: style.css:910 imposta .brand-logo a
     30px in questo stesso breakpoint, stessa perdita di specificità sulle
     pagine Woo. */
  .site-header .brand-logo{height:30px}
  .woocommerce-checkout #customer_details.col2-set{grid-template-columns:1fr}
  .logged-in.woocommerce-account .woocommerce{grid-template-columns:1fr}
  /* sotto i 760px la griglia ha una sola colonna esplicita: senza questo
     reset, grid-column:2 (regola desktop sopra) creerebbe una colonna
     implicita e rimetterebbe nav e contenuto affiancati invece che
     impilati. Selettori con lo stesso prefisso ".woocommerce-account" della
     regola desktop (0,2,0): un selettore bare qui perderebbe per
     specificità nonostante sia dichiarato dopo. */
  .woocommerce-MyAccount-navigation{position:static}
  .woocommerce-account .woocommerce-MyAccount-navigation{grid-column:1;grid-row:1}
  .woocommerce-account .woocommerce-MyAccount-content{grid-column:1;grid-row:2}
  #customer_login.u-columns.col2-set{grid-template-columns:1fr}
  /* a una colonna il piazzamento esplicito desktop va azzerato, o la col-2
     resterebbe inchiodata a una colonna 2 che non esiste più */
  #customer_login.u-columns.col2-set .col-1{grid-column:1;grid-row:auto}
  #customer_login.u-columns.col2-set .col-2{grid-column:1;grid-row:auto}
  .form-row-first,.form-row-last{flex:1 1 100%}
  table.shop_table tr.order-total th,table.shop_table tr.order-total td,
  .woocommerce-checkout-review-order-table tr.order-total th,.woocommerce-checkout-review-order-table tr.order-total td{font-size:1.1rem}
  .pagina-generica-titolo{font-size:1.6rem}
  /* carrello impilato (righe a blocco, prezzo/quantità/subtotale con
     data-title): il foglio smallscreen di WooCommerce (stesso breakpoint,
     768px) rende display:block SOLO tr/td/th di table.shop_table_responsive,
     mai il <table> né il <tbody> — restano display:table/table-row-group.
     Chrome non sa più calcolare una larghezza coerente per un <table> i cui
     figli diretti non sono più celle vere e finisce per dargli un "auto"
     largo quanto il viewport (~390px, verificato in sessione reale),
     eccedendo lo spazio utile dentro .container (con i suoi 20px di
     padding, 350px): il testo a destra di ogni riga (prezzo, "Donna" nel
     nome…) veniva tagliato dall'overflow-x:hidden del body, non da uno
     scroll — segnalato dal committente come "layout rotto" su mobile.
     Fix: width:100% (si adegua al contenitore invece che al proprio
     contenuto) + table-layout:fixed (a quel punto il contenuto va a capo
     invece di spingere il tavolo oltre il contenitore). */
  table.shop_table_responsive{width:100%;max-width:100%;table-layout:fixed}
}

/* ===== LOGHI blindati vs CSS WooCommerce (5 ago 2026) =====
   Sulle pagine Woo (scheda evento, carrello, checkout, account) il core applica
   `.woocommerce img, .woocommerce-page img{height:auto;max-width:100%}` (0,1,1),
   che batte le regole a classe singola (0,1,0): footer-logo e academy-logo
   esplodevano a dimensione naturale. Qui le stesse altezze sono ridichiarate a
   specificità 0,1,1 in CODA al foglio: pareggio con Woo, vince l'ordine (questa
   skin è accodata dopo). Il brand-logo dell'header è già protetto da
   .site-header .brand-logo (0,2,0) più sopra; idem .banner-regalo/.bonus-academy
   .academy-logo (0,2,0), che continuano a vincere anche su queste basi. */
img.footer-logo{height:46px;width:auto}
img.academy-logo{height:76px;width:auto}
img.academy-logo--scuro{height:84px}
@media (max-width:760px){
  img.footer-logo{height:38px}
  img.academy-logo{height:58px}
  img.academy-logo--scuro{height:64px}
}

/* ===== ADMIN BAR (5 ago 2026) =====
   Da loggati la admin bar di WP è fixed in alto (32px; 46px sotto i 783px):
   l'header fisso del tema deve scendere di conseguenza, altrimenti finisce
   coperto dalla barra. */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px}
}

/* ════════════════════════════════════════════════════════════════════════
   PAGINA RISTORANTI — blocchi importati dalla landing locali (ago 2026)
   ════════════════════════════════════════════════════════════════════════ */

/* hero-pagina: hero fotografica scura con claim, CTA e punti ✦ */
.hero-pagina{position:relative;min-height:86vh;display:flex;align-items:center;padding:calc(var(--header-h) + 60px) 0 70px;background:var(--espresso)}
.hero-pagina-foto{position:absolute;inset:0;overflow:hidden}
.hero-pagina-foto img{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero-pagina-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgb(22 18 16/.55),rgb(22 18 16/.2) 45%,var(--espresso))}
/* tutto centrato su ogni misura (richiesta 5 ago: niente impaginato a sinistra) */
.hero-pagina-inner{position:relative;max-width:820px;margin-inline:auto;text-align:center}
.hero-pagina-kicker{font-size:.72rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ambra)}
.hero-pagina-titolo{font-family:var(--font-display);font-weight:600;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.06;color:var(--su-scuro);margin-top:14px}
.hero-pagina-titolo em{font-style:italic;font-weight:500;color:var(--ambra)}
.hero-pagina-sub{margin-top:18px;max-width:580px;margin-inline:auto;font-size:1.06rem;line-height:1.6;color:var(--su-scuro-soft)}
.hero-pagina-sub strong{color:var(--su-scuro);font-weight:700}
.hero-pagina-azioni{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}
.hero-pagina .btn-fantasma{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid rgb(244 236 221/.4);color:var(--su-scuro)}
.hero-pagina .btn-fantasma:hover{border-color:var(--su-scuro);background:rgb(244 236 221/.08);color:var(--su-scuro)}
.hero-pagina-punti{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin-top:30px;padding:0;list-style:none}
.hero-pagina-punti li{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--su-scuro-soft)}
.hero-pagina-punti li span{color:var(--ambra);font-size:.68rem}
@media (max-width:760px){.hero-pagina{min-height:72vh;padding-top:calc(var(--header-h) + 34px)}}

/* marquee città: nastro testuale scorrevole */
.marquee{overflow:hidden;padding:16px 0;background:var(--espresso);border-block:1px solid var(--filetto-scuro)}
.marquee-track{display:flex;width:max-content;animation:tds-scorri 38s linear infinite;white-space:nowrap}
.marquee-track span{font-family:var(--font-display);font-weight:500;font-size:1.05rem;letter-spacing:.06em;color:var(--su-scuro-soft);padding-right:8px}
.marquee-track em{font-style:italic;color:var(--ambra)}

/* video presentazione: player 16:9 centrato in sezione (il video dei locali è
   orizzontale — richiesta 5 ago). aspect-ratio esplicita così vince anche sulla
   variante quadrata mobile .player-vsl{aspect-ratio:1/1} del media ≤1080 */
.player-presentazione{max-width:820px;margin:34px auto 0;aspect-ratio:16/9}

/* vantaggi: card con icona stroke + banda statistiche */
.vantaggi-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.vantaggi-card{background:var(--bianco);border:1px solid var(--bordo);border-radius:12px;padding:26px 24px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--ombra)}
.vantaggi-icona{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:var(--oro-scuro);background:rgb(171 116 44/.12)}
.vantaggi-card h3{font-size:1.18rem;font-weight:600}
.vantaggi-card p{font-size:.93rem;color:var(--ink-soft)}
.stats-banda{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px;padding:26px 10px;border-block:1px solid var(--bordo-forte);text-align:center}
.stats-banda .stat strong{display:block;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:2rem;color:var(--oro-scuro)}
.stats-banda .stat span{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
@media (max-width:900px){.vantaggi-cards{grid-template-columns:repeat(2,1fr)}.stats-banda{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.vantaggi-cards{grid-template-columns:1fr}}

/* regia della serata: timeline ora-per-ora */
.timeline-tds{list-style:none;margin:18px 0 0;padding:0}
.timeline-tds li{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--bordo)}
.timeline-tds li:first-child{border-top:0}
.timeline-ora{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.05rem;color:var(--oro-scuro)}
.timeline-tds h3{font-size:1.05rem;font-weight:600}
.timeline-tds p{font-size:.9rem;color:var(--ink-soft);margin-top:4px}

/* candidatura: card che ospita il modulo (Formidable via InnerBlocks) */
.candidatura-stretta{max-width:760px}
.candidatura-card{background:var(--bianco);border:1px solid var(--bordo-forte);border-radius:12px;padding:34px 30px;box-shadow:var(--ombra);margin-top:26px}
.candidatura-nota{margin-top:14px;text-align:center;font-size:.82rem;color:var(--ink-tenue)}

/* ════ PAGINA DI TESTO (Termini, Privacy, Cookie) ════
   Template page-templates/pagina-testo.php: colonna a misura di lettura con
   testata editoriale e tipografia da documento — la resa del template
   generico era un muro di testo (segnalato da Davide, 5 ago). */
/* main. obbligatorio: anche il body porta la classe pagina-testo (stesso
   gotcha della 404) — senza scoping il padding si applicava due volte,
   216px di vuoto sopra "Documento" (segnalato 7 ago) */
main.pagina-testo{padding-top:calc(var(--header-h) + 34px)}
/* e la .sezione interna non deve sommare i suoi 96px: bastano 14 */
.pagina-testo .sezione{padding-top:14px}
.pagina-testo-colonna{max-width:720px}
.pagina-testo-testa{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:34px}
.pagina-testo-testa h1{font-family:var(--font-display);font-weight:600;font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1.1}
.pagina-testo-meta{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-tenue)}
.pagina-testo-contenuto p{font-size:1rem;line-height:1.75;color:var(--ink-soft);margin-bottom:14px}
.pagina-testo-contenuto strong{color:var(--ink)}
.pagina-testo-contenuto a{color:var(--vino);font-weight:600}
.pagina-testo-contenuto a:hover{color:var(--vino-hover)}
.pagina-testo-contenuto h2{
  font-family:var(--font-display);font-weight:600;font-size:1.45rem;line-height:1.25;
  margin:34px 0 12px;padding-top:22px;border-top:1px solid var(--bordo);
}
.pagina-testo-contenuto h3{font-size:1.05rem;font-weight:700;margin:20px 0 8px}
.pagina-testo-contenuto ul{list-style:none;margin:0 0 14px;padding:0}
.pagina-testo-contenuto ul li{
  position:relative;padding-left:26px;margin-bottom:10px;
  font-size:1rem;line-height:1.7;color:var(--ink-soft);
}
.pagina-testo-contenuto ul li::before{content:"✦";position:absolute;left:2px;top:1px;font-size:.72rem;color:var(--oro-scuro)}
/* nota di bozza (classe messa dal seed): cartiglio ben distinto dal testo,
   sparisce da solo quando la nota viene rimossa dopo la validazione */
.pagina-testo-contenuto .nota-bozza{
  background:rgb(224 164 88/.12);border:1px solid var(--bordo-forte);border-left:3px solid var(--oro-scuro);
  border-radius:12px;padding:16px 18px;font-size:.9rem;line-height:1.6;color:var(--ink);
}
@media (max-width:760px){
  main.pagina-testo{padding-top:calc(var(--header-h) + 16px)}
  .pagina-testo-testa{margin-bottom:24px}
}

/* ════ SCHEDA EVENTO: invito in due zone (richiesta cliente 8 ago) ════
   La parte informativa (data, città, locale, cena) va SEPARATA dal
   "prenotare il posto". Round 2 (cliente, via WhatsApp): SFONDO SCURO da
   "Il tuo invito" a "Il menù della serata" — zona espresso a tutta
   larghezza della card (margini negativi contro il padding 44/46
   dell'invito-xl), palette su-scuro/oro come hero e footer; la carta
   bianca della cena ci risalta sopra. Strappo tratteggiato oro chiaro
   sul bordo. La cornice ::before dell'invito-xl passa sopra entrambe le
   zone: da stampa, voluto. */
.invito-testa{
  align-self:stretch;margin:-44px -46px 18px;padding:40px 46px 26px;
  background:linear-gradient(140deg,var(--espresso) 35%,var(--espresso-2) 80%,#2A2018);
  border-bottom:1px dashed rgb(233 190 121/.45);
  border-radius:13px 13px 0 0;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.invito-testa .eyebrow{color:#E9BE79}
/* niente ✦ sull'occhiello "Prenota ora" (cliente, 8 ago: via la stella) */
.invito-testa .eyebrow::before{content:none}
.invito-testa .tavola-data strong{color:#F4ECDD}
.invito-testa .tavola-data strong em{color:#E9BE79}
.invito-testa .tavola-data-sub{color:var(--su-scuro-soft)}
.invito-testa .tavola-rule{color:#E9BE79}
.invito-testa .tavola-rule::before,
.invito-testa .tavola-rule::after{background:var(--filetto-scuro)}
.invito-testa .tavola-citta{color:#F4ECDD}
.invito-testa .tavola-zona{color:var(--su-scuro-soft)}
@media (max-width:900px){
  .invito-testa{margin:-32px -20px 14px;padding:28px 20px 20px}
}

/* ════ SCHEDA EVENTO: la cena vicino alla biglietteria (richiesta 5 ago) ════
   Dentro .invito-testa, sopra la linea di strappo. Round 2 ("troppo
   confusionario, tutto sullo stesso piano"): carta-menù DISTINTA dal resto
   della card — occhiello, PREZZO grande in serif oro come protagonista,
   nota sottile, accordion come piede della carta. Fondo BIANCO ora che
   vive nella zona crema (crema su crema affogava). */
.cena-info{
  align-self:stretch;margin:14px 0 0;padding:20px 22px 0;
  background:var(--bianco);border:1px solid var(--bordo-forte);border-radius:14px;
  display:flex;flex-direction:column;align-items:center;gap:4px;overflow:hidden;
}
/* Round 3 (cliente, 8 ago): il "35" serif grande si confondeva col "25"
   della data — stesso registro, stesso peso, e la gente non legge. Il
   prezzo cena passa a riga informativa in grassetto UI: registro
   completamente diverso dal numerone serif dell'invito. */
.cena-prezzo{font-family:var(--font-ui);font-style:normal;font-weight:700;font-size:1.02rem;line-height:1.3;color:var(--ink)}
.cena-nota{font-size:.8rem;color:var(--ink-soft)}
.cena-menu{align-self:stretch;margin:14px -22px 0;background:var(--bianco);text-align:left}
/* summary come TASTO dorato (cliente, 8 ago: "come fosse pulsante") —
   stessa ambra/testo espresso dei btn-primario; i raggi bassi glieli
   ritaglia già l'overflow:hidden della card */
.cena-menu summary{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;cursor:pointer;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#221A12;background:var(--ambra);
  list-style:none;transition:background var(--t);
}
.cena-menu summary:hover{background:#EDB56B}
.cena-menu summary::-webkit-details-marker{display:none}
.cena-menu summary svg{transition:transform var(--t)}
.cena-menu[open] summary svg{transform:rotate(180deg)}
.cena-menu-testo{padding:16px 26px 18px;border-top:1px solid var(--bordo);font-size:.93rem;line-height:1.7;color:var(--ink-soft)}
.cena-menu-testo p{margin-bottom:6px}
.cena-menu-testo strong{color:var(--ink)}
.cena-menu-testo ul{list-style:none;margin:0 0 10px;padding:0}
.cena-menu-testo ul li{position:relative;padding-left:22px;margin-bottom:5px}
.cena-menu-testo ul li::before{content:"✦";position:absolute;left:2px;top:2px;font-size:.62rem;color:var(--oro-scuro)}

/* ════ LISTING: ricerca libera nella barra filtri (richiesta 5 ago) ════
   Campo a pillola con lente oro, stesso linguaggio della ricerca
   dell'header; dal 7 ago viene PRIMA del select provincia. Il backend
   ?q= esiste dal Task 12; qui c'è solo il campo visibile. */
.barra-filtri-cerca{flex:1;min-width:220px}
.barra-cerca-campo{
  /* min-width:0 obbligatorio: da flex item la pillola ha min-width:auto e
     il min-content dell'input (size nativo ~170px) le impedisce di
     comprimersi — sforava di 74px fuori dal viewport a 390px */
  flex:1;min-width:0;display:flex;align-items:center;gap:6px;
  background:var(--bianco);border:1px solid var(--bordo-forte);border-radius:999px;
  padding:4px 5px 4px 16px;
}
.barra-cerca-campo input[type=search]{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:var(--font-ui);font-size:.9rem;font-weight:500;color:var(--ink);
}
.barra-cerca-campo input::placeholder{color:var(--ink-tenue)}
.barra-cerca-campo input::-webkit-search-cancel-button{display:none}
.barra-cerca-campo button{
  flex:0 0 auto;width:30px;height:30px;border-radius:999px;border:0;
  display:grid;place-items:center;background:var(--ambra);color:#221A12;
  cursor:pointer;transition:background var(--t);
}
.barra-cerca-campo button:hover{background:#EDB56B}
@media (max-width:760px){
  /* riga intera sopra la provincia; serve label.classe per battere il
     flex:1 di ".barra-filtri label" (0,1,1) nel blocco mobile di style.css */
  .barra-filtri label.barra-filtri-cerca{flex:1 1 100%;min-width:0}
  .barra-cerca-campo{padding-left:12px}
}

/* ════ HEADER: icona carrello (richiesta 5 ago) ════
   Vive in .header-azioni tra la ricerca e il bottone account; colori nei due
   stati dell'header (trasparente su scuro / "carta" is-scrolled), badge oro
   col conteggio solo a carrello pieno (markup in header.php). */
.header-carrello{position:relative;display:inline-flex;align-items:center;padding:6px;color:var(--su-scuro);transition:color var(--t)}
.site-header.is-scrolled .header-carrello,.site-header.menu-aperto .header-carrello{color:var(--ink)}
.header-carrello:hover{color:var(--ambra)}
.site-header.is-scrolled .header-carrello:hover{color:var(--oro-scuro)}
.header-carrello-num{
  position:absolute;top:-1px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--ambra);color:#221A12;
  font-size:.62rem;font-weight:700;line-height:1;display:grid;place-items:center;
}

/* ════ SKIN FORMIDABLE FORMS (richiesta 5 ago) ════
   Il form di candidatura (blocco candidatura su /ristoranti/, e qualunque
   altro form Formidable futuro) prende la veste del tema DA QUI: Davide non
   deve toccare gli stili dal pannello Formidable. Classi verificate
   sull'HTML reale della pagina (.with_frm_style, frm_form_field,
   frm_primary_label, frm_half/frm_full, frm_submit, ...). Stessa ricetta
   dei campi del checkout (input bianco, bordo forte, radius 8, focus oro). */
.with_frm_style{--frm-ombra-focus:0 0 0 3px rgb(171 116 44/.15)}
.with_frm_style .frm_form_field{margin-bottom:18px}
.with_frm_style .frm_primary_label{
  display:block;margin-bottom:7px;
  font-family:var(--font-ui);font-size:.74rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tenue);
}
.with_frm_style .frm_required{color:var(--vino)}
.with_frm_style input:not([type=submit]):not([type=button]):not([type=radio]):not([type=checkbox]):not([type=file]),
.with_frm_style select,
.with_frm_style textarea{
  width:100%;background:var(--bianco);border:1px solid var(--bordo-forte);border-radius:8px;
  padding:.8em 1em;font-family:var(--font-ui);font-size:.95rem;color:var(--ink);
  transition:border-color var(--t),box-shadow var(--t);box-shadow:none;
}
.with_frm_style input:not([type=submit]):not([type=button]):not([type=radio]):not([type=checkbox]):not([type=file]):focus,
.with_frm_style select:focus,
.with_frm_style textarea:focus{outline:none;border-color:var(--oro-scuro);box-shadow:var(--frm-ombra-focus)}
.with_frm_style ::placeholder{color:var(--ink-tenue)}
.with_frm_style .frm_description{margin-top:5px;font-size:.76rem;color:var(--ink-tenue)}
.with_frm_style .frm_opt_container label{font-size:.9rem;color:var(--ink)}
.with_frm_style input[type=checkbox],.with_frm_style input[type=radio]{accent-color:var(--oro-scuro)}
/* bottone di invio: come la CTA della landing (pieno, ambra, largo) */
.with_frm_style .frm_submit{margin-top:6px}
/* !important mirati: il foglio GENERATO da Formidable (stile del pannello,
   es. .frm_style_stile-formidable.with_frm_style ...) vince per specificità
   sulle proprietà che imposta (background blu, width auto). Combatterlo a
   selettori e' fragile — cambia col nome dello stile: si blindano le sole
   proprieta' del bottone. */
.with_frm_style .frm_submit button,
.with_frm_style .frm_button_submit{
  width:100%!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ambra)!important;color:#221A12!important;
  border:0!important;border-radius:10px!important;cursor:pointer;
  font-family:var(--font-ui)!important;font-weight:700!important;font-size:.85rem!important;
  letter-spacing:.08em;text-transform:uppercase;padding:1em 1.6em!important;
  box-shadow:none!important;transition:background var(--t),transform var(--t);
}
.with_frm_style .frm_submit button:hover,
.with_frm_style .frm_button_submit:hover{background:#EDB56B!important;color:#221A12!important;transform:translateY(-1px)}
/* messaggi: stessa "nota carta" dei notice Woo (filetto colorato, mai pillole) */
.with_frm_style .frm_message,
.with_frm_style .frm_error_style{
  background:var(--bianco);border:1px solid var(--bordo);border-left:3px solid var(--verde);
  border-radius:10px;padding:14px 18px;margin-bottom:18px;
  font-family:var(--font-ui);font-size:.9rem;color:var(--ink-soft);box-shadow:var(--ombra);
}
.with_frm_style .frm_error_style{border-left-color:var(--rosso)}
.with_frm_style .frm_error{margin-top:5px;font-size:.78rem;color:var(--rosso)}
.with_frm_style .frm_blank_field input,
.with_frm_style .frm_blank_field textarea,
.with_frm_style .frm_blank_field select{border-color:var(--rosso)}