@charset "UTF-8";
/* =========================================================================
   Catalogo OS Food Technology — foglio di stile delle pagine pubbliche.

   Veste il markup che generano Pubblico/Catalogo.php, Pubblico/Scheda.php e
   Pubblico/ModuloRichiesta.php. Il markup non si tocca: qui ci sono solo
   classi gia' stampate dal PHP.

   Colori, font e spaziature vengono dal canvas di Claude Design (index.html):
   questo file non inventa un secondo linguaggio grafico, lo continua.

   Ordine: variabili, basi comuni, catalogo, scheda prodotto, modulo,
   telefono e tablet, stampa.
   ========================================================================= */

:root {
  /* Gli stessi valori scritti a mano nel canvas: qui hanno un nome. */
  --osf-fondo:        #ffffff;
  --osf-superficie:   #F3F6F7;   /* fondo delle fotografie e dei riquadri */
  --osf-testo:        #0E1A24;
  --osf-testo-medio:  #2A3A47;
  --osf-testo-tenue:  #5C6B76;   /* 5.5:1 su bianco: regge il testo corrente */
  --osf-bordo:        #DDE3E7;
  --osf-bordo-tenue:  #E7ECEF;   /* i fili dentro la tabella delle specifiche */
  --osf-segnaposto:   #667580;   /* 4.7:1 su bianco: anche il placeholder e' testo */
  --osf-accento:      #0B6E96;   /* 5.7:1 su bianco */
  --osf-accento-chiaro: #17A5DC; /* 2.8:1 su bianco: bordi e segni, mai testo */
  --osf-verde:        #008C45;
  --osf-verde-scuro:  #06703A;   /* 6.2:1: il verde del tricolore non basta */
  --osf-rosso:        #CD212A;   /* 5.5:1 su bianco: errori */
  --osf-rosso-fondo:  #FDF3F4;
  --osf-verde-fondo:  #F1F7F3;

  --osf-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --osf-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --osf-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --osf-raggio: 2px;             /* il canvas non arrotonda quasi niente */
  --osf-larghezza: 1200px;
  --osf-lato: 24px;
  /* La testata del sito e' sticky: senza questo margine gli ancoraggi
     (#galleria, #richiesta, i campi sbagliati) finiscono sotto al menu.
     88px = 73 di testata piu' 15 d'aria, ma vale solo da 900px in su: il menu
     del canvas va a capo quando non ci sta e la testata arriva a 139px e poi a
     191px. Il valore unico dava per scontata un'altezza fissa, e sul telefono
     il titolo della sezione restava dietro la barra: le due media query in
     fondo lo alzano, e catalogo.js lo misura davvero. */
  --osf-testata: 88px;
  /* Il tricolore del canvas: verde, bianco sporco, rosso. Il bianco di mezzo
     sul fondo bianco si legge come una pausa, come nel logo della testata. */
  --osf-tricolore: linear-gradient(to right,
      #008C45 0 33.34%, #F0F0F0 33.34% 66.67%, #CD212A 66.67% 100%);
}

/* ------------------------------------------------------------------ basi */

.catalogo,
.scheda {
  max-width: var(--osf-larghezza);
  margin: 0 auto;
  padding: 0 var(--osf-lato) 96px;
}

/* Tutto quello che ha un id e' un possibile bersaglio di un ancoraggio. */
.catalogo [id],
.scheda [id] { scroll-margin-top: var(--osf-testata); }

/* Il fuoco si vede sempre, anche sopra una fotografia. :focus da solo copre i
   browser senza :focus-visible; la riga dopo lo toglie a chi usa il mouse. */
.catalogo a:focus,
.catalogo button:focus,
.catalogo input:focus,
.scheda a:focus,
.scheda button:focus,
.scheda input:focus,
.scheda textarea:focus {
  outline: 2px solid var(--osf-accento);
  outline-offset: 3px;
}
.catalogo a:focus:not(:focus-visible),
.catalogo button:focus:not(:focus-visible),
.catalogo input:focus:not(:focus-visible),
.scheda a:focus:not(:focus-visible),
.scheda button:focus:not(:focus-visible),
.scheda input:focus:not(:focus-visible),
.scheda textarea:focus:not(:focus-visible) { outline: none; }

/* Etichetta minuta in Plex Mono: la firma grafica del canvas. */
.catalogo__occhiello,
.richiesta__occhiello,
.scheda__categoria,
.scheda-prodotto__categoria,
.galleria__didascalia,
.briciole__elenco,
.campo__etichetta,
.specifiche__gruppo-nome,
.paginazione__stato,
.scheda__pdf-peso,
.menu-categorie__conteggio {
  font-family: var(--osf-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Titoli grandi in Cormorant, come le schermate della vetrina. */
.catalogo__titolo,
.scheda__titolo,
.specifiche__titolo,
.correlati__titolo,
.richiesta__titolo {
  font-family: var(--osf-serif);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--osf-testo);
  margin: 0;
}

/* Il segno tricolore sotto i titoli di sezione: ricorre, senza esagerare. */
.specifiche__titolo::after,
.correlati__titolo::after,
.catalogo__intestazione::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin-top: 18px;
  background: var(--osf-tricolore);
}

/* ------------------------------------------------------- briciole di pane */

.briciole { padding: 22px 0 0; }

.briciole__elenco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;          /* non e' un elenco numerato: e' un percorso */
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--osf-testo-tenue);
}

.briciole__voce { display: flex; align-items: baseline; gap: 10px; }

/* Il separatore e' disegnato qui: nel markup non c'e', e non deve esserci. */
.briciole__voce + .briciole__voce::before {
  content: "/";
  color: #C6CFD5;
  letter-spacing: 0;
}

.briciole__link { color: var(--osf-testo-tenue); }
.briciole__link:hover,
.briciole__link:focus { color: var(--osf-testo); text-decoration: underline; }
.briciole__corrente { color: var(--osf-testo); }

/* --------------------------------------------- intestazione del catalogo */

.catalogo__intestazione { margin: 34px 0 0; max-width: 62ch; }

.catalogo__occhiello {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--osf-accento);
}

.catalogo__titolo {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.06;
  max-width: 22ch;
}

.catalogo__sottotitolo {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.62;
  color: var(--osf-testo-tenue);
}

.catalogo__descrizione { margin: 18px 0 0; font-size: 16px; line-height: 1.7; color: var(--osf-testo-medio); }
.catalogo__descrizione p { margin: 0 0 12px; }
.catalogo__descrizione p:last-child { margin-bottom: 0; }

/* Indirizzo sbagliato: la pagina resta il catalogo, l'occhiello avverte. */
.catalogo--non-trovato .catalogo__occhiello { color: var(--osf-rosso); }

/* ------------------------------------------------- barra delle categorie */

/* Colonna delle categorie a sinistra, griglia a destra. La colonna e' stretta
   e fissa: e' un indice, non un contenuto, e allargandola ruberebbe larghezza
   alle fotografie, che sono la ragione per cui si guarda un catalogo. */
.catalogo__corpo {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: start;
  gap: 44px;
  margin: 36px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--osf-bordo);
}

/* La colonna segue chi scorre, fermandosi sotto la testata appiccicata. */
.catalogo__lato {
  position: sticky;
  top: calc(var(--osf-testata) + 20px);
}

.catalogo__principale { min-width: 0; }

.menu-categorie__titolo {
  margin: 0 0 12px;
  font-family: var(--osf-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--osf-testo-tenue);
}

/* Il pulsante che apre l'elenco sul telefono. Nasce con l'attributo hidden nel
   markup e lo mostra catalogo.js: senza JavaScript non compare un pulsante che
   non aprirebbe niente, e l'elenco resta disteso. */
.menu-categorie__tasto {
  display: none;
  width: 100%;
  align-items: baseline;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--osf-bordo);
  border-radius: var(--osf-raggio);
  background: var(--osf-fondo);
  color: var(--osf-testo);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-categorie__tasto-etichetta {
  flex: none;
  font-family: var(--osf-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--osf-testo-tenue);
}
.menu-categorie__tasto-scelta {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Freccia disegnata in CSS: un file in piu' da caricare per un triangolo no. */
.menu-categorie__freccia {
  flex: none;
  align-self: center;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--osf-testo-medio);
  border-bottom: 2px solid var(--osf-testo-medio);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}
.menu-categorie__tasto[aria-expanded="true"] .menu-categorie__freccia {
  transform: translateY(2px) rotate(-135deg);
}
.menu-categorie__tasto:focus-visible {
  outline: 2px solid var(--osf-accento);
  outline-offset: 2px;
}

.menu-categorie__elenco,
.menu-categorie__figlie {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le sottocategorie rientrano e portano un filo a sinistra: si vede a colpo
   d'occhio dove finisce una famiglia e dove comincia l'altra, senza pallini. */
.menu-categorie__figlie {
  margin: 1px 0 6px 14px;
  padding-left: 12px;
  border-left: 1px solid var(--osf-bordo);
}

.menu-categorie__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px 9px 13px;
  /* La barra dell'attivo occupa 3px: qui se ne tengono 3 di rientro, cosi'
     accendendola il testo non si sposta di un pixel. */
  border-left: 3px solid transparent;
  color: var(--osf-testo-medio);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.menu-categorie__link:hover {
  background: var(--osf-superficie);
  color: var(--osf-testo);
}

.menu-categorie__nome { min-width: 0; }

.menu-categorie__conteggio {
  flex: none;
  font-family: var(--osf-mono);
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--osf-testo-tenue);
}

/* L'attivo si riconosce da tre segnali insieme, non dal solo colore: barra a
   sinistra, fondo pieno e peso del testo. */
.menu-categorie__link--attivo,
.menu-categorie__link--attivo:hover {
  border-left-color: var(--osf-accento);
  background: var(--osf-superficie);
  color: var(--osf-testo);
  font-weight: 600;
}
.menu-categorie__link--attivo .menu-categorie__conteggio { color: var(--osf-accento); }

/* "Tutto il catalogo" e' la voce di partenza: sta staccata dalle famiglie. */
.menu-categorie__link--tutto {
  margin-bottom: 6px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--osf-bordo);
}

.menu-categorie__link--figlia {
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 13px;
  font-weight: 400;
}

/* --------------------------------------------------- campo della ricerca */

.cerca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.cerca__etichetta {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  font-family: var(--osf-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--osf-testo-tenue);
}

.cerca__campo {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--osf-bordo);
  border-radius: var(--osf-raggio);
  background: var(--osf-fondo);
  /* 16px: sotto questa misura iOS ingrandisce la pagina appena si tocca. */
  font-size: 16px;
  color: var(--osf-testo);
  -webkit-appearance: none;
  appearance: none;
}
.cerca__campo::placeholder { color: var(--osf-segnaposto); }
.cerca__campo:focus { border-color: var(--osf-accento); }

.cerca__invio {
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--osf-testo);
  border-radius: var(--osf-raggio);
  background: var(--osf-testo);
  color: var(--osf-fondo);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.cerca__invio:hover { background: var(--osf-accento); border-color: var(--osf-accento); }

/* --------------------------------------------------------- esito ricerca */

.catalogo__esito {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin: 28px 0 0;
  padding: 16px 20px;
  background: var(--osf-superficie);
  border-left: 3px solid var(--osf-accento-chiaro);
}

.catalogo__esito-testo { margin: 0; font-size: 15px; color: var(--osf-testo-medio); }
.catalogo__azzera { font-size: 14px; font-weight: 600; color: var(--osf-accento); border-bottom: 1px solid var(--osf-accento-chiaro); }
.catalogo__azzera:hover { color: var(--osf-testo); }

/* ------------------------------------------------------------- la griglia */

.catalogo__griglia,
.correlati__griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 40px 0 0;
}

.scheda-prodotto { display: flex; min-width: 0; }

.scheda-prodotto__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--osf-bordo);
  border-radius: 3px;
  overflow: hidden;
  background: var(--osf-fondo);
  color: var(--osf-testo);
  transition: border-color 0.18s ease;
}
/* Il colore di passaggio globale (a:hover) schiarirebbe tutto il testo
   della scheda: qui il passaggio si vede sul bordo e sulla fotografia. */
.scheda-prodotto__link:hover { color: var(--osf-testo); border-color: var(--osf-accento-chiaro); }

.scheda-prodotto__immagine {
  display: block;
  aspect-ratio: 4 / 3;       /* rapporto costante: la griglia resta allineata */
  overflow: hidden;
  background: var(--osf-superficie);
  border-bottom: 1px solid var(--osf-bordo);
}

/* Il selettore e' cosi' lungo apposta: la testata generata porta
   `img[width][height] { height: auto }`, che ha specificita' maggiore di una
   classe sola e riporterebbe la fotografia alla sua altezza naturale,
   sfondando il riquadro (e mandando a vuoto object-fit). Qui la specificita'
   pareggia e vince l'ordine, perche' catalogo.css e' collegato dopo. */
.scheda-prodotto__immagine img.scheda-prodotto__foto {
  width: 100%;
  height: 100%;
  /* contain e non cover: sono macchine, tagliarle a meta' non si puo'. */
  object-fit: contain;
  padding: 10px;
  transition: transform 0.35s ease;
}
/* Il passaggio avvicina appena la fotografia: la scheda non si solleva. */
.scheda-prodotto__link:hover .scheda-prodotto__foto { transform: scale(1.04); }

.scheda-prodotto__foto--assente { display: block; width: 100%; height: 100%; }

.scheda-prodotto__testo {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  padding: 20px 22px 22px;
}

.scheda-prodotto__categoria {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--osf-accento);
}

.scheda-prodotto__titolo {
  margin: 0;
  font-family: var(--osf-sans);   /* come le sei schede della home */
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--osf-testo);
}

.scheda-prodotto__sottotitolo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;          /* due righe e poi i puntini */
  line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.55;
  color: var(--osf-testo-tenue);
}

.scheda-prodotto__azione {
  margin-top: auto;               /* resta in fondo anche a schede corte */
  padding-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--osf-accento);
}
.scheda-prodotto__azione::after { content: " \2192"; }

/* ----------------------------------------------- stato vuoto e paginazione */

.catalogo__vuoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin: 48px 0 0;
  padding: 64px 24px;
  border: 1px solid var(--osf-bordo);
  text-align: center;
}

/* Ricerca a vuoto: il testo lo dice gia' la riga dell'esito qui sopra, e nel
   riquadro resta il solo collegamento. Senza questa riga sarebbe mezzo vuoto. */
.catalogo__vuoto:not(:has(.catalogo__vuoto-testo)) { padding: 34px 24px; }

.catalogo__vuoto-testo {
  margin: 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--osf-testo-tenue);
}

.catalogo__vuoto-azione {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 13px 28px;
  background: var(--osf-accento);
  color: var(--osf-fondo);
  border-radius: var(--osf-raggio);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.16s ease;
}
.catalogo__vuoto-azione:hover { background: var(--osf-testo); color: var(--osf-fondo); }

.paginazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 52px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--osf-bordo);
}

.paginazione__numeri {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 8px;
  padding: 0;
  list-style: none;
}

.paginazione__numero,
.paginazione__salto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--osf-bordo);
  border-radius: var(--osf-raggio);
  color: var(--osf-testo-medio);
  font-size: 14px;
  font-weight: 500;
}
.paginazione__numero:hover,
.paginazione__salto:hover { border-color: var(--osf-accento-chiaro); color: var(--osf-testo); }

.paginazione__numero--attivo,
.paginazione__numero--attivo:hover {
  background: var(--osf-testo);
  border-color: var(--osf-testo);
  color: var(--osf-fondo);
  font-weight: 600;
}

.paginazione__stato {
  flex-basis: 100%;
  margin: 12px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--osf-testo-tenue);
}

/* ==========================================================  scheda prodotto */

.scheda__fascia-bozza {
  margin: 22px 0 0;
  padding: 12px 16px;
  background: #FFF6E5;
  border-left: 3px solid #C77700;
  font-family: var(--osf-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7A4B00;
}

/* Fotografia grande a sinistra, dati a destra. In colonna sul telefono. */
.scheda__testa {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin: 34px 0 0;
}

/* ------------------------------------------------------------- galleria */

.galleria { min-width: 0; }

.galleria__principale {
  margin: 0;
  border: 1px solid var(--osf-bordo);
  background: var(--osf-superficie);
}

.galleria__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 12px;
}

.galleria__foto--assente { display: block; width: 100%; aspect-ratio: 4 / 3; }

.galleria__didascalia {
  padding: 12px 14px;
  border-top: 1px solid var(--osf-bordo);
  background: var(--osf-fondo);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--osf-testo-tenue);
}

.galleria__assente {
  margin: 0;
  padding: 60px 20px;
  border: 1px dashed var(--osf-bordo);
  background: var(--osf-superficie);
  text-align: center;
  font-size: 15px;
  color: var(--osf-testo-tenue);
}

.galleria__miniature {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.galleria__miniatura {
  display: block;
  width: 84px;
  aspect-ratio: 1 / 1;
  padding: 4px;
  border: 1px solid var(--osf-bordo);
  background: var(--osf-superficie);
  transition: border-color 0.16s ease;
}
.galleria__miniatura:hover { border-color: var(--osf-accento-chiaro); }

/* Attiva: bordo scuro e spesso, si vede anche senza colore. */
.galleria__miniatura--attiva,
.galleria__miniatura--attiva:hover {
  border: 2px solid var(--osf-testo);
  padding: 3px;
}

/* Stessa ragione del selettore lungo qui sopra: img[width][height]. */
.galleria__miniatura img.galleria__miniatura-foto { width: 100%; height: 100%; object-fit: contain; }
.galleria__miniatura-foto--assente { display: block; width: 100%; height: 100%; }

/* -------------------------------------------------------------- sommario */

.scheda__sommario { min-width: 0; }

.scheda__categoria { margin: 0 0 14px; font-size: 11px; letter-spacing: 0.2em; }
.scheda__categoria-link { color: var(--osf-accento); }
.scheda__categoria-link:hover { color: var(--osf-testo); }

.scheda__titolo { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.07; }

.scheda__sottotitolo {
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 1.62;
  color: var(--osf-testo-medio);
}

/* Un filo separa il sommario dal corpo: senza, sottotitolo e descrizione
   hanno lo stesso peso e la colonna diventa un blocco unico di testo. */
.scheda__descrizione {
  margin: 26px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--osf-bordo);
  font-size: 16px;
  line-height: 1.72;
  color: var(--osf-testo-medio);
}
.scheda__descrizione p { margin: 0 0 14px; }
.scheda__descrizione p:last-child { margin-bottom: 0; }

.scheda__su-misura {
  margin: 24px 0 0;
  padding: 14px 18px;
  background: var(--osf-superficie);
  border-left: 3px solid var(--osf-accento-chiaro);
  font-size: 15px;
  line-height: 1.55;
  color: var(--osf-testo-medio);
}

.scheda__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 0;
}

.scheda__azione {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: var(--osf-raggio);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

/* Il pulsante che porta il preventivo: pieno, nel colore dell'accento. */
.scheda__azione--chiedi {
  background: var(--osf-accento);
  border: 1px solid var(--osf-accento);
  color: var(--osf-fondo);
}
.scheda__azione--chiedi:hover { background: var(--osf-testo); border-color: var(--osf-testo); color: var(--osf-fondo); }

/* Il PDF e' secondario: bordo e basta, ma sta accanto al primo. */
.scheda__azione--pdf {
  background: var(--osf-fondo);
  border: 1px solid var(--osf-bordo);
  color: var(--osf-testo);
}
.scheda__azione--pdf:hover { border-color: var(--osf-accento); color: var(--osf-testo); }
.scheda__pdf-peso { font-size: 10.5px; letter-spacing: 0.12em; color: var(--osf-testo-tenue); }

/* ----------------------------------------------- tabella delle specifiche */

.specifiche { margin: 72px 0 0; }

.specifiche__titolo { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.14; }

.specifiche__contenitore {
  /* Su un telefono e' la tabella a scorrere, non tutta la pagina. */
  overflow-x: auto;
  margin: 28px 0 0;
  max-width: 900px;
}

.specifiche__tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.specifiche__riga { border-top: 1px solid var(--osf-bordo-tenue); }

.specifiche__voce {
  width: 46%;
  padding: 13px 20px 13px 0;
  text-align: left;
  font-weight: 400;
  color: var(--osf-testo-tenue);
  vertical-align: top;
}

.specifiche__valore {
  padding: 13px 0;
  text-align: right;       /* valori incolonnati a destra, come una scheda vera */
  font-weight: 500;
  color: var(--osf-testo);
  vertical-align: top;
}

/* I valori che iniziano con una cifra vanno in Plex Mono a cifre di pari
   larghezza: e' quello che li fa leggere come una misura e non come una frase. */
.specifiche__valore--numero {
  font-family: var(--osf-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.specifiche__riga--gruppo { border-top: 0; }

.specifiche__gruppo-nome {
  padding: 30px 0 9px;
  border-bottom: 2px solid var(--osf-testo);
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--osf-accento);
}
/* Il primo gruppo sta gia' sotto il titolo: non gli serve altra aria sopra. */
.specifiche__gruppo:first-child .specifiche__gruppo-nome { padding-top: 4px; }
.specifiche__gruppo:first-child .specifiche__riga--gruppo + .specifiche__riga { border-top: 0; }

/* --------------------------------------------------------- correlati */

.correlati { margin: 76px 0 0; }
.correlati__titolo { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.14; }
.correlati__griglia { margin-top: 32px; }

/* ============================================ modulo richiesta informazioni */

.richiesta {
  margin: 76px 0 0;
  padding: clamp(24px, 3.4vw, 44px);
  background: var(--osf-superficie);
  border: 1px solid var(--osf-bordo);
  border-top: 3px solid var(--osf-accento-chiaro);   /* come il modulo della home */
}

.richiesta__testa { max-width: 60ch; }
.richiesta__occhiello { margin: 0 0 12px; font-size: 11px; letter-spacing: 0.2em; color: var(--osf-accento); }
.richiesta__titolo { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; }
.richiesta__sottotitolo { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--osf-testo-tenue); }

.richiesta__avviso {
  margin: 24px 0 0;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.55;
  background: var(--osf-fondo);
}

/* Conferma: riquadro verde sobrio, il verde del tricolore scurito per leggerlo. */
.richiesta__avviso--fatto {
  border-left: 3px solid var(--osf-verde);
  background: var(--osf-verde-fondo);
  color: var(--osf-verde-scuro);
  font-weight: 500;
}

.richiesta__avviso--errore {
  border-left: 3px solid var(--osf-rosso);
  background: var(--osf-rosso-fondo);
  color: var(--osf-rosso);
}

.richiesta__avviso-testo { margin: 0 0 8px; font-weight: 600; }
.richiesta__avviso-elenco { margin: 0; padding-left: 20px; }
.richiesta__avviso-voce { margin: 4px 0; }
.richiesta__avviso-voce a { color: var(--osf-rosso); text-decoration: underline; }
.richiesta__avviso-voce a:hover { color: #8E1119; }

.richiesta__modulo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 30px 0 0;
}

/* Il campo esca si nasconde da solo con la riga di stile che il PHP gli
   scrive addosso (e li' deve restare: non deve dipendere da questo file).
   Qui si ribadisce solo che sta fuori dal flusso, cosi' non si prende una
   cella della griglia dei campi. */
.modulo-esca { position: absolute; }

/* align-self: start perche' il campo con l'errore sotto non deve allungare
   il campo che gli sta accanto nella stessa riga della griglia. */
.campo { display: grid; gap: 8px; min-width: 0; align-self: start; }
.campo--messaggio { grid-column: 1 / -1; }

.campo__etichetta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  /* Il marcatore sta accanto all'etichetta, non appeso in fondo al campo:
     su un campo largo 500px finirebbe lontano dalla parola che qualifica. */
  gap: 4px 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--osf-testo-tenue);
}

.campo__obbligatorio { font-size: 10px; letter-spacing: 0.12em; color: var(--osf-accento); }
/* Non piu' chiaro di cosi': a 10px il grigio tenue e' gia' al limite del
   contrasto AA sul fondo del riquadro. Il marcatore pesa meno per misura,
   non per colore. */
.campo__facoltativo  { font-size: 10px; letter-spacing: 0.12em; color: var(--osf-testo-tenue); }

.campo__controllo {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid var(--osf-bordo);
  border-radius: var(--osf-raggio);
  background: var(--osf-fondo);
  font-size: 16px;           /* niente ingrandimento automatico su iOS */
  line-height: 1.5;
  color: var(--osf-testo);
  -webkit-appearance: none;
  appearance: none;
}
.campo__controllo::placeholder { color: var(--osf-segnaposto); }
.campo__controllo:focus { border-color: var(--osf-accento); }

textarea.campo__controllo { min-height: 150px; resize: vertical; }

.campo--errore .campo__controllo { border-color: var(--osf-rosso); }

.campo__errore { margin: 0; font-size: 14px; line-height: 1.45; color: var(--osf-rosso); }

.richiesta__piede {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 4px;
}

.richiesta__invio {
  min-height: 54px;
  padding: 16px 36px;
  border: 0;
  border-radius: var(--osf-raggio);
  background: var(--osf-accento);
  color: var(--osf-fondo);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.16s ease;
}
.richiesta__invio:hover { background: var(--osf-testo); }

.richiesta__nota { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: var(--osf-testo-tenue); }

.richiesta__diretto {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--osf-bordo);
  font-size: 15px;
  color: var(--osf-testo-tenue);
}
.richiesta__diretto-link { color: var(--osf-accento); font-weight: 600; border-bottom: 1px solid var(--osf-accento-chiaro); }
.richiesta__diretto-link:hover { color: var(--osf-testo); }

/* ==================================================== tablet e telefono */

@media (max-width: 1023px) {
  .catalogo__griglia,
  .correlati__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

@media (max-width: 899px) {
  /* Con il menu a panino la testata torna a una riga sola: 73px misurati,
     piu' l'aria. Prima, con le voci su tre righe, ne misurava 154. */
  :root { --osf-testata: 86px; }

  /* La colonna diventa una riga sola che dice dove sei: l'elenco si apre
     toccandola. Prima scorreva in orizzontale, e meta' delle famiglie restava
     fuori dallo schermo senza che si vedesse che c'erano. */
  .catalogo__corpo {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-top: 20px;
  }
  .catalogo__lato { position: static; }
  .menu-categorie__titolo { display: none; }
  .menu-categorie__tasto { display: flex; }

  /* Chiuso finche' il JavaScript non dice il contrario: la classe la mette
     catalogo.js, cosi' senza JavaScript l'elenco resta visibile. */
  .menu-categorie--richiudibile .menu-categorie__elenco { display: none; }
  .menu-categorie--richiudibile .menu-categorie__elenco.aperto { display: flex; }

  .menu-categorie__elenco {
    margin-top: 8px;
    padding: 4px 0;
    border: 1px solid var(--osf-bordo);
    border-radius: var(--osf-raggio);
  }
  /* Righe piu' alte: qui si tocca col pollice, non si punta col mouse. */
  .menu-categorie__link {
    min-height: 46px;
    align-items: center;
    padding: 12px 14px 12px 13px;
  }
  .menu-categorie__link--figlia { min-height: 42px; }
  .menu-categorie__link--tutto {
    margin: 0 0 4px;
    padding-bottom: 14px;
  }

  .scheda__testa { grid-template-columns: minmax(0, 1fr); }
  /* In colonna la fotografia non deve mangiarsi tutto lo schermo. */
  .galleria__foto { aspect-ratio: 16 / 11; }
}

@media (max-width: 639px) {
  /* Tre righe di menu: 191px misurati a 488px di larghezza. Il margine di piu'
     lascia solo un po' d'aria sopra al bersaglio, mai un titolo coperto. */
  :root { --osf-testata: 206px; }

  .catalogo,
  .scheda { padding: 0 18px 64px; }

  .catalogo__griglia,
  .correlati__griglia { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  .catalogo__intestazione { margin-top: 26px; }
  .catalogo__sottotitolo { font-size: 16px; }

  .specifiche,
  .correlati,
  .richiesta { margin-top: 52px; }

  .richiesta__modulo { grid-template-columns: minmax(0, 1fr); }
  .richiesta { padding: 22px 18px 26px; }
  .richiesta__invio { width: 100%; justify-content: center; }

  .scheda__azioni { flex-direction: column; align-items: stretch; }
  .scheda__azione { justify-content: center; }

  .specifiche__tabella { font-size: 14px; }
  .specifiche__voce { width: 50%; padding-right: 14px; }
  .specifiche__valore--numero { font-size: 13px; }

  .catalogo__vuoto { padding: 44px 18px; }
  .paginazione__numeri { margin: 0; }
}

/* Sotto i 345px il menu della testata passa a quattro righe (245px misurati a
   320px di larghezza): l'ultimo scalino serve ai telefoni piccoli, dove senza
   JavaScript il titolo della sezione tornerebbe sotto la barra. */
@media (max-width: 359px) {
  :root { --osf-testata: 260px; }
}

/* Chi ha chiesto meno movimento non lo riceve: niente zoom, niente sfumature. */
@media (prefers-reduced-motion: reduce) {
  .catalogo *,
  .scheda * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .scheda-prodotto__link:hover .scheda-prodotto__foto { transform: none; }
}

/* ============================================================== stampa */
/* In azienda la scheda si stampa davvero: deve restare una scheda tecnica.
   Via il menu, il modulo, i correlati e gli strumenti di navigazione;
   restano fotografia, testi, specifiche e un indirizzo a cui scrivere. */

@media print {
  /* Le regole del canvas sono inline: qui servono gli !important per vincerle. */
  body > header {
    position: static !important;
    background: #fff !important;
    border-bottom: 1px solid #999 !important;
  }
  body > header nav { display: none !important; }   /* resta solo il marchio */
  body > footer { display: none !important; }

  .catalogo,
  .scheda { max-width: none; padding: 0; }
  .catalogo__corpo { display: block; border-top: 0; }

  .catalogo__lato,
  .paginazione,
  .catalogo__esito,
  .correlati,
  .galleria__miniature,
  .scheda__azioni,
  .scheda-prodotto__azione { display: none !important; }

  .catalogo__intestazione::after,
  .specifiche__titolo::after { display: none; }

  .briciole { padding-top: 10px; }
  .briciole__elenco { color: #444; }

  .scheda__testa {
    display: grid;
    grid-template-columns: 46% 1fr;
    gap: 8mm;
    margin-top: 6mm;
  }

  .galleria__principale { border: 1px solid #999; }
  .galleria__foto { max-height: 85mm; aspect-ratio: auto; padding: 0; }

  .scheda__titolo { font-size: 26pt; }
  .scheda__sottotitolo { font-size: 11pt; }
  .scheda__descrizione { font-size: 10pt; }
  .scheda__su-misura { background: none; border-left: 2px solid #999; }

  /* Le specifiche sono il motivo per cui la scheda si stampa: non si spezzano. */
  .specifiche { margin-top: 8mm; break-inside: avoid; page-break-inside: avoid; }
  .specifiche__contenitore { overflow: visible; max-width: none; }
  .specifiche__titolo { font-size: 15pt; }
  .specifiche__tabella { font-size: 10pt; }
  .specifiche__riga { border-top: 1px solid #bbb; break-inside: avoid; page-break-inside: avoid; }
  .specifiche__gruppo-nome { color: #000; border-bottom: 1.5pt solid #000; padding-top: 6mm; }

  /* Del modulo resta solo la riga con l'indirizzo: e' un contatto utile. */
  .richiesta {
    margin-top: 8mm;
    padding: 4mm 0 0;
    background: none;
    border: 0;
    border-top: 1px solid #999;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .richiesta__testa,
  .richiesta__avviso,
  .richiesta__modulo .campo,
  .richiesta__piede,
  .modulo-esca { display: none !important; }
  .richiesta__modulo { display: block; margin: 0; }
  .richiesta__diretto { margin: 0; padding: 0; border: 0; font-size: 10pt; color: #000; }
  .richiesta__diretto-link { color: #000; border: 0; }

  .catalogo__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6mm; }
  .scheda-prodotto__link { border-color: #999; break-inside: avoid; page-break-inside: avoid; }

  a { text-decoration: none; }
}

@page { margin: 14mm; }

/* Accesso alla presentazione fotografica, coerente con la vetrina. */