/* ==========================================================================
   Viva Ticket — design system (main.css)

   Indice
     1. Token (colori, tipografia, spazi, raggi, ombre, livelli)
     2. Font e base
     3. Utilità (sr-only, salta, contenitore, messaggi)
     4. Header (barra, ricerca, navigazione, menu, burger, modalità compatta)
     5. Footer e widget flottanti
     6. Componenti (bottoni, card, chip, schede, badge, campi, briciole,
        paginazione, stepper, dialogo ricerca)
     7. Home (mosaico, in evidenza, tendenza, artisti, luoghi, servizi)
     8. Fiche evento e pagina biglietti
     8b. Fiche evento v2 (hero, stati, prezzo, tournée, sala, condividi, CTA mobile)
     9. Listing categoria
    10. Carrello
    11. Contatti
    12. Pagine di testo
    13. Movimento ridotto

   Contratto con i moduli intoccabili (seatmap.css, seatmap.js, carrello.js):
     variabili  --accent --font --font-titoli --header-h --linea --raggio
                --raggio-btn --secondario --spazio-sm --spazio-md --spazio-lg
     classi     .btn .btn--ghost .btn--procedi .qta .qta__n .sr-only .messaggio
                .widget-access .evento__torna .seatmap__esito
                .carrello-lista .carrello-riga(__media|__testo|__prezzo) .carrello-totale
   ========================================================================== */

/* 1. Token ---------------------------------------------------------------- */

:root {
  --nero: #000000;
  --bianco: #ffffff;
  --giallo: #ffd500;
  --giallo-scuro: #e9c200;
  --grigio-50: #f8f8f8;
  --grigio-100: #f3f3f3;
  --grigio-200: #e6e6e6;
  --grigio-300: #cccccc;
  --grigio-500: #6c757d;
  --grigio-700: #495057;
  --grigio-900: #212529;
  --nero-2: #111111;
  --nero-3: #1a1a1a;
  --linea-scura: #2c2c2c;

  --accent: var(--giallo);
  --bg: var(--bianco);
  --testo: var(--nero);
  --secondario: var(--grigio-500);
  --linea: var(--grigio-200);

  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-titoli: "Montserrat", "Jost", "Roboto", sans-serif;
  --t-11: 0.75rem; /* P2-24: nessun testo sotto i 12 px (ex 11 px) */
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-22: 1.375rem;
  --t-24: 1.5rem;
  --t-28: 1.75rem;
  --t-36: 2.25rem;

  --spazio-2xs: 4px;
  --spazio-xs: 8px;
  --spazio-sm: 12px;
  --spazio-md: 16px;
  --spazio-lg: 24px;
  --spazio-xl: 40px;
  --spazio-2xl: 56px;
  --spazio-3xl: 72px;

  --raggio-sm: 4px;
  --raggio: 8px;
  --raggio-lg: 12px;
  --raggio-btn: 999px;

  --ombra-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ombra-md: 0 8px 22px rgba(0, 0, 0, 0.14);
  --ombra-lg: 0 16px 48px rgba(0, 0, 0, 0.24);
  --ombra-scura: 0 12px 28px rgba(0, 0, 0, 0.35);

  --max: 1200px;
  --gutter: 16px;
  --tocco: 44px;
  --tocca: 44px; /* P1-17: area minima di tocco di ogni comando (alias di --tocco) */
  --zona-sicura-widget: 80px; /* P0-3: banda in basso riservata ai widget flottanti nelle colonne sticky */
  --header-h: 150px; /* misurato da site.js dopo il caricamento */

  --z-header: 40;
  --z-pannello: 35;
  --z-dropdown: 50;
  --z-widget: 20;
  --z-barra-tab: 25;

  --durata: 0.18s;
}

/* 2. Font e base ----------------------------------------------------------- */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-400.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-500.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-700.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-700.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--testo);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

button,
input,
textarea,
select,
summary {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

a {
  color: inherit;
}

summary {
  cursor: pointer;
  list-style: none;
}

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

summary::marker {
  content: "";
}

[hidden] {
  display: none !important;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--nero);
  outline-offset: 2px;
}

.header :focus-visible,
.footer :focus-visible,
.navigazione :focus-visible {
  outline-color: var(--giallo);
}

::selection {
  background: var(--giallo);
  color: var(--nero);
}

/* 3. Utilità --------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.salta {
  position: absolute;
  left: var(--spazio-xs);
  top: -64px;
  z-index: 80;
  padding: var(--spazio-xs) var(--spazio-sm);
  border-radius: var(--raggio);
  background: var(--giallo);
  color: var(--nero);
  font-weight: 700;
  text-decoration: none;
}

.salta:focus {
  top: var(--spazio-xs);
}

.ancora {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contenitore {
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  margin-left: auto;
  margin-right: auto;
}

.contenitore--largo {
  width: auto;
  padding: 0 var(--gutter);
}

.messaggio {
  color: var(--secondario);
  font-size: var(--t-15);
}

.avviso,
.seatmap__esito {
  margin: 0 0 var(--spazio-md);
  padding: var(--spazio-sm) var(--spazio-md);
  border-left: 4px solid var(--giallo);
  border-radius: var(--raggio-sm);
  background: var(--grigio-50);
  font-weight: 500;
}

.seatmap__esito:empty {
  display: none;
}

/* 4. Header ---------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--nero);
  color: var(--bianco);
}

.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.header__barra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--spazio-xs);
  padding: 8px var(--gutter);
}

.logo {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  min-height: var(--tocca);
  justify-self: start;
}

.logo__img {
  width: 132px;
  height: auto;
}

.header__utilita {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: end;
}

.account,
.locale summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tocco);
  font-size: var(--t-14);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.account:hover,
.sotto__link:hover,
.pannello-utilita a:hover {
  text-decoration: underline;
}

.account__icona {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
}

/* Opus C3 — account--pulsante: « Accedi » è un <button> (P2-28) e teneva fondo e bordo del browser (#e6e6e6 su
   #efefef, contrasto 1,09:1): azzerati, il testo resta quello dell'intestazione */
.account--pulsante {
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.locale {
  position: relative;
}

.locale summary {
  gap: 6px;
}

.locale__bandiera {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 1px;
}

.locale ul {
  list-style: none;
  min-width: 160px;
  padding: 8px 0;
  background: var(--nero-2);
  border: 1px solid var(--linea-scura);
  box-shadow: var(--ombra-scura);
}

.locale [aria-current="true"] {
  display: block;
  padding: 8px 12px;
  font-weight: 700;
}

.icona-btn {
  position: relative;
  width: var(--tocco);
  height: var(--tocco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--raggio);
  background: transparent;
  color: var(--bianco);
  text-decoration: none;
}

.icona-btn svg {
  stroke: currentColor;
}

.icona-btn:hover,
.burger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.carrello__n {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--raggio-btn);
  background: var(--giallo);
  color: var(--nero);
  font-size: var(--t-11);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  display: none;
}

.carrello__n.is-visibile {
  display: inline-block;
}

/* I2 — mini-carrello a cassetto (minicarrello.js), apribile dall'icona del carrello */
.minicarrello__velo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.45);
}

.minicarrello__velo[hidden],
.minicarrello[hidden] {
  display: none;
}

.minicarrello {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(100%, 400px);
  padding: var(--spazio-lg) var(--spazio-lg) max(var(--spazio-lg), env(safe-area-inset-bottom));
  overflow: auto;
  background: var(--bianco);
  color: var(--nero);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  transition: transform 0.22s ease;
}

.minicarrello.is-aperto {
  transform: none;
}

.minicarrello__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--spazio-md);
}

.minicarrello__testa h2 {
  font-family: var(--font-titoli);
  font-size: var(--t-20);
  font-weight: 700;
}

.minicarrello__chiudi {
  width: var(--tocco);
  height: var(--tocco);
  padding: 0;
  border: 1px solid var(--grigio-300);
  border-radius: 50%;
  background: var(--bianco);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.minicarrello__chiudi:hover {
  border-color: var(--nero);
}

.minicarrello__lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 var(--spazio-md);
  padding: 0;
  list-style: none;
}

.minicarrello__lista li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-14);
}

.minicarrello__lista li strong {
  font-family: var(--font-titoli);
  font-size: var(--t-14);
  text-transform: uppercase;
}

.minicarrello__link {
  display: inline-block;
  padding: 2px 0;
  color: var(--nero);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.minicarrello__link:hover {
  color: var(--grigio-700);
}

.minicarrello__lista li span {
  color: var(--grigio-700);
  overflow-wrap: anywhere;
}

.minicarrello__voce-azioni {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.minicarrello__rimuovi {
  min-width: var(--tocco);
  min-height: var(--tocco);
  padding: 0 12px;
  font-size: var(--t-13);
}

.minicarrello__prezzo {
  color: var(--nero) !important;
  font-weight: 700;
}

.minicarrello__totale {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--t-16);
}

.minicarrello__nota,
.minicarrello__vuoto {
  margin: 8px 0 var(--spazio-md);
  color: var(--grigio-700);
  font-size: var(--t-14);
}

.minicarrello__vai,
.minicarrello.ag-minicarrello-azioni .minicarrello__vai {
  width: 100%;
}

.minicarrello__continua {
  margin-top: auto;
  padding-top: var(--spazio-md);
}

.minicarrello.ag-minicarrello-azioni .minicarrello__continua {
  margin-top: 8px;
  padding-top: 0;
}

.minicarrello__continua .btn {
  width: 100%;
}

body.minicarrello-aperto {
  overflow: hidden;
}

.burger {
  width: var(--tocco);
  height: var(--tocco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raggio);
  cursor: pointer;
}

.burger__barre {
  width: 18px;
  height: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.burger__barre span {
  display: block;
  height: 2px;
  background: var(--bianco);
  transition: transform var(--durata) ease, opacity var(--durata) ease;
}

.nav-toggle:focus-visible ~ .header__barra .burger,
.burger:focus-visible {
  outline: 2px solid var(--giallo);
  outline-offset: 2px;
}


.nav-toggle:checked ~ .header__barra .burger__testo-apri,
.nav-toggle:not(:checked) ~ .header__barra .burger__testo-chiudi {
  display: none;
}

.nav-toggle:checked ~ .header__barra .burger__barre span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle:checked ~ .header__barra .burger__barre span:nth-child(2) {
  opacity: 0;
}

.nav-toggle:checked ~ .header__barra .burger__barre span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* Barra di ricerca (apre il dialogo) */
.cerca-apri {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tocca); /* P1-17 */
  margin: 6px 0 2px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--raggio);
  background: var(--bianco);
  color: var(--grigio-500);
  text-align: left;
}

.cerca-apri svg {
  flex: 0 0 auto;
  stroke: var(--grigio-700);
}

.cerca-apri__testo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-14);
}

.cerca-apri:hover {
  box-shadow: inset 0 0 0 2px var(--giallo);
}

.cerca-apri:focus-visible {
  outline-offset: 0;
}

/* AG-21 — mobile (< 960 px): intestazione più snella a riposo e monoriga compatta allo scorrimento */
@media (max-width: 959px) {
  .header__barra {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .logo {
    min-height: var(--tocco);
  }

  .cerca-apri {
    min-height: var(--tocco);
    margin: 4px 0 0;
  }

  .header.is-compatto .header__barra {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .header.is-compatto .logo__img {
    width: 120px;
  }

  .header.is-compatto .cerca-apri {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    width: var(--tocco);
    min-width: var(--tocco);
    min-height: var(--tocco);
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--bianco);
  }

  .header.is-compatto .cerca-apri svg {
    stroke: currentColor;
  }

  .header.is-compatto .cerca-apri__testo {
    display: none;
  }

  .header.is-compatto .header__utilita {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Navigazione: pannello a scomparsa (mobile e header compatto) */
.navigazione {
  display: none;
}

.navigazione__interno {
  width: 100%;
}

.pannello-utilita {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  padding: 4px 0 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--linea-scura);
}

.menu,
.sotto {
  display: flex;
  flex-direction: column;
}

.menu__voce {
  position: relative;
}

.menu__voce > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 4px 2px;
  font-family: var(--font-titoli);
  font-size: var(--t-15);
  font-weight: 700;
  color: var(--bianco);
}

.menu__voce > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--durata) ease;
}

.menu__voce[open] > summary::after {
  transform: rotate(-135deg);
}

.submenu {
  display: none;
  list-style: none;
  min-width: 220px;
  padding: 4px 0 8px;
}

.menu__voce[open] > .submenu {
  display: block;
}

.submenu a {
  display: block;
  min-height: var(--tocco);
  padding: 10px 16px;
  border-radius: var(--raggio-sm);
  color: var(--bianco);
  font-size: var(--t-15);
  text-decoration: none;
}

.submenu a:hover,
.submenu a[aria-current="page"] {
  background: var(--linea-scura);
}

.submenu a[aria-current="page"] {
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--giallo);
}

.sotto {
  padding-top: 4px;
  border-top: 1px solid var(--linea-scura);
}

.sotto__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 4px 2px;
  font-size: var(--t-14);
  font-weight: 500;
  text-decoration: none;
}

.sotto .menu__voce > summary {
  font-family: var(--font);
  font-size: var(--t-14);
  font-weight: 500;
}

/* Mobile e header compatto: pannello sotto la barra */
.nav-toggle:checked ~ .navigazione {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-pannello);
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  overflow: auto;
  padding: 8px var(--gutter) 48px;
  background: var(--nero);
  border-top: 1px solid var(--linea-scura);
}

body:has(.nav-toggle:checked) {
  overflow: hidden;
}

@media (max-width: 959px) {
  .account,
  .locale {
    display: none;
  }

  .pannello-utilita .account,
  .pannello-utilita .locale {
    display: inline-flex;
  }

  .pannello-utilita .locale summary {
    display: inline-flex;
  }

  .locale ul {
    position: static;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 8px;
  }
}

@media (min-width: 400px) {
  .logo__img {
    width: 158px;
  }
}

@media (min-width: 720px) {
  .logo__img {
    width: 195px;
    height: 22px;
  }
}

@media (min-width: 960px) {
  /* P1-13 — una sola riga: logo + ricerca (max 520 px) + utilità; la nav sotto → ≈ 112 px invece di 171 */
  .header__barra {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    column-gap: var(--spazio-md);
    padding: 10px var(--spazio-lg);
  }

  .logo {
    grid-column: 1;
    grid-row: 1;
  }

  .cerca-apri {
    grid-column: 2;
    grid-row: 1;
    width: min(100%, 520px);
    min-height: 44px;
    margin: 0;
    padding: 0 18px;
    justify-self: center;
  }

  .header__utilita {
    grid-column: 3;
    grid-row: 1;
    gap: 0;
  }

  .account,
  .locale summary {
    min-height: 32px;
    padding: 6px 0; /* P1-17: area di tocco 44 px, aspetto invariato */
    margin-top: -6px;
    margin-bottom: -6px;
    box-sizing: content-box;
    font-size: var(--t-12);
    font-weight: 400;
    color: var(--grigio-200);
  }

  .account {
    margin-right: 10px;
  }

  .locale summary {
    margin-right: 6px;
  }

  .locale ul {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: var(--z-dropdown);
  }

  .burger {
    display: none;
  }

  .cerca-apri__testo {
    font-size: var(--t-15);
  }

  .navigazione {
    display: block;
    border-top: 1px solid var(--linea-scura);
  }

  .navigazione__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    padding: 0 var(--spazio-lg);
  }

  .pannello-utilita {
    display: none;
  }

  .menu {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
  }

  html.a11y-testo-2 .menu {
    gap: 2px 6px;
    padding: 2px 0;
  }

  html.a11y-testo-2 .menu__voce > summary {
    padding: 0 8px;
  }

  .menu__voce > summary {
    white-space: nowrap;
    padding: 0 12px;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
  }

  .menu__voce > summary::after {
    content: none;
  }

  .menu__voce > summary:hover,
  .menu__voce[open] > summary,
  .menu__voce.is-corrente > summary {
    border-bottom-color: var(--giallo);
  }

  .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown);
    padding: 6px 0;
    background: var(--nero-2);
    border: 1px solid var(--linea-scura);
    box-shadow: var(--ombra-scura);
  }

  .submenu a {
    border-radius: 0;
    font-size: var(--t-14);
    font-weight: 500;
  }

  .menu__voce:nth-last-child(-n + 3) > .submenu,
  .sotto .submenu {
    left: auto;
    right: 0;
  }

  .menu__voce:hover > .submenu,
  .menu__voce:focus-within > .submenu {
    display: block;
  }

  .sotto {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 4px 8px;
    margin-left: auto;
    padding-top: 0;
    border-top: 0;
  }

  .sotto__link,
  .sotto .menu__voce > summary {
    min-height: 48px;
    padding: 0 10px;
    font-size: var(--t-13);
    font-weight: 500;
    color: var(--grigio-100);
  }

  .sotto .menu__voce > summary:hover,
  .sotto__link:hover {
    color: var(--giallo);
    text-decoration: none;
  }

  /* Header compatto allo scroll: nav nascosta, burger per riaprirla (≈ 64 px) */
  .header.is-compatto .header__barra {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .header.is-compatto .logo__img {
    width: 150px;
  }

  .header.is-compatto .cerca-apri {
    min-height: var(--tocca); /* P1-17 */
    margin: 0;
  }

  .header.is-compatto .burger {
    display: inline-flex;
  }

  .header.is-compatto .navigazione {
    display: none;
  }

  .header.is-compatto .nav-toggle:checked ~ .navigazione {
    display: block;
    left: auto;
    right: 0;
    width: min(480px, 100%);
    border-left: 1px solid var(--linea-scura);
    box-shadow: var(--ombra-scura);
  }

  .header.is-compatto .nav-toggle:checked ~ .navigazione .navigazione__interno {
    display: block;
    padding: 0;
  }

  .header.is-compatto .nav-toggle:checked ~ .navigazione .menu,
  .header.is-compatto .nav-toggle:checked ~ .navigazione .sotto {
    flex-direction: column;
    align-items: stretch;
    margin: 0;
  }

  .header.is-compatto .nav-toggle:checked ~ .navigazione .menu__voce > summary {
    border: 0;
  }

  .header.is-compatto .nav-toggle:checked ~ .navigazione .menu__voce > summary::after {
    content: "";
  }

  .header.is-compatto .nav-toggle:checked ~ .navigazione .submenu {
    position: static;
    display: none;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .header.is-compatto .nav-toggle:checked ~ .navigazione .menu__voce[open] > .submenu {
    display: block;
  }

  .header.is-compatto .nav-toggle:checked ~ .navigazione .sotto {
    padding-top: 4px;
    border-top: 1px solid var(--linea-scura);
  }
}

/* 5. Footer e widget ------------------------------------------------------- */

.footer {
  margin-top: var(--spazio-2xl);
  padding: 0 var(--gutter) 96px;
  background: var(--nero);
  color: var(--bianco);
}

.footer a {
  color: var(--bianco);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.footer__interno {
  max-width: var(--max);
  margin: 0 auto;
}

.footer__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 40px;
  padding: 32px 0 8px;
  align-items: start;
}

.footer h2 {
  display: inline-block;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bianco);
  font-family: var(--font-titoli);
  font-size: var(--t-13);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer__colonne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 28px;
}

.footer__colonne ul {
  list-style: none;
}

.footer__colonne a {
  display: inline-block;
  padding: 6px 0;
  min-height: var(--tocca); /* P1-17 */
  min-width: var(--tocca);
  box-sizing: border-box;
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.045em;
  line-height: 1.6;
  text-transform: uppercase;
}

@media (min-width: 960px) {
  .footer__colonne a {
    padding: 3px 0;
    margin: -8px 0; /* P1-17: area di tocco 44 px senza cambiare l'aspetto */
  }
}

.footer__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 28px 0 4px;
  border-top: 1px solid var(--linea-scura);
  text-align: center;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tocca); /* P1-17 */
}

.footer__nota {
  max-width: 48rem;
  color: var(--grigio-200);
  font-size: var(--t-13);
  line-height: 1.5;
}

.footer__societa {
  color: #d5d5d5;
  font-size: var(--t-12);
  font-variant: all-small-caps;
  letter-spacing: 0.14em;
}

@media (min-width: 768px) {
  .footer__sommario {
    display: none;
  }

  .footer__griglia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  }

  .footer__colonne {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .footer h2.footer__titolo-pc {
    display: none;
  }

  .footer__griglia {
    gap: 0;
    padding: 12px 0 4px;
  }

  .footer__sezione {
    border-bottom: 1px solid var(--linea-scura);
  }

  .footer__sommario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 0;
    font-family: var(--font-titoli);
    font-size: var(--t-13);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .footer__sommario::after {
    content: "+";
    font-size: var(--t-18);
    line-height: 1;
    color: var(--giallo);
  }

  .footer__sezione[open] > .footer__sommario::after {
    content: "−";
  }

  .footer__sezione > .footer__colonne {
    padding: 0 0 14px;
  }
}

.widget-access {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: var(--z-widget);
  width: 52px;
  height: 52px;
  border-radius: var(--raggio-lg);
  display: grid;
  place-items: center;
  color: var(--nero);
  text-decoration: none;
  background: var(--bianco);
  box-shadow: var(--ombra-md);
}

.widget-access:hover {
  background: var(--giallo);
}

body:has(.nav-toggle:checked) .widget-access {
  display: none;
}

/* P0-3 — zona-sicura-widget: il widget flottante si ritira durante lo scorrimento attivo e quando una sezione di
   acquisto, il carrello o un modulo sono sullo schermo (classe posta da site.js); su desktop ogni colonna sticky
   riserva una banda di --zona-sicura-widget in basso (vedi seatmap.css). Mai sopra un button/[role=tab]. */
.widget-access {
  transition: opacity var(--durata) ease, transform var(--durata) ease, visibility var(--durata);
}

body.zona-sicura-widget .widget-access,
.widget-access.ag-widget-safe-card {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(24px);
}

@media (max-width: 959px) {
  /* su mobile/tablet Accessibilità vive nel menu e nel footer */
  .widget-access {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .widget-access {
    transition: none;
  }
}

/* 6. Componenti ------------------------------------------------------------ */

/* Bottoni */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--raggio-btn);
  background: var(--giallo);
  color: var(--nero);
  font-family: var(--font-titoli);
  font-size: var(--t-15);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--durata) ease, transform var(--durata) ease;
}

.btn:hover {
  background: var(--giallo-scuro);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--grigio-200);
  color: var(--grigio-700);
  transform: none;
}

.btn--ghost {
  border: 1px solid var(--grigio-300);
  background: var(--bianco);
  font-family: var(--font);
  font-weight: 500;
}

.btn--ghost:hover {
  background: var(--grigio-100);
}

.btn--nero {
  background: var(--nero);
  color: var(--bianco);
}

.btn--nero:hover {
  background: var(--grigio-900);
}

.btn--acquista,
.btn--procedi {
  width: 100%;
}

@media (min-width: 640px) {
  .btn--acquista,
  .btn--procedi {
    width: auto;
    min-width: 220px;
  }
}

/* Sezione e titoli */
.intro {
  margin-top: 28px;
}

.intro h1 {
  font-family: var(--font-titoli);
  font-size: var(--t-28);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.sezione {
  margin-top: 36px;
}

.sezione > h2,
.sezione__titolo {
  margin-bottom: 16px;
  font-family: var(--font-titoli);
  font-size: var(--t-22);
  font-weight: 700;
  line-height: 1.2;
}

.sezione__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-sm);
  margin-bottom: 16px;
}

.sezione__testa h2 {
  margin: 0;
}

@media (min-width: 960px) {
  .intro {
    margin-top: 40px;
  }

  .intro h1 {
    font-size: var(--t-36);
  }

  .sezione {
    margin-top: 52px;
  }

  .sezione > h2,
  .sezione__titolo {
    margin-bottom: 18px;
    font-size: var(--t-24);
  }
}

/* <picture> (variante WebP) trasparente per il layout */
picture {
  display: contents;
}

/* Griglia di card: 1 / 2 / 4 colonne */
.griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 16px;
}

@media (min-width: 640px) {
  .griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .griglia {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 18px;
  }
}

/* Card evento (unico componente, immagine 2:1; AG-05 ag-card-allineata: cornice e prezzi allineati in basso) */
.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.card.ag-card-allineata {
  padding-bottom: 12px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--bianco);
  overflow: hidden;
  transition: box-shadow var(--durata) ease, border-color var(--durata) ease;
}

@media (hover: hover) {
  .card.ag-card-allineata:not(.card--static):hover {
    border-color: var(--grigio-300);
    box-shadow: var(--ombra-md);
  }
}

.card.ag-card-allineata .card__media {
  border-radius: 0;
}

.card.ag-card-allineata .card__titolo,
.card.ag-card-allineata .card__extra,
.card.ag-card-allineata .card__luogo,
.card.ag-card-allineata .card__data,
.card.ag-card-allineata .card__prezzo {
  margin-inline: 12px;
}

.card.ag-card-allineata .card__prezzo {
  margin-top: auto;
  padding-top: 8px;
}

.card__media {
  display: block;
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--raggio-sm);
  background: var(--nero-2);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease;
}

.card:hover .card__media img {
  transform: scale(1.03);
}

.card__titolo {
  margin-top: 10px;
  font-family: var(--font-titoli);
  font-size: var(--t-15);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.card:hover .card__titolo {
  text-decoration: underline;
}

.card__luogo,
.card__data,
.card__extra {
  position: relative;
  margin-top: 4px;
  padding-left: 18px;
  color: var(--grigio-500);
  font-size: var(--t-13);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__extra {
  padding-left: 0;
}

.card__luogo::before,
.card__data::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 12px;
  height: 12px;
  background: center / 12px 12px no-repeat;
}

.card__luogo::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpath d='M12 21s6-5.2 6-10a6 6 0 1 0-12 0c0 4.8 6 10 6 10z'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E");
}

.card__data::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M4 10h16'/%3E%3C/svg%3E");
}

.card--static {
  cursor: default;
}

/* P1-12 — prezzo « da X € » e badge di stato sulla scheda */
.card__prezzo {
  margin-top: 6px;
  color: var(--grigio-700);
  font-size: var(--t-13);
}

.card__prezzo strong {
  color: var(--nero);
  font-size: var(--t-15);
}

.card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 3px 10px;
  border-radius: var(--raggio-btn);
  background: var(--bianco);
  color: var(--nero);
  font-family: var(--font-titoli);
  font-size: var(--t-12);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.card__badge--urgenza {
  background: #c81e1e;
  color: var(--bianco);
}

.card__badge--esaurito {
  background: var(--nero);
  color: var(--bianco);
}

.card__badge--attesa {
  background: var(--giallo);
  color: var(--nero);
}

.card__badge--info {
  background: var(--grigio-100);
  color: var(--grigio-700);
}

.card--static:hover .card__titolo {
  text-decoration: none;
}

.card--static:hover .card__media img {
  transform: none;
}

/* P1-10 — scheletri delle schede (listing): stessa altezza della scheda reale, sostituiti sul posto */
.card--skeleton {
  pointer-events: none;
}

.card--skeleton .card__media,
.card--skeleton .card__titolo,
.card--skeleton .card__luogo,
.card--skeleton .card__data {
  display: block;
  border-radius: var(--raggio-sm);
  background: linear-gradient(90deg, var(--grigio-100) 0%, var(--grigio-200) 50%, var(--grigio-100) 100%);
  background-size: 200% 100%;
  animation: skeleton-onda 1.4s ease-in-out infinite;
}

.card--skeleton .card__titolo {
  height: 2.5em;
  width: 85%;
}

.card--skeleton .card__luogo,
.card--skeleton .card__data {
  height: 1em;
  width: 60%;
  padding-left: 0;
}

.card--skeleton .card__luogo::before,
.card--skeleton .card__data::before {
  content: none;
}

@keyframes skeleton-onda {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card--skeleton .card__media,
  .card--skeleton .card__titolo,
  .card--skeleton .card__luogo,
  .card--skeleton .card__data {
    animation: none;
  }
}

/* Chip e paginazione */
.chip,
.paginazione button {
  min-height: var(--tocco);
  padding: 8px 16px;
  border: 1px solid var(--grigio-300);
  border-radius: var(--raggio-btn);
  background: var(--bianco);
  font-weight: 500;
}

.chip:hover,
.paginazione button:hover:not(:disabled) {
  border-color: var(--nero);
}

.chip.is-attivo {
  background: var(--giallo);
  border-color: var(--giallo);
  font-weight: 700;
}

.paginazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin-top: var(--spazio-lg);
}

.paginazione button[aria-current="page"] {
  background: var(--nero);
  border-color: var(--nero);
  color: var(--bianco);
}

.paginazione button:disabled {
  opacity: 0.4;
}

.paginazione__stato {
  padding: 8px 4px;
  font-size: var(--t-15);
  font-weight: 500;
}

@media (max-width: 479px) {
  .paginazione {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .paginazione__stato {
    grid-column: 1 / -1;
    order: -1;
    text-align: center;
  }
}

/* Schede (tab sottolineate) */
.schede {
  margin-top: var(--spazio-lg);
}

.schede__lista {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--spazio-md);
  border-bottom: 1px solid var(--linea);
}

@media (max-width: 719px) {
  /* P2-21 — schede su una riga scorrevole */
  .schede__lista--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .schede__lista--scroll::-webkit-scrollbar {
    display: none;
  }

  .schede__lista--scroll [role="tab"] {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 959px) {
  /* P2-21 — una sola consegna: resta quella della carta Tariffe (Tariffe-first sotto i 960 px) */
  .acquisto__intro--ridondante {
    display: none;
  }
}

.schede__lista [role="tab"] {
  min-height: var(--tocco);
  margin-bottom: -1px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--grigio-700);
  font-weight: 500;
}

.schede__lista [role="tab"]:hover {
  color: var(--nero);
}

.schede__lista [role="tab"][aria-selected="true"] {
  color: var(--nero);
  font-weight: 700;
  border-bottom-color: var(--giallo);
}

.schede__lista [role="tab"]:focus-visible {
  outline-offset: -2px;
}

/* Badge e info di vendita */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tocco);
  padding: 8px 14px;
  border: 1px solid var(--nero);
  border-radius: var(--raggio);
  background: var(--bianco);
  font-weight: 700;
}

.info-vendita {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: var(--tocco);
  padding: 8px 14px;
  border-radius: var(--raggio);
  background: var(--giallo);
  color: var(--nero);
  font-weight: 700;
}

.info-vendita strong {
  font-family: var(--font-titoli);
  letter-spacing: 0.04em;
}

.info-vendita--esaurito {
  background: var(--nero-2);
  color: var(--bianco);
}

/* Campi di modulo */
.campo,
.modulo-contatti input,
.modulo-contatti textarea,
.cerca-form input[type="search"] {
  width: 100%;
  min-width: 0;
  min-height: var(--tocco);
  padding: 8px 12px;
  border: 1px solid var(--grigio-300);
  border-radius: var(--raggio);
  background: var(--bianco);
  transition: border-color var(--durata) ease, box-shadow var(--durata) ease;
}

.campo:focus,
.modulo-contatti input:focus,
.modulo-contatti textarea:focus,
.cerca-form input[type="search"]:focus {
  outline: none;
  border-color: var(--nero);
  box-shadow: 0 0 0 3px rgba(255, 213, 0, 0.55);
}

/* Fil d'Ariane */
.briciole ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  list-style: none;
  margin: 0 0 var(--spazio-md);
  font-size: var(--t-14);
  color: var(--secondario);
}

.briciole li + li::before {
  content: "›";
  margin: 0 8px;
  color: var(--grigio-300);
}

.briciole a {
  display: inline-block;
  padding: 13px 6px; /* P1-17: area di tocco ≥ 44 px senza cambiare l'aspetto */
  margin: -13px -6px;
  color: var(--secondario);
  text-decoration: none;
}

.briciole a:hover {
  color: var(--nero);
  text-decoration: underline;
}

.briciole [aria-current="page"] {
  color: var(--nero);
  font-weight: 500;
}

/* Stepper quantità (carrello e seatmap) */
.qta {
  display: flex;
  align-items: center;
  gap: 4px;
}

.qta button {
  width: var(--tocco);
  height: var(--tocco);
  border: 1px solid var(--grigio-300);
  border-radius: var(--raggio-btn);
  background: var(--bianco);
  font-size: var(--t-18);
  font-weight: 500;
  line-height: 1;
}

.qta button:hover:not(:disabled) {
  border-color: var(--nero);
}

.qta button:disabled {
  background: var(--grigio-100);
  color: var(--grigio-500);
}

.qta__n {
  min-width: 2.5ch;
  text-align: center;
  font-weight: 700;
}

/* Dialogo di ricerca (AG-02 ag-cerca-sticky: testata fissa + scorrimento risultati indipendente) */
.dialogo-cerca {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--raggio-lg);
  box-shadow: var(--ombra-lg);
  color: var(--nero);
}

.dialogo-cerca.ag-cerca-sticky[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dialogo-cerca::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.dialogo-cerca__testata {
  flex: 0 0 auto;
  padding: 14px var(--spazio-md) 12px;
  border-bottom: 1px solid var(--linea);
  background: var(--bianco);
}

.dialogo-cerca__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.dialogo-cerca h2 {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: var(--t-20);
}

.dialogo-cerca__chiudi {
  min-height: var(--tocco);
  padding: 0 14px;
}

.cerca-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

.cerca-form__campo {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
}

.cerca-form input[type="search"] {
  width: 100%;
  min-height: var(--tocco);
  padding-right: 44px;
}

.cerca-form input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.cerca-form__pulisci {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: var(--tocco);
  height: var(--tocco);
  padding: 0;
  border: 0;
  border-radius: var(--raggio);
  background: transparent;
  color: var(--secondario);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.cerca-form__pulisci:hover {
  color: var(--nero);
}

.cerca-form__pulisci[hidden] {
  display: none;
}

.cerca-form .btn {
  min-height: var(--tocco);
  padding: 0 20px;
}

.dialogo-cerca__corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px var(--spazio-md) var(--spazio-md);
}

@media (max-width: 767px) {
  /* AG-25: pannello ricerca mobile a tutta larghezza, zero banda laterale né sbordamento */
  .dialogo-cerca,
  .dialogo-cerca.ag-cerca-sticky {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }
}

@media (max-width: 599px) {
  .cerca-form__invia {
    display: none;
  }
}

.risultati {
  list-style: none;
  padding: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.risultati a,
.risultati__voce--info {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 8px;
  border-radius: var(--raggio);
  text-decoration: none;
}

[data-ag-cerca-nav] .risultati a:hover,
[data-ag-cerca-nav] .risultati a:focus-visible {
  background: var(--grigio-100);
}

.risultati__voce--info {
  opacity: 0.75;
}

.risultati__img {
  flex: 0 0 auto;
  width: 96px;
  height: 48px;
  border-radius: var(--raggio-sm);
  object-fit: cover;
  background: var(--grigio-100);
}

.risultati__testo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.risultati__testo > strong {
  overflow-wrap: anywhere;
}

/* P1-14 — gruppi di risultati, chip e stato vuoto */
.risultati__gruppo {
  margin-top: 16px;
}

.risultati__gruppo h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-titoli);
  font-size: var(--t-15);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.risultati__n {
  color: var(--secondario);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.risultati__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}

.risultati__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font: inherit;
  font-size: var(--t-14);
  text-decoration: none;
}

.risultati__chip-n {
  color: var(--secondario);
  font-weight: 400;
}

.risultati__vuoto,
.risultati__nota {
  margin-top: 12px;
  color: var(--secondario);
  font-size: var(--t-15);
}

.risultati__vuoto strong {
  color: var(--nero);
}

.risultati__forse {
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--nero);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.risultati a:hover {
  background: var(--grigio-100);
}

.risultati span,
#cerca-risultati > p {
  color: var(--secondario);
  font-size: var(--t-15);
}

#cerca-risultati > p {
  margin-top: 12px;
}

/* P1-12 — risultati di ricerca con prezzo e stato */
.risultati__prezzo {
  font-size: var(--t-14);
  font-weight: 700;
}

.risultati__badge {
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: var(--raggio-btn);
  background: var(--grigio-100);
  color: var(--grigio-700);
  font-size: var(--t-12);
  font-style: normal;
  font-weight: 700;
}

.risultati__badge--ultimi {
  background: #fdeded;
  color: #9b1c1c;
}

.risultati__badge--esaurito {
  background: var(--nero);
  color: var(--bianco);
}

.risultati__badge--prossimamente {
  background: #fff7d6;
  color: #7a5a00;
}

/* 7. Home ------------------------------------------------------------------ */

.mosaico {
  position: relative;
  background: var(--nero);
}

.mosaico__griglia {
  display: grid;
  grid-template-columns: 40fr 15fr 15fr 30fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  height: 230px;
  background: var(--nero);
}

.mosaico__tile {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--nero-2);
}

.mosaico__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transition: transform 0.4s ease;
}

.mosaico__tile:hover img {
  transform: scale(1.03);
}

.mosaico__tile:focus-visible {
  outline: 3px solid var(--giallo);
  outline-offset: -3px;
}

.mosaico__tile--sx { grid-column: 1; grid-row: 1 / span 2; }
.mosaico__tile--c1 { grid-column: 2; grid-row: 1; }
.mosaico__tile--c2 { grid-column: 2; grid-row: 2; }
.mosaico__tile--c3 { grid-column: 3; grid-row: 1; }
.mosaico__tile--c4 { grid-column: 3; grid-row: 2; }
.mosaico__tile--dx { grid-column: 4; grid-row: 1 / span 2; }

/* P0-7 — legenda delle locandine: titolo, luogo · data, « da X € » (sempre visibile nel carosello mobile,
   al passaggio/focus sul desktop) */
.mosaico__tile {
  position: relative;
  color: var(--bianco);
  text-decoration: none;
}

.mosaico__legenda {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 28px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0) 100%);
  font-size: var(--t-13);
  line-height: 1.3;
  pointer-events: none;
}

.mosaico__legenda b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-titoli);
  font-size: var(--t-15);
  font-weight: 700;
  text-transform: uppercase;
}

.mosaico__dettaglio {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--grigio-200);
}

.mosaico__prezzo {
  font-weight: 700;
}

.mosaico__punti {
  display: none;
}

/* barra delle categorie (mobile): stesse icone del modulo « Di tendenza », porta alla scheda corrispondente */
.categorie-barra {
  display: none;
}

@media (min-width: 720px) {
  .mosaico__legenda {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .mosaico__tile:hover .mosaico__legenda,
  .mosaico__tile:focus-visible .mosaico__legenda {
    opacity: 1;
  }

  .mosaico__tile--c1 .mosaico__legenda,
  .mosaico__tile--c2 .mosaico__legenda,
  .mosaico__tile--c3 .mosaico__legenda,
  .mosaico__tile--c4 .mosaico__legenda {
    padding: 16px 8px 6px;
    font-size: var(--t-12);
  }

  .mosaico__tile--c1 .mosaico__legenda b,
  .mosaico__tile--c2 .mosaico__legenda b,
  .mosaico__tile--c3 .mosaico__legenda b,
  .mosaico__tile--c4 .mosaico__legenda b {
    font-size: var(--t-12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mosaico__legenda {
    transition: none;
  }
}

/* Fase 1 Opus — hero-tessera--sicura (desktop ≥ 720 px): locandina INTERA (contain, nessun testo dell'affiche
   rognato dal recadrage, « 8 MAGGIO » compreso) su sfondo ambiente sfocato (.mosaico__ambiente, immagine data
   da site.js = currentSrc). Legenda (passaggio/focus) in zona sicura: padding garantito, nessun troncamento,
   velo ≥ 0,84 sotto il testo, contenuto adattato all'altezza della tessera (container query). Mobile invariato. */
.mosaico__ambiente {
  display: none;
}

@media (min-width: 720px) {
  .hero-tessera--sicura {
    container: tessera / size;
    isolation: isolate;
  }

  .hero-tessera--sicura .mosaico__ambiente {
    display: block;
    position: absolute;
    inset: -16px;
    z-index: -1;
    background-color: var(--nero-2);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(14px) brightness(0.5) saturate(1.2);
  }

  .hero-tessera--sicura img {
    object-fit: contain;
    object-position: center;
  }

  .hero-tessera--sicura .mosaico__legenda {
    max-height: 100%;
    overflow: hidden;
    padding: 36px 14px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.84) calc(100% - 36px), rgba(0, 0, 0, 0) 100%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }

  .hero-tessera--sicura .mosaico__legenda b {
    display: block;
    flex-shrink: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    -webkit-line-clamp: unset;
  }

  .hero-tessera--sicura .mosaico__dettaglio {
    flex-shrink: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }

  .hero-tessera--sicura .mosaico__prezzo {
    flex-shrink: 0;
  }

  .hero-tessera--sicura.mosaico__tile--c1 .mosaico__legenda,
  .hero-tessera--sicura.mosaico__tile--c2 .mosaico__legenda,
  .hero-tessera--sicura.mosaico__tile--c3 .mosaico__legenda,
  .hero-tessera--sicura.mosaico__tile--c4 .mosaico__legenda {
    padding: 24px 10px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.84) calc(100% - 24px), rgba(0, 0, 0, 0) 100%);
  }

  /* soglie misurate 720 → 1300 px: legenda completa da 158 px di altezza, poi senza luogo, sotto 141 px
     (tablet 720–959, tessere di 113 px) titolo + prezzo */
  @container tessera (max-height: 157px) {
    .mosaico__luogo,
    .mosaico__sep {
      display: none;
    }
  }

  @container tessera (max-height: 140px) {
    .hero-tessera--sicura .mosaico__dettaglio {
      display: none;
    }

    /* tessera-legenda-tablet (retouche tablettes 720-880): titres longs des petites tuiles tronques par le clamp
       a 4 lignes = 62 px visibles pour 78 px reels (CONCERTO CORO VOCI BIANCHE, BEATLESTORY) ; clamp releve a 6 et
       paddings reduits pour offrir la place sans deborder, le degrade fondu restant le fond du texte */
    .hero-tessera--sicura .mosaico__legenda {
      padding-top: 8px;
      padding-bottom: 6px;
    }

    .hero-tessera--sicura .mosaico__legenda b {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
    }
  }
}

/* P0-7 — home mobile (< 720 px): hero a carosello con legenda e punti, barra categorie, « In evidenza » in fila */
@media (max-width: 719px) {
  .mosaico__griglia {
    display: flex;
    gap: 8px;
    height: auto;
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mosaico__griglia::-webkit-scrollbar {
    display: none;
  }

  .mosaico__tile {
    flex: 0 0 88%;
    aspect-ratio: 1 / 1;
    max-height: 70vh;
    border-radius: var(--raggio);
    scroll-snap-align: start;
  }

  /* AG-04 ag-hero-leggibile: velo denso e data sempre intera su riga dedicata */
  .mosaico__legenda.ag-hero-leggibile {
    gap: 3px;
    padding: 40px 14px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.84) 62%, rgba(0, 0, 0, 0) 100%);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  }

  .mosaico__legenda.ag-hero-leggibile .mosaico__dettaglio {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }

  .mosaico__legenda.ag-hero-leggibile .mosaico__sep {
    display: none;
  }

  .mosaico__legenda.ag-hero-leggibile .mosaico__luogo {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--grigio-200);
  }

  .mosaico__legenda.ag-hero-leggibile .mosaico__quando {
    color: var(--bianco);
    font-weight: 600;
  }

  .mosaico__legenda.ag-hero-leggibile .mosaico__prezzo {
    color: var(--giallo);
  }

  .mosaico__punti {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 0 0 2px;
    background: var(--nero);
  }

  .mosaico__punti button {
    width: var(--tocca); /* P1-17 */
    height: var(--tocca);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .mosaico__punti button::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--grigio-500);
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  .mosaico__punti button[aria-current="true"]::before {
    background: var(--giallo);
    transform: scale(1.35);
  }

  .categorie-barra {
    display: flex;
    gap: 6px;
    padding: 10px var(--gutter);
    overflow-x: auto;
    border-bottom: 1px solid var(--linea);
    background: var(--bianco);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .categorie-barra::-webkit-scrollbar {
    display: none;
  }

  .categorie-barra__voce {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 72px;
    min-height: 56px;
    padding: 6px 8px;
    border-radius: var(--raggio);
    color: var(--nero);
    font-size: var(--t-12);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .categorie-barra__voce:active,
  .categorie-barra__voce.is-attivo {
    background: var(--grigio-100);
  }

  .categorie-barra__voce .tendenza__icona {
    width: 22px;
    height: 22px;
  }

  /* « In evidenza » in una fila orizzontale: 2 schede visibili, ~300 px di altezza invece di 3 205 */
  .griglia--scorrevole {
    display: flex;
    gap: 12px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding: 0 var(--gutter);
    -webkit-overflow-scrolling: touch;
  }

  .griglia--scorrevole > .card {
    flex: 0 0 min(72vw, 260px);
    scroll-snap-align: start;
  }
}

@media (min-width: 960px) {
  .mosaico__griglia {
    gap: 7px;
    height: min(31vw, 400px);
  }
}

/* Titolo SEO della home: presente nel DOM, non ingombrante */
.home-titolo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tendenza: barra di schede e pannelli (AG-06 ag-tendenza-fluida) */
.tendenza > h2,
.tendenza__testata > h2 {
  text-transform: uppercase;
}

.tendenza.ag-tendenza-fluida .tendenza__testata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 8px;
}

.tendenza.ag-tendenza-fluida .tendenza__testata > h2,
.tendenza.ag-tendenza-fluida .vicino-a-me--tendenza {
  margin: 0;
}

@keyframes tendenza-fondu {
  0%, 99% {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent);
  }
  100% { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 767px) {
  .tendenza.ag-tendenza-fluida .tendenza__freccia {
    display: none;
  }

  .tendenza.ag-tendenza-fluida .tendenza__tab {
    min-width: 96px;
    min-height: 64px;
  }

  .tendenza.ag-tendenza-fluida .tendenza__chips {
    animation: tendenza-fondu linear both;
    animation-timeline: scroll(self inline);
  }
}

.tendenza__barre {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-barra-tab);
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 0 0 18px;
  padding: 8px 0;
  background: var(--bianco);
}

.tendenza__chips {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.tendenza__chips::-webkit-scrollbar {
  height: 0;
}

.tendenza__tab {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 104px;
  min-height: 72px;
  padding: 8px 6px;
  border: 1px solid var(--grigio-200);
  border-radius: var(--raggio-sm);
  background: var(--grigio-100);
  color: var(--grigio-700);
  font-size: var(--t-12);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  scroll-snap-align: start;
  transition: background-color var(--durata) ease, color var(--durata) ease;
}

.tendenza__tab:hover {
  background: var(--grigio-200);
  color: var(--nero);
}

.tendenza__tab.is-attivo,
.tendenza__tab[aria-selected="true"] {
  background: var(--nero);
  border-color: var(--nero);
  color: var(--bianco);
}

.tendenza__tab:focus-visible {
  outline-offset: -3px;
  outline-color: var(--giallo);
}

.tendenza__icona {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: currentColor;
}

.tendenza__icona,
.tendenza__tab span {
  pointer-events: none;
}

.tendenza__freccia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--tocca); /* P1-17 */
  align-self: stretch;
  border: 1px solid var(--grigio-200);
  border-radius: var(--raggio-sm);
  background: var(--bianco);
  color: var(--nero);
}

.tendenza__freccia:disabled {
  opacity: 0.35;
}

.tendenza__pannello {
  display: none;
}

.tendenza__pannello.is-attivo {
  display: grid;
}

@media (min-width: 768px) {
  .tendenza__chips {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    overflow: visible;
  }

  .tendenza__tab {
    min-width: 0;
    padding: 8px 4px;
    font-size: var(--t-11);
  }

  .tendenza__freccia {
    display: none;
  }
}

@media (min-width: 1024px) {
  .tendenza__tab {
    font-size: var(--t-12);
  }
}

/* Artisti: vignette rotonde */
.artisti {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.artisti__voce {
  flex: 0 0 104px;
  scroll-snap-align: start;
  text-align: center;
  text-decoration: none;
  color: var(--grigio-900);
}

.artisti__voce img {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--nero-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  transition: transform var(--durata) ease;
}

.artisti__voce:hover img {
  transform: scale(1.04);
}

.artisti__nome {
  display: block;
  margin-top: 8px;
  font-size: var(--t-13);
  font-weight: 500;
  line-height: 1.3;
}

.artisti__voce:hover .artisti__nome {
  text-decoration: underline;
}

@media (min-width: 960px) {
  .artisti {
    gap: 28px;
  }

  .artisti__voce {
    flex-basis: 150px;
  }

  .artisti__voce img {
    width: 150px;
    height: 150px;
  }
}

/* Luoghi: tessere quadrate con nome in sovrimpressione */
.luoghi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.luoghi__voce {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--raggio-lg);
  background-color: #18181b;
  box-shadow: var(--ombra-md);
  color: var(--bianco);
  text-decoration: none;
}

.luoghi__voce::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0) 58%);
}

.luoghi__voce.ag-contrasto-sicuro::before {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.34) 38%, rgba(0, 0, 0, 0) 68%);
}

.luoghi__voce img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.luoghi__voce:hover img {
  transform: scale(1.04);
}

.luoghi__nome {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--font-titoli);
  font-size: var(--t-16);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.luoghi__nome::after {
  content: "Eventi";
  display: block;
  width: fit-content;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--raggio-btn);
  background: var(--grigio-900);
  color: var(--bianco);
  font-family: var(--font);
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
  text-shadow: none;
}

@media (min-width: 960px) {
  .luoghi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

/* Servizi: 4 card con icona */
.servizi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.servizio {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: var(--spazio-md);
  border: 1px solid var(--grigio-200);
  border-radius: var(--raggio-lg);
  background: var(--bianco);
  box-shadow: var(--ombra-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--durata) ease, box-shadow var(--durata) ease;
}

.servizio:hover {
  border-color: var(--nero);
  box-shadow: var(--ombra-md);
}

.servizio__icona {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--giallo);
}

.servizio h3 {
  font-family: var(--font-titoli);
  font-size: var(--t-16);
  font-weight: 700;
}

.servizio:hover h3 {
  text-decoration: underline;
}

.servizio p {
  color: var(--secondario);
  font-size: var(--t-15);
}

@media (min-width: 640px) {
  .servizi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .servizi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* n4a: suite du bloc fiche deplacee dans assets/css/fiche.css ; regles ci-dessous partagees -> restent ici (aussi utilisees hors ticket/) */

.evento__torna {
  display: inline-block;
  margin-top: var(--spazio-sm);
  padding: 12px 0; /* P1-17: area di tocco 44 px */
  margin-bottom: -12px;
  color: var(--secondario);
  font-size: var(--t-14);
}

.card__prezzo-base {
  color: var(--grigio-500);
  font-size: var(--t-12);
}

/* 9. Listing categoria ----------------------------------------------------- */

#titolo-pagina {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.listing__conteggio {
  margin-top: 8px;
  color: var(--secondario);
  font-size: var(--t-15);
}

/* P1-9 — barra filtri/ordinamento del listing, appiccicata sotto l'intestazione */
.filtri {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  margin: var(--spazio-md) calc(-1 * var(--gutter)) 0;
  padding: 10px var(--gutter);
  background: var(--bianco);
  border-bottom: 1px solid var(--linea);
}

.filtri__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.filtri__campo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-14);
}

.filtri__campo > span {
  color: var(--secondario);
}

.filtri__campo select,
.filtri__campo input {
  min-height: var(--tocco);
  max-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--grigio-300);
  border-radius: var(--raggio-btn);
  background: var(--bianco);
  font: inherit;
  font-size: var(--t-14);
}

.filtri__campo select:hover,
.filtri__campo input:hover {
  border-color: var(--nero);
}

/* larghezza fissa: il riempimento delle città (listing.js) non deve far andare a capo la barra (CLS) */
.filtri__campo select[name="citta"] {
  width: 180px;
}

.filtri__azzera {
  min-height: var(--tocco);
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--nero);
  font: inherit;
  font-size: var(--t-14);
  text-decoration: underline;
  cursor: pointer;
}

.filtri .chip {
  cursor: pointer;
  font: inherit;
  font-size: var(--t-14);
}

@media (max-width: 719px) {
  .filtri {
    position: static;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    border-bottom: 0;
  }

  .filtri__riga {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .filtri__campo,
  .filtri .chip,
  .filtri__azzera {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .filtri__campo select {
    max-width: 160px;
  }
}

/* P1-8 — scheda senza pagina: visibilmente « in arrivo », nessun effetto di passaggio */
#griglia-listing .card--static {
  opacity: 0.7;
}

#griglia-listing .card--static:hover .card__media img {
  transform: none;
}

.listing__vuoto {
  grid-column: 1 / -1;
}

.listing__vuoto-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.listing__vuoto .chip {
  cursor: pointer;
  font: inherit;
  font-size: var(--t-14);
}

.sottocategorie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--spazio-md);
}

.sottocategorie a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tocca); /* P1-17 */
  padding: 6px 14px;
  border: 1px solid var(--grigio-300);
  border-radius: var(--raggio-btn);
  font-size: var(--t-14);
  font-weight: 500;
  text-decoration: none;
}

.sottocategorie a:hover {
  border-color: var(--nero);
}

.sottocategorie a[aria-current="page"] {
  background: var(--nero);
  border-color: var(--nero);
  color: var(--bianco);
}

/* 10. Carrello ------------------------------------------------------------- */

.carrello-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-lg);
}

.carrello-riga {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas:
    "media testo"
    "qta qta"
    "prezzo prezzo"
    "rimuovi rimuovi";
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding-bottom: var(--spazio-md);
  border-bottom: 1px solid var(--linea);
}

.carrello-riga__media {
  grid-area: media;
  width: 96px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--raggio-sm);
  background: var(--nero-2);
}

.carrello-riga__testo {
  grid-area: testo;
  min-width: 0;
}

/* riga senza immagine (evento fuori da events.json): il testo prende anche la colonna media */
.carrello-riga__testo:first-child {
  grid-area: auto;
  grid-column: 1 / 3;
  grid-row: 1;
}

.carrello-riga h2 {
  margin-bottom: 4px;
  font-family: var(--font-titoli);
  font-size: var(--t-16);
  line-height: 1.3;
}

.carrello-riga h2 a {
  text-decoration: none;
}

.carrello-riga h2 a:hover {
  text-decoration: underline;
}

.carrello-riga__testo p {
  color: var(--secondario);
  font-size: var(--t-15);
  overflow-wrap: anywhere;
}

.carrello-riga .qta {
  grid-area: qta;
}

.carrello-riga .qta[hidden] {
  display: none;
}

/* P0-4 — posto numerato: « 1 posto · Aggiungi un altro posto » al posto dello stepper */
.carrello-riga__posto {
  grid-area: qta;
  margin: 0;
  color: var(--grigio-700);
  font-size: var(--t-15);
}

.carrello-riga__altro {
  display: inline-block;
  min-height: var(--tocco);
  line-height: var(--tocco);
  color: var(--nero);
  font-weight: 500;
}

.carrello-riga__prezzo {
  grid-area: prezzo;
  font-weight: 700;
  white-space: nowrap;
}

.carrello-riga .btn {
  grid-area: rimuovi;
  justify-self: start;
  min-height: var(--tocco);
}

.carrello-totale {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spazio-md);
  margin-top: var(--spazio-lg);
}

.carrello-totale p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--t-18);
}

@media (min-width: 720px) {
  .carrello-riga {
    grid-template-columns: 160px minmax(0, 1fr) auto auto auto;
    grid-template-areas: "media testo qta prezzo rimuovi";
    align-items: center;
  }

  .carrello-riga__media {
    width: 160px;
    height: 80px;
  }

  .carrello-totale {
    align-items: flex-end;
  }

  .carrello-totale p {
    min-width: 280px;
  }
}

/* I6 — fiducia per onestà: consegna reale, prezzi tutto incluso, rivendita non ufficiale */
.fiducia {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--grigio-700);
  font-size: var(--t-13);
}

.fiducia li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fiducia svg {
  flex: 0 0 auto;
  color: var(--grigio-500);
}

.fiducia--compatta {
  margin-top: var(--spazio-md);
  padding-top: var(--spazio-md);
  border-top: 1px solid var(--linea);
}

/* I1 — filo d'acquisto visibile: Data → Posto → Carrello → Richiesta */
.percorso-acquisto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: 0 0 var(--spazio-md);
  padding: 0;
  list-style: none;
}

.percorso-acquisto__passo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--grigio-500);
  font-size: var(--t-13);
  font-weight: 600;
  white-space: nowrap;
}

/* W2-8 passi--senza-linea-orfana: ogni tappa ha il suo trattino; a inizio riga cade nel ritaglio */
.passi--senza-linea-orfana {
  margin-left: -38px;
  clip-path: inset(-4px -4px -4px 38px);
}

.passi--senza-linea-orfana .percorso-acquisto__passo::before {
  content: "";
  width: 16px;
  height: 2px;
  margin: 0 8px;
  background: var(--grigio-300);
}

.percorso-acquisto__n {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--grigio-200);
  color: var(--grigio-700);
  font-size: var(--t-12);
  font-weight: 700;
}

.percorso-acquisto__passo.is-corrente,
body.seatmap-riepilogo-attivo .percorso-acquisto__passo[data-passo="carrello"] {
  color: var(--nero);
}

.percorso-acquisto__passo.is-corrente .percorso-acquisto__n,
body.seatmap-riepilogo-attivo .percorso-acquisto__passo[data-passo="carrello"] .percorso-acquisto__n {
  background: var(--giallo);
  color: var(--nero);
  box-shadow: inset 0 0 0 2px var(--nero);
}

.percorso-acquisto__passo.is-fatto,
body.seatmap-riepilogo-attivo .percorso-acquisto__passo[data-passo="posto"] {
  color: var(--nero);
}

.percorso-acquisto__passo.is-fatto .percorso-acquisto__n,
body.seatmap-riepilogo-attivo .percorso-acquisto__passo[data-passo="posto"] .percorso-acquisto__n {
  background: var(--nero);
  color: var(--bianco);
  box-shadow: none;
  font-size: 0;
}

.percorso-acquisto__passo.is-fatto .percorso-acquisto__n::after,
body.seatmap-riepilogo-attivo .percorso-acquisto__passo[data-passo="posto"] .percorso-acquisto__n::after {
  content: "✓";
  font-size: var(--t-12);
}

.percorso-acquisto__passo.is-fatto + .percorso-acquisto__passo::before,
body.seatmap-riepilogo-attivo .percorso-acquisto__passo[data-passo="posto"] + .percorso-acquisto__passo::before {
  background: var(--nero);
}

/* AG-10 ag-seatmap-mobile-prima: sotto i 480 px le 4 tappe restano su una sola riga senza testo < 12 px */
@media (max-width: 479px) {
  .percorso-acquisto.ag-seatmap-mobile-prima {
    flex-wrap: nowrap;
  }

  .percorso-acquisto.ag-seatmap-mobile-prima .percorso-acquisto__passo {
    gap: 4px;
    font-size: var(--t-12);
  }

  .percorso-acquisto.ag-seatmap-mobile-prima .percorso-acquisto__n {
    width: 20px;
    height: 20px;
  }

  .passi--senza-linea-orfana.ag-seatmap-mobile-prima {
    margin-left: -22px;
    clip-path: inset(-4px -4px -4px 22px);
  }

  .passi--senza-linea-orfana.ag-seatmap-mobile-prima .percorso-acquisto__passo::before {
    width: 8px;
    margin: 0 5px;
  }
}

/* P1-15 (parziale) — uscita dal carrello: « Continua a cercare » (la riga strutturata vive in carrello.js, intoccabile) */
.carrello-continua {
  margin-top: var(--spazio-md);
  font-size: var(--t-15);
}

/* I11 / P1-16 — carrello vuoto utile e pagina 404 */
.carrello-vuoto[hidden],
.carrello-passi[hidden],
.carrello-continua[hidden] {
  display: none;
}

.carrello-vuoto h2,
.intro--404 + .sezione h2 {
  margin-bottom: var(--spazio-md);
  font-family: var(--font-titoli);
  font-size: var(--t-24);
  font-weight: 700;
}

.carrello-vuoto__categorie {
  margin: var(--spazio-lg) 0 8px;
  color: var(--secondario);
}

.categorie-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--spazio-md) 0 0;
  padding: 0;
  list-style: none;
}

.categorie-link .chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.intro--404 {
  padding-bottom: var(--spazio-lg);
}

.errore-404__codice {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: clamp(56px, 10vw, 96px);
  font-weight: 700;
  line-height: 1;
  color: var(--giallo);
  -webkit-text-stroke: 2px var(--nero);
}

.errore-404__testo {
  max-width: 60ch;
  margin: 8px 0 var(--spazio-md);
  color: var(--secondario);
  font-size: var(--t-16);
}

.errore-404__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.carrello-continua a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tocco);
  color: var(--grigio-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* P0-6 — « Cosa succede dopo »: le 3 tappe dopo « Procedi » */
.carrello-passi {
  max-width: 52rem;
  padding: var(--spazio-lg);
  border: 1px solid var(--grigio-200);
  border-radius: var(--raggio-lg);
  background: var(--grigio-50);
}

.carrello-passi h2 {
  margin-bottom: var(--spazio-md);
  font-family: var(--font-titoli);
  font-size: var(--t-18);
  font-weight: 700;
  text-transform: uppercase;
}

.passi {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.passi li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 44px;
  counter-increment: passo;
}

.passi li::before {
  content: counter(passo);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--giallo);
  color: var(--nero);
  font-family: var(--font-titoli);
  font-size: var(--t-14);
  font-weight: 700;
}

.passi li strong {
  font-size: var(--t-16);
}

.passi li span {
  color: var(--grigio-700);
  font-size: var(--t-15);
}

.carrello-passi__nota {
  margin-top: var(--spazio-md);
  color: var(--grigio-700);
  font-size: var(--t-14);
}

.carrello-passi__esito {
  margin-top: var(--spazio-sm);
  font-weight: 700;
}

.carrello-passi__esito:empty {
  display: none;
}

@media (min-width: 720px) {
  .passi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .passi li {
    padding-top: 44px;
    padding-left: 0;
  }
}

/* 11. Contatti ------------------------------------------------------------- */

.contatti__dati {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--spazio-lg);
}

.contatti__dati a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tocco);
  min-width: var(--tocco);
  padding: 6px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.modulo-contatti {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  max-width: 36rem;
}

.modulo-contatti label {
  font-weight: 500;
}

.modulo-contatti textarea {
  min-height: 8rem;
  resize: vertical;
}

.modulo-contatti .btn {
  margin-top: 8px;
}

.contatti__esito {
  margin-top: var(--spazio-md);
  max-width: 36rem;
  font-weight: 500;
}

.contatti__esito:empty {
  display: none;
}

.contatti__mailto {
  margin-top: var(--spazio-sm);
}

@media (min-width: 640px) {
  .modulo-contatti .btn {
    align-self: flex-start;
  }
}

/* 12. Pagine di testo ------------------------------------------------------ */

.testo {
  max-width: 52rem;
}

.testo .sezione--testo {
  margin-top: 28px;
}

.sezione--testo h2 {
  margin-bottom: 8px;
  font-family: var(--font-titoli);
  font-size: var(--t-18);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.sezione--testo p + p {
  margin-top: 10px;
}

.sezione--testo a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq__categorie,
.faq__domande {
  list-style: none;
}

.faq__categorie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.faq__cat {
  padding: 6px 14px;
  border: 1px solid var(--grigio-200);
  border-radius: var(--raggio-btn);
  background: var(--grigio-100);
  font-size: var(--t-13);
  font-weight: 700;
}

.faq__domande li {
  border-top: 1px solid var(--linea);
}

.faq__domande li:last-child {
  border-bottom: 1px solid var(--linea);
}

.faq__domande a {
  display: block;
  padding: 12px 4px;
  color: var(--testo);
  font-size: var(--t-15);
  font-weight: 700;
  text-decoration: none;
}

.faq__domande a:hover {
  text-decoration: underline;
}

/* Redirezione (vecchie URL di categoria) */
.redirezione {
  margin-top: 40px;
}

/* 13. Movimento ridotto ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html,
  .tendenza__chips {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .card:hover .card__media img,
  .mosaico__tile:hover img,
  .luoghi__voce:hover img,
  .artisti__voce:hover img {
    transform: none;
  }
}

/* P2-23 — campo non valido con il focus: anello visibile (il solo messaggio nativo non basta) */
input:invalid:focus,
textarea:invalid:focus,
select:invalid:focus,
.modulo-contatti input:invalid:focus,
.modulo-contatti textarea:invalid:focus {
  outline: 3px solid #c62828;
  outline-offset: 2px;
  border-color: #c62828;
  box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.18);
}

/* 14. I13 — pannello di accessibilità (#pannello-accessibilita) e preferenze applicate su <html> ------------- */

.pannello-accessibilita {
  width: min(92vw, 440px);
  padding: var(--spazio-lg);
  border: 0;
  border-radius: var(--raggio-lg);
  box-shadow: var(--ombra-lg);
}

.pannello-accessibilita::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.pannello-accessibilita h2 {
  margin-bottom: 6px;
  font-family: var(--font-titoli);
  font-size: var(--t-22);
}

.pannello-accessibilita__intro {
  margin-bottom: var(--spazio-md);
  color: var(--grigio-700);
  font-size: var(--t-14);
}

.pannello-accessibilita__opzioni {
  display: grid;
  gap: 8px;
}

.pannello-accessibilita__opzione,
.pannello-accessibilita__testo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--tocca);
  padding: 8px 14px;
  border: 1px solid var(--grigio-300);
  border-radius: var(--raggio);
  background: var(--bianco);
  color: var(--nero);
  font: inherit;
  font-size: var(--t-15);
  text-align: left;
  cursor: pointer;
}

.pannello-accessibilita__opzione::after {
  content: "";
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--grigio-300);
  box-shadow: inset 2px 0 0 2px var(--bianco), inset 0 0 0 2px var(--grigio-300);
  transition: background-color var(--durata) ease, box-shadow var(--durata) ease;
}

.pannello-accessibilita__opzione[aria-pressed="true"] {
  border-color: var(--nero);
}

.pannello-accessibilita__opzione[aria-pressed="true"]::after {
  background: var(--nero);
  box-shadow: inset -2px 0 0 2px var(--bianco), inset 0 0 0 2px var(--nero), inset -20px 0 0 2px var(--giallo);
}

.pannello-accessibilita__testo {
  cursor: default;
}

.pannello-accessibilita__testo span {
  flex: 1 1 auto;
}

.pannello-accessibilita__testo button {
  width: var(--tocca);
  height: var(--tocca);
  border: 1px solid var(--grigio-300);
  border-radius: 50%;
  background: var(--bianco);
  font: inherit;
  font-size: var(--t-20);
  cursor: pointer;
}

.pannello-accessibilita__testo button:disabled {
  color: var(--grigio-300);
  cursor: default;
}

.pannello-accessibilita__testo output {
  min-width: 3.5em;
  text-align: center;
  font-weight: 700;
}

.pannello-accessibilita__piede {
  margin: var(--spazio-md) 0;
  font-size: var(--t-14);
}

.pannello-accessibilita__azzera {
  padding: 0;
  border: 0;
  background: none;
  color: var(--nero);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.pannello-accessibilita__chiudi {
  width: 100%;
}

/* testo più grande: tutte le misure in rem seguono */
html.a11y-testo-1 {
  font-size: 112.5%;
}

html.a11y-testo-2 {
  font-size: 125%;
}

/* contrasto rafforzato: grigi più scuri, bordi neri, link sottolineati */
html.a11y-contrasto {
  --secondario: #000000;
  --grigio-500: #2b2b2b;
  --grigio-700: #111111;
  --grigio-300: #555555;
  --grigio-200: #777777;
  --linea: #000000;
}

html.a11y-contrasto a {
  text-decoration: underline;
}

html.a11y-contrasto .btn {
  box-shadow: inset 0 0 0 2px var(--nero);
}

html.a11y-contrasto .card,
html.a11y-contrasto .acquisto__data,
html.a11y-contrasto .chip {
  border-color: var(--nero);
}

/* animazioni disattivate: come prefers-reduced-motion, ma a scelta dell'utente */
html.a11y-no-moto,
html.a11y-no-moto *,
html.a11y-no-moto *::before,
html.a11y-no-moto *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* 15. C5 — P2-28 pannello Accedi · I8 Ricordamelo · I9 Vicino a me · I10 mini-pianta e invito · P2-27 ------------ */

.pannello-accedi {
  width: min(92vw, 420px);
  padding: var(--spazio-lg);
  border: 0;
  border-radius: var(--raggio-lg);
  box-shadow: var(--ombra-lg);
}

.pannello-accedi::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.pannello-accedi h2 {
  margin-bottom: 8px;
  font-family: var(--font-titoli);
  font-size: var(--t-22);
}

.pannello-accedi__testo {
  margin-bottom: var(--spazio-md);
  color: var(--grigio-700);
}

.pannello-accedi__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.locale--unica[hidden] {
  display: none !important;
}

.hero-evento__ricordamelo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.ricordamelo__conto {
  color: var(--grigio-700);
  font-size: var(--t-14);
  font-weight: 700;
}

.ricordamelo__esito {
  flex-basis: 100%;
  color: var(--grigio-700);
  font-size: var(--t-14);
}

.evento__ics {
  color: var(--nero);
  font-weight: 500;
}

.vicino-a-me {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 var(--spazio-sm);
}

.vicino-a-me--filtri {
  margin: 0;
}

.vicino-a-me__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vicino-a-me__btn[aria-pressed="true"] {
  border-color: var(--nero);
}

.vicino-a-me__chip[hidden] {
  display: none;
}

.vicino-a-me__citta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 4px;
}

.vicino-a-me__togli {
  width: 32px;
  height: 32px;
  margin: -6px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--t-18);
  cursor: pointer;
}

.vicino-a-me__togli:hover {
  background: rgba(0, 0, 0, 0.12);
}

.vicino-a-me__esito {
  flex-basis: 100%;
  color: var(--grigio-700);
  font-size: var(--t-14);
}

.vicino-a-me__esito:empty {
  display: none;
}

.carrello__piantina {
  grid-area: media;
  width: 160px;
  margin: 0;
}

.carrello__piantina svg {
  display: block;
  width: 160px;
  height: 90px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--grigio-50);
}

.carrello__piantina figcaption {
  margin-top: 4px;
  color: var(--grigio-700);
  font-size: var(--t-12);
}

/* Opus C2 — carrello__piantina--compatta: sotto i 720 px la mini-pianta resta nella colonna di 96 px della riga
   (prima 160 px: 5 824 px² sopra titolo e descrizione) */
@media (max-width: 719px) {
  .carrello__piantina--compatta,
  .carrello__piantina--compatta svg {
    width: 96px;
  }

  .carrello__piantina--compatta svg {
    height: 54px;
  }

  /* Opus C5 — carrello-barra-procedi: Totale + Procedi fissi in basso finché il blocco del totale è fuori schermo */
  .carrello-barra-procedi {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--linea);
    background: var(--bianco);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
  }

  .carrello-barra-procedi__totale {
    margin: 0;
    font-size: var(--t-16);
  }

  .carrello-barra-procedi .btn {
    min-height: var(--tocca);
  }

  body.has-barra-procedi {
    padding-bottom: 80px;
  }

  body.has-barra-procedi .widget-access {
    bottom: 88px;
  }
}

.carrello-barra-procedi[hidden] {
  display: none;
}

.carrello-riga__invita {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--tocca);
  color: var(--nero);
  font-weight: 500;
}

.acquisto__aggiornato {
  color: var(--grigio-500);
}

.evento__aggiornato {
  margin: 4px 0 0;
  color: var(--grigio-500);
  font-size: var(--t-14);
}

/* P2-27 — date passate in grigio */
.tournee__riga.is-passata,
.acquisto__data.is-passata {
  opacity: 0.6;
}

.tournee__riga.is-passata .tournee__info::after,
.acquisto__data.is-passata .acquisto__data-info::after {
  content: "Data passata";
  display: block;
  color: var(--grigio-500);
  font-size: var(--t-12);
}

/* 16. P2-25 — sistema di stati (una sola grammatica): --eleva = elevazione al passaggio (2 px + ombra, 150 ms),
   premuto = scala 0,98, focus visibile = anello giallo/nero, disattivato = grigio senza ombra ------------------ */

:root {
  --eleva: -2px;
  --eleva-ombra: 0 6px 16px rgba(0, 0, 0, 0.16);
  --durata-stato: 150ms;
  --premuto: 0.98;
}

@media (hover: hover) and (pointer: fine) {
  .card:not(.card--static):hover,
  .servizio:hover,
  .artisti__voce:hover,
  .luoghi__voce:hover,
  .mosaico__tile:hover,
  .acquisto__data:hover,
  .tendenza__tab:hover,
  .chip:hover {
    transform: translateY(var(--eleva));
    box-shadow: var(--eleva-ombra);
  }

  .btn:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(var(--eleva));
    box-shadow: var(--eleva-ombra);
  }
}

.card:not(.card--static),
.servizio,
.artisti__voce,
.luoghi__voce,
.mosaico__tile,
.acquisto__data,
.tendenza__tab,
.chip,
.btn {
  transition: transform var(--durata-stato) ease, box-shadow var(--durata-stato) ease,
    background-color var(--durata-stato) ease, border-color var(--durata-stato) ease, color var(--durata-stato) ease;
}

.card:not(.card--static):active,
.servizio:active,
.artisti__voce:active,
.luoghi__voce:active,
.acquisto__data:active,
.tendenza__tab:active,
.chip:active,
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(var(--premuto));
  box-shadow: none;
}

.btn:disabled,
.btn[aria-disabled="true"],
.chip:disabled,
.acquisto__data:disabled {
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

.card:not(.card--static):focus-visible,
.servizio:focus-visible,
.artisti__voce:focus-visible,
.luoghi__voce:focus-visible,
.mosaico__tile:focus-visible,
.acquisto__data:focus-visible,
.tendenza__tab:focus-visible,
.chip:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--giallo);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--nero);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --eleva: 0px;
    --premuto: 1;
  }
}

html.a11y-no-moto {
  --eleva: 0px;
  --premuto: 1;
}

/* 17. I12 — transizione listing → fiche: immagine condivisa (View Transitions cross-document, progressiva) e
   pulsazione del posto appena scelto sulla pianta (scelto-pulse, in seatmap.css) ------------------------------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
}

::view-transition-old(vt-locandina),
::view-transition-new(vt-locandina) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
  mix-blend-mode: normal;
  object-fit: cover;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}