/* ════════════════════════════════════════════════════════════════════════
   SKIN WORDPRESS DI VIVOEVENTI
   L'ossatura e la pelle del portale vivono in style.css (design system del
   mockup approvato). Qui sta SOLO ciò che il mockup non poteva avere perché
   non esiste fuori da WordPress: il form della biglietteria del plugin
   woosdl-ticketing, le pagine WooCommerce (carrello, cassa, il mio account),
   la barra admin, la pagina di testo dei legali.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   SKIN BIGLIETTERIA PLUGIN (tck) — Task 9
   Il form di woosdl-ticketing (shortcode [tck_biglietteria], dentro
   l'acquisto della scheda evento) 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 della scheda: superfici bianche, filetti
   tenui, display Bricolage nei titoli, stepper come quelli del mockup,
   CTA = pillola blu brand. 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 il riquadro d'acquisto: nessuno sfondo/ombra propri,
   solo respiro e testo allineato a sinistra */
.acquisto-card .wrapper-tck-biglietteria{
  margin-top:18px;width:100%;text-align:left;background:none;box-shadow:none;
}
.wrapper-tck-biglietteria .m-title{
  /* Display dritto, mai corsivo: il corsivo era la firma editoriale del tema
     di origine, qui stona con l'ossatura del portale. */
  font-family:var(--font-display);font-weight:700;
  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 .acquisto-card davanti (0,3,0), così i .tck-record
   diventano righe come .riga-bigl invece di restare dentro una card. */
.acquisto-card .biglietteria-std .carrello-form{
  background:none;box-shadow:none;border-radius:0;margin:0;overflow:visible;
}
.carrello-form .tck-record{
  padding:16px 2px;border-bottom:1px solid var(--bordo);border-top:0;
}
.carrello-form .tck-record:first-child{border-top:1px solid var(--bordo)}

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

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

/* prezzo: solo tipografia, 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(--blu);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(--blu);background:var(--blu-bg);
  transition:background var(--t),color var(--t);
}
.carrello-form .quantity-buttons .quantity-btn:hover{background:var(--blu);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 neve 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(--neve);border:1px solid var(--bordo);border-radius:10px;
  padding:14px 16px;margin-top:10px;border-bottom:0;
}
.carrello-form .tck-record.is-insurance:first-child{border-top:1px solid var(--bordo)}

/* CTA finale: stessa pillola blu 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. */
.acquisto-card .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:#0D1B45;cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t);
}
#submit-button button:hover{background:#2E77FF;color:#0D1B45;box-shadow:0 12px 30px rgb(255 180 40/.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(--neve);border-radius:10px;
}

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

@media (max-width:760px){
  .wrapper-tck-biglietteria .m-title{font-size:1.05rem}
  .carrello-form .tck-record{padding:14px 0}
  .carrello-form .tck-heading .title{font-size:1rem}
  .carrello-form .tck-footer .tck-price{font-size:1.15rem;text-align:left}
  .carrello-form .quantity-buttons .quantity-btn{width:32px;height:32px}
}
.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 chiaro: banda navy come il
   footer, con briciole e titolo display. 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(--navy) 30%,var(--navy-2) 75%,#2A2018);
  color:var(--su-navy);
  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}
}

/* ════ LOGO: misura del mockup, difesa dalla cascata di WooCommerce ════
   Su OGNI pagina Woo il <body> porta la classe woocommerce-page (aggiunta da
   WooCommerce via body_class, indipendente dal template) e
   woocommerce-layout.css — caricato PRIMA di ve-skin — contiene
   `.woocommerce-page img{height:auto;max-width:100%}`: specificità (0,1,1),
   UN PUNTO più delle nostre `.brand-logo` / `.footer-logo` (0,1,0) in
   style.css. Vince lei anche se dichiarata prima, e il logo torna alla sua
   dimensione nativa sfondando fuori dall'header.
   Fix: stessa proprietà con un ancestor in più (0,2,0) per l'header e con
   elemento+classe (0,1,1, che pareggia e vince perché dichiarata dopo) per
   il footer. Niente !important, come nel resto di questo file.
   I VALORI sono quelli del mockup approvato — 25px header, 24px footer:
   il marchio VivoEventi è un wordmark orizzontale, non il lockup alto del
   tema di origine, e a 38px sovrastava la navigazione. */
.site-header .brand-logo{height:25px;width:auto}
img.footer-logo{height:24px;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(--blu);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(--blu);text-decoration:underline;text-underline-offset:2px}
.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(--blu);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(--blu);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(--blu)}
.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(--blu);color:#E8ECF6}
.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…), blu 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 (ve-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:#0D1B45;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:#2E77FF;color:#0D1B45;box-shadow:0 12px 30px rgb(255 180 40/.4);transform:translateY(-2px);
}
.woocommerce table.my_account_orders .button.pay{border-color:transparent;background:var(--ambra);color:#0D1B45;font-weight:700}
.woocommerce table.my_account_orders .button.pay:hover{background:#2E77FF}

/* ════ CARRELLO + CHECKOUT: tabelle a superficie bianca ════
   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(--neve);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(--blu)}
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(--blu)}
.woocommerce-Price-amount{font-weight:inherit}

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

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

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

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

/* metodi di pagamento: righe come .riga-bigl, non la lista puntata di default */
ul.wc_payment_methods{list-style:none;margin:0;padding:0}
li.wc_payment_method{padding:12px 0;border-top:1px solid var(--bordo)}
li.wc_payment_method label{font-family:var(--font-ui);font-weight:600;font-size:.92rem;color:var(--ink);display:inline-flex;align-items:center;gap:8px;cursor:pointer}
li.wc_payment_method input.input-radio{width:16px;height:16px;accent-color:var(--blu);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(--neve);border-radius:10px;padding:14px 16px;margin-top:8px;
  font-family:var(--font-ui);font-size:.85rem;color:var(--ink-soft);
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
/* eventuali campi dentro un metodo di pagamento (es. bonifico/carta): stesso
   bordo tenue degli altri input invece del lilla di default Woo. */
.woocommerce-checkout #payment div.payment_box input.input-text,
.woocommerce-checkout #payment div.payment_box textarea{border-color:var(--bordo-forte)}
.payment_box p{margin:0 0 8px}
.payment_box p:last-child{margin-bottom:0}
/* FIX (round 2): la riga "Effettua ordine" teneva il padding:1em di default
   Woo (`.woocommerce-checkout #payment div.form-row`, woocommerce.css,
   1,2,1) sopra il nostro `.woocommerce-checkout-payment .form-row.place-order`
   (0,3,0, perdente sulla sola proprietà padding — margin-top e border-top,
   dichiarati SOLO qui, restavano applicati senza contesa). Stesso rimedio:
   selettore nativo scope, con `.place-order` in più per battere 1,2,1. */
.woocommerce-checkout #payment div.form-row.place-order{padding:18px 0 0;margin-top:18px;border-top:1px solid var(--bordo)}
#place_order{width:100%}
.woocommerce-terms-and-conditions-checkbox-text a{color:var(--blu)}
/* testo privacy sotto "Effettua ordine": nota tenue come le altre, non un
   paragrafo a piena forza (nessun default Woo lo tocca, nessuna lotta di
   specificità qui). */
.woocommerce-privacy-policy-text{font-size:.76rem;color:var(--ink-tenue);line-height:1.5}

/* ════ MY ACCOUNT: sidebar come account-nav del mockup + contenuto ════ */
/* FIX (review finale, finding #3): la grid a due colonne si applicava anche
   da SLOGGATI, dove /mio-account/ mostra solo il form di login/registrazione
   (WC_Shortcode_My_Account::output() ritorna dopo wc_get_template(
   'myaccount/form-login.php' ) senza mai chiamare my_account() — niente
   .woocommerce-MyAccount-navigation/-content in quello stato, verificato in
   includes/shortcodes/class-wc-shortcode-my-account.php:44-58). Il div
   .woocommerce conteneva quindi UN SOLO figlio (il blocco di login), che la
   grid piazzava comunque nella prima colonna esplicita (250px): il form
   veniva schiacciato invece di restare a larghezza piena. Scope a
   '.logged-in.woocommerce-account' (classe body nativa di WP per utenti
   autenticati, via body_class() in header.php): la grid due colonne resta
   intatta per chi è loggato, da sloggati il div torna a un blocco normale a
   piena larghezza — le notice di errore login (.woocommerce-error, regola
   più sopra in questo file) ne beneficiano di conseguenza, nessuna regola
   dedicata necessaria. Le regole di piazzamento dei VERI figli (float-reset,
   clearfix, grid-column) restano sotto '.woocommerce-account' senza
   '.logged-in': sono no-op quando quegli elementi non esistono (sloggato),
   quindi non serve scoparle — verificato che non causano nessun effetto
   visibile in quello stato. */
.logged-in.woocommerce-account .woocommerce{
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;align-items:start;
}
/* woocommerce-layout.css impone .woocommerce-account .woocommerce-MyAccount-navigation
   {float:left;width:30%} e .woocommerce-account .woocommerce-MyAccount-content
   {float:right;width:68%} (l'ancestor .woocommerce-account è GIÀ nel selettore
   nativo, non l'abbiamo aggiunto noi): in un contenitore grid il float viene
   ignorato ma la width resta, schiacciando la nav a ~30% dei 250px della
   colonna. Stesso pattern già usato sopra per #customer_details .col-1/.col-2
   e per #customer_login .col-1/.col-2, ma qui NON è una vittoria per
   specificità maggiore: il nostro selettore qui sotto ha la STESSA specificità
   del nativo (0,2,0 contro 0,2,0 — pareggio, verificato leggendo
   woocommerce-layout.css). Vince perché skin-vivoeventi.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 ve-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}
.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(11 95 239/.06);color:var(--ink)}
.woocommerce-MyAccount-navigation li.is-active a{
  color:var(--blu);font-weight:700;border-left-color:var(--blu);background:rgb(11 95 239/.08);
}
.woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--ink-tenue)}
.woocommerce-MyAccount-content{min-width:0}
.woocommerce-MyAccount-content > p{color:var(--ink-soft);margin:0 0 16px}
.woocommerce-MyAccount-content > p:first-child{
  font-family:var(--font-display);font-size:1.1rem;color:var(--ink);
}

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

/* edit-account / edit-address / login / register: stesso .btn blu 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:#0D1B45;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:#2E77FF;color:#0D1B45}
.woocommerce-LostPassword{margin-top:14px;font-size:.85rem}
.woocommerce-LostPassword a{color:var(--blu)}
#customer_login .col-1,#customer_login .col-2{float:none;width:auto}
#customer_login.u-columns.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
/* TERZA occorrenza del clearfix-fantasma Woo dentro grid (dopo MyAccount
   loggato e #customer_details del checkout, stessi commenti sopra): il
   ::before di col2-set occupava la cella 1,1 spingendo "Accedi" a destra e
   "Registrati" alla riga sotto (segnalato 5 ago). Spento + piazzamento
   esplicito dei veri figli. */
#customer_login.u-columns.col2-set::before,
#customer_login.u-columns.col2-set::after{content:none}
#customer_login.u-columns.col2-set .col-1{grid-column:1;grid-row:1}
#customer_login.u-columns.col2-set .col-2{grid-column:2;grid-row:1}
#customer_login h2{font-family:var(--font-display);font-size:1.3rem;margin:0 0 16px}

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

/* ===== 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 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(--blu);font-weight:600}
.pagina-testo-contenuto a:hover{color:var(--blu-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(--blu)}
/* 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(255 180 40/.12);border:1px solid var(--bordo-forte);border-left:3px solid var(--blu);
  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}
}

/* ════ MENÙ DELLA SERATA: campo libero dell'editor ════
   Dal 13 ago il menù è un WYSIWYG, non più un repeater a una riga per portata:
   quello che arriva è HTML dell'editor (ul/li, p, strong…). Il contenuto va
   allineato al resto della scheda — prima le voci partivano a filo del bordo
   mentre la nota sotto rientrava, e la colonna sembrava sfasata. */
.menu-lista{margin:0}
.menu-lista > *:first-child{margin-top:0}
.menu-lista > *:last-child{margin-bottom:0}
.menu-lista p{margin:0 0 .7em}
.menu-lista ul,.menu-lista ol{margin:0 0 .7em;padding-left:1.35em;list-style:disc}
.menu-lista ol{list-style:decimal}
.menu-lista li{margin-bottom:.3em;padding-left:.15em}
.menu-lista li::marker{color:var(--blu)}
.menu-lista strong{font-weight:700;color:var(--ink)}
.menu-nota{margin-top:.9em;font-size:.86rem;color:var(--ink-tenue);max-width:62ch}

/* ════ LISTING: ricerca libera nella barra filtri (richiesta 5 ago) ════
   Campo a pillola con lente blu, 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(--blu);color:#fff;
  cursor:pointer;transition:background var(--t);
}
.barra-cerca-campo button:hover{background:var(--blu-hover)}
@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 / bianco is-scrolled), badge ambra
   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-navy);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(--blu)}
.header-carrello-num{
  position:absolute;top:-1px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--ambra);color:#0D1B45;
  font-size:.62rem;font-weight:700;line-height:1;display:grid;place-items:center;
}

/* ════ LOCALI: archivio e card della struttura ════
   Sezione nuova (13 ago): il mockup non prevedeva né l'archivio /locali/ né
   una card di struttura. La card riusa .event-card — stessa forma e stesse
   regole mobile — e cambia solo il piede, dove al posto del prezzo c'è il
   numero VERO delle serate in programma. */
/* galleria della struttura: si adatta al numero di foto (con una sola, la
   griglia a 3 colonne fissa lasciava due buchi e sembrava rotta) */
.struttura-gallery{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.locale-card .event-card-media{aspect-ratio:16/10}
.locale-card-serate{font-size:.86rem;color:var(--ink-soft)}
.locale-card-serate strong{color:var(--ink);font-weight:700}
.locale-card .event-card-cta{color:var(--blu)}

/* azioni dentro l'hero fotografico (struttura, landing locali) */
.listing-hero-azioni{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
/* il .btn-fantasma di serie è inchiostro su bordo tenue: sulla foto scura
   sparisce. Qui prende la variante chiara, come nell'header trasparente. */
.listing-hero .btn-fantasma{color:#fff;border-color:rgb(232 236 246/.45);background:rgb(8 18 49/.18)}
.listing-hero .btn-fantasma:hover{color:#fff;border-color:#fff;background:rgb(8 18 49/.32)}
@media (max-width:760px){
  .listing-hero-azioni{width:100%}
  .listing-hero-azioni .btn{width:100%;justify-content:center}
}

/* ════ LANDING PER I LOCALI E PAGINA CONTATTI ════
   Pagina nuova (13 ago): adesione al circuito. Riusa i componenti del design
   system — hero del listing, .tappe, .faq-2col, .info-pratiche, .formato-card
   — quindi qui serve solo il guscio del modulo Formidable e un contenitore
   più stretto per la lettura. */
.container--stretto{max-width:760px}
.pagina-locali-landing .tappe{max-width:900px;margin-inline:auto}
.pagina-locali-landing .faq-2col .evento-titolo{margin-bottom:14px}
.pagina-locali-landing .info-pratiche li{align-items:flex-start}
.pagina-locali-landing .formato-card{padding:26px}

.form-card{
  background:var(--bianco);border:1px solid var(--bordo);border-radius:var(--radius);
  box-shadow:var(--ombra);padding:28px;
}
.candidatura-nota{margin-top:14px;text-align:center;font-size:.85rem;color:var(--ink-tenue)}

/* Formidable arriva col suo foglio: qui si allinea ai campi del portale
   (stesse superfici, stessi raggi, stesso blu) senza toccare il plugin. */
.form-card .frm_forms,.form-card .frm_form_fields{width:100%}
.form-card .frm_form_field{margin-bottom:16px}
.form-card .frm_primary_label{
  display:block;margin-bottom:6px;
  font-family:var(--font-ui);font-size:.86rem;font-weight:600;color:var(--ink);
}
.form-card .frm_required{color:var(--rosso)}
.form-card .frm_description{font-size:.8rem;color:var(--ink-tenue);margin-top:4px}
.form-card input[type=text],
.form-card input[type=email],
.form-card input[type=tel],
.form-card input[type=number],
.form-card select,
.form-card textarea{
  width:100%;padding:.75em .9em;
  background:var(--bianco);color:var(--ink);
  border:1px solid var(--bordo-forte);border-radius:12px;
  font-family:var(--font-ui);font-size:.95rem;
  transition:border-color var(--t),box-shadow var(--t);
}
.form-card textarea{min-height:120px;resize:vertical}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{
  outline:none;border-color:var(--blu);box-shadow:0 0 0 3px var(--blu-bg);
}
.form-card .frm_checkbox label,.form-card .frm_radio label{
  display:flex;align-items:flex-start;gap:9px;font-size:.9rem;color:var(--ink-soft);font-weight:500;
}
.form-card .frm_checkbox input,.form-card .frm_radio input{margin-top:.25em;accent-color:var(--blu)}
.form-card .frm_submit{margin-top:8px}
.form-card .frm_button_submit{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:.95em 1.6em;border:0;border-radius:999px;cursor:pointer;
  background:var(--blu);color:#fff;
  font-family:var(--font-ui);font-weight:700;font-size:.95rem;
  transition:background var(--t),transform var(--t),box-shadow var(--t);
}
.form-card .frm_button_submit:hover{
  background:var(--blu-hover);transform:translateY(-2px);box-shadow:0 12px 30px rgb(11 95 239/.35);
}
.form-card .frm_error,.form-card .frm_error_style{
  color:var(--rosso);font-size:.84rem;margin-top:5px;background:none;border:0;padding:0;
}
.form-card .frm_message{
  background:var(--blu-bg);border:1px solid var(--bordo);border-radius:12px;
  padding:18px 20px;color:var(--ink);
}
@media (max-width:760px){
  .form-card{padding:20px 16px}
}

/* canali di contatto: tre schede pari, stessa carta delle altre card */
.contatti-canali{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:36px;
}
.contatti-canale{
  display:flex;flex-direction:column;gap:8px;height:100%;
  background:var(--bianco);border:1px solid var(--bordo);border-radius:var(--radius);
  box-shadow:var(--ombra);padding:24px;color:inherit;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
a.contatti-canale:hover{transform:translateY(-3px);box-shadow:var(--ombra-su);border-color:var(--bordo-forte);color:inherit}
.contatti-canale-icona{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--blu-bg);color:var(--blu);margin-bottom:4px;
}
.contatti-canale h3{font-family:var(--font-ui);font-size:1.02rem;font-weight:700;line-height:1.3}
.contatti-canale p{font-size:.88rem;color:var(--ink-soft);margin:0}
.contatti-canale-valore{margin-top:auto;padding-top:10px;font-weight:600;color:var(--blu);font-size:.92rem}
@media (max-width:760px){
  .contatti-canali{grid-template-columns:1fr;gap:12px}
  .contatti-canale{padding:20px}
}