/*
Theme Name: Selezione.
Theme URI: https://selezioneshop.it/
Author: Tommaso Magnifico
Author URI: https://selezioneshop.it/chi-siamo/
Description: Tema a blocchi (FSE) di Selezione. — porta 1:1 il design system del sito statico su WordPress, con editing a blocchi Gutenberg per i contenuti. Nordico-minimal dark: nero, antracite, bianco sporco, cobalto.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.12.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: selezione
Tags: full-site-editing, block-patterns, blog, dark, one-column, custom-colors, custom-menu
*/

/* ==========================================================================
   FONT — serviti dal sito, non da Google

   Erano tre richieste a fonts.googleapis.com nel <head>: partivano prima che
   il visitatore scegliesse sui cookie, e costavano due risoluzioni DNS piu'
   due handshake TLS nel momento peggiore del caricamento. Ora i file stanno
   in assets/fonts/, divisi per sottoinsieme: gli unicode-range sono quelli
   originali di Google, quindi latin-ext viene scaricato solo se nella pagina
   compare un carattere che lo richiede.

   DM Sans e' un variable font: un solo file copre 300-500, ed e' dichiarato
   con l'intervallo di pesi. Barlow Condensed arriva in istanze separate.

   Rigenerare con build-fonts.py se cambiano famiglie o pesi.
   ========================================================================== */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/dm-sans-300-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('assets/fonts/dm-sans-300-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/dm-serif-display-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/dm-serif-display-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/dm-serif-display-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/dm-serif-display-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Selezione. — Design system condiviso
   (Google Fonts caricati via <link> nell'<head> di ogni pagina, non qui)
   ========================================================================== */

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

/* ---------------------------------------------------------------------------
   PONTE DEI TOKEN — le variabili sono le stesse del sito statico, ma il valore
   arriva da theme.json (unica fonte di verità: palette, font e spaziature si
   cambiano lì e si propagano a CSS ed editor insieme).
   Il fallback dopo la virgola è il valore letterale originale: se theme.json
   non è caricato — succede in alcuni contesti dell'editor e nelle anteprime
   isolate — il colore resta comunque quello giusto.
   --------------------------------------------------------------------------- */
:root {
  --black: var(--wp--preset--color--black, #000000);
  --black2: var(--wp--preset--color--black-2, #0d0d0d);
  --black3: var(--wp--preset--color--black-3, #141414);
  --anthracite: var(--wp--preset--color--anthracite, #2C2C2C);
  --offwhite: var(--wp--preset--color--offwhite, #F9F9F9);
  --cobalt: var(--wp--preset--color--cobalt, #2E5BFF);
  /* Il cobalto di marca su nero sta a 4,06:1: va bene per i titoli (testo
     grande) ma non per link e label. Questa è la sua versione schiarita, da
     usare SOLO sul testo piccolo. Sui fondi del sito sta sopra il 5:1. */
  --cobalt-text: var(--wp--preset--color--cobalt-text, #5C82FF);
  /* Grigi testo. Erano tarati sul nero puro (4,6:1) ma scendevano a 4,1:1
     sui fondi --black2 e --black3, dove sta metà delle sezioni. Alzati
     finché non superano il 4.5:1 anche su --black3, il più chiaro dei tre. */
  --muted: var(--wp--preset--color--muted, #8C8C8C);
  --muted2: var(--wp--preset--color--muted-2, #909090);
  --border: var(--wp--preset--color--border, #1e1e1e);
  --img-bg: var(--wp--preset--color--img-bg, #111);
  /* Il rosso degli errori del modulo. Non è un colore di marca e non sta in
     theme.json di proposito: non deve finire fra i colori selezionabili
     nell'editor, esiste solo per dire "qui manca qualcosa". Su --black2 sta
     a 5,3:1. */
  --error: #ff5c5c;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--black);
  color: var(--offwhite);
  overflow-x: hidden;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, label:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cobalt); outline-offset: 3px;
}

/* Utility: nascosto visivamente ma accessibile agli screen reader */
.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;
}

/* NAV
   `nav:where(#nav)` e non `nav`. Il selettore di tipo nudo colpiva OGNI <nav>
   della pagina, e in fondo al footer ce n'è un secondo — `<nav class="footer-nav">`,
   la riga di link legali/menu. Quel secondo nav ereditava `position: fixed;
   top: 0`, `z-index: 100`, il fondo velato e `justify-content: space-between`,
   e siccome nel DOM viene dopo, si disegnava SOPRA la testata vera: una barra
   nera senza logo con le sei voci sparate da bordo a bordo, che copriva la
   testata scelta e ne lasciava spuntare da sotto solo l'indicatore cobalto.
   `.footer-nav` non ripristinava `position`, quindi il difetto era invisibile
   nel CSS del footer: nasceva qui.

   `:where()` invece di scrivere `#nav`: `:where()` non conta nel calcolo
   della specificità, quindi la regola resta a (0,0,1) esattamente come il
   `nav` di prima. È l'unica forma che restringe il bersaglio SENZA alzare il
   peso: con `nav#nav` la regola salirebbe a (1,0,1) e batterebbe tutte le
   varianti `.nav--*`, che stanno a (0,1,0) — la testata tornerebbe velata
   qualunque cosa scelga l'utente. */
nav:where(#nav) {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  /* Altezza unica: prima la barra partiva a 1.6rem di padding e si stringeva a
     1.1rem allo scroll, quindi cambiava dimensione sotto le dita. Resta la
     forma compatta, la sola differenza allo scroll è l'ombra. */
  padding: 1.1rem 6%;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s ease;
}
nav:where(#nav).scrolled { box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.logo {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem; letter-spacing: -0.5px;
  color: var(--offwhite); z-index: 102; text-decoration: none;
}
.logo span { color: var(--cobalt); }

/* Logo come immagine — Aspetto › Testata.
   `--logo-h` la stampa inc/testata.php in coda a questo foglio, e vale solo
   se un logo è stato caricato; il 26px qui è il valore di riserva.

   `line-height: 0` e `display: flex` tolgono lo spazio che l'interlinea del
   testo lascerebbe sotto l'immagine: senza, il logo si siede alto rispetto
   alle voci di menu, ed è il difetto che si nota di più perché la barra è
   bassa. `width: auto` con l'altezza fissa lascia decidere le proporzioni al
   file, così un marchio largo e uno stretto restano entrambi corretti.

   Il `max-width` è la rete per il mobile: un logo molto orizzontale, a 26px
   di altezza, arriverebbe comunque sotto l'hamburger su uno schermo stretto.
   Lì l'altezza cede e l'immagine si rimpicciolisce, che è meglio di due
   elementi sovrapposti. */
.logo--immagine {
  display: flex;
  align-items: center;
  line-height: 0;
}
.logo-img {
  display: block;
  height: var(--logo-h, 26px);
  width: auto;
  max-width: min(52vw, 280px);
  object-fit: contain;
}
@media (max-width: 900px) {
  .logo-img { height: calc(var(--logo-h, 26px) * 0.86); }
}

.nav-links { list-style: none; display: flex; gap: 2.5rem; }
.nav-links a {
  font-family: 'Barlow Condensed', sans-serif;
  text-decoration: none; color: var(--muted);
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; transition: color 0.2s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 1px; background: var(--cobalt); transition: width 0.25s ease;
}
.nav-links a:hover { color: var(--offwhite); }
.nav-links a:hover::after { width: 100%; }
/* Pagina corrente: cobalto + filo sotto, così si vede dove ci si trova.
   È --cobalt-text e non --cobalt perché qui il testo è piccolo (0.86rem) e
   il cobalto pieno su nero non arriva a 4.5:1. */
.nav-links a[aria-current="page"] { color: var(--cobalt-text); }
.nav-links a[aria-current="page"]::after { width: 100%; }
.nav-links a[aria-current="page"]:hover { color: var(--cobalt-text); }

/* --------------------------------------------------------------------------
   TESTATA — variante "Banda"
   Si sceglie da Aspetto › Testata (`inc/testata.php`), oppure sul singolo
   blocco «Barra di navigazione» per forzarla. Stessa impalcatura della testata
   classica — logo a sinistra, voci a destra, hamburger sotto i 900px — con tre
   differenze volute.

   1. Banda piena invece della velatura. La classica è `rgba(0,0,0,0.88)` con
      `backdrop-filter: blur(16px)`: sopra le immagini il contenuto si
      intravede e il filo inferiore si confonde. Qui il fondo è nero pieno,
      così la testata resta un elemento a sé e il logo non compete mai con ciò
      che scorre sotto.

   2. Altezza fissa invece di padding verticale. Col padding l'altezza la
      decide l'elemento più alto — il logo, che ha una scatola di 33px contro i
      17px delle voci — e le voci risultano otticamente basse: è esattamente il
      difetto di allineamento della testata presa a riferimento. Con `height` +
      `align-items: center` logo e voci sono centrati sullo stesso asse
      qualunque sia la loro altezza.

   3. Indicatore a scheda. Il filo della pagina corrente passa da 1px a 2px e
      si apre dal centro invece che da sinistra. Sotto i 900px sparisce con le
      voci, quindi non serve una versione mobile: lì la pagina corrente resta
      segnata dal colore nel pannello a scomparsa.
   -------------------------------------------------------------------------- */
.nav--banda {
  --nav-h: 72px;
  height: var(--nav-h);
  padding: 0 6%;
  background: var(--black);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* `line-height: 1` fa combaciare la scatola del testo con i glifi. Senza,
   l'interlinea di default aggiunge spazio sopra e sotto in misura diversa per
   il serif del logo e per il condensed delle voci, e i due centri ottici non
   coincidono più — che è il problema che questa variante deve risolvere. */
.nav--banda .logo { line-height: 1; }

.nav--banda .nav-links { align-items: center; gap: 2.75rem; }

.nav--banda .nav-links a {
  display: block;
  line-height: 1;
  /* È il padding a staccare l'indicatore dal testo. Essendo simmetrico non
     sposta il testo rispetto al centro della banda: se qui si mettesse solo
     `padding-bottom`, le voci tornerebbero a sedersi alte. */
  padding-block: 0.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
}

/* L'indicatore scende al bordo inferiore del box e si apre dal centro.
   `width` continua ad arrivare dalle regole della testata classica — 0 a
   riposo, 100% su hover e sulla pagina corrente — quindi qui non va ripetuto. */
.nav--banda .nav-links a::after {
  left: 50%;
  bottom: 0;
  height: 2px;
  transform: translateX(-50%);
  transition: width 0.28s cubic-bezier(.4,0,.2,1);
}

/* Allo scroll cambia solo l'ombra: la banda non si restringe, per non far
   ballare il contenuto sotto le dita. Stessa scelta della testata classica. */
.nav--banda.scrolled { box-shadow: 0 10px 40px rgba(0,0,0,0.55); }

@media (max-width: 900px) {
  /* Restano logo e hamburger: la banda si abbassa di conseguenza. */
  .nav--banda { --nav-h: 62px; }
}


/* --------------------------------------------------------------------------
   TESTATA — variante "Centro"
   Logo al centro, voci a sinistra, hamburger a destra. È l'unica delle
   varianti che cambia la disposizione invece dell'aspetto della barra, e lo
   fa senza toccare il markup: `display: grid` con tre colonne e `order` sui
   tre figli del `<nav>`, che nell'HTML restano nell'ordine logo → voci →
   hamburger.

   1. `minmax(0, 1fr)` sulle due colonne laterali e non `1fr`: `1fr` è
      `minmax(auto, 1fr)`, quindi una `<ul>` più larga dello spazio previsto
      allargherebbe la sua colonna e il logo uscirebbe dal centro. Con
      `minmax(0, 1fr)` le due colonne restano identiche e il logo è centrato
      per costruzione.

   2. Sotto i 900px le voci spariscono e la colonna di sinistra resta vuota:
      il logo resta centrato da solo, che è il comportamento voluto.

   3. L'indicatore della pagina corrente sta SOPRA la voce, non sotto. È il
      filo di 1px della testata classica ribaltato: qui sotto le voci non c'è
      il bordo della barra che lo raccoglie — c'è il vuoto della griglia — e
      un filo appeso in basso resterebbe orfano.
   -------------------------------------------------------------------------- */
.nav--centro {
  --nav-h: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: var(--nav-h);
  padding: 0 6%;
  background: var(--black);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav--centro .logo {
  order: 2; justify-self: center;
  line-height: 1; font-size: 1.6rem;
}
.nav--centro .nav-links { order: 1; justify-self: start; align-items: center; gap: 1.9rem; }
.nav--centro .nav-toggle { order: 3; justify-self: end; }
.nav--centro .nav-links a {
  display: block; line-height: 1;
  padding-block: 0.55rem;
  font-size: 0.78rem; letter-spacing: 0.16em;
}
.nav--centro .nav-links a::after { top: 0; bottom: auto; height: 1px; }

/* Fra i 900 e i 1150px le voci ci stanno ancora ma sono strette: si accorcia
   la spaziatura prima che la colonna di sinistra spinga via il logo. */
@media (max-width: 1150px) {
  .nav--centro .nav-links { gap: 1.15rem; }
  .nav--centro .nav-links a { font-size: 0.73rem; letter-spacing: 0.1em; }
}
@media (max-width: 900px) {
  .nav--centro { --nav-h: 64px; }
  .nav--centro .logo { font-size: 1.45rem; }
}

/* --------------------------------------------------------------------------
   TESTATA — variante "Isola"
   La barra si stacca dai bordi e diventa una pastiglia sospesa sul contenuto,
   in vetro smerigliato. È la variante che cambia la forma della testata.

   1. Il `<nav>` resta `position: fixed`: cambiano solo `top`, `left` e
      `right`, quindi il resto del sito non si accorge di niente. Il margine
      dal bordo è volutamente piccolo (1rem in alto), così la pastiglia non
      ruba altezza utile alla hero.

   2. L'indicatore non è un filo ma la pastiglia stessa: su una barra tutta
      raggi di curvatura un trattino dritto sotto il testo stona, e con le
      voci già dentro un contenitore arrotondato la forma naturale
      dell'evidenza è un'altra pastiglia più piccola. `content: none` spegne
      il filo ereditato dalla testata classica.

   3. La regola con `nav#nav` per la barra di amministrazione non è
      pignoleria: `body.admin-bar nav#nav` (in fondo a questo foglio) contiene
      un id e batte qualunque selettore di sole classi. Senza ripetere l'id
      qui, da loggati la pastiglia perderebbe il suo margine dal bordo.
   -------------------------------------------------------------------------- */
.nav--isola {
  --nav-h: 64px;
  top: 1rem; left: 4%; right: 4%;
  height: var(--nav-h);
  padding: 0 0.9rem 0 1.6rem;
  background: rgba(13, 13, 13, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.nav--isola.scrolled {
  background: rgba(13, 13, 13, 0.92);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
}
.nav--isola .logo { line-height: 1; margin-left: 0.3rem; }
.nav--isola .nav-links { align-items: center; gap: 0.3rem; }
.nav--isola .nav-links a {
  display: block; line-height: 1;
  padding: 0.62rem 0.95rem;
  border-radius: 999px;
  font-size: 0.78rem; letter-spacing: 0.13em;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.nav--isola .nav-links a::after { content: none; }
.nav--isola .nav-links a:hover { background: rgba(255, 255, 255, 0.07); }
.nav--isola .nav-links a[aria-current="page"],
.nav--isola .nav-links a[aria-current="page"]:hover {
  background: rgba(46, 91, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(46, 91, 255, 0.38);
}
body.admin-bar nav#nav.nav--isola { top: calc(var(--wp-admin--admin-bar--height, 32px) + 1rem); }
@media screen and (max-width: 782px) {
  body.admin-bar nav#nav.nav--isola { top: calc(46px + 0.6rem); }
}
@media (max-width: 900px) {
  .nav--isola {
    --nav-h: 58px;
    top: 0.6rem; left: 3%; right: 3%;
    padding: 0 0.8rem 0 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   TESTATA — variante "Velo"
   In cima alla pagina la barra non c'è: nessun fondo, nessun bordo, nessuna
   sfocatura. Logo e voci galleggiano sulla hero, e la barra si materializza
   solo quando si scorre. È la variante che cambia il comportamento.

   1. Si aggancia a `.scrolled`, la classe che `assets/js/main.js` mette e
      toglie sul `<nav>` oltre i 20px di scroll — la stessa che nelle altre
      varianti accende solo l'ombra. Senza JavaScript la barra resta
      trasparente: sul nero del sito il testo si legge comunque, quindi il
      ripiego è accettabile.

   2. L'altezza NON cambia fra i due stati, per la stessa ragione per cui la
      testata classica non si restringe più allo scroll: far ballare la barra
      sotto le dita sposta il bersaglio dei link mentre li si sta puntando.
      Cambiano solo fondo e bordo.

   3. L'indicatore è un punto e non un filo — lo stesso punto del logo e della
      favicon. Senza il bordo della barra a chiuderlo, un filo lungo quanto la
      parola resterebbe sospeso nel vuoto; un punto no.
   -------------------------------------------------------------------------- */
.nav--velo {
  --nav-h: 84px;
  height: var(--nav-h);
  padding: 0 6%;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.3s ease;
}
.nav--velo.scrolled {
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
}
.nav--velo .logo { line-height: 1; font-size: 1.6rem; }
.nav--velo .nav-links { align-items: center; gap: 2.9rem; }
.nav--velo .nav-links a {
  display: block; line-height: 1;
  padding-block: 0.7rem;
  font-size: 0.8rem; letter-spacing: 0.2em;
}
.nav--velo .nav-links a::after {
  left: 50%; bottom: 0;
  width: 0; height: 5px;
  border-radius: 50%;
  transform: translateX(-50%);
  transition: width 0.22s ease;
}
/* `width: 100%` arriva dalle regole della testata classica e qui allungherebbe
   il punto in una barretta: va rimesso alla misura del cerchio. */
.nav--velo .nav-links a:hover::after,
.nav--velo .nav-links a[aria-current="page"]::after { width: 5px; }

@media (max-width: 900px) {
  .nav--velo { --nav-h: 68px; }
  .nav--velo .logo { font-size: 1.45rem; }
}
/* Hamburger */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  /* 44px e' la misura minima consigliata per un bersaglio da toccare: le tre
     barrette restano a 24px, allineate a destra da margin-left:auto. */
  width: 44px; height: 44px; align-items: flex-end; background: none; border: none; cursor: pointer;
  z-index: 102; padding: 0;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--offwhite);
  transition: transform 0.3s ease, opacity 0.2s ease; margin-left: auto;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
  width: min(80vw, 320px);
  background: var(--black2); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center; gap: 0.5rem;
  padding: 2rem 2.5rem;
  transform: translateX(100%);
  /* visibility: hidden toglie i link dall'ordine di tabulazione quando il menu è chiuso */
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), visibility 0.35s;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
.mobile-menu a {
  text-decoration: none; color: var(--muted2);
  font-family: 'DM Serif Display', serif; font-size: 1.5rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--border); transition: color 0.2s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--offwhite); }
.mobile-menu a[aria-current="page"], .mobile-menu a[aria-current="page"]:hover { color: var(--cobalt-text); }
.menu-backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu-backdrop.open { opacity: 1; visibility: visible; }

/* SCROLL REVEAL */
/* L'animazione d'ingresso parte da invisibile, quindi dipende dal JavaScript
   che aggiunge .visible quando l'elemento entra nello schermo. Se main.js non
   arriva (rete, estensione, errore altrove nel file) il contenuto resterebbe
   nascosto senza alcun segnale. La classe .js-reveal la mette main.js come
   prima istruzione: senza di lei questa regola non si applica e il contenuto
   si vede, semplicemente senza animazione.
   Le animazioni di .hero-left e .page-hero non hanno questo problema: sono
   @keyframes CSS con `forwards`, girano anche senza JavaScript. */
.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* HERO (home) */
.hero {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
  padding-top: 5rem;
}
.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem 5% 6rem 6%;
}
.hero-left > * { opacity: 0; transform: translateY(22px); animation: heroIn 0.8s cubic-bezier(.2,.6,.2,1) forwards; }
.hero-eyebrow { animation-delay: 0.1s; }
.hero h1 { animation-delay: 0.22s; }
.hero-desc { animation-delay: 0.34s; }
.hero-actions { animation-delay: 0.46s; }
.hero-explore { animation-delay: 0.56s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

.hero-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cobalt-text); font-weight: 600; margin-bottom: 2rem;
}
.hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(3rem, 5vw, 5.5rem);
  line-height: 1.05; letter-spacing: -1px;
  color: var(--offwhite); margin-bottom: 2rem;
}
.hero h1 em { font-style: italic; color: var(--cobalt); }
.hero-desc {
  font-size: 1rem; color: var(--muted2); line-height: 1.8;
  max-width: 380px; font-weight: 300; margin-bottom: 2.5rem;
}
.hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.btn-main {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--offwhite); color: var(--black);
  padding: 0.85rem 1.8rem; border-radius: 2px;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.btn-main:hover { background: var(--cobalt); color: var(--offwhite); transform: translateY(-2px); }
/* min-height: porta il bottone a 44px anche quando il testo è su una riga sola. */
.btn-main, .btn-secondary { min-height: 44px; }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: transparent; color: var(--offwhite);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 0.85rem 1.8rem; border-radius: 2px;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.btn-secondary:hover { border-color: var(--cobalt); color: #7a9fff; transform: translateY(-2px); }
.hero-explore {
  display: inline-block; margin-top: 1.6rem;
  font-size: 0.8rem; color: var(--muted); text-decoration: none;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); padding-bottom: 2px; width: fit-content;
  transition: color 0.2s, border-color 0.2s;
}
.hero-explore:hover { color: var(--offwhite); border-color: var(--muted); }

.hero-right {
  background: var(--img-bg);
  border-left: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.hero-right::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 70% 30%, rgba(46,91,255,0.14), transparent 60%);
}
.img-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.5rem;
  color: #2a2a2a; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.img-placeholder svg { opacity: 0.6; }

/* PAGE HERO (pagine interne) */
.page-hero { padding: 11rem 6% 5rem; border-bottom: 1px solid var(--border); }
.page-hero > * { opacity: 0; transform: translateY(22px); animation: heroIn 0.8s cubic-bezier(.2,.6,.2,1) forwards; }
.page-hero .label { animation-delay: 0.1s; }
.page-hero h1 { animation-delay: 0.22s; }
.page-hero p { animation-delay: 0.34s; }
.page-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  letter-spacing: -1px; line-height: 1.1;
  color: var(--offwhite); margin-bottom: 1.5rem;
}
.page-hero h1 em { font-style: italic; color: var(--cobalt); }
.page-hero p {
  font-size: 1rem; color: var(--muted2); font-weight: 300;
  line-height: 1.8; max-width: 520px;
}
/* Variante per frasi brevi che devono stare su una riga sola */
.page-hero p.lead-wide { max-width: 760px; }

/* PROVA SOCIALE eBAY */
.ebay-proof { padding: 0 6%; background: var(--black2); border-top: 1px solid var(--border); }
.ebay-proof-inner, .ebay-proof-inline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2.5rem;
  text-decoration: none; color: var(--offwhite);
  padding: 1.6rem 0; transition: color 0.2s;
}
.ebay-proof-inline {
  padding: 1.2rem 1.4rem; margin-bottom: 1.8rem; gap: 1.8rem;
  background: var(--black2); border: 1px solid var(--border);
}
.ebay-proof-stat { display: flex; flex-direction: column; gap: 0.25rem; }
.ebay-proof-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em; color: var(--offwhite); line-height: 1;
}
.ebay-proof-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.ebay-proof-cta {
  margin-left: auto;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border); padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.ebay-proof-inner:hover .ebay-proof-cta, .ebay-proof-inline:hover .ebay-proof-cta { color: var(--cobalt); border-color: var(--cobalt); }
@media(max-width: 560px) {
  .ebay-proof-inner, .ebay-proof-inline { gap: 1.2rem; }
  .ebay-proof-cta { margin-left: 0; width: 100%; }
}

/* DIVIDER (marquee) */
.divider {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden; position: relative;
}
.divider-track {
  display: flex; align-items: center; gap: 3rem;
  padding: 1.8rem 1.5rem; white-space: nowrap; width: max-content;
  animation: marquee 30s linear infinite;
}
.divider:hover .divider-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.divider-item { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; }
.divider-item span { font-family: 'Barlow Condensed', sans-serif; }
.divider-item span:first-child { font-size: 0.76rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cobalt-text); font-weight: 600; }
.divider-item span:last-child { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.divider-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); flex-shrink: 0; }

/* ABOUT */
.about { display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; }
.about-img {
  background: var(--img-bg);
  border-right: 1px solid var(--border);
  position: relative; overflow: hidden; min-height: 500px;
}
.about-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 6%;
  border-top: 1px solid var(--border);
}
.label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cobalt-text); margin-bottom: 1.5rem; font-weight: 600;
}
.about-content h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 1.5rem; color: var(--offwhite);
}
.about-content h2 em { font-style: italic; color: var(--cobalt); }
.about-content > p {
  font-size: 0.95rem; color: var(--muted2); line-height: 1.9;
  font-weight: 300; max-width: 440px; margin-bottom: 2.5rem;
}
.about-list { display: flex; flex-direction: column; gap: 1rem; }
.about-item {
  display: flex; align-items: flex-start; gap: 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.about-item:last-child { border-bottom: none; }
.about-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.76rem; color: var(--cobalt-text); font-weight: 600; letter-spacing: 0.1em; padding-top: 2px; flex-shrink: 0;
}
.about-item h3 { font-size: 0.88rem; font-weight: 500; color: var(--offwhite); margin-bottom: 0.2rem; }
.about-item p { font-size: 0.8rem; color: var(--muted2); margin: 0; line-height: 1.6; }
.about-content .hero-explore { margin-top: 2rem; }

/* CATEGORIE */
.categories { padding: 6rem 6%; background: var(--black2); border-top: 1px solid var(--border); }
.categories h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--offwhite); letter-spacing: -0.5px; margin-bottom: 4rem;
}
.cat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
}
/* La card diventa un <a> quando il blocco ha una destinazione (vedi
   blocks/category-card/render.php): va rimesso a posto cio' che il browser
   aggiunge ai link, senza cambiare nulla per le card che restano <div>. */
.cat-card { background: var(--black2); transition: background 0.25s; }
a.cat-card { display: block; text-decoration: none; color: inherit; }
a.cat-card:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.cat-card:nth-child(2) { transition-delay: 0.08s; }
.cat-card:nth-child(3) { transition-delay: 0.16s; }
.cat-card:nth-child(4) { transition-delay: 0.24s; }
.cat-card:hover { background: var(--black3); }
.cat-tile { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--img-bg); }
/* <picture> è inline: senza questo l'immagine perde height:100% */
.cat-tile picture { display: block; width: 100%; height: 100%; }
.cat-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.cat-card:hover .cat-photo { transform: scale(1.04); }
/* Segnaposto mostrato solo se l'immagine non carica: l'onerror sull'<img>
   rimette display:flex inline. Di default resta nascosto, altrimenti si
   sovrappone alla foto (position:absolute + inset:0). */
.cat-empty { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--muted); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }
.cat-empty svg { opacity: 0.6; }
.cat-info { padding: 1.4rem 1.2rem; }
.cat-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.71rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cobalt-text); margin-bottom: 0.5rem; font-weight: 600;
}
.cat-card h3 { font-family: 'DM Serif Display', serif; font-size: 1.1rem; color: var(--offwhite); margin-bottom: 0.4rem; }
.cat-card p { font-size: 0.78rem; color: var(--muted2); line-height: 1.5; font-weight: 300; }

/* CANALI */
.channels { padding: 6rem 6%; border-top: 1px solid var(--border); }
.channels-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 3rem; gap: 2rem; flex-wrap: wrap;
}
.channels-top h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 3.5vw, 3rem); letter-spacing: -0.5px; color: var(--offwhite);
}
.channels-top p { font-size: 0.9rem; color: var(--muted2); line-height: 1.8; max-width: 380px; font-weight: 300; }
/* `minmax(0, 1fr)` e non `1fr`, qui e sulla scheda.
   La larghezza minima di una traccia di griglia è per difetto il min-content
   di quello che contiene, e `aspect-ratio: 1` sulla copertina lega quel
   min-content all'ALTEZZA della scheda — altezza che decide il testo nella
   colonna accanto. La scheda finiva così larga 826px fissi, qualunque fosse
   lo spazio disponibile: usciva dalla sezione, tagliava a metà il testo della
   seconda scheda e apriva una barra di scorrimento orizzontale su tutta la
   pagina. Sembrava capitare a caso perché l'altezza da cui parte il conto
   cambia con il carattere davvero in uso nell'istante del calcolo: Google
   Fonts è caricato con `display=swap`, quindi prima c'è il ripiego di sistema
   e poi DM Sans, e le due misure non coincidono.
   Con `minmax(0, …)` le tracce possono rimpicciolire e la scheda torna a
   misurarsi sullo spazio che ha. Il `min-width: 0` sui due figli è la stessa
   cosa detta dal lato di chi ci sta dentro: senza, il testo lungo li
   rigonfierebbe di nuovo. */
.channels-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.channel-card {
  background: var(--black);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  text-decoration: none; color: var(--offwhite); transition: background 0.2s;
}
.channel-card:nth-child(2) { transition-delay: 0.1s; }
.channel-card:hover { background: var(--black3); }
.channel-img, .channel-info { min-width: 0; }
.channel-img {
  aspect-ratio: 1; background: var(--img-bg);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.4rem;
  color: var(--muted); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  border-right: 1px solid var(--border);
}
.channel-img svg { opacity: 0.5; }
.channel-info {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2rem;
}
.ch-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.71rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cobalt-text); font-weight: 600;
}
.channel-info h3 { font-family: 'DM Serif Display', serif; font-size: 1.8rem; letter-spacing: -0.5px; margin: 0.8rem 0; color: var(--offwhite); }
.channel-info p { font-size: 0.82rem; color: var(--muted2); line-height: 1.7; font-weight: 300; }
.ch-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-top: 1.5rem;
  border-bottom: 1px solid var(--border); padding-bottom: 2px; width: fit-content;
  transition: color 0.2s, border-color 0.2s, gap 0.2s;
}
.channel-card:hover .ch-arrow { color: var(--cobalt); border-color: var(--cobalt); gap: 0.8rem; }
.channels-note {
  font-size: 0.85rem; color: var(--muted2); line-height: 1.8;
  font-weight: 300; max-width: 620px; margin-top: 2.5rem;
}

/* VENDI CONSOLE */
.sell { padding: 6rem 6%; background: var(--black2); border-top: 1px solid var(--border); }
.sell-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5rem; max-width: 1200px; margin: 0 auto; }
.sell-left { display: flex; flex-direction: column; justify-content: center; }
.sell-intro { margin-bottom: 2.2rem; }
.sell-intro h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.08;
  letter-spacing: -0.8px; color: var(--offwhite); margin-bottom: 1rem;
}
.sell-intro h1 em { font-style: italic; color: var(--cobalt); }
.sell-intro p {
  font-size: 0.95rem; color: var(--muted2); line-height: 1.9;
  font-weight: 300; max-width: 400px;
}
.sell-left h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1;
  letter-spacing: -0.5px; color: var(--offwhite); margin-bottom: 1.5rem;
}
.sell-left h2 em { font-style: italic; color: var(--cobalt); }
.sell-steps { display: flex; flex-direction: column; gap: 1rem; }
.sell-step { display: flex; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.sell-step:last-child { border-bottom: none; }
.sell-step-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.76rem; color: var(--cobalt-text); font-weight: 600; letter-spacing: 0.1em; padding-top: 2px; flex-shrink: 0;
}
.sell-step h3 { font-size: 0.88rem; font-weight: 500; color: var(--offwhite); margin-bottom: 0.2rem; }
.sell-step p { font-size: 0.8rem; color: var(--muted2); margin: 0; line-height: 1.6; }
.sell-note { font-size: 0.8rem; color: var(--muted2); line-height: 1.7; font-weight: 300; margin-top: 2rem; max-width: 420px; }
.sell-note a { color: var(--cobalt-text); text-decoration: none; }
.sell-note a:hover { text-decoration: underline; }


/* LOGISTICA (vendi.html) */
.sell-logistics { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.sell-logistics h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2; margin-bottom: 1rem;
}
.sell-logistics p {
  font-size: 0.85rem; color: var(--muted2); line-height: 1.8;
  font-weight: 300; max-width: 440px; margin-bottom: 0.9rem;
}
.sell-logistics p:last-child { margin-bottom: 0; }

.sell-form { background: var(--black); border: 1px solid var(--border); padding: 2.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted2); margin-bottom: 0.5rem;
}
.field input, .field select, .field textarea {
  background: var(--black2); border: 1px solid var(--border);
  color: var(--offwhite); padding: 0.8rem 0.9rem;
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem;
  border-radius: 2px; transition: border-color 0.2s; width: 100%;
}
/* L'esempio dentro la casella ("Mario Rossi", "330 1234567") è un aiuto, non
   un contenuto: sparisce appena si scrive. In pieno grigio testo si legge
   come un valore già inserito e disturba la lettura del modulo, così sta più
   indietro — abbastanza da distinguersi al volo dal testo vero. L'etichetta
   sopra la casella, che è l'informazione che conta, resta piena. */
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.55; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cobalt); }
.field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.2rem; }
.field select option { background: var(--black2); }
.field textarea { resize: vertical; min-height: 100px; }
.field input[type=file] { padding: 0.65rem 0.9rem; cursor: pointer; font-size: 0.8rem; color: var(--muted2); }
.field input[type=file]::file-selector-button {
  background: var(--anthracite); color: var(--offwhite); border: none;
  padding: 0.4rem 0.9rem; margin-right: 0.8rem; border-radius: 2px;
  font-family: 'DM Sans', sans-serif; font-size: 0.72rem; letter-spacing: 0.05em;
  text-transform: uppercase; cursor: pointer; transition: background 0.2s;
}
.field input[type=file]::file-selector-button:hover { background: var(--cobalt); }
/* La spiegazione sotto la casella è la voce meno importante del modulo:
   l'etichetta dice cosa, il campo si compila, il suggerimento serve solo a
   chi ha un dubbio. A 0.8rem pesava quanto il testo digitato; a 0.72 sta
   sotto anche l'etichetta e si legge come una nota. */
.field-hint { font-size: 0.72rem; color: var(--muted); margin-top: 0.45rem; line-height: 1.55; }

/* Honeypot: fuori schermo invece che display:none, perché una parte dei bot
   salta i campi dichiarati nascosti e l'esca non scatterebbe. */
.hp-field {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form-check { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1.4rem; }
.form-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--cobalt); flex-shrink: 0; cursor: pointer; }
.form-check label { font-size: 0.76rem; color: var(--muted2); line-height: 1.5; cursor: pointer; }
.form-check a { color: var(--cobalt-text); text-decoration: none; }
.form-check a:hover { text-decoration: underline; }

.form-submit {
  width: 100%; background: var(--offwhite); color: var(--black);
  border: none; padding: 0.95rem; border-radius: 2px;
  font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  transition: background 0.2s, color 0.2s; margin-top: 0.5rem;
}
.form-submit:hover { background: var(--cobalt); color: var(--offwhite); }
.form-submit:disabled { opacity: 0.5; cursor: default; }
.form-note { font-size: 0.72rem; color: var(--muted); margin-top: 1rem; line-height: 1.6; text-align: center; }
.form-error { font-size: 0.78rem; color: var(--error); margin-top: 0.9rem; text-align: center; line-height: 1.5; display: none; }
.form-error.show { display: block; }

/* IL CAMPO CHE MANCA
   Il riquadro qui sopra dice cosa manca, ma sta in fondo al modulo: da lì a
   capire *quale* casella risalire c'è di mezzo una rilettura di tutti i
   campi. La classe la mette js/form.js sul contenitore del campo colpevole
   (.field o .form-check), e si spegne da sola appena si mette mano a quel
   campo. Il colore non lavora da solo: il bordo cambia spessore percepito
   grazie al fondo acceso, e il messaggio del riquadro resta la spiegazione
   scritta — chi non distingue il rosso ha comunque tutte e due. */
.field.is-error label { color: var(--error); }
.field.is-error input,
.field.is-error select,
.field.is-error textarea {
  border-color: var(--error);
  background: rgba(255, 92, 92, 0.07);
}
/* Il focus non deve spegnere la segnalazione: chi clicca dentro il campo per
   correggerlo perderebbe l'unico riferimento visivo di dov'era l'errore. */
.field.is-error input:focus,
.field.is-error select:focus,
.field.is-error textarea:focus { border-color: var(--error); }
.field.is-error .field-hint { color: var(--error); }

/* Le due caselle di consenso non hanno etichetta sopra né bordo: la sezione
   si accende con un filo a sinistra e la spunta rossa. */
.form-check.is-error {
  border-left: 2px solid var(--error);
  padding-left: 0.7rem;
  margin-left: -0.9rem;
}
.form-check.is-error label { color: var(--error); }
.form-check.is-error input { accent-color: var(--error); outline: 2px solid var(--error); outline-offset: 2px; }
/* I tre passi in cima al pannello del form */
.form-steps { margin-bottom: 2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--border); }
.form-success { display: none; text-align: center; padding: 3rem 1rem; }
.form-success.show { display: block; }
.form-success:focus { outline: none; }
.form-success svg { color: var(--cobalt); margin-bottom: 1rem; }
.form-success h3 { font-family: 'DM Serif Display', serif; font-size: 1.5rem; color: var(--offwhite); margin-bottom: 0.8rem; }
.form-success p { font-size: 0.88rem; color: var(--muted2); line-height: 1.7; font-weight: 300; margin-bottom: 0.9rem; }
.form-success p:last-child { margin-bottom: 0; }
.form-success a { color: var(--cobalt-text); text-decoration: none; }
.form-success a:hover { text-decoration: underline; }
/* Codice di riferimento: grande e selezionabile.
   Selettori discendenti per battere `.form-success p` senza !important. */
.form-success .form-ref-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.71rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.4rem;
}
.form-success .form-ref {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.4rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1;
  color: var(--cobalt); user-select: all;
  margin-bottom: 1.6rem;
}

/* FAQ */
.faq { padding: 6rem 6%; border-top: 1px solid var(--border); }
.faq-head { margin-bottom: 3rem; }
.faq h2 { font-family: 'DM Serif Display', serif; font-size: clamp(2rem, 3.5vw, 3rem); color: var(--offwhite); letter-spacing: -0.5px; }
.faq-list { max-width: 840px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.5rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  font-family: 'DM Serif Display', serif; font-size: 1.1rem; color: var(--offwhite);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #7a9fff; }
.faq-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.25s ease; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--cobalt); }
.faq-icon::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.faq-icon::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 0 1.5rem; font-size: 0.9rem; color: var(--muted2); line-height: 1.8; font-weight: 300; max-width: 700px; }
.faq-item[open] .faq-answer { animation: faqFade 0.35s ease; }
@keyframes faqFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq-more { margin-top: 2.5rem; }

/* CTA BAND */
.cta-band {
  position: relative; overflow: hidden;
  padding: 5.5rem 6%; background: var(--black2); border-top: 1px solid var(--border);
  text-align: center;
}
/* Alone cobalto dietro il titolo: dà profondità senza occupare spazio */
.cta-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 120% at 50% 0%, rgba(46,91,255,0.15), transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.5px;
  color: var(--offwhite); margin-bottom: 1rem; text-wrap: balance;
}
.cta-band h2 em { font-style: italic; color: var(--cobalt); }
.cta-band p {
  font-size: 0.95rem; color: var(--muted2); font-weight: 300;
  max-width: 620px; margin: 0 auto 2rem; line-height: 1.8;
}
.cta-band .hero-actions { justify-content: center; }

/* LEGAL SECTIONS */
.legal-section { padding: 4.5rem 6%; border-bottom: 1px solid var(--border); scroll-margin-top: 5.5rem; }
.legal-section h2 {
  font-family: 'DM Serif Display', serif; font-size: 1.8rem;
  color: var(--offwhite); margin-bottom: 1.5rem;
}
.legal-body { max-width: 760px; }
.legal-body p { font-size: 0.85rem; color: var(--muted2); line-height: 1.8; font-weight: 300; margin-bottom: 1rem; }
.legal-body strong { color: var(--offwhite); font-weight: 500; }
.legal-body a { color: var(--cobalt-text); text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }
.legal-updated { padding: 3rem 6%; font-size: 0.78rem; color: var(--muted); }

/* Link contestuali dentro il corpo del testo */
.cta-band p a, .channels-note a, .about-content > p a, .faq-answer a {
  color: var(--cobalt-text); text-decoration: none;
}
.cta-band p a:hover, .channels-note a:hover, .about-content > p a:hover, .faq-answer a:hover {
  text-decoration: underline;
}

/* CONTATTI */
.contact-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.contact-card {
  background: var(--black2); padding: 2rem; text-decoration: none;
  display: flex; flex-direction: column; gap: 0.7rem;
  transition: background 0.2s;
}
.contact-card:hover { background: var(--black3); }
.contact-card-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.71rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cobalt-text); font-weight: 600;
}
.contact-card-value { font-family: 'DM Serif Display', serif; font-size: 1.15rem; color: var(--offwhite); word-break: break-word; }

/* ==========================================================================
   BLOG — indice (/blog/) e pagina articolo (/blog/<slug>/)
   Riusa palette, font e trame dei componenti esistenti: la griglia degli
   articoli è la stessa .cat-grid (celle separate da 1px di --border), i
   meta usano Barlow Condensed come .cat-tag / .ch-label.
   ========================================================================== */

/* Filtri per categoria (progressive enhancement: senza JS restano tutti visibili) */
.blog { padding: 6rem 6%; border-top: 1px solid var(--border); }
.blog-filters {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: 3rem;
}
/* Serve esplicitamente: il display:flex qui sopra batterebbe il display:none
   che il browser applica da solo all'attributo hidden. */
.blog-filters[hidden] { display: none; }
.blog-filter {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 2px;
  padding: 0.5rem 1.1rem; cursor: pointer; min-height: 44px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.blog-filter:hover { color: var(--offwhite); border-color: var(--muted); }
.blog-filter[aria-pressed="true"] { color: var(--offwhite); border-color: var(--cobalt); background: rgba(46,91,255,0.12); }

.blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.post-card {
  background: var(--black2); text-decoration: none; color: var(--offwhite);
  display: flex; flex-direction: column; transition: background 0.25s;
}
.post-card:hover { background: var(--black3); }
.post-tile { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--img-bg); }
.post-cover { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.post-card:hover .post-cover { transform: scale(1.04); }
.post-info { padding: 1.6rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-meta {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.71rem; letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 600; color: var(--cobalt-text); margin-bottom: 0.6rem;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.post-meta time { color: var(--muted); font-weight: 500; letter-spacing: 0.1em; }
.post-meta .post-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
/* Il titolo della card è un h2 nell'indice (sta sotto l'h1 della pagina) e un
   h3 tra i correlati (sta sotto l'h2 "Continua a leggere"): stesso aspetto. */
.post-card h2, .post-card h3 {
  font-family: 'DM Serif Display', serif; font-size: 1.25rem; line-height: 1.25;
  letter-spacing: -0.3px; color: var(--offwhite); margin-bottom: 0.6rem;
}
.post-excerpt { font-size: 0.82rem; color: var(--muted2); line-height: 1.7; font-weight: 300; margin-bottom: 1.4rem; }
.post-more {
  margin-top: auto;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border); padding-bottom: 2px; width: fit-content;
  transition: color 0.2s, border-color 0.2s;
}
.post-card:hover .post-more { color: var(--cobalt); border-color: var(--cobalt); }

/* "Carica altri": nascosto finché il JS non lo attiva, così senza JS non
   compare un bottone che non farebbe nulla. */
.blog-loadmore { display: none; margin-top: 2.5rem; text-align: center; }
.blog-loadmore.show { display: block; }
.blog-empty { display: none; margin-top: 2.5rem; font-size: 0.88rem; color: var(--muted2); font-weight: 300; }
.blog-empty.show { display: block; }

/* Briciole di pane */
.breadcrumb { padding: 8.5rem 6% 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.breadcrumb li {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.breadcrumb li + li::before { content: '/'; margin-right: 0.6rem; color: var(--border); }
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--offwhite); }
.breadcrumb [aria-current="page"] { color: var(--offwhite); }

/* Testata dell'articolo */
.article-hero { padding: 2.5rem 6% 3rem; }
.article-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.1; letter-spacing: -1px;
  color: var(--offwhite); margin-bottom: 1.2rem; max-width: 900px; text-wrap: balance;
}
.article-hero h1 em { font-style: italic; color: var(--cobalt); }
.article-standfirst { font-size: 1rem; color: var(--muted2); font-weight: 300; line-height: 1.8; max-width: 720px; }
.article-byline {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--border);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--muted); max-width: 720px;
}
.article-byline .author { color: var(--offwhite); font-weight: 600; }
.article-byline .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }

.article-cover { padding: 0 6%; }
.article-cover img {
  display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover;
  background: var(--img-bg); border: 1px solid var(--border);
}
.article-cover figcaption { font-size: 0.72rem; color: var(--muted); margin-top: 0.7rem; line-height: 1.6; }

/* Corpo dell'articolo */
.article-body { padding: 4rem 6% 5rem; max-width: 860px; }
.article-body h2 {
  font-family: 'DM Serif Display', serif; font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2; letter-spacing: -0.4px; color: var(--offwhite);
  margin: 3rem 0 1.1rem;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h2 em { font-style: italic; color: var(--cobalt); }
.article-body h3 {
  font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.01em; color: var(--offwhite); margin: 2rem 0 0.7rem;
}
.article-body p { font-size: 0.92rem; color: var(--muted2); line-height: 1.9; font-weight: 300; margin-bottom: 1.1rem; }
.article-body ul, .article-body ol { margin: 0 0 1.4rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.article-body li { font-size: 0.92rem; color: var(--muted2); line-height: 1.8; font-weight: 300; padding-left: 0.3rem; }
.article-body li::marker { color: var(--cobalt); }
.article-body strong { color: var(--offwhite); font-weight: 500; }
.article-body a { color: var(--cobalt-text); text-decoration: none; }
.article-body a:hover { text-decoration: underline; }
.article-body blockquote {
  border-left: 2px solid var(--cobalt); padding: 0.2rem 0 0.2rem 1.4rem;
  margin: 2rem 0; font-family: 'DM Serif Display', serif; font-style: italic;
  font-size: 1.1rem; line-height: 1.6; color: var(--offwhite);
}
.article-body blockquote p { font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; margin: 0; }

/* Articoli correlati */
.related { padding: 5rem 6%; border-top: 1px solid var(--border); background: var(--black2); }
.related > h2 {
  font-family: 'DM Serif Display', serif; font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  letter-spacing: -0.5px; color: var(--offwhite); margin-bottom: 2.5rem;
}
.related .blog-grid { grid-template-columns: repeat(2, 1fr); }
.related .post-card { background: var(--black); }
.related .post-card:hover { background: var(--black3); }

/* ERROR PAGE (404) */
.error-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 6rem 6%; gap: 1.5rem;
}
.error-page .error-code {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(5rem, 15vw, 9rem); letter-spacing: -2px;
  color: var(--offwhite); line-height: 1;
}
.error-page .error-code span { color: var(--cobalt); }
.error-page p { font-size: 1rem; color: var(--muted2); font-weight: 300; max-width: 420px; line-height: 1.8; }
.error-page .error-links { font-size: 0.88rem; margin-top: 0.5rem; }
.error-page .error-links a { color: var(--cobalt-text); text-decoration: none; }
.error-page .error-links a:hover { text-decoration: underline; }

/* FOOTER */
footer { border-top: 1px solid var(--border); padding: 3.5rem 6% 2.5rem; }
.footer-main {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 2rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border); margin-bottom: 2rem;
}
.footer-logo { font-family: 'DM Serif Display', serif; font-size: 1.4rem; color: var(--offwhite); }
.footer-logo span { color: var(--cobalt); }

/* Il logo immagine in fondo. L'altezza non è una seconda impostazione: si
   deriva da quella della testata con lo 0.93 che è esattamente il rapporto
   fra i due loghi testuali (1.4rem qui, 1.5rem lassù). Così regolando un solo
   numero in Aspetto › Testata le due estremità della pagina restano in scala
   fra loro, che è la ragione per cui il footer è più piccolo anche oggi. */
.footer-logo--immagine { line-height: 0; }
.footer-logo-img {
  display: block;
  height: calc(var(--logo-h, 26px) * 0.93);
  width: auto;
  max-width: min(60vw, 260px);
  object-fit: contain;
}
.footer-tag { font-size: 0.8rem; color: var(--muted2); margin-top: 0.6rem; font-style: italic; font-weight: 300; }
.footer-contacts { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-end; }
.footer-contacts a {
  font-size: 0.82rem; color: var(--muted2); text-decoration: none;
  letter-spacing: 0.03em; transition: color 0.2s;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.footer-contacts a:hover { color: var(--cobalt-text); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.footer-bottom p { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.03em; }
.footer-bottom p a { color: var(--muted); text-decoration: none; transition: color 0.2s; cursor: pointer; }
.footer-bottom p a:hover { color: var(--offwhite); }
/* Revoca del consenso cookie: è un <button> vero (serve per la tastiera e per
   gli screen reader) travestito da link, per non spezzare la riga legale. */
.footer-link-btn {
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  color: var(--muted); cursor: pointer; transition: color 0.2s;
}
.footer-link-btn:hover { color: var(--offwhite); }
.footer-nav { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.footer-nav a {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem; color: var(--muted); text-decoration: none;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; transition: color 0.2s; cursor: pointer;
}
.footer-nav a:hover { color: var(--offwhite); }

/* BACK TO TOP */
.to-top {
  position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--cobalt); color: #fff; border: none; cursor: pointer;
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #1a47f0; }

/* COOKIE BANNER */
.cookie-banner {
  position: fixed; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; z-index: 150;
  background: var(--black2); border: 1px solid var(--border);
  padding: 1.2rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.cookie-banner p { font-size: 0.8rem; color: var(--muted2); line-height: 1.6; font-weight: 300; max-width: 660px; }
.cookie-banner a { color: var(--cobalt-text); text-decoration: none; cursor: pointer; }
.cookie-banner a:hover { text-decoration: underline; }
.cookie-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.cookie-btn {
  font-family: 'DM Sans', sans-serif; font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.6rem 1.3rem; border-radius: 2px; cursor: pointer;
  min-height: 44px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cookie-btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted2); }
.cookie-btn.ghost:hover { border-color: var(--muted2); color: var(--offwhite); }
.cookie-btn.solid { background: var(--offwhite); border: 1px solid var(--offwhite); color: var(--black); }
.cookie-btn.solid:hover { background: var(--cobalt); border-color: var(--cobalt); color: var(--offwhite); }
@media(max-width: 600px) {
  /* Il banner occupava circa il 29% di uno schermo da 640px logici.
     Meno padding, corpo e interlinea lo portano sotto il 20%. */
  .cookie-banner {
    flex-direction: column; align-items: flex-start;
    left: 0; right: 0; bottom: 0; border-left: none; border-right: none;
    padding: 0.9rem 1rem; gap: 0.7rem;
  }
  .cookie-banner p { font-size: 0.74rem; line-height: 1.45; }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .hero-left > * { opacity: 1; transform: none; }
  .page-hero > * { opacity: 1; transform: none; }
}

@media(max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .hero { grid-template-columns: 1fr; }
  .hero-right { min-height: 45vw; }
  .about { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .channels-grid { grid-template-columns: minmax(0, 1fr); }
  /* La scheda si impila qui, non a 560px come prima. Da 900 in giù la griglia
     è già a colonna singola: tenere dentro la scheda due colonne significa
     una copertina QUADRATA larga mezza pagina — su un tablet da 768px sono
     337×337px di segnaposto contro un testo compresso nell'altra metà, con
     mezza colonna di vuoto sotto. Sopra la copertina passa in 16/7, la stessa
     proporzione che aveva già sul telefono. */
  .channel-card { grid-template-columns: minmax(0, 1fr); }
  .channel-img {
    aspect-ratio: 16/7;
    /* Il filo separava due colonne affiancate; ora le due parti sono una
       sopra l'altra e il filo va di conseguenza. */
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sell-inner { grid-template-columns: 1fr; gap: 3rem; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-contacts { align-items: flex-start; }
}
@media(max-width: 700px) {
  .contact-cards { grid-template-columns: 1fr; }
  .related .blog-grid { grid-template-columns: 1fr; }
}
@media(max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  /* .channel-card e .channel-img si impilano già dai 900px: vedi sopra. */
  .form-row { grid-template-columns: 1fr; }
  .hero-actions { width: 100%; }
  .hero-actions .btn-main, .hero-actions .btn-secondary { flex: 1; justify-content: center; }
}

/* ==========================================================================
   ADATTAMENTI WORDPRESS
   Tutto quello che segue non esisteva nel sito statico: serve solo a
   neutralizzare ciò che WordPress aggiunge di suo attorno al nostro markup.
   Nessuna regola qui cambia il design: lo riporta al punto di partenza.
   ========================================================================== */

/* 1. Margini di layout del core.
   WordPress può stampare `.is-layout-flow > * + * { margin-block-start: … }`
   sui contenitori dei blocchi: ha specificità superiore al nostro reset
   `* { margin: 0 }` e infilerebbe uno stacco verticale fra le sezioni, che
   qui sono volutamente attaccate e si toccano sul filo da 1px.
   `theme.json` disattiva blockGap e con WordPress 7.1 quelle regole non
   vengono stampate affatto (verificato sul reso); questa è la seconda rete,
   per le versioni che le stampano lo stesso.

   **La rete è stretta di proposito.** La prima versione di questa regola
   colpiva `.is-layout-flow > *` e `.is-layout-constrained > *`, cioè i figli
   di *ogni* gruppo: a parità di specificità con `.channels-top`, `.label`,
   `.sell-note` e simili, e stando più in basso nel foglio, vinceva lei e
   azzerava le spaziature volute del design — la griglia dei marketplace
   finiva attaccata al proprio titolo. Qui si toccano solo i due contenitori
   che impilano le sezioni a tutta larghezza, dove un margine non deve mai
   esserci; dentro le sezioni il CSS del sito resta padrone. */
.wp-site-blocks > *,
.wp-site-blocks > * + *,
.wp-block-post-content > section,
.wp-block-post-content > section + section { margin-block-start: 0; margin-block-end: 0; }

/* 2. Il contenitore di pagina dei temi a blocchi non deve creare contesto
   di impilamento né limitare la larghezza: le sezioni sono tutte a piena
   larghezza e gestiscono da sole il proprio padding al 6%. */
.wp-site-blocks { max-width: none; }

/* 3. Barra di amministrazione: la nav è `position: fixed; top: 0` e finirebbe
   sotto la barra di WordPress quando si è loggati. */
body.admin-bar nav#nav { top: var(--wp-admin--admin-bar--height, 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar nav#nav { top: 46px; }
}

/* 4. Alias della utility per screen reader: `.sr-only` è la nostra,
   `.screen-reader-text` è quella che il core inietta in alcuni blocchi. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 5. Corpo dell'articolo: core/post-content stampa le proprie classi accanto
   ad `.article-body`. Le figure e le immagini caricate dalla libreria media
   ereditano lo stile del corpo testo. */
.article-body > figure,
.article-body .wp-block-image { margin: 2rem 0; }
.article-body .wp-block-image img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); background: var(--img-bg);
}
.article-body figcaption {
  font-size: 0.72rem; color: var(--muted); margin-top: 0.7rem; line-height: 1.6;
}

/* 6. Editor: dentro l'iframe di Gutenberg il fondo pagina è bianco finché
   theme.json non ha applicato lo sfondo. Lo forziamo per non lavorare su
   bianco quando il tema è nero. */
.editor-styles-wrapper { background: var(--black); color: var(--offwhite); }

/* 7. Immagini reali al posto dei segnaposto.
   Nel sito statico hero, `.about-img` e `.channel-img` erano riquadri CSS
   con dentro un'icona a linee: non esisteva nessun `<img>` da stilare. Ora
   che si possono caricare dalla libreria media, servono le regole che le
   fanno riempire il riquadro senza deformarsi. */
.hero-right .hero-photo,
.about-img .about-photo,
.channel-img .channel-photo {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Il riquadro dei canali è centrato per l'icona: con una foto dentro deve
   tornare un contenitore pieno. */
.channel-img:has(.channel-photo) { display: block; padding: 0; }

/* 8. Blocchi del tema dentro l'editor.
   Nell'editor i blocchi sono avvolti da un contenitore con `position:
   relative`: la nav, che sul sito è `position: fixed`, coprirebbe il resto
   del canvas. La si riporta nel flusso solo lì. */
.editor-styles-wrapper nav#nav { position: static; }
/* La pastiglia della variante «Isola» vive staccata dai bordi con `left` e
   `right`: tornata nel flusso quelle due proprietà non fanno più niente e la
   pastiglia si allargherebbe a tutta pagina. Nell'editor il distacco glielo
   ridà il margine. */
.editor-styles-wrapper nav#nav.nav--isola { margin: 1rem 4%; }
.editor-styles-wrapper .hero { min-height: 60vh; padding-top: 0; }
.editor-styles-wrapper .hero-left > *,
.editor-styles-wrapper .page-hero > * { opacity: 1; transform: none; animation: none; }
.editor-styles-wrapper .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   MOBILE & TABLET — revisione settembre 2026
   Da appendere in fondo a style.css, dopo la sezione "ADATTAMENTI WORDPRESS".
   Nessuna regola tocca il desktop: tutto sta dentro media query <= 900px
   (tablet in verticale e telefoni), tranne le due righe di "fondamenta".
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONDAMENTA
   -------------------------------------------------------------------------- */

/* Safari in orizzontale ingrandisce da solo il corpo del testo: questa riga
   glielo impedisce senza disattivare lo zoom dell'utente. */
html { -webkit-text-size-adjust: 100%; }

/* 100vh sui telefoni conta anche la striscia coperta dalla barra del browser:
   la hero nasce più alta dello schermo e il primo bottone finisce fuori.
   100svh è l'altezza davvero visibile. */
@supports (height: 100svh) {
  .hero { min-height: 100svh; }
  .error-page { min-height: 100svh; }
}

/* --------------------------------------------------------------------------
   1. IL PANNELLO DEL MENU — il cassetto resta, cambia cosa c'è dentro
   Il cassetto è quello di sempre: stessa larghezza (80vw fino a 320px), stessa
   entrata da destra, stessa velatura. Si riscrive solo l'interno, dove tre
   cose non tornavano.

   1. Il carattere. Le voci erano in DM Serif Display a 1.5rem: è il carattere
      dei titoli, e in una lista di navigazione fa a pugni con la barra da cui
      il pannello esce, dove le stesse sei parole sono in Barlow Condensed
      maiuscolo. Ora sono lo stesso identico stile, semplicemente impilato:
      il pannello diventa la barra desktop messa in colonna.

   2. La posizione. `justify-content: center` centrava le voci nell'altezza
      dello schermo, quindi partivano da un punto che cambia con il telefono e
      non si allineano a niente. Ora partono sotto la testata, sul filo
      dell'intestazione che si vede accanto.

   3. La separazione, contata due volte: `gap: 0.5rem` fra i link più un bordo
      inferiore su ognuno davano un ritmo irregolare — 8px di aria, poi il
      filo, poi altri 8. Resta il filo, e l'aria la fa l'altezza della riga.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .mobile-menu {
    /* Dove comincia la prima voce: l'altezza della testata. È una variabile
       perché ogni variante ne ha una sua, ritarata dalle righe più in basso. */
    --menu-top: 4.4rem;

    justify-content: flex-start;
    gap: 0;
    padding: var(--menu-top) 1.6rem 1.6rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;          /* ben oltre i 44px minimi per il dito */
    padding: 0;

    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);

    border-bottom: 1px solid var(--border);
  }
  /* Un elenco chiuso sopra e sotto invece di una colonna che sfuma. */
  .mobile-menu a:first-of-type { border-top: 1px solid var(--border); }
  .mobile-menu a:last-child    { border-bottom: 1px solid var(--border); }

  /* Il punto del logo, ripreso: segna la pagina in cui ti trovi senza
     introdurre un secondo modo di evidenziare. Resta trasparente sulle altre
     voci, così i testi restano incolonnati sullo stesso asse. */
  .mobile-menu a::before {
    content: '';
    flex-shrink: 0;
    width: 5px; height: 5px; border-radius: 50%;
    background: transparent;
  }
  .mobile-menu a[aria-current="page"]::before { background: var(--cobalt); }

  /* L'hamburger disegna 24px ma la zona toccabile arriva a 44. I margini
     negativi riportano l'icona dov'era e — soprattutto — impediscono al
     bottone più alto di far crescere la barra: la testata è `position: fixed`
     e ogni pixel in più che prende è un pixel che copre il contenuto della
     prima sezione. */
  .nav-toggle { width: 44px; height: 44px; margin-block: -5px; margin-right: -5px; }

  /* Ogni variante di testata ha la sua altezza: `~` funziona perché nel markup
     .mobile-menu è sorella del <nav>, subito dopo la velatura. */
  .nav--centro ~ .mobile-menu { --menu-top: 4.6rem; }
  .nav--isola  ~ .mobile-menu { --menu-top: 4.9rem; }
  .nav--velo   ~ .mobile-menu { --menu-top: 4.9rem; }

  /* Da loggati la barra di WordPress spinge giù la testata di 46px. */
  body.admin-bar .mobile-menu { padding-top: calc(var(--menu-top) + 46px); }
}

/* --------------------------------------------------------------------------
   2. PAGINA VENDI — il form sale sotto il titolo
   Su desktop sono due colonne: a sinistra il racconto, a destra il form.
   Impilandole, il form finiva dopo intro + tre passi + nota + le due schede
   della logistica: circa tre schermate di scorrimento prima di vedere il
   primo campo. Chi arriva per vendere non ci arriva mai.

   `display: contents` scioglie la scatola di .sell-left e consegna i suoi
   figli alla colonna esterna: da lì `order` li rimette nell'ordine giusto per
   il telefono. L'HTML non cambia — quindi non cambia nulla per Google, né per
   chi legge con uno screen reader in ordine di documento — e su desktop la
   regola semplicemente non esiste.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sell-inner {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
  }
  .sell-left { display: contents; }

  /* Rete, come quella in cima alla sezione "Adattamenti WordPress": se il core
     stampasse i propri margini di layout sui figli del gruppo, qui si
     sommerebbero al `gap` — e con l'ordine cambiato finirebbero pure nel posto
     sbagliato. Il ritmo di questa colonna lo decide il gap e basta. */
  .sell-left > * + * { margin-block-start: 0; }

  .sell-intro     { order: 1; margin-bottom: 0; }
  .sell-form      { order: 2; }
  .sell-left > .sr-only { order: 3; }
  .sell-steps     { order: 4; }
  .sell-note      { order: 5; margin-top: 0; }
  .sell-logistics { order: 6; margin-top: 0; }

  /* I tre passi stampati dentro il pannello ("Compili il modulo…") ripetono
     quelli della colonna di sinistra, che ora stanno subito sotto il form.
     Su desktop convivono in due colonne diverse; in fila uno sotto l'altro
     sono la stessa cosa detta due volte, e 250px in più prima del primo
     campo. */
  .form-steps { display: none; }

  .sell-intro p { max-width: none; }
  .sell-note    { max-width: none; }
}

/* --------------------------------------------------------------------------
   3. IL FORM SOTTO IL DITO
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* 16px esatti: sotto questa misura iOS ingrandisce la pagina appena si
     tocca un campo, e la si ritrova spostata e zoomata a metà compilazione.
     È l'unico numero del foglio che non può essere in rem. */
  .field input, .field select, .field textarea { font-size: 16px; }
  .field input[type=file] { font-size: 0.85rem; }

  .field label       { font-size: 0.72rem; }
  .field-hint        { font-size: 0.7rem; }
  .form-check label  { font-size: 0.8rem; }
  .form-check input  { width: 20px; height: 20px; }
  .field textarea    { min-height: 120px; }

  .sell-form { padding: 1.75rem 1.35rem; }
}
@media (max-width: 560px) {
  .sell-form { padding: 1.4rem 1.1rem; }
}

/* --------------------------------------------------------------------------
   3bis. SPAZIATURE COERENTI DENTRO IL PANNELLO
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* PROVA SOCIALE eBAY.
     È una riga pensata per stare in orizzontale: i due dati, e il link spinto
     a destra da un `margin-left: auto`. Su schermo stretto gli elementi vanno
     a capo come càpita, quel margine su una riga sua non significa più niente,
     e fra una riga e l'altra si apre 1.8rem di vuoto contro i 0.25rem che
     separano il numero dalla sua etichetta: tre spaziature diverse dentro lo
     stesso riquadro.
     Diventa una griglia dichiarata: i due dati affiancati in colonne uguali,
     il link sotto, staccato dal filo da 1px che il sito usa dappertutto. */
  .ebay-proof-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.05rem 1.15rem;
    margin-bottom: 1.5rem;
  }
  .ebay-proof-inline .ebay-proof-stat  { gap: 0.15rem; }
  .ebay-proof-inline .ebay-proof-num   { font-size: 1.4rem; }
  .ebay-proof-inline .ebay-proof-label { font-size: 0.68rem; line-height: 1.35; }
  .ebay-proof-inline .ebay-proof-cta {
    grid-column: 1 / -1;
    margin-left: 0;
    width: auto;
    padding: 0.85rem 0 0;
    font-size: 0.72rem;
    border-bottom: none;
    border-top: 1px solid var(--border);
  }
  /* Stessa riga, versione a sezione intera (fuori dal form): stesso difetto. */
  .ebay-proof-inner { gap: 1.2rem 2rem; }
  .ebay-proof-inner .ebay-proof-cta { margin-left: 0; width: 100%; }

  /* RITMO DEL MODULO.
     Lo stacco fra due campi arriva oggi da tre sorgenti diverse — il `gap`
     della griglia, il `margin-bottom` della riga e il `margin-top` dei
     suggerimenti — e dove una riga ha il suggerimento e l'altra no i due
     stacchi non coincidono. In due colonne non si nota; impilato su una
     colonna sola è la prima cosa che si vede. Una colonna flex con un solo
     `gap`: tutti gli stacchi diventano lo stesso numero. */
  #sellForm { display: flex; flex-direction: column; gap: 1.15rem; }
  #sellForm .form-row    { margin-bottom: 0; gap: 1.15rem; }
  #sellForm .form-check  { margin-bottom: 0; }
  #sellForm .form-submit { margin-top: 0.25rem; }
  #sellForm .form-note   { margin-top: 0.15rem; }
  #sellForm .form-error  { margin-top: 0; }
  .field label { margin-bottom: 0.45rem; }
  .field-hint  { margin-top: 0.45rem; }

  /* La logistica: 2.5rem di margine + 2rem di padding sopra il filo facevano
     4.5rem di vuoto dentro una colonna dove tutto il resto sta a 2.25. */
  .sell-logistics { padding-top: 1.5rem; }
  .sell-note { font-size: 0.85rem; }
}

/* --------------------------------------------------------------------------
   4. DENSITÀ — le sezioni respirano troppo su uno schermo stretto
   6rem sopra e sotto ogni sezione sono giuste su un monitor; su un telefono
   sono mezza schermata di nero fra un contenuto e l'altro.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sell, .categories, .channels, .faq, .blog, .related { padding-block: 4.25rem; }

  /* ECCEZIONE, e non è un dettaglio: `.sell` è la PRIMA sezione della pagina
     Vendi — sotto non c'è nessuna page-hero a fare da cuscinetto, come invece
     accade su Negozio, Blog, FAQ, Chi sono e Legale. La testata è fissa e alta
     circa 68px: con 4.25rem (68px) il titolo "Hai console o giochi da vendere?"
     comincia esattamente dove finisce la barra, e a 3.5rem ci finisce sotto,
     tagliato. Qui il valore va misurato sulla barra, non sul ritmo delle altre
     sezioni: 100px lasciano gli stessi ~30px d'aria che ha il desktop. */
  .sell { padding-top: 6.25rem; }

  .cta-band     { padding-block: 4rem; }
  .page-hero    { padding: 8rem 6% 3.5rem; }
  .breadcrumb   { padding-top: 7rem; }
  .article-hero { padding-block: 2rem 2.5rem; }
  .article-body { padding: 2.5rem 6% 3.5rem; }
  footer        { padding: 3rem 6% 2rem; }

  .hero       { min-height: auto; padding-top: 4.5rem; }
  .hero-left  { padding: 3.5rem 6% 3rem; }
  .hero-right { min-height: 58vw; }

  /* Le ancore (#categorie, le voci dei legali) finivano sotto la testata
     fissa: il titolo del punto d'arrivo restava nascosto dietro la barra. */
  section[id], .faq-item[id], .article-body [id] { scroll-margin-top: 5rem; }
}
@media (max-width: 560px) {
  .sell, .categories, .channels, .faq, .blog, .related, .cta-band {
    padding-inline: 5%;
    padding-block: 3.5rem;
  }
  .sell { padding-top: 6rem; }   /* vedi sopra: sta sotto la testata fissa */
  .page-hero { padding: 7rem 5% 3rem; }
  .article-body, .article-hero, .article-cover,
  .breadcrumb, footer, .legal-section { padding-inline: 5%; }

  .categories h2 { margin-bottom: 2rem; }
  .channels-top  { margin-bottom: 2rem; }
  .faq-head      { margin-bottom: 2rem; }
  .hero-left     { padding: 3rem 5% 2.5rem; }
  /* 3rem fissi su uno schermo da 390px sono 48px di titolo: scala con lo
     schermo invece di restare piantato al minimo del clamp desktop. */
  .hero h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
}

/* --------------------------------------------------------------------------
   5. LEGGIBILITÀ — il corpo del testo lungo
   0.92rem sono 14.7px: accettabili su un monitor a 60cm, piccoli su un
   telefono tenuto in mano. Vale solo dove il testo si legge di seguito.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .article-body p, .article-body li { font-size: 1rem; line-height: 1.75; }
  .faq-answer   { font-size: 0.95rem; }
  .legal-body p { font-size: 0.9rem; }
}

/* --------------------------------------------------------------------------
   6. GRIGLIE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* LE SCHEDE CONTATTO (in fondo alla pagina FAQ).
     Il vincolo è il valore più lungo: `selezioneresellshop@gmail.com`, 29
     caratteri che in DM Serif a 1.15rem misurano circa 250px. Su un tablet,
     tre schede in fila lasciano 161px dentro i 2rem di padding, e
     `word-break: break-word` fa il resto: l'indirizzo si spezza a metà parola
     su tre righe. Una colonna sola gli dà 250px veri anche su un telefono da
     360, quindi resta su una riga e non si spezza mai.
     Una riga per contatto è anche la forma giusta: sono tre link, non tre
     schede da confrontare. */
  .contact-cards { grid-template-columns: 1fr; }
  .contact-card  { padding: 1.2rem 1.15rem; gap: 0.3rem; }
  .contact-card-value {
    font-size: 1rem;
    /* `anywhere` invece di `break-word`: spezza solo se davvero non ci sta,
       e non a metà parola quando lo spazio basterebbe. */
    word-break: normal;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 700px) {
  /* I filtri del blog andavano a capo su tre righe. Una riga sola che scorre
     col dito occupa un terzo dello spazio e si capisce che continua. */
  .blog-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-inline: -6%;
    padding-inline: 6%;
    margin-bottom: 2rem;
  }
  .blog-filters::-webkit-scrollbar { display: none; }
  .blog-filter { flex: 0 0 auto; scroll-snap-align: start; }
}
@media (max-width: 560px) {
  /* Le quattro categorie a colonna singola, con la foto quadrata, sono quattro
     schermate di scorrimento per quattro parole. A due per riga la sezione
     torna leggibile in un colpo d'occhio. */
  .cat-grid   { grid-template-columns: 1fr 1fr; }
  .cat-info   { padding: 1rem 0.85rem; }
  .cat-tag    { font-size: 0.66rem; margin-bottom: 0.35rem; }
  .cat-card h3 { font-size: 1rem; }
  .cat-card p  { font-size: 0.74rem; }

  .blog-filters { margin-inline: -5%; padding-inline: 5%; }
}

/* --------------------------------------------------------------------------
   7. BERSAGLI E COMANDI FISSI
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* IL FOOTER.
     `.footer-main` è una riga con `justify-content: space-between`: marchio a
     sinistra, contatti a destra. Su un telefono i due blocchi ci stanno ancora
     — stretti — quindi la riga NON va a capo: si restringono entrambi, e si
     finisce con due colonnine di testo spezzato, il payoff a sinistra e
     l'indirizzo email a destra su tre righe. `flex-wrap` non basta a
     impedirlo, perché il testo si comprime prima di andare a capo: serve
     dichiarare la colonna. */
  .footer-main {
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
    padding-bottom: 2rem;
  }

  /* I tre contatti erano tre testi in fila con 0.7rem d'aria in mezzo:
     nessuna struttura, e non si capiva che erano toccabili. Diventano righe
     alte 48px separate dal filo da 1px — la stessa forma delle voci del menu
     e delle schede contatto qui sopra. */
  .footer-contacts {
    width: 100%;
    gap: 0;
    align-items: stretch;
  }
  .footer-contacts a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
  }
  .footer-contacts a:first-child { border-top: 1px solid var(--border); }

  /* La riga legale e le sei voci: in colonna, non affiancate e poi spezzate. */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .footer-bottom p { line-height: 1.9; }

  .footer-nav { gap: 1rem 1.5rem; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 40px; }

  .to-top { bottom: 1rem; right: 1rem; }
}