/* =============================================================================
   Vinile — gli aggiustamenti che servono solo dentro WordPress.

   Sta separato dal design approvato di proposito: qui si vede subito cosa e'
   scelta di disegno e cosa e' attrito dell'ambiente.
   ========================================================================== */

/* Il menu telefono e' nascosto con l'attributo `hidden`, ma `.drawer` dichiara
   display:flex e vince sullo stile di base del browser. Va detto esplicito. */
.drawer[hidden] { display: none !important; }

.site-header__logo, .site-footer__logo { text-decoration: none; }

/* Il salto al contenuto: invisibile finche' non lo si raggiunge da tastiera. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.screen-reader-text:focus {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 999; width: auto; height: auto;
  clip-path: none; padding: 0.6rem 1rem; background: var(--vnl-brand);
  color: var(--vnl-on-brand); font-weight: 600;
}

/* GeneratePress incolonna tutto dentro un contenitore suo: il nostro
   `.wrap` fa gia' quel lavoro, e due contenitori annidati dimezzano la
   larghezza utile. */
.site-content, .content-area, .inside-article { max-width: none; padding: 0; margin: 0; }

/* ---------------------------------------------------------- i biglietti */

/* Righe, non card: sono tre o quattro voci con prezzo e disponibilita', e una
   tabella si legge piu' in fretta di quattro riquadri. */
.biglietti { padding-block: clamp(2.5rem, 7vh, 4rem); }
.biglietti__lista { list-style: none; margin: 0; padding: 0; }
.biglietto {
  display: grid; align-items: center; gap: var(--vnl-space-md);
  grid-template-columns: minmax(0,1fr) auto auto auto;
  padding-block: var(--vnl-space-md);
  border-block-start: 1px solid var(--vnl-border);
}
.biglietto:last-child { border-block-end: 1px solid var(--vnl-border); }
.biglietto__nome {
  font-family: var(--vnl-font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--vnl-size-display-sm); letter-spacing: var(--vnl-tracking-display);
  color: var(--vnl-text);
}
.biglietto__prezzo { font-variant-numeric: tabular-nums; color: var(--vnl-text); font-weight: 600; }
.biglietto__stato {
  font-family: var(--vnl-font-body); font-size: var(--vnl-size-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide);
  color: var(--vnl-text-muted);
}
/* Il tutto esaurito viene dalle scorte, mai piu' dalla parola ESAURITO
   scritta a mano nel titolo del prodotto. */
.biglietto[data-esaurito="true"] { opacity: 0.55; }
.biglietto[data-esaurito="true"] .biglietto__nome { text-decoration: line-through; }
.biglietto[data-esaurito="true"] .biglietto__stato { color: var(--vnl-text-faint); }

@media (max-width: 46rem) {
  .biglietto { grid-template-columns: minmax(0,1fr) auto; row-gap: 0.4rem; }
  .biglietto__stato { grid-column: 1; }
}

/* --------------------------------------------- serata passata o chiusa */

/* Dei 1.798 eventi la grandissima parte e' gia' avvenuta: questo NON e' un
   caso limite, e' la maggioranza delle pagine. */
.ev-head__passata, .ev-head__chiuso {
  display: inline-block; padding: 0.55rem 0.9rem; margin: 0;
  border: 1px solid var(--vnl-border-strong);
  font-family: var(--vnl-font-body); font-size: var(--vnl-size-body-sm); font-weight: 600;
  color: var(--vnl-text-muted);
}
.ev-head__passata a, .ev-head__chiuso a { color: var(--vnl-brand); text-decoration: none; }
.ev-head__chiuso { border-color: var(--vnl-brand); color: var(--vnl-text); }

/* ------------------------------------------------------- la ricorrenza */

/* Halloween e Capodanno si programmano con mesi di anticipo e si riempiono
   prima di tutto il resto: in pagina devono pesare piu' di un ospite. */
.speciale--ric { min-height: clamp(20rem, 46vh, 30rem); padding-block-end: calc(var(--vnl-space-lg) + 18px); }
.speciale--ric .speciale__title { font-size: clamp(2.6rem, 7vw, 4.5rem); }
.speciale__stripes { position: absolute; inset-inline: 0; inset-block-end: 0; color: var(--vnl-brand); }

/* ----------------------------------------------------- card della serata */
.vnl-event-card { display: block; text-decoration: none; background: var(--vnl-surface-1); }
.vnl-event-card__media { aspect-ratio: 4/3; overflow: hidden; }
.vnl-event-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vnl-event-card__body { padding: var(--vnl-space-lg); }
.vnl-event-card__date {
  margin: 0 0 0.35rem; font-family: var(--vnl-font-body); font-size: var(--vnl-size-caption);
  font-weight: 600; text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide);
  color: var(--vnl-text-muted);
}
.vnl-event-card__title {
  margin: 0; font-family: var(--vnl-font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--vnl-size-display-sm); letter-spacing: var(--vnl-tracking-display);
  color: var(--vnl-text);
}

/* Le righe nascoste dai filtri non devono lasciare il filetto superiore. */
/* .speciale mancava, e pagine.css le da display:flex: le card delle serate
   speciali restavano visibili con qualunque filtro attivo, mentre il
   contatore le considerava nascoste. Si vede al primo Halloween con
   locandina, cioe al primo uso vero. */
.serata[hidden], .speciale[hidden], [data-gruppo][hidden] { display: none !important; }

/* ------------------------------------------------ convivenza con GeneratePress

   Due attriti, entrambi da collisione di nomi e non da scelte sbagliate del
   parent:

   1. GeneratePress dichiara `.site-header { position: relative }` — e la
      nostra testata si chiama uguale, ma deve essere fissa.
   2. I suoi contenitori (#page, .site, .site-content) hanno un fondo chiaro.
      Il nostro fondo e' quello del body, e sopra non deve esserci nessuna
      lastra bianca.

   Questo foglio si carica per ultimo, quindi vince senza bisogno di !important. */

#page, .site, .site-content, .content-area, .inside-article, .entry-content,
.separate-containers .inside-article, .separate-containers .site-main {
  background: transparent; padding: 0; margin: 0; box-shadow: none;
}

.site-header { position: fixed; background-color: transparent; }
.site-header[data-stuck="true"], .site-header[data-solid="true"] {
  background-color: rgba(14, 13, 13, 0.9);
}

/* GP aggiunge un margine sopra il contenuto per la sua testata: la nostra e'
   fuori dal flusso e il margine lascerebbe una fascia vuota. */
.site-content { padding-top: 0; }
body { margin: 0; }

/* ---------------------------------------------------------------------------
   Dove stava un modulo

   Deve leggersi come una nota onesta, non come un errore: bordo tratteggiato
   come le altre cose «da confermare» dell'anteprima, e il contatto vero in
   evidenza, perche' e' l'unica parte che serve subito a chi legge.
   ------------------------------------------------------------------------ */

.modulo-assente {
  border: 1px dashed var(--vnl-brand);
  padding: var(--vnl-space-lg);
  background: color-mix(in srgb, var(--vnl-brand) 6%, transparent);
}
.modulo-assente__t {
  margin: 0; font-family: var(--vnl-font-body); font-weight: 600;
  font-size: var(--vnl-size-body-sm); text-transform: uppercase;
  letter-spacing: var(--vnl-tracking-wide); color: var(--vnl-brand);
}
.modulo-assente__d {
  margin: var(--vnl-space-sm) 0 0; color: var(--vnl-text-muted);
  font-size: var(--vnl-size-body-sm); line-height: 1.6; max-width: 46ch;
}
.modulo-assente__c {
  margin: var(--vnl-space-md) 0 0; font-family: var(--vnl-font-display);
  font-weight: 700; font-size: var(--vnl-size-body); color: var(--vnl-text);
}
.modulo-assente__c a { color: inherit; text-decoration-color: var(--vnl-brand); }
.modulo-assente__c a:hover { color: var(--vnl-brand); }

/* I commenti non esistono, su questo sito. Se un template di GeneratePress
   ne stampa comunque il modulo, non deve vedersi. */
.comments-area, #comments, .comment-respond { display: none !important; }

/* ---------------------------------------------------------------------------
   Gli archivi di tassonomia

   /genere/swing/ risponde a «swing a Roma» meglio di qualunque pagina scritta
   a mano. Prima usciva col markup di GeneratePress e senza stile: valeva la
   pena dargli una faccia invece di renderlo privato.
   ------------------------------------------------------------------------ */

.tax-elenco { padding-block: clamp(2.5rem, 7vh, 4rem); }
.tax-serate { display: grid; gap: 0; }
.tax-elenco .vuoto { color: var(--vnl-text-muted); }

/* La paginazione di WordPress, vestita come il resto. */
.tax-elenco .pagination { margin-block-start: var(--vnl-space-lg); }
.tax-elenco .nav-links {
  display: flex; gap: var(--vnl-space-sm); flex-wrap: wrap; align-items: center;
}
.tax-elenco .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--vnl-border); color: var(--vnl-text-muted);
  font-size: var(--vnl-size-body-sm); text-decoration: none;
}
.tax-elenco .page-numbers:hover { border-color: var(--vnl-brand); color: var(--vnl-text); }
.tax-elenco .page-numbers.current {
  background: var(--vnl-brand); border-color: var(--vnl-brand); color: var(--vnl-on-brand, #14110f);
}

/* ---------------------------------------------------------------------------
   I moduli

   Contact Form 7 esce col suo markup e con le sue classi. Qui si veste, non
   si combatte: le etichette stanno SOPRA il campo (in un modulo che si
   compila col pollice, di lato non ci stanno), i campi obbligatori non
   portano asterischi ma il contrario — si segna quello facoltativo, che e'
   la minoranza — e l'errore dice cosa fare, non solo che c'e'.
   ------------------------------------------------------------------------ */

.modulo { margin-block-start: var(--vnl-space-lg); }

.wpcf7-form p { margin: 0 0 var(--vnl-space-md); }

.wpcf7-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--vnl-font-body);
  font-size: var(--vnl-size-body-sm);
  font-weight: 600;
  color: var(--vnl-text);
}
.wpcf7-form label small {
  font-weight: 400;
  color: var(--vnl-text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.wpcf7-form label span { color: var(--vnl-text-faint); }

/* Due campi per riga dove stanno comodi, uno solo quando lo schermo si
   stringe: data e ora, email e telefono, adulti e bambini vanno insieme. */
.mod-due { display: grid; gap: var(--vnl-space-sm) var(--vnl-space-md); grid-template-columns: 1fr 1fr; }
@media (max-width: 34rem) { .mod-due { grid-template-columns: 1fr; } }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-family: var(--vnl-font-body);
  font-size: var(--vnl-size-body);
  color: var(--vnl-text);
  background: var(--vnl-surface-2, var(--vnl-surface-1));
  border: 1px solid var(--vnl-border);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.wpcf7-form textarea { resize: vertical; min-height: 6rem; line-height: 1.55; }

/* La freccia del menu a tendina: disegnata, perche' appearance:none la toglie. */
.wpcf7-form select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 0.38rem 0.38rem, 0.38rem 0.38rem;
  background-repeat: no-repeat;
  padding-inline-end: 2.2rem;
}

.wpcf7-form :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--vnl-brand);
  outline-offset: 1px;
  border-color: var(--vnl-brand);
}
.wpcf7-form ::placeholder { color: var(--vnl-text-faint); opacity: 1; }

/* Il consenso: casella a fianco del testo, non sopra. */
.mod-consenso label,
.wpcf7-acceptance label { flex-direction: row; align-items: flex-start; gap: 0.6rem; font-weight: 400; }
.mod-consenso { font-size: var(--vnl-size-body-sm); color: var(--vnl-text-muted); line-height: 1.55; }
.mod-consenso input[type="checkbox"] { margin-top: 0.22rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--vnl-brand); }
.mod-consenso a { color: var(--vnl-brand); }

.mod-invio { margin-block-start: var(--vnl-space-lg); }
.wpcf7-form input[type="submit"] {
  font-family: var(--vnl-font-display);
  font-weight: 700;
  font-size: var(--vnl-size-body);
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  color: var(--vnl-on-brand, #14110f);
  background: var(--vnl-brand);
  border: 0;
  cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover { filter: brightness(1.07); }
.wpcf7-form input[type="submit"]:disabled { opacity: 0.55; cursor: wait; }

/* Gli avvisi. Quello di CF7 e' un riquadro colorato che non somiglia a
   niente altro in pagina: qui diventa un filetto, come tutto il resto. */
.wpcf7 form .wpcf7-response-output {
  margin: var(--vnl-space-md) 0 0;
  padding: 0.85rem 1rem;
  border: 0;
  border-left: 3px solid var(--vnl-border);
  background: var(--vnl-surface-1);
  font-size: var(--vnl-size-body-sm);
  line-height: 1.55;
}
.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--vnl-brand); color: var(--vnl-text); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: #d05a4e; color: var(--vnl-text); }

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--vnl-size-body-sm);
  font-weight: 400;
  color: #d05a4e;
}
.wpcf7-form :is(input, select, textarea).wpcf7-not-valid { border-color: #d05a4e; }

.wpcf7-spinner { margin-inline-start: 0.7rem; }

/* Dove si mette il nome in lista: e' un rimando, non un modulo. */
.lista__vai { margin: var(--vnl-space-lg) 0 0; }
.lista__dove {
  margin: var(--vnl-space-sm) 0 0;
  color: var(--vnl-text-muted);
  font-size: var(--vnl-size-body-sm);
}
.lista__dove b { color: var(--vnl-text); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Le ricorrenze

   Il blocco della data di quest'anno sta subito sotto la testata perche' e'
   la sola cosa che cambia: chi arriva su «Capodanno al Vinile» vuole sapere
   prima di tutto quando e se si puo' ancora entrare. Il racconto — che non
   cambia mai — viene dopo.
   ------------------------------------------------------------------------ */

.quest-anno { padding-block: clamp(1.6rem, 4vh, 2.4rem); }

.quest-anno__box {
  border-left: 3px solid var(--vnl-brand);
  background: var(--vnl-surface-1);
  padding: var(--vnl-space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}
.quest-anno--passata .quest-anno__box,
.quest-anno--muta .quest-anno__box { border-left-color: var(--vnl-border); }

.quest-anno__eyebrow {
  margin: 0;
  font-family: var(--vnl-font-body);
  font-size: var(--vnl-size-body-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--vnl-tracking-wide);
  color: var(--vnl-brand);
}
.quest-anno--passata .quest-anno__eyebrow,
.quest-anno--muta .quest-anno__eyebrow { color: var(--vnl-text-faint); }

.quest-anno__data {
  margin: 0;
  font-family: var(--vnl-font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--vnl-text);
}
.quest-anno--muta .quest-anno__data { color: var(--vnl-text-muted); font-weight: 700; }

.quest-anno__cast {
  margin: 0.2rem 0 0;
  color: var(--vnl-text-muted);
  font-size: var(--vnl-size-body-sm);
  line-height: 1.55;
  max-width: 56ch;
}
.quest-anno__cast b { color: var(--vnl-text); font-weight: 600; }

.quest-anno__vai {
  margin: var(--vnl-space-md) 0 0;
  display: flex;
  gap: var(--vnl-space-sm);
  flex-wrap: wrap;
}

/* Il racconto sempreverde: una colonna di lettura, non una pagina di blocchi. */
.racconto { padding-block: clamp(2rem, 6vh, 3.2rem); }
.racconto .wrap > * { max-width: 62ch; }
.racconto h2 {
  font-family: var(--vnl-font-display);
  font-weight: 700;
  font-size: var(--vnl-size-display-sm);
  letter-spacing: -0.015em;
  margin: var(--vnl-space-lg) 0 var(--vnl-space-sm);
}
.racconto p { color: var(--vnl-text-muted); line-height: 1.68; margin: 0 0 var(--vnl-space-md); }
.racconto p:first-of-type { color: var(--vnl-text); font-size: var(--vnl-size-body-lg, 1.06rem); }

/* ---------------------------------------------------------------------------
   Come si prenota

   Nel prototipo la colonna di sinistra era un componente del design system
   con dentro contatti e orari. Qui e' markup del tema, quindi le tre classi
   che lo tengono insieme vanno scritte.
   ------------------------------------------------------------------------ */

.booking__intro { display: flex; flex-direction: column; gap: var(--vnl-space-md); align-items: flex-start; }
.booking__intro > p { margin: 0; color: var(--vnl-text-muted); max-width: 38ch; line-height: 1.62; }

.booking__info { margin: var(--vnl-space-sm) 0 0; display: grid; gap: var(--vnl-space-sm); width: 100%; }
.booking__info > div {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--vnl-space-sm);
  padding-block: 0.6rem; border-block-start: 1px solid var(--vnl-border); align-items: baseline;
}
.booking__info > div:last-child { border-block-end: 1px solid var(--vnl-border); }
.booking__info dt {
  font-family: var(--vnl-font-body); font-size: var(--vnl-size-body-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide); color: var(--vnl-text-faint);
}
.booking__info dd { margin: 0; color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); line-height: 1.5; }
.booking__info dd a { color: var(--vnl-text); text-decoration-color: var(--vnl-border); }
.booking__info dd a:hover { color: var(--vnl-brand); }

/* Le occasioni, accanto al blocco degli eventi privati. */
.private__tipi { display: flex; gap: var(--vnl-space-xs); flex-wrap: wrap; }

@media (max-width: 46rem) {
  .booking__info > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ---------------------------------------------------------------------------
   Le fotografie degli eventi privati

   Erano alte 1.500 pixel invece di 600, e la prima veniva stirata al doppio
   della sua altezza vera. In una prova intermedia il browser si e' proprio
   bloccato.

   La causa e' un ANELLO. La prima foto occupa due righe con `height: 100%`:
   la sua altezza dipende dalle righe, e le righe dipendono dal contenuto.
   Con le immagini gia' caricate il browser ne esce usando la misura naturale,
   ma queste sono a caricamento pigro e quando la griglia viene calcolata non
   ne hanno ancora una.

   La cura non e' aggirare l'anello, e' toglierlo: NESSUNA immagine qui dentro
   ha un'altezza che dipende dal contenitore. I due quadrati hanno la loro
   proporzione, la foto alta ha la sua — una colonna su due righe piu' il
   solco, cioe' circa 1 a 2. Cosi' ogni misura si calcola una volta sola.
   ------------------------------------------------------------------------ */

.private__pics {
  grid-template-rows: auto auto;
  align-items: start;
  aspect-ratio: auto;
}

.private__pics img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* 1 a 2,007: due righe quadrate piu' i due pixel di solco. Lo scarto dal
   valore esatto e' sotto il mezzo punto percentuale a qualunque larghezza. */
.private__pics img:first-child {
  grid-row: span 2;
  align-self: start;
  height: auto;
  aspect-ratio: 1 / 2.007;
}

/* In colonna stretta le tre foto si incolonnano: una alta e due quadrate
   affiancate diventerebbero francobolli. */
@media (max-width: 46rem) {
  .private__pics { grid-template-columns: 1fr; }
  .private__pics img:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------------------
   Il carrello in intestazione

   Compare solo quando ha qualcosa dentro, quindi puo' permettersi di farsi
   notare: numero in arancione sul fondo del marchio, la parola accanto.
   ------------------------------------------------------------------------ */

.carrello {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.7rem 0.32rem 0.4rem;
  border: 1px solid var(--vnl-border);
  color: var(--vnl-text);
  text-decoration: none;
  font-family: var(--vnl-font-body);
  font-size: var(--vnl-size-body-sm);
  line-height: 1;
  white-space: nowrap;
}
.carrello:hover { border-color: var(--vnl-brand); }

.carrello__n {
  display: inline-grid;
  place-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding-inline: 0.3rem;
  background: var(--vnl-brand);
  color: var(--vnl-on-brand, #14110f);
  font-family: var(--vnl-font-display);
  font-weight: 700;
  font-size: var(--vnl-size-caption);
  font-variant-numeric: tabular-nums;
}
.carrello__t {
  color: var(--vnl-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--vnl-tracking-wide);
  font-size: var(--vnl-size-caption);
  font-weight: 600;
}

/* Sul telefono resta solo il numero: la parola non ci sta e il numero basta. */
@media (max-width: 60rem) {
  .carrello__t { display: none; }
  .carrello { padding: 0.28rem; border: 0; }
}

/* ---------------------------------------------------------------------------
   Il negozio

   Le uniche pagine del sito che non passano da un nostro template. Non si
   riscrivono i template di WooCommerce: si riconduce il suo markup alla
   stessa colonna di lettura e alla stessa tavolozza del resto.
   ------------------------------------------------------------------------ */

.vnl-negozio .site-content,
.vnl-negozio .content-area,
.vnl-negozio .site-main {
  background: transparent;
  width: 100%;
  max-width: none;
  padding: 0;
}

.vnl-negozio .site-main {
  width: var(--bleed);
  margin-inline: auto;
  padding-inline: var(--page-x);
  /* L'intestazione e' fissa: lo spazio in cima deve comprenderla, o la prima
     riga della pagina finisce sotto la barra. E' la stessa formula che usa
     `.pagehead`, che le pagine del negozio non hanno perche' cominciano con
     le briciole di pane. */
  padding-block: calc(var(--header-h) + clamp(1.25rem, 4vh, 2.25rem)) clamp(3rem, 9vh, 5rem);
}

/* GeneratePress incarta ogni cosa in riquadri bianchi. */
.vnl-negozio :is(.inside-article, .entry-content, .page-header, .inside-page-header) {
  background: transparent;
  padding: 0;
  border: 0;
}

/* -------------------------------------------------------------- i titoli */

.vnl-negozio :is(h1, h1.page-title, .woocommerce-products-header__title) {
  font-family: var(--vnl-font-display);
  font-weight: 800;
  font-size: var(--vnl-size-display-lg);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0 0 var(--vnl-space-lg);
  color: var(--vnl-text);
}
.vnl-negozio h2 { font-family: var(--vnl-font-display); font-weight: 700; letter-spacing: -0.015em; }

.vnl-negozio .woocommerce-result-count,
.vnl-negozio .woocommerce-breadcrumb {
  color: var(--vnl-text-faint);
  font-size: var(--vnl-size-body-sm);
}

/* ------------------------------------------------------------- i prodotti */

.vnl-negozio ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: var(--vnl-space-lg) 0 0;
  padding: 0;
  list-style: none;
}
.vnl-negozio ul.products::before,
.vnl-negozio ul.products::after { content: none; }

.vnl-negozio ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--vnl-surface-1);
  border: 1px solid var(--vnl-border);
  padding: 0 0 var(--vnl-space-md);
}
.vnl-negozio ul.products li.product img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin: 0 0 var(--vnl-space-sm);
}
.vnl-negozio ul.products li.product > :not(img) { padding-inline: var(--vnl-space-md); }

.vnl-negozio .woocommerce-loop-product__title {
  font-family: var(--vnl-font-body);
  font-weight: 600;
  font-size: var(--vnl-size-body);
  line-height: 1.35;
  color: var(--vnl-text);
  margin: 0;
  text-wrap: pretty;
}
.vnl-negozio .price {
  font-family: var(--vnl-font-display);
  font-weight: 700;
  color: var(--vnl-brand);
  font-size: var(--vnl-size-body);
}
.vnl-negozio .price del { color: var(--vnl-text-faint); font-weight: 400; }

/* ------------------------------------------------------------- i bottoni */

.vnl-negozio :is(.button, button[type="submit"], input[type="submit"], .wc-block-components-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vnl-font-display);
  font-weight: 700;
  font-size: var(--vnl-size-body-sm);
  padding: 0.7rem 1.2rem;
  background: var(--vnl-brand);
  color: var(--vnl-on-brand, #14110f);
  border: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  margin-top: auto;
  align-self: flex-start;
}
.vnl-negozio :is(.button, button[type="submit"]):hover { filter: brightness(1.07); }
.vnl-negozio .button.added_to_cart { background: transparent; color: var(--vnl-brand); padding-inline: 0; }

/* ------------------------------------------------ moduli, tabelle, avvisi */

.vnl-negozio :is(input, select, textarea) {
  background: var(--vnl-surface-2, var(--vnl-surface-1));
  border: 1px solid var(--vnl-border);
  color: var(--vnl-text);
  padding: 0.65rem 0.8rem;
  border-radius: 0;
}
.vnl-negozio table {
  width: 100%;
  border-collapse: collapse;
  color: var(--vnl-text-muted);
  font-size: var(--vnl-size-body-sm);
}
.vnl-negozio table :is(th, td) {
  border: 0;
  border-block-end: 1px solid var(--vnl-border);
  padding: 0.8rem 0.6rem;
  text-align: start;
}
.vnl-negozio table th { color: var(--vnl-text); font-weight: 600; }

.vnl-negozio :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  background: var(--vnl-surface-1);
  border: 0;
  border-inline-start: 3px solid var(--vnl-brand);
  color: var(--vnl-text-muted);
  padding: 0.9rem 1.1rem;
  font-size: var(--vnl-size-body-sm);
  list-style: none;
}
.vnl-negozio .woocommerce-error { border-inline-start-color: #d05a4e; }
.vnl-negozio :is(.woocommerce-message, .woocommerce-info)::before,
.vnl-negozio .woocommerce-error::before { content: none; }

/* L'ordinamento e la ricerca, che GeneratePress fa galleggiare a destra. */
.vnl-negozio .woocommerce-ordering { float: none; margin: 0; }
.vnl-negozio .woocommerce-notices-wrapper:empty { display: none; }

/* --------------------------------------------------- il negozio: due ritocchi */

/* WooCommerce fa galleggiare l'ordinamento a destra e lascia il conteggio nel
   flusso: senza il float del tema vecchio i due si accavallano. Una riga. */
.vnl-negozio .woocommerce-notices-wrapper + .woocommerce-result-count,
.vnl-negozio .woocommerce-result-count { margin: 0; }
.vnl-negozio .woocommerce-products-header + .woocommerce-result-count { margin-top: var(--vnl-space-md); }

.vnl-negozio :is(.woocommerce-result-count, .woocommerce-ordering) { display: inline-block; vertical-align: middle; }
.vnl-negozio .woocommerce-ordering { margin-inline-start: var(--vnl-space-lg); }
.vnl-negozio .woocommerce-ordering select { max-width: 18rem; }

/* Il foglio della vetrina a serate impilate stava qui: bocciata due volte
   dal cliente, template rimosso il 12/09, CSS rimosso il 13/09.

   Non era solo peso morto. Usava `.porta` e `.bigl`, due nomi gia' presi da
   componenti vivi — il blocco «Prenota un tavolo» di /contatti/ e la scheda
   del prodotto singolo — e siccome questo foglio si carica per ultimo
   vinceva lui. Su /contatti/ trasformava un blocco di testo in una griglia
   la cui prima colonna veniva calcolata a ZERO pixel: il titolo usciva una
   lettera per riga. Il vestito della biglietteria sta in `negozio.css`. */

/* ---------------------------------------------------------------------------
   Il marchio

   Non e' piu' testo: e' l'SVG del design system. Le lettere del marchio sono
   disegnate, non composte da un carattere — Poppins 800 con la spaziatura
   giusta somiglia da lontano e si tradisce da vicino.

   Il colore arriva da `currentColor`, cosi' il marchio prende il colore del
   testo che lo circonda: nessuna variante per il fondo chiaro, e in stampa
   resta nero da solo.
   ------------------------------------------------------------------------ */

.site-header__logo,
.site-footer__logo { text-decoration: none; color: var(--vnl-text); }

.vnl-logo { display: block; height: auto; fill: currentColor; }

/* In testata: la sola scritta, alta quanto una riga di menu. */
.site-header__logo .vnl-logo--wordmark { width: clamp(92px, 9vw, 116px); }

/* Nel piede: il marchio intero, cornice e grammofono compresi. E' la firma
   della pagina, e li' c'e' lo spazio per dirla per esteso. */
.site-footer__logo .vnl-logo--framed { width: clamp(84px, 8vw, 104px); }

/* Il fondo chiaro del pannello di amministrazione e della stampa. */
@media print { .vnl-logo { fill: #000; } }

/* Nell'hero il marchio e' il grammofono, in arancione. L'alone non e' un
   effetto: sopra un fotogramma chiaro l'arancione scendeva a 2,2:1 e il
   grammofono spariva — sui fotogrammi gia' bui l'alone non si vede proprio. */
.vnl-logo--brand { fill: var(--vnl-brand); }
.hero__mark .vnl-logo { width: clamp(68px, 8vw, 104px); margin-inline: auto; }

/* I RITORNI A CAPO DI CONTACT FORM 7.

   Il modulo passa per la conversione automatica dei capoversi, che trasforma
   ogni a capo del markup in un `<br>`. Dentro una griglia un `<br>` non e' una
   riga vuota: e' un elemento, e si prende una cella. Nelle righe a due campi
   se ne prendeva la prima, e i due campi finivano tutti e due a destra con
   meta' riga vuota accanto.

   `display: none` li toglie dal flusso E dal conteggio delle celle — nascondere
   con `visibility` non sarebbe bastato, la cella resterebbe occupata.

   Solo dentro le nostre righe: i moduli vecchi non hanno i capoversi scritti a
   mano e su quelli i ritorni a capo servono davvero. */
.wpcf7-form :is(.mod-riga, .mod-due, .mod-tre, .mod-consenso, .mod-invio) br {
  display: none;
}

/* I campi affiancati si allineano IN BASSO, non in alto.

   «Quando» porta una nota sotto l'etichetta — «anche indicativa» — e il campo
   accanto no: allineati in alto, i due riquadri d'ingresso finivano a quote
   diverse e la riga sembrava storta. In basso si allineano i campi, che sono
   la cosa che si guarda e in cui si scrive; le etichette possono stare a
   altezze diverse, e nessuno se ne accorge. */
.wpcf7-form :is(.mod-due, .mod-tre) {
  align-items: end;
}

/* IL COLORE DELLA NAVIGAZIONE NON DIPENDE DAL NEGOZIO.

   Dove il markup e' di WooCommerce il foglio di GeneratePress resta acceso, e
   il suo CSS del personalizzatore — stampato in linea, quindi ultimo — porta
   `.site-header a { color: #3a3a3a }`. Stessa specificita' di
   `.site-nav a`, e a parita' vince l'ultimo: i collegamenti diventavano
   grigi nel negozio e restavano bianchi altrove.

   L'intestazione e' un componente nostro su TUTTE le pagine. `.vnl-root` sta
   sul body ed e' sempre presente: basta lui a chiudere la questione senza
   !important e senza spegnere altro.

   Lo stato attivo non e' qui perche' non serviva: `[aria-current]` vale come
   una classe e vinceva gia' da solo. Era il motivo per cui «SHOP» restava
   arancione mentre il resto ingrigiva. */
.vnl-root .site-nav a { color: var(--vnl-text); }
.vnl-root .site-nav a[aria-current="page"] { color: var(--vnl-brand); }
.vnl-root .site-header__logo,
.vnl-root .site-footer__logo { color: var(--vnl-text); }