/* =========================================================================
   LA BIGLIETTERIA

   Due pagine, due intenzioni diverse.

   La VETRINA e' la griglia di WooCommerce, non ritoccata nella struttura:
   il cliente ha bocciato due volte una vetrina che raggruppava i biglietti
   per serata — «riporta sempre come fossero prodotti». Una scacchiera la
   gente sa gia' leggerla. Qui si veste, non si riorganizza.

   La SCHEDA invece e' il posto dove una biglietteria puo' dire quello che un
   catalogo non dice: che sera e', a che ora si entra, dov'e', e se ti fanno
   entrare. Li' il lavoro c'e'.

   Tutti i colori vengono dai token --vnl-*: il tema chiaro arriva da solo.
   ========================================================================= */

/* -------------------------------------------------------------- la vetrina

   LA COPERTINA DEL DISCO.

   La struttura resta quella di WooCommerce: il cliente ha bocciato due volte
   una vetrina che raggruppava i biglietti per serata, e una scacchiera la
   gente sa gia' leggerla. Qui non si riorganizza niente — si veste.

   La forma e' il QUADRATO, e non e' un vezzo: una griglia si legge solo se
   le celle sono identiche, e qui dentro convivono una locandina quadrata,
   la foto verticale di un brunch e una torta in orizzontale. Il quadrato le
   tiene tutte alla stessa misura — ed e' la forma delle copertine che danno
   il nome al locale.

   Nella vetrina la foto si RITAGLIA. Nella scheda, piu' sotto, no: li' una
   locandina tagliata perde meta' di cio' che dice.
   ---------------------------------------------------------------------- */

/* La testata: WooCommerce mette in fila il conteggio e il menu d'ordine come
   se fossero due frasi. Sono due comandi, e stanno su una riga sola con lo
   spazio in mezzo. */
.vnl-negozio .woocommerce-products-header {
	margin-bottom: var(--vnl-space-lg);
}

.vnl-negozio .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: var(--vnl-space-lg);
}

.vnl-negozio .woocommerce-result-count,
.vnl-negozio .woocommerce-ordering {
	display: inline-block;
	margin: 0 0 var(--vnl-space-md);
	color: var(--vnl-text-faint);
	font-size: var(--vnl-size-caption);
	letter-spacing: var(--vnl-tracking-wide);
	text-transform: uppercase;
	vertical-align: middle;
}

.vnl-negozio .woocommerce-ordering {
	float: right;
}

.vnl-negozio .woocommerce-ordering select {
	min-height: 44px;
	padding: 0 2.2em 0 0.8em;
	background: var(--vnl-surface-1);
	color: var(--vnl-text);
	border: 1px solid var(--vnl-border);
	border-radius: var(--vnl-radius-none);
	font-family: var(--vnl-font-body);
	font-size: var(--vnl-size-body-sm);
	letter-spacing: 0;
	text-transform: none;
	/* La freccia disegnata: quella di sistema e' grigio chiaro su fondo nero
	   e sparisce. */
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 1.1em center, right 0.8em center;
	background-size: 0.35em 0.35em, 0.35em 0.35em;
	background-repeat: no-repeat;
	cursor: pointer;
}

.vnl-negozio ul.products {
	list-style: none;
	clear: both;
	margin: var(--vnl-space-lg) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	/*
	 * Le righe di separazione si disegnano sui BORDI delle schede, non con
	 * uno sfondo sotto la griglia.
	 *
	 * Col fondo sotto e un interstizio di un pixel lo scaffale veniva bene
	 * finche' la fila era piena — ma sei prodotti su quattro colonne lasciano
	 * due celle vuote, e li' si vedeva un blocco grigio grande mezza
	 * schermata. Una cella vuota non e' un ripiano: e' pagina.
	 */
	border-top: 1px solid var(--vnl-border);
	border-left: 1px solid var(--vnl-border);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
	.vnl-negozio ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 68rem) {
	.vnl-negozio ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vnl-negozio ul.products li.product {
	position: relative;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	background: var(--vnl-surface-0);
	border: 0;
	border-right: 1px solid var(--vnl-border);
	border-bottom: 1px solid var(--vnl-border);
	border-radius: var(--vnl-radius-none);
	transition: background-color 200ms ease-out;
}

.vnl-negozio ul.products li.product:hover,
.vnl-negozio ul.products li.product:focus-within {
	background: var(--vnl-surface-1);
}

/* IL COLLEGAMENTO DELLA SCHEDA.

   I suoi figli sono gia' nell'ordine giusto — fotografia, data, titolo,
   prezzo — quindi basta una colonna. `overflow: hidden` sta QUI e non
   sull'immagine: l'ingrandimento al passaggio del mouse deve essere
   ritagliato da un antenato, e se il ritaglio stesse sull'immagine il suo
   `transform` non avrebbe nessuno a contenerlo. */
.vnl-negozio ul.products li.product > a:not(.button),
.woocommerce.vnl-negozio ul.products li.product > a:not(.button) {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

/* IL RIQUADRO DELLA FOTO.

   Il rapporto sta sull'immagine, cosi' lo spazio e' riservato prima che la
   fotografia arrivi e la pagina non salta mentre carica. */
.vnl-negozio ul.products li.product a img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	border-radius: var(--vnl-radius-none);
	background: var(--vnl-surface-1);
	transition: transform 400ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 200ms ease-out;
}

.vnl-negozio ul.products li.product:hover a img,
.vnl-negozio ul.products li.product:focus-within a img {
	transform: scale(1.04);
}

/* Il testo della scheda: una colonna sola, con lo stesso respiro ai lati.

   L'altezza minima sta sulla classe BASE, non sul solo segnaposto: cosi' la
   riga della data e quella vuota misurano uguale e i titoli si allineano
   fra schede che hanno una serata e schede che non ce l'hanno. Il calcolo
   comprende la spaziatura perche' il riquadro qui e' misurato dal bordo —
   un `min-height` di sole 1.45em se la mangiava tutta e restava un pixel. */
.vnl-negozio ul.products li.product .vetrina__quando {
	margin: 0;
	min-height: calc(var(--vnl-space-md) + 1.6em);
	padding: var(--vnl-space-md) var(--vnl-space-md) 0;
	font-size: var(--vnl-size-caption);
	letter-spacing: var(--vnl-tracking-wide);
	text-transform: uppercase;
	color: var(--vnl-brand);
}

.vnl-negozio ul.products li.product .vetrina__quando b { font-weight: 700; }


.vnl-negozio ul.products li.product .vetrina__quando--passata { color: var(--vnl-text-faint); }

.vnl-negozio ul.products li.product .vetrina__quando em {
	font-style: normal;
	margin-inline-start: 0.5em;
	padding: 0.1em 0.45em;
	border: 1px solid var(--vnl-border);
	letter-spacing: 0.08em;
}

.vnl-negozio ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--vnl-font-display);
	font-size: var(--vnl-size-body-sm);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
	margin: 0;
	padding: var(--vnl-space-sm) var(--vnl-space-md) 0;
	color: var(--vnl-text);
	/* Tre righe bastano: oltre, la scheda si allunga e la scacchiera si
	   sfalsa. Il titolo intero resta nella scheda del prodotto. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vnl-negozio ul.products li.product .price {
	display: block;
	padding: var(--vnl-space-sm) var(--vnl-space-md) var(--vnl-space-md);
	font-family: var(--vnl-font-display);
	font-size: var(--vnl-size-body);
	font-weight: 700;
	color: var(--vnl-brand);
	font-variant-numeric: tabular-nums;
}

.vnl-negozio ul.products li.product .price del {
	color: var(--vnl-text-faint);
	font-weight: 400;
	margin-inline-end: var(--vnl-space-xs);
}

/* Il bottone sempre alla stessa altezza da terra, coi titoli di lunghezza
   diversa: `margin-top: auto` lo spinge in fondo alla scheda. */
.vnl-negozio ul.products li.product .button {
	margin: auto var(--vnl-space-md) var(--vnl-space-md);
}

/* Una serata passata resta in vetrina ma non compete con quelle comprabili. */
.vnl-negozio ul.products li.product.vetrina--passata a img { opacity: 0.45; }
.vnl-negozio ul.products li.product.vetrina--passata:hover a img { opacity: 0.7; }
.vnl-negozio ul.products li.product.vetrina--passata .price { color: var(--vnl-text-faint); }
/* Non si compra piu': il bottone porta solo alla scheda, e non deve avere
   lo stesso peso di quelli in vendita accanto. */
.vnl-negozio ul.products li.product.vetrina--passata .button {
	background: transparent;
	color: var(--vnl-text-muted);
	box-shadow: inset 0 0 0 1px var(--vnl-border);
}
.vnl-negozio ul.products li.product.vetrina--passata .button:hover {
	background: var(--vnl-surface-2);
	color: var(--vnl-text);
}

.vnl-negozio ul.products li.product .onsale {
	position: absolute;
	z-index: 2;
	margin: var(--vnl-space-sm);
	padding: 0.2em 0.6em;
	background: var(--vnl-brand);
	color: var(--vnl-on-brand);
	font-size: var(--vnl-size-caption);
	font-weight: 700;
	letter-spacing: var(--vnl-tracking-wide);
	text-transform: uppercase;
}

/* I bottoni di WooCommerce prendono l'aspetto di quelli del sito, senza che
   ogni template debba ricordarsi di aggiungere una classe. */
.vnl-negozio .button,
.vnl-negozio button[type="submit"],
.vnl-negozio input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;            /* la misura minima di un bersaglio da dito */
	padding: 0.7em 1.4em;
	background: var(--vnl-brand);
	color: var(--vnl-on-brand);
	border: 0;
	border-radius: var(--vnl-radius-sm);
	font-family: var(--vnl-font-body);
	font-size: var(--vnl-size-body-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 180ms ease-out;
}

.vnl-negozio .button:hover,
.vnl-negozio button[type="submit"]:hover,
.vnl-negozio input[type="submit"]:hover {
	background: var(--vnl-brand-hover);
	color: var(--vnl-on-brand);
}

/* Il bottone «principale» di WooCommerce nasce viola — `button.button.alt`
   con il suo #a46497 — e vince per specificita' sulla regola qui sopra. */
.woocommerce .vnl-negozio button.button.alt,
.woocommerce .vnl-negozio a.button.alt,
.vnl-negozio .woocommerce button.button.alt,
.vnl-negozio button.button.alt,
.vnl-negozio a.button.alt,
.vnl-negozio input.button.alt {
	background: var(--vnl-brand);
	color: var(--vnl-on-brand);
}

.woocommerce .vnl-negozio button.button.alt:hover,
.vnl-negozio button.button.alt:hover,
.vnl-negozio a.button.alt:hover,
.vnl-negozio input.button.alt:hover {
	background: var(--vnl-brand-hover);
	color: var(--vnl-on-brand);
}

.vnl-negozio .button:focus-visible,
.vnl-negozio button:focus-visible,
.vnl-negozio input:focus-visible,
.vnl-negozio select:focus-visible,
.vnl-negozio a:focus-visible {
	outline: 3px solid var(--vnl-brand);
	outline-offset: 3px;
}

/* --------------------------------------------------------------- la scheda

   LA CORNICE.

   Qui vale la regola opposta alla vetrina: la fotografia NON si ritaglia.
   Una locandina e' un'immagine progettata — ci sono scritti l'ospite, l'ora,
   l'indirizzo — e tagliarla per far quadrare una griglia butta via proprio
   le informazioni per cui esiste.

   Quindi: cornice sempre QUADRATA e immagine intera dentro. Una locandina
   quadrata la riempie; una foto verticale lascia due bande ai lati, ma su
   fondo nero le bande non si vedono — il fondo della cornice e' il fondo
   della pagina.

   Prima la cornice non c'era e comandava la fotografia: quella del brunch e'
   600×749, veniva resa alta 639 pixel e spingeva prezzo e bottone sotto la
   piega, lasciando mezza schermata vuota di fianco.
   ---------------------------------------------------------------------- */

.bigl {
	display: block;
}

/* Le due colonne: la fotografia a sinistra, tutto cio' che serve a comprare
   a destra. Sotto i 56rem diventa una colonna sola. */
.bigl__testa {
	display: grid;
	gap: var(--vnl-space-xl);
	align-items: start;
	margin-block: var(--vnl-space-lg) var(--vnl-space-2xl);
}

@media (min-width: 56rem) {
	.bigl__testa {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--vnl-space-2xl);
	}
}

/* WooCommerce fa galleggiare la galleria a sinistra dentro meta' colonna —
   `div.product div.images { width: 48%; float: left }` — perche' si aspetta
   di disegnare lui le due colonne. Qui le colonne le fa la griglia. */
.woocommerce div.product div.images.woocommerce-product-gallery,
.bigl .woocommerce-product-gallery {
	float: none;
	width: 100%;
	margin: 0;
}

.bigl__media {
	max-width: 30rem;
}

/* La cornice quadrata: il rapporto sta sul contenitore, cosi' lo spazio e'
   riservato prima che la fotografia arrivi. */
.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__image,
.bigl__media .woocommerce-product-gallery__image {
	display: grid;
	aspect-ratio: 1 / 1;
	background: var(--vnl-surface-1);
	border: 1px solid var(--vnl-border);
}

/*
 * PERCHE' `height: 100%` SULL'IMMAGINE NON BASTA.
 *
 * L'altezza della cornice non e' scritta: DERIVA da `aspect-ratio`. Per il
 * calcolo delle percentuali dei discendenti un'altezza cosi' e' indefinita, e
 * un `height: 100%` che non trova un riferimento definito ricade su `auto`.
 * Risultato sul brunch, 600×750: cornice 478, fotografia 595, sbordava. La
 * regola vinceva la cascata e non serviva a niente — e' il genere di difetto
 * che si cerca a lungo nella specificita' quando sta altrove.
 *
 * Si spezza la catena: il collegamento si ancora ai quattro lati (`inset: 0`,
 * e la diapositiva e' gia' `position: relative` per flexslider), cosi' la sua
 * altezza e' definita. L'immagine poi non usa percentuali sulla propria
 * altezza: usa dei LIMITI, ed e' centrata dalla griglia.
 */
.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__image > a,
.bigl__media .woocommerce-product-gallery__image > a {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

/*
 * E ANCHE `max-height: 100%` E' UNA PERCENTUALE DI TROPPO.
 *
 * L'immagine e' un elemento di griglia, e la riga che la contiene e'
 * dimensionata dall'elemento stesso: il suo limite dipende dalla riga, la
 * riga dipende da lei. Davanti a una dipendenza circolare il browser scarta
 * la percentuale — cosi' la fotografia del brunch restava alta 595 dentro
 * una cornice di 476, tagliata sotto.
 *
 * Si smette di chiedere percentuali al contenuto: l'immagine si ancora ai
 * quattro lati del collegamento, che una misura definita ce l'ha perche' la
 * prende dalla diapositiva. `contain` fa il resto, e la locandina resta
 * intera.
 */
.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.bigl__media .woocommerce-product-gallery__image img,
.bigl__media img.wp-post-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
}

/* LA LENTE.

   Era un'emoji 🔍 dentro un cerchio bianco: l'unica cosa tonda e chiara di
   una pagina fatta di spigoli vivi su fondo nero. E un'emoji non e' un'icona
   — cambia forma da un sistema all'altro e non si puo' colorare.
   Qui e' disegnata: un cerchio e un manico, che prendono il colore del testo
   e diventano arancioni quando ci passi sopra. */
.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger,
.bigl__media .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--vnl-surface-0);
	border: 1px solid var(--vnl-border);
	border-radius: var(--vnl-radius-none);
	font-size: 0;              /* zittisce l'emoji senza toglierla dal DOM */
	text-indent: 0;
	color: var(--vnl-text);
	transition: color 180ms ease-out, border-color 180ms ease-out;
}

.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger img,
.bigl__media .woocommerce-product-gallery__trigger img { display: none; }

.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger::before,
.bigl__media .woocommerce-product-gallery__trigger::before {
	content: "";
	width: 13px;
	height: 13px;
	border: 2px solid currentColor;
	border-radius: 50%;
	transform: translate(-2px, -2px);
}

.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger::after,
.bigl__media .woocommerce-product-gallery__trigger::after {
	content: "";
	position: absolute;
	width: 2px;
	height: 8px;
	background: currentColor;
	transform: translate(6px, 7px) rotate(-45deg);
}

.bigl__media .woocommerce-product-gallery__trigger:hover,
.bigl__media .woocommerce-product-gallery__trigger:focus-visible {
	color: var(--vnl-brand);
	border-color: var(--vnl-brand);
}

/* LA STRISCIA DI PROVINI.

   Erano francobolli da 19 pixel a distanze diverse: la mia griglia stava
   sull'`ul` mentre la misura la decideva il `li`, che flexslider dimensiona
   per conto suo. Si governa il `li`, non l'immagine. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs,
.bigl__media .flex-control-thumbs {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--vnl-space-sm);
	margin: var(--vnl-space-sm) 0 0;
	padding: 0;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li,
.bigl__media .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
	list-style: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img,
.bigl__media .flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;      /* i provini si possono ritagliare: servono a scegliere */
	margin: 0;
	cursor: pointer;
	opacity: 0.45;
	outline: 1px solid var(--vnl-border);
	outline-offset: -1px;
	transition: opacity 180ms ease-out, outline-color 180ms ease-out;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img:hover,
.bigl__media .flex-control-thumbs img:hover {
	opacity: 0.8;
	outline-color: var(--vnl-border-strong);
}

/* Il provino corrente si riconosce da DUE cose, non dal solo colore: e' piu'
   luminoso ed e' incorniciato. Chi non distingue l'arancione vede comunque
   quale sta guardando. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.bigl__media .flex-control-thumbs img.flex-active {
	opacity: 1;
	outline: 2px solid var(--vnl-brand);
	outline-offset: -2px;
}

/* Flexslider fissa l'altezza della finestra in linea, misurando la diapositiva
   piu' alta. Con la cornice quadrata misura giusto da solo: non serve
   forzarla, e forzarla romperebbe lo scorrimento fra le fotografie. */
.bigl__media .flex-viewport {
	background: var(--vnl-surface-1);
}


/* ------------------------------------------------------- le briciole di pane

   Il difetto non era orizzontale: partivano gia' da 72, esattamente come le
   due colonne sotto. Era il ritmo VERTICALE — appiccicate all'intestazione
   sopra (due pixel), e ottantanove di vuoto sotto, prima della cosa che
   etichettano. Una riga che galleggia fra due nulla non sembra parte della
   pagina: sembra caduta li'.

   Ora e' una fascia sua: respira sopra, sta vicina a cio' che introduce, e
   una linea sottile la chiude. E smette di somigliare al testo del contenuto
   — era 14px nel carattere del corpo, cioe' la stessa voce di cio' che si
   legge davvero. Le briciole sono un'insegna, non un testo.
   ---------------------------------------------------------------------- */

.vnl-negozio .woocommerce-breadcrumb {
	/* Nessun margine in cima: lo spazio dall'intestazione fissa lo decide il
	   contenitore, in un posto solo (`.vnl-negozio .site-main` in wp.css).
	   Un margine qui, oltre a essere una seconda voce sulla stessa cosa,
	   COLLASSAVA verso l'esterno e spostava il contenitore invece di fare
	   spazio dentro. */
	margin: 0;
	padding: 0 0 var(--vnl-space-md);
	border-bottom: 1px solid var(--vnl-border);
	font-size: var(--vnl-size-caption);
	letter-spacing: var(--vnl-tracking-wide);
	text-transform: uppercase;
	color: var(--vnl-text-faint);
	/* Un titolo lungo va a capo invece di uscire dallo schermo, e le righe
	   restano leggibili una sotto l'altra. */
	line-height: 1.9;
}

.vnl-negozio .woocommerce-breadcrumb a {
	color: var(--vnl-text-muted);
	text-decoration: none;
	transition: color 180ms ease-out;
}

.vnl-negozio .woocommerce-breadcrumb a:hover,
.vnl-negozio .woocommerce-breadcrumb a:focus-visible {
	color: var(--vnl-brand);
}

/*
 * IL SEPARATORE.
 *
 * Yoast lo stampa come nodo di TESTO fra un collegamento e l'altro: il CSS
 * da solo non lo raggiunge, e infatti la mia prima regola non faceva niente.
 * Si avvolge in un elemento dal filtro (vedi `vinile_briciole_separatore`) e
 * da qui si spegne.
 *
 * Serve perche' la barra era dello stesso colore del testo e senza spazio
 * intorno — e accanto a un titolo che una barra ce l'ha gia' dentro, «Tommy
 * Vee – 26/03/2026 | Ingresso in pista DONNA», diventava una fila di segni
 * uguali in cui non si capiva dove finisse un passaggio.
 */
.vnl-negozio .woocommerce-breadcrumb .vnl-briciola-sep {
	display: inline-block;
	margin: 0 0.5em;
	color: var(--vnl-text-faint);
	opacity: 0.55;
}

.vnl-negozio .woocommerce-breadcrumb .breadcrumb_last,
.vnl-negozio .woocommerce-breadcrumb strong {
	color: var(--vnl-text);
	font-weight: 700;
}

/* La pagina sotto non deve riaprire la distanza che la fascia ha gia' dato.

   I cinquanta pixel di spaziatura su `div.product` che si sommavano al
   margine qui sotto NON erano del tema genitore, come avevo scritto il 13/09:
   erano `.bigl { padding-block: clamp(2.5rem, 7vh, 4rem) }`, rimasto in
   `wp.css` dalla vetrina bocciata. Il nome `.bigl` era usato da due
   componenti diversi. Il blocco morto e' stato rimosso; questa regola resta
   perche' la spaziatura la deve decidere questo foglio, non ereditarla. */
.woocommerce div.product.bigl,
.vnl-negozio .bigl {
	padding-top: 0;
}

.vnl-negozio .bigl__testa {
	margin-top: var(--vnl-space-lg);
}
/* La data e' la prima cosa che si cerca comprando un biglietto, e nel titolo
   sta in cifre in mezzo a un trattino e una barra. Qui sta sopra, per esteso,
   col giorno della settimana che il titolo non porta affatto. */
.bigl__quando {
	margin: 0 0 var(--vnl-space-sm);
	font-size: var(--vnl-size-body-sm);
	letter-spacing: var(--vnl-tracking-wide);
	text-transform: uppercase;
	color: var(--vnl-brand);
}

.bigl__quando b {
	font-weight: 700;
}

.bigl__quando--passata {
	color: var(--vnl-text-faint);
}

.bigl__quando em {
	font-style: normal;
	margin-inline-start: var(--vnl-space-sm);
	padding: 0.15em 0.5em;
	border: 1px solid var(--vnl-border);
	font-size: var(--vnl-size-caption);
	letter-spacing: 0.08em;
}

/* Il nome, in due pezzi.

   Il titolo vero e' «Tommy Vee – 26/03/2026 | Ingresso in pista DONNA»: chi
   suona, quando, e cosa compri, schiacciati in una riga da un trattino e una
   barra. Reso in un blocco solo, in maiuscolo e alla misura del display,
   diventa quattro righe di cartellone in cui non si legge piu' niente — e
   ripete la data che sta gia' scritta sopra.

   Spezzato in due, ogni pezzo torna a dire una cosa: il nome grande, cosa
   compri sotto. La data non si ripete perche' l'ha gia' detta l'occhiello.
   Il titolo intero resta comunque quello di WooCommerce nel <title>, nei
   dati strutturati e nell'ordine: cambia la tipografia, non il nome. */
.bigl__nome {
	margin: 0 0 var(--vnl-space-md);
	font-family: var(--vnl-font-display);
	line-height: var(--vnl-leading-display);
	letter-spacing: var(--vnl-tracking-display);
	overflow-wrap: break-word;
	text-wrap: balance;
}

.bigl__nome b {
	display: block;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 800;
}

.bigl__nome span {
	display: block;
	margin-top: var(--vnl-space-xs);
	font-family: var(--vnl-font-body);
	font-size: var(--vnl-size-body);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.35;
	color: var(--vnl-text-muted);
}

.bigl__occhiello {
	color: var(--vnl-text-muted);
	font-size: var(--vnl-size-body);
	line-height: var(--vnl-leading-body);
	max-width: 42ch;
}

.bigl__occhiello p:last-child { margin-bottom: 0; }

.bigl__prezzo {
	margin: var(--vnl-space-lg) 0 var(--vnl-space-md);
	font-family: var(--vnl-font-display);
	font-size: var(--vnl-size-display-sm);
	font-weight: 700;
	color: var(--vnl-text);
	font-variant-numeric: tabular-nums;
}

.bigl__prezzo del { color: var(--vnl-text-faint); font-weight: 400; }
.bigl__prezzo ins { text-decoration: none; color: var(--vnl-brand); }

.bigl .cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--vnl-space-sm);
	margin: 0 0 var(--vnl-space-lg);
}

.bigl .quantity input[type="number"] {
	width: 5rem;
	min-height: 44px;
	padding: 0 0.6em;
	background: var(--vnl-surface-1);
	color: var(--vnl-text);
	border: 1px solid var(--vnl-border);
	border-radius: var(--vnl-radius-sm);
	font-size: var(--vnl-size-body);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.bigl .single_add_to_cart_button {
	flex: 1 1 12rem;
}

/* I fatti che il titolo non porta: dove si va e a che ora si entra. Sono le
   due cose che si cercano DOPO aver deciso di comprare, ed e' cercandole
   altrove che si abbandona il carrello. */
.bigl__fatti {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--vnl-space-md);
	margin: 0 0 var(--vnl-space-lg);
	padding: var(--vnl-space-md) 0;
	border-block: 1px solid var(--vnl-border);
}

.bigl__fatti dt {
	font-size: var(--vnl-size-caption);
	letter-spacing: var(--vnl-tracking-wide);
	text-transform: uppercase;
	color: var(--vnl-text-faint);
	margin-bottom: var(--vnl-space-xs);
}

.bigl__fatti dd {
	margin: 0;
	font-size: var(--vnl-size-body-sm);
	color: var(--vnl-text);
}

.bigl__serata {
	display: flex;
	flex-direction: column;
	gap: var(--vnl-space-xs);
	padding: var(--vnl-space-md);
	background: var(--vnl-surface-1);
	border: 1px solid var(--vnl-border);
	text-decoration: none;
	color: inherit;
	transition: border-color 180ms ease-out;
}

.bigl__serata:hover { border-color: var(--vnl-brand); }

.bigl__serata span {
	font-size: var(--vnl-size-caption);
	letter-spacing: var(--vnl-tracking-wide);
	text-transform: uppercase;
	color: var(--vnl-text-faint);
}

.bigl__serata b {
	font-family: var(--vnl-font-display);
	font-size: var(--vnl-size-body);
}

/* LA DESCRIZIONE SU DUE COLONNE.

   A una colonna sola la descrizione occupava la meta' sinistra e lasciava
   vuota la destra: sotto una scheda che DUE colonne ce le ha, la pagina
   sembrava perdere un pezzo per strada.

   Colonne vere, non una griglia con le sezioni appaiate: il testo lo scrive
   il cliente e non si sa quante sezioni avra'. Una griglia intonata a «due
   titoletti» si scompone al primo che ne mette tre.

   La larghezza resta governata: 104 caratteri in tutto fanno due colonne da
   una cinquantina, che e' dentro la misura leggibile. Senza limite, su uno
   schermo largo diventerebbero due colonne da settantacinque — e due colonne
   troppo larghe si leggono peggio di una sola. */
.bigl__testo {
	max-width: 62ch;
	margin-bottom: var(--vnl-space-xl);
	line-height: var(--vnl-leading-body);
	color: var(--vnl-text-muted);
}

@media (min-width: 62rem) {
	.bigl__testo {
		max-width: 104ch;
		columns: 2;
		column-gap: var(--vnl-space-2xl);
		/* Un filo fra le due colonne: senza, a volte non si capisce che sono
		   due e l'occhio prova a leggere per righe intere. */
		column-rule: 1px solid var(--vnl-border);
	}

	/*
	 * DOVE SI PUO' SPEZZARE, E DOVE NO.
	 *
	 * Un titoletto in fondo a una colonna, col suo paragrafo in cima
	 * all'altra, e' la cosa che rende illeggibile un testo a colonne: si
	 * legge un titolo che non introduce niente. `break-after: avoid` lo tiene
	 * attaccato a cio' che segue.
	 *
	 * E i paragrafi non si spezzano a meta': sono corti, e una riga sola
	 * rimasta in cima all'altra colonna e' peggio di una colonna dispari.
	 */
	.bigl__testo h2 {
		break-after: avoid;
		break-inside: avoid;
	}

	.bigl__testo p {
		break-inside: avoid;
	}

	/* Il primo titoletto non deve andare a capo colonna prima di cominciare. */
	.bigl__testo > :first-child {
		break-before: avoid;
		margin-top: 0;
	}
}

/* I titoletti ereditavano il grigio del paragrafo: alla stessa voce del testo
   che introducono, quindi senza gerarchia. Tornano al bianco pieno, e lo
   spazio sopra e' il doppio di quello sotto — cosi' ogni titolo appartiene a
   cio' che segue e non a cio' che chiude. */
.bigl__testo h2 {
	margin: var(--vnl-space-xl) 0 var(--vnl-space-sm);
	font-family: var(--vnl-font-display);
	font-size: var(--vnl-size-display-sm);
	line-height: 1.15;
	color: var(--vnl-text);
}

.bigl__testo h2:first-child { margin-top: 0; }

.bigl__testo p { margin: 0 0 var(--vnl-space-md); }
.bigl__testo p:last-child { margin-bottom: 0; }

/* Le regole della porta: chiuse di default. Chi le sa gia' non deve
   scorrerle ogni volta, chi non le sa le trova dove se le chiede. */
.bigl__porta {
	margin-bottom: var(--vnl-space-xl);
	border: 1px solid var(--vnl-border);
	background: var(--vnl-surface-1);
}

/* La freccia non e' decorazione: senza, il pannello sembra un titolo e
   nessuno prova ad aprirlo. Il marcatore predefinito lo nasconde il reset del
   tema, quindi si ridisegna — e ruota all'apertura, che e' l'unico modo per
   dire «ora e' aperto» senza scriverlo. */
.bigl__porta summary {
	padding: var(--vnl-space-md);
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vnl-space-md);
	cursor: pointer;
	font-family: var(--vnl-font-display);
	font-size: var(--vnl-size-body);
	font-weight: 700;
	list-style: none;
}

.bigl__porta summary::-webkit-details-marker { display: none; }

.bigl__porta summary::after {
	content: "";
	flex: none;
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid var(--vnl-text-faint);
	border-bottom: 2px solid var(--vnl-text-faint);
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 180ms ease-out;
}

.bigl__porta[open] summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.bigl__porta summary:focus-visible {
	outline: 3px solid var(--vnl-brand);
	outline-offset: -3px;
}

.bigl__porta dl {
	margin: 0;
	padding: 0 var(--vnl-space-md) var(--vnl-space-md);
	display: grid;
	gap: var(--vnl-space-md);
}

.bigl__porta dt {
	font-weight: 700;
	margin-bottom: var(--vnl-space-xs);
}

.bigl__porta dd {
	margin: 0;
	color: var(--vnl-text-muted);
	font-size: var(--vnl-size-body-sm);
	line-height: var(--vnl-leading-body);
	max-width: 62ch;
}

.bigl__altri h2 {
	font-family: var(--vnl-font-display);
	font-size: var(--vnl-size-display-sm);
	margin: 0 0 var(--vnl-space-md);
}

.bigl__altri ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--vnl-space-sm);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.bigl__altri a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vnl-space-md);
	min-height: 44px;
	padding: var(--vnl-space-md);
	background: var(--vnl-surface-1);
	border: 1px solid var(--vnl-border);
	text-decoration: none;
	color: inherit;
	transition: border-color 180ms ease-out;
}

.bigl__altri a:hover { border-color: var(--vnl-brand); }

/* Il riquadro intero e' il bersaglio: la sottolineatura dentro lo farebbe
   sembrare un collegamento DENTRO una scheda invece che la scheda stessa.

   Il prefisso `.vnl-root` non e' superfluo. La regola del tema che sottolinea
   i collegamenti dentro il testo e' `.vnl-root :is(p, li, dd, …) a`: una
   classe e due elementi. La mia, `.bigl__altri a`, e' una classe e UN
   elemento — perdeva per un soffio. E perdeva in modo ingannevole: lo `span`
   e il `<b>` dentro prendevano il `none`, il collegamento no, quindi a
   schermo la sottolineatura restava mentre il codice sembrava a posto. */
.vnl-root .bigl__altri a,
.vnl-root .bigl__altri a span,
.vnl-root .bigl__altri a b,
.bigl__altri a { text-decoration: none; }

.bigl__altri b {
	color: var(--vnl-brand);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Chi ha chiesto meno movimento lo ottiene. */
@media (prefers-reduced-motion: reduce) {
	.vnl-negozio *,
	.bigl * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
	.vnl-negozio ul.products li.product:hover { transform: none; }
}

/* I campi di WooCommerce (cassa, carrello, account) come quelli dei moduli
   del sito: nascevano bianchi su nero, come se fossero di un altro sito. */
.vnl-negozio :is(.input-text, select, textarea):not([type="checkbox"]):not([type="radio"]),
.vnl-negozio .select2-container--default .select2-selection--single {
	background: var(--vnl-surface-1);
	border: 1px solid var(--vnl-border);
	border-radius: 0;
	color: var(--vnl-text);
	font-family: var(--vnl-font-body);
	font-size: var(--vnl-size-body);
	min-height: 44px;
	transition: border-color var(--t-state, 180ms) ease-out;
}
.vnl-negozio .input-text, .vnl-negozio textarea { padding: 0.7rem 0.85rem; }
.vnl-negozio :is(.input-text, select, textarea):focus,
.vnl-negozio .select2-container--focus .select2-selection--single,
.vnl-negozio .select2-container--open .select2-selection--single {
	outline: none;
	border-color: var(--vnl-brand);
}
.vnl-negozio .input-text::placeholder, .vnl-negozio textarea::placeholder { color: var(--vnl-text-muted); opacity: 1; }
.vnl-negozio .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--vnl-text);
	line-height: 42px;
	padding-inline: 0.85rem 2rem;
}
.vnl-negozio .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.vnl-negozio .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--vnl-text-muted); }
/* Il menu aperto di select2 sta fuori dal modulo, attaccato al body. */
.vnl-negozio .select2-dropdown { background: var(--vnl-surface-1); border-color: var(--vnl-border); color: var(--vnl-text); }
.vnl-negozio .select2-search--dropdown .select2-search__field { background: var(--vnl-surface-0, #0e0d0d); border: 1px solid var(--vnl-border); color: var(--vnl-text); }
.vnl-negozio .select2-results__option--highlighted[aria-selected],
.vnl-negozio .select2-results__option--highlighted[data-selected] { background: var(--vnl-brand); color: var(--vnl-on-brand); }
/* WooCommerce ha il suo :focus con `.woocommerce form .form-row` davanti, e
   vinceva. Qui con lo stesso peso piu' la nostra classe. */
.vnl-negozio .woocommerce form .form-row :is(.input-text, select, textarea):focus { border-color: var(--vnl-brand); outline: none; box-shadow: none; }
/* L'occhio «mostra password» e' un'icona scura: sul campo scuro spariva. */
.vnl-negozio .show-password-input { filter: invert(1) opacity(0.64); }