/* Alexandria, self-hosted (variable font, axis wght 100-900).
   File woff2 in /assets/fonts/, sottoinsiemi latin + latin-ext (sufficiente
   per italiano). font-display: swap perche` il file e` locale e arriva
   praticamente sempre prima del primo paint. */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/alexandria-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: 'Alexandria';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/alexandria-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  --c-green: #205C16;
  --c-green-dark: #184411;
  --c-green-light: #47AE33;
  --c-red: #910810;
  --c-red-dark: #7a060d;
  --c-ink: #101B15;
  --c-ink-2: #1A2B22;
  --c-gray-1: #585858;
  --c-gray-2: #676767;
  --c-gray-3: #9a9a9a;
  --c-gray-4: #cfcfcf;
  --c-bg: #FFFFFF;
  --c-bg-2: #FAFAFA;
  --c-bg-3: #F8F8F8;
  --c-bg-4: #F4F4F2;
  --c-bg-hero: linear-gradient(180deg,#3a3a3a 0%,#7a7a7a 100%);

  --ff-display: 'Alexandria','Figtree',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ff-body: 'Alexandria','Figtree',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --fs-hero: clamp(2rem, 6.77vw, 8.125rem);
  --fs-h1: clamp(1.75rem, 2.6vw, 3.125rem);
  --fs-h2: clamp(1.25rem, 1.56vw, 1.875rem);
  --fs-body: clamp(0.9375rem, 0.94vw, 1.125rem);
  --fs-body-lg: clamp(1rem, 1.04vw, 1.25rem);
  --fs-nav: clamp(0.95rem, 0.94vw, 1.125rem);

  --frame-x: max(16px, 8vw);
  --frame-y: max(8px, .833vw);
  --container: min(84vw, 2200px);
  /* NOTA: --frame-x e --container sono ridefiniti su telefono in fondo al file
     (blocco «Respiro su mobile»). L'8vw di cornice qui vale su schermi larghi;
     a 390px mangiava 62px dei 390 disponibili. */
  --gutter: max(8px, 1.04vw);
  --section-py: 80px;
  --band-px: max(16px, 2.6vw);

  --hero-h: clamp(420px, 48.4vw, 1100px);
  --card-r: max(10px, .83vw);
  --hero-r: max(12px, 1.04vw);
  --icon-box-r: max(14px, 1.46vw);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-card: 0 4px 24px rgba(16,27,21,.08);
  --shadow-soft: 0 2px 8px rgba(16,27,21,.05);

  --t-fast: .15s ease;
  --t: .25s ease;

  --t-dd: .2s ease-out;   /* tendine di menu: rapide, devono seguire il mouse */

  /* Reveal allo scroll. La cascata e` GERARCHICA (titolo → lede → CTA → card),
     quindi muove molti piu` elementi di una per-fascia: ognuno deve spostarsi di
     POCO e per poco. Alzare --ar-shift qui non rende la pagina piu` ricca, la
     rende piu` lenta — il contenuto "insegue" lo scroll. La gerarchia si legge
     dal TIMING (l'ordine in cui le cose arrivano), non dall'ampiezza. */
  --ar-dur: .65s;
  --ar-shift: 30px;
  --ar-stagger: 65ms;
  --ar-ease: cubic-bezier(.22,.61,.36,1);
  /* Ri-disegno di una griglia (filtro/pager): l'utente sta cercando, non
     guardando. Fade corto, nessuno stagger — feedback, non spettacolo. */
  --ar-dur-quick: .28s;
  --ar-hero-dur: 1.25s;   /* settle dell'immagine hero */

  /* FAQ: l'apertura di un accordion e` un movimento che l'utente ha CHIESTO, e
     va accompagnato — non liquidato. Piu` lento del resto delle micro-interazioni
     e con una curva che frena a lungo sul finale (ease-out marcato): e` quello
     che si legge come "morbido". L'icona usa gli stessi valori, altrimenti il
     segno finirebbe di ruotare mentre il pannello e` ancora in corsa. */
  --t-faq: .42s;
  --ease-faq: cubic-bezier(.32,.72,0,1);
}

*,*::before,*::after { box-sizing: border-box; }
/* Restore the `hidden` attribute semantics. The UA rule [hidden]{display:none}
   loses to ANY author rule by cascade origin, so components that set their own
   display (.field{display:flex}, .form-card, …) would keep `hidden` elements
   visible. The DB-driven contact forms (js/leads.js) toggle `hidden` to hide
   fields and whole forms — this makes that reliable. */
[hidden] { display: none !important; }
/* overflow-x: clip (NON hidden) blinda il drawer mobile off-canvas
   (.main-nav position:fixed + translateX(100%)) contro lo scroll orizzontale
   su Safari/WebKit, che — a differenza di Chromium — conta il fixed fuori
   schermo nella larghezza del documento. `clip` ritaglia l'asse X senza
   creare uno scroll-container: overflow-y resta `visible`, quindi
   position:sticky (.site-header top:0, .filters__body top:100px) continua a
   funzionare. `hidden` invece stabilirebbe un contenitore di scroll e
   romperebbe entrambe le sticky. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  padding: 0 var(--frame-x) var(--frame-y);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg,video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-green); }
h1,h2,h3,h4,h5 { font-family: var(--ff-display); font-weight: 700; color: var(--c-ink); margin: 0 0 .5em; line-height: 1.15; }

/* H1 uniformi in tutto il sito: 80px @1920, clamp tra 32 e 80. */
h1 { font-size: clamp(2rem, 4.17vw, 5rem); }
h2 { font-size: var(--fs-h1); }
h3      { font-size: var(--fs-h2); }
h4,
.h4     { font-size: clamp(1.05rem, 1.3vw, 1.5625rem); font-weight: 700; line-height: 1.15; font-family: var(--ff-display); }
/* .hero__title eredita la dimensione globale dell'h1 (80px @1920). */

p { margin: 0 0 1em; font-size: var(--fs-body); color: var(--c-gray-2); }
ul { padding-left: 1.25rem; font-size: var(--fs-body); color: var(--c-gray-2); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .55rem 1.6rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 2px solid transparent;
  background: var(--c-green);
  color: #fff;
  transition: transform var(--t-fast), background var(--t), color var(--t), border-color var(--t);
  white-space: nowrap;
}
.btn:hover { background: var(--c-green-dark); color: #fff; transform: translateY(-1px); }
.btn--red { background: var(--c-red); }
.btn--red:hover { background: var(--c-red-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--c-green); border-color: var(--c-green); }
.btn--ghost:hover { background: var(--c-green); color: #fff; }
.btn--white { background: #fff; color: var(--c-ink); }
.btn--white:hover { background: #fff; color: var(--c-green); }
.btn--dark { background: var(--c-ink); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }
.btn--lg { padding: .7rem 1.9rem; font-size: 1.25rem; }
.btn--sm { padding: .35rem 1.1rem; font-size: .95rem; }
/* Sul telefono un'etichetta lunga NON puo` restare su una riga sola. Il
   `white-space: nowrap` qui sopra e` giusto dove lo spazio c'e`, ma su schermo
   stretto fa sfondare il contenitore — e siccome body ha overflow-x:clip il
   testo non scorre: viene TAGLIATO. Misurato a 390px in home: «Scopri Nuovi
   Trattori e Macchinari» pretendeva 392px dentro 272px, cioe` 120px di
   etichetta invisibili. Meglio due righe che mezza parola. */
@media (max-width: 700px) {
  /* Su telefono i bottoni erano sproporzionati: --fs-body-lg (16px) in
     MAIUSCOLO con 1.6rem di respiro laterale li rendeva quasi larghi quanto la
     colonna di testo che dovrebbero servire. Rimpiccioliti di un gradino;
     restano alti ~40px, quindi ampiamente sopra la soglia comoda al tocco. */
  .btn { font-size: .95rem; padding: .5rem 1.15rem; white-space: normal; max-width: 100%; }
  .btn--lg { font-size: 1rem; padding: .6rem 1.35rem; }
  .btn--sm { font-size: .85rem; padding: .35rem .9rem; }
}

.site-header {
  background: #fff;
  border: 1px solid #ececec;
  border-top: 0;
  border-radius: 0 0 var(--card-r) var(--card-r);
  position: sticky;
  top: 0;
  z-index: 80;
  box-shadow: 0 2px 12px rgba(16,27,21,.04);
}
.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: .9rem clamp(1rem, 1.5vw, 1.75rem);
  position: relative;
}
.site-logo img { height: clamp(40px, 2.9vw, 56px); width: auto; }
/* i18n language switcher (catalog.js initLangSwitcher; hidden until 2+ locales) */
.lang-switcher { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; letter-spacing: .03em; }
.lang-switcher__link { color: var(--c-gray-500, #8a8a8a); text-decoration: none; padding: .15rem .3rem; border-radius: 4px; }
.lang-switcher__link:hover { color: var(--c-green, #205C16); }
.lang-switcher__cur { color: var(--c-ink, #1a1a1a); padding: .15rem .3rem; }
.lang-switcher__link + .lang-switcher__link::before,
.lang-switcher__cur + .lang-switcher__link::before,
.lang-switcher__link + .lang-switcher__cur::before { content: "·"; margin-right: .35rem; color: var(--c-gray-300, #ccc); }
.main-nav { display: flex; gap: clamp(.6rem, 1.4vw, 1.8rem); align-items: center; }
.main-nav__list { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; align-items: center; }
.main-nav__list > li { padding-inline: clamp(.2rem, .6vw, .8rem); }
.main-nav__link {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--c-ink);
  padding: .4rem .2rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.main-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--c-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.main-nav__link:hover::after,
.main-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.main-nav__link--cta { color: var(--c-green); font-weight: 600; }
.has-dropdown > .main-nav__link::after { content: none; }
.dropdown-arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  display: inline-block;
  align-self: center;
  transform: translateY(-2px) rotate(45deg);
}

.has-dropdown { position: relative; }
.has-dropdown--wide { position: static; }

.dropdown {
  position: absolute;
  top: 100%; left: 0;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 1rem 0;
  list-style: none;
  margin: 0;
  z-index: 90;
  min-width: 240px;

  /* Comparsa animata: `display` non e` interpolabile, quindi la tendina resta
     sempre "in layout" (e` position:absolute → non sposta nulla) e viene
     nascosta con opacity+visibility. visibility passa a hidden solo A FINE
     transizione (delay .2s) cosi` la dissolvenza si vede in uscita; in entrata
     la regola :hover azzera il delay. pointer-events evita che il pannello
     invisibile intercetti il mouse.
     :focus-within continua a funzionare: il focus arriva sul .main-nav__link,
     che sta FUORI dal .dropdown, non sui figli nascosti. */
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--t-dd), transform var(--t-dd), visibility 0s linear .2s;
}
/* Ponte a tutta larghezza fra voce e tendina (30/09/2026). Il ::before sul link
   qui sotto e' largo quanto la PAROLA (es. 71px per USATO), mentre la tendina e'
   larga tutto il contenitore: fra il fondo della voce e il bordo della tendina
   restano ~16px scoperti. Scendendo in DIAGONALE verso una voce della tendina il
   mouse usciva dal ponte stretto → la voce perdeva :hover → la tendina si chiudeva
   («la prima volta scompare»; la seconda si scende piu' dritti e resta). Questo
   ponte sta sulla tendina stessa, largo quanto lei: e' figlio della voce, quindi
   passarci sopra mantiene :hover. Chiusa, la tendina ha pointer-events:none e il
   ponte con lei: non intercetta nulla. 18px = la fascia scoperta (16px) e non di
   piu': 26px coprivano anche il fondo delle voci vicine. */
@media (min-width: 1101px) {
  .dropdown::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    height: 18px;
  }
}
.has-dropdown--wide > .main-nav__link::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 1.2rem;
}
.has-dropdown.is-hover-hold > .dropdown { transition: none; }
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.is-hover-hold > .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;   /* in entrata visibility non deve aspettare */
}

.dropdown > li > a {
  display: block;
  padding: .55rem 1.1rem;
  font-size: 1rem;
  color: var(--c-ink);
}
.dropdown > li > a:hover { background: var(--c-bg-3); color: var(--c-green); }

/* display:grid permanente (l'apertura ora la governano opacity/visibility,
   ereditate da .dropdown). Le vecchie regole :hover che facevano `display:grid`
   sono rimosse: rimetterebbero il display nel gioco, che non e` animabile. */
.dropdown--mega,
.dropdown--cards {
  display: grid;
  left: 0; right: 0;
  min-width: 0;
  padding: clamp(1.5rem, 2.2vw, 2.5rem) clamp(1.75rem, 2.5vw, 3rem) clamp(2rem, 2.5vw, 2.5rem);
}
.dropdown--mega {
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  column-gap: clamp(1rem, 3vw, 4rem);
  row-gap: 1.5rem;
}
.dropdown__col { display: flex; flex-direction: column; }
.dropdown__title {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-ink);
}
.dropdown__title a { color: inherit; text-decoration: none; }
.dropdown__title a:hover { color: var(--c-green); }
.dropdown__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.dropdown__list a {
  font-size: 1rem;
  color: var(--c-ink);
  font-weight: 400;
  padding: 0;
}
.dropdown__list a:hover { color: var(--c-green); background: transparent; }

.dropdown--cards {
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(1rem, 2vw, 2.5rem);
  row-gap: 1.5rem;
}
.dropdown-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--c-ink);
}
.dropdown-card__title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dropdown-card__media {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-bg-3) center/cover no-repeat;
  display: block;
}
.dropdown-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dropdown-card:hover .dropdown-card__title { color: var(--c-green); }

.burger { display: none; background: transparent; border: 0; width: 44px; height: 44px; padding: 8px; }
/* La X del drawer esiste solo in modalita` mobile: su desktop il menu e` sempre
   aperto nella header e non c'e` nulla da chiudere. */
.main-nav__close { display: none; }
.burger span { display: block; height: 3px; background: var(--c-ink); margin: 5px 0; border-radius: 2px; transition: transform var(--t); }

@media (max-width: 1100px) {
  .burger { display: inline-block; }
  /* Drawer da destra */
  .main-nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* Tutta la larghezza disponibile: su un telefono lo spazio e` gia` poco e un
       drawer a 85vw lasciava una striscia di pagina inutile a sinistra. Con il
       pannello a pieno schermo il tap-fuori non esiste piu` come via d'uscita:
       la chiusura passa dalla X esplicita qui sotto (oltre a Esc). */
    width: 100%;
    background: #fff;
    z-index: 100;
    transform: translateX(100%);
    transition: transform var(--t);
    box-shadow: -8px 0 20px rgba(0,0,0,.12);
    padding: 1.25rem 0 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 0;
  }
  .main-nav.is-open { transform: translateX(0); }

  /* La X di chiusura. Serve DAVVERO da quando il drawer e` a tutta larghezza:
     prima si poteva chiudere toccando la pagina di lato, ora quella via non
     esiste. Vive DENTRO il pannello e non nella header, per la stessa ragione
     spiegata in fondo al file a proposito del burger→X: la header e` sticky a
     z-index 80 e crea un contesto di impilamento, quindi un suo figlio non puo`
     salire sopra al drawer. Qui il problema non si pone: la X e` nel drawer. */
  .main-nav__close {
    display: block;
    position: absolute;
    top: .75rem;
    right: 1rem;
    width: 44px;               /* bersaglio pieno, come raccomandato per il touch */
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1;
  }
  .main-nav__close span {
    position: absolute;
    top: 50%; left: 50%;
    width: 22px;
    height: 2px;
    background: var(--c-ink);
    border-radius: 2px;
  }
  .main-nav__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
  .main-nav__close span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }

  /* NIENTE backdrop dietro al drawer, ed e` una scelta esplicita del committente.
     Ce n'era uno (`body:has(.main-nav.is-open)::before`, fixed inset:0 z-index:99)
     e NON oscurava: COPRIVA il menu. Il perche` e` lo stesso meccanismo descritto
     in fondo al file per il burger — la .site-header e` sticky con z-index 80,
     quindi crea un contesto di impilamento: il drawer, che le vive DENTRO, non ne
     esce alzando il proprio z-index a 100 (quel 100 vale solo fra i fratelli
     dentro la header). Il velo invece stava nella RADICE a 99, cioe` sopra la
     quota 80 dell'intera header. Effetti misurati a 400px: il pannello si vedeva
     grigio (#fff sotto un nero al 40% da` #999) e `elementFromPoint` sulla prima
     voce restituiva BODY, non il link — ogni tap colpiva il velo e il
     click-outside di main.js chiudeva il drawer invece di navigare. Menu mobile
     inutilizzabile su OGNI pagina, header condivisa.
     Se un giorno lo si rivuole, NON basta rimetterlo com'era: o entra nello
     stesso contesto del drawer (`.site-header:has(.main-nav.is-open)::after`,
     z-index 99) oppure scende sotto la quota della header (z-index 79). Lo stacco
     visivo fra drawer e pagina lo da` gia` la box-shadow qui sopra. */

  /* padding-top: lascia scorrere la prima voce sotto la X di chiusura. */
  .main-nav__list { flex-direction: column; gap: 0; align-items: stretch; width: 100%; padding: 2.25rem 0 0; }
  .main-nav__list > li { width: 100%; border-bottom: 1px solid #ececec; }
  .main-nav__list > li:last-child { border-bottom: 0; }
  .main-nav__link { padding: .9rem 1.25rem; width: 100%; display: flex; align-items: center; justify-content: space-between; }

  /* Sotto-menu chiusi di default; si aprono solo quando il parent ha .is-open.
     Qui la tendina torna position:static, cioe` NEL FLUSSO: nasconderla con
     visibility (come sul desktop) ne lascerebbe l'ingombro dentro il drawer.
     Serve display:none, che pero` non e` interpolabile → transition-behavior
     allow-discrete + @starting-style animano opacity/transform mentre il
     display commuta. Sui browser che non li supportano la tendina appare
     istantanea: esattamente il comportamento di prima. */
  .dropdown { position: static; box-shadow: none; border: 0; padding: 0 1.25rem 1rem; min-width: 0; }
  .has-dropdown > .dropdown,
  .has-dropdown > .dropdown--mega,
  .has-dropdown > .dropdown--cards { display: none; }
  .has-dropdown.is-open > .dropdown { display: block; }
  .has-dropdown.is-open > .dropdown--mega,
  .has-dropdown.is-open > .dropdown--cards {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
    padding: .5rem 1.25rem 1rem;
  }
  /* Annulla lo stato desktop (opacity:0/visibility:hidden/translateY) e anima
     la comparsa del contenuto. `overflow:hidden` evita che il translateY sbordi
     sulla voce di menu sopra mentre il contenuto scivola dentro. */
  .has-dropdown.is-open > .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    overflow: hidden;
    transition: opacity .15s ease-out, transform .15s ease-out,
                display .15s allow-discrete;
  }
  @starting-style {
    .has-dropdown.is-open > .dropdown {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
  .dropdown--cards .dropdown-card__media { aspect-ratio: 16/6; }

  /* Freccia proporzionata al testo che accompagna + rotazione quando aperto.
     ATTENZIONE al padding: la freccia e` un quadrato ruotato di cui si vedono
     solo border-right e border-bottom, e in `content-box` il bordo si disegna
     ATTORNO al padding — quindi il padding NON e` spazio invisibile intorno al
     segno, e` il segno che diventa piu` grande. Con `width:10px; padding:6px`
     il chevron misurava ~31px di larghezza accanto a una voce di 15px: pesava
     piu` del testo. Tolto il padding, il segno vale ~10px, cioe` la dimensione
     di un indicatore.
     Il bersaglio tattile non ci perde nulla: su mobile e` l'INTERO
     .main-nav__link ad aprire la tendina (binding diretto in main.js), ed e`
     alto ~52px per tutta la larghezza del pannello. */
  .dropdown-arrow {
    width: 7px;
    height: 7px;
    border-width: 1.5px;
    padding: 0;
    box-sizing: content-box;
    margin-left: auto;
    margin-right: .35rem;
    transition: transform var(--t-fast);
  }
  .has-dropdown.is-open .dropdown-arrow {
    transform: translateY(2px) rotate(225deg);
  }

  /* LA RICERCA VIVE NEL DRAWER, non nella header. Su mobile la sola lente in
     testata non diceva nulla e rubava spazio al logo; dentro il pannello e`
     invece un campo vero, con la sua etichetta implicita (il placeholder).
     Il markup e` stato spostato DENTRO <nav> in build.py — quindi qui non
     serve nascondere nulla: sul telefono la header non ha piu` una ricerca da
     mostrare, perche` non la contiene proprio. */
  .main-nav .site-search {
    flex: none;
    width: 100%;
    margin: 1.25rem 0 0;
    padding: 0 1.25rem;
  }
  /* L'input torna VISIBILE: il collasso-alla-lente (@media 560px piu` in basso)
     ha senso in una barra stretta, non in un pannello a tutta larghezza.
     font-size >= 16px come per i campi del form: da quando la ricerca sta nel
     drawer e` un campo che si TOCCA davvero, e sotto i 16px Safari iOS zooma la
     pagina al focus senza tornare indietro. Il .92rem della barra desktop
     (14.72px) qui non va bene. */
  .main-nav .site-search__input { display: block; width: 100%; font-size: max(16px, .92rem); }
  .main-nav .site-search__btn { right: 1.75rem; }
}

.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  min-height: var(--hero-h);
  display: flex;
  align-items: flex-end;
  border-radius: var(--hero-r);
  margin-top: var(--frame-y);
}
/* Variante: titolo centrato (verticalmente + orizzontalmente) nel box hero,
   invece dell'allineamento in basso a sinistra di default. Reset margin
   dell'h1 per centratura geometrica perfetta (il margin-bottom globale
   .5em / .3em spostava il testo leggermente verso l'alto). */
.hero--center { align-items: center; justify-content: center; text-align: center; }
/* Hero piu` alto del normale (/servizi/assistenza/). Era un `style="min-height:700px"`
   INLINE nel markup: gli stili inline battono qualunque regola del foglio, quindi
   l'override mobile `.hero { min-height: 380px }` non ha mai avuto effetto e sul
   telefono l'immagine occupava 700px su 844, cioe` l'83% della prima schermata.
   Come classe, invece, la cascata funziona (vedi «Respiro su mobile» in fondo). */
.hero--tall { min-height: 700px; }
.hero--center .hero__inner { padding-block: 0; }
.hero--center .hero__title { margin: 0; }
.hero__bg {
  position: absolute; inset: 0;
  z-index: -2;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.65) 90%);
}
.hero__inner {
  padding: clamp(3rem, 6vw, 6rem) var(--band-px) clamp(2rem, 5vw, 5rem);
  position: relative; z-index: 1;
}
.hero__title {
  /* font-size ereditato dalla regola globale h1 (80px @1920). */
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  margin: 0 0 .3em;
  line-height: 1.2;
}
.hero__sub {
  font-size: clamp(1rem, 2.6vw, 3.125rem);
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.25;

}

.hero--split .hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: end;
  width: 100%;
}
.hero__title--md {
  font-size: clamp(1.75rem, 3.4vw, 4.125rem);
  letter-spacing: -.01em;
  line-height: 1.1;
}
.hero__copy { color: #fff; max-width: 60ch; }
.hero__copy p { margin: 0 0 .75em; line-height: 1.5; font-size: clamp(.95rem, 1vw, 1.125rem); }
.hero__copy p:last-child { margin-bottom: 0; }
@media (max-width: 800px) {
  .hero--split .hero__inner { grid-template-columns: 1fr; gap: 1.25rem; }
}

.subhero {
  background: var(--c-bg-hero);
  color: #fff;
  padding: clamp(2rem, 4vw, 4rem) var(--band-px);
  text-align: center;
  min-height: 450px;
  border-radius: var(--hero-r);
  display: flex;
  align-items: center;
  justify-content: center;
  /* ospita un'eventuale foto hero opzionale (.hero__bg, data-pf-img="hero_image").
     Senza foto resta il gradiente --c-bg-hero. */
  position: relative;
  overflow: hidden;
}
/* L'overlay scuro del .hero__bg serve solo a rendere leggibile il testo bianco
   QUANDO c'e` una foto: nel subhero (gradiente di default) va spento, e riacceso
   solo se l'<img> ha un src valorizzato dal binder data-pf-img. */
.subhero .hero__bg::after { display: none; }
.subhero .hero__bg:has(img[src])::after { display: block; }
/* ORDINE DI DISEGNO (fix 2026-07-13). `.hero__bg` nasce con `z-index: -2`, che funziona
   dentro `.hero` solo perche` QUELLA sezione non ha un background: un figlio con z-index
   NEGATIVO viene dipinto SOTTO al background del genitore posizionato. `.subhero` invece
   ha `background: var(--c-bg-hero)` (il gradiente grigio) → la foto finiva dietro al
   gradiente ed era invisibile: si vedeva la banda grigio scuro col titolo sopra, come se
   la foto non fosse stata caricata. Il commento qui sopra prometteva una cosa che il CSS
   non faceva: la combinazione subhero+foto non era MAI stata esercitata (nessuna pagina
   aveva un hero_image valorizzato), quindi il bug era latente.
   Fix: z-index 0 (sopra il background del genitore, sotto il contenuto) e contenuto
   esplicitamente a z-index 1 — il `.container` e` statico, quindi senza `position` verrebbe
   COPERTO dalla foto (i figli posizionati si dipingono dopo il contenuto in-flow). */
.subhero .hero__bg { z-index: 0; }
.subhero > .container { position: relative; z-index: 1; }
.subhero h1 { color: #fff; margin: 0; /* font-size: globale h1 (80px @1920) */ }
/* 3° livello catalogo (tipologia/filtro) + fallback 2° senza foto: fill verde, H1 bianco. */
.subhero--green { background: var(--c-green); }

.subhero--split { background: transparent; text-align: left; color: var(--c-ink); min-height: 0; padding-top: clamp(.5rem, 1.5vw, 1.25rem); padding-bottom: 0; padding-inline: 0; }
.subhero--split > .container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  width: 100%;
}
.subhero--split h1 { color: var(--c-ink); text-align: left; font-size: clamp(2.5rem, 5vw, 5rem); }
.subhero__media {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--r-md);
  background: #ddd center/cover no-repeat;
  overflow: hidden;
}
@media (max-width: 900px) {
  .subhero--split > .container { grid-template-columns: 1fr; }
  .subhero__media { aspect-ratio: 4 / 3; }
}

.marquee-band { padding: clamp(2.5rem, 5vw, 4.5rem) 0; overflow: hidden; }
.marquee-band + .section { padding-top: 0; }
.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee__track:hover { animation-play-state: paused; }
.marquee__track img {
  /* Stessa ragione della fascia home: si dimensiona in larghezza, non in altezza. */
  width: clamp(120px, 11vw, 190px);
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}
/* Le due sequenze del marquee (loghi + duplicato per il loop) sono regioni
   editabili data-pf-list-into; display:contents le rende trasparenti al layout
   così gli <img> restano figli flex diretti del track (gap/animazione intatti). */
.marquee__seq { display: contents; }

.section { padding: var(--section-py) 0; }
.section + .section { padding-top: 0; }
.section + .section--muted { padding-top: var(--section-py); }
.section--muted + .section--muted { margin-top: var(--section-py); }
.section--muted { background: var(--c-bg-3); padding-inline: var(--band-px); border-radius: var(--hero-r); }

/* Page-builder full reorder (migration 0031): when catalog.js applies a custom
   section order it adds body.sections-reordered. Source-order-dependent spacing
   (adjacency `+` rules, and the azienda margin/padding scheme) is then re-based
   to a uniform per-section padding, so any drag order looks consistent. Pages
   WITHOUT a custom order never get this class → they are byte-identical to before
   (zero-regression opt-in). */
body.sections-reordered .section + .section,
body.sections-reordered .section + .section--muted,
body.sections-reordered .section--muted + .section--muted { padding-top: var(--section-py); margin-top: 0; }
body.sections-reordered[data-page="azienda/index.html"] main > * + * { margin-top: 0; }
body.sections-reordered[data-page="azienda/index.html"] main > .section,
body.sections-reordered[data-page="azienda/index.html"] main > .marquee-band { padding-block: var(--section-py); }
/* Modificatore griglia Figma: fascia centrata che occupa N delle 12 colonne.
   Formula: (container - 11 gutter) / 12 * N + (N-1) gutter. */
.section--cols-8 > .container {
  max-width: calc((var(--container) - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter));
}
.section--cols-10 > .container {
  max-width: calc((var(--container) - 11 * var(--gutter)) / 12 * 10 + 9 * var(--gutter));
}
/* Qualsiasi .section che contiene un .form-card (form contatti/candidatura)
   viene automaticamente limitata a 10 colonne Figma, senza dover modificare
   il markup di ogni pagina. Scala in basso: sotto 1100px torna full container
   (il vincolo 10/12 farebbe risultare il form troppo stretto su tablet/mobile). */
.section:has(> .container > .form-card) > .container {
  max-width: calc((var(--container) - 11 * var(--gutter)) / 12 * 10 + 9 * var(--gutter));
}
@media (max-width: 1100px) {
  .section:has(> .container > .form-card) > .container { max-width: var(--container); }
  /* Lo STESSO ragionamento vale per i modificatori espliciti 8/12 e 10/12, non
     solo per le sezioni-form: erano rimasti attivi anche sul telefono, dove un
     vincolo a 10 colonne su 12 diventa un rientro di ~31px per lato. L'effetto
     era un'incoerenza visibile — le fasce a piena larghezza partivano da 16px e
     il testo delle sezioni da 47px, come se fosse indentato per sbaglio.
     La griglia Figma a 12 colonne descrive un ritmo editoriale che ha senso su
     schermo largo; su 390px l'unica colonna disponibile e` una. */
  .section--cols-8 > .container,
  .section--cols-10 > .container { max-width: var(--container); }
}
/* Mappa sedi (contatti / assistenza): MapLibre GL + tile vettoriali
   OpenFreeMap "Positron" (grigio chiaro), dal 24/09/2026 al posto di
   Leaflet + CARTO (filigrana senza chiave a pagamento). Controlli e popup
   restilizzati per integrarsi col design (verde Agri, radius pillola). */
.map {
  width: 100%;
  aspect-ratio: 21/9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #f1f1f1;
  box-shadow: var(--shadow-soft);
  /* Confina gli z-index alti di MapLibre (canvas, controlli, popup) in un
     nuovo stacking context, cosi` non emergono sopra header e dropdown. */
  isolation: isolate;
  position: relative;
  z-index: 0;
}
.map.maplibregl-map { font-family: var(--ff-body); background: #f1f1f1; }
.map .maplibregl-canvas { outline: none; }
.map .loc-pin { width: 32px; height: 44px; line-height: 0; cursor: pointer; }
.map .loc-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(16,27,21,.25)); }
.map .maplibregl-ctrl-group {
  border: none;
  box-shadow: 0 1px 4px rgba(16,27,21,.12);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.map .maplibregl-ctrl-group button { width: 32px; height: 32px; border: none; }
.map .maplibregl-ctrl-group button + button { border-top: 1px solid #ececec; }
.map .maplibregl-ctrl-group button:hover { background: var(--c-green); }
.map .maplibregl-ctrl-group button:hover .maplibregl-ctrl-icon { filter: brightness(0) invert(1); }
.map .maplibregl-ctrl-attrib {
  background: rgba(255,255,255,.85);
  font-size: 10px;
  padding: 2px 6px;
  color: var(--c-gray-2);
}
.map .maplibregl-ctrl-attrib a { color: var(--c-gray-1); }
.map .maplibregl-popup-content {
  border-radius: var(--r-sm);
  box-shadow: 0 4px 16px rgba(16,27,21,.12);
  padding: .75rem 2rem .75rem 1rem;
  font-size: .85rem;
  line-height: 1.4;
}
.map .maplibregl-popup-content strong { color: var(--c-ink); font-size: .95rem; display: block; margin-bottom: .15rem; }
.map .maplibregl-popup-content a { color: var(--c-green); text-decoration: none; font-weight: 600; }
.map .maplibregl-popup-close-button { font-size: 1.15rem; color: var(--c-gray-2); padding: .1rem .55rem; border-radius: 0 var(--r-sm) 0 var(--r-sm); }
.map .maplibregl-popup-close-button:hover { background: transparent; color: var(--c-ink); }
/* Finanziamenti: form vicino al footer prende lo stesso "doppio padding"
   che esiste fra due section (cioe` aggiungiamo --section-py al margin-bottom
   del form, dato che fra section e footer di default c'e` solo --frame-y). */
.section#form { margin-bottom: var(--section-py); }
/* Finanziamenti: ripristino il padding-top della FAQ (che la regola
   .section + .section azzererebbe) per staccarla dalla muted soprastante. */
body[data-page$="finanziamenti/index.html"] .faq-section { padding-top: var(--section-py); }
/* Usato (indice + trattori): equalizzo i gap tra le fasce della pagina.
   - Catalog -> Muted "vantaggi": di default la regola `.section + .section--muted`
     aggiunge 80px sopra al muted, sommati ai 80px sotto del catalog danno 160px.
     Riduco il padding-top della muted per pareggiare gli altri stacchi.
   - Muted -> FAQ e FAQ -> footer: gestiti col padding compatto della FAQ
     (top maggiore per compensare il padding-bottom della muted gia` presente)
     + margin-bottom = --section-py, cosi` sopra e sotto la FAQ resta lo
     stesso spazio. */
body[data-page="usato/index.html"] .section + .section--muted,
body[data-page="usato/trattori/index.html"] .section + .section--muted {
  padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
}
body[data-page^="usato/"] .faq-section,
body[data-page^="nuovo/"] .faq-section {
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: 20px;
  margin-bottom: calc(var(--section-py) / 2);
}
/* News: griglia articoli con piu` respiro fra le card (gap maggiorato sia
   in orizzontale che in verticale rispetto al gutter di griglia).
   Stesso trattamento sulla griglia "Altri articoli" nella pagina articolo. */
body[data-page="news/index.html"] .cards-4,
body[data-page="news/articolo/index.html"] .cards-4 { gap: clamp(1.5rem, 2.5vw, 3rem); }
/* News: spaziatura interna piu` ariosa fra categoria, titolo, testo e CTA. */
body[data-page="news/index.html"] .card__body,
body[data-page="news/articolo/index.html"] .card__body { gap: 1rem; padding: clamp(1.25rem, 1.5vw, 2rem); }
body[data-page="news/index.html"] .card__body .product-card__cat,
body[data-page="news/articolo/index.html"] .card__body .product-card__cat { margin-bottom: .25rem; }
body[data-page="news/index.html"] .card__cta,
body[data-page="news/articolo/index.html"] .card__cta { margin-top: 1.5rem; }
/* Articolo: intestazione (categoria + data) e immagine di copertina sopra il
   corpo testuale. Il body riusa .intro per la spaziatura fra paragrafi/h2. */
/* Testata dell'articolo: occhiello (categoria + data) SOPRA il titolo. La
   categoria introduce il titolo, non lo segue — per questo il margine sotto e`
   stretto: i due elementi vanno letti come un blocco solo. */
.article-meta {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .6rem;
  font-size: var(--fs-small);
  color: var(--c-gray-2);
}
.article-meta__date { color: var(--c-gray-2); }
/* Punto mediano fra categoria e data — solo quando la categoria c'e` davvero,
   altrimenti la data aprirebbe con un separatore orfano. */
.product-card__cat + .article-meta__date::before {
  content: "·";
  margin-right: .55rem;
  opacity: .6;
}
.article__title {
  font-size: var(--fs-h1);
  line-height: 1.15;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.article-hero {
  width: 100%;
  aspect-ratio: 21/9;
  background: #ddd center/cover no-repeat;
  border-radius: var(--r-md);
  margin-bottom: clamp(2rem, 3vw, 3rem);
}
/* In-article rich-text hierarchy (WYSIWYG editor output: H2/H3/H4, lists,
   inline images, links, quotes). Distinct, descending scale — smaller than the
   hero/section H2 — so editorial subheads read as document structure. */
.article-body h2 { font-size: var(--fs-h2); margin-top: 1.75rem; margin-bottom: .5rem; }
.article-body h3 { font-size: 1.25rem; margin-top: 1.4rem; margin-bottom: .4rem; }
.article-body h4 { font-size: 1.0625rem; margin-top: 1.2rem; margin-bottom: .35rem; }
.article-body ul, .article-body ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.article-body li { margin-bottom: .35rem; font-size: var(--fs-body); color: var(--c-gray-2); }
.article-body a { color: var(--c-green); text-decoration: underline; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: 1.25rem 0; display: block; }
.article-body blockquote { margin: 1.25rem 0; padding: .25rem 0 .25rem 1rem; border-left: 3px solid var(--c-green); color: var(--c-gray-2); font-style: italic; }
body[data-page$="assistenza/index.html"] .section#form { margin-top: var(--section-py); margin-bottom: 0; padding-bottom: var(--section-py); }
body[data-page$="assistenza/index.html"] .section#form .form-card { background: transparent; padding: 0; }
.section__head { max-width: 1280px; margin: 0 auto 3rem; text-align: center; }
.section__head h2 { font-size: var(--fs-h1); margin: 0 0 .5em; }
.section__head p { font-size: var(--fs-body); color: var(--c-gray-2); margin: 0 auto; max-width: 880px; }
.section__head--left { text-align: left; margin-left: 0; }
.section__head--left p { margin: 0; max-width: none; }
.section__head--left .section__sub { max-width: 60ch; }
.section__head--wide { max-width: none; }
.section__head--wide p { max-width: none; }

.section__head--split {
  max-width: none;
  text-align: left;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2.5rem);
  flex-wrap: wrap;
}
.section__head--split h2 { margin: 0 0 .5rem; }
.section__sub { font-size: var(--fs-body); color: var(--c-gray-2); margin: 0; max-width: 60ch; }
@media (max-width: 700px) {
  .section__head--split { align-items: flex-start; }
}

.cat-tabs { display: flex; gap: .25rem; flex-wrap: wrap; }

.cat-tabs--standalone {
  justify-content: flex-end;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
.cat-tabs__tab {
  border: 1px solid #d8d8d8;
  background: transparent;
  color: var(--c-ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  padding: .55rem 1.3rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.cat-tabs__tab:hover { background: var(--c-bg-3); border-color: #c0c0c0; }
.cat-tabs__tab.is-active { background: var(--c-green); color: #fff; border-color: var(--c-green); }

.intro {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.5vw, 1.75rem);
}
.intro h2 { font-size: var(--fs-h1); margin: 0; }

.intro p {
  font-size: var(--fs-body);
  color: var(--c-gray-2);
  margin: 0;
  max-width: calc((var(--container) - 11 * var(--gutter)) / 12 * 10 + 9 * var(--gutter));
}
.intro--wide p { max-width: none; }
/* I CORPI ARTICOLO (news e pagine create da admin) corrono a tutta griglia,
   come il resto del sito: richiesta committente 21/09/2026. Serviva togliere
   la gabbia in DUE punti — `section--cols-10` sulla sezione (titolo e foto) e
   questo cap di .intro p (il testo), altrimenti il titolo arrivava a 1270 e il
   paragrafo si fermava a 1056: peggio del problema di partenza. */
.intro.article-body p { max-width: none; }
/* .intro--wide: toglie il cap a 10/12 colonne di .intro p e lascia correre
   il testo su tutta la larghezza del container (richiesta committente
   21/09/2026, home). E` un MODIFICATORE apposta: .intro p e` condivisa con
   i corpi articolo (.intro.article-body) e con lavora-con-noi, dove la
   misura corta va tenuta per leggibilita`. */
.intro--center { align-items: center; text-align: center; }
.intro--center h2 { text-align: center; }
.intro--center p { max-width: none; margin-inline: auto; }

.hero__inner--center { display: flex; align-items: center; justify-content: center; text-align: center; }
.hero__inner--center .hero__title { text-align: center; }

.fan-band {
  position: relative;
  display: flex;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 3vw, 3rem);
  background: var(--c-bg-3);
  border-radius: var(--hero-r);
}
.fan-band--left { justify-content: flex-start; align-items: center; }
.fan-band--right { justify-content: flex-end; align-items: center; }
.fan-band--shape {
  background-color: transparent;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  aspect-ratio: 1001 / 700;
  padding: clamp(1.5rem, 3vw, 3rem);
}
.fan-band--shape .fan-band__card { width: 78%; }

.fan-hero {
  position: relative;
  width: 100%;
  background: #d8d8d8;
  border-radius: var(--hero-r);
  aspect-ratio: 1001 / 420;
  overflow: hidden;
}
.fan-hero .fan-band--shape {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: calc(60% + 2px);
  aspect-ratio: auto;
  z-index: 1;
}
.fan-hero .fan-band--shape.fan-band--left { left: -2px; }
.fan-hero .fan-band--shape.fan-band--right { right: -2px; }
/* Composed band: editable photo layer behind the decorative arrow shape.
   The shape (z-index 1) covers ~60% on one side and carries the text card;
   this photo fills the whole hero so it shows through on the open side. The
   editor swaps the photo (data-pf-img="*_photo") without touching the graphic. */
.fan-band__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--hero-r);
  z-index: 0;
}
@media (max-width: 900px) {
  .fan-hero { aspect-ratio: auto; background: transparent; overflow: visible; display: flex; flex-direction: column; }
  .fan-hero .fan-band--shape {
    position: static;
    transform: none;
    width: 100%;
    aspect-ratio: auto;
  }
  /* Stack the photo as a banner above the (now full-width) text panel. */
  .fan-band__photo { position: static; inset: auto; width: 100%; aspect-ratio: 16 / 9; }
}
.fan-band__card {
  position: relative;
  width: 55%;
  padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fan-band__card h2 {
  margin: 0 0 .25rem;
  font-size: var(--fs-h1);
  line-height: 1.15;
}
.fan-band__card p {
  margin: 0;
  color: var(--c-gray-2);
  font-size: var(--fs-body);
}
.fan-band__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
@media (max-width: 900px) {
  .fan-band--shape { aspect-ratio: auto; background-image: none !important; background-color: var(--c-bg-3); border-radius: var(--hero-r); transform: none; }
  .fan-band--shape > .fan-band__card { transform: none; }
  .fan-band__card { padding: clamp(1.5rem, 4vw, 2.5rem); background: #fff; border-radius: var(--hero-r); }
  /* La larghezza va RIDICHIARATA qui con la stessa forma del selettore desktop.
     `.fan-band__card { width: 100% }` (0,1,0) NON basta: piu` sopra c'e`
     `.fan-band--shape .fan-band__card { width: 78% }` (0,2,0), e una @media NON
     aggiunge specificita` — quindi il 78% vinceva anche sul telefono. Effetto
     misurato a 390px: card 218px invece di 280, titolo spezzato una parola per
     riga e il bottone «RICHIEDI ASSISTENZA» (234px) che usciva dal riquadro di
     64px. */
  .fan-band--shape .fan-band__card { width: 100%; }
  /* ...e i bottoni non devono comunque poter sforare la card che li contiene:
     a 390px la CTA piena misura 234px contro 232px di spazio utile. */
  .fan-band__cta { width: 100%; }
  .fan-band__cta .btn { max-width: 100%; }
}

.media-placeholder {
  background: #d8d8d8;
  border-radius: var(--hero-r);
  aspect-ratio: 16 / 7;
  margin-top: clamp(1.5rem, 3vw, 3rem);
  width: 100%;
}

.form-consent {
  margin: 1.25rem 0;
  font-size: .9rem;
  color: var(--c-gray-2);
}
.form-consent label { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; }
.form-consent input[type="checkbox"] { margin-top: .15rem; }

.cards-2 {
  display: grid;
  /* minmax(0,...) e non `1fr` secco: `1fr` vale `minmax(auto, 1fr)`, e quell'`auto`
     impedisce alla traccia di scendere sotto il min-content dell'item. Con la
     .card-big__media in aspect-ratio la misura minima si gonfia, e la colonna
     restava piu` LARGA del contenitore (misurato a 390px: traccia 448px dentro
     328px). Non si vedeva come scroll — body ha overflow-x:clip — ma come 120px
     di card tagliati via. minmax(0,1fr) permette alla traccia di stringersi
     davvero; dove lo spazio c'e`, il risultato e` identico a prima. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 4vw, 4.5rem);
}
.cards-2--stack { grid-template-columns: 1fr; }
.cards-2--stack .card-big { min-height: 450px; }
.cards-2--stack .card-big__body { justify-content: center; }

.card-big {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.25vw, 1.5rem);
  background: var(--c-bg-3);
  border-radius: var(--r-md);
  padding: clamp(1.75rem, 2.6vw, 3rem);
}
.card-big__media {
  aspect-ratio: 4/3;
  background: #ddd center/cover no-repeat;
  border-radius: var(--r-md);
}
.card-big__body {
  display: flex;
  flex-direction: column;
  gap: clamp(.75rem, 1vw, 1.25rem);
  flex: 1;
}
.card-big__body h3 { font-size: var(--fs-h2); margin: 0; line-height: 1.2; }
.card-big__body p { font-size: var(--fs-body); color: var(--c-gray-2); margin: 0; flex: 1; }
.card-big__cta { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) { .cards-2 { grid-template-columns: minmax(0, 1fr); } }

/* Fasce Ricambi: banda full-width con immagine di sfondo (data-pf-img su .hero__bg
   img, coprente) + overlay scuro + contenuto sovrapposto (logo, H2, testo, CTA).
   isolation:isolate forza uno stacking context così la foto a z-index:-2 resta
   sopra il fallback #3d3d3d e sotto il contenuto. La 2a fascia (--right) specchia
   contenuto e direzione del gradiente. */
.ricambi-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--hero-r);
  background: #3d3d3d;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 38vw, 480px);
  padding: clamp(2rem, 5vw, 4rem);
}
.ricambi-band .hero__bg::after {
  background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.1) 100%);
}
.ricambi-band__body {
  position: relative;
  z-index: 1;
  max-width: 540px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(.9rem, 1.4vw, 1.4rem);
}
.ricambi-band__logo { max-height: 60px; width: auto; }
.ricambi-band__body h2 { color: #fff; margin: 0; font-size: var(--fs-h2); line-height: 1.2; }
.ricambi-band__body p { color: rgba(255,255,255,.92); font-size: var(--fs-body); margin: 0; }

/* ── Box magazzino nella fascia ricambi (committente 21/09/2026) ──────────
   Il mockup del cliente li disegnava come pannelli GRIGIO CHIARO traslucidi con
   testo scuro, sopra una foto scura: illeggibili. Qui si fa il contrario — velo
   NERO sotto testo bianco — che e` l'unico modo di avere contrasto garantito
   senza coprire la fotografia (una card bianca piena la nasconderebbe, che e`
   l'altro estremo). Il velo non dipende dal gradiente della fascia: il box
   porta il proprio fondo, quindi resta leggibile anche sul lato destro della
   foto, dove il gradiente e` gia` sceso al 10%. */
.ricambi-band__body--wide { max-width: min(880px, 78%); }
.ricambi-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.75rem, 1.4vw, 1.15rem);
  width: 100%;
}
.ricambi-box {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(.9rem, 1.5vw, 1.3rem);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .58);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
}
.ricambi-box__title {
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.ricambi-box__row {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0;
  font-size: .92rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
}
.ricambi-box__icon { width: 17px; height: 17px; flex: none; margin-top: .12rem; color: var(--c-green-light); }
a.ricambi-box__row:hover { color: #fff; text-decoration: underline; }
/* La variante --right (corpo a destra + gradiente speculare) e` stata RIMOSSA il
   21/09/2026 su richiesta committente: entrambe le fasce ricambi hanno ora il
   blocco a sinistra, come la prima. Non bastava allineare il testo — spostare il
   corpo senza ribaltare il gradiente avrebbe messo il testo bianco sul lato
   CHIARO della foto. Tolta la classe dal markup, queste regole restavano morte:
   la fascia AGCO era l'unica a usarle. */
@media (max-width: 700px) {
  .ricambi-band { padding: clamp(1.5rem, 6vw, 2.25rem); min-height: clamp(300px, 72vw, 380px); }
  .ricambi-band__body { max-width: none; align-items: flex-start; text-align: left; }
  .ricambi-boxes { grid-template-columns: 1fr; }
  /* Il logo va limitato in LARGHEZZA, non solo in altezza. `max-height: 60px`
     basta per un marchio verticale (AGCO: 140x173 → 49px di larghezza), ma non
     per uno orizzontale: quello di Agri Ravagnolo e` 317x57 (5.6:1), sta sotto
     i 60px di altezza e quindi non viene toccato dal vincolo — su desktop, in
     un corpo da 540px, occupa il 59% ed e` corretto; su mobile il corpo scende
     a 310px e il logo lo riempiva TUTTO, stendendosi sulla foto come una
     fascia invece di leggersi come un marchio. */
  .ricambi-band__logo { max-width: min(190px, 62%); }
  /* Velo piu` deciso IN ALTO. Su desktop il gradiente e` orizzontale perche` il
     testo occupa la sinistra; qui e` gia` verticale, ma partiva da .4 proprio
     dove stanno logo e titolo. Su una foto chiara (gli scatoloni della fascia
     AGCO) .4 non basta: con un fondo sui 240 la resa e` ~144 e il testo bianco
     sta sotto 2.9:1, mentre per il corpo del testo la soglia AA e` 4.5:1. Per
     scendere sotto i ~114 necessari serve almeno il 53% — .62 lascia margine
     anche sulle immagini piu` luminose senza spegnere la foto. */
  .ricambi-band .hero__bg::after {
    background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.78) 100%);
  }
}

.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.card {
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}
.card__media { aspect-ratio: 1/1; background: #ddd center/cover no-repeat; }
.card__body { padding: clamp(1rem, 1.2vw, 1.5rem); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card__body h3 { font-size: var(--fs-h2); margin: 0; }
.card__body p { font-size: var(--fs-body); color: var(--c-gray-2); margin: 0; flex: 1; }
.card__cta { margin-top: 1rem; }
@media (max-width: 1100px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cards-4 { grid-template-columns: 1fr; } }

.svc-wrap {
  background: #FAFAFA;
  border-radius: var(--hero-r);
  padding: max(2rem, 4.17vw) var(--band-px);
}
.svc-wrap .section__head { margin-bottom: max(1.5rem, 2vw); }

.svc-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #FFFFFF;
  border-radius: var(--card-r);
  padding: max(1rem, 1.3vw) max(1.25rem, 1.56vw) max(1.5rem, 2.08vw);
}
.svc-card__icon {
  background: #F7F7F7;
  border-radius: var(--icon-box-r);
  aspect-ratio: 346/299;
  display: grid;
  place-items: center;
  padding: max(.75rem, 1.56vw);
  margin-bottom: max(.75rem, 1.56vw);
  transition: background var(--t), transform var(--t);
}
.svc-card__icon svg,
.svc-card__icon img {
  width: 38%;
  height: auto;
  max-width: 160px;
  max-height: 70%;
  object-fit: contain;
  color: var(--c-ink);
}
.svc-card:hover .svc-card__icon { background: #efefef; transform: translateY(-2px); }
.svc-card h3 {
  font-size: var(--fs-h2);
  margin: 0 0 .8rem;
  line-height: 1.15;
  color: var(--c-ink);
  font-weight: 700;
}
.svc-card p {
  color: var(--c-gray-2);
  font-size: var(--fs-body);
  margin: 0;
  line-height: 1.55;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}
.split__media { aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden; background: #ddd center/cover no-repeat; }
.split__body h2 { font-size: var(--fs-h1); margin: 0 0 1rem; }
.split__body p { color: var(--c-gray-2); font-size: var(--fs-body); margin: 0 0 1.2rem; }
.split__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* RIMOSSA una SECONDA definizione di `.ricambi-band` che viveva qui (versione
   precedente del componente: `__image` + `__shape` SVG + `__content` al 42%).
   Il suo markup NON esiste piu` — ne` nelle pagine generate ne` in build.py:
   la fascia vera e` quella definita piu` in alto (`__body` + `__logo`, con la
   foto in .hero__bg). Ma la regola base `.ricambi-band {…}` NON era morta: essendo
   piu` in basso a parita` di specificita`, sovrascriveva quella viva su tre
   proprieta` — `background` (#3d3d3d → #fff), `border-radius` (--hero-r → --r-md)
   e `min-height` — e il suo blocco mobile azzerava anche l'altezza
   (`min-height: auto`). Risultato: le fasce di /ricambi/ rendevano con meta`
   regole di un componente e meta` dell'altro.
   Se serve reintrodurre quel layout, va fatto con un NOME DI CLASSE DIVERSO:
   due componenti distinti non possono condividere `.ricambi-band`. */

.brands {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 3rem);
  margin: 2rem 0;
}
.brands__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 4.5rem);
}
.brands__row img {
  width: auto;
  filter: grayscale(0);
  opacity: .92;
  transition: transform var(--t), opacity var(--t);
}
/* I loghi della fascia sono tele larghe 900px, alte quanto il segno (scala
   ottica, come la vetrina marchi): si dimensionano in LARGHEZZA. Con max-height
   uguale per tutti — com'era — Fendt (5.7:1) rendeva 455px e Massey (1.7:1) 138. */
.brands__row img { width: clamp(150px, 17vw, 250px); height: auto; }
.brands__row img:hover { opacity: 1; transform: scale(1.04); }

.faq {
  max-width: calc(((var(--container) + var(--gutter)) / 12 * 10) - var(--gutter));
  margin: 0 auto;
}
.faq__item {
  background: #FAFAFA;
  border-radius: var(--r-md);
  margin-bottom: 1rem;
  overflow: hidden;
}
.faq__q {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.5rem 4rem 1.5rem 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-ink);
  position: relative;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { display: none; content: ''; }

.faq__q h4 { margin: 0; line-height: 1.25; }
/* L'icona +/− e` fatta di DUE BARRE, non di un glifo. Prima erano due `content`
   diversi ('+' e '−') commutati dallo stato [open]: `content` non e` animabile,
   quindi la `transition: transform` scritta qui sotto era inerte e il segno
   cambiava di scatto. Ora ::after e` la barra orizzontale (ferma) e ::before la
   verticale: chiusa sta a 90° (le due disegnano un +), aperta ruota a 0° e si
   sovrappone all'altra (→ un −). Stesso segno di prima, ma che si trasforma. */
.faq__q::before,
.faq__q::after {
  content: '';
  position: absolute;
  right: 1.5rem; top: 50%;
  width: 18px; height: 3px;
  border-radius: 2px;
  background: var(--c-green);
  transform: translateY(-50%);
  transition: transform var(--t-faq) var(--ease-faq);
}
.faq__q::before { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__q::before { transform: translateY(-50%) rotate(0deg); }
.faq__a { padding: 0 2rem 1.5rem; color: var(--c-gray-2); }

/* APERTURA/CHIUSURA MORBIDA del <details>.
   Prima si dissolveva solo il TESTO dentro al pannello, mentre il box saltava
   alla sua altezza di colpo — e la chiusura non era animata affatto. Da qui la
   durezza: l'occhio vede il salto dell'altezza, non la dissolvenza.
   Animare l'altezza di un <details> e` storicamente il caso piu` ostico del CSS:
   `height:auto` non e` interpolabile, e finche` e` chiuso il browser NON
   renderizza il contenuto (quindi il vecchio trucco grid-template-rows 0fr→1fr
   non ha presa). Servono due pezzi che si incastrano:
     · ::details-content — lo pseudo-elemento che avvolge tutto cio` che non e` il
       <summary>: l'unico appiglio per animare l'apertura senza JS;
     · interpolate-size: allow-keywords — sblocca l'interpolazione verso `auto`.
   `content-visibility` con `allow-discrete` fa si` che il contenuto resti
   renderizzato per tutta la CHIUSURA, invece di sparire al primo frame.
   DEGRADA BENE: dove non sono supportati, il pannello si apre di scatto come
   faceva prima. Si perde la morbidezza, non si rompe nulla. */
:root { interpolate-size: allow-keywords; }

.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size var(--t-faq) var(--ease-faq),
              opacity calc(var(--t-faq) * .8) var(--ease-faq),
              content-visibility var(--t-faq) allow-discrete;
}
.faq__item[open]::details-content {
  block-size: auto;
  opacity: 1;
}

.form-card {
  /* La larghezza viene dettata dal parent .container (vincolato a 10 colonne
     Figma dalla regola .section:has(> .container > .form-card) > .container).
     Niente max-width hardcoded qui: altrimenti il form non scala oltre i
     1280px sulle alte risoluzioni. */
  width: 100%;
  margin: 0 auto;
  background: var(--c-bg-3);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 3rem);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.form-grid .full { grid-column: 1 / -1; }
.field {
  display: flex; flex-direction: column;
}
.field input,
.field textarea {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: var(--r-sm);
  padding: 1rem 1.1rem;
  font: inherit;
  /* MAI sotto i 16px, ed e` un vincolo di iOS, non una scelta tipografica: Safari
     su iPhone ZOOMA la pagina quando si tocca un campo con testo < 16px, e al blur
     non torna indietro — il visitatore resta su una pagina ingrandita e sfalsata,
     a meta` compilazione del form. `font: inherit` qui ereditava --fs-body, che
     parte da 0.9375rem = 15px: mancava per un pixel. Il max() alza SOLO dove
     serve; da 16px in su (desktop, dove --fs-body arriva a 1.125rem) non cambia
     nulla. Deve stare DOPO `font: inherit`, che e` una shorthand e lo azzererebbe. */
  font-size: max(16px, var(--fs-body));
  color: var(--c-ink);
  transition: border-color var(--t-fast);
}
.field textarea { min-height: 160px; resize: vertical; }
/* Match the native <select> (Tipologia) to the text inputs: same border /
   radius / padding / font, plus a custom chevron (browser default styling
   otherwise makes it look out of place next to the inputs). */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23101B15' stroke-width='1.8'><path d='M1 1l5 5 5-5'/></svg>") no-repeat right 1.1rem center / 12px 8px;
  border: 1px solid #e2e2e2;
  border-radius: var(--r-sm);
  padding: 1rem 2.6rem 1rem 1.1rem;
  font: inherit;
  font-size: max(16px, var(--fs-body));   /* stessa ragione degli input: anti auto-zoom iOS */
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-green); }
.field--check { display: flex; flex-direction: row; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--c-gray-2); }
.form-submit { text-align: center; margin-top: 1.5rem; }
/* Nota informativa reCAPTCHA sotto il pulsante dei moduli (24/09/2026). */
.form-note { font-size: .8rem; color: var(--c-gray-2); text-align: center; margin: .6rem 0 0; line-height: 1.4; }
.form-note a { color: inherit; text-decoration: underline; }
/* Link ufficiali AGCO (assistenza) e sito ufficiale del marchio (pagine marchio) —
   richiesti dall'audit AGCO 2026: link testuali, sottolineati, con separatore. */
.agco-links { margin: 1rem 0 0; font-size: .95rem; }
.agco-links a { color: var(--c-green); text-decoration: underline; font-weight: 600; }
/* Pagine policy (Privacy / Cookie / Note legali): niente banner scuro, solo il
   titolo allineato a sinistra sopra il testo (richiesta committente 24/09/2026). */
.policy-head { padding-bottom: 0; }
.policy-title { text-align: left; margin: .5rem 0 0; font-size: var(--fs-h1, 2.25rem); line-height: 1.15; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.cta-banner {
  background: var(--c-green);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--band-px);
  position: relative;
  overflow: hidden;
}
.cta-banner h2 { color: #fff; font-size: var(--fs-h1); margin: 0 0 .8rem; }
.cta-banner p { font-size: var(--fs-body); color: rgba(255,255,255,.9); margin: 0 0 1.5rem; max-width: 700px; }
.cta-banner__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Pagina /azienda/: la breadcrumb in flusso normale arriva troppo attaccata al
   box grigio sotto (--c-bg-3). Aggiungiamo respiro fra i due tramite margin-top
   sulla sezione muted. */
.azienda-intro { margin-top: clamp(1rem, 2vw, 2.5rem); }

/* /azienda/: gap di 100px FRA le fasce (non padding interno). Lo realizzo come
   margin-top: 100px su ogni elemento successivo al primo dentro a main, cosi`
   e` esattamente 100px in ogni transizione anche quando una fascia ha un bg
   (grigio/verde) e l'altra no. Le sezioni senza bg azzero il padding-block
   cosi` il loro contenuto inizia subito dopo il margin di 100px; le sezioni
   con bg (section--muted, cta-banner) mantengono il loro padding interno per
   dare respiro al contenuto dentro al box colorato. */
body[data-page="azienda/index.html"] main > * + * { margin-top: 100px; }
body[data-page="azienda/index.html"] main > .section:not(.section--muted),
body[data-page="azienda/index.html"] main > .marquee-band { padding-block: 0; }

/* .azienda-intro: l'immagine tocca il bordo basso del box grigio (padding-bottom 0)
   e mantiene un piccolo margin-top dalla breadcrumb (sovrascrive il 100px di
   default sopra). Specificita` 0,2,1 vince su `main > * + *` (0,1,2). */
body[data-page="azienda/index.html"] main > .azienda-intro { padding-bottom: 0; }
body[data-page="azienda/index.html"] .azienda-intro { margin-top: clamp(1rem, 2vw, 2.5rem); }

/* Il footer e` fratello di main (non figlio), quindi `main > * + *` non lo
   tocca: applichiamo lo stesso gap di 100px fra ultima fascia e footer. */
body[data-page="azienda/index.html"] .site-footer { margin-top: 100px; }

/* Fascia "Contattaci" su /azienda/: altezza 530px e angoli stondati per
   matchare lo stile delle altre fasce con background. */
body[data-page="azienda/index.html"] .cta-banner {
  min-height: 530px;
  border-radius: var(--hero-r);
}

/* Foto team su /azienda/: altezza 700px (override del default 16/10). */
body[data-page="azienda/index.html"] #team .split__media {
  aspect-ratio: auto;
  height: 700px;
}

/* Paragrafo sotto l'H1 "La nostra azienda": largo 8 colonne della griglia
   Figma (default 880px = circa 7 cols, qui forzo 8). */
body[data-page="azienda/index.html"] .azienda-intro .section__head p {
  max-width: calc((var(--container) - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter));
}

/* Pilastri (head + body) su /azienda/: layout pulito 50/50 con la stessa
   identica griglia in entrambi. Colonna sinistra (H2 + tabs) e colonna destra
   (paragrafo + pannello) restano allineate fra loro, niente "invasione"
   reciproca. `min-width: 0` sui cell impedisce ai grid items di crescere oltre
   1fr quando il contenuto interno (es. il pannello con un secondo grid
   annidato) ha un min-content piu` largo del cell. */
body[data-page="azienda/index.html"] .pilastri-head,
body[data-page="azienda/index.html"] .pilastri {
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
}
body[data-page="azienda/index.html"] .pilastri-head > *,
body[data-page="azienda/index.html"] .pilastri > * { min-width: 0; }
/* Il 50/50 qui sopra vale SOLO dove c'e` spazio. Va disfatto esplicitamente con
   la stessa forma di selettore: piu` in basso esistono gia` gli override mobile
   (`.pilastri-head` e `.pilastri` a 1fr dentro @media 900px) ma pesano (0,1,0)
   contro i (0,2,1) di queste regole per-pagina — e una @media non aggiunge
   specificita`, quindi perdevano. Effetto misurato a 390px: due colonne da 132px
   affiancate, con le etichette del menu tagliate (145px di testo in 132). */
@media (max-width: 900px) {
  body[data-page="azienda/index.html"] .pilastri-head,
  body[data-page="azienda/index.html"] .pilastri { grid-template-columns: 1fr; }
}

/* /marchi/: titolo a sinistra + paragrafo a destra (layout 1.1fr/1fr di
   default), allineati al BOTTOM (ultime righe allineate). E` il default di
   .hero--split, lasciato esplicito per chiarezza. */
body[data-page="marchi/index.html"] .hero--split .hero__inner {
  align-items: end;
}

/* /marchi/: forza il colore bianco sul paragrafo hero (la regola base
   .hero__copy ha gia` color: #fff ma rendiamo esplicito anche sui <p>
   per evitare ereditarieta` rotta). */
body[data-page="marchi/index.html"] .hero__copy,
body[data-page="marchi/index.html"] .hero__copy p { color: #fff; }

/* Variante con foto di sfondo: l'immagine occupa la meta` destra e sfuma a
   sinistra sul verde tramite un mask gradient, lasciando spazio leggibile al
   testo e ai bottoni. Su mobile il box e` piu` corto e la foto si vede meno. */
.cta-banner--bg > .container { position: relative; z-index: 1; }
.cta-banner__bg {
  position: absolute;
  inset: 0 0 0 35%;
  background: #2f6f1a center/cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
          mask-image: linear-gradient(to right, transparent 0%, #000 40%);
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 900px) {
  .cta-banner__bg { inset: 0 0 0 55%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 60%); mask-image: linear-gradient(to right, transparent 0%, #000 60%); }
}

.site-footer {
  background: var(--c-bg-3);
  border-radius: var(--hero-r);
  overflow: hidden;
  padding-top: 20px;
  margin-top: 40px;
}
.site-footer__top { padding-inline: var(--band-px); }
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) 2fr minmax(200px, .9fr);
  column-gap: clamp(1.5rem, 3vw, 4rem);
  row-gap: clamp(2rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 3vw, 3.5rem);
  align-items: start;
}

.footer-brand { display: flex; flex-direction: column; gap: 1.25rem; }
.footer-logo {
  display: block;
  height: clamp(44px, 3.4vw, 70px); /* 2026-09-02: ridotto su richiesta committente (era 56/4.4vw/90) */
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  object-fit: contain;
}
.footer-brand__partner { display: flex; align-items: center; gap: 1rem; color: var(--c-ink); font-size: 1rem; font-weight: 400; }
.footer-brand__partner img { height: clamp(40px, 3vw, 56px); width: auto; }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(.5rem, 1vw, 1rem);
  row-gap: clamp(1rem, 1.5vw, 1.75rem);
  padding-top: .5rem;
}
.footer-nav__col { display: flex; flex-direction: column; gap: clamp(.9rem, 1.4vw, 1.75rem); }
.footer-nav a { font-size: var(--fs-body); color: var(--c-ink); font-weight: 400; letter-spacing: .04em; }
.footer-nav a:hover { color: var(--c-green); }

.footer-cta { display: flex; justify-content: flex-end; align-items: flex-start; padding-top: .25rem; }

.footer-addr { display: flex; flex-direction: column; gap: .85rem; }
.footer-addr h4 { font-weight: 400; }
.footer-addr__line {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--fs-body);
  color: var(--c-ink);
  margin: 0;
  font-weight: 400;
}
.footer-addr__line--main { font-weight: 400; }
.footer-addr a.footer-addr__line:hover { color: var(--c-green); }
.footer-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--c-green); }

.footer-cert { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.footer-cert__row { display: flex; align-items: center; gap: 1rem; }
.footer-cert__seal { max-height: clamp(56px, 4.5vw, 86px); width: auto; }
.footer-cert__text { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; }
.footer-cert__text strong { font-size: var(--fs-body); font-weight: 400; color: var(--c-ink); letter-spacing: .02em; }
.footer-cert__text a { font-size: .9rem; color: var(--c-gray-2); text-decoration: underline; }
.footer-cert__text a:hover { color: var(--c-green); }

/* Pulsante di download del certificato ISO (richiesta committente 21/09/2026).
   Prima era un link testuale sottolineato che per giunta puntava a "#".
   Selettore QUALIFICATO (a.footer-cert__dl dentro __text) perche` la regola
   generica `.footer-cert__text a` ha specificita` (0,1,1) e vincerebbe sulla
   sola classe. Outline e non pieno: nel footer un CTA pieno competerebbe con
   "CONTATTACI", che resta l'azione primaria. */
.footer-cert__text a.footer-cert__dl {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .4rem;
  padding: .45rem .9rem;
  border: 1px solid var(--c-green);
  border-radius: 999px;
  color: var(--c-green);
  font-size: .85rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.footer-cert__text a.footer-cert__dl:hover { background: var(--c-green); color: #fff; }
.footer-cert__text a.footer-cert__dl svg { width: 14px; height: 14px; flex: none; }

.footer-social { display: flex; gap: .65rem; }
.footer-social__link {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--c-ink);
  transition: transform var(--t-fast), color var(--t);
}
.footer-social__link:hover { transform: translateY(-1px); }
.footer-social__link--ig { color: #E1306C; }
.footer-social__link--fb { color: #1877F2; }
.footer-social__link--tt { color: #111; }

.site-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: clamp(.85rem, 1.2vw, 1.25rem) var(--band-px);
  font-size: .95rem;
  color: var(--c-gray-2);
  border-top: 1px solid #ececec;
}
.site-footer__legal a { color: inherit; text-decoration: none; }
.site-footer__legal a:hover { color: var(--c-green); }

.site-footer__bar {
  background: var(--c-green);
  color: #fff;
  padding: .85rem var(--band-px);
}
.site-footer__bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .95rem;
  font-weight: 400;
  flex-wrap: wrap;
  gap: 1rem;
}
.site-footer__bar a { color: #fff; }
/* Crediti vuoti (richiesta committente 06/10/2026): lo span resta come aggancio
   del campo «Credit» dell'admin, ma da vuoto non deve occupare ne' spazio ne' gap. */
.site-footer__bar [data-sf="credit"]:empty { display: none; }

@media (max-width: 1100px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .footer-cta { grid-column: 1 / -1; justify-content: flex-start; }
  .footer-cert { align-items: flex-start; text-align: left; grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    row-gap: 1rem;
    padding-bottom: 1.25rem;
  }
  .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    row-gap: .65rem;
    padding-top: 0;
  }
  .footer-nav__col { gap: .65rem; }
  .footer-brand { gap: .75rem; }
  .footer-logo { height: 40px; }
  .footer-brand__partner img { height: 36px; }
  .footer-cert { gap: .75rem; }
  .footer-cert__seal { max-height: 48px; }
  .footer-addr { gap: .5rem; }
  .footer-cta { display: none; }
}

.crumbs {
  font-size: .95rem;
  color: var(--c-gray-2);
  padding: 1rem 0 0;
  display: flex;
  gap: .4rem;
  align-items: center;
}
.crumbs a:hover { color: var(--c-green); }
.crumbs span[aria-current="page"] { color: var(--c-ink); }

.catalog {
  display: grid;

  grid-template-columns: 3fr 4fr 4fr;
  grid-template-rows: auto 1fr;
  column-gap: clamp(1.25rem, 3.82vw, 4.58rem);
  row-gap: clamp(1.25rem, 2vw, 2rem);
  margin-top: 2rem;
  align-items: start;
}

.filters {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: subgrid;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  align-self: stretch;
}
.filters__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 .25rem .35rem;
}

.filters__body {
  display: block;
  position: sticky;
  top: 100px;
  align-self: start;
}
.filters__title { font-size: 1.05rem; font-weight: 700; color: var(--c-ink); margin: 0; }
.filters__reset {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .95rem;
  color: var(--c-gray-2);
  cursor: pointer;
  text-decoration: underline;
}
.filters__reset:hover { color: var(--c-green); }

.filters__group { border-top: 1px solid #ececec; padding: .35rem 0; }
.filters__group:first-of-type { border-top: 1px solid #ececec; }

.filters__label {
  display: block;
  background: #ECECEC;
  border-radius: var(--r-sm);
  padding: .55rem .85rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-ink);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: .5rem 0 .35rem;
}

.filter-opt {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .4rem .85rem;
  font-size: .95rem;
  color: var(--c-ink);
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
}
.filter-opt input {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--c-gray-3);
  border-radius: 50%;
  margin: 0;
  flex-shrink: 0;
  background: #fff;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.filter-opt input[type="checkbox"] { border-radius: 3px; }
.filter-opt input:checked {
  border-color: var(--c-green);
  background: radial-gradient(circle, var(--c-green) 0 45%, #fff 50% 100%);
}
.filter-opt input[type="checkbox"]:checked {
  background: var(--c-green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,8.5 6.5,12 13,4.5'/></svg>") center/10px 10px no-repeat;
}
.filter-opt:hover input { border-color: var(--c-green); }

.filters__apply {
  display: none;
  width: 100%;
  margin: 1rem 0 0;
  background: var(--c-ink);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  padding: .7rem 1.25rem;
  font: inherit;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--t-fast);
}
.filters__apply:hover { background: #000; }

.catalog__main {
  grid-column: 2 / -1;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: subgrid;
  /* Righe ESPLICITE content-sized (toolbar / griglia / pager) invece di
     `subgrid` (che ereditava solo 2 righe auto/1fr): la griglia da 10 prodotti
     traboccava il track 1fr e il pager, auto-piazzato in una riga implicita al
     confine del track, finiva IN MEZZO alle card. Ora ogni riga si dimensiona
     al contenuto e il pager sta sotto la griglia. */
  grid-template-rows: auto auto auto;
  align-content: start;
  /* Stacco fra le tre righe (toolbar / griglia / pager). Mancava del tutto: il
     `row-gap` non era mai stato dichiarato, quindi la barra di ricerca poggiava
     sulle card con 0px di distacco (misurato), e il pager era attaccato allo stesso
     modo sotto la griglia. Non è il gap FRA le card — quello è il row-gap interno
     di .product-grid, molto più ampio — ma lo stacco fra le fasce del catalogo. */
  row-gap: clamp(1.75rem, 3vw, 3rem);
}
.catalog__toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 .25rem .35rem;
}
/* Allinea la testa dei filtri ("Filtra"/Reset) e la toolbar catalogo
   (conteggio/ricerca/ordina) sulla STESSA banda orizzontale. Senza questo la barra
   di ricerca — piu' alta del testo "Filtra" — poggiava piu' in basso: entrambe
   partono dallo stesso top ma con `align-items: flex-end` in contenitori di altezza
   diversa i bordi inferiori divergevano. Banda ad altezza fissa + contenuti centrati
   => "Filtra" e la barra di ricerca condividono la stessa linea mediana. Solo desktop:
   sotto i 1100px il catalogo e' a colonna singola e le due teste sono impilate. */
@media (min-width: 1101px) {
  .filters__head,
  .catalog__toolbar {
    min-height: 2.75rem;
    align-items: center;
    padding-bottom: 0;
  }
}
.catalog__count { font-size: .95rem; color: var(--c-ink); font-weight: 500; }
/* Paginazione numerata catalogo (10 prodotti/pagina). */
.catalog__pager {
  grid-column: 1 / -1;   /* span entrambe le colonne prodotti → sotto la griglia, centrato (senza, finiva in col 1 sovrapposto alle card) */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.catalog__pglink {
  min-width: 40px;
  padding: .5rem .7rem;
  border: 1px solid #d8d8d8;
  border-radius: var(--r-sm, 8px);
  background: #fff;
  color: var(--c-ink);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.catalog__pglink:hover:not([disabled]):not(.is-active) { border-color: var(--c-green); color: var(--c-green); }
.catalog__pglink.is-active {
  background: var(--c-green);
  border-color: var(--c-green);
  color: #fff;
  cursor: default;
}
.catalog__pglink[disabled] { opacity: .45; cursor: not-allowed; }
.catalog__sort { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--c-gray-2); }
.catalog__select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23101B15' stroke-width='1.8'><path d='M1 1l5 5 5-5'/></svg>") no-repeat right .8rem center / 10px 7px;
  border: 1px solid #ececec;
  border-radius: var(--r-pill);
  padding: .4rem 2rem .4rem 1rem;
  font: inherit;
  font-size: .95rem;
  color: var(--c-ink);
  cursor: pointer;
}
.catalog__select:focus { outline: none; border-color: var(--c-green); }

/* ══ Ricerca globale catalogo (mig 0045): box header + autocomplete + /cerca/ ══ */
/* Box (header e pagina): <form GET> con input + bottone-lente + dropdown. */
.site-search { position: relative; display: flex; align-items: center; flex: 0 1 230px; min-width: 0; }
.site-search__input {
  width: 100%;
  font: inherit; font-size: .92rem; color: var(--c-ink);
  background: var(--c-bg-3);
  border: 1px solid #e4e4e4;
  border-radius: var(--r-pill, 999px);
  padding: .5rem 2.4rem .5rem .95rem;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.site-search__input::placeholder { color: var(--c-gray-3); }
.site-search__input:focus {
  outline: none; background: #fff; border-color: var(--c-green);
  box-shadow: 0 0 0 3px rgba(32,92,22,.12);
}
.site-search__btn {
  position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--c-gray-2); cursor: pointer;
  transition: color .15s, background .15s;
}
.site-search__btn:hover { color: var(--c-green); background: rgba(32,92,22,.08); }
.site-search__icon { display: block; }

/* Dropdown autocomplete (foto + titolo + marca, + "vedi tutti"). */
.search-suggest {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 120;
  background: #fff; border: 1px solid #ececec; border-radius: var(--r-md, 12px);
  box-shadow: var(--shadow-card);
  padding: .35rem; max-height: min(70vh, 480px); overflow-y: auto;
}
.search-suggest__item, .search-suggest__all {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .55rem; border-radius: 8px; text-decoration: none; color: var(--c-ink);
}
.search-suggest__item:hover, .search-suggest__item.is-active,
.search-suggest__all:hover, .search-suggest__all.is-active { background: var(--c-bg-3); }
.search-suggest__thumb {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px;
  background: var(--c-bg-3) center/cover no-repeat;
}
.search-suggest__thumb--ph { background: var(--c-bg-4); }
.search-suggest__text { display: flex; flex-direction: column; min-width: 0; }
.search-suggest__title {
  font-weight: 600; font-size: .9rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-suggest__brand { font-size: .8rem; color: var(--c-gray-2); }
.search-suggest__all {
  justify-content: center; font-weight: 600; font-size: .85rem; color: var(--c-green);
  margin-top: .15rem; border-top: 1px solid #f0f0f0; border-radius: 0 0 8px 8px;
}

/* Pagina risultati /cerca/. La griglia ha track ESPLICITE (la base .product-grid
   usa subgrid: vive dentro il layout 2-col del catalogo; qui è standalone). */
.search-page { padding-top: clamp(1.5rem, 4vw, 3rem); }
.search-page__title { font-size: var(--fs-h1); margin-bottom: 1.2rem; }
.site-search--lg { flex: 1 1 100%; max-width: 640px; margin-bottom: 1.1rem; }
.site-search--lg .site-search__input { font-size: 1.05rem; padding: .85rem 3rem .85rem 1.1rem; }
.site-search--lg .site-search__btn { width: 38px; height: 38px; right: .4rem; }
.search-page__conds { margin-bottom: 1.1rem; }
.search-page__count { margin-bottom: 1.4rem; color: var(--c-gray-2); font-size: .95rem; }
.search-page .product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(1rem, 1.5vw, 1.75rem);
  row-gap: clamp(2rem, 3.5vw, 3.5rem);
}
@media (max-width: 1100px) { .search-page .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .search-page .product-grid { grid-template-columns: 1fr; } }

/* Header search responsive — RITIRATA sotto i 1100px (scelta del committente).
   Qui c'erano due blocchi che stringevano il box a 190px e poi lo collassavano
   alla sola lente: avevano senso finche` la ricerca stava NELLA BARRA. Dal
   momento in cui il form e` stato spostato dentro <nav> (build.py), sotto i
   1100px non esiste piu` una ricerca in testata — vive nel drawer, dove la
   vestono le regole `.main-nav .site-search*`.
   NON vanno reintrodotti "per sicurezza": quei selettori erano
   `.site-header .site-search…`, e siccome il drawer e` DENTRO la header
   continuerebbero a matchare — stessa specificita` (0,2,0) delle regole del
   drawer ma piu` in basso nel file, quindi vincerebbero, ri-collassando il
   campo a una lente dentro al pannello. */

.product-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: clamp(2rem, 3.82vw, 4.58rem);
}

.product-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(1rem, 1.5vw, 1.75rem);
}

.product-card {
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  border: 1px solid #ececec;
}
.product-card__media {
  aspect-ratio: 16/10;
  background: #d8d8d8 center/cover no-repeat;
  position: relative;
}
.product-card__badges {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Etichetta (product_labels) mostrata come pill SOPRA la foto di anteprima.
   Unica sede di visibilità nel catalogo: non è più una faccetta di filtro né
   una caption nel corpo card (richiesta committente 2026-05-29). */
.product-card__labels {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  z-index: 2;
}
.product-card__label {
  font-size: .8rem;
  font-weight: 700;
  padding: .35rem .85rem;
  border-radius: var(--r-pill);
  background: var(--c-green);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
}
/* Se anche i bollini promozionali sono presenti, scendono sotto l'etichetta
   (solo nella card dinamica --ph; le card placeholder statiche non sono toccate). */
.product-card__media--ph .product-card__labels + .product-card__badges { top: calc(14px + 2.1rem); }

.product-card__media--placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .35rem;
  color: var(--c-gray-2);
}
.product-card__placeholder-icon { width: clamp(36px, 4vw, 56px); height: clamp(36px, 4vw, 56px); opacity: .55; }
.product-card__placeholder-label { font-size: .85rem; font-weight: 500; letter-spacing: .04em; }

.badge {
  font-size: .8rem;
  font-weight: 700;
  padding: .35rem .85rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--c-green-light);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
}
.badge--occ { background: var(--c-green-light); color: #fff; }
.badge--out { background: #fff; color: var(--c-ink); border: 1px solid #ececec; }
.badge--red { background: var(--c-red); }
.badge--gray { background: var(--c-gray-3); }

.product-card__body {
  padding: clamp(1rem, 1.4vw, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  flex: 1;
}
.product-card__brand {
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: .03em;
}
.product-card__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--c-red);
  margin: 0;
  line-height: 1.2;
}
.product-card__desc {
  font-size: var(--fs-body);
  color: var(--c-gray-2);
  margin: .35rem 0 .25rem;
}
.product-card__desc:empty { display: none; }
.product-card__meta {
  font-size: var(--fs-body);
  color: var(--c-gray-2);
  margin: .35rem 0 1.1rem;
}
.product-card__meta strong { font-weight: 700; }

.product-card__specs {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: clamp(1rem, 1.46vw, 28px) 0 1.5rem;
  width: 100%;
}
.product-card__specs p { margin: 0; font-size: clamp(.95rem, 1.04vw, 20px); color: var(--c-ink); }
.product-card__specs strong { font-weight: 700; }
.product-card__cta {
  margin-top: auto;
  width: 100%;
  text-align: center;
}
.product-card__cta .btn { width: 100%; padding: .4rem 1.2rem; }
/* Card interamente cliccabile (29/09/2026): il click in un punto qualsiasi della
   card apre il suo «Scopri di più» (delegazione in catalog.js, bindCardClicks).
   Il link resta l'UNICO della card: un tab-stop, un annuncio per gli screen reader.
   NON il trucco ::after assoluto sul link: in Chrome l'area cliccabile sopra la foto
   si perdeva al primo hover (misurato: clic sulla foto → ARTICLE, non il link). */
.product-card:has(.product-card__cta a) { cursor: pointer; }

@media (max-width: 1100px) {
  .catalog {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .filters {
    grid-row: auto;
    grid-template-rows: auto;
  }
  .filters__body { position: static; }
  .catalog__main {
    grid-row: auto;
    grid-column: auto;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    column-gap: clamp(1rem, 1.5vw, 1.75rem);
    row-gap: 1.25rem;
  }
  .product-grid {
    grid-column: auto;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(1rem, 1.5vw, 1.75rem);
  }
}
@media (max-width: 900px) {
  /* H1 subhero bandierato a sinistra solo su mobile (desktop resta centrato). */
  .subhero { text-align: left; justify-content: flex-start; }

  /* Avvicina i filtri all'hero nelle pagine catalogo categoria (subhero -> section.catalog),
     senza toccare /usato/ e /nuovo/ dove c'e` gia` `.marquee-band + .section { padding-top: 0 }`. */
  .subhero + .section:has(.catalog) { padding-top: 1.25rem; }
  .catalog { margin-top: 0; }

  /* Nascondi il conteggio "59 risultati" e allinea "Ordina" a destra. */
  .catalog__count { display: none; }
  .catalog__sort { margin-left: auto; }

  /* Card-style filtri solo su mobile per distinguerli dal contenuto sottostante. */
  .filters {
    display: block;
    background: var(--c-bg-3);
    border: 1px solid #ececec;
    border-radius: var(--r-md);
    padding: 1rem 1.25rem;
    align-self: start;
  }
  .filters__head { align-items: center; padding: 0; }
  .filters__group:first-of-type { border-top: 0; padding-top: .6rem; }
  .filters__apply { display: block; }

  /* Filtri a tendina sotto i 900px: tap su "Filtra" per aprire/chiudere. */
  .filters__head { gap: 1.5rem; }
  .filters__title {
    flex: 0 0 auto;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.6rem;
  }
  .filters__title::after {
    content: "";
    position: absolute;
    right: .25rem;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--c-ink);
    border-bottom: 2px solid var(--c-ink);
    transform: translateY(-75%) rotate(45deg);
    transition: transform var(--t-fast);
  }
  .filters.filters--open .filters__title::after {
    transform: translateY(-25%) rotate(-135deg);
  }
  .filters__body { display: none; }
  .filters.filters--open .filters__body {
    display: block;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .25rem;
  }
}
@media (max-width: 600px) {
  .catalog__main { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .catalog__toolbar { flex-wrap: wrap; }
}

.info-band {
  padding-block: clamp(2rem, 3vw, 3.5rem);

  min-height: clamp(380px, 44.27vw, 850px);

  margin-inline: calc(-1 * var(--frame-x));
  border-radius: 0;
  display: flex;
  align-items: center;
  /* contenitore per .info-band__bg (foto di sfondo assoluta) */
  position: relative;
}
/* Foto di sfondo editabile (categories.info_image sulle pagine categoria,
   pages.body_json.info_image sugli indici usato/nuovo). Stesso idiom di
   .why-band__bg: un livello assoluto SOTTO al contenuto. Senza foto il div
   non ha background-image → si vede il fill grigio di .section--muted, cioè
   l'aspetto attuale. La card bianca è opaca, quindi il testo resta leggibile
   su qualsiasi foto e non serve nessuno scrim. */
.info-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
.info-band > .container {
  position: relative;
  z-index: 1;
}
.info-band__card {
  background: #fff;
  border-radius: var(--r-md);
  /* padding generoso e uguale su tutti i lati (rimosso aspect-ratio: 1/1
     che con justify-content: center creava spazi verticali molto piu`
     grandi del padding orizzontale). */
  padding: clamp(2.5rem, 4.5vw, 5rem);

  width: 100%;
  /* Card largo 6 colonne della griglia Figma (4 cols originali + 2 aggiunte
     verso il centro). Il bordo sinistro resta ancorato dal margin-inline-start;
     l'espansione cresce a destra verso il centro della fascia. */
  max-width: calc((var(--container) - 11 * var(--gutter)) / 12 * 6 + 5 * var(--gutter));
  box-shadow: var(--shadow-soft);

  /* Card spostato a sinistra di una colonna rispetto all'originale: bordo
     sinistro allineato al bordo del container (colonna 1) invece che alla
     colonna 2. Su mobile resta `margin-inline: auto` dal media query. */
  margin-inline-start: 0;

  display: flex;
  flex-direction: column;
}
.info-band__card h2 { margin: 0 0 1rem; line-height: 1.25; }
.info-band__card p { font-size: var(--fs-body); color: var(--c-gray-2); margin: 0; }

/* .info-band--split / .info-band__media RIMOSSI 2026-07-14 con il ritiro di
   categories.intro_image (la foto affiancata a destra della card). L'unica foto della
   info-band e` ora lo SFONDO full-bleed (.info-band__bg). */

@media (max-width: 900px) {
  /* Su mobile annullo `margin-inline-start: clamp(...)` del default, centro il card e
     lo faccio respirare alla larghezza del container (allineato a product-grid). */
  .info-band { min-height: 550px; }
  .info-band__card {
    margin-inline: auto;
    max-width: 100%;
    padding: clamp(1.75rem, 5vw, 2.5rem);
  }
  /* FAQ: di default ha max-width = 10/12 della griglia Figma, su mobile diventa stretta.
     Allargala alla larghezza del container (come la product-grid). */
  .faq { max-width: 100%; }
}

.faq-section .section__head { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 2rem; max-width: none; }
.faq-section .section__head h2 { white-space: nowrap; }
@media (max-width: 1100px) {
  .faq-section .section__head h2 { white-space: normal; }
}
.faq-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #EDF6EA;
  color: var(--c-green);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.faq-section .faq__item[open] .faq__a { padding-top: .25rem; }
.faq-section .faq__q { padding: 2rem 4.5rem 2rem 2.25rem; font-size: 1rem; }
/* Variante .faq-section (pagine catalogo): stesso meccanismo a due barre della
   FAQ base, ma il segno di apertura e` una × (non un −) e nei grigi della
   sezione. Le due barre, invece di allinearsi, ruotano a 45°/135°: e` la stessa
   × di prima, ma che ci ARRIVA ruotando invece di sostituire un glifo di scatto.
   NB: qui non si dichiara `content` — la barra e` gia` disegnata dal blocco base
   (.faq__q::before/::after) e un `content` testuale sborderebbe dalla barra. */
.faq-section .faq__q::before,
.faq-section .faq__q::after {
  right: 2rem;
  background: var(--c-gray-2);
}
.faq-section .faq__item[open] .faq__q::before { transform: translateY(-50%) rotate(135deg); }
.faq-section .faq__item[open] .faq__q::after  { transform: translateY(-50%) rotate(45deg); }
.faq-section .faq__a { padding: 0 2.25rem 2rem; }
.faq-section .faq__a p { margin: 0 0 .75rem; color: var(--c-gray-2); }
.faq-section .faq__a p:last-child { margin-bottom: 0; }

/* Breadcrumb globale: regola unica per tutto il sito. Iniettata da build.py
   in cima a <main> su ogni pagina (escluso home). Resta sempre nello stesso
   punto; se la sezione successiva e` un .hero o .subhero (sfondo
   scuro/immagine) il testo diventa bianco e la bread si sovrappone, altrimenti
   resta nel flusso normale con testo grigio. */
.crumbs--global {
  padding: 1.25rem 0 0;
  font-size: .9rem;
  color: var(--c-gray-2);
  position: relative;
  z-index: 10;
}
.crumbs--global > .container {
  /* Allineata al bordo sinistro del box del sito (richiesta committente
     23/09/2026): niente indentazione interna — prima copiava quella di
     .site-header__row per stare sotto il logo, e sembrava "rientrata". */
  padding-inline: 0;
  display: flex;
  gap: .4rem;
  align-items: center;
  flex-wrap: wrap;
}
.crumbs--global a { color: inherit; }
.crumbs--global a:hover { color: var(--c-green); }
.crumbs--global span[aria-current="page"] { color: var(--c-ink); font-weight: 600; }
/* L'ultima briciola su UNA riga, troncata con i puntini. Su un articolo e` il
   titolo intero (qui 92 caratteri): andava a capo occupando due righe e
   ripeteva parola per parola l'H1 che gli sta subito sotto. Troncata via CSS e
   NON accorciata nel markup, cosi` il titolo completo resta nel DOM per il
   JSON-LD BreadcrumbList e per i lettori di schermo. `min-width: 0` serve
   perche` un figlio flex non scende sotto la propria larghezza di contenuto
   senza: l'ellissi non comparirebbe mai. */
.crumbs--global span[aria-current="page"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crumbs--global .crumbs__sep { color: inherit; opacity: .6; }

/* Posizionamento UNIFORME della breadcrumb su TUTTO il sito (2026-05-30).
   La bread e` SEMPRE una banda in flusso normale (grigia) sotto il menu, mai
   sovrapposta all'hero. Sostituisce il vecchio modello "overlay sull'hero + lunga
   lista di eccezioni per-pagina" che la rendeva incoerente (bianca e sovrapposta
   su noleggio / lavora-con-noi / policy / dettaglio-marchio / pagine custom; banda
   grigia altrove).
   - distanza dal MENU  = padding-top (1.25rem), uguale ovunque;
   - distanza dall'HERO = padding-bottom (1.5rem) sulle pagine con hero/subhero, +
     azzeramento del margin-top dell'hero/subhero (il .hero ha
     margin-top:var(--frame-y), il .subhero no: senza questo il gap differirebbe
     tra i due tipi).
   NB: usiamo :has() di CONTENIMENTO (non l'adiacenza `+ .hero`) perche` su molte
   pagine CMS c'e` un <div data-page-content hidden> tra la bread e l'hero: e`
   display:none (zero impatto visivo) ma e` un fratello DOM reale, quindi
   romperebbe i selettori di adiacenza — ERA QUESTA la causa dell'incoerenza del
   vecchio modello (che pure usava `+ .subhero`). Col :has di contenimento
   l'ordine/intervallo dei fratelli non conta. */
main:has(> .crumbs--global):has(> .hero, > .subhero) > .crumbs--global {
  padding-bottom: 1.5rem;
}
/* La HOME non ha bread → il suo .hero mantiene margin-top:var(--frame-y) per lo
   stacco dall'header; qui azzeriamo solo gli hero delle pagine CON breadcrumb. */
main:has(> .crumbs--global) > .hero,
main:has(> .crumbs--global) > .subhero {
  margin-top: 0;
}

/* Su mobile la bread si allinea al bordo del menu (= padding-inline del body),
   eliminando il padding interno del container. */
@media (max-width: 900px) {
  .crumbs--global > .container { padding-inline: 0; }
}

.product__back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--c-ink);
  font-weight: 600;
  margin: 0 0 1.25rem;
}
.product__back:hover { color: var(--c-green); }
/* «Torna indietro» sta nella STESSA zona di navigazione della breadcrumb: non
   apre una fascia nuova. Il ritmo fra fasce (--section-py, 80px da 701px in su)
   li separava come fossero due blocchi di contenuto distinti — 80px vuoti fra
   due righe che vanno lette insieme. Si abbassa il SOLO padding superiore del
   guscio prodotto: il resto del ritmo verticale della pagina non cambia.
   Sotto i 700px --section-py vale gia` 20px (vedi RITMO VERTICALE UNIFORME) e
   li` non si tocca nulla, altrimenti si allargherebbe invece di stringersi. */
@media (min-width: 701px) {
  .section--product { padding-top: 1.75rem; }
}

.product {
  display: grid;
  /* Rapporto d'ingombro 60% / 10% / 30%: gallery+descrizione 60%, spazio
     vuoto centrale 10%, sidebar 30%. Le colonne sono fissate a 60% e 30% e
     justify-content: space-between distribuisce il 10% residuo come gap. */
  grid-template-columns: 60% 30%;
  justify-content: space-between;
  align-items: start;
  margin-top: .5rem;
}
.product__main { min-width: 0; }
.product__title { font-size: clamp(1.75rem, 3.2vw, 2.6rem); margin: 0 0 1.25rem; }

/* Galleria: main a sinistra che occupa tutte e 4 le righe della griglia +
   colonna di 4 thumb quadrate a destra (uno per riga).
   La colonna thumb ha larghezza esplicita (clamp), ogni thumb e` quadrato
   tramite aspect-ratio: 1/1, quindi ogni riga della grid e` alta quanto la
   larghezza della colonna thumb. Il main spana tutte le 4 righe senza
   aspect-ratio, riempiendo l'intera altezza = 4 thumb + 3 gap. */
.product__gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(70px, 16%, 150px);
  grid-template-rows: repeat(4, 1fr);
  gap: .65rem;
  margin-bottom: 1.5rem;
}
.product__thumbs { display: contents; }
.product__gallery .main {
  grid-column: 1;
  grid-row: 1 / -1;
  background: #d8d8d8 center/cover no-repeat;
  border-radius: var(--r-md);
  min-width: 0;
}
.product__gallery .thumb {
  grid-column: 2;
  aspect-ratio: 1/1;
  background: #d8d8d8 center/cover no-repeat;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 2px solid transparent;
}
.product__gallery .thumb.is-active { border-color: var(--c-green); }
/* Lente + galleria a tutto schermo (29/09/2026) */
.product__gallery .main[role="button"] { position: relative; cursor: zoom-in; }
.product__zoom {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--c-ink);
  border: 1px solid rgba(0,0,0,.08); box-shadow: var(--shadow-soft);
  cursor: pointer; transition: transform .15s, background .15s;
}
.product__zoom svg { width: 22px; height: 22px; }
.product__zoom:hover, .product__gallery .main:focus-visible .product__zoom { transform: scale(1.08); background: #fff; color: var(--c-green); }
html.has-lightbox { overflow: hidden; }
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: #fff;
  display: grid; grid-template-columns: 64px 1fr 64px; align-items: center;
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgba(10,14,10,.92); }
.lightbox__figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; min-width: 0; }
/* Proporzioni ORIGINALI del file caricato: nessun ritaglio, solo contenuto nello schermo. */
.lightbox__img { max-width: 100%; max-height: calc(100dvh - 7rem); width: auto; height: auto; object-fit: contain; display: block; background: #111; }
.lightbox__count { font-size: .9rem; opacity: .8; min-height: 1.2em; }
.lightbox__nav, .lightbox__close {
  background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1;
  display: grid; place-items: center; justify-self: center;
}
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(255,255,255,.25); }
.lightbox__close { position: fixed; top: 16px; right: 16px; font-size: 1.8rem; z-index: 1; }
.lightbox--single .lightbox__nav { visibility: hidden; }
@media (max-width: 700px) {
  .lightbox { grid-template-columns: 0 1fr 0; }
  .lightbox__nav { position: fixed; bottom: 18px; }
  .lightbox__nav--prev { left: 18px; } .lightbox__nav--next { right: 18px; }
  .lightbox__img { max-height: calc(100dvh - 9rem); }
}

/* Galleria SENZA foto (initDetail non ha trovato righe product_images): stesse
   righe diagonali del placeholder delle card, così la scheda prodotto dice la
   stessa verità della lista. Prima restavano visibili 4 foto dimostrative
   cablate nel guscio → un mezzo di un altro prodotto sulla scheda sbagliata. */
.product__gallery--ph { grid-template-columns: minmax(0, 1fr); }
.product__gallery--ph .product__thumbs { display: none; }
.product__gallery--ph .main {
  background: repeating-linear-gradient(135deg, #eef1ee 0 14px, #e7ebe7 14px 28px);
  min-height: clamp(220px, 34vw, 420px);
}

.product__description { color: var(--c-gray-2); }
.product__description p { line-height: 1.6; margin: 0 0 1.25rem; }
.product__description h2 { color: var(--c-ink); font-size: var(--fs-h2); margin: 1.5rem 0 1rem; }

/* --- Product detail hydration skeleton (catalog.js initDetail) --------------
   /prodotto/ è UN template per ~168 prodotti, idratato a runtime da initDetail.
   Gli slot di testo (title/description/specs) ora partono VUOTI nello shell e
   mostrano placeholder shimmer finché initDetail non li riempie e rimuove
   .is-loading. Sostituisce il vecchio flash al reload di dati FINTI bakati
   ("Fendt 828" + lorem ipsum + spec finte) con uno stato di caricamento neutro. */
@keyframes ar-skeleton { to { background-position: -200% 0; } }
.product.is-loading .product__title,
.product.is-loading .product__description,
.product.is-loading .spec-list {
  background-image: linear-gradient(90deg, #e6e6e6 0%, #f3f3f3 40%, #e6e6e6 80%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: ar-skeleton 1.3s linear infinite;
  border-radius: var(--r-sm);
  color: transparent;
}
.product.is-loading .product__title { min-height: 2.6rem; max-width: 72%; }
.product.is-loading .product__description { min-height: 8.5rem; }
.product.is-loading .spec-list { min-height: 12rem; list-style: none; padding-left: 0; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .product.is-loading .product__title,
  .product.is-loading .product__description,
  .product.is-loading .spec-list { animation: none; }
}

.product__notice {
  margin: 1.5rem 0 0;
  background: #EAF3E7;
  color: var(--c-green);
  font-weight: 700;
  padding: 1rem 1.25rem;
  border-radius: var(--r-sm);
}

.product__sidebar { display: flex; flex-direction: column; gap: 1.25rem; }

.product__card {
  background: #FAFAFA;
  border-radius: var(--r-md);
  padding: 1.5rem;
}
/* Badge "OCCASIONE" come card a se` sopra il box specifiche:
   sfondo verde chiarissimo, testo verde scuro, larghezza piena. */
.product__badge-row {
  background: #D7E4D3;
  border-radius: var(--r-md);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: center;
}
.badge--occasione {
  background: transparent;
  color: var(--c-green);
  font-family: var(--ff-display);
  font-size: 30px;
  font-weight: 700;
  padding: 0;
  border-radius: 0;
  line-height: 1.1;
}

.spec-list { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.spec-list li {
  /* Stile paragrafo: stesse regole del <p> globale (--fs-body + --c-gray-2). */
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .65rem 0;
  font-size: var(--fs-body);
  color: var(--c-gray-2);
  font-weight: 400;
  border-bottom: none;
}
.spec-list__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: var(--c-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.spec-list__icon svg,
.spec-list__icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.spec-list__text { flex: 1; }
.spec-list__text strong { font-weight: 700; color: var(--c-ink); }
/* "PREZZO SU RICHIESTA": stile paragrafo (--fs-body) in bold e colore --c-ink. */
.spec-list__text--strong { font-weight: 700; letter-spacing: .03em; color: var(--c-ink); }

.product__ctas { display: flex; flex-direction: column; gap: .65rem; }
.btn--block { display: flex; width: 100%; }

.tech-table { width: 100%; border-collapse: collapse; }
.tech-table th, .tech-table td {
  /* Stile paragrafo: stesse regole del <p> globale (--fs-body + --c-gray-2). */
  font-size: var(--fs-body);
  color: var(--c-gray-2);
  font-weight: 400;
  text-align: left;
  padding: .65rem .25rem;
  border-bottom: 1px solid #e2e2e2;
  vertical-align: top;
}
.tech-table th { color: var(--c-ink); font-weight: 700; width: 45%; }

/* Descrizione tecnica come prosa libera (paragrafo, colonna L del file prodotti)
   — sostituisce la vecchia .tech-table chiave:valore. Stile = paragrafo body. */
.product__tech { margin: 0; }
.product__tech p {
  font-size: var(--fs-body);
  color: var(--c-gray-2);
  line-height: 1.6;
  margin: 0 0 .9rem;
}
.product__tech p:last-child { margin-bottom: 0; }

.product__disclaimer {
  font-size: .78rem;
  color: var(--c-gray-2);
  line-height: 1.5;
  margin: 0;
}

.product__availability { padding: 1.25rem 1.5rem; }
.product__availability-title {
  font-size: 25px;
  color: var(--c-ink);
  margin: 0 0 1.5rem;
}
.product__availability-addr {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--c-ink);
  font-size: 20px;
}
.product__availability-icon {
  width: 40px; height: 40px;
  color: var(--c-green);
  display: inline-flex;
  flex: 0 0 40px;
}
.product__availability-icon svg,
.product__availability-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* Prodotti correlati: usa esattamente .product-grid product-grid--3 +
   .product-card (stessa struttura del noleggio), nessun override necessario. */

.section__head--center { text-align: center; }
.section__head--center h2 { margin: 0; }

@media (max-width: 1000px) {
  .product { grid-template-columns: 1fr; }
}

.marchi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.2vw, 2.625rem);
}
.marchi-tile {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: var(--r-md);
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  transition: transform var(--t), box-shadow var(--t);
}
.marchi-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
/* I loghi marchio sono normalizzati su tela LARGA 900px, alta quanto serve al
   marchio (scala ottica ad area percepita costante). Si dimensionano quindi in
   LARGHEZZA: l'altezza segue, e con essa la scala giusta di ogni logo. Il
   max-height e` solo una rete per i marchi quasi quadrati (FAE, Spedo).
   Vedi _handoff/media/loghi-2026-09-08/. */
.marchi-tile img { width: 92%; height: auto; max-height: 78%; object-fit: contain; }
.marchi-tile--ph { color: var(--c-gray-2); font-weight: 600; font-size: clamp(.85rem, 1vw, 1.05rem); text-align: center; }
.marchi-tile--ph span { display: block; padding: 0 .5rem; line-height: 1.25; overflow-wrap: anywhere; }
/* Tile-testo per marchi senza logo (fallback statico + runtime initBrandsGrid) */
.marchi-tile__name { color: var(--c-gray-2); font-weight: 600; font-size: clamp(.85rem, 1vw, 1.05rem); text-align: center; line-height: 1.25; padding: 0 .5rem; overflow-wrap: anywhere; }
.marchi-tile--center { grid-column: 3; }
@media (max-width: 1100px) {
  .marchi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .marchi-tile--center { grid-column: 2; }
}
@media (max-width: 600px) {
  .marchi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marchi-tile--center { grid-column: auto; }
}

.contact-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.contact-card { background: #fff; border: 1px solid #ececec; border-radius: var(--r-md); overflow: hidden; }
.contact-card__head { padding: 1.5rem; }
.contact-card__head h3 { font-size: 1.1rem; color: var(--c-gray-1); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
/* Il badge "SEDE PRINCIPALE" vive DENTRO l'h3 — initLocations lo appende al
   nome della sede — e quasi sempre va a capo. Essendo una pillola PIENA
   (.badge ha padding .35/.85rem) il suo fondo arrivava a 4px dall'indirizzo
   e il suo sopra sfiorava il nome: si leggeva come un blocco unico invece che
   come un'etichetta. Lo spazio si da` QUI e non allargando h3 in generale,
   che sposterebbe anche la scheda senza badge (la filiale) rompendo
   l'allineamento fra le due colonne. :has() e` gia` usato nel foglio. */
/* 29/09/2026: le due schede devono avere le righe allineate (indirizzo, telefono,
   email, orari) anche se solo una ha il badge. Il margine diverso per h3:has(.badge)
   spostava in basso SOLO la sede principale. Ora il titolo e' una riga flessibile di
   altezza minima pari alla pillola: con o senza badge, il contenuto parte alla stessa
   quota. Se il badge va a capo (colonne strette) la differenza torna, ma sotto gli
   800px le schede sono impilate. */
.contact-card__head h3 { display: flex; flex-wrap: wrap; align-items: center; column-gap: .6rem; row-gap: .4rem; min-height: 2.1rem; margin-bottom: .75rem; }
.contact-card__head h3 .badge { display: inline-block; margin: 0; }
.contact-card__head p { margin: 0; color: var(--c-ink); }
.contact-card__head a { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
@media (max-width: 800px) { .contact-dual { grid-template-columns: 1fr; } }

.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; }
.pillars__list { display: flex; flex-direction: column; gap: 1.5rem; padding-right: clamp(2rem, 5vw, 6rem); }
.pillar { display: flex; gap: 1rem; }
.pillar__icon { width: 48px; height: 48px; flex-shrink: 0; color: var(--c-green); }
.pillar__icon svg { width: 100%; height: 100%; }
.pillar h4 { margin: 0; font-size: 1.1rem; }
.pillar p { margin: .25rem 0 0; color: var(--c-gray-2); font-size: 1rem; }
.pillars__media {
  width: 75%;
  justify-self: start;
  aspect-ratio: 1/1;
  background: #ddd center/cover no-repeat;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 clamp(.5rem, .65vw, .9rem) #fff, 0 8px 24px rgba(0,0,0,.08);
}
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
  .pillars__list { padding-right: 0; }
  .pillars__media { width: 100%; aspect-ratio: 16/10; box-shadow: var(--shadow-soft); }
}

.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }
.lead { font-size: var(--fs-body); color: var(--c-gray-2); }
.flex { display: flex; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 700px) {
  .section__head { margin-bottom: 1.75rem; }
  .intro { gap: 1rem; }
  .split { gap: 1.5rem; }
  .card-big__body { gap: .5rem; }
  .card-big__body h3 { font-size: 1.5rem; }
  .product__title { font-size: 1.5rem; }
  .hero { min-height: 380px; align-items: center; }
  .hero__title { font-size: clamp(1.75rem, 8.5vw, 3rem); }
  .hero__sub { font-size: 1rem; line-height: 1.35; }
  .subhero:not(.subhero--split) { padding: 2.5rem var(--band-px); min-height: 320px; }
  /* h1 mobile gestito dal clamp globale (min 32px) */
  .footer-logo { max-height: 64px; }
  .site-footer__legal { flex-direction: column; text-align: center; gap: .35rem; font-size: .85rem; }
  .site-footer__bar .container { flex-direction: column; text-align: center; gap: .35rem; font-size: .85rem; }
  .why-band .container { gap: 1.5rem; }
  .why-list .why-item { padding: 1.1rem; }
}
@media (max-width: 480px) {
  .hero__inner { padding: 2.5rem var(--band-px) 2rem; }
  /* Qui c'erano due righe che INGRANDIVANO i bottoni sotto i 480px
     (.btn a 1rem/.75rem-1.2rem, .btn--lg a 1.05rem/.9rem-1.5rem). Rimosse:
     contraddicevano il ridimensionamento mobile dichiarato accanto a .btn
     (@media 700px) e, trovandosi piu` in basso a parita` di specificita`,
     vincevano proprio sugli schermi piu` stretti — cioe` i bottoni erano piu`
     grandi sul telefono che sul tablet. Ora governa un blocco solo. */
  .form-card { padding: 1.25rem; }
}

.why-band {
  background: #2a2a2a;
  color: #fff;
  padding: clamp(2.5rem, 5vw, 5rem) var(--band-px);
  position: relative;
  overflow: hidden;
  /* Altezza fissa target 800px @1920 (clamp per scalare in basso). */
  min-height: clamp(420px, 41.67vw, 800px);
  display: flex;
  align-items: stretch;
  border-radius: var(--r-md);
}
/* Foto di sfondo editabile dall'admin (data-pf-img="why_photo"). Senza foto la
   fascia resta il colore piatto qui sopra; con foto il binder runtime imposta
   background-image sul div .why-band__bg, che vive sotto al contenuto. */
.why-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Velatura scura SOLO quando una foto e` impostata: il binder aggiunge l'attributo
   style="background-image:..." → il selettore [style] matcha. Senza foto nessuno
   scrim → aspetto identico a prima. Gradiente piu` intenso a sinistra (dietro
   l'H2) per tenere leggibile il testo bianco su una foto qualsiasi. */
.why-band__bg[style]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,0) 72%);
}
.why-band .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  /* align-items: stretch (default) cosi` la colonna .why-list riempie tutta
     l'altezza della fascia e le card al suo interno (1fr ciascuna) hanno
     altezza identica anche se i testi sono di lunghezze diverse. Il titolo
     nella colonna sinistra viene ri-centrato verticalmente con flex. */
  align-items: stretch;
  width: 100%;
  /* Contenuto interno della fascia limitato a 8 colonne Figma (delle 12). */
  max-width: calc((var(--container) - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter));
}
.why-band .container > div:first-child { display: flex; align-items: center; }
.why-band h2 { color: #fff; font-size: var(--fs-h1); }
.why-list { display: grid; grid-template-rows: repeat(3, 200px); gap: 1rem; align-content: center; }
.why-list .why-item {
  /* Bianco al 90%: la foto di sfondo della fascia traspare appena sotto le card,
     così non sembrano ritagli incollati sopra l'immagine (scelta committente
     2026-07-14). Il testo resta --c-ink su un fondo quasi opaco → contrasto
     invariato, nessun problema di leggibilità. */
  background: rgba(255, 255, 255, .9);
  color: var(--c-ink);
  border-radius: var(--r-md);
  padding: 1.5rem;
  /* Contenuto (h4 + p) centrato verticalmente nella card. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* H4 e <p> dentro .why-list ereditano le regole globali (h4 = clamp typo
   display, p = --fs-body + --c-gray-2). Qui resettiamo solo i margin. */
.why-list h4 { margin: 0 0 .25rem; }
.why-list p { margin: 0; }
@media (max-width: 900px) { .why-band .container { grid-template-columns: 1fr; } }

.page-hero-band {
  background: var(--c-bg-4);
  border-radius: var(--hero-r);
  padding: clamp(2rem, 4vw, 4rem) var(--band-px) 0;
  overflow: hidden;
}
.page-hero-band .section__head { margin-bottom: clamp(1.5rem, 2.5vw, 3rem); }
.page-hero-media {
  width: 75%;
  margin-inline: auto;
  margin-bottom: 0;
  aspect-ratio: 21/8;
  background: #ddd center/cover no-repeat;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
@media (max-width: 900px) {
  .page-hero-media { width: 100%; }
}

.section.section--narrow > .container {
  max-width: calc((var(--container) - 2 * var(--band-px)) * 0.75);
}
@media (max-width: 900px) {
  .section.section--narrow > .container { max-width: var(--container); }
}

.text-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
}
.text-split__title { font-size: var(--fs-h1); margin: 0; line-height: 1.15; }
.text-split__body { display: flex; flex-direction: column; gap: .9em; }
.text-split__body p { color: var(--c-gray-2); font-size: var(--fs-body); margin: 0; }
@media (max-width: 900px) { .text-split { grid-template-columns: 1fr; } }

/* data-pf-prose wrapper inside FLEX-gap containers (.intro / .fan-band__card):
   those space their children via `gap` and zero the <p> margins, so a single
   wrapper around the paragraphs would collapse the inter-paragraph spacing.
   This re-establishes a nested column flow inheriting the parent's gap, so the
   visual output is identical whether the band shows the static <p> fallback or
   the runtime-split prose. Margin-based containers (.split__body, .hero__copy,
   .section__head) need no wrapper styling — their `p` selectors are descendant. */
.pf-prose-stack { display: flex; flex-direction: column; gap: inherit; }

.brand-strip {
  overflow: hidden;
  padding: clamp(1rem, 2vw, 2rem) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.brand-strip__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
  width: max-content;
  animation: brand-scroll 40s linear infinite;
}
.brand-strip__track img {
  max-height: clamp(36px, 3.4vw, 64px);
  width: auto;
  flex-shrink: 0;
  opacity: .9;
  filter: grayscale(0);
}
@keyframes brand-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-strip__track { animation: none; }
}

.pilastri-head {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
  margin: 0 0 clamp(1.5rem, 2.5vw, 2.5rem);
}
.pilastri-head__title { font-size: var(--fs-h1); margin: 0; line-height: 1.15; }
.pilastri-head__lead  { color: var(--c-gray-2); margin: 0; font-size: var(--fs-body); }
@media (max-width: 900px) { .pilastri-head { grid-template-columns: 1fr; } }

.pilastri {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(1.5rem, 2.5vw, 3rem);
  align-items: start;
}
.pilastri__menu { display: flex; flex-direction: column; gap: .85rem; }
.pilastri__item {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #ECECEC;
  border: 0;
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  text-align: left;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--t), box-shadow var(--t), transform var(--t-fast);
}
.pilastri__item:hover { background: #e2e2e2; }
.pilastri__item.is-active {
  background: #fff;
  box-shadow: var(--shadow-card);
  cursor: default;
}
.pilastri__icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--c-gray-3);
  flex-shrink: 0;
  transition: color var(--t);
}
.pilastri__icon svg { width: 20px; height: 20px; }
.pilastri__item.is-active .pilastri__icon { color: #E2B500; }
.pilastri__label { flex: 1; }

.pilastri__panels { position: relative; }
.pilastri__panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 2.5vw, 3rem);
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.25rem, 1.75vw, 2rem);
  align-items: stretch;
}
.pilastri__panel.is-active { display: grid; }
.pilastri__media {
  background: #ddd center/cover no-repeat;
  border-radius: var(--r-md);
  aspect-ratio: 4/5;
  min-height: 0;
  /* NON stirare in altezza: con align-items:stretch del pannello la media
     verrebbe stirata all'altezza della riga e l'aspect-ratio ne ricaverebbe una
     LARGHEZZA che sfora la colonna, sovrapponendosi al body (bug: testo lungo →
     body stretto e alto → media altissima → larghissima). align-self:start +
     min-width:0 la tengono dentro la sua colonna (larghezza = colonna → altezza
     = larghezza·5/4). */
  align-self: start;
  min-width: 0;
}
.pilastri__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: flex-end;
  padding-right: clamp(0px, 1vw, 1.5rem);
}
.pilastri__body h3 { font-size: var(--fs-h2); margin: 0; line-height: 1.2; }
.pilastri__body p { color: var(--c-gray-2); margin: 0; font-size: var(--fs-body); }
.pilastri__cta {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--c-ink);
  font-weight: 600;
  align-self: flex-start;
  margin-top: .5rem;
}
.pilastri__cta:hover { color: var(--c-green); }
.pilastri__arrow {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #E2B500;
  color: var(--c-ink);
  font-size: .85rem;
  line-height: 1;
  transition: transform var(--t-fast);
}
.pilastri__cta:hover .pilastri__arrow { transform: translateX(2px); }
@media (max-width: 900px) {
  .pilastri { grid-template-columns: 1fr; }
  .pilastri__panel { grid-template-columns: 1fr; }
  .pilastri__media { aspect-ratio: 16/10; min-height: 0; }
  .pilastri__body { justify-content: flex-start; }
}

.contatti-band {
  position: relative;
  background: var(--c-green);
  color: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
  margin: clamp(2rem, 3vw, 3rem) 0 0;
}
.contatti-band__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 60%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  opacity: .9;
  pointer-events: none;
}
.contatti-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: clamp(2.5rem, 4.5vw, 4.5rem) var(--band-px);
}
.contatti-band__content { max-width: 640px; }
.contatti-band__content h2 { color: #fff; font-size: var(--fs-h1); margin: 0 0 1rem; }
.contatti-band__content p { font-size: var(--fs-body); color: rgba(255,255,255,.94); margin: 0 0 1.75rem; }
.contatti-band__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.brand-detail__logo {
  display: block;
  margin: 0 auto 12px;
  /* 2026-09-08: i loghi sono tele larghe 900px, alte quanto il marchio + 6% di
     respiro per lato. Si dimensionano in LARGHEZZA — l'altezza segue le
     proporzioni della tela e porta con se` la scala ottica incisa nell'asset.
     Fissare l'ALTEZZA (com'era prima, clamp 70/110) e` proprio cio` che rendeva
     i wordmark enormi e i marchi compatti minuscoli. */
  width: clamp(240px, 30vw, 440px);
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Il margine extra sotto l'H1 solo se il logo e` effettivamente visibile: l'hook
   <img data-brand-logo> ora e` sempre nel markup (nascosto finche` initBrandDetail
   non trova un logo), quindi :not([hidden]) evita spazio vuoto sui marchi senza logo. */
h1:has(+ .brand-detail__logo:not([hidden])) { margin-bottom: 36px; }
/* 29/09/2026: linea fra H1 e logo — il nome compare due volte (titolo + wordmark
   del logo): la linea li separa in due blocchi invece di leggerli come un doppione. */
body[data-page^="marchi/"]:not([data-page="marchi/index.html"]) .container > h1:has(+ .brand-detail__rule) { margin-bottom: 1.75rem; }
.brand-detail__rule {
  width: min(1020px, 100%);
  margin: 0 auto 2.25rem;
  border: 0;
  border-top: 1px solid var(--c-gray-4, #dcdcdc);
}
.brand-detail__rule + .brand-detail__logo[hidden] + .brand-detail__site { margin-top: 0; }
/* Pulsante «Visita il sito ufficiale» (30/09/2026, su indicazione cliente): in fondo
   alla sezione «Cosa propone», sotto l'elenco della gamma, allineato al testo. */
.brand-prose .brand-detail__site { text-align: left; margin: 2rem 0 0; }
.brand-detail__site:not(:has(a:not([hidden]))) { display: none; }
.brand-cta [hidden] { display: none; }
.brand-cta:not(:has(a:not([hidden]))) { display: none; }
.brand-detail__intro { padding-top: 0; }
.brand-prose {
  max-width: 1020px;
  margin: 0 auto;
  color: var(--c-gray-2);
  font-size: var(--fs-body-lg);
}
/* Layout pagina dettaglio marchio: si applica a tutte le pagine brand
   (marchi/<slug>/index.html) — esclusa l'index /marchi/index.html. */
body[data-page^="marchi/"]:not([data-page="marchi/index.html"]) .container > h1,
body[data-page^="marchi/"]:not([data-page="marchi/index.html"]) .container > h2 {
  max-width: 1020px;
  margin: 0 auto 3rem;
  text-align: center;
}

body[data-page^="marchi/"]:not([data-page="marchi/index.html"]) .section--muted {
  margin-inline: calc(-1 * var(--frame-x));
  border-radius: 0;
  padding-block: clamp(3.5rem, 6vw, 6.5rem);
  margin-bottom: clamp(2.5rem, 4vw, 4.5rem);
}
@media (max-width: 900px) {
  .brand-prose,
  body[data-page^="marchi/"]:not([data-page="marchi/index.html"]) .container > h1,
  body[data-page^="marchi/"]:not([data-page="marchi/index.html"]) .container > h2 { max-width: 100%; }
}
.brand-prose p { color: var(--c-gray-2); font-size: var(--fs-body-lg); margin: 0 0 1.1em; }
.brand-prose ul { color: var(--c-gray-2); font-size: var(--fs-body-lg); margin: 0 0 1.1em; padding-left: 1.5rem; }
.brand-prose ul li { margin: 0 0 .35em; }
.brand-prose strong { color: var(--c-ink); font-weight: 700; }
.brand-cta {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(2.5rem, 4vw, 4rem);
}

.brand-contact {
  max-width: 1460px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
}
.brand-contact__title { font-size: var(--fs-h1); margin: 0; line-height: 1.15; }
.brand-contact__form { display: block; }
.brand-contact__submit { margin-top: 1.5rem; }
@media (max-width: 900px) {
  .brand-contact { grid-template-columns: 1fr; max-width: 100%; }
  .brand-cta { justify-content: flex-start; }
}
.btn--ghost-light { background: transparent; color: #fff; border-color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--c-green); }
@media (max-width: 900px) {
  .contatti-band__bg { display: none; }
  .contatti-band__inner { grid-template-columns: 1fr; }
}

/* ── Dynamic catalog (js/catalog.js) ─────────────────────────────────── */
/* Placeholder "foto mancante". È un MODIFICATORE: definisce solo l'ASPETTO (le righine
   grigie), NON la geometria. Aveva `aspect-ratio: 4/3`, e siccome sta in fondo al foglio
   quel valore SOVRASCRIVEVA il ratio di ogni contenitore a cui viene applicato:
     .product-card__media  16/10  → diventava 4/3
     .card__media          1/1    → diventava 4/3
   Effetto visibile nel catalogo: una card SENZA foto era più ALTA di una CON foto
   (4/3 = 1.33 contro 16/10 = 1.6), e la griglia risultava sfalsata. Senza aspect-ratio
   ogni placeholder eredita il ratio del proprio contenitore → stessa identica geometria
   della card con foto, in ogni contesto. */
.product-card__media--ph {
  background:
    repeating-linear-gradient(135deg, #eef1ee 0 14px, #e7ebe7 14px 28px);
  border-bottom: 1px solid var(--c-gray-200, #e5e7eb);
}
.catalog__search {
  flex: 1 1 220px;
  min-width: 160px;
  padding: 8px 12px;
  border: 1px solid var(--c-gray-300, #d1d5db);
  border-radius: 8px;
  font: inherit;
  color: var(--c-ink, #1a1a1a);
}
.catalog__search:focus {
  outline: 2px solid var(--c-green, #205C16);
  outline-offset: 1px;
}
.catalog__loading,
.catalog__empty {
  grid-column: 1 / -1;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--c-gray-500, #6b7280);
  font-size: 1.05rem;
}

/* ===========================================================================
   Pop-up banner (catalog.js initBanners injects this into [data-banners]).
   Non-blocking promo card, fixed bottom-right; full-width bottom-sheet on
   small screens. Reuses design tokens + the existing .btn for the CTA.
   =========================================================================== */
.banner-popup {
  position: fixed;
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 1000;
  max-width: 420px;
  width: calc(100vw - 24px);
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  animation: banner-pop-in var(--t) ease;
}
.banner-popup__card {
  pointer-events: auto;
  position: relative;
  width: 100%;
  background: var(--c-bg);
  color: var(--c-ink);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: clamp(1.1rem, 2vw, 1.6rem);
}
.banner-popup__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--c-gray-2);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color var(--t-fast), background var(--t-fast);
}
.banner-popup__close:hover { color: var(--c-ink); background: var(--c-bg-3); }
.banner-popup__img {
  display: block;
  width: 100%;
  height: auto;
  margin: -0.4rem 0 1rem;
  border-radius: 10px;
}
.banner-popup__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  margin: 0 0 .5rem;
  padding-right: 2.2rem;
}
.banner-popup__body {
  font-size: var(--fs-body);
  color: var(--c-gray-1);
  margin: 0 0 1.1rem;
}
.banner-popup__cta { display: inline-block; }
@keyframes banner-pop-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 700px) {
  .banner-popup {
    right: 0;
    left: 0;
    bottom: 0;
    max-width: none;
    width: 100%;
    justify-content: stretch;
  }
  .banner-popup__card { border-radius: 14px 14px 0 0; }
  .banner-popup__close { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-popup { animation: none; }
}

/* ===========================================================================
   WIDGET DI ACCESSIBILITÀ (js/a11y.js + build.py a11y_widget()).
   Stato applicato su <html>: .a11y-contrast / .a11y-dyslexia / .a11y-links /
   .a11y-cursor + data-a11y-fs="0..4". Le preferenze ridichiarano i design token
   nello scope <html>, così ogni componente che usa var(--c-*)/var(--ff-*) si
   adegua da solo; gli override per-componente qui sotto coprono solo i casi che
   NON usano i token (colori hardcoded nei .btn, overlay hero).
   =========================================================================== */

/* OpenDyslexic — self-hosted, SIL OFL 1.1. Niente preload (serve solo a chi
   attiva il toggle); font-display:swap. */
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/opendyslexic-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/opendyslexic-bold.woff2') format('woff2');
}

/* ---- Alto contrasto: ridichiara i token colore su <html> ---- */
html.a11y-contrast {
  --c-bg: #000; --c-bg-2: #000; --c-bg-3: #0d0d0d; --c-bg-4: #0d0d0d;
  --c-ink: #fff; --c-ink-2: #fff;
  --c-gray-1: #f2f2f2; --c-gray-2: #f2f2f2; --c-gray-3: #e0e0e0; --c-gray-4: #c9c9c9;
  --c-green: #ffe600; --c-green-dark: #ffe600; --c-green-light: #fff35c;
  --c-red: #ff7b7b; --c-red-dark: #ff7b7b;
  --c-bg-hero: #000;
  color-scheme: dark;
  background: #000;
}
html.a11y-contrast body { background: #000; color: #fff; }
/* I .btn hardcodano color:#fff → su fondo giallo serve testo nero. */
html.a11y-contrast .btn { color: #000 !important; border-color: #ffe600 !important; }
html.a11y-contrast .btn:hover { color: #000 !important; }
html.a11y-contrast .btn--ghost { background: transparent !important; color: #ffe600 !important; }
html.a11y-contrast .btn--ghost-light { background: transparent !important; color: #fff !important; border-color: #fff !important; }
html.a11y-contrast .btn--white,
html.a11y-contrast .btn--dark { background: #fff !important; color: #000 !important; }
/* Hero: overlay scuro pieno → testo bianco sempre leggibile sopra la foto. */
html.a11y-contrast .hero__bg::after,
html.a11y-contrast .subhero .hero__bg::after {
  display: block !important;
  background: rgba(0, 0, 0, .78) !important;
}
/* Bordi visibili per separare le superfici ora tutte nere. */
html.a11y-contrast .card,
html.a11y-contrast .card-big__body,
html.a11y-contrast .banner-popup__card,
html.a11y-contrast .filters { border: 1px solid #fff; }

/* ---- Dimensione testo: moltiplicatore sul root (scala tutto ciò che è in rem) ---- */
html[data-a11y-fs="1"] { font-size: 112.5%; }
html[data-a11y-fs="2"] { font-size: 125%; }
html[data-a11y-fs="3"] { font-size: 137.5%; }
html[data-a11y-fs="4"] { font-size: 150%; }

/* ---- Font per dislessia: sovrascrive i due token famiglia ---- */
html.a11y-dyslexia {
  --ff-display: 'OpenDyslexic', sans-serif;
  --ff-body: 'OpenDyslexic', sans-serif;
}
html.a11y-dyslexia body { letter-spacing: .02em; word-spacing: .08em; line-height: 1.7; }

/* ---- Evidenzia link (esclude i .btn, già evidenti) ---- */
html.a11y-links a:not(.btn):not(.a11y-fab) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
html.a11y-links a:not(.btn):focus-visible { outline: 3px solid var(--c-green-light); }

/* ---- Cursore ingrandito (freccia 48px nera con bordo bianco) ---- */
html.a11y-cursor, html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%3E%3Cpath%20d='M8%204L8%2040L18%2030L24%2044L30%2041L24%2027L38%2027Z'%20fill='%23000'%20stroke='%23fff'%20stroke-width='2.5'%20stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}

/* ---- Guida di lettura (barra che segue il puntatore) ---- */
#a11y-guide-bar {
  position: fixed;
  left: 0; right: 0;
  height: 42px;
  background: rgba(255, 235, 0, .22);
  border-top: 2px solid rgba(0, 0, 0, .55);
  border-bottom: 2px solid rgba(0, 0, 0, .55);
  pointer-events: none;
  z-index: 1090;
  will-change: top;
}

/* ===========================================================================
   UI del widget: FAB (bottom-left, NON collide col promo banner bottom-right)
   + pannello dialog. Il widget DEVE essere esso stesso accessibile.
   =========================================================================== */
.a11y-fab {
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 1100;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--c-green);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-fast), background var(--t-fast);
}
.a11y-fab:hover { background: var(--c-green-dark); transform: translateY(-1px); }
.a11y-fab:focus-visible { outline: 3px solid var(--c-green-light); outline-offset: 2px; }
.a11y-fab svg { width: 30px; height: 30px; }

.a11y-panel {
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  bottom: calc(56px + clamp(12px, 2vw, 24px) + 12px);
  z-index: 1101;
  width: min(340px, calc(100vw - 24px));
  max-height: min(72vh, 620px);
  overflow-y: auto;
  background: var(--c-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-gray-4);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 1rem 1.1rem 1.2rem;
  animation: a11y-pop-in var(--t) ease;
}
.a11y-panel[hidden] { display: none; }
@keyframes a11y-pop-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.a11y-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 .6rem;
}
.a11y-panel__title { font-family: var(--ff-display); font-size: var(--fs-h2); margin: 0; }
.a11y-panel__close {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--c-gray-1);
  font-size: 1.7rem; line-height: 1; cursor: pointer; border-radius: 50%;
}
.a11y-panel__close:hover { background: var(--c-bg-3); color: var(--c-ink); }

.a11y-panel section { margin: .55rem 0; }
.a11y-panel__group-label {
  display: block; font-size: .85rem; font-weight: 700;
  color: var(--c-gray-1); text-transform: uppercase; letter-spacing: .03em;
  margin: 0 0 .35rem;
}

/* Toggle (role=switch): riga con label a sinistra, track a destra. */
.a11y-switch {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem .2rem;
  border: 0; background: transparent; color: inherit;
  font-size: var(--fs-body); text-align: left; cursor: pointer;
  border-radius: 8px;
}
.a11y-switch:hover { background: var(--c-bg-3); }
.a11y-switch:focus-visible { outline: 2px solid var(--c-green); outline-offset: 1px; }
.a11y-switch__track {
  flex: 0 0 auto;
  width: 42px; height: 24px; border-radius: 999px;
  background: var(--c-gray-4); position: relative;
  transition: background var(--t-fast);
}
.a11y-switch__track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform var(--t-fast);
}
.a11y-switch[aria-checked="true"] .a11y-switch__track { background: var(--c-green); }
.a11y-switch[aria-checked="true"] .a11y-switch__track::after { transform: translateX(18px); }

/* Gruppo dimensione testo + TTS: bottoni in riga. */
.a11y-fs__ctrl, .a11y-tts__ctrl { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.a11y-fs__ctrl button, .a11y-tts__ctrl button {
  flex: 1 1 auto; min-width: 44px; min-height: 40px;
  border: 1px solid var(--c-gray-4); border-radius: 8px;
  background: var(--c-bg); color: var(--c-ink);
  font-weight: 700; cursor: pointer; padding: .35rem .6rem;
}
.a11y-fs__ctrl button:hover, .a11y-tts__ctrl button:hover { background: var(--c-bg-3); }
.a11y-fs__ctrl button:focus-visible, .a11y-tts__ctrl button:focus-visible { outline: 2px solid var(--c-green); }
.a11y-fs__level { flex: 0 0 auto; min-width: 84px; text-align: center; font-size: .9rem; color: var(--c-gray-1); }

.a11y-resetall {
  width: 100%; margin-top: .8rem;
  padding: .6rem 1rem; min-height: 44px;
  border: 2px solid var(--c-red); border-radius: var(--r-pill);
  background: transparent; color: var(--c-red);
  font-weight: 700; cursor: pointer;
}
.a11y-resetall:hover { background: var(--c-red); color: #fff; }
.a11y-resetall:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .a11y-panel { animation: none; }
  .a11y-switch__track, .a11y-switch__track::after, .a11y-fab { transition: none; }
}
@media (max-width: 700px) {
  .a11y-panel { width: calc(100vw - 24px); }
}

/* ── Recruitment 1.71.0 — posizioni aperte (pagina lavora-con-noi) ─────────
   Render statico [data-positions-list] (build.py _positions_cards_html); coerente
   col tema agri (verde --c-green, card --shadow-card, radius). Empty-state quando
   non ci sono posizioni: la pagina mostra comunque il form candidatura sotto.

   Ogni posizione e` una TENDINA (<details>/<summary>), non piu` una card in
   griglia: la descrizione e` HTML rich-text lungo, e stampata per intero dentro
   una tessera larga 300px diventava un muro di testo — con piu` annunci, tanti
   muri affiancati. Da chiusa resta il solo profilo (titolo + sede + contratto),
   cosi` l'elenco si scorre a colpo d'occhio. Icona +/− e apertura morbida sono
   gli stessi delle FAQ (.faq__item, vedi il commento li` sopra): due barre che
   ruotano (`content` non e` animabile) e ::details-content + interpolate-size
   per interpolare verso `auto`. Dove non sono supportati, si apre di scatto. */
.positions-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.position-acc {
  background: var(--c-bg);
  border: 1px solid var(--c-gray-4);
  border-radius: var(--hero-r, 12px);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.position-acc--featured { border-color: var(--c-green); border-width: 2px; }
.position-acc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: 1.25rem 4rem 1.25rem 1.5rem;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.position-acc__head::-webkit-details-marker { display: none; }
.position-acc__head::marker { display: none; content: ''; }
.position-acc__head:hover .position-acc__title { color: var(--c-green); }
.position-acc__title {
  font-size: var(--fs-body-lg);
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
  transition: color var(--t);
}
/* Le due barre dell'icona: ::after orizzontale (ferma), ::before verticale che
   ruota a 0° da aperta e si sovrappone → il + diventa un −. Identico alle FAQ. */
.position-acc__head::before,
.position-acc__head::after {
  content: '';
  position: absolute;
  right: 1.5rem; top: 50%;
  width: 16px; height: 3px;
  border-radius: 2px;
  background: var(--c-green);
  transform: translateY(-50%);
  transition: transform var(--t-faq) var(--ease-faq);
}
.position-acc__head::before { transform: translateY(-50%) rotate(90deg); }
.position-acc[open] .position-acc__head::before { transform: translateY(-50%) rotate(0deg); }
.position-acc__meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.position-acc__badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--c-bg-3);
  color: var(--c-ink-2);
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .8125rem;
  font-weight: 600;
}
.position-acc__body { padding: 0 1.5rem 1.5rem; }
.position-acc__desc { color: var(--c-gray-2); font-size: var(--fs-body); }
/* La descrizione e` HTML del RichTextEditor: se l'annuncio apre con un titolo,
   quello cadeva sugli stili globali (h2 = 31px) e dentro la tendina urlava piu`
   del titolo della posizione stessa. Qui i titoli dell'annuncio sono SOTTO-titoli:
   corpo del testo in grassetto, tutti uguali fra loro qualunque livello usi
   l'editor (h2, h3, h4 — non deve dipendere da quale bottone ha premuto). */
.position-acc__desc :where(h1, h2, h3, h4, h5, h6) {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.3;
  margin: 1.25rem 0 .5rem;
}
.position-acc__desc > :where(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.position-acc__desc :where(p, ul, ol):last-child { margin-bottom: 0; }
.position-acc__deadline { color: var(--c-red); font-size: .875rem; font-weight: 600; margin: .75rem 0 0; }
.position-acc__cta { margin-top: 1.25rem; }
.position-acc::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size var(--t-faq) var(--ease-faq),
              opacity calc(var(--t-faq) * .8) var(--ease-faq),
              content-visibility var(--t-faq) allow-discrete;
}
.position-acc[open]::details-content { block-size: auto; opacity: 1; }
@media (max-width: 600px) {
  /* Titolo e badge vanno in colonna: affiancati su schermo stretto il titolo si
     spezzerebbe in verticale contro i badge. */
  .position-acc__head { align-items: flex-start; flex-direction: column; padding-right: 3.25rem; }
}
.positions-empty {
  color: var(--c-gray-2);
  font-size: var(--fs-body-lg);
  background: var(--c-bg-3);
  border-radius: var(--hero-r, 12px);
  padding: 1.5rem;
  margin: 0;
}

/* ── Pagine legali (privacy / cookie / note legali) ────────────────────────
   `.policy-prose` veniva emessa da build.py ma NON aveva UNA SOLA riga di CSS:
   il corpo (markdown dell'admin → HTML) cadeva sugli stili globali, con due
   conseguenze visibili al cliente.
   1. TITOLI SCOMPOSTI: l'h1 del corpo a 50px, gli h2 a 31px — una scala da
      homepage dentro un documento legale, dove i titoli sono solo segnaposto
      di sezione. Qui sono TUTTI UGUALI (≈30px) qualunque livello usi l'editor:
      la gerarchia di un'informativa la fa la numerazione ("1.", "2."), non il
      corpo del carattere.
   2. TABELLE COL DEFAULT DEL BROWSER: padding 1px, zero bordi, border-collapse
      separate → colonne senza respiro ne` allineamento, il testo delle celle
      che si fondeva riga con riga. Sono tabelle di sostanza (finalita`/base
      giuridica, tempi di conservazione, cookie): devono LEGGERSI. */
.policy-prose :where(h1, h2, h3, h4, h5, h6) {
  /* Il token del design system, non un valore inventato: --fs-h2 scala con la
     viewport come tutto il resto del sito (≈30px sui monitor larghi, dove il
     cliente guarda). Prima l'h1 del corpo stava a 50px — questa e` la riga che
     lo riporta in riga con gli altri. */
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.25;
  margin: 2.25rem 0 .75rem;
}
.policy-prose > :where(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.policy-prose :where(p, ul, ol) { color: var(--c-gray-2); }
.policy-meta { color: var(--c-gray-2); font-size: .875rem; margin: 0 0 1.5rem; }

.policy-prose table {
  width: 100%;
  border-collapse: collapse;      /* era `separate`: i bordi non si toccavano */
  margin: 1.25rem 0 2rem;
  font-size: var(--fs-body);
}
.policy-prose :where(th, td) {
  border: 1px solid var(--c-gray-4);
  padding: .75rem 1rem;           /* era 1px: le celle si toccavano */
  text-align: left;               /* le intestazioni erano centrate, le celle no */
  vertical-align: top;            /* celle a piu` righe: si allineano IN ALTO,
                                     non a meta` — era questo il "disallineato" */
  color: var(--c-gray-2);
}
.policy-prose th {
  background: var(--c-bg-3);
  color: var(--c-ink);
  font-weight: 700;
}
.policy-prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--c-bg-3) 45%, transparent); }
@media (max-width: 700px) {
  /* Una tabella a 2-3 colonne di testo non entra in 390px: invece di comprimere
     le colonne fino a spezzare ogni parola, la si fa scorrere in orizzontale
     DENTRO il suo box (il corpo della pagina non scrolla). */
  .policy-prose table { display: block; overflow-x: auto; }
  .policy-prose :where(th, td) { padding: .625rem .75rem; }
}

/* ===========================================================================
   Ricerca blog client-side (1.73.0) — filtra le card già rese da initNews
   (catalog.js wireNewsSearch). Marker: [data-news-search] input +
   [data-news-search-empty] empty-state. Mirroring .site-search__input.
   =========================================================================== */
.news-search { margin: 0 0 1.5rem; max-width: 420px; }
.news-search__input {
  width: 100%;
  font: inherit; font-size: .95rem; color: var(--c-ink);
  background: var(--c-bg-3);
  border: 1px solid #e4e4e4;
  border-radius: var(--r-pill, 999px);
  padding: .6rem 1.1rem;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.news-search__input::placeholder { color: var(--c-gray-3); }
.news-search__input:focus {
  outline: none; background: #fff; border-color: var(--c-green);
  box-shadow: 0 0 0 3px rgba(32,92,22,.12);
}
.news-search .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;
}
.news-search__none {
  color: var(--c-gray-2);
  font-size: var(--fs-body-lg);
  background: var(--c-bg-3);
  border-radius: var(--hero-r, 12px);
  padding: 1.5rem;
  margin: 0 0 1.5rem;
}

/* ============================================================
   Reveal allo scroll (fasce + contenuti) — motore in js/main.js
   ============================================================
   Il pre-stato `opacity:0` vive dietro html.js-reveal, classe che main.js
   aggiunge SOLO se IntersectionObserver esiste e reduced-motion e` off.
   Senza JS, con JS in errore o con reduced-motion attivo nulla e` mai
   nascosto: il contenuto e` sempre nel DOM e sempre visibile.

   L'attributo data-ar-reveal viene RIMOSSO a fine animazione: l'elemento
   torna nudo, cosi` nessun `animation: … both` residuo sovrascrive le
   transition di hover di .svc-card / .product-card (che usano var(--t)).
   Niente will-change: opacity e transform sono gia` composited. */
html.js-reveal [data-ar-reveal] { opacity: 0; }
html.js-reveal [data-ar-reveal].is-revealing {
  animation: ar-reveal var(--ar-dur) var(--ar-ease) both;
  animation-delay: calc(var(--ar-i, 0) * var(--ar-stagger));
}
@keyframes ar-reveal {
  from { opacity: 0; transform: translate3d(0, var(--ar-shift), 0); }
  to   { opacity: 1; transform: none; }
}

/* Ruolo gerarchico — scritto da arRole() come VALORE di data-ar-reveal.
   Nessun keyframe nuovo: ar-reveal legge gia` var(--ar-shift), quindi basta
   ridefinire quella variabile sull'elemento e la stessa animazione cambia
   ampiezza. Il selettore [data-ar-reveal] (presenza) continua a matchare.

   Il criterio e` la PERCEZIONE, non la teoria. La prima versione faceva muovere i
   titoli MENO di tutto il resto (20px contro 30, e durata accorciata del 15%),
   con l'idea che un titolo debba guidare la lettura senza farsi aspettare. Era
   sbagliato: il titolo e` l'elemento piu` grande e piu` guardato della pagina, e
   accanto a un testo che scorre di 30px un titolo che ne fa 20 e finisce PRIMA
   legge come fermo. Chi guardava il sito l'ha notato subito ("gli H non hanno le
   animazioni") — e aveva ragione: erano animati, ma tarati per non vedersi.
   Ora e` il contrario: il titolo e` l'elemento PIU` mosso e il piu` lento. Apre
   la fascia, e si deve vedere che la apre. Le CTA restano brevi: sono piccole, e
   su un elemento piccolo un movimento ampio legge come un sussulto. */
html.js-reveal [data-ar-reveal="head"]  { --ar-shift: 46px; }
html.js-reveal [data-ar-reveal="media"] { --ar-shift: 26px; }
html.js-reveal [data-ar-reveal="cta"]   { --ar-shift: 14px; }
html.js-reveal [data-ar-reveal="head"].is-revealing {
  animation-duration: calc(var(--ar-dur) * 1.2);
}

/* Ri-disegno di griglia (filtri, pager, cambio pill). Le card sono nodi NUOVI,
   quindi il motore le rivelerebbe con la cascata piena: far sfilare 24 card a
   ogni spunta di casella e` un ostacolo, non un piacere. Fade secco, delay 0. */
html.js-reveal [data-ar-reveal="quick"].is-revealing {
  animation: ar-fade var(--ar-dur-quick) var(--ar-ease) both;
  animation-delay: 0s;
}
@keyframes ar-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Ridondanza voluta: il gate primario e` in JS (js-reveal non viene nemmeno
   aggiunta). Questo copre il caso in cui l'utente attivi reduced-motion a
   pagina gia` caricata, prima che il listener 'change' rimuova la classe. */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-ar-reveal],
  html.js-reveal [data-ar-reveal].is-revealing {
    opacity: 1;
    animation: none;
  }
}

/* ============================================================
   Hero — animazione on-load, CSS PURA (non passa dal motore IO)
   ============================================================
   .hero/.subhero restano in AR_SKIP (js/main.js): sono above-the-fold e main.js
   gira in fondo al <body>, quindi aggiunge html.js-reveal DOPO il primo paint —
   un opacity:0 pilotato da li` darebbe un flash (visibile → nascosto → riappare).
   Questo foglio di stile invece e` render-blocking: la sua animazione e` gia`
   attiva al primo paint. Fail-visible via `both` su una base opacity:1 — se
   l'animazione non parte (motore CSS disattivato), l'elemento resta visibile.

   L'IMMAGINE SCALA MA NON SFUMA, ed e` deliberato: l'LCP di Google ignora gli
   elementi a opacity:0 (quindi un fade sposterebbe in avanti l'istante misurato,
   e l'hero e` quasi sempre L'elemento LCP), mentre non squalifica quelli
   trasformati. La scala da` lo stesso "settle" senza costare posizionamento.
   Per lo stesso motivo il titolo ha delay ZERO: sui .subhero senza foto l'LCP
   e` l'h1, e ogni ms di delay sarebbe un ms di LCP in piu`. */
@media (prefers-reduced-motion: no-preference) {
  .hero > .hero__bg img,
  .subhero > .hero__bg img {
    animation: ar-hero-img var(--ar-hero-dur) var(--ar-ease) both;
  }
  .hero__title, .subhero h1,
  .hero__sub, .hero__copy, .subhero__media,
  .hero__inner .btn, .subhero .btn {
    animation: ar-reveal var(--ar-dur) var(--ar-ease) both;
  }
  /* Stessa correzione dei titoli di sezione: l'h1 e` il piu` mosso e il piu`
     lento della pagina. Il delay resta ZERO — e` deliberato: sui .subhero senza
     foto l'h1 e` l'elemento LCP, e ogni ms di ritardo sarebbe un ms di LCP. */
  .hero__title, .subhero h1 {
    --ar-shift: 46px;
    animation-delay: 0s;
    animation-duration: calc(var(--ar-dur) * 1.2);
  }
  .hero__sub, .hero__copy          { animation-delay: 90ms; }
  .subhero__media                  { --ar-shift: 26px; animation-delay: 90ms; }
  .hero__inner .btn, .subhero .btn { --ar-shift: 14px; animation-delay: 180ms; }
}
@keyframes ar-hero-img {
  from { transform: scale(1.08); }
  to   { transform: none; }
}

/* ============================================================
   Micro-interazioni
   ============================================================
   Le card del sito (catalogo, news, servizi, contatti) non avevano ALCUN hover:
   ne` transform ne` ombra. Il pattern qui sotto non e` nuovo — e` quello gia` in
   uso su .marchi-tile e .svc-card, esteso a chi ne era privo. */
.card, .card-big, .product-card, .contact-card {
  transition: transform var(--t), box-shadow var(--t);
}
.card:hover, .card-big:hover, .product-card:hover, .contact-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
/* Zoom della foto SOLO dove il contenitore ritaglia (overflow:hidden) e dove il
   media non ha figli posizionati. .product-card__media e` escluso di proposito:
   contiene i badge/etichette in position:absolute, che la scala trascinerebbe
   ingrandendoli. .card-big non ritaglia (niente overflow:hidden): la foto
   sborderebbe dal padding. Entrambe si limitano al sollevamento. */
.card__media { transition: transform var(--t); }
.card:hover .card__media { transform: scale(1.04); }

/* NIENTE burger → X, ed e` una scelta, non una dimenticanza. La `transition:
   transform` sulle .burger span esiste dall'inizio e nessuno stato la usa: sembra
   un lavoro lasciato a meta`, ma il morph sarebbe INVISIBILE. Il drawer mobile e`
   position:fixed a z-index 100 e copre il burger (che vive nella .site-header,
   sticky a z-index 80: essendo posizionata, la header crea un contesto di
   impilamento da cui un figlio non puo` uscire alzando il proprio z-index).
   Renderlo visibile significa portare la header sopra il drawer, e allora la
   prima voce del menu finisce sotto la header → va rispaziato il drawer. E`
   lavoro di layout sul menu, non di animazione: va fatto di proposito, non di
   straforo. Finche` non lo si fa, un burger che si anima sotto a un pannello
   opaco e` codice morto. */

@media (prefers-reduced-motion: reduce) {
  .card, .card-big, .product-card, .contact-card,
  .card__media,
  .faq__q::before, .faq__q::after {
    transition: none;
  }
  .card:hover, .card-big:hover, .product-card:hover, .contact-card:hover,
  .card:hover .card__media {
    transform: none;
  }
  /* Il pannello si apre e si chiude ISTANTANEAMENTE, ma si apre: mai bloccarlo
     a block-size 0, o la risposta resterebbe irraggiungibile. */
  .faq__item::details-content,
  .faq__item[open]::details-content { transition: none; }
  /* L'hero: nessuna delle sue animazioni parte, perche` il blocco che le
     dichiara e` gia` dietro un @media (prefers-reduced-motion: no-preference). */
}

/* Tendine di menu: chi ha chiesto meno movimento le vede comparire secche.
   In coda al file di proposito: deve vincere sul blocco @media (max-width:1100px). */
@media (prefers-reduced-motion: reduce) {
  .dropdown,
  .has-dropdown.is-open > .dropdown {
    transition: none;
    transform: none;
  }
}

/* ============================================================================
   RESPIRO SU MOBILE — meno cornici, piu` contenuto.
   In coda al file DI PROPOSITO: quasi tutto qui dentro deve vincere su regole
   scritte piu` sopra con la stessa specificita`, e una @media NON aggiunge
   specificita` (lezione pagata due volte in questo file: .fan-band__card e
   .pilastri restavano al layout desktop sul telefono proprio per questo).
   ========================================================================== */
@media (max-width: 700px) {
  :root {
    /* La cornice era max(16px, 8vw) = 62px sui due lati a 390px di schermo, e
       --container (84vw) era tarato per combaciarci. Su un telefono e` spazio
       che manca al contenuto, non respiro: portati entrambi al minimo, la
       colonna utile passa da 328px a 358px. */
    --frame-x: 16px;
    --container: 100%;
  }

  /* TITOLI TUTTI A SINISTRA. Il default e` `.section__head { text-align:center }`
     con la variante `--left` usata solo in alcune sezioni: il risultato, scorrendo
     una pagina sul telefono, era un'alternanza centro/sinistra che sembrava
     casuale. Su schermo stretto il centrato costa anche in leggibilita` (il bordo
     sinistro del testo balla da riga a riga). Una bandiera sola, a sinistra. */
  .section__head,
  .section__head--split { text-align: left; margin-left: 0; align-items: flex-start; }
  .section__head p { margin-left: 0; margin-right: 0; max-width: none; }
  .hero--center { text-align: left; justify-content: flex-start; }

  /* UNA CORNICE SOLA. Le fasce grafiche annidavano due scatole: il riquadro
     esterno (fondo grigio + raggio) e, dentro, la card bianca con il proprio
     fondo e raggio. Su desktop e` una composizione; su un telefono sono due
     bordi concentrici che rubano ~48px di larghezza per non dire nulla.
     Resta la card bianca, che e` quella che porta il contenuto. */
  .fan-band--shape { background-color: transparent; border-radius: 0; padding: 0; }
  /* ...e va tolta anche la scatola INTERNA, che era rimasta. La .fan-band__card
     e` #fff su una pagina #fff: da quando la fascia esterna e` trasparente il suo
     riquadro non si VEDE piu`, ma padding e raggio ci sono ancora. Senza un bordo
     visibile che li giustifichi si leggono come spazio arbitrario — misurato:
     24px di rientro del testo rispetto al resto della pagina (40 contro 16) e un
     vuoto foto→titolo di 30px dove fra due fasce ce ne sono 80. Era questa la
     spaziatura "diversa" che si notava scorrendo, non il ritmo delle fasce. */
  .fan-band--shape .fan-band__card {
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
  /* Foto e scheda sono i due blocchi visibili di UNA fascia: il vuoto fra loro
     va allineato a quello fra le fasce (2 x 40 = 80), altrimenti resta l'unico
     salto fuori misura della pagina. */
  .fan-hero { gap: calc(var(--section-py) * 2); }

  /* Stessa storia per .svc-wrap, il contenitore delle card servizi: e` #FAFAFA
     su pagina bianca, cioe` 5 livelli di grigio su 255 — su uno schermo di
     telefono non si distingue. I suoi 32px di padding non si leggono quindi come
     "dentro un riquadro" ma come vuoto in piu`, e portavano quel passaggio a
     112px contro gli 80 di tutti gli altri. Tolto il padding verticale: lo
     sfondo resta (non da` fastidio), il ritmo torna in riga. */
  .svc-wrap { padding-block: 0; }

  /* Terza scatola invisibile della serie: la .form-card e` #f8f8f8 DENTRO una
     fascia #f8f8f8, senza bordo ne` ombra — non si distingue in alcun modo dal
     fondo su cui poggia. I suoi 20px di padding orizzontale stringevano quindi
     i campi di 40px rispetto al titolo che li sovrasta (campi 32→358 contro
     52→338), senza che nulla lo giustificasse visivamente. Tolti: i campi si
     allineano al titolo e guadagnano 40px di larghezza utile, che su 390px
     contano. Il padding verticale resta: separa il primo campo dalla testata. */
  .form-card {
    padding-inline: 0;
    background: transparent;
    border-radius: 0;
  }

  /* GLI ULTIMI VINCOLI DI GRIGLIA FIGMA. Sono limiti "N colonne su 12" applicati
     al testo: 10/12 sul paragrafo introduttivo e sulle FAQ, 8/12 sull'intro di
     /azienda/, 6/12 sulla card della info-band, 75% sulle sezioni --narrow.
     Descrivono un ritmo su schermo largo, dove accanto alla colonna di testo c'e`
     dell'altro; a 390px la colonna e` UNA e il vincolo si limita a lasciare
     bianco a destra. Effetto misurato in home: il paragrafo andava a capo a
     297px su 358 — 61px prima del margine — mentre il titolo sopra e la foto
     sotto ci arrivavano, e la riga di destra sembrava sfrangiata.
     Nota di specificita`: la regola di /azienda/ pesa (0,3,2), quindi va
     ridichiarata con la sua forma esatta — dentro un gruppo di selettori ognuno
     conserva la propria, e vince per posizione. */
  .intro p,
  .faq,
  .info-band__card,
  .section.section--narrow > .container,
  body[data-page="azienda/index.html"] .azienda-intro .section__head p {
    max-width: none;
  }

  /* Loghi della fascia scorrevole piu` grandi. `clamp(26px, 2.6vw, 42px)` sul
     telefono resta inchiodato al MINIMO: 2.6vw di 390px fa 10px, quindi vince
     sempre il floor di 26 — cioe` la misura piu` piccola proprio dove lo schermo
     e` piu` piccolo e i marchi vanno riconosciuti a colpo d'occhio. Su un
     desktop da 1600px la stessa formula ne da` 42. Portati a 40. */
  .marquee__track img { width: 150px; }   /* larghezza, non altezza: vedi .marquee__track img sopra */
  .marquee__track { gap: 2.5rem; }

  /* Foto dell'articolo: 21/9 e` una proporzione da schermo largo — su 358px di
     colonna diventa una striscia alta 153px, piu` un banner che una fotografia.
     3/2 le restituisce respiro (358x239) senza spingere il corpo del testo
     troppo in basso. Su desktop resta 21/9. */
  .article-hero { aspect-ratio: 3 / 2; }
  /* Le briciole non vanno a capo: la riga resta una, l'ultima voce si tronca. */
  .crumbs--global > .container { flex-wrap: nowrap; }

  /* L'hero alto di /servizi/assistenza/: 380px invece di 700 (45% della prima
     schermata invece dell'83%). Ora funziona, perche` non e` piu` inline. */
  .hero--tall { min-height: 380px; }

  /* ---- RITMO VERTICALE UNIFORME FRA LE FASCE ----------------------------
     Ogni fascia riceve LO STESSO respiro sopra e sotto, cosi` la distanza fra
     due fasce qualsiasi e` sempre la stessa (40 + 40 = 80px).
     Cosa c'era prima: `--section-py` valeva 80px fisso e il ritmo era costruito
     a forza di ECCEZIONI DI ADIACENZA — `.section + .section` azzerava il
     padding-top, `.section + .section--muted` lo rimetteva, `.section--muted +
     .section--muted` usava un margin-top, e alcune pagine avevano margini
     propri su #form. Il risultato misurato su /servizi/assistenza/ era una
     scala disordinata: 24 → 80 → 160 → 160 → 120px. Con un valore unico e
     nessuna eccezione, l'ordine delle sezioni non cambia piu` la spaziatura —
     che e` anche cio` che serve al riordino da admin (`sections-reordered`).
     NB: le fasce TINTE (.section--muted, .svc-wrap, .why-band) hanno in piu` un
     padding INTERNO proprio: e` il respiro del loro contenuto dentro la scatola
     colorata, non spazio fra le fasce, e resta come lo vuole il componente. */
  /* --section-py e` MEZZO vuoto, non il vuoto: ogni fascia mette 20px sotto e la
     seguente 20 sopra, quindi fra due blocchi qualsiasi se ne vedono 40 — la
     stessa misura che separa l'hero dal titolo che lo segue. Il valore visibile
     e` sempre 2 x --section-py, ovunque e senza eccezioni. */
  :root { --section-py: 20px; }
  /* main in colonna FLEX: serve a impedire il COLLASSO DEI MARGINI fra fratelli.
     Fra due fasce colorate adiacenti (su /azienda/: la fascia grigia seguita dal
     banner verde) i due margini da 20px non si sommano — la regola CSS dice che
     fra fratelli in flusso normale vale il MAGGIORE, quindi restavano 20 contro
     i 40 di ogni altra transizione. Nei contenitori flex il collasso non esiste:
     i margini si sommano sempre e il passo resta 40 ovunque, qualunque sia la
     sequenza delle fasce. `main` non aveva stili di layout propri (solo alcuni
     `main:has(...)` per le briciole), quindi il cambio e` innocuo: i figli sono
     blocchi che in colonna occupano comunque tutta la larghezza. */
  main { display: flex; flex-direction: column; }
  /* Fasce TRASPARENTI: mezzo vuoto sopra e sotto, nessun margine. Le colorate
     sono escluse QUI e trattate a parte, non "corrette dopo": una regola come
     `main > .section--muted {…}` peserebbe (0,2,1) contro i (0,3,1) di questo
     selettore e perderebbe comunque, perche` fra due regole vince chi ha piu`
     classi, non chi viene dopo. (Gia` successo due volte in questo blocco: prima
     sul margine, poi sul padding interno delle scatole colorate.) */
  /* NB: `.marquee-band` NON e` in questa lista di esclusioni, ed e` corretto:
     verificato a schermo, il suo sfondo e` rgba(0,0,0,0) — trasparente. Ci era
     finita per somiglianza di nome con le fasce colorate, e ne riceveva 40px di
     padding interno che li` diventavano vuoto in piu`. Trattata come le altre
     trasparenti torna in riga. Il selettore lungo serve anche a scavalcare il
     `main > * + * {margin-top:100px}` di /azienda/ (0,2,2): con sei :not() pesa
     (0,6,1) e vince, altrimenti sopra i loghi restavano 140px invece di 40. */
  main > *:not(.hero):not(.subhero):not(.crumbs):not(.section--muted):not(.why-band):not(.cta-banner) {
    padding-block: var(--section-py);
    margin-block: 0;
  }
  /* ...MA le fasce con SFONDO PROPRIO hanno il padding DENTRO il colore, e li`
     dentro e` respiro del CONTENUTO, non vuoto FRA le fasce: il bordo che
     l'occhio vede e` quello della scatola colorata, non il testo. Senza un
     margine esterno il vuoto dopo (o prima di) una fascia colorata vale quindi
     la META` di quello fra due fasce trasparenti — 40px contro 80. E` la
     differenza che si nota scorrendo, e la ragione per cui misurare i riquadri
     delle sezioni diceva "80 ovunque" mentre l'occhio vedeva altro.
     Il margine glielo restituisce: colorata→trasparente 40+40, trasparente→
     colorata 40+40, sempre 80.
     NB: due fasce colorate ADIACENTI collasserebbero i margini a 40 (regola dei
     margini fra fratelli). Oggi non capita su nessuna pagina — verificato — ma
     se un domani due bande colorate finiscono una sull'altra, il vuoto li` sara`
     40 e non 80: e` l'unico caso che questa impostazione non copre. */
  main > .section--muted,
  main > .why-band,
  main > .cta-banner {
    margin-block: var(--section-py);
    /* Il padding di una fascia COLORATA e` respiro del contenuto DENTRO la
       scatola, non vuoto fra le fasce: resta a 40 anche se il passo esterno e`
       sceso a 20+20. Il vuoto visibile lo fa il margine qui sopra. */
    padding-block: 40px;
  }
  /* Ultimo ritocco: il margine di coda dell'ultimo paragrafo. La regola globale
     `p { margin: 0 0 1em }` lascia ~19px di spazio MORTO in fondo alla fascia —
     invisibile, ma che si somma al vuoto successivo: una fascia che finisce con
     un paragrafo aveva 19+40+40 = ~100px dopo di se`, una che finisce con una
     card o un bottone solo 80. Azzerato SOLO su p/ul in ultima posizione: non
     tocca griglie e card, che il margine ce l'hanno per separarsi fra loro. */
  main > *:not(.hero):not(.subhero):not(.crumbs) p:last-child,
  main > *:not(.hero):not(.subhero):not(.crumbs) ul:last-child { margin-bottom: 0; }
  /* L'unica regola che sopravvivrebbe alla precedente e` quella di assistenza,
     perche` usa un ID (`.section#form`) e un ID batte qualunque numero di
     classi. Va quindi neutralizzata con un selettore altrettanto forte. */
  body[data-page$="assistenza/index.html"] main > .section#form {
    margin-block: 0;
    padding-block: var(--section-py);
  }
  /* L'hero e` l'ECCEZIONE VOLUTA al passo uniforme: sotto di lui lo stacco vale
     META` (40px invece di 80). Scelta del committente, e ha una sua logica —
     l'hero e` l'immagine di apertura e il titolo che segue le appartiene, non
     e` una fascia nuova da distanziare. Il vuoto e` quindi il solo padding-top
     della sezione seguente, senza margine aggiuntivo qui. */
  main > .hero,
  main > .subhero { margin-bottom: var(--section-py); }

  /* Hero "pieni" (.subhero: il riquadro colorato delle pagine catalogo e di
     lavora-con-noi) piu` bassi: 320px per ospitare un titolo di una o due righe
     erano quasi il 40% della prima schermata, per lo piu` vuoti. */
  .subhero:not(.subhero--split) { min-height: 200px; }

  /* I box "Rapida / Precisa / Completa" a tutta larghezza. Dentro .why-band il
     contenitore portava lo stesso vincolo di griglia Figma delle .section--cols-*
     (8 colonne su 12) — corretto sul desktop, dove a fianco c'e` la colonna del
     titolo, ma su 390px lasciava le card a 215px dentro una fascia da 358,
     cioe` 111px sprecati per una regola che li` non descrive piu` nulla. */
  .why-band .container { max-width: none; }
  /* /azienda/ aveva un ritmo TUTTO SUO: `main > * + * { margin-top: 100px }` con
     il padding-block azzerato sulle sezioni senza sfondo. I margini li ha gia`
     annullati la regola generale qui sopra; il padding a zero invece no, perche`
     quel selettore pesa (0,3,2) contro i (0,3,1) del generico — e restituiva
     vuoti di 40px invece di 80. Riallineato con la stessa forma di selettore. */
  body[data-page="azienda/index.html"] main > .section:not(.section--muted),
  body[data-page="azienda/index.html"] main > .marquee-band {
    padding-block: var(--section-py);
  }
  /* ...e il `margin-top: 100px` va tolto anche alle fasce COLORATE di questa
     pagina. Quelle non passano dalla regola generale (sono escluse di proposito:
     il loro vuoto lo fa un margine, non il padding), quindi il 100px di
     /azienda/ (0,2,2) batteva il mio `main > .section--muted` (0,2,1) e restava.
     Misurato: 120px prima della fascia grigia e 100 prima del banner verde,
     contro i 40 di tutte le altre transizioni. Serve la stessa forma di
     selettore per pareggiare la specificita` e vincere per posizione. */
  body[data-page="azienda/index.html"] main > .section--muted,
  body[data-page="azienda/index.html"] main > .cta-banner,
  body[data-page="azienda/index.html"] main > .why-band {
    margin-block: var(--section-py);
  }
}

/* Banner cookie (js/cookie-banner.js, modulo del template vendorizzato byte-
   identico: si restilizza da QUI, mai toccando il modulo). Il modulo inietta
   il proprio <style id="vlt-consent-css"> DOPO questo foglio, coi colori del
   template (teal): le regole qui sotto vincono per specificita` (.vlt-cc …) e
   portano il banner sul verde Agri. «Rifiuta» resta di pari evidenza di
   «Accetta» (Garante 10/06/2021): stessa riga, stesso peso, solo il colore. */
.vlt-cc { font-family: var(--ff-body); color: var(--c-ink); }
.vlt-cc .vlt-cc__t { color: var(--c-ink); }
.vlt-cc .vlt-cc__p a { color: var(--c-green); }
.vlt-cc .vlt-cc__b { border-radius: 999px; }
.vlt-cc .vlt-cc__b--yes { background: var(--c-green); }
.vlt-cc .vlt-cc__b--yes:hover { background: #17420f; }
.vlt-cc .vlt-cc__b--no { color: var(--c-ink); border-color: var(--c-ink); }
.vlt-cc .vlt-cc__b--no:hover { border-color: var(--c-green); color: var(--c-green); }
.vlt-cc .vlt-cc__b--link { color: var(--c-green); }
.vlt-cc .vlt-cc__cat input { accent-color: var(--c-green); }
.site-footer__legal .vlt-pref { color: inherit; font: inherit; text-decoration: underline; }

/* Noleggio senza mezzi in catalogo (01/10/2026): invito al contatto al posto della griglia. */
.catalog-empty-cta {
  max-width: 760px; margin: 0 auto; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem);
  text-align: center; background: var(--c-bg-3, #f4f6f4); border-radius: var(--r-md);
}
.catalog-empty-cta h2 { margin: 0 0 1rem; }
.catalog-empty-cta p { margin: 0 auto 1.75rem; color: var(--c-gray-2); font-size: var(--fs-body-lg); max-width: 60ch; }