/* ════════════════════════════════════════════════════════════════════════
   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)}

/*
 * 🔴 iOS 26 · la barra degli indirizzi di Safari diventava un vetro trasparente.
 *
 * Scorrendo, la fascia in cima allo schermo — quella dove sta l'indirizzo — lasciava
 * vedere la pagina che scorreva sotto. Non è un difetto di disegno: dalla 26 **Safari
 * decide di che colore tingere la propria barra guardando il CSS della pagina**. Cerca
 * gli elementi `position:fixed` o `sticky` a ridosso del bordo e ne legge due cose:
 * `background-color` e `backdrop-filter`.
 *
 * Il nostro header è proprio così, ed era esattamente la ricetta del vetro: sfondo con
 * alpha **.94** (cioè non opaco) e `backdrop-filter: blur(14px)` ereditato da
 * `style.css`. Safari leggeva «semitrasparente e sfocato» e si tingeva uguale.
 * ⚠️ `<meta name="theme-color">` **non c'entra più niente**: dalla 26 viene ignorato.
 *
 * Qui l'header diventa **opaco** e senza sfocatura — ma solo dove il problema esiste,
 * cioè sui telefoni. Sul desktop il vetro resta com'era: là la barra di Safari non è
 * flottante e non campiona niente.
 *
 * ⚠️ Togliere il blur non toglie niente a vedersi: sotto uno sfondo opaco il blur non
 * si vedeva comunque. Quello che cambia è che la fascia in cima adesso è bianca.
 */
@media (max-width: 900px) {
    .site-header.is-scrolled {
        background: #FFFEFB;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /*
     * 🔴 E il velo di grana **sparisce**, perché è lui che Safari guarda per primo.
     *
     * `body::after` è `position:fixed; inset:0; z-index:9999` — copre tutto lo schermo e
     * sta **sopra l'header**. Misurato a 390px: sfondo `rgba(0,0,0,0)`, opacità `.045`.
     * Safari trova lui per primo a ridosso del bordo, legge «trasparente», e si tinge di
     * conseguenza: l'header opaco qui sotto non lo vedeva nemmeno.
     *
     * ⚠️ **`display:none` è l'unica cosa che lo toglie dal campionamento.** `opacity:0` e
     * `pointer-events:none` no: quegli elementi Safari continua a leggerli. Ridurre
     * l'opacità o spostarlo non serviva a niente.
     *
     * Si perde la grana **sui telefoni**: al 4,5% di opacità su uno schermo da 390px non
     * si vedeva comunque. Sul desktop resta.
     */
    body::after { display: none; }
}
.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}
/* L'approdo dei pulsanti «Prenota» / «Mettiti in lista d'attesa». `scroll-margin-top`
   c'era solo per i `<section>` (style.css), e questa ancora è un `<p>`: senza, la riga su
   cui si atterra finisce sotto l'header fisso, cioè si scrolla e non si vede niente. */
#prenota{scroll-margin-top:calc(var(--header-h) + 16px)}
.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:flex;flex-direction:column;flex:1;width:100%;color:inherit;min-height:0}
.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;
}
/* ⚠️ 26 ago 2026: era `.tavola-card-link:hover .tavola-cornice`, ma la cornice adesso
   AVVOLGE il link (serviva per le «altre date»: un <button> dentro un <a> non e' HTML
   valido). Sull'articolo l'area al passaggio del mouse e' la stessa. */
.tavola-card: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-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}
/* 20 ago 2026: la foto non e' piu' una foto del locale, e' la locandina generata dal
   gestionale — 1080x1188, cioe' esattamente 10/11. Tagliata a 16/9 restava fuori tutto
   quello che ci sta scritto sopra: il titolo in cima e la data col locale in fondo. */
.tavola-foto{display:block;width:100%;aspect-ratio:1/1;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}
/* ════════════════════════════════════════════════════════════════════════
   «PARLANO DI NOI» — 26 agosto 2026
   I loghi delle testate, in fila e centrati. Spenti (grigi e a meta'
   opacita') finche' non ci passi sopra: sono una prova di credibilita',
   non una vetrina di marchi altrui, e a piena forza ruberebbero l'occhio
   al contenuto. Senza logo si legge il nome della testata nel corsivo oro
   di casa, cosi' una riga senza immagine non lascia un buco.
   ════════════════════════════════════════════════════════════════════════ */
/* ⚠️ `.eyebrow` e' `display:inline-flex`: `text-align:center` su di lui non sposta
   niente. Si centra il contenitore, non il testo. */
.rassegna-occhiello{display:flex;justify-content:center;margin:0 0 20px}
.rassegna-loghi{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 44px;
}
.rassegna-voce{display:flex;align-items:center}
.rassegna-link{display:flex;align-items:center;text-decoration:none}
/* ⚠️ width/height in HTML servono a non far ballare la pagina mentre i loghi
   arrivano; qui si rimettono a `auto` e si limita l'ALTEZZA, cosi' loghi di
   proporzioni diverse restano otticamente della stessa taglia. */
.rassegna-logo{
  display:block;width:auto;height:auto;max-height:34px;max-width:150px;object-fit:contain;
  filter:grayscale(1);opacity:.55;
  transition:filter var(--t),opacity var(--t),transform var(--t);
}
.rassegna-link:hover .rassegna-logo{filter:none;opacity:1;transform:translateY(-2px)}
.rassegna-nome{font-family:var(--font-display);font-style:italic;font-size:1.15rem;color:var(--oro-scuro);transition:color var(--t)}
.rassegna-link:hover .rassegna-nome{color:var(--ink)}
/* I due spazi si azzerano SEPARATAMENTE (richiesta di Davide, 26 ago): messa fra due
   sezioni bianche, la rassegna con 96px sopra e 96 sotto lascia un vuoto che sembra un
   errore di impaginazione, ma capita anche di volerla attaccata solo da un lato. */
.rassegna--senza-sopra{padding-top:0}
.rassegna--senza-sotto{padding-bottom:0}

/* Sulla scheda evento: un respiro fra due sezioni, non un capitolo.
   ⚠️ Niente filetto in cima. Ce l'aveva finche' stava in coda, sotto ai correlati; da
   quando sta PRIMA (26 ago) arriva subito dopo la sezione crema dell'acquisto, e il
   cambio di fondo separa gia' — due stacchi a quaranta pixel l'uno dall'altro si
   guardano male. E il respiro sotto e' generoso perche' i correlati possono non esserci
   affatto: in quel caso li' sotto c'e' il piede scuro, e dieci pixel erano un pigia
   pigia. */
.rassegna--compatta{padding:42px 0 38px}
/* scheda evento: «come si svolge» e «parlano di noi» sommavano i loro margini pieni e
   lasciavano un vuoto (3 ott 2026, Davide, con lo scatto): qui si stringono tutti e due */
.pagina-evento .sezione--serata{padding-bottom:20px}
.pagina-evento .rassegna--compatta{padding:20px 0 36px}
@media (max-width:760px){
  .pagina-evento .sezione--serata{padding-bottom:12px}
  .pagina-evento .rassegna--compatta{padding:16px 0 28px}
}
.rassegna--compatta .rassegna-loghi{gap:18px 34px}
.rassegna--compatta .rassegna-logo{max-height:26px;max-width:120px}
.rassegna--compatta .rassegna-nome{font-size:1rem}
/* Sul telefono i loghi vanno a due per riga e con 18/28 si toccavano: sembravano un
   blocco unico invece di cinque testate. Davide, guardandolo: «piu' spazio, cosi' un gap
   differente» — 40px pieni, uguali in orizzontale e in verticale, perche' con due per
   riga lo stacco fra le righe conta quanto quello fra le colonne. */
@media (max-width:600px){
  .rassegna-loghi{gap:40px}
  .rassegna-logo{max-height:26px;max-width:112px}
}
@media (prefers-reduced-motion:reduce){.rassegna-logo{transition:none}}
/* Solo nell'editor: il blocco senza testate dice dove si riempie. */
.tv-blocco-vuoto{
  margin:0;padding:18px 20px;border:1px dashed var(--bordo-forte);border-radius:12px;
  background:var(--crema);color:var(--ink-soft);font-size:.9rem;text-align:center;
}

/* ════════════════════════════════════════════════════════════════════════
   «ALTRE DATE» — 26 agosto 2026
   Una scheda vende piu' serate (229 su 256), e dall'elenco non si vedeva:
   la card mostrava solo la prossima. Striscia sobria in fondo alla
   cartolina, DENTRO la cornice dorata (margini laterali > dei 7px della
   cornice, se no il filetto le passa attraverso). Chiusa e' una riga
   sola; aperta mostra le altre date in colonna, con lo stesso corsivo oro
   della data grande — vocabolario gia' in casa, nessun colore nuovo.
   ════════════════════════════════════════════════════════════════════════ */
/* ⚠️ `align-self:stretch` non e' pignoleria: la cornice e' un flex in colonna con
   `align-items:center`, quindi senza questa riga la striscia prende la larghezza del
   suo testo e il filetto esce piu' corto di quello del prezzo — si vede subito, e
   sembra un pezzo appiccicato invece che parte della cartolina. */
.tavola-altre{align-self:stretch;border-top:1px solid var(--bordo);margin:0 18px 9px}
.tavola-altre-tasto{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  padding:9px 4px 8px;background:none;border:0;cursor:pointer;
  font-family:var(--font-ui);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:lowercase;color:var(--oro-scuro);
  transition:color var(--t);
}
.tavola-altre-tasto:hover{color:var(--ink)}
.tavola-altre-freccia{flex:0 0 auto;transition:transform var(--t)}
.tavola-altre.is-aperta .tavola-altre-freccia{transform:rotate(180deg)}
/* Apertura senza numeri magici: la riga della griglia passa da 0fr a 1fr.
   Niente max-height da indovinare, che con 2 date o con 7 sbaglia sempre. */
.tavola-altre-pannello{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.tavola-altre.is-aperta .tavola-altre-pannello{grid-template-rows:1fr}
.tavola-altre-elenco{
  overflow:hidden;list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
}
.tavola-altre-elenco li{
  display:flex;align-items:baseline;justify-content:center;gap:7px;
  padding:5px 0;line-height:1.2;
}
.tavola-altre-elenco li + li{border-top:1px dotted rgb(171 116 44/.28)}
.tavola-altre-giorno{font-family:var(--font-display);font-style:italic;font-size:.95rem;color:var(--oro-scuro)}
.tavola-altre-ora{font-size:.66rem;font-weight:600;letter-spacing:.1em;color:var(--ink-tenue)}
.tavola-altre-ora::before{content:"·";margin-right:7px;color:var(--bordo-forte)}
@media (prefers-reduced-motion:reduce){
  .tavola-altre-pannello,.tavola-altre-freccia{transition:none}
}

/* 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}
/* «Ultimi posti» nella barra fissa: lo stesso timbro rosso della hero, in piccolo */
.acquisto-bar-ultimi{
  font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.15;
  color:#fff;background:var(--rosso);border-radius:999px;padding:.45em .8em;text-align:center;
  flex-shrink:1;min-width:0;
}
/* data e prezzo non vanno mai a capo: se manca spazio e' il timbro a stare su due righe */
.acquisto-bar:has(.acquisto-bar-ultimi) .acquisto-bar-testi{flex-shrink:0}
.acquisto-bar:has(.acquisto-bar-ultimi) .acquisto-bar-evento,
.acquisto-bar:has(.acquisto-bar-ultimi) .acquisto-bar-prezzo{white-space:nowrap}
.acquisto-bar:has(.acquisto-bar-ultimi) .btn{flex-shrink:0}
.acquisto-bar:has(.acquisto-bar-ultimi){gap:8px}
@media (max-width:900px){.acquisto-bar:has(.acquisto-bar-ultimi) .btn{padding:.8em 1.1em}}
/* sotto i 350px non ci sta: resta il timbro grande in cima alla pagina */
@media (max-width:350px){.acquisto-bar-ultimi{display:none}}
.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%;
  /* Una colonna sola: il video di Eros non e' piu' un riquadro grande mezza schermata
     («troppo impattante», il cliente, 20 ago) ma un invito discreto sotto il pulsante.
     Il testo prende tutta la larghezza utile, con un tetto perche' un titolo lungo su
     1300px diventa illeggibile. */
  display:grid;grid-template-columns:minmax(0,1fr);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;max-width:760px}
.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}
/* La citta' sopra il titolo, piccola: dentro l'H1 era un <em> dorato che su tre righe
   diventava la cosa piu' grossa della pagina. Si trova subito lo stesso — e' la prima
   riga — ma non urla. Margine negativo perche' il gap della colonna la staccherebbe dal
   titolo, e i due sono la stessa cosa. */
.scheda-hero-citta{
  font-family:var(--font-ui);font-size:.8rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#E9BE79;margin-bottom:-10px;
}
.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}
/* «e altre 3 date»: oro, dentro la stessa pillola della data. Non è un secondo bottone —
   il bottone della hero resta uno solo — ma si deve capire che ci si può cliccare. */
.scheda-meta-altre{
  color:#E9BE79;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgb(233 190 121/.45);white-space:nowrap;
}
.scheda-meta-altre:hover,.scheda-meta-altre:focus-visible{text-decoration-color:#E9BE79}
.riepilogo-altre{color:#E9BE79;margin-left:.5em;white-space:nowrap}
/* prezzo: solo tipografia bianca — l'unico blocco oro della hero è il bottone */
/* Una COLONNA: la cifra su una riga, la frase sotto. Prima era un flex che andava a
   capo da solo, e su schermo largo non ci andava (vedi il commento nel template). */
.scheda-prezzo{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.scheda-prezzo-cifra{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:0}
.scheda-prezzo s{color:#B6A892;font-size:1.05rem}
/* Il prezzo pieno, sbarrato, davanti a quello che si paga. Stessa veste del barrato
   che c'era gia' qui sopra, cosi' le due cifre non sembrano due cose diverse. Non e'
   un elemento a se': sta nella stessa riga flex, e il gap lo stacca gia'. */
.scheda-prezzo-listino{color:#B6A892;font-size:1.35rem;font-weight:400;text-decoration-thickness:1px}
.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}
/* Il tetto in ch la tiene su due righe leggibili anche su schermi larghi. L'a-capo
   non dipende piu' da lei: lo fa la colonna qui sopra. */
.scheda-prezzo-nota{margin:0;max-width:54ch;font-size:.85rem;line-height:1.5;color:#DDD1BC}
.scheda-hero-azioni{margin-top:2px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
/* L'invito al video pesa quanto un pulsante secondario: stessa pastiglia scura delle
   informazioni qui sopra, cosi' sta accanto al «Prenota» senza contendergli l'occhio. */
.hero-video{
  display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  padding:.55em .95em .55em .6em;border-radius:999px;
  background:rgb(22 18 16/.55);border:1px solid rgb(244 236 221/.22);backdrop-filter:blur(8px);
  color:#F4ECDD;transition:border-color var(--t),background var(--t);
}
.hero-video:hover{border-color:var(--ambra);background:rgb(22 18 16/.72)}
.hero-video-play{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--ambra);color:#221A12;
}
.hero-video-play svg{margin-left:2px}
.hero-video-testi{display:flex;flex-direction:column;line-height:1.25}
.hero-video-testi strong{font-family:var(--font-ui);font-size:.86rem;font-weight:600}
.hero-video-testi span{font-size:.75rem;color:#B6A892}
.hero-video-durata{
  flex:0 0 auto;margin-left:auto;font-size:.72rem;font-weight:700;color:#B6A892;
  padding-left:12px;border-left:1px solid rgb(244 236 221/.18);
}
/* 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 */
.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}

/* 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 */
.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(5,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}
/* text-align:left esplicito: il blocco intorno (.cta-finale-inner) e' centrato, e il dd
   se lo prende per eredita'. Su una riga sola non si vede; sul telefono l'indirizzo va a
   capo e le due righe si centrano sotto l'icona, che sta a sinistra. Una riga con
   l'icona a sinistra non va mai centrata. */
.riepilogo-finale dd{margin:0;font-size:.85rem;font-weight:600;color:#F4ECDD;text-align:left}

@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}
  /* padding-bottom era 0 per far sbordare la card di Eros nella sezione dopo. Tolta la
     card, il contenuto restava appiccicato al bordo basso della hero. */
  .scheda-hero-inner{grid-template-columns:1fr;gap:34px;padding-bottom:56px}
  /* La card di Eros sbordava fra la hero e la sezione dopo, e quei 150px di respiro
     servivano a farle posto. Senza card, erano un buco. */
  .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:44px;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%}
  /* larga quanto il pulsante sopra: mezza pastiglia in una colonna piena sembra
     un pezzo rimasto indietro, non una scelta. */
  .hero-video{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)}
  /* ⚠️ Le «altre date» seguono la stessa scelta: qui sopra la data principale passa al
     tondo, e lasciare le secondarie in corsivo oro le farebbe sembrare piu' importanti
     di quella grande — la gerarchia si legge prima delle parole. Resta l'oro, che le
     distingue senza gridare. */
  .tavola-altre-giorno{font-family:var(--font-ui);font-style:normal;font-weight:700;font-size:.78rem}
  .tavola-cta{display:none}
  .tavola-corpo .tavola-piede{justify-content:center}
  /* ⚠️ Il nome della città sul telefono restava a 1.32rem: la regola mobile di prima
     (.listing-risultati .tavola-citta) aveva la STESSA specificità di quella desktop
     (.tavola-corpo .tavola-citta) ma veniva prima nel file, e a parità vince l'ultima.
     Qui siamo dopo, e vince davvero. Era una regola morta, e sembrava viva.
     Per questo le quattro misure del listing mobile stanno TUTTE qui e non piu
     sparse: numeri di Davide, 24 ago. Chi le cerca le trova in un posto solo. */
  .listing-risultati .tavola-citta{font-size:.85rem}
  .listing-risultati .tavola-quando{font-size:.8rem}
  .listing-risultati .tavola-zona{font-size:.7rem;line-height:1}
  .listing-risultati .tavola-prezzo{font-size:.8rem}
  .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;
}

/* ════ LE DATE DELLA BIGLIETTERIA (richiesta 20 ago) ════
   Era l'ultimo pezzo rimasto com'e' nel plugin: sette pulsanti grigi in fila,
   `justify-content:space-between` con `width:100%` su ognuno
   (assets/style.css:1116-1133). Sette serate su un telefono non ci stanno, e
   quei pulsanti non possono stringersi oltre il loro contenuto: sbordavano dal
   contenitore trascinandosi dietro tutta la pagina — e' da li' che nasceva lo
   scorrimento orizzontale.

   Il primo rimedio le faceva scorrere dentro se stesse, e ha prodotto due
   difetti con la stessa radice: `overflow` taglia tutto quello che esce dal
   riquadro, quindi l'ombra della data scelta e il bordo dell'ultima carta
   sparivano; e uno scorrimento orizzontale dentro una pagina che scorre in
   verticale nessuno lo cerca, per quanto lo si segnali («non si capisce lo
   scroll»). Rendere visibile la barra di scorrimento non e' bastato.

   Quindi: niente scorrimento, le date VANNO A CAPO. Non c'e' piu' niente da
   tagliare e niente da scoprire — le sette serate si vedono tutte, su una riga
   sul computer e su due o tre sul telefono.

   GRIGLIA, non flex: col flex le carte dell'ultima riga si allargano a riempire
   lo spazio avanzato, e due sabati larghi il doppio dei venerdi sopra sembrano
   un errore («si vedono sballati»). Con `repeat(auto-fill,minmax(96px,1fr))` la
   colonna e' la stessa su tutte le righe: quante ce ne stanno lo decide la
   larghezza, e l'ultima riga resta allineata a quelle sopra anche se e' mezza
   vuota.

   Selettori con `.biglietteria-std` davanti per stare sopra a quelli del
   plugin, che arrivano a tre classi su `.dayn`. */
.biglietteria-std .nav-wrapper-tck{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;
  overflow:visible;padding:0;margin:0 0 16px;
}
.biglietteria-std .nav-wrapper-tck button{
  width:auto;min-width:0;
  padding:11px 14px;border:1px solid var(--bordo);border-radius:12px;
  background:var(--bianco);color:var(--ink-soft);box-shadow:none;cursor:pointer;
  transition:border-color var(--t),box-shadow var(--t),color var(--t);
}
.biglietteria-std .nav-wrapper-tck button:hover{border-color:var(--bordo-forte);color:var(--ink)}
.biglietteria-std .nav-wrapper-tck button.active{
  color:var(--ink);font-weight:600;border-color:var(--oro-scuro);box-shadow:var(--ombra);
}
.biglietteria-std .nav-wrapper-tck .date-wrapper{gap:3px;align-items:center}
.biglietteria-std .nav-wrapper-tck .dayl{
  font-family:var(--font-ui);font-size:.67rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-tenue);
}
.biglietteria-std .nav-wrapper-tck .dayn{
  font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1;color:var(--ink);
}
.biglietteria-std .nav-wrapper-tck button.active .dayn{color:var(--oro-scuro)}
.biglietteria-std .nav-wrapper-tck .daym{
  font-family:var(--font-ui);font-size:.71rem;color:var(--ink-soft);text-transform:capitalize;
}

/* L'etichetta «più in voga», appesa dal JavaScript alla seconda data.

   Ambra PIENA e non oro come il resto del nastro: l'oro qui e' gia' preso, e' il
   colore della data SCELTA (bordo e numero di `button.active`). Un'etichetta d'oro
   accanto a una card d'oro direbbe due cose diverse con lo stesso segno — «sei qui»
   e «guarda questa». Ambra su espresso e' l'unico colore pieno della sezione, ed e'
   quello che il tema tiene da parte per prezzi e promozioni.

   Sta a cavallo del bordo alto, non dentro la card: dentro, la sua riga allungherebbe
   TUTTE le card della riga — nella griglia sono alte uguali — e le altre due
   resterebbero con un buco sopra il giorno. `.ha-voga` (la mette il JavaScript, solo
   quando la pillola c'e' davvero) apre il posto in cima: senza, meta' pillola
   finirebbe sotto il titolo della prenotazione.

   ⚠️ L'etichetta la scrive Davide nel pannello, quindi puo' essere lunga a piacere:
   `max-width` + puntini, se no una parola di troppo esce dalla colonna da 96px e va a
   sbattere sulla card accanto. */
.biglietteria-std .nav-wrapper-tck.ha-voga{padding-top:9px}
.biglietteria-std .nav-wrapper-tck button{position:relative}
.biglietteria-std .nav-wrapper-tck .tv-voga{
  position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:2px 9px;border-radius:999px;
  background:var(--ambra);color:var(--espresso);
  font-family:var(--font-ui);font-size:.58rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}

/* Un titolo lungo dentro una riga flex non si stringe finche' non glielo si
   permette: senza `min-width:0` spinge la riga oltre il contenitore, ed e' la
   seconda strada per cui la pagina finiva a scorrere di lato.

   🔴 `:not(.tck-footer)` NON e' un dettaglio, e' la correzione del 25 agosto 2026.
   Il piede (prezzo + pulsanti della quantita') e' anche lui un `.tck-flex` figlio
   diretto di `.tck-record-single`: senza l'esclusione questa regola lo prendeva in
   pieno e, a tre classi, batteva il `min-width:160px` del plugin
   (assets/style.css:991, due classi). Risultato misurato sul riquadro
   dell'assicurazione: piede largo 37px con dentro pulsanti da 92px, che gli
   uscivano 27px per lato e finivano SOPRA il testo della descrizione
   (17x38px di sovrapposizione a 1280, 15x38 a 900).

   La colonna del testo deve stringersi; il piede no: sotto la larghezza dei suoi
   pulsanti non c'e' niente da guadagnare, solo testo coperto.
   Misura: tools/qa-misure.js, voce «assicurazione». */
.carrello-form .tck-record-single,
.carrello-form .tck-record-single > .tck-flex:not(.tck-footer),
.carrello-form .tck-heading{min-width:0}
.carrello-form .tck-heading .desc{overflow-wrap:anywhere}

.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}

/* 🔴 Una miniatura NON si stringe: è un'immagine, non una frase.
   `.thumb-img` è un elemento flex dentro la colonna del titolo e ha `flex-shrink:1`
   di suo: quando il testo accanto è lungo la riga si stringe e se la porta dietro.
   Il 25 agosto 2026 lo scudo dell'assicurazione era largo **9px invece di 30** —
   Davide: «icona non si vede». ⚠️ Era già rotto prima (12px), la correzione del
   piede quello stesso giorno ha solo stretto ancora la colonna e reso la cosa
   evidente. Il plugin non c'entra: di `.thumb-img` non parla in nessuna riga.
   Misura: tools/qa-misure.js, voce «scudo». */
.carrello-form .thumb-img{flex-shrink:0}

/* 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)}

/* riga del pacchetto (plugin, .tck-pacchetto): card in rilievo, si stacca dai
   posti — Davide, 3 ott 2026: «più in rilievo lato UI». Nessun testo in più:
   nome e prezzo restano quelli del prodotto. La variante scelta si accende. */
.carrello-form .tck-record.tck-pacchetto{
  background:var(--crema);border:1.5px solid var(--oro-scuro);border-radius:var(--radius);
  padding:16px 18px 6px;margin:16px 0 6px;box-shadow:var(--ombra);
}
.carrello-form .tck-record.tck-pacchetto .tck-heading .title{font-size:1.2rem;color:var(--ink)}
.carrello-form .tck-record.tck-pacchetto .tck-footer .tck-price{font-size:1.5rem}
.carrello-form .tck-record.tck-pacchetto .tck-variants .tck-variant-item{
  border-top-color:rgb(171 116 44/.22);margin:0 -8px;padding-left:10px;padding-right:10px;
  border-radius:8px;transition:background var(--t);
}
.carrello-form .tck-record.tck-pacchetto .tck-variant-item:has(.tck-scelta-posto:checked){
  background:#fff;box-shadow:inset 0 0 0 1px var(--oro-scuro);border-top-color:transparent;
}
.carrello-form .tck-record.tck-pacchetto .tck-variant-item:has(.tck-scelta-posto:checked) + .tck-variant-item{border-top-color:transparent}
.carrello-form .tck-record.tck-pacchetto + .tck-record{border-top:0}
/* distintivo «Pacchetto convenienza»: pastiglia a cavallo del bordo, in alto a destra.
   Sta fuori dal flusso e sopra il bordo: non prende spazio al titolo, che va a capo da solo. */
.carrello-form .tck-record.tck-pacchetto{position:relative}
.carrello-form .tck-record.tck-pacchetto .tck-pacchetto-badge{
  position:absolute;top:-11px;right:14px;z-index:1;
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1;
  color:#FFF8EC;background:var(--oro-scuro);border-radius:999px;padding:6px 11px;white-space:nowrap;
}
/* prezzo pieno barrato e risparmio: stessa voce del prezzo, in piccolo */
.carrello-form .tck-record.tck-pacchetto .tck-footer .tck-price del{font-size:.72em;margin-left:8px;text-decoration-thickness:1.5px}
.carrello-form .tck-record.tck-pacchetto .tck-pacchetto-risparmio{
  display:block;font-family:var(--font-ui);font-size:.78rem;font-weight:600;
  color:var(--oro-scuro);margin-top:2px;
}
/* interlinea stretta: il nome del pacchetto è lungo e su telefono va a capo
   (3 ott: «Prenota fino a 8 serate senza acconto Donna» su tre righe larghe) */
.carrello-form .tck-record.tck-pacchetto .tck-heading .title{line-height:1.2;margin-bottom:2px}
.carrello-form .tck-record.tck-pacchetto .variant-name{line-height:1.3;flex:1;min-width:0;padding-right:10px}
.carrello-form .tck-record.tck-pacchetto .tck-heading .desc{line-height:1.45;margin-top:4px}

/* serata già presa (plugin, .tck-serata-presa): al posto delle scelte di quella
   serata. Card crema come l'assicurazione, niente rilievo: non si sceglie niente.
   Dentro, da ADP Sociale, il link per l'amico: stessi pulsanti della bacheca
   (WhatsApp pieno, «copia il link» sottolineato), qui senza il suo foglio. */
.carrello-form .tck-record.tck-serata-presa{
  background:var(--crema);border:1px solid var(--bordo);border-radius:var(--radius);
  padding:16px 18px;margin:12px 0;
}
.carrello-form .tck-record.tck-serata-presa + .tck-record{border-top:0}
.carrello-form .tck-serata-presa .tck-serata-presa-frase{
  margin:0;font-family:var(--font-display);font-size:1.08rem;line-height:1.3;color:var(--ink);
}
.carrello-form .tck-serata-presa .tck-serata-presa-frase strong{font-weight:600}
.carrello-form .tck-serata-presa .adps-serata-presa-invito{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--bordo);
}
.carrello-form .tck-serata-presa .adps-amico-testo{
  flex:1 0 100%;margin:0 0 4px;font-family:var(--font-ui);font-size:.9rem;line-height:1.45;color:var(--ink-soft);
}
.carrello-form .tck-serata-presa .adps-amico-cifra{white-space:nowrap}
.carrello-form .tck-serata-presa .adps-amico-invia{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 20px;border-radius:10px;background:var(--espresso);color:var(--su-scuro);
  font-family:var(--font-ui);font-weight:700;font-size:.9rem;text-decoration:none;
  transition:background var(--t);
}
.carrello-form .tck-serata-presa .adps-amico-invia:hover{background:var(--espresso-2);color:#fff}
.carrello-form .tck-serata-presa .adps-amico-copia{
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  background:none;border:0;font-family:var(--font-ui);font-size:.88rem;color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.carrello-form .tck-serata-presa .adps-amico-copia:hover{color:var(--ink);background:none}

/* 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-record.tck-pacchetto{padding:14px 14px 4px}
  .carrello-form .tck-record.tck-pacchetto .tck-footer .tck-price{font-size:1.35rem}
  .carrello-form .tck-record.tck-pacchetto .tck-footer{padding:4px 0 2px}
  .carrello-form .tck-record.tck-pacchetto .tck-heading .title{font-size:1.1rem}
  .carrello-form .tck-record.tck-serata-presa{padding:14px 14px}
  .carrello-form .tck-serata-presa .adps-amico-invia{flex:1 1 auto}
  .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;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}

/* checkout a due colonne (richiesta 20 ago): a SINISTRA tutto il modulo —
   fatturazione sopra, informazioni aggiuntive sotto — a DESTRA il riepilogo
   con i metodi di pagamento, agganciato in alto mentre si scorre. Prima
   fatturazione e informazioni stavano affiancate e il riepilogo finiva sotto
   tutto: su un modulo lungo, totale e pulsante di pagamento restavano fuori
   schermo, e per pagare bisognava scorrere al buio.
   La griglia sta sul FORM. I suoi figli veri sono due — #customer_details e
   .tv-riepilogo (il contenitore aperto in inc/woocommerce.php) — ma
   WooCommerce ne infila un TERZO quando la validazione fallisce: il suo
   checkout.js mette .woocommerce-NoticeGroup in cima al form. Piazzamento
   esplicito su tutti e tre, così l'avviso prende tutta la larghezza invece di
   finire in una colonna implicita a destra insieme al riepilogo. */
.woocommerce-checkout form.checkout.woocommerce-checkout{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:0 48px;align-items:start;
}
.woocommerce-checkout form.checkout.woocommerce-checkout::before,
.woocommerce-checkout form.checkout.woocommerce-checkout::after{content:none}
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup{grid-column:1/-1;grid-row:1}
.woocommerce-checkout form.checkout > #customer_details{grid-column:1;grid-row:2}
.woocommerce-checkout form.checkout > .tv-riepilogo{grid-column:2;grid-row:2}
/* l'aggancio funziona perché l'area della colonna destra è alta quanto la
   riga, cioè quanto il modulo a sinistra: il riepilogo ci scorre dentro. */
.tv-riepilogo{position:sticky;top:calc(var(--header-h) + 22px)}
/* in cima alla sua colonna il titolo va allineato a «Dettagli di
   fatturazione», non staccato di 36px come quando stava sotto al modulo. */
.tv-riepilogo #order_review_heading{margin-top:0}
/* schermo basso: un riepilogo lungo (molte righe + metodi di pagamento) non
   ci starebbe, e agganciato resterebbe tagliato in fondo senza modo di
   vederlo. Meglio lasciarlo scorrere. */
@media (max-height:700px){
  .tv-riepilogo{position:static}
}
.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.
   !important sul padding perché Woo dichiara
   `.woocommerce-checkout #payment ul.payment_methods{padding:1em}` (woocommerce.css,
   1,2,1): c'è un id, e un id batte qualunque numero di classi — nessuna versione
   di questo selettore può vincere per specificità. */
ul.wc_payment_methods{list-style:none !important;margin:0 !important;padding:0 !important}
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}
/* 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). Rimedio: stesso selettore
   nativo, con `.place-order` in più per battere 1,2,1.
   Dal 20 ago il bottone risale sul blocco dei metodi invece di staccarsene:
   niente filo di separazione e margine negativo, cosi lo stacco lo fanno i
   marchi delle carte e non una riga in piu. */
.woocommerce-checkout #payment div.form-row.place-order{padding:0;margin-top:-15px;border-top:0}
#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}

/* ════════════════════════════════════════════════════════════════════════
   CHECKOUT — il blocco «termini e privacy» sopra «Effettua ordine»
   Tre difetti visti dal committente il 20 ago 2026, tutti nella stessa zona.
   ════════════════════════════════════════════════════════════════════════ */

/* 1 · UN filo solo, non due.
   Sopra «Effettua ordine» ne comparivano due a pochi pixel di distanza: il
   `border-bottom` nativo della lista dei metodi di pagamento
   (`.woocommerce-checkout #payment ul.payment_methods`, woocommerce.css,
   1,2,1) e il nostro `border-top` su `.place-order`, poco più su in questo
   file. La regola del tema che sistema quella lista tocca
   `ul.wc_payment_methods` — l'ALTRA classe che Woo mette sullo stesso <ul> —
   quindi il bordo nativo restava lì, non conteso da nessuno. Si ricalca lo
   STESSO selettore nativo: stessa specificità, vince per ordine (skin
   accodato dopo woocommerce.css). Tecnica già in uso qui sopra per #payment. */
.woocommerce-checkout #payment ul.payment_methods{border-bottom:0}

/* 2 · La casella allineata al testo, e l'asterisco attaccato alla frase.
   La label dei checkbox è `display:flex` (regola più in alto). Nel template
   di Woo (`checkout/terms.php`) dentro quella label ci sono <input>, <span>
   e <abbr class="required">, separati da un `&nbsp;`: in un flex quel
   `&nbsp;` diventa un elemento a sé, e con `gap:8px` l'asterisco finiva
   staccato di una ventina di pixel dalla fine della frase — «del sito web
   ⟶ *». Qui la label torna un blocco normale: il testo scorre come testo e
   l'asterisco sta dove deve. La casella si àncora in posizione assoluta,
   così resta allineata alla PRIMA riga anche quando la frase va a capo,
   invece di scivolare al centro del paragrafo.
   ⚠️ CORRETTA IL 27 AGOSTO: così com'era, questa regola NON HA MAI VINTO, e l'asterisco
   è rimasto staccato per una settimana su tutt'e due le caselle (visto dal committente).
   Il conto della specificità nel commento di prima era sbagliato:
   `.woocommerce form .form-row label.checkbox` non è 0,3,1 ma 0,3,2 — gli ELEMENTI sono
   due, `form` e `label`, non solo `label`. Contro 0,3,2 non c'è ordine che tenga: a
   specificità diversa l'ordine non viene nemmeno guardato. Rimediato aggiungendo
   `.woocommerce form` in testa: 0,4,2, e adesso vince davvero.
   🔴 La lezione, per la prossima volta: scrivere «vince per ordine» vuol dire dichiarare
   che le due specificità sono PARI, e per saperlo va contato OGNI elemento del selettore
   avversario, non solo l'ultimo. Se il conto è sbagliato la regola non fa niente e non lo
   dice: nessun errore, nessun avviso, solo una pagina che resta com'era. */
.woocommerce form .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox.checkbox{
  display:block;position:relative;padding-left:26px;
}
.woocommerce-terms-and-conditions-wrapper label.checkbox input.input-checkbox{
  position:absolute;left:0;top:.18em;margin:0;
}

/* 3 · Il testo della privacy non attaccato alla casella qui sotto.
   Il <p> dentro `.woocommerce-privacy-policy-text` porta i margini di
   paragrafo del tema, che sopra si sommano al bordo e sotto non bastano:
   il respiro lo dà il blocco, una volta sola. */
.woocommerce-privacy-policy-text{margin:0 0 14px}
.woocommerce-privacy-policy-text p{margin:0}

/* ════ 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)}
/* Il tasto che chiude il menù dell'account esiste solo sul telefono: da 761px in su la
   colonna di sinistra c'è tutta e un tasto per aprirla sarebbe un giro a vuoto.
   Lo mette il JS (`js/main.js`, blocco «Mio account»), che aggiunge anche `ha-tendina`
   al pannello: senza JavaScript non c'è nessun tasto e la lista resta aperta. */
.account-nav-tasto{display:none}
.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);
}

/* 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}

/* ════ INDIRIZZI del Mio account (myaccount/my-address.php) ════
   Questa pagina non aveva NESSUNA regola: nel foglio non compariva un solo
   `.woocommerce-Address`. Si vedeva quindi come la lascia il browser — le due
   schede tenute su dai float nativi di WooCommerce, il titolo e il link
   «Modifica» scollegati, e l'indirizzo IN CORSIVO, che non era la scelta di
   nessuno: è il valore di serie di <address> nel foglio dello user agent.
   Segnalata da Davide il 25 agosto 2026 («manca stile indirizzi»).
   Stesso vestito delle altre schede del Mio account (.wrapper-download-biglietti
   qui sopra): carta bianca, bordo, angoli tondi, ombra. */
.woocommerce-account .woocommerce-Addresses.col2-set{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;
}
/* QUARTA occorrenza del clearfix-fantasma dentro una grid (dopo MyAccount,
   #customer_details del checkout e #customer_login): `.col2-set::before` è un
   box vero, si prende la cella 1,1 e spinge le due schede nelle celle sbagliate. */
.woocommerce-account .woocommerce-Addresses.col2-set::before,
.woocommerce-account .woocommerce-Addresses.col2-set::after{content:none}
/* woocommerce-layout.css impone `.col2-set .col-1{float:left;width:48%}` (0,2,0):
   dentro una grid il float viene ignorato ma il 48% resta, e ogni scheda diventa
   metà della propria colonna. Qui il selettore è 0,3,0 e vince per specificità,
   non per ordine dei fogli. */
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2{float:none;width:auto}
.woocommerce-account .woocommerce-Addresses .col-1{grid-column:1;grid-row:1}
.woocommerce-account .woocommerce-Addresses .col-2{grid-column:2;grid-row:1}
.woocommerce-Address{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  background:var(--bianco);border:1px solid var(--bordo);border-radius:12px;
  padding:20px 22px;box-shadow:var(--ombra);
}
/* 🔴 QUINTA occorrenza del clearfix-fantasma, e la più insidiosa: qui non
   sballa una grid ma una flex. `.woocommerce-account .addresses .title::after,
   ::before{content:" ";display:table}` (woocommerce.css) serviva a contenere i
   float del vecchio layout; dentro `display:flex` quei due pseudo diventano due
   CASELLE VERE a larghezza zero, e `justify-content:space-between` distribuisce
   loro invece del titolo e del link. Risultato visto in Chrome prima del fix:
   il titolo spinto a destra (528→743 dentro una scheda che parte a 350) e il
   link «Modifica» a capo, allineato a sinistra — cioè esattamente al contrario.
   ⚠️ Stessa specificità del nativo (0,3,0): si vince per ordine dei fogli. */
.woocommerce-account .addresses .title::before,
.woocommerce-account .addresses .title::after{content:none}
/* Titolo e link sulla stessa riga, staccati dal contenuto da un filo di bordo,
   come la testata delle altre card. ⚠️ `flex-wrap:wrap` non è decorativo:
   «Modifica Indirizzo di fatturazione» è una frase lunga e sul telefono deve
   poter andare a capo invece di schiacciare il titolo. */
.woocommerce-Address-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--bordo);
}
/* WooCommerce 11 stampa <h2>, ma il suo foglio fa ancora galleggiare un <h3>
   (`.woocommerce-account .addresses .title h3{float:left}`, resto di un template
   più vecchio): coperti tutti e due, così il giorno che il markup cambia di
   nuovo non si rompe niente. */
.woocommerce-Address-title h2,
.woocommerce-Address-title h3{
  float:none;margin:0;font-family:var(--font-display);font-size:1.15rem;line-height:1.25;
}
/* `.woocommerce-account .addresses .title .edit{float:right}` è 0,3,0: stessa
   specificità qui, e si vince per ordine — skin-tavolata.css è accodato da
   inc/setup.php a priorità 20, dopo i fogli di WooCommerce. */
.woocommerce-account .addresses .title .edit{
  float:none;flex:0 0 auto;
  font-family:var(--font-ui);font-size:.8rem;font-weight:600;letter-spacing:.03em;
  color:var(--oro-scuro);transition:color var(--t);
}
.woocommerce-account .addresses .title .edit:hover{color:var(--ink);text-decoration:underline}
/* 🔴 Il corsivo dell'indirizzo non era una scelta di nessuno: <address> nasce
   `font-style:italic` nel foglio del browser, e non l'aveva mai spento nessuno. */
.woocommerce-Address address{
  margin:0;font-style:normal;font-family:var(--font-ui);font-size:.92rem;
  line-height:1.7;color:var(--ink-soft);
}
/* Pagina del modulo (/mio-account/edit-address/fatturazione/): il titolo è un
   <h3> fuori da qualunque wrapper, quindi finiva appiccicato ai campi. */
.woocommerce-address-fields{margin:0}
.woocommerce-account .woocommerce-MyAccount-content form > h3{
  font-family:var(--font-display);font-size:1.3rem;margin:0 0 18px;
}

/* ════ PAGINA DELL'ORDINE — «visualizza ordine» e «ordine ricevuto» ════
   Due cose viste da Davide il 27 agosto 2026 sull'ordine #1393.

   1 · I TITOLI ATTACCATI. «Dettagli ordine», «Indirizzo di fatturazione»,
   «Abbonamenti correlati»: tutti appoggiati sulla tabella che annunciano, senza un
   filo di stacco. Non li aveva schiacciati nessuno di proposito — è il reset di
   `style.css` (`*{margin:0}`), che vale anche per i titoli, e su questa pagina non
   c'era una sola regola a rimetterglielo. Misurato prima di toccare: margine sopra 0,
   sotto 0, distanza dal blocco sotto 0 px su tutti e tre.

   ⚠️ Il titolo della scheda dei biglietti NON è in questo elenco: quello sta DENTRO
   la sua card (`.wrapper-download-biglietti > h2`), dove il respiro glielo dà già il
   padding della scheda. Un margine in più lo scollerebbe dal suo riquadro. Per questo
   i selettori sono figli diretti delle due <section> di WooCommerce, e non un `h2`
   qualunque dentro il Mio account.

   2 · L'INDIRIZZO SENZA VESTITO. Il riquadro attorno all'indirizzo non era del tema:
   era quello di serie di WooCommerce (`.woocommerce .woocommerce-customer-details
   address`, 0,2,1) — bordo grigio trasparente, angoli da 5px, bordi destro e basso
   più spessi degli altri, 6px di respiro dentro. In mezzo alle schede del portale
   (carta bianca, angoli da 12, ombra) si vedeva che era di un altro mazzo. Qui prende
   lo stesso vestito di `.woocommerce-Address`, le schede indirizzo del Mio account,
   che è già lì sopra in questo file.

   ⚠️ Specificità: il nativo è 0,2,1. `.woocommerce-page` in testa porta a 0,3,1 e
   vince — e c'è sia in «visualizza ordine» che nella pagina di ringraziamento, che
   sono due pagine diverse con lo stesso markup. (Contare gli ELEMENTI, non solo le
   classi: è l'errore che il 20 agosto ha lasciato l'asterisco slegato per una
   settimana, poco più su in questo file.) */
.woocommerce-order-details__title,
.woocommerce-order-downloads__title,
.woocommerce-column__title,
.woocommerce-order-details > h2,
.woocommerce-customer-details > h2,
.woocommerce-MyAccount-content > h2{
  margin:0 0 16px;
}
/* Fra una sezione e la successiva ci vuole più aria che fra un titolo e la sua
   tabella, altrimenti si legge tutto come un blocco solo. */
.woocommerce-customer-details,
.woocommerce-order-downloads{margin-top:36px}

/* ⚠️ «ABBONAMENTI CORRELATI» non è un caso a parte per capriccio: WooCommerce
   Subscriptions stampa quel titolo dentro un `<header>` senza nessuna classe
   (`templates/myaccount/related-subscriptions.php`), appeso a
   `woocommerce_order_details_after_order_table`. Sta quindi DENTRO la sezione dei
   dettagli ordine ma NON è figlio diretto: i selettori qui sopra, che sono `> h2`, non
   lo vedevano — visto da Davide che era rimasto attaccato mentre gli altri due si erano
   staccati. Il margine si dà all'involucro, non al titolo, così vale anche il giorno che
   il markup del plugin cambia. */
.woocommerce-order-details > header{margin:36px 0 16px}
.tv-account-riga,.sdltck-account-riga{margin:32px 0 0;font:400 14px/1.55 var(--font-ui);color:var(--ink-soft)}
.tv-account-riga a,.sdltck-account-riga a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.tv-account-riga a:hover,.tv-account-riga a:focus-visible,.sdltck-account-riga a:hover,.sdltck-account-riga a:focus-visible{color:var(--oro-scuro)}
/* Il nome dell'account porta alla pagina che spiega l'addebito, ma non e'
   l'azione della riga: quella resta «Gestisci». Due link uguali nella stessa
   frase si contendono l'occhio, quindi il nome resta di peso normale con una
   sottolineatura tenue. */
.tv-account-riga a.tv-account-riga__nome,.sdltck-account-riga a.sdltck-account-riga__nome{
  font-weight:400;color:var(--ink);
  text-decoration-color:var(--bordo-forte);text-underline-offset:3px;
}
.tv-account-riga a.tv-account-riga__nome:hover,
.tv-account-riga a.tv-account-riga__nome:focus-visible,
.sdltck-account-riga a.sdltck-account-riga__nome:hover,
.sdltck-account-riga a.sdltck-account-riga__nome:focus-visible{
  color:var(--oro-scuro);text-decoration-color:currentColor;
}

/* ──── QUANTE SERATE TI RESTANO ────
   In cima a «Il mio account», sotto il riepilogo dei biglietti e sopra la casa dell'app.
   Il numero si legge in un colpo d'occhio; l'invito sotto è quello che fa fare qualcosa,
   e quando le serate sono finite sparisce insieme alla frase che lo reggeva — a chi non
   può più sceglierne una non si mette davanti un link che non porta da nessuna parte. */
.tv-serate-restanti{
  margin:0 0 20px;padding:18px 20px;
  background:var(--bianco);border:1px solid var(--bordo);border-radius:var(--radius);
  box-shadow:var(--ombra)
}
.tv-serate-restanti__numero{margin:0;font:600 22px/1.25 var(--font-display);color:var(--ink)}
.tv-serate-restanti__nota{margin:4px 0 0;font:400 14px/1.5 var(--font-ui);color:var(--ink-soft)}
.tv-serate-restanti__vai{
  display:inline-block;margin:12px 0 0;
  font:600 14px/1 var(--font-ui);color:var(--oro-scuro);
  text-decoration:underline;text-underline-offset:3px
}
.tv-serate-restanti__vai::after{content:' →'}
.tv-serate-restanti__vai:hover,.tv-serate-restanti__vai:focus-visible{color:var(--ink)}
/* Finite: resta un'informazione, non più un numero da festeggiare. */
.tv-serate-restanti--finite .tv-serate-restanti__numero{font-size:18px;color:var(--ink-soft)}
/* Dentro la fisarmonica dell'account è il contenuto di una carta, non una carta. */
.adps-voce-dentro .tv-serate-restanti{margin:0;padding:0;background:none;border:0;box-shadow:none}
.adps-voce-dentro .tv-serate-restanti__numero{font-size:17px}

/* ──── LA TESTATA DI «ORDINE RICEVUTO» ────
   La prima cosa che vede chi ha appena pagato, e fino al 27 agosto 2026 era la peggiore
   della pagina — Davide, guardandola sul telefono: «il mobile è orribile».

   Com'era: il ringraziamento è un `<p class="woocommerce-notice ...">`, cioè testo UI da
   16px senza un pixel sotto; e i cinque dati dell'ordine sono `<li>` che WooCommerce
   manda a FLOAT LEFT con un tratteggio grigio a destra
   (`.woocommerce ul.order_details li`, 0,2,2). Su 390px il float li impila come capita:
   misurato, «Numero ordine» e «Data» sulla prima riga, «Email» e «Totale» sulla seconda
   a metà altezza, e i tratteggi appesi nel vuoto fra una riga e l'altra.

   Adesso: il ringraziamento è il titolo della pagina (font display, spunta tonda), e i
   dati sono una scheda a griglia che si riorganizza da sola — quante colonne ci stanno,
   non quante ne ha decise il float. Le righe sottili fra una cella e l'altra non sono
   bordi: è il fondo della scheda che si vede attraverso un `gap` di 1px, l'unico modo di
   avere una griglia continua quando il numero di colonne cambia con la larghezza.

   ⚠️ `ul.order_details` e non `.order_details`: la stessa classe sta anche sulla TABELLA
   dei dettagli qui sotto (`table.shop_table.order_details`), che ha già il suo vestito e
   non va toccata.
   ⚠️ Specificità: il nativo è 0,2,2 sulle voci e 0,2,1 sulla lista. `.woocommerce-page`
   in testa porta a 0,3,2 e 0,3,1 — vinte tutte e due contando gli elementi, non solo le
   classi (vedi l'asterisco del 20 agosto, più su in questo file). */
.woocommerce-page .woocommerce .woocommerce-thankyou-order-received{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,4.2vw,1.9rem);
  line-height:1.15;letter-spacing:0;color:var(--ink);margin:0 0 22px;
}
.woocommerce-page .woocommerce .woocommerce-thankyou-order-received::before{
  content:"";flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--oro-scuro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/17px no-repeat;
}
.woocommerce-page .woocommerce ul.order_details{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  margin:0 0 36px;padding:0;list-style:none;
  background:var(--bianco);border:1px solid var(--bordo);border-radius:12px;
  overflow:hidden;box-shadow:var(--ombra);
}
/* 🔴 SESTA occorrenza del clearfix-fantasma dentro una grid (dopo MyAccount,
   #customer_details, #customer_login, .woocommerce-Addresses e .addresses .title).
   `.woocommerce ul.order_details::before/::after{content:" ";display:table}` serviva a
   contenere i float delle voci; tolti i float, quei due pseudo restano e in una grid
   diventano CASELLE VERE. Misurato prima di accorgermene: a 390px «Numero ordine»
   finiva nella colonna DESTRA e «Data» da sola sulla riga sotto — la prima cella se
   l'era presa un elemento che non esiste. */
.woocommerce-page .woocommerce ul.order_details::before,
.woocommerce-page .woocommerce ul.order_details::after{content:none}
/* ⚠️ Le linee interne le disegnano le CELLE (bordo a destra e sotto), non un `gap` che
   lascia vedere il fondo: quando una voce manca — il metodo di pagamento non c'è finché
   l'ordine non è pagato, e con cinque voci su due colonne l'ultima riga resta a metà —
   il fondo colorato diventerebbe un rettangolo beige in mezzo alla scheda. Visto in
   locale prima di caricare. Il margine negativo spinge fuori dal contenitore i bordi
   dell'ultima colonna e dell'ultima riga, che `overflow:hidden` taglia via: così non si
   raddoppia mai il filo del bordo esterno, comunque cadano le celle. */
.woocommerce-page .woocommerce ul.order_details li{
  float:none;margin:0 -1px -1px 0;padding:14px 16px;background:none;
  border:0;border-right:1px solid var(--bordo);border-bottom:1px solid var(--bordo);
  font-family:var(--font-ui);font-size:.68rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-tenue);line-height:1.3;
}
/* Il valore sotto la sua etichetta: è il dato, e deve leggersi come tale.
   ⚠️ `overflow-wrap:anywhere` c'è per una ragione sola, l'email: certi indirizzi sono
   più lunghi della colonna e senza questo allargherebbero la pagina in orizzontale. */
.woocommerce-page .woocommerce ul.order_details li strong{
  display:block;margin-top:5px;font-size:1rem;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink);overflow-wrap:anywhere;
}

/* Sul telefono due colonne sono il massimo leggibile, e l'email si prende la riga intera
   invece di spezzarsi in tre tronconi dentro una colonna da 170px. */
@media (max-width:520px){
  .woocommerce-page .woocommerce ul.order_details{grid-template-columns:1fr 1fr}
  .woocommerce-page .woocommerce ul.order_details .woocommerce-order-overview__email{grid-column:1/-1}
}

/* ⚠️ E allo STESSO gancio si appende la scheda dei biglietti della biglietteria: dentro
   la sezione, subito dopo «Ordina di nuovo». Quel pulsante non aveva un solo pixel sotto
   (`*{margin:0}` di style.css, mai rimesso) e ci finiva appoggiato sopra. Non è la card
   del plugin a doversi spostare: lo stacco lo mette chi ce l'ha tolto. */
.woocommerce .order-again{margin:24px 0}
.woocommerce-page .woocommerce .woocommerce-customer-details address{
  background:var(--bianco);border:1px solid var(--bordo);border-radius:12px;
  padding:20px 22px;box-shadow:var(--ombra);
  font-style:normal;font-family:var(--font-ui);font-size:.92rem;line-height:1.7;color:var(--ink-soft);
}
/* Telefono e email chiudono l'indirizzo: stesso corpo del resto della scheda, non
   il paragrafo a piena forza del tema. */
.woocommerce-page .woocommerce .woocommerce-customer-details address p{
  margin:6px 0 0;font-size:.92rem;line-height:1.7;color:var(--ink-soft);
}

/* 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}
  /* a una colonna sola il piazzamento esplicito del desktop va azzerato, o il
     riepilogo resterebbe inchiodato a una colonna 2 che non esiste piu'. */
  .woocommerce-checkout form.checkout.woocommerce-checkout{grid-template-columns:1fr;gap:0}
  .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup{grid-column:1;grid-row:auto}
  .woocommerce-checkout form.checkout > #customer_details{grid-column:1;grid-row:auto}
  .woocommerce-checkout form.checkout > .tv-riepilogo{grid-column:1;grid-row:auto}
  .tv-riepilogo{position:static}
  .tv-riepilogo #order_review_heading{margin-top:36px}
  .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}

  /* ──── IL MENÙ DELL'ACCOUNT SI CHIUDE ────
     Sei voci impilate (Bacheca, Ordini, Academy, Abbonamenti, Indirizzi, Esci) si
     prendevano mezzo schermo PRIMA di far vedere il contenuto della pagina. Chiuso, il
     pannello è una riga sola che dice dove sei; aperto, è la lista di sempre.
     ⚠️ Le tre lineette e il modo in cui diventano una X sono gli stessi dell'hamburger
     dell'header (style.css, «burger»): stesso gesto, stesso segno — non una seconda
     grammatica per la stessa cosa. Qui però hanno classe propria, perché `.nav-toggle`
     porta con sé i colori del menù sopra le foto e sparisce oltre i 900px. */
  .woocommerce-MyAccount-navigation.ha-tendina .account-nav-tasto{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    width:100%;padding:14px 18px;background:none;border:0;cursor:pointer;text-align:left;
    font-family:var(--font-ui);font-size:.95rem;font-weight:700;color:var(--ink);
  }
  .ha-tendina .account-nav-righe{
    display:flex;flex-direction:column;justify-content:center;gap:4px;width:20px;flex:0 0 auto;
  }
  .ha-tendina .account-nav-righe span{
    display:block;height:2px;background:var(--oro-scuro);border-radius:2px;
    transition:transform var(--t),opacity var(--t);
  }
  /* 6px = altezza della lineetta (2) + il vuoto fra due (4): la riga di sopra e quella
     di sotto arrivano esattamente sulla mediana, e la X si chiude senza sfasature. */
  .ha-tendina .account-nav-tasto[aria-expanded="true"] .account-nav-righe span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .ha-tendina .account-nav-tasto[aria-expanded="true"] .account-nav-righe span:nth-child(2){opacity:0}
  .ha-tendina .account-nav-tasto[aria-expanded="true"] .account-nav-righe span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  /* 0,2,1 contro lo 0,1,1 della regola che rende la lista un flex qui sopra: si vince
     per specificità e non per ordine, così non conta dove finisce questo blocco. */
  .woocommerce-MyAccount-navigation.ha-tendina > ul{display:none;border-top:1px solid var(--bordo)}
  .woocommerce-MyAccount-navigation.ha-tendina.is-aperta > ul{display:flex}
  .woocommerce-account .woocommerce-MyAccount-navigation{grid-column:1;grid-row:1}
  .woocommerce-account .woocommerce-MyAccount-content{grid-column:1;grid-row:2}
  /* Indirizzi: una colonna sola. Il piazzamento esplicito del desktop va
     azzerato o la seconda scheda resterebbe inchiodata a una colonna 2 che
     qui sotto non esiste più — stessa trappola già vista con #customer_login. */
  .woocommerce-account .woocommerce-Addresses.col2-set{grid-template-columns:1fr;gap:16px}
  .woocommerce-account .woocommerce-Addresses .col-1{grid-column:1;grid-row:1}
  .woocommerce-account .woocommerce-Addresses .col-2{grid-column:1;grid-row:2}
  .woocommerce-Address{padding:16px 18px}
  #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}
/* Quattro card su una riga sola; le sei di /ristoranti/ restano a 3+3.
   Dentro un min-width apposta: un selettore con l'attributo pesa piu' delle
   regole dei telefoni piu' sotto, e senza questa gabbia resterebbe a quattro
   colonne anche a 390px, sbordando. */
@media (min-width:901px){
  .vantaggi-cards[data-quante="4"]{grid-template-columns:repeat(4,1fr);gap:18px}
  /* Cinque card (Tavolata +, 29 set 2026): tre sopra e due sotto, centrate. Su sei
     colonne ognuna ne prende due, e la quarta parte dalla seconda colonna. */
  .vantaggi-cards[data-quante="5"]{grid-template-columns:repeat(6,1fr)}
  .vantaggi-cards[data-quante="5"]>.vantaggi-card{grid-column:span 2}
  .vantaggi-cards[data-quante="5"]>.vantaggi-card:nth-child(4){grid-column:2 / span 2}
}
.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}
/* La striscia riempie la riga con quante statistiche ci sono: tre su Tavolata +,
   quattro su /ristoranti/. Con repeat(4) fisse, tre lasciavano un buco a destra.
   Anche questa sta in un min-width, per lo stesso motivo delle card. */
@media (min-width:901px){
  .stats-banda[data-quante="3"]{grid-template-columns:repeat(3,1fr)}
  .stats-banda[data-quante="2"]{grid-template-columns:repeat(2,1fr)}
}
.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).
   Figlio DIRETTO: l'occhiello "La cena" nella carta bianca tiene la sua ✦ */
.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{
  /* Il fondo era a zero per far arrivare l'accordion del menu fino al bordo. Sugli eventi
     senza menu scritto, pero', l'ultima riga del conto restava incollata al bordo basso.
     Adesso il respiro c'e' sempre, e a riprenderselo e' l'accordion col suo margine
     negativo — cosi' resta a filo com'era. */
  align-self:stretch;margin:14px 0 0;padding:20px 22px;
  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 -20px;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:0 0 14px}
.cena-menu-testo p:last-child{margin-bottom:0}

/* ════ IL CONTO DELLA SERATA (richiesta del cliente, 20 ago) ════
   «Il totale di quello che spunta non si capisce»: nella biglietteria si legge
   solo l'acconto, e la cena — che si paga al ristorante — resta fuori dal conto.
   Qui c'è la spesa vera della serata, e sotto i due pezzi che la compongono.
   Vive in DUE punti con lo stesso identico markup (blocco «La cena» e sopra il
   pulsante del carrello, via il gancio tck_after_carrello_evento): due riquadri
   che dicessero cifre diverse sarebbero peggio di nessun riquadro.
   Il totale in ambra perché è un prezzo — l'unica cosa per cui l'ambra si usa. */
.conto-serata{
  margin:16px 0 0;padding:14px 18px;text-align:center;
  background:var(--bianco);border:1px solid var(--bordo-forte);border-radius:12px;
}
/* Dentro la carta della cena non serve una seconda cornice, e nemmeno la linea che
   c'era prima: sopra il riquadro non c'e' piu' niente da separare — il prezzo del menu
   e la riga «si paga al ristorante» sono state tolte il 20 agosto perche' il riquadro
   dice le stesse cifre con le stesse parole. */
.cena-info .conto-serata{
  align-self:stretch;margin:10px 0 0;padding:0;
  background:none;border:0;border-radius:0;
}
.conto-serata-totale{
  margin:0;font-family:var(--font-ui);font-size:.8rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
/* Il totale in ambra su fondo pieno sembrava un pulsante da premere, in mezzo a una
   frase (Davide, 20 ago). Adesso e' solo tipografia: piu' grande e in Fraunces come gli
   altri numeri della scheda, senza niente attorno. Resta la cosa piu' evidente del
   riquadro perche' e' la piu' grande, non perche' e' colorata. */
.conto-serata-totale strong{
  display:inline-block;margin:0 .2em;
  font-family:var(--font-display);font-size:1.75rem;font-weight:600;
  /* Oro scuro, non ambra piena: e' un prezzo, e l'oro sui fondi chiari e' l'accento
     della scheda. Colorato ma non riempito — si trova subito senza somigliare a un
     pulsante, che era il difetto di prima. */
  letter-spacing:0;text-transform:none;color:var(--oro-scuro);
}
/* Le due voci del conto: elenco, non una frase con un puntino in mezzo. Su un telefono
   quella frase andava a capo dove capitava e il puntino separatore finiva a inizio riga
   come un refuso. Niente pallini: le due righe si distinguono gia' dalla cifra in neretto. */
.conto-serata-righe{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.conto-serata-righe li{font-size:.82rem;line-height:1.5;color:var(--ink-soft)}
.conto-serata-righe strong{color:var(--ink);font-weight:700}
/* Il prezzo pieno nella riga dell'acconto: sbiadito, attaccato alla cifra vera. */
.conto-serata-righe del{color:var(--ink-tenue);margin-right:.3em;text-decoration-thickness:1px}
.conto-serata-nota{margin:9px 0 0;font-size:.78rem;line-height:1.5;color:var(--ink-tenue)}
@media (max-width:560px){
  /* sul telefono i due pezzi vanno a capo da soli: il puntino di mezzo, in
     mezzo a una riga spezzata, sembra un refuso. */
  .conto-serata-righe li{font-size:.79rem}
}

.cena-menu-testo strong{color:var(--ink)}
/* ════ LE LISTE DENTRO IL MENÙ DELLA SERATA (25 ago 2026) ════
   Segnalato da Davide: «compare un 2, 3, 4 quando in realtà non è un listato
   numerico». Non era un errore suo.

   🔴 L'editor del gestionale è **Quill**, e Quill scrive le liste PUNTATE come
   `<ol>`: distingue le due cose con un attributo su ogni riga —
   `<li data-list="bullet">` contro `<li data-list="ordered">` — e i pallini li
   disegna il SUO foglio di stile. Qui quel foglio non c'è, quindi un `<ol>`
   resta quello che è: un elenco numerato.

   ⚠️ La regola `li[data-list="bullet"]` qui sotto NON è una toppa provvisoria: è
   quella che rimette a posto i **99 menù già pubblicati**, senza rimandarli uno
   per uno. Dal gestionale l'HTML adesso esce pulito (`<ul>` vero), ma quello che
   è già sul sito resta com'è finché non si rimanda, e nel frattempo si deve
   vedere bene lo stesso.

   Prima qui c'era solo `.cena-menu-testo ul`: un `<ol>` non aveva vestito
   nessuno, e nemmeno una lista dentro un'altra. */

.cena-menu-testo ul,
.cena-menu-testo ol{margin:0 0 14px;padding:0}
.cena-menu-testo ul:last-child,
.cena-menu-testo ol:last-child{margin-bottom:0}

/* ⚠️ Da qui in giù si usa `>` e non lo spazio, e non è pignoleria: con il
   discendente, un `<li>` dentro una lista annidata dentro un `<ol>` incrementava
   il contatore del padre. Visto in una fotografia della pagina — le misure
   dicevano tutte PASS mentre i numeri andavano 1, 2, 3, **5**, 6… e finivano a
   11 su dieci voci. Il figlio diretto lega ogni voce alla SUA lista. */

/* Puntata: il ✦ oro, che è la firma di questo sito. */
.cena-menu-testo ul{list-style:none}
.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)}

/* Numerata: i numeri si vedono, in oro e incolonnati. Il rientro è un filo più
   largo di quello del ✦ perché un «10.» è più largo di una stellina. */
.cena-menu-testo ol{list-style:none;counter-reset:voce}
.cena-menu-testo ol > li{position:relative;padding-left:28px;margin-bottom:5px;counter-increment:voce}
.cena-menu-testo ol > li::before{
  content:counter(voce) ".";position:absolute;left:0;top:0;
  font-size:.78rem;font-weight:600;color:var(--oro-scuro);
  font-variant-numeric:tabular-nums;
}

/* 🔴 Il caso Quill: un `<ol>` che in realtà è puntato. Si riconosce dalla riga,
   non dalla lista, perché è lì che Quill mette l'attributo. */
.cena-menu-testo ol > li[data-list="bullet"]{counter-increment:none;padding-left:22px}
.cena-menu-testo ol > li[data-list="bullet"]::before{
  content:"✦";left:2px;top:2px;font-size:.62rem;font-weight:400;
}
/* E il segnaposto vuoto che Quill lascia dentro ogni riga: non deve occupare spazio. */
.cena-menu-testo .ql-ui{display:none}

/* Liste dentro liste: un rientro solo, e il pallino cambia forma per far vedere
   che si è scesi di un livello. ⚠️ Il contatore del padre NON si tocca. */
.cena-menu-testo li > ul,
.cena-menu-testo li > ol{margin:5px 0 0;padding-left:4px}
.cena-menu-testo li > ul > li::before{content:"·";font-size:1rem;top:-3px}

/* Un titoletto in grassetto attaccato alla lista che segue: il respiro lo dà la
   lista, non il paragrafo, se no fra «Bevanda a scelta tra:» e la prima voce
   c'era il doppio dello spazio che c'era fra le voci. */
.cena-menu-testo p:has(+ ul),
.cena-menu-testo p:has(+ ol){margin-bottom:6px}

/* ════ 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)}

/* La frase sulle intolleranze, sotto il menù: si vede solo dove il checkout le chiede
   davvero. Tono da nota, non da piatto. */
.cena-menu-nota{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--bordo);font-size:.85rem;font-style:italic;line-height:1.6;color:var(--ink-tenue)}
.cena-menu-nota strong{font-style:normal;color:var(--ink-soft)}

/* ════ PAGINAZIONE DEL LISTING (25 agosto 2026) ════
   Il listing mostrava 60 tavolate su 256, e le altre non esistevano per nessuno:
   nemmeno per Google. Link veri, non un pulsante «carica altre» — quello che non ha
   un indirizzo raggiungibile non viene indicizzato, e sarebbero rimaste invisibili
   proprio le schede che portano le ricerche «tavolata a <citta>». */
.paginazione{margin:38px 0 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.paginazione-dove{margin:0;font-family:var(--font-ui);font-size:.8rem;color:var(--ink-tenue)}
.paginazione-dove strong{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.paginazione-lista{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
}
.paginazione-lista li{display:flex}
.paginazione-lista .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:40px;height:40px;padding:0 13px;border-radius:999px;
  border:1px solid var(--bordo-forte);background:var(--bianco);
  font-family:var(--font-ui);font-size:.88rem;font-weight:600;
  color:var(--ink-soft);text-decoration:none;
  font-variant-numeric:tabular-nums;transition:background var(--t),border-color var(--t),color var(--t);
}
.paginazione-lista a.page-numbers:hover{border-color:var(--oro-scuro);background:var(--crema);color:var(--ink)}
.paginazione-lista a.page-numbers:focus-visible{outline:2px solid var(--oro-scuro);outline-offset:2px}
.paginazione-lista .page-numbers.current{background:var(--ambra);border-color:var(--ambra);color:#221A12}
.paginazione-lista .page-numbers.dots{border-color:transparent;background:none;color:var(--ink-tenue);min-width:24px;padding:0}
@media (max-width:560px){
  /* Sul telefono i numeri restano, le due parole lunghe no: la freccia basta,
     e senza questo la riga va a capo tre volte. */
  .paginazione-lista .page-numbers{min-width:36px;height:36px;padding:0 10px;font-size:.82rem}
}

/* ============ TAVOLATA +: IL TUO STATO ============
   Il riquadro che dice quante serate restano. Un riquadro solo, quattro
   contenuti diversi: a tetto pieno arriva senza il pulsante, e la regola
   del pulsante sta nel PHP — qui non si nasconde niente col CSS, perche'
   un pulsante nascosto resta cliccabile da tastiera. */
.plus-stato{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:28px;padding:clamp(24px,4vw,38px);
  background:var(--bianco);border:1px solid var(--bordo);border-radius:var(--radius);
  box-shadow:var(--ombra);
}
.plus-stato-testo{flex:1 1 20rem;min-width:0}
.plus-stato-numero{
  font-family:var(--font-display);font-weight:600;line-height:1.1;
  font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.plus-stato-nota{margin-top:10px;color:var(--ink-soft)}
.plus-stato--finite .plus-stato-numero{color:var(--ink-soft)}
.plus-stato .btn{flex:0 0 auto}

/* solo nell'editor: dice a chi compone perche' il blocco sembra vuoto */
.plus-stato-vuoto{
  padding:20px 22px;border:1px dashed var(--bordo-forte);border-radius:12px;
  background:var(--crema);color:var(--ink-soft);font-size:.95rem;
}

/* ============ TAVOLATA +: LA HERO ============
   Fondo espresso come la scheda evento: il modello «Pagina a blocchi»
   lascia l'header trasparente, e sopra un fondo chiaro il logo sparirebbe.
   Due colonne, la promessa e la prova; sotto i 900 diventano una. */
.plus-hero{
  position:relative;overflow:hidden;
  background:var(--espresso);color:var(--su-scuro);
  /* L'header e' trasparente sopra questa hero (header_fisso false nel modello):
     il primo elemento deve partire SOTTO di lui, se no il marchio finisce
     addosso al logo. Su un telefono --header-h vale 64, sul computer 74. */
  padding-top:calc(var(--header-h) + clamp(28px,6vw,44px));
  padding-bottom:clamp(44px,7vw,84px);
}
.plus-hero::after{
  content:"";position:absolute;inset:auto -14% -60% 34%;height:75%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(224 164 88/.13),transparent 70%);
}
.plus-hero-griglia{
  position:relative;display:grid;align-items:center;
  gap:clamp(34px,5vw,64px);grid-template-columns:1.02fr .98fr;
}
.plus-hero-corpo{min-width:0}
/* il «+» sta attaccato alla parola: da solo a capo diventa una croce nel nulla */
.plus-marchio{
  display:inline-block;white-space:nowrap;margin-bottom:20px;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--su-scuro-soft);
}
.plus-marchio b{color:var(--ambra);font-size:1.45em;letter-spacing:0;line-height:0}
.plus-hero-titolo{
  font-family:var(--font-display);font-weight:600;line-height:1.12;text-wrap:balance;
  font-size:clamp(2.2rem,5.6vw,3.7rem);letter-spacing:-.02em;color:var(--su-scuro);
}
.plus-hero-titolo em{font-style:italic;font-weight:500;color:var(--ambra)}
.plus-hero-lead{margin-top:20px;color:var(--su-scuro-soft);font-size:1.08rem;max-width:46ch}
.plus-hero-azioni{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.plus-hero-nota{margin-top:16px;font-size:.92rem;color:var(--ink-tenue)}
/* sul fondo espresso un bottone col testo scuro non si vede */
.btn-linea-chiaro{
  background:transparent;color:var(--su-scuro);border-color:var(--filetto-scuro);
}
.btn-linea-chiaro:hover{border-color:var(--su-scuro-soft);color:var(--su-scuro)}

.plus-scontrino{
  background:var(--espresso-2);border:1px solid var(--filetto-scuro);
  border-radius:var(--radius);padding:clamp(22px,3vw,30px);
  font-variant-numeric:tabular-nums;
}
.plus-scontrino-eti{
  margin-bottom:18px;font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-tenue);
}
.plus-scontrino-riga{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:8px 0;font-size:.96rem;color:var(--su-scuro-soft);
}
.plus-scontrino-riga > span:last-child{flex:none}
.plus-scontrino-riga--sconto{
  margin-top:6px;padding-top:14px;border-top:1px solid var(--filetto-scuro);color:var(--ambra);
}
.plus-scontrino-tot{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:14px;padding-top:16px;border-top:1px solid var(--filetto-scuro);color:var(--su-scuro);
}
.plus-scontrino-tot b{font-family:var(--font-display);font-size:1.7rem;font-weight:600;line-height:1}
.plus-scontrino-nota{margin-top:16px;font-size:.84rem;color:var(--ink-tenue);line-height:1.5}

@media (max-width:900px){
  .plus-hero-griglia{grid-template-columns:1fr}
}

/* timbro «Inclusa nel tuo account»: verde, non oro. L'oro su questo sito e'
   il denaro e il pulsante; «inclusa» e' uno stato, e i due linguaggi non
   devono pestarsi. */
.timbro-incluso{background:var(--verde);color:#FFFAF1}
/* lo stesso timbro dove si sceglie e si paga: accanto al prezzo barrato, non sopra una foto */
.carrello-form .tck-price .tck-inclusa,.scheda-prezzo .scheda-prezzo-inclusa,.acquisto-bar-prezzo .timbro-incluso{position:static;display:inline-block;vertical-align:middle;line-height:1.3;padding:.45em .8em}
.carrello-form .tck-price .tck-inclusa{margin-left:6px}
.scheda-prezzo .scheda-prezzo-inclusa{font-size:.78rem;color:#FFFAF1}


/* ============ TAVOLATA +: RIFINITURE ============ */

/* Le sezioni di QUESTA pagina stanno piu' vicine: due sezioni di fila portano
   ciascuna il suo padding, e fra l'elenco delle tavolate e le FAQ diventavano
   quasi duecento pixel di niente. Scritto sulla classe della pagina perche' la
   home e /ristoranti/ usano le stesse classi e non devono muoversi. */
.pagina-plus .sezione{padding-block:clamp(40px,6vw,64px)}

/* Il riquadro dello stato: aria sotto al titolo, e aria fra le righe e il
   pulsante — appiccicato al numero sembrava parte della frase. */
.sezione-plus-stato .titolo-sezione{margin-bottom:clamp(18px,3vw,26px)}
.plus-stato-nota{margin-bottom:4px}

@media (max-width:640px){
  /* Su un telefono un pulsante che non arriva ai bordi sembra mezzo premuto:
     qui sono l'azione principale della pagina e prendono tutta la riga. */
  .plus-hero-azioni{flex-direction:column;align-items:stretch;gap:12px}
  .plus-hero-azioni .btn{width:100%}

  .plus-stato{gap:22px}
  .plus-stato .btn{width:100%;margin-top:4px}
}

/* ── Tavolata +: la foto dietro la hero ───────────────────────────────
   La foto sfuma nell'espresso, mai uno stacco netto: stessa idea della
   scheda evento. A sinistra il fondo resta pieno perche' li' c'e' il
   testo, e un titolo sopra una fotografia si legge male. Lo scontrino a
   destra ha un fondo suo, quindi puo' stare sopra la parte scoperta. */
.plus-hero-foto{position:absolute;inset:0;z-index:0;overflow:hidden}
.plus-hero-foto img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.plus-hero-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--espresso) 0%,
    var(--espresso) 34%,
    rgb(22 18 16/.78) 68%,
    rgb(22 18 16/.62) 100%);
}
.plus-hero--foto .plus-hero-griglia{position:relative;z-index:1}

@media (max-width:900px){
  /* In colonna il testo sta SOPRA la foto: la sfumatura va per il verso
     giusto, e piu' densa — il titolo e' grande e deve restare leggibile. */
  .plus-hero-foto::after{
    background:linear-gradient(180deg,
      rgb(22 18 16/.90) 0%,
      rgb(22 18 16/.86) 55%,
      rgb(22 18 16/.94) 100%);
  }
}