/* Sito vetrina — identita' "record store" moderna e pulita: bianco/quasi-nero,
   un solo accento vivido, tipografia bold ad alto contrasto, card prodotto
   pulite senza bordi pesanti. Font di sistema soltanto (nessun caricamento
   esterno, nessuna dipendenza di rete oltre alle chiamate API gia' previste)
   — la varieta' tipografica viene da RUOLI diversi (display/corpo/accento
   editoriale/mono/badge), non da webfont. I quattro colori base
   (--colore-primario/secondario/sfondo/testo) arrivano a runtime da
   templates/layout_header.php in base alla configurazione del negozio: qui
   sotto solo default sensati + tutte le sfumature derivate via color-mix(),
   cosi' il tema regge con qualunque palette scelta dal negoziante (non solo
   quella di default). I var() con secondo argomento sono il fallback per i
   (pochi) browser senza color-mix(): degradano al colore piatto, mai a un
   valore rotto. */

:root {
  /* --- Palette negozio (sovrascritta a runtime da layout_header.php) ---
     Default piu' caldo/premium (ambra invece di arancio acceso) per un
     punto di partenza gia' elegante quando il negozio non ha ancora scelto
     una palette propria in mgz_shop_config. */
  --colore-primario: #14171c;
  --colore-secondario: #c1622a;
  --colore-sfondo: #ffffff;
  --colore-testo: #14171c;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Ruoli tipografici aggiuntivi, tutti system-stack:
     - display: titoli/hero/logo — grottesca bold, tracking stretto, il
       carattere "moderno pulito" del sito.
     - titoli: serif da editoria — riservato ad accenti (capolettera,
       sottotitolo blog), MAI ai titoli di sezione (quelli usano display).
     - mono: prezzi e dati tecnici (formato, catalogo) — tabulare, da
       e-commerce.
     - badge: rounded system font per chip/badge, un registro piu' morbido
       che spezza la rigidita' del display sulle etichette piccole. */
  --font-display: -apple-system, 'Segoe UI Semibold', 'Helvetica Neue', Arial, sans-serif;
  --font-titoli: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --font-badge: ui-rounded, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Tonalita' derivate dalla palette del negozio: mai colori piatti fissi
     per superfici/bordi/testo secondario, cosi' il design si adatta a
     qualsiasi combinazione scelta dal negoziante. */
  --primario-scuro: color-mix(in srgb, var(--colore-primario) 80%, black);
  --primario-ombra: color-mix(in srgb, var(--colore-primario) 88%, black);
  --secondario-scuro: color-mix(in srgb, var(--colore-secondario) 65%, black);
  --secondario-tenue: color-mix(in srgb, var(--colore-secondario) 12%, var(--colore-sfondo));
  --superficie: color-mix(in srgb, var(--colore-sfondo) 97%, var(--colore-testo));
  --superficie-alt: color-mix(in srgb, var(--colore-sfondo) 93%, var(--colore-testo));
  --bordo: color-mix(in srgb, var(--colore-testo) 10%, var(--colore-sfondo));
  --bordo-forte: color-mix(in srgb, var(--colore-testo) 22%, var(--colore-sfondo));
  --testo-tenue: color-mix(in srgb, var(--colore-testo) 62%, var(--colore-sfondo));

  /* Colori di stato: fissi e indipendenti dal brand del negozio (come il
     rosso di un cartellino sconto in qualunque negozio), non dalla palette. */
  --colore-sconto: #d0271d;
  --colore-esito-ok: #1e7e34;
  --colore-esito-errore: #d0271d;

  /* Scala di spaziatura (base 4px) usata ovunque al posto di numeri sparsi. */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2.25rem;
  --sp-7: 3.5rem;
  --sp-8: 5rem;

  --raggio-sm: .5rem;
  --raggio: .875rem;
  --raggio-lg: 1.25rem;
  --raggio-pill: 999px;
  --ombra-carta: 0 1px 2px rgba(20,20,20,.04), 0 16px 32px -20px rgba(20,20,20,.18);
  --ombra-carta-hover: 0 2px 4px rgba(20,20,20,.06), 0 22px 40px -18px rgba(20,20,20,.26);
  --transizione: .16s ease;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  line-height: 1.55;
  font-size: 1rem;
  overflow-x: hidden;
}

.sito-header, .sito-main, .sito-footer {
  position: relative;
  z-index: 1;
}

a {
  color: var(--primario-scuro, var(--colore-primario));
}

a:hover {
  color: var(--secondario-scuro, var(--colore-secondario));
}

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

:focus-visible {
  outline: 3px solid var(--colore-secondario);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
}

/* --- Header / nav --- */

.sito-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--colore-sfondo) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--bordo);
}

.header-interno {
  max-width: 82rem;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.logo {
  color: var(--colore-testo);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.logo:hover {
  color: var(--colore-testo);
  opacity: .8;
}

.logo img {
  max-height: 2.25rem;
}

.nav-principale {
  flex: 1;
}

.nav-principale ul {
  list-style: none;
  display: flex;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
}

.nav-principale a {
  position: relative;
  display: inline-block;
  color: var(--colore-testo);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
  padding-bottom: .2rem;
}

.nav-principale a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--colore-secondario);
  transition: right var(--transizione);
}

.nav-principale a:hover,
.nav-principale a:focus-visible {
  color: var(--colore-testo);
}

.nav-principale a:hover::after,
.nav-principale a:focus-visible::after {
  right: 0;
}

.header-cerca {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pill);
  padding: .3rem .3rem .3rem var(--sp-4);
  transition: border-color var(--transizione), box-shadow var(--transizione);
}

.header-cerca:focus-within {
  border-color: var(--colore-secondario);
  box-shadow: 0 0 0 3px var(--secondario-tenue);
}

.header-cerca input {
  border: none;
  background: none;
  font: inherit;
  font-size: .9rem;
  color: var(--colore-testo);
  width: 11rem;
  padding: .3rem 0;
}

.header-cerca input:focus {
  outline: none;
}

.header-cerca button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: none;
  border-radius: 50%;
  background: var(--primario-ombra, var(--colore-primario));
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--transizione), background var(--transizione);
}

.header-cerca button:hover {
  background: var(--colore-secondario);
  transform: scale(1.05);
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid transparent;
  color: var(--colore-testo);
  font-size: 1.4rem;
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--raggio-sm);
  cursor: pointer;
}

.menu-toggle:hover {
  border-color: var(--bordo-forte);
}

@media (max-width: 56rem) {
  .header-interno {
    flex-wrap: wrap;
  }
  .header-cerca {
    order: 3;
    flex-basis: 100%;
  }
  .header-cerca input {
    width: auto;
    flex: 1;
  }
  .menu-toggle {
    display: block;
    order: 2;
    margin-left: auto;
  }
  .nav-principale {
    order: 4;
    flex: none;
    display: none;
    width: 100%;
  }
  .nav-principale.aperto {
    display: block;
    margin-top: var(--sp-2);
  }
  .nav-principale ul {
    flex-direction: column;
    gap: 0;
    padding: var(--sp-2) 0 0;
    border-top: 1px solid var(--bordo);
  }
  .nav-principale a {
    display: block;
    padding: var(--sp-3) 0;
  }
  .nav-principale a::after {
    display: none;
  }
}

/* --- Main / blocchi --- */

.sito-main {
  max-width: 82rem;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-8);
  min-height: 50vh;
}

.blocco {
  margin-bottom: var(--sp-8);
}

.blocco:last-child {
  margin-bottom: 0;
}

/* Intestazione di sezione: kicker decorativo (trattino colore accento) sopra
   il titolo, nello stile editoriale "rivista" — nessun testo aggiuntivo,
   solo un segno grafico, cosi' regge con qualunque copy del negoziante.
   Copre h1/h2 in testa a qualunque .blocco (testo, prodotti, archivio,
   blog, cerca, contatti, 404, articolo blog); esclude l'hero e il titolo
   della scheda prodotto, che hanno gia' un trattamento dedicato. */
.blocco > h1,
.blocco > h2 {
  position: relative;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem);
  margin: 0 0 var(--sp-5);
}

.blocco > h1::before,
.blocco > h2::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 3px;
  border-radius: var(--raggio-pill);
  background: var(--colore-secondario);
  margin-bottom: var(--sp-3);
}

.messaggio-servizio, .messaggio-vuoto {
  padding: var(--sp-4);
  border: 1px dashed var(--bordo-forte);
  border-radius: var(--raggio-sm);
  color: var(--testo-tenue);
  font-family: var(--font-mono);
  font-size: .9rem;
}

/* --- Hero --- */

.blocco-hero .hero-immagine {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--primario-ombra, #141414);
  border-radius: var(--raggio-lg);
  min-height: 30rem;
  padding: var(--sp-8) var(--sp-7);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.blocco-hero .hero-immagine::before {
  /* Scrim fisso per leggibilita' del testo sopra un'immagine qualsiasi.
     ponytail: se l'immagine caricata dal negozio e' molto chiara proprio
     vicino al bordo inferiore il contrasto puo' calare un po' — limite
     noto di un approccio senza JS di analisi immagine, non vale la pena
     risolverlo con altro codice per un caso limite. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,10,12,.72) 0%, rgba(10,10,12,.18) 48%, rgba(10,10,12,.05) 100%);
}

.blocco-hero .hero-testo {
  position: relative;
  z-index: 1;
  max-width: 38rem;
  color: #fff;
}

.blocco-hero h1 {
  color: #fff;
  margin: 0 0 var(--sp-3);
  font-size: clamp(2.5rem, 1.7rem + 3vw, 4.2rem);
  line-height: .98;
}

.blocco-hero .hero-testo p {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: 1.2rem;
  max-width: 32rem;
  color: rgba(255,255,255,.9);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background: var(--colore-secondario);
  color: #fff;
  text-decoration: none;
  padding: .9rem 1.9rem;
  border: none;
  border-radius: var(--raggio-pill);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: transform var(--transizione), box-shadow var(--transizione);
}

.btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--ombra-carta-hover);
}

.btn:active {
  transform: translateY(0);
}

/* --- Galleria / immagine --- */

.blocco-immagine img,
.galleria-grid img {
  border-radius: var(--raggio);
  box-shadow: var(--ombra-carta);
}

.galleria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--sp-4);
}

.galleria-grid figure {
  margin: 0;
}

.didascalia, .galleria-grid figcaption {
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: .85rem;
  color: var(--testo-tenue);
  margin: var(--sp-2) 0 0;
  text-align: center;
}

/* --- Blocco testo (editoriale) --- */

.blocco-testo .corpo {
  max-width: 42rem;
  font-size: 1.05rem;
}

.blocco-testo .corpo p {
  margin: 0 0 var(--sp-4);
}

.blocco-testo .corpo > p:first-of-type::first-letter {
  font-family: var(--font-titoli);
  font-size: 3.1em;
  float: left;
  line-height: .82;
  padding: .04em .08em 0 0;
  color: var(--colore-secondario);
}

/* --- Prodotti / blog: griglia card --- */

.prodotti-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: var(--sp-4) var(--sp-4);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--sp-6);
}

.prodotto-card, .blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--colore-testo);
  background: var(--superficie);
  border-radius: var(--raggio);
  overflow: hidden;
  box-shadow: var(--ombra-carta);
  transition: transform var(--transizione), box-shadow var(--transizione);
}

.prodotto-card:hover, .blog-card:hover,
.prodotto-card:focus-visible, .blog-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--ombra-carta-hover);
}

.prodotto-media, .blog-card img {
  position: relative;
  overflow: hidden;
  background: var(--superficie-alt);
}

.prodotto-media {
  aspect-ratio: 1 / 1;
}

.prodotto-media img, .prodotto-media-vuota {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prodotto-media img {
  transition: transform .3s ease;
}

.prodotto-card:hover .prodotto-media img {
  transform: scale(1.06);
}

.blog-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.badge-formato, .badge-sconto {
  position: absolute;
  top: var(--sp-2);
  font-family: var(--font-badge);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .3rem .6rem;
  border-radius: var(--raggio-pill);
  line-height: 1;
}

.badge-formato {
  left: var(--sp-2);
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  backdrop-filter: blur(4px);
}

.badge-sconto {
  right: var(--sp-2);
  background: var(--colore-sconto);
  color: #fff;
}

.prodotto-corpo, .blog-card-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  flex: 1;
}

.blog-card-corpo {
  gap: var(--sp-2);
  padding: var(--sp-5);
}

.blog-card-corpo p {
  margin: 0;
  color: var(--testo-tenue);
  font-size: .92rem;
  line-height: 1.5;
}

.prodotto-card h3 {
  font-family: var(--font);
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: normal;
  margin: 0;
  line-height: 1.3;
}

.blog-card h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.25;
}

.prodotto-autore {
  margin: 0;
  color: var(--testo-tenue);
  font-size: .85rem;
}

.prodotto-prezzo {
  margin: var(--sp-2) 0 0;
  padding-top: var(--sp-3);
  margin-top: auto;
  border-top: 1px dashed var(--bordo);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
}

.prezzo-originale {
  text-decoration: line-through;
  color: var(--testo-tenue);
  font-weight: 400;
  margin-right: .35em;
}

.prezzo-scontato {
  color: var(--colore-sconto);
}

.non-disponibile {
  margin: var(--sp-1) 0 0;
  color: var(--colore-sconto);
  font-size: .82rem;
  font-weight: 600;
}

/* --- Link "indietro" (rimando editoriale, PDP/blog articolo) --- */

.link-indietro {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-bottom: var(--sp-5);
  color: var(--testo-tenue);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.link-indietro:hover {
  color: var(--colore-secondario);
}

/* --- Dettaglio prodotto --- */

.prodotto-dettaglio {
  display: grid;
  grid-template-columns: minmax(0, 24rem) 1fr;
  gap: var(--sp-7);
  align-items: start;
}

.prodotto-dettaglio img {
  border-radius: var(--raggio);
  box-shadow: var(--ombra-carta);
}

.prodotto-info h1 {
  margin-top: 0;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem);
}

.prodotto-info .prodotto-autore {
  font-size: 1.05rem;
  margin-bottom: var(--sp-2);
}

.scheda-tecnica {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
  font-size: .95rem;
}

.scheda-tecnica dt {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  color: var(--testo-tenue);
  align-self: baseline;
  padding-top: .2rem;
  white-space: nowrap;
}

.scheda-tecnica dd {
  margin: 0;
}

.prodotto-info .prodotto-prezzo {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  margin: var(--sp-2) 0 0;
  padding-top: 0;
}

.prodotto-info .non-disponibile {
  font-size: .95rem;
  margin-top: var(--sp-3);
}

@media (max-width: 40rem) {
  .prodotto-dettaglio {
    grid-template-columns: 1fr;
  }
}

/* --- Archivio: filtri a chip --- */

.filtri-archivio {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
}

.chip-gruppo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-badge);
  font-size: .85rem;
  font-weight: 600;
  color: var(--colore-testo);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  padding: .55rem 1.1rem;
  border-radius: var(--raggio-pill);
  transition: border-color var(--transizione), background var(--transizione), color var(--transizione), transform var(--transizione);
}

.chip:hover {
  border-color: var(--bordo-forte);
  color: var(--colore-testo);
  transform: translateY(-1px);
}

.chip-attivo, .chip-attivo:hover {
  background: var(--primario-ombra, var(--colore-primario));
  border-color: var(--primario-ombra, var(--colore-primario));
  color: #fff;
}

.paginazione {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 0;
}

.paginazione a {
  font-weight: 700;
  color: var(--colore-testo);
  text-decoration: none;
}

.paginazione a:hover {
  color: var(--colore-secondario);
}

/* --- Contatti --- */

.contatti-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
}

@media (max-width: 40rem) {
  .contatti-grid {
    grid-template-columns: 1fr;
  }
}

.contatti-info p {
  margin: 0 0 var(--sp-2);
}

.contatti-info h3 {
  font-size: 1.1rem;
  margin: var(--sp-5) 0 var(--sp-2);
}

.orari-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .9rem;
}

.orari-lista li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: .35rem 0;
  border-bottom: 1px dashed var(--bordo);
}

/* --- Form (contatti) --- */

.form-contatti {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 30rem;
}

.form-contatti label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--testo-tenue);
}

.form-contatti label input,
.form-contatti label textarea {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--colore-testo);
}

.form-contatti input,
.form-contatti textarea {
  font: inherit;
  padding: .65rem .8rem;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-sm);
  background: var(--superficie);
  color: var(--colore-testo);
  transition: border-color var(--transizione), box-shadow var(--transizione);
}

.form-contatti input:focus,
.form-contatti textarea:focus {
  outline: none;
  border-color: var(--colore-secondario);
  box-shadow: 0 0 0 3px var(--secondario-tenue);
}

.form-contatti textarea {
  min-height: 6rem;
  resize: vertical;
}

.form-contatti button {
  align-self: flex-start;
  background: var(--primario-ombra, var(--colore-primario));
  color: #fff;
  border: none;
  padding: .7rem 1.6rem;
  border-radius: var(--raggio-pill);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  transition: transform var(--transizione), box-shadow var(--transizione), background var(--transizione);
}

.form-contatti button:hover {
  background: var(--colore-secondario);
  transform: translateY(-2px);
  box-shadow: var(--ombra-carta);
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-esito {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--raggio-sm);
  font-weight: 600;
}

.form-esito-ok {
  background: color-mix(in srgb, var(--colore-esito-ok) 16%, var(--colore-sfondo));
  color: var(--colore-esito-ok);
}

.form-esito-errore {
  background: color-mix(in srgb, var(--colore-esito-errore) 16%, var(--colore-sfondo));
  color: var(--colore-esito-errore);
}

/* --- Footer --- */

.sito-footer {
  background: var(--primario-ombra, #141414);
  color: rgba(255,255,255,.82);
  margin-top: var(--sp-8);
}

.footer-interno {
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  justify-content: space-between;
}

.footer-interno p {
  margin: 0 0 var(--sp-1);
}

.footer-interno h4 {
  font-family: var(--font-display);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 var(--sp-3);
  color: #fff;
}

.footer-orari ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .85rem;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.footer-interno a {
  color: var(--colore-secondario);
  text-decoration: none;
  font-weight: 600;
}

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

.footer-powered {
  text-align: center;
  padding: var(--sp-3);
  margin: 0;
  font-size: .75rem;
  color: rgba(255,255,255,.5);
  border-top: 1px solid rgba(255,255,255,.1);
}

/* --- Blog articolo --- */

.blog-sottotitolo {
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--testo-tenue);
  margin: 0 0 var(--sp-3);
}

.blog-meta {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .78rem;
  color: var(--testo-tenue);
  margin: 0 0 var(--sp-5);
}

.blocco-blog-articolo h1 {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem);
}

.blocco-blog-articolo > img {
  border-radius: var(--raggio);
  box-shadow: var(--ombra-carta);
  margin-bottom: var(--sp-5);
}

/* --- 404 / errore in pagina --- */

.blocco-404 {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
}

.blocco-404 h1 {
  font-size: clamp(2rem, 1.6rem + 2vw, 3.5rem);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}