/* ============================================================
   MITAL — Stili base e componenti
   Le sezioni si separano solo con lo spazio: niente bordi,
   niente ombre, niente box. Il bianco è l'elemento di design.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { font-weight: 400; margin: 0 0 var(--space-3); }
h1 { font-size: var(--text-display); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: 1.0625rem; }

p { margin: 0 0 var(--space-2); max-width: var(--measure); }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-out);
}
a:hover { color: var(--color-brand-dark); }

/* Selezione testo: l'ambra qui è un riempimento, quindi testo nero */
::selection {
  background: var(--color-brand);
  color: #111;
}

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

/* --- Utility ------------------------------------------------ */

.container {
  padding-inline: var(--page-margin);
  max-width: 1600px;
  margin-inline: auto;
}

.section { margin-block: var(--section-gap); }

/* Titolo che resta nel DOM per SEO e screen reader ma sparisce a schermo.
   Niente display:none (lo toglierebbe anche agli assistivi) e niente
   text-indent (occuperebbe comunque la riga): rettangolo di 1px ritagliato. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);   /* fallback per i browser senza clip-path */
  clip-path: inset(50%);
}
/* il primo elemento visibile dopo un titolo nascosto non deve ereditare il
   margine che lo staccava dal titolo */
.prose > .visually-hidden + * { margin-top: 0; }

/* Codici prodotto: trattamento tecnico identitario (380, RM09, PI65) */
.code {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-soft);
}

.label {
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-soft);
}

/* Link "Scopri →" — la freccia è uno dei 5 ruoli del colore brand.
   È un glifo di testo: su fondo bianco usa la tinta scura (5.2:1),
   sopra le foto (hero, card overlay) torna l'ambra piena, che su scuro
   è la più leggibile delle due. */
.discover {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: var(--text-body);
}
.discover::after {
  content: '\2192';
  color: var(--color-brand-dark);
  transition: transform var(--dur-hover) var(--ease-out);
}
.discover:hover::after { transform: translateX(4px); }
/* Sopra le foto il fondo è scuro: l'ambra piena si legge, la scura no */
.hero__caption .discover::after,
.card--overlay .discover::after { color: var(--color-brand); }

/* Pulsanti: primario = brand (ruolo firma), secondario = hairline */
.btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: var(--text-body);
  border: 1px solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.btn:hover { background: var(--color-text); color: var(--color-bg); }
/* Fondo ambra + testo NERO: bianco su ambra sarebbe 1.9:1, nero è 9.3:1.
   L'hover scurisce solo il fondo (≈7:1 col nero), il testo resta nero. */
/* Invio in forma di collegamento: stessa lingua grafica di `.discover`.
   Serve il reset perché è un <button>, che non eredita font e colore. */
.btn--link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
}
.btn--link::after {
  content: '\2192';
  color: var(--color-brand-dark);
  transition: transform var(--dur-hover) var(--ease-out);
}
.btn--link:hover { color: var(--color-brand-dark); }
.btn--link:hover::after { transform: translateX(4px); }

.btn--primary { background: var(--color-brand); border-color: var(--color-brand); color: #111; }
.btn--primary:hover { background: color-mix(in srgb, var(--color-brand), #000 14%); border-color: color-mix(in srgb, var(--color-brand), #000 14%); color: #111; }

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

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background 0.18s var(--ease-out), color 0.05s linear;
}
.site-header a,
.site-header .logo-mark {
  transition-duration: 0.05s; /* niente latenza sul cambio colore */
}
.site-header .container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-header.is-solid,
body:not(.has-hero) .site-header {
  background: var(--color-bg);
  color: var(--color-text);
}
body.has-hero .site-header:not(.is-solid) { color: #fff; }

.site-logo {
  font-size: 1.375rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-logo:hover { color: inherit; }

.site-nav ul {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-size: 0.9375rem;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
}
/* Niente sottolineature nel menu (richiesta utente): la voce attiva
   e l'hover si distinguono solo col colore */
.site-nav .current-menu-item > a { color: var(--color-brand-dark); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 8px;
}

/* --- Hero --------------------------------------------------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--color-text);
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* --hero-pos arriva da front-page.php, per slide. Su desktop la foto
     verticale si taglia sopra/sotto, quindi conta la Y. */
  object-position: var(--hero-pos, 50% 50%);
}
@media (max-width: 699.98px) {
  /* Su telefono la foto verticale entra tutta in altezza e si taglia ai LATI:
     conta la X, e alcune slide hanno bisogno di un centro diverso. */
  .hero__slide img { object-position: var(--hero-pos-mobile, var(--hero-pos, 50% 50%)); }
}

.hero__slide::after {
  /* velo per leggibilità di caption (basso) e header (alto) su foto chiare */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.58), rgba(0,0,0,0) 55%),
    linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(0,0,0,0) 24%);
}
/* locandina (Sicam): le scritte sono nell'immagine, resta solo il velo alto per l'header */
.hero__slide--poster::after {
  background: linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(0,0,0,0) 18%);
}
.hero__caption[hidden] { display: none; }
.hero__caption {
  position: absolute;
  z-index: 2;
  left: var(--container-inset);
  bottom: clamp(48px, 8vh, 96px);
  color: #fff;
}
/* la caption si spegne e si riaccende a metà crossfade (vedi main.js) */
.hero__caption { transition: opacity 0.4s var(--ease-out); }
.hero__caption.is-fading { opacity: 0; }
.hero__caption .code { color: rgba(255,255,255,0.75); }
.hero__caption h1 { margin-bottom: var(--space-2); }
.hero__caption .discover { color: #fff; }

.hero__progress {
  position: absolute;
  z-index: 2;
  right: var(--container-inset);
  bottom: clamp(48px, 8vh, 96px);
  display: flex;
  gap: 10px;
}
.hero__progress button {
  width: 32px;
  height: 2px;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
}
/* progress slider: micro-ruolo del colore brand */
.hero__progress button.is-active { background: var(--color-brand); }

/* --- Manifesto ----------------------------------------------- */

.manifesto {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.3125rem);
  line-height: 1.5;
}
/* seconda parte del testo di catalogo: stessa colonna, corpo normale e tinta
   morbida, così la frase principale resta la prima cosa che si legge */
.manifesto-nota {
  max-width: var(--measure);
  margin: var(--space-3) auto 0;
  text-align: center;
  color: var(--color-text-soft);
  line-height: 1.6;
}

/* --- Griglia collezioni / card prodotto ---------------------- */

.grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(12, 1fr);
}
.grid > * { grid-column: span 12; }

@media (min-width: 700px) {
  .grid--2 > * { grid-column: span 6; }
  .grid--3 > * { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .grid--3 > * { grid-column: span 4; }
}

/* Griglia prodotti a 4 colonne (richiesta cliente 18/9/2026). Solo passi
   che dividono 16 (prodotti per pagina): 2 colonne fino ai tablet, 4 da
   900px. Con 3 colonne l'ultima riga di ogni pagina resterebbe monca. */
.grid--4 > * { grid-column: span 6; }
@media (max-width: 699.98px) {
  .grid--4 { column-gap: var(--space-2); }
}
@media (min-width: 900px) {
  .grid--4 > * { grid-column: span 3; }
}

.card { display: block; }
.card:hover { color: inherit; }
.card__media {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  aspect-ratio: 4 / 5;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5%;
  box-sizing: border-box;
  transition: transform var(--dur-hover) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.03); }
/* Foto «a copertina» (richiesta Mital 25/09/2026): news e card della home sono foto
   ambientate, non pezzi scontornati. Riempiono il riquadro, senza il margine del 5%,
   così il bordo della foto è a filo con il testo sotto. Le card prodotto restano
   contain + margine: lì il pezzo deve stare intero con il suo bianco attorno. */
.news-card .card__media img,
.card--overlay .card__media img {
  object-fit: cover;
  padding: 0;
}
/* le foto delle news 2026 sono 7:10 (1504×2150): col riquadro 4:5 il cover tagliava
   ~6% sopra e sotto (il logo della news «identità» usciva dal bordo, 29/09/2026) */
.news-card .card__media { aspect-ratio: 7 / 10; }
.card__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
}
.card__title { font-size: 1rem; margin: 0; }
.card .discover {
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.card:hover .discover { opacity: 1; }

/* Card prodotto: codice, nome e «Scopri →» in una sola colonna CENTRATA
   sotto la foto (richiesta Mital 25/09/2026; prima allineata a sinistra).
   Non sopra la foto: le foto sono scontornate su bianco con l'oggetto al
   centro, un testo lì sopra coprirebbe il prodotto.
   Con il mouse «Scopri» compare all'hover; su touch (niente hover) resta
   sempre visibile, più discreto. */
.card--prodotto .card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 2px;
}
.card--prodotto .discover {
  margin-top: 6px;
  font-size: 0.875rem;
  transform: translateY(-3px);
  transition: opacity var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.card--prodotto:hover .discover,
.card--prodotto:focus-visible .discover {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .card--prodotto .discover {
    opacity: 1;
    transform: none;
    color: var(--color-text-soft);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card--prodotto .discover { transform: none; }
}

/* Pallino "Novità": micro-ruolo del colore brand */
.badge-new::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-brand);
  margin-right: 8px;
  vertical-align: 2px;
}

/* --- News ----------------------------------------------------- */

.news-card time { display: block; margin-bottom: var(--space-1); }

/* --- Newsletter ----------------------------------------------- */

/* La newsletter è la quarta colonna del footer (non più una fascia a sé):
   in colonna stretta il form si impila e i campi vanno a piena larghezza. */
.footer-col--newsletter form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-col--newsletter p { margin-bottom: var(--space-3); }
/* Campi a filetto, come le hairline del footer: niente scatole con bordo su
   quattro lati, che in mezzo a colonne di solo testo pesavano troppo. */
.footer-col--newsletter input[type="email"],
.footer-col--newsletter select {
  width: 100%;
  padding: 6px 0;
  font: inherit;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
}
/* niente `appearance: none`: senza la freccetta nativa il campo non si legge
   come una tendina */
.footer-col--newsletter input[type="email"]:focus,
.footer-col--newsletter select:focus {
  outline: none;
  border-bottom-color: var(--color-text);
}
.footer-col--newsletter input::placeholder { color: var(--color-text-soft); }



/* Voci raggiungibili solo dal footer (Progetti, Materiali, Download): compaiono
   nel menu a tendina di mobile, dove il footer le nasconde per stare compatto.
   Su desktop il footer c'è tutto, quindi qui non servono. */
/* `.site-nav ul { display: flex }` è più specifico di `.site-nav__extra`:
   per nasconderle su desktop serve la classe del nav davanti. */
.site-nav .site-nav__extra { display: none; }
@media (max-width: 860px) {
  .site-nav .site-nav__extra {
    display: block;
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: var(--space-2) 0 0;
    border-top: 1px solid var(--color-line);
  }
  .site-nav .site-nav__extra li { margin-bottom: var(--space-1); }
  /* `.site-nav a` (font-size 1.5rem) è più avanti nel file e ha la stessa
     specificità: qui serve `.site-nav` davanti, o vincerebbe per ordine. */
  .site-nav .site-nav__extra a {
    display: block;
    min-height: 44px;
    line-height: 44px;
    /* più piccole delle voci principali: sono un secondo livello, non un pari */
    font-size: 1.0625rem;
    color: var(--color-text-soft);
  }
  .site-nav .site-nav__extra a:hover { color: var(--color-brand-dark); }
}

/* --- Footer ---------------------------------------------------- */

.site-footer {
  /* lo stacco dal contenuto lo faceva il bordo della fascia newsletter, che
     ora è una colonna qui dentro: il filetto nero passa al footer stesso. */
  border-top: 3px solid var(--color-text);
  padding-block: var(--space-10) var(--space-6);
  font-size: 0.875rem;
}

.footer-top {
  /* il claim sta sotto al logo: appeso all'estremità destra sulla stessa linea
     di base restava scollegato dal marchio */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-bottom: var(--space-8);
}
.footer-brand { color: var(--color-logo); }
.footer-brand:hover { color: var(--color-logo); }
.footer-brand .logo-mark { height: 96px; }
.footer-claim {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

.footer-grid { row-gap: var(--space-6); }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--color-text); }
.site-footer a:hover { color: var(--color-brand-dark); }
.site-footer .grid { row-gap: var(--space-6); }
@media (min-width: 700px) {
  /* Due colonne per riga: a questa larghezza quattro affiancate strozzerebbero
     i campi della newsletter. */
  .site-footer .grid > * { grid-column: span 6; }
}
@media (min-width: 1024px) {
  /* Tre colonne: Mital Srl | Navigazione | Resta aggiornato (Download tolta dal
     footer il 25/09/2026, ora è nel menu principale). La newsletter chiude a destra. */
  .site-footer .grid > * { grid-column: span 4; }
  .site-footer .footer-col--sede { grid-column: 1 / span 4; }
  .site-footer .footer-col--nav { grid-column: 5 / span 4; }
  .site-footer .footer-col--newsletter { grid-column: 9 / span 4; }
}
.site-footer h4 {
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-soft);
  margin-bottom: var(--space-2);
}
/* «Mital Srl» è il nome dell'azienda, non un titoletto di colonna: in rilievo
   (richiesta Mital 25/09/2026). Le altre colonne tengono l'etichetta grigia. */
.site-footer .footer-col--sede h4 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer .colophon {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1 1 auto;
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
}
.site-footer .colophon a { color: var(--color-text-soft); }
.site-footer .colophon a:hover { color: var(--color-brand-dark); }

/* Riga social in fondo: orizzontale, staccata da una hairline.
   La hairline la porta questa riga; il colophon che la segue non la ripete,
   così i due blocchi si leggono come una fascia sola. */
.footer-social {
  margin-top: var(--space-8);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}
.footer-social .social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.footer-social .social-links li { margin-bottom: 0; }
.footer-social + .colophon {
  margin-top: var(--space-3);
  padding-top: 0;
  border-top: 0;
}

/* Footer mobile: stesso breakpoint in cui la griglia si impila (700px),
   altrimenti si vede una fascia intermedia con le colonne già a pila ma
   il contenuto ancora a sinistra. Colonne Navigazione e Download nascoste
   (i link restano nel menu principale), tutto il resto centrato. */
@media (max-width: 699.98px) {
  .site-footer { padding-block: var(--space-8) var(--space-5); }
  .site-footer .container { text-align: center; }
  /* la frase del consenso è lunga: centrata a bandiera si legge male */
  .site-footer .footer-col--newsletter .consent { text-align: left; }
  /* il testo digitato resta a sinistra (è un campo), ma l'invio si allinea
     al resto del footer centrato */
  .footer-col--newsletter form { align-items: center; }
  .footer-col--newsletter input[type="email"],
  .footer-col--newsletter select { align-self: stretch; }
  .site-footer .footer-col--nav,
  .site-footer .footer-col--download { display: none; }
  .footer-top {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
  }
  .footer-social { margin-top: var(--space-6); }
  .footer-social .social-links { justify-content: center; }
  .site-footer .colophon { justify-content: center; text-align: center; }
}

/* --- Tabella tecnica ------------------------------------------- */

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-line);
  font-weight: 400;
}
.spec-table th { color: var(--color-text-soft); width: 40%; }

/* --- Scheda prodotto --------------------------------------------- */

.product__gallery { grid-column: span 12; }
.product__info { grid-column: span 12; }
@media (min-width: 900px) {
  .product__gallery { grid-column: span 6; }
  .product__info { grid-column: 8 / span 5; }
}
.product__media {
  background: #ffffff;
  max-width: 560px; /* la foto 4:5 non deve dominare la scheda su desktop */
  margin-inline: auto; /* centrata nella sua colonna */
  aspect-ratio: 4 / 5; /* altezza stabile: foto e vista 3D occupano lo stesso box */
}
.product__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4%;
  box-sizing: border-box;
}
.product__info h1 { font-size: var(--text-h2); margin-block: 4px var(--space-2); }
.product__excerpt { margin-bottom: var(--space-4); }
.product__finishes { margin-block: var(--space-4); }
.product__finishes ul {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-size: 0.9375rem;
}
.product__finishes li { display: flex; align-items: center; gap: 8px; }
.swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  display: inline-block;
}
.product__info .spec-table { margin-block: var(--space-4); }
.product__downloads { margin-block: var(--space-4); }
.product__downloads ul { list-style: none; margin: var(--space-1) 0 0; padding: 0; }
.product__downloads li { margin-bottom: 6px; }
.product__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.product__description { margin-top: var(--section-gap); max-width: var(--measure); }
/* «Codici e varianti» (titolo + tabella nel contenuto del prodotto) è un dato di
   servizio, non un contenuto da leggere: titolo come le etichette («Finiture») e
   tabella piccola e tenue (richiesta Mital 25/09/2026). */
.product__description h2 {
  font-size: var(--text-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-soft);
  margin: var(--space-6) 0 var(--space-1);
}
.product__description .varianti-table { font-size: 0.75rem; color: var(--color-text-soft); }
.product__description .varianti-table th,
.product__description .varianti-table td { padding: 6px 12px 6px 0; width: auto; }
.product__description .varianti-table th { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.product__description > div:has(> .varianti-table) { overflow-x: auto; }

/* --- Listing / filtri categorie ----------------------------------- */

.archive-head { margin-bottom: var(--space-6); }
.archive-filter { margin: 0; }
/* Barra del catalogo: filtri categorie a sinistra, ricerca a destra, sulla
   stessa linea di base. Il margine sotto sta sulla barra, non sul filtro. */
.catalog-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
}
.archive-filter ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
/* Voci in grassetto come il menu ma più piccole (0.8125rem contro 0.9375rem
   del menu desktop): il filtro è subordinato alla navigazione (richiesta
   cliente 18/9/2026). La hairline è una sottolineatura e non un bordo, così
   su mobile l'area di tocco può crescere a 44px senza allontanarla dal testo. */
.archive-filter a {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  padding-block: 6px;
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-out);
}
/* Come il menu principale (richiesta Mital 25/09/2026): niente sottolineato,
   la voce attiva e l'hover si distinguono solo col colore. Tinta scura del
   giallo: l'ambra piena su bianco (1.9:1) non si leggerebbe. */
.archive-filter a.is-active,
.archive-filter a:hover {
  color: var(--color-brand-dark);
}
@media (max-width: 860px) {
  .catalog-bar { margin-bottom: var(--space-4); }
  .archive-filter ul { gap: 0 var(--space-3); }
  .archive-filter a { padding-block: 13px; }
}
/* Scheda prodotto: il filtro sta sopra la gallery, non sopra una griglia */
.product > .catalog-bar { margin-bottom: var(--space-4); }

/* Ricerca nel catalogo: campo a filetto come quelli della newsletter (niente
   scatola), stesso corpo e peso delle voci del filtro per restare nella
   stessa riga visiva. «Cerca» è un collegamento testuale, non un bottone
   pieno: l'ambra resta per le CTA. */
.catalog-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 18rem;
  min-width: 12rem;
  border-bottom: 1px solid var(--color-line);
  transition: border-color var(--dur-hover) var(--ease-out);
}
.catalog-search:focus-within { border-bottom-color: var(--color-text); }
.catalog-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 0;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
}
.catalog-search input::placeholder { color: var(--color-text-soft); }
.catalog-search__btn {
  flex: none;
  padding: 6px 0;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  background: none;
  border: 0;
  cursor: pointer;
}
.catalog-search__btn:hover { color: var(--color-brand-dark); }
.catalog-search__btn:focus-visible { outline: 1px solid var(--color-text); outline-offset: 2px; }
/* Riga di stato dei risultati: vuota (e senza spazio) quando non si cerca */
.catalog-search__status {
  margin: calc(-1 * var(--space-4)) 0 var(--space-4);
  font-size: 0.8125rem;
  color: var(--color-text-soft);
}
.catalog-search__status:empty { display: none; }
/* Mentre arrivano i risultati la griglia si attenua, senza spinner */
[data-catalog-grid][aria-busy="true"] { opacity: 0.5; transition: opacity var(--dur-hover) var(--ease-out); }
@media (max-width: 860px) {
  /* su telefono la ricerca va a capo sotto i filtri, a tutta larghezza */
  .catalog-search { flex: 1 1 100%; }
  .catalog-search input[type="search"],
  .catalog-search__btn { min-height: 44px; font-size: 1rem; } /* 16px: iOS non zooma */
  .catalog-search__status { margin-top: calc(-1 * var(--space-2)); }
}

/* --- Designers: schede persona ------------------------------------ */
/* I ritratti sono quadrati: media 1/1 + object-fit cover, così tutte le
   schede hanno lo stesso taglio anche se una foto arriva fuori formato.
   Fondo neutro sotto, non bianco, per staccare il volto dalla pagina. */
.designer-card__media {
  aspect-ratio: 1 / 1;
  background: var(--color-bg-alt);
}
.designer-card__media img {
  object-fit: cover;
  padding: 0;
}
/* Designer senza ritratto: riquadro neutro con le iniziali, stesso formato */
.designer-card__media--vuoto {
  display: flex;
  align-items: center;
  justify-content: center;
}
.designer-card__media--vuoto span {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
}
/* Nome sopra, bio sotto: qui il corpo della card è impilato, non a due
   colonne come nelle card prodotto. */
.designer-card .card__body {
  display: block;
  padding-top: var(--space-2);
}
.designer-card__bio {
  margin: var(--space-1) 0 0;
  font-size: 0.9375rem;
  color: var(--color-text-soft);
  max-width: var(--measure);
}
.designer-card__meta { display: block; margin-top: var(--space-1); }
/* Scheda senza prodotti collegati: non è un link, quindi niente freccia. */
.designer-card .discover { margin-top: var(--space-1); }

/* --- Form contatti / messaggi ------------------------------------- */

.contact-info { grid-column: span 12; }
.contact-form { grid-column: span 12; }
.contact-foto { grid-column: span 12; }
@media (min-width: 900px) {
  /* Due metà come la pagina Azienda (richiesta Mital 25/09/2026): a sinistra contatti
     e modulo uno sotto l'altro, a destra la foto verticale su tutta l'altezza.
     Nel codice l'ordine è contatti → foto → modulo, così su mobile la foto fa da divisore. */
  .contact-info { grid-column: 1 / span 6; grid-row: 1; }
  .contact-form { grid-column: 1 / span 6; grid-row: 2; }
  .contact-foto { grid-column: 7 / span 6; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--header-h) + var(--space-2)); }
}
/* Foto dei contatti: tutta la colonna, verticale, come .azienda-foto */
.contatti-foto { margin: 0; background: var(--color-bg-alt); }
.contatti-foto img { display: block; width: 100%; height: auto; }
@media (max-width: 899.98px) { .contact-foto { margin-block: var(--space-4); } }
.contact-form h2 { font-size: 1.25rem; }
.contact-form form { display: flex; flex-direction: column; gap: 6px; }
.contact-form label {
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-soft);
  margin-top: var(--space-2);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 12px 14px;
  font: inherit;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-text);
}
.contact-form textarea { resize: vertical; }
.contact-form .btn { align-self: flex-start; margin-top: var(--space-2); }

.form-msg { padding: var(--space-2) 0; }
/* barra piena da 2px = riempimento, quindi ambra; il senso lo porta il testo */
.form-msg--ok { color: var(--color-text); border-top: 2px solid var(--color-brand); }
.form-msg--err { color: #8a2f22; }

/* --- Reveal allo scroll ----------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --- Mobile ------------------------------------------------------ */

@media (max-width: 860px) {
  .site-nav {
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    color: var(--color-text);
    display: none;
    padding: calc(var(--header-h) + var(--space-4)) var(--page-margin);
  }
  .site-nav.is-open { display: block; overflow-y: auto; }
  .site-nav.is-open { padding-bottom: var(--space-8); }
  /* l'avviso cookie è fisso in basso e coprirebbe i tastini lingua: mentre il
     menu è aperto sparisce, e torna appena si chiude (è solo informativo). */
  body:has(.site-nav.is-open) .cookie-notice { display: none; }
  .site-nav ul { flex-direction: column; gap: var(--space-3); }
  .site-nav a { font-size: 1.5rem; }
  .nav-toggle { display: block; position: relative; z-index: 101; }
}

/* --- Reduced motion ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- Logo ---------------------------------------------------------- */

.site-logo { display: inline-flex; align-items: center; }
.logo-mark { height: 50px; width: auto; display: block; }
body:not(.has-hero) .site-logo,
.site-header.is-solid .site-logo { color: var(--color-logo); }
body.has-hero .site-header:not(.is-solid) .site-logo { color: #fff; }

/* --- Language switcher ---------------------------------------------- */

.lang-switcher {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-2);
}
.lang-switcher a {
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
}
.lang-switcher a { opacity: 0.55; }
.lang-switcher .current-lang a { opacity: 1; }
@media (min-width: 861px) {
  /* Voci del menu più accostate: 24px invece di 32 (richiesta Mital 25/09/2026).
     Solo desktop: su mobile il menu è a comparsa e in colonna. */
  .site-nav ul { align-items: baseline; gap: var(--space-3); }
  .site-nav > ul { display: flex; }
  .site-nav { display: flex; align-items: baseline; gap: var(--space-4); }
  /* Le lingue sono un gruppo a sé: più strette delle voci del menu (richiesta
     Mital 25/09/2026). Serve `.site-nav .lang-switcher`, se no vince `.site-nav ul`. */
  .site-nav .lang-switcher { gap: 10px; }
}
@media (max-width: 860px) {
  /* Lingue in basso nel menu a comparsa, in RIGA (it · en · fr).
     Serve `.site-nav .lang-switcher`: `.site-nav ul` (che impila in colonna)
     ha specificità maggiore della sola `.lang-switcher` e vincerebbe. */
  .site-nav .lang-switcher {
    /* in flusso, non in posizione assoluta: con le voci di sola-footer in
       coda il menu supera l'altezza dello schermo e i tastini finivano
       sopra l'ultima voce. */
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
  }
  .site-nav .lang-switcher li { margin: 0; }
  /* tastini: bersaglio 44px, hairline al posto del testo sbiadito */
  .site-nav .lang-switcher a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 56px;
    padding-block: 0;
    padding-inline: var(--space-2);
    border: 1px solid var(--color-line);
    font-size: 0.9375rem;
    /* niente testo sbiadito qui: a 44px il grigio chiaro non si leggeva */
    opacity: 1;
    color: var(--color-text);
  }
  /* lingua attiva: riempimento ambra con testo #111 (9.3:1), come .btn--primary */
  .site-nav .lang-switcher .current-lang a {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #111;
  }
  .site-nav .lang-switcher li:not(.current-lang) a:hover,
  .site-nav .lang-switcher li:not(.current-lang) a:focus-visible {
    color: var(--color-brand-dark);
    border-color: var(--color-brand-dark);
  }
}



/* --- Avviso cookie ---------------------------------------------------- */

.cookie-notice {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--page-margin);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-line);
  font-size: 0.875rem;
}
/* display:flex vinceva su [hidden]: il banner non si chiudeva mai */
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; max-width: none; }
.cookie-notice a { text-decoration: underline; text-underline-offset: 3px; }
.cookie-notice .btn { padding: 8px 24px; font-size: 0.875rem; }

/* --- Consenso privacy nei form ---------------------------------------- */

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.8125rem;
  color: var(--color-text-soft);
  max-width: var(--measure);
  margin-top: var(--space-1);
}
.consent input { margin-top: 3px; accent-color: var(--color-brand-dark); }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
/* La frase del consenso è obbligatoria ma è testo di servizio: nel footer
   sta alla misura delle etichette, non a quella dei contenuti. */
.footer-col--newsletter .consent {
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  color: var(--color-text-soft);
}
.footer-col--newsletter .consent a { color: var(--color-text-soft); }
.footer-col--newsletter .consent a:hover { color: var(--color-brand-dark); }
/* la regola .footer-col--newsletter input qui sopra è per i campi di testo: la
   casella del consenso non deve prendere larghezza piena, padding e bordo. */
.footer-col--newsletter .consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}

/* --- Prose: pagine di testo (privacy, cookie, azienda…) --------------- */

.prose { max-width: var(--measure); }
.prose h1 { font-size: var(--text-h2); }
.prose h2 {
  font-size: 1.1875rem;
  margin-top: var(--space-6);
}
.prose .label { display: block; margin-bottom: var(--space-4); }
.prose table,
.prose .spec-table { margin-block: var(--space-3); }
.prose table + table { margin-top: var(--space-4); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-bg-alt);
  padding: 2px 6px;
}
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Social nel footer ------------------------------------------------- */

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.social-links svg {
  width: 15px;
  height: 15px;
  color: var(--color-text-soft);
  transition: color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.social-links a:hover svg {
  /* icona su fondo chiaro: tinta scura, l'ambra piena si smarrirebbe */
  color: var(--color-brand-dark);
  transform: translateY(-1px);
}

/* Header: solo wordmark (orizzontale), più basso del lockup completo */
.site-logo .logo-word { height: 34px; } /* logotipo 2026: più largo del vecchio, a parità di peso ottico */

/* Pagine interne: il <main> non ha bisogno del section-gap pieno in alto —
   il titolo deve stare vicino all'header (richiesta utente) */
main.section {
  margin-top: var(--space-4);
}
.archive-head { margin-top: var(--space-2); }

/* Il titolo di archivio ora è .visually-hidden. Se nell’header resta solo
   lui, l’header non deve lasciare spazio bianco; se c’è la descrizione del
   termine, quella resta visibile e prende il posto del titolo. */
.archive-head--muta {
  margin-top: 0;
  margin-bottom: 0;
}
.archive-head > p:last-child { margin-bottom: 0; }

/* --- Menu: bold + header bianco all'hover ----------------------------- */
/* (in coda al file: deve vincere sulle regole trasparenti dell'hero) */

.site-nav a { font-weight: 600; }

.site-header:hover {
  background: var(--color-bg);
  color: var(--color-text);
}
body.has-hero .site-header:hover:not(.is-solid) { color: var(--color-text); }
body.has-hero .site-header:hover .site-logo { color: var(--color-logo); }

/* --- Varianti finitura: swatch interattivi ----------------------------- */

#product-media img { transition: opacity 0.25s var(--ease-out); }
.finish-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
}
.finish-swatch .swatch { transition: box-shadow var(--dur-hover) var(--ease-out); }
.finish-swatch:hover .swatch { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3px var(--color-text-soft); }
/* anello ambra (riempimento) + etichetta in tinta scura: lo stato attivo
   è segnalato due volte, così l'anello chiaro non resta l'unico indizio */
.finish-swatch.is-active .swatch { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3px var(--color-brand); }
.finish-swatch.is-active { color: var(--color-brand-dark); }

/* --- Card con titolo sopra la foto (griglia homepage) ------------------ */

.card--overlay .card__media { position: relative; }
.card--overlay .card__media::after {
  /* velo per la leggibilità del titolo bianco, come nell'hero */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 45%);
}
.card--overlay .card__caption {
  position: absolute;
  z-index: 2;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  color: #fff;
}
.card--overlay .card__title {
  font-size: 1.375rem;
  margin: 0 0 2px;
  color: #fff;
}
.card--overlay .discover { color: #fff; }

/* --- Vista 3D nella scheda prodotto ------------------------------------ */

.btn-3d {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 3;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  /* Come «Richiedi informazioni» (.btn--primary), richiesta Mital 25/09/2026:
     fondo ambra + testo nero, hover che scurisce il fondo. Niente animazioni. */
  background: var(--color-brand);
  border: 1px solid var(--color-brand);
  color: #111;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.btn-3d:hover {
  background: color-mix(in srgb, var(--color-brand), #000 14%);
  border-color: color-mix(in srgb, var(--color-brand), #000 14%);
  color: #111;
}
/* 3D aperto: l'ambra è ormai lo stato normale, quindi l'attivo si distingue in nero */
.btn-3d.is-active { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.btn-3d { display: inline-flex; align-items: center; gap: 6px; }
.btn-3d__icon { width: 16px; height: 16px; flex: none; }
/* Istruzioni della vista 3D: sotto il riquadro, fuori dal 3D (richiesta Mital 25/09/2026).
   Stessa voce delle etichette del sito. */
.model-hint {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-soft);
}
.model-hint[hidden] { display: none; }
.product__media { position: relative; }
#product-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  --poster-color: transparent;
}
/* gli stili del custom element vincono su [hidden]: forziamo la chiusura
   (stesso gotcha del banner cookie) — foto sempre principale */
#product-3d[hidden] { display: none; }

/* Vista 3D: niente barra di caricamento su desktop (resta su mobile,
   dove le reti lente la rendono utile) */
@media (min-width: 861px) {
  #product-3d {
    --progress-bar-color: transparent;
    --progress-bar-height: 0px;
  }
}

/* Disclaimer della vista 3D */
.model-disclaimer {
  position: absolute;
  z-index: 3;
  left: var(--space-2);
  right: var(--space-2);
  bottom: var(--space-1);
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-soft);
  text-align: center;
  pointer-events: none;
}
.model-disclaimer[hidden] { display: none; }

/* --- Disegno tecnico quotato (sotto excerpt) --------------------------- */
.mital-quote {
  margin: var(--space-3) 0 0;
  background: transparent;
}
.mital-quote img { display: block; width: 100%; height: auto; }

/* --- Caricamento progressivo dei listati ------------------------------- */
/* Sostituisce <nav class="navigation pagination">: sentinella + bottone
   «Carica altro». La paginazione classica resta nel <noscript> del blocco. */
.listing-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  text-align: center;
}
/* Riga d'annuncio (aria-live): altezza fissa, così l'apparire del messaggio
   non fa saltare la griglia sopra */
.listing-more__status {
  margin: 0;
  min-height: 1.4em;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-soft);
}
.listing-more__status:focus { outline: none; }
.listing-more__status--err {
  color: #8a2f22;
  text-transform: none;
  letter-spacing: 0;
}
/* Gli stili di .btn vincono su [hidden]: va forzato (stesso caso del banner cookie) */
.listing-more__btn[hidden] { display: none; }
.listing-more.is-loading .listing-more__btn { opacity: 0.5; }

/* Paginazione classica: si vede senza JS (dentro il <noscript>) oppure se il
   caricamento progressivo non è configurabile e la rimettiamo in pagina */
.listing-more .nav-links,
.listing-more__classic {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
}
.listing-more .page-numbers { text-decoration: none; }
.listing-more .page-numbers.current { text-decoration: underline; }
.listing-more .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* Icone finiture (agente misure) */
/* L'icona è la miniatura del prodotto nella finitura (dal catalogo), con
   proporzioni diverse caso per caso: intera, senza cerchio né bordo. Lo stato
   si segna con un filetto sotto, non con l'anello dei pallini colore. */
.swatch--img {
  width: auto;
  height: 48px;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  box-sizing: content-box;
}
.swatch--img img { height: 100%; width: auto; max-width: 96px; object-fit: contain; display: block; }
.finish-swatch .swatch--img { transition: border-color var(--dur-hover) var(--ease-out); }
.finish-swatch:hover .swatch--img { box-shadow: none; border-bottom-color: var(--color-line); }
.finish-swatch.is-active .swatch--img { box-shadow: none; border-bottom-color: var(--color-brand); }

/* --- Pagina Azienda (page-azienda.php) ------------------------------
   Testo e fotografia affiancati, dal catalogo 2026. Le due sezioni si
   alternano: foto a sinistra nella storia, a destra nei valori, come nelle
   doppie pagine del catalogo. Su telefono si impila: prima il testo. */
.azienda-sezione {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.azienda-sezione + .azienda-sezione { margin-top: var(--space-8); }
.azienda-testo { max-width: var(--measure); }
.azienda-testo h2 { margin: 0 0 var(--space-3); font-size: var(--text-h2); }
.azienda-testo .label { display: block; margin-bottom: var(--space-2); }
.azienda-testo p { margin: 0 0 var(--space-3); }
.azienda-testo p:last-child { margin-bottom: 0; }
.azienda-foto { margin: 0; background: var(--color-bg-alt); }
.azienda-foto img { display: block; width: 100%; height: auto; }
/* I quattro valori: gerarchia con la dimensione, maiuscole come nel catalogo */
.azienda-valori {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.azienda-valori li + li { margin-top: 0.2em; }
@media (min-width: 900px) {
  .azienda-sezione { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .azienda-sezione--foto-prima .azienda-foto { order: -1; }
}

/* --- Pagina Download (page-download.php) ---------------------------------
   Card come le News; la copertina del PDF è verticale e va vista INTERA (è un
   documento, non una foto da ritagliare): riquadro 1:√2 come un A4, niente taglio. */
.download-card .card__media { aspect-ratio: 210 / 297; }
.download-card .card__media img { object-fit: cover; padding: 0; }
.download-card .label { display: block; margin-bottom: var(--space-1); }
.download-card .discover { margin-top: 6px; font-size: 0.875rem; opacity: 1; }

/* --- Riga finale del footer: colophon + social (rifatta 25/09/2026) ---------
   Una riga sola sopra il filetto: testo legale a sinistra, icone a destra.
   Icone in riquadri col filetto del sito; all'hover nere come i pulsanti. */
.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-footer .social-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-1);
  flex: none;
}
.site-footer .social-links li { margin: 0; }
.site-footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-line);
  color: var(--color-text);
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.site-footer .social-links svg { width: 20px; height: 20px; color: currentColor; }
.site-footer .social-links a:hover { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.site-footer .social-links a:hover svg { color: currentColor; transform: none; }
/* Riga del logo: logo a sinistra, social a destra, centrati in verticale */
@media (min-width: 700px) {
  .footer-top { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 699.98px) {
  .footer-top .social-links { margin-top: var(--space-3); }
  .footer-bottom .colophon { justify-content: center; text-align: center; }
}

/* --- Popup Sicam 2026 (inc/popup-sicam.php) ------------------ */
/* Richiesta Masturzo 29/09/2026: tutto il riquadro in ambra trasparente al 10%
   (poi più trasparente: 70% di copertura), un solo corpo e un solo peso per tutto il testo. Testo
   BIANCO su richiesta (29/09): su ambra il contrasto è basso (~1.9:1, vedi tokens.css). */
.popup-sicam {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 0;
  background: rgba(237, 166, 2, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  overflow: auto;
  overscroll-behavior: contain;
}
.popup-sicam::backdrop { background: rgba(17,17,17,0.35); }
.popup-sicam[open] { animation: popup-sicam-in 0.35s var(--ease-out); }
@keyframes popup-sicam-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .popup-sicam[open] { animation: none; } }
.popup-sicam,
.popup-sicam * { font-family: var(--font-sans); font-size: 17px; font-weight: 400; line-height: 1.6; }
.popup-sicam__corpo { padding: var(--space-6) var(--space-4) var(--space-4); }
.popup-sicam__corpo:focus { outline: none; }
.popup-sicam__corpo p { margin: 0 0 var(--space-2); }
.popup-sicam__voci { margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.popup-sicam__x {
  position: absolute; top: 8px; right: 8px;
  width: 40px; height: 40px; padding: 8px;
  border: 0; background: transparent; color: #fff; cursor: pointer;
}
.popup-sicam__x svg { width: 100%; height: 100%; }
.popup-sicam__x:hover { background: rgba(255,255,255,0.15); }
.popup-sicam__ok {
  padding: 8px 20px; border: 1px solid #fff; background: transparent; color: #fff; cursor: pointer;
}
.popup-sicam__ok:hover { background: #fff; color: var(--color-brand-dark); }
@media (max-width: 559.98px) {
  .popup-sicam__corpo { padding-inline: var(--space-3); }
}
/* desktop: largo quanto i contenuti della pagina (stessi margini di logo e menu) */
@media (min-width: 860px) {
  .popup-sicam { width: calc(100vw - 2 * var(--container-inset)); max-width: none; }
  .popup-sicam,
  .popup-sicam * { font-size: clamp(19px, 0.9rem + 0.55vw, 24px); }
  .popup-sicam__corpo { padding: var(--space-8) var(--space-8) var(--space-6); }
  /* il testo riempie tutta la larghezza su due colonne (righe da ~70 caratteri) */
  .popup-sicam__corpo { columns: 2; column-gap: var(--space-8); }
  .popup-sicam__corpo p { max-width: none; }
  .popup-sicam__voci, .popup-sicam__voci li { break-inside: avoid; }
  .popup-sicam__x { top: 16px; right: 16px; width: 48px; height: 48px; }
  .popup-sicam__ok { padding: 10px 28px; }
}