/* ────────────────────────────────────────────────────────────
   TOMASELLA STORE LUGANO — componenti
   Layerzero Sagl — CSS originale, scritto sui token del brand.
   ──────────────────────────────────────────────────────────── */

/* ── Reset essenziale ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--tom-bg);
  color: var(--tom-fg);
  font-family: var(--tom-font-sans);
  font-size: var(--tom-t-body);
  font-weight: 300;
  line-height: var(--tom-line-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, video, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--tom-arancio); outline-offset: 3px; }

.skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 999;
  clip-path: none; width: auto; height: auto;
  background: var(--tom-nero); color: var(--tom-bianco); padding: var(--sp-3) var(--sp-4);
}

/* Honeypot: nascosto ai browser, visibile ai bot che compilano tutto. */
.tom-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Tipografia semantica ─────────────────────────────────── */
/*
   Regola unica del sistema:
   il serif (Cormorant Garamond) e' riservato al TITOLO DI PAGINA e basta.
   Tutto il resto — sottotitoli, titoli di sezione, tessere, occhielli,
   corpo — e' Onest in peso 300. E' l'impostazione della casa madre:
   un solo momento tipografico forte per pagina, e sotto un sans leggero
   che non compete.
*/

/* Titolo di pagina — l'unico posto dove vive il serif */
.tom-display, .tom-h1 {
  font-family: var(--tom-font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--tom-fg);
}
.tom-display { font-size: var(--tom-h-hero); line-height: var(--tom-line-tight); letter-spacing: var(--tom-h-display-tracking); }
.tom-h1      { font-size: var(--tom-h-1);    line-height: 0.95;                  letter-spacing: -0.02em; }

/* Tutti gli altri titoli — sans, peso 300 */
.tom-h2, .tom-h3, .tom-section-label {
  font-family: var(--tom-font-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--tom-fg);
}
.tom-h2 { font-size: var(--tom-h-2); line-height: 1.05; }
.tom-h3 { font-size: var(--tom-h-3); line-height: 1.05; }
.tom-section-label { font-size: var(--tom-t-section); line-height: 1.05; }

/* Etichette piccole: peso 400, sotto i 15px il 300 si sgrana */
.tom-eyebrow {
  font-family: var(--tom-font-sans); font-weight: 400;
  font-size: var(--tom-t-eyebrow); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--tom-fg-muted);
}
.tom-lead { font-size: var(--tom-t-lead); line-height: var(--tom-line-base); letter-spacing: -0.015em; font-weight: 300; }
.tom-body { font-size: var(--tom-t-body); line-height: var(--tom-line-base); font-weight: 300; }
.tom-small { font-size: var(--tom-t-body-sm); color: var(--tom-fg-muted); }

.on-dark, .on-dark .tom-display, .on-dark .tom-h1, .on-dark .tom-h2,
.on-dark .tom-h3, .on-dark .tom-section-label { color: var(--tom-fg-on-dark); }
.on-dark .tom-eyebrow { color: rgba(244, 245, 242, 0.72); }
.on-dark .tom-lead, .on-dark .tom-body { color: rgba(244, 245, 242, 0.88); }

/* ── Layout ───────────────────────────────────────────────── */
.tom-wrap { width: 100%; max-width: var(--tom-wrap); margin-inline: auto; padding-inline: var(--tom-pad-x); }
.tom-section { padding-block: clamp(56px, 8vw, 112px); }
.tom-section--tight { padding-block: clamp(40px, 5vw, 72px); }
.tom-section--dark { background: var(--tom-bg-dark); }
.tom-section--warm { background: var(--tom-bianco-warm); }
.tom-section__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--sp-6);
  margin-bottom: var(--sp-12);
}
.tom-section__note { max-width: 44ch; }
.tom-strip {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  align-items: center; justify-content: space-between;
}
.tom-strip .tom-lead { max-width: 48ch; }

/* ── Lockup di co-branding ────────────────────────────────
   Brand Manual cap. 7 pag. 56-58. Il filetto attraversa tutta la
   larghezza del logotipo e si interrompe attorno al livello di
   partnership: e' quella interruzione a fare la struttura, non una
   riga di testo sotto il marchio. */
.tom-lockup { display: inline-flex; align-items: stretch; gap: var(--sp-5); color: var(--tom-fg); }
.tom-lockup__marchio { display: flex; flex-direction: column; gap: 7px; justify-content: center; padding-block: var(--sp-3); }
.tom-lockup__parola svg { width: var(--lockup-w, clamp(148px, 17vw, 196px)); height: auto; }

.tom-lockup__filetto { display: flex; align-items: center; gap: 9px; }
.tom-lockup__filetto::before,
.tom-lockup__filetto::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.tom-lockup__livello {
  font-family: var(--tom-font-sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.16em; line-height: 1; white-space: nowrap;
}

.tom-lockup__divisore { width: 1px; background: currentColor; opacity: .85; flex: none; }
.tom-lockup__partner { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding-block: var(--sp-3); }
.tom-lockup__ruolo {
  font-size: 9px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--tom-fg-muted); line-height: 1;
}
.tom-lockup__nome {
  font-size: 14px; font-weight: 400; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.1;
  /* Il nome del rivenditore non si spezza mai: "TECNIX / SA" su due
     righe legge come due cose invece che come una ragione sociale. */
  white-space: nowrap;
}

/* Sul fondo scuro il ruolo va schiarito, o sparisce */
.tom-footer .tom-lockup, .tom-mobile .tom-lockup { color: var(--tom-fg-on-dark); }
.tom-footer .tom-lockup__ruolo, .tom-mobile .tom-lockup__ruolo { color: rgba(236, 232, 230, 0.62); }

/* Timbro sulla pagina contatti */
.tom-timbro { padding-bottom: clamp(32px, 4vw, 56px); display: flex; justify-content: center; }

/* Sotto i 560px il lockup completo si impila: affiancato uscirebbe */
@media (max-width: 560px) {
  .tom-lockup--completo { flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
  .tom-lockup--completo .tom-lockup__divisore { width: 100%; height: 1px; }
  .tom-lockup--completo .tom-lockup__partner { padding-block: 0; }
}

/* ── Bottoni e link ───────────────────────────────────────── */
/* Geometria della casa madre: rettangolo da 16px alto 59, tondo minuscolo
   in peso 500. Da loro e' height fissa; qui min-height, cosi' un'etichetta
   lunga su schermo stretto va a capo invece di uscire dal bottone. */
.tom-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 59px; padding: var(--sp-3) var(--sp-8);
  border-radius: var(--r-btn);
  background: var(--tom-nero-2); color: var(--tom-bianco-warm);
  font-family: var(--tom-font-sans);
  font-size: 16px; font-weight: 600; line-height: 1.2;  /* Martel Sans non ha il 500 */
  transition: opacity var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease-soft);
}
/* Effetto della casa madre: il bottone non cambia colore, si schiarisce e
   cede sotto il dito. Nessun arancione: e' il colore d'accento del brand,
   su una superficie piena diventa un secondo messaggio. */
.tom-btn:hover { opacity: 0.88; }
.tom-btn:active { transform: scale(0.98); }
.tom-btn--ghost { background: transparent; color: var(--tom-fg); border: var(--bd-rule); }
.tom-btn--on-dark { background: var(--tom-bianco-warm); color: var(--tom-nero); }
.tom-btn--outline-dark { background: transparent; color: var(--tom-bianco); border: var(--bd-on-dark); }

.tom-link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--tom-t-body-sm); font-weight: 400;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding-bottom: var(--sp-1); border-bottom: 1px solid currentColor;
  transition: gap var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-soft);
}
.tom-link-arrow::after { content: "→"; }
.tom-link-arrow:hover { gap: var(--sp-3); border-bottom-color: var(--tom-arancio); }

/* ── Navbar ───────────────────────────────────────────────── */
.tom-navbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); min-height: var(--tom-nav-h);
  padding-inline: var(--tom-pad-x);
  background: var(--tom-bg); border-bottom: var(--bd-hair);
}
.tom-navbar__nav ul { display: flex; align-items: center; gap: var(--sp-8); }
.tom-navbar__link {
  display: inline-block; padding: var(--sp-2) 0;
  font-family: var(--tom-font-sans);
  font-size: var(--tom-t-body-sm); font-weight: 400;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.tom-navbar__link:hover,
.tom-navbar__link[aria-current="page"],
.tom-navbar__link[aria-expanded="true"] { border-bottom-color: currentColor; }

.tom-navbar__toggle { display: none; padding: var(--sp-2); }
.tom-navbar__toggle span { display: block; width: 22px; height: 1.5px; background: var(--tom-fg); transition: transform var(--t-fast) var(--ease-soft), opacity var(--t-fast); }
.tom-navbar__toggle span + span { margin-top: 5px; }

/* ── Mega menu prodotti (desktop) ─────────────────────────── */
.tom-mega {
  position: fixed; left: 0; right: 0; top: var(--tom-nav-h); z-index: 99;
  background: var(--tom-bg-dark); color: var(--tom-fg-on-dark);
  border-bottom: var(--bd-on-dark);
  max-height: calc(100vh - var(--tom-nav-h)); overflow-y: auto;
}
/* [hidden] da solo non basta: il pannello resta in pagina per poter
   essere animato, quindi la visibilita' si governa con le classi. */
.tom-mega[hidden] { display: block; }
.tom-mega {
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t-base) var(--ease-soft),
              transform var(--t-base) var(--ease-out),
              visibility 0s linear var(--t-base);
}
.tom-mega.is-aperto {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.tom-mega__wrap {
  max-width: var(--tom-wrap); margin-inline: auto;
  padding: clamp(28px, 3.5vw, 48px) var(--tom-pad-x) clamp(24px, 2.5vw, 36px);
}
.tom-mega__cols {
  display: grid; gap: clamp(16px, 1.8vw, 28px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1240px) { .tom-mega__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tom-mega__tessera { display: block; color: var(--tom-fg-on-dark); }
.tom-mega__media {
  display: block; overflow: hidden;
  background: rgba(244, 245, 242, 0.06);
}
.tom-mega__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.tom-mega__tessera:hover .tom-mega__media img { transform: scale(1.05); }
.tom-mega__titolo {
  display: block; margin-top: var(--sp-4);
  /* overflow-wrap serve per "COMPLEMENTI", parola unica piu' larga di una
     colonna stretta: senza, sborda su quella accanto. */
  overflow-wrap: break-word; hyphens: auto;
  font-family: var(--tom-font-sans); font-weight: 300;
  font-size: clamp(20px, calc(16px + 0.6vw), 28px);
  text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.05;
  /* Due righe riservate: "Complementi d'arredo" va a capo mentre gli altri
     tre titoli stanno su una riga, e senza questo i sottotitoli finirebbero
     ad altezze diverse. */
  min-height: 2.1em;
}
.tom-mega__tessera:hover .tom-mega__titolo { color: var(--tom-pure-white); }
.tom-mega__occhiello {
  display: block; margin-top: var(--sp-1);
  font-size: var(--tom-t-body-sm); color: rgba(244, 245, 242, 0.5);
}

.tom-mega__piede {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4) var(--sp-8);
  margin-top: clamp(24px, 2.5vw, 36px); padding-top: var(--sp-6);
  border-top: var(--bd-on-dark);
}
.tom-mega__piede .tom-link-arrow { color: var(--tom-fg-on-dark); }
.tom-mega__nota { font-size: var(--tom-t-body-sm); color: rgba(244, 245, 242, 0.45); max-width: 52ch; }

/* Vela sul contenuto quando il mega e' aperto */
.tom-velo {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(26, 26, 26, 0.4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--ease-soft), visibility 0s linear var(--t-base);
}
.tom-velo.is-aperto { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ── Pannello mobile ──────────────────────────────────────── */
.tom-mobile {
  position: fixed; inset: 0; z-index: 200;
  background: var(--tom-bg-dark); color: var(--tom-fg-on-dark);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity var(--t-base) var(--ease-soft),
              transform var(--t-base) var(--ease-out),
              visibility 0s linear var(--t-base);
}
.tom-mobile[hidden] { display: flex; }
.tom-mobile.is-aperto { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* Nel pannello il lockup e' completo come in testata: il marchio da
   solo lasciava il nome del rivenditore fuori da tutta la navigazione
   mobile. Il logotipo si stringe per far posto al blocco PARTNER. */
.tom-mobile .tom-lockup__parola svg { width: clamp(116px, 31vw, 168px); }
.tom-mobile .tom-lockup { gap: var(--sp-4); }
.tom-mobile .tom-lockup__ruolo { font-size: 8px; letter-spacing: .14em; }
.tom-mobile .tom-lockup__nome  { font-size: 12px; }
.tom-mobile__testa {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); padding: var(--sp-4) var(--tom-pad-x);
  border-bottom: var(--bd-on-dark); flex: none;
}
.tom-mobile__chiudi { color: var(--tom-fg-on-dark); padding: var(--sp-2); flex: none; }

.tom-mobile__corpo {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-8) var(--tom-pad-x) var(--sp-16);
}

.tom-mobile__azioni { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tom-mobile__btn {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4) var(--sp-6);
  border: var(--bd-on-dark); border-radius: var(--r-btn);
  font-size: var(--tom-t-body-sm); font-weight: 400;
  letter-spacing: 0.04em; text-transform: uppercase;
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.tom-mobile__btn:hover, .tom-mobile__btn:active { background: var(--tom-bianco); color: var(--tom-nero); }

.tom-mobile__gruppi {
  margin-top: var(--sp-12);
  display: grid; gap: var(--sp-10);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.tom-mobile__intestazione {
  font-family: var(--tom-font-sans); font-weight: 300;
  font-size: clamp(26px, 7vw, 34px); text-transform: uppercase;
  letter-spacing: -0.015em; line-height: 1.05;
  margin-bottom: var(--sp-5);
}
.tom-mobile__gruppo li + li { margin-top: var(--sp-4); }
.tom-mobile__gruppo a {
  display: block;
  font-size: var(--tom-t-body-lg); font-weight: 300;
  color: rgba(244, 245, 242, 0.85);
}
.tom-mobile__gruppo a:active { color: var(--tom-pure-white); }
.tom-mobile__occhiello {
  display: block; margin-top: 2px;
  font-size: var(--tom-t-body-sm); color: rgba(244, 245, 242, 0.45);
}

.tom-mobile__piede {
  margin-top: var(--sp-16); padding-top: var(--sp-6);
  border-top: var(--bd-on-dark);
  font-size: var(--tom-t-body-sm); color: rgba(244, 245, 242, 0.5);
}
.tom-mobile__piede p + p { margin-top: var(--sp-2); }
.tom-mobile__orari { line-height: var(--tom-line-loose); }

/* Blocca lo scorrimento sotto ai pannelli aperti */
body.tom-bloccato { overflow: hidden; }

@media (max-width: 1000px) {
  .tom-navbar__nav { display: none; }
  .tom-navbar__toggle { display: block; }
  .tom-mega { display: none; }
}
@media (min-width: 1001px) {
  .tom-mobile { display: none; }
}

/* ── Hero ─────────────────────────────────────────────────── */
.tom-hero {
  position: relative; display: grid; align-items: end;
  min-height: clamp(460px, 82vh, 820px);
  background: var(--tom-nero); overflow: hidden;
}
.tom-hero--page { min-height: clamp(300px, 46vh, 460px); }
.tom-hero--liscio { background: var(--tom-bg); min-height: 0; }
.tom-hero__media { position: absolute; inset: 0; }
.tom-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Slideshow: le diapositive sono impilate, visibile solo .is-active.
   Sfuma solo quella che entra, sopra quella che esce, che resta piena
   finche' la dissolvenza non e' finita: incrociando le due opacita' la
   somma scende sotto 1 a meta' strada e per un istante si vede il nero
   della sezione sotto. */
/* Contesto di impilamento proprio: senza, lo z-index della diapositiva
   attiva la porterebbe sopra il velo e sopra il titolo. */
.tom-hero__media[data-hero-slides] { z-index: 0; }
.tom-hero__media[data-hero-slides] img {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transition: opacity 1200ms var(--ease-soft);
}
.tom-hero__media[data-hero-slides] img.is-uscita { opacity: 1; transition: none; }
.tom-hero__media[data-hero-slides] img.is-active { opacity: 1; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .tom-hero__media[data-hero-slides] img { transition: none; }
}

/* Righette: stanno sopra il velo, allineate al margine di pagina e alla
   base del testo. Sono bottoni veri, si clicca per saltare da una
   fotografia all'altra. Il trattino e' uno pseudo-elemento perche' il
   bottone deve restare grande abbastanza da poterci puntare sopra. */
.tom-hero__nav {
  position: absolute; z-index: 3;
  right: var(--tom-pad-x); bottom: clamp(48px, 7vw, 96px);
  display: flex; gap: var(--sp-3);
}
.tom-hero--page .tom-hero__nav { bottom: clamp(24px, 4vw, 40px); }
.tom-hero__punto {
  width: 32px; padding: 10px 0;
  background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tom-hero__punto::before {
  content: ""; display: block; height: 2px;
  background: rgba(244, 245, 242, 0.38);
  transition: background var(--t-fast) var(--ease-soft);
}
.tom-hero__punto:hover::before { background: rgba(244, 245, 242, 0.7); }
.tom-hero__punto[aria-current="true"]::before { background: var(--tom-bianco); }
@media (max-width: 600px) {
  .tom-hero__nav { left: var(--tom-pad-x); right: auto; bottom: clamp(20px, 5vw, 32px); }
  .tom-hero__punto { width: 24px; }
}

/* Triplo velo: velatura uniforme, un gradiente verticale che affonda in
   basso e uno orizzontale sul lato del testo, che si spegne prima di meta'
   inquadratura e lascia pulita la parte destra della fotografia.
   Serve perche' lo slideshow alterna quattordici ambientate e in quelle
   piu' chiare il bianco del titolo arrivava a un contrasto di 2,6:1 sulle
   zone piu' luminose della fascia di testo; ora sta sopra 4:1. */
.tom-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(26,26,26,0.18), rgba(26,26,26,0.18)),
    linear-gradient(to right,
      rgba(26,26,26,0.40) 0%, rgba(26,26,26,0.26) 48%,
      rgba(26,26,26,0) 74%),
    linear-gradient(to bottom,
      rgba(26,26,26,0.42) 0%, rgba(26,26,26,0.10) 36%,
      rgba(26,26,26,0.52) 78%, rgba(26,26,26,0.78) 100%);
}
.tom-hero__inner {
  position: relative; width: 100%;
  max-width: var(--tom-wrap); margin-inline: auto;
  padding: var(--sp-16) var(--tom-pad-x) clamp(48px, 7vw, 96px);
}
.tom-hero--liscio .tom-hero__inner { padding-top: clamp(48px, 7vw, 96px); }
.tom-hero__eyebrow { margin-bottom: var(--sp-6); }
.tom-hero__title { max-width: 16ch; }
.tom-hero--page .tom-hero__title { max-width: 22ch; }
.tom-hero__blurb { max-width: var(--tom-hero-blurb); margin-top: var(--sp-6); }
.tom-hero__cta { margin-top: var(--sp-10); }

/* ── Split immagine / testo ───────────────────────────────── */
.tom-split {
  display: grid; gap: clamp(24px, 4vw, 72px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  /* stretch e non center: l'immagine prende l'altezza della colonna di
     testo accanto, invece di galleggiare al centro. */
  align-items: stretch;
}
.tom-split__media { display: flex; }
.tom-split__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Quando le colonne si impilano la riga non ha piu' un'altezza
     definita: qui height:100% non risolve e subentra il rapporto. */
  aspect-ratio: 4 / 3;
}
.tom-split__body > * + * { margin-top: var(--sp-6); }
.tom-split__cta { margin-top: var(--sp-8); }
.tom-split__cta--buttons { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

.tom-facts { margin-top: var(--sp-8); }
.tom-facts__row {
  display: grid; grid-template-columns: minmax(96px, 128px) 1fr;
  gap: var(--sp-4); padding-block: var(--sp-3); border-top: var(--bd-hair);
}
.tom-facts__k { font-size: var(--tom-t-body-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tom-fg-muted); }
@media (max-width: 520px) {
  .tom-facts__row { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* ── Tessere categoria ────────────────────────────────────
   Ricalcate su .tom-catcard della casa madre: fotografia a tutta
   tessera in formato 2:3, velo, titolo e richiamo centrati in basso
   sopra l'immagine. Prima titolo ed etichetta stavano sotto, affiancati,
   e su colonna stretta si accavallavano. */
.tom-catgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(19px, 2.22vw, 32px);
}
/* Quattro ambienti in home: restano verticali, come le tessere della
   casa madre. */
.tom-catgrid--quattro { grid-template-columns: repeat(4, 1fr); }
/* Indice ambienti: due per riga. A meta' larghezza il formato 2:3
   verrebbe altissimo — oltre 800px a schermo intero — quindi le tessere
   diventano orizzontali. */
.tom-catgrid--due { grid-template-columns: repeat(2, 1fr); }
.tom-catgrid--due .tom-catcard { aspect-ratio: 4 / 3; }

@media (max-width: 1180px) { .tom-catgrid--quattro { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1000px) { .tom-catgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  {
  .tom-catgrid, .tom-catgrid--due, .tom-catgrid--quattro { grid-template-columns: 1fr; }
  .tom-catgrid--due .tom-catcard { aspect-ratio: 3 / 2; }
}

.tom-catcard {
  position: relative; display: block;
  aspect-ratio: 2 / 3; overflow: hidden;
  background: var(--tom-nero);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tom-catcard__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tom-catcard:hover { transform: translateY(-2px); }
.tom-catcard:hover .tom-catcard__img { transform: scale(1.04); }
/* La curva e' la loro; solo l'ultima fermata sale da 0.45 a 0.58. Con le
   loro fotografie 0.45 basta perche' sono scure in basso; sulle nostre
   ambientate piu' chiare il richiamo da 16px restava sotto 4,5:1. */
.tom-catcard__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.58) 100%);
}
.tom-catcard__body {
  position: absolute; left: 0; right: 0; bottom: clamp(20px, 3.33vw, 48px);
  padding: 0 var(--sp-8);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 1.67vw, 24px); text-align: center;
}
.tom-catcard__nome {
  font-family: var(--tom-font-sans); font-weight: 300;
  font-size: clamp(24px, 16px + 1.67vw, 40px); line-height: 1;
  letter-spacing: -0.015em; text-transform: uppercase;
  color: var(--tom-bianco-warm);
}
.tom-catcard__cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--tom-font-sans); font-weight: 600; font-size: 16px;
  color: var(--tom-bianco-warm);
}
.tom-catcard__cta span { padding-bottom: 4px; border-bottom: 1px solid var(--tom-bianco-warm); }
.tom-catcard__cta::after { content: "\2192"; }
@media (prefers-reduced-motion: reduce) {
  .tom-catcard, .tom-catcard__img { transition: none; }
  .tom-catcard:hover { transform: none; }
  .tom-catcard:hover .tom-catcard__img { transform: none; }
}

/* ── v2 · Lockup completo in testata ──────────────────────
   Punto 1 del feedback: TECNIX SA deve essere evidente, e la testata
   e' il posto piu' evidente che c'e'. Rimpicciolito rispetto al footer,
   o insieme a menu e CTA non ci sta. */
.tom-navbar .tom-lockup { gap: var(--sp-4); }
.tom-navbar .tom-lockup__parola svg { width: clamp(112px, 12vw, 140px); }
.tom-navbar .tom-lockup__livello { font-size: 9px; letter-spacing: .14em; }
.tom-navbar .tom-lockup__ruolo { font-size: 8px; letter-spacing: .14em; }
.tom-navbar .tom-lockup__nome { font-size: 12px; }
.tom-navbar .tom-lockup__marchio,
.tom-navbar .tom-lockup__partner { padding-block: var(--sp-2); }
@media (max-width: 700px) {
  /* Punto 1 di Andrea: TECNIX SA deve essere evidente. Prima qui il
     lockup si riduceva al solo marchio, cioe' spariva proprio dove il
     sito viene guardato di piu'. Ora non si spezza: si rimpicciolisce. */
  .tom-navbar .tom-lockup { gap: var(--sp-3); }
  .tom-navbar .tom-lockup__parola svg { width: clamp(92px, 25vw, 124px); }
  .tom-navbar .tom-lockup__livello { font-size: 8px; letter-spacing: .12em; }
  .tom-navbar .tom-lockup__ruolo { font-size: 7px; letter-spacing: .12em; }
  .tom-navbar .tom-lockup__nome { font-size: 11px; letter-spacing: .04em; }
}
/* L'impilamento sotto i 560px vale per il footer, dove c'e' spazio in
   altezza. In testata e nel pannello alzerebbe la barra: restano in riga. */
@media (max-width: 560px) {
  .tom-navbar .tom-lockup--completo,
  .tom-mobile .tom-lockup--completo { flex-direction: row; align-items: stretch; }
  .tom-navbar .tom-lockup--completo .tom-lockup__divisore,
  .tom-mobile .tom-lockup--completo .tom-lockup__divisore { width: 1px; height: auto; }
  .tom-navbar .tom-lockup--completo { gap: var(--sp-3); }
  .tom-mobile  .tom-lockup--completo { gap: var(--sp-4); }
}

/* ── v2 · CTA fissa in testata ────────────────────────────── */
.tom-btn--nav { flex: none; min-height: 0; padding: 11px 20px; font-size: 12px; }
@media (max-width: 1240px) { .tom-btn--nav { display: none; } }

/* ── v2 · Servizi dello showroom ──────────────────────────── */
.tom-servizi {
  display: grid; gap: var(--sp-6) var(--sp-8); margin-top: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
/* I servizi sono tre e le colonne due: il terzo restava da solo, con
   mezza riga vuota a destra. Ora chiude la fila per intero — il filetto
   sopra la scheda diventa la riga di chiusura del blocco.
   `1 / -1` e non `span 2`: con una colonna sola lo span inventerebbe una
   colonna implicita e sfascerebbe la griglia (vedi il mosaico, §16).
   Se un domani il quarto servizio arriva, `:nth-child(3):last-child`
   smette da sola di combaciare e la griglia torna 2x2. */
.tom-servizi > :nth-child(3):last-child { grid-column: 1 / -1; }
.tom-servizi > :nth-child(3):last-child .tom-scheda__testo { max-width: 60ch; }
.tom-split--reverse .tom-split__media { order: 2; }

/* ── v2 · Galleria dello showroom ─────────────────────────── */
.tom-galleria {
  display: grid; gap: clamp(16px, 2vw, 28px);
  grid-template-columns: repeat(var(--col, 3), 1fr);
}
/* Le fotografie dello showroom sono tutte 16:9. Il ritaglio 4:3 taglia
   poco ai lati; forzarne una in verticale, come nella bozza coi
   segnaposto, avrebbe tolto mezza stanza. */
.tom-galleria img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 820px) {
  .tom-galleria { grid-template-columns: repeat(var(--col-m, 2), 1fr); }
  /* Su due colonne un numero dispari di fotografie lascia un buco in
     fondo: l'ultima si prende tutta la riga. Solo con tre, pero' — con
     quattro la riga e' gia' piena e allargarne una spezzava la griglia. */
  .tom-galleria[data-n="3"] img:nth-child(3) { grid-column: 1 / -1; }
  .tom-galleria[data-n="5"] img:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .tom-galleria { grid-template-columns: 1fr; } }


/* ── v2 · Testo con fotografia a fianco ───────────────────
   La foto parte dall'alto e resta ferma mentre il testo scorre: se si
   allungasse quanto il testo, su una prosa lunga diventerebbe una
   striscia verticale con dentro una stanza schiacciata. */
.tom-testo-foto {
  display: grid; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  /* stretch e non start: la colonna delle fotografie prende l'altezza di
     quella del testo, e le immagini se la dividono. */
  align-items: stretch;
}
.tom-testo-foto .tom-prose { max-width: 58ch; }
.tom-testo-foto__media {
  display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px);
}
/* flex:1 su tutte, min-height:0 perche' senza di lui un elemento flex non
   scende sotto la propria altezza naturale e la colonna sborda. */
.tom-testo-foto__media img {
  flex: 1 1 0; min-height: 0;
  width: 100%; object-fit: cover;
}
@media (max-width: 900px) {
  .tom-testo-foto { grid-template-columns: 1fr; }
  /* Impilate non c'e' piu' un'altezza da dividere: comanda il rapporto. */
  .tom-testo-foto__media img { flex: none; aspect-ratio: 16 / 9; }
}

/* ── v2 · Mosaico dello showroom ──────────────────────────
   Tredici fotografie in fila diventano un elenco: a due colonne con
   una prima immagine larga il doppio la pagina prende respiro e la
   prima foto fa da apertura. */
.tom-mosaico {
  display: grid; gap: clamp(12px, 1.4vw, 20px);
  grid-template-columns: repeat(4, 1fr);
}
/* Il ritaglio sta sulla tessera, non sull'immagine: dentro c'e' un
   <button> e l'<img> si limita a riempirlo.
   ⚠️ height: 100% non e' ridondante accanto all'aspect-ratio. La prima
   tessera occupa due righe, quindi le righe sono piu' alte di quanto un
   3:2 richieda: senza l'altezza piena le tessere piccole restano alte
   quanto il loro rapporto e sotto si aprono i buchi. L'aspect-ratio
   serve a dire quanto alta deve venire la riga, l'height a riempirla. */
.tom-mosaico > * { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; }
.tom-mosaico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tom-mosaico > *:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
.tom-mosaico > *:nth-child(8) { grid-column: span 2; aspect-ratio: 3 / 1; }
@media (max-width: 1000px) {
  .tom-mosaico { grid-template-columns: repeat(2, 1fr); }
  .tom-mosaico > *:nth-child(1) { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
  .tom-mosaico > *:nth-child(8) { grid-column: span 2; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .tom-mosaico { grid-template-columns: 1fr; }
  /* ⚠️ Con una colonna sola lo "span 2" non e' innocuo: crea una
     seconda colonna implicita larga auto, l'unica esplicita finisce a
     zero e meta' delle fotografie sparisce. Va tolto, non solo
     riadattato il rapporto. */
  .tom-mosaico > *:nth-child(1), .tom-mosaico > *:nth-child(8) { grid-column: auto; grid-row: auto; }
  .tom-mosaico > *, .tom-mosaico > *:nth-child(1), .tom-mosaico > *:nth-child(8) { aspect-ratio: 16 / 9; }
}

/* Tessera apribile: il pulsante non deve somigliare a un pulsante, ma
   deve dire che si puo' cliccare. Lo dice la lente e un accenno di
   avvicinamento della fotografia. */
.tom-scatto {
  position: relative; overflow: hidden; padding: 0; border: 0;
  background: var(--tom-bg-warm, #ece8e6); cursor: zoom-in; color: var(--tom-pure-white, #fff);
}
.tom-scatto img { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.tom-scatto::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(26,24,23,0); transition: background .4s ease;
}
.tom-scatto:hover img, .tom-scatto:focus-visible img { transform: scale(1.04); }
.tom-scatto:hover::after, .tom-scatto:focus-visible::after { background: rgba(26,24,23,.16); }
.tom-scatto__lente {
  position: absolute; right: 14px; bottom: 14px; z-index: 1;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(26,24,23,.55); backdrop-filter: blur(2px);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.tom-scatto:hover .tom-scatto__lente,
.tom-scatto:focus-visible .tom-scatto__lente { opacity: 1; transform: none; }
.tom-scatto:focus-visible { outline: 2px solid var(--tom-fg); outline-offset: 3px; }
@media (hover: none) {
  /* Sul telefono non c'e' hover: la lente resta visibile, altrimenti
     nulla dice che le fotografie si aprono. */
  .tom-scatto__lente { opacity: .9; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tom-scatto img { transition: none; }
  .tom-scatto:hover img, .tom-scatto:focus-visible img { transform: none; }
}

/* ── v2 · Lightbox ────────────────────────────────────────
   Sopra tutto: la navbar e' a 100, il velo del mega menu a 98. */
.tom-lb {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(20, 18, 17, .95);
  opacity: 0; transition: opacity .3s ease;
}
/* ⚠️ Questa riga non e' pignoleria: senza, il menu del sito smette di
   rispondere dopo la prima apertura della lightbox.
   `[hidden] { display: none }` sta nel foglio del browser, quindi
   QUALUNQUE regola d'autore lo scavalca — compresa la `display: flex`
   qui sopra. A pannello chiuso restava percio' un rettangolo invisibile
   a tutto schermo, a z-index 300, che si mangiava ogni clic.
   Il mega menu e il pannello mobile se la cavano perche' spengono anche
   la `visibility`; qui si va di `display: none` esplicito.
   La dissolvenza in uscita non ne soffre: `hidden` lo rimette JS solo a
   transizione finita. */
.tom-lb[hidden] { display: none; }
.tom-lb.is-aperto { opacity: 1; }
/* Cintura di sicurezza per i 300ms di dissolvenza, quando il pannello
   e' ancora in pagina ma non deve piu' intercettare niente. */
.tom-lb:not(.is-aperto) { pointer-events: none; }
.tom-lb__figura { margin: 0; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.tom-lb__figura img {
  display: block; max-width: min(1400px, 100%); max-height: calc(100vh - clamp(96px, 16vw, 190px));
  width: auto; height: auto; object-fit: contain;
  opacity: 0; transition: opacity .25s ease;
}
.tom-lb__figura img.is-pronta { opacity: 1; }

.tom-lb button { color: var(--tom-fg-on-dark, #ece8e6); background: none; border: 0; cursor: pointer; }
.tom-lb button:hover { color: #fff; }
.tom-lb button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.tom-lb__chiudi { position: absolute; top: clamp(10px, 2vw, 24px); right: clamp(10px, 2vw, 24px); padding: 10px; }
.tom-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  padding: 14px 10px; opacity: .75; transition: opacity .2s ease;
}
.tom-lb__nav:hover { opacity: 1; }
.tom-lb__nav--prec { left: clamp(2px, 1.5vw, 20px); }
.tom-lb__nav--succ { right: clamp(2px, 1.5vw, 20px); }
.tom-lb__conta {
  position: absolute; left: 0; right: 0; bottom: clamp(14px, 2.5vw, 28px);
  text-align: center; font-size: 12px; letter-spacing: .14em;
  color: rgba(236, 232, 230, .6);
}
@media (max-width: 560px) {
  /* Con le frecce ai lati la fotografia resterebbe una striscia:
     scendono sotto, in linea con il contatore. */
  .tom-lb__nav { top: auto; bottom: clamp(8px, 2vw, 20px); transform: none; }
  .tom-lb__nav--prec { left: clamp(12px, 6vw, 40px); }
  .tom-lb__nav--succ { right: clamp(12px, 6vw, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .tom-lb, .tom-lb__figura img { transition: none; }
}
.tom-mosaico__cta { margin-top: clamp(32px, 4vw, 56px); }

/* ── Griglie e tessere ────────────────────────────────────── */
.tom-grid { display: grid; gap: var(--sp-6); }
.tom-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
/* Tre fisse, non auto-fit: con auto-fit su un monitor largo diventavano
   quattro, e gli articoli si stringevano. */
.tom-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tom-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tom-grid--3 { grid-template-columns: 1fr; } }
.tom-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.tom-card { display: block; }
.tom-card__media {
  display: block; position: relative; overflow: hidden;
  background: var(--tom-grigio-100);
}
.tom-card__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.tom-card__media--wide img { aspect-ratio: 16 / 10; }
.tom-card:hover .tom-card__media img { transform: scale(1.04); }

.tom-card__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-4);
}
.tom-card__title {
  display: block; margin-top: var(--sp-4);
  font-family: var(--tom-font-sans); font-weight: 300;
  font-size: var(--tom-h-3);
  text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.05;
}
.tom-card__row .tom-card__title { margin-top: 0; }
.tom-card__meta { display: block; margin-top: var(--sp-1); font-size: var(--tom-t-body-sm); color: var(--tom-fg-muted); }
.tom-card__row .tom-card__meta { margin-top: 0; flex: none; }

/* L'etichetta sulle tessere che portano fuori: l'utente deve sapere
   che sta lasciando il sito del negozio per quello del produttore. */
.tom-card__ext { flex: none; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tom-fg-muted); }
.tom-card__ext::after { content: " ↗"; }

.tom-card__date { display: block; margin-top: var(--sp-4); }
.tom-card__title--post { margin-top: var(--sp-2); }
.tom-card__excerpt { display: block; margin-top: var(--sp-3); color: var(--tom-grigio-500); font-size: var(--tom-t-body); line-height: var(--tom-line-base); }

/* ── Contenuto editoriale ─────────────────────────────────── */
.tom-prose { max-width: 68ch; }
/* Corpo dell'articolo a tutta pagina: la colonna stretta, dentro un
   contenitore largo, lasciava mezza schermata bianca sulla destra. */
.tom-prose--larga { max-width: none; }
.tom-prose > * + * { margin-top: var(--sp-6); }
.tom-prose h2 { font-family: var(--tom-font-sans); font-weight: 300; font-size: var(--tom-h-2); text-transform: uppercase; letter-spacing: -0.015em; margin-top: var(--sp-12); }
.tom-prose h3 { font-family: var(--tom-font-sans); font-weight: 300; font-size: var(--tom-h-3); text-transform: uppercase; letter-spacing: -0.015em; margin-top: var(--sp-10); }
.tom-prose p { line-height: var(--tom-line-loose); }
.tom-prose a { border-bottom: 1px solid var(--tom-grigio-300); }
.tom-prose a:hover { border-bottom-color: var(--tom-arancio); color: var(--tom-pure-black); }
.tom-prose ul { list-style: disc; padding-left: 1.2em; }
.tom-prose li + li { margin-top: var(--sp-2); }
/* Titoli di sezione alla misura piccola.
   In un articolo i titoletti sono quattro o cinque in duemila battute: a
   dimensione piena spezzano il testo in blocchi separati invece di
   scandirlo. Restano <h2> nella struttura del documento — quello lo
   legge Google — e prendono la misura degli <h3>, la stessa di "Come
   lavoriamo" in Chi siamo. */
.tom-prose--titoli-piccoli h2 { font-size: var(--tom-h-3); margin-top: var(--sp-10); }

/* ── Testata di pagina senza immagine ─────────────────────── */
.tom-page-title {
  padding-block: clamp(56px, 8vw, 128px) clamp(40px, 5vw, 80px);
  text-align: center;
}
.tom-page-title__titolo { max-width: 18ch; margin-inline: auto; }
.tom-page-title__occhiello { margin-top: var(--sp-6); }
.tom-page-title__testo { margin-top: var(--sp-6); max-width: 62ch; margin-inline: auto; }

/* ── Pagina contatti ──────────────────────────────────────── */
.tom-contatti__intro { max-width: 62ch; margin-bottom: clamp(40px, 5vw, 72px); }
.tom-contatti__intro .tom-lead { margin-top: var(--sp-4); }
.tom-contatti__intro .tom-eyebrow + .tom-h2 { margin-top: var(--sp-3); }

.tom-contatti__schede {
  display: grid; gap: clamp(24px, 3vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
/* Filetto in cima a ogni scheda invece di un riquadro: il sito madre non
   usa scatole, separa con linee sottili. */
.tom-scheda { padding-top: var(--sp-6); border-top: var(--bd-rule); }
.tom-scheda__titolo {
  font-family: var(--tom-font-sans); font-weight: 300;
  font-size: var(--tom-h-3); line-height: 1.05;
  letter-spacing: -0.015em; text-transform: uppercase;
}
.tom-scheda__testo {
  margin-top: var(--sp-4); font-weight: 300;
  font-size: var(--tom-t-body); line-height: var(--tom-line-loose);
  color: var(--tom-grigio-500);
}
.tom-scheda__indirizzo { color: var(--tom-fg); }
.tom-scheda__link {
  display: inline-block; margin-top: var(--sp-5);
  font-size: var(--tom-t-body); font-weight: 400;
  padding-bottom: 3px; border-bottom: 1px solid var(--tom-grigio-300);
  transition: color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft);
}
.tom-scheda__link:hover { color: var(--tom-pure-black); border-bottom-color: var(--tom-arancio); }
.tom-scheda__social { margin-top: var(--sp-4); display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.tom-scheda__social a { font-size: var(--tom-t-body-sm); border-bottom: 1px solid var(--tom-grigio-300); }

/* Mappa a tutta larghezza, come sul sito madre */
.tom-mappa { width: 100%; }
.tom-mappa__frame {
  display: block; border: 0; width: 100%;
  height: clamp(300px, 42vw, 520px);
  filter: grayscale(1) contrast(1.05);
}

/* ── Moduli ───────────────────────────────────────────────
   Geometria della casa madre: nessun riquadro, solo un filetto sotto
   il campo, colonna unica e molta aria fra una riga e l'altra.

   L'etichetta parte sul filetto come farebbe un placeholder e sale
   quando il campo viene compilato. Da loro e' un placeholder vero, che
   sparisce appena si scrive: chi torna a controllare non sa piu' cosa
   aveva compilato. Qui l'aspetto a riposo e' identico, ma l'etichetta
   resta ed e' una <label> vera, quindi funziona anche da tastiera e
   con i lettori di schermo. */
.tom-form { max-width: 100%; }

/* ⚠️ L'ordine di queste due regole conta. I <p> hanno un margine di
   default che va azzerato, ma se .tom-field arriva dopo vince a parita'
   di specificita' e annulla anche lo spazio fra un campo e il
   successivo: i campi finiscono attaccati e il testo di aiuto sembra
   appartenere alla riga sotto. Prima si azzera, poi si distanzia. */
.tom-field { position: relative; margin: 0; }
.tom-form > * + * { margin-top: clamp(30px, 3.4vw, 46px); }
.tom-field input[type="text"],
.tom-field input[type="email"],
.tom-field input[type="tel"],
.tom-field textarea,
.tom-field select {
  width: 100%; display: block;
  padding: 22px 0 11px; border: 0; border-bottom: 1px solid var(--tom-fg);
  border-radius: 0; background: transparent;
  font: inherit; font-size: var(--tom-t-body-lg); font-weight: 300;
  color: var(--tom-fg); -webkit-appearance: none; appearance: none;
}
.tom-field textarea { min-height: 190px; resize: vertical; line-height: var(--tom-line-base); }
.tom-field select {
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 4px top 60%, right 0 top 60%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.tom-field input:focus, .tom-field textarea:focus, .tom-field select:focus {
  outline: none; border-bottom-width: 2px; padding-bottom: 10px;
}

/* Etichetta mobile. Il placeholder resta vuoto ma dev'esserci, o
   :placeholder-shown non scatta e l'etichetta non torna mai giu'. */
.tom-field > label {
  position: absolute; left: 0; top: 22px;
  font-size: var(--tom-t-body-lg); font-weight: 300;
  color: var(--tom-fg-muted); pointer-events: none;
  transition: transform var(--t-fast) var(--ease-soft), font-size var(--t-fast) var(--ease-soft);
  transform-origin: left top;
}
/* Lo stato "campo pieno" e' una classe messa da main.js, non
   :placeholder-shown: quest'ultimo non si rivaluta in modo affidabile
   quando il valore cambia da script, ed e' il caso del riempimento
   automatico del browser — l'etichetta resterebbe sopra il testo gia'
   scritto. Il :focus invece resta in CSS, che li' e' affidabile.
   Le due righe con :placeholder-shown sono la ricaduta per chi ha il
   JavaScript disattivato. */
.tom-field input:focus + label,
.tom-field textarea:focus + label,
.tom-field select:focus + label,
.tom-field.is-pieno > label,
.tom-field input:not(:placeholder-shown) + label,
.tom-field textarea:not(:placeholder-shown) + label {
  transform: translateY(-20px); font-size: 12px; letter-spacing: .04em;
}
/* La tendina ha sempre un valore: l'etichetta sta gia' su */
.tom-field--select > label { transform: translateY(-20px); font-size: 12px; letter-spacing: .04em; }

/* Campo file: niente etichetta mobile, un file c'e' o non c'e' */
.tom-field--file > label {
  position: static; transform: none; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; display: block; margin-bottom: 10px;
}
.tom-field--file .tom-campo__aiuto { max-width: 62ch; }
.tom-field--file input[type="file"] {
  width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--tom-fg);
  background: transparent; font: inherit; font-size: var(--tom-t-body-sm);
  color: var(--tom-fg-muted);
}

.tom-field--check { display: flex; flex-wrap: wrap; }
/* L'errore e' un fratello dell'etichetta dentro una riga flex: senza
   questo si accoda di fianco, e sembra centrato sotto al niente. */
.tom-field--check > .tom-field__err { flex: 0 0 100%; }
.tom-field--check > label {
  position: static; transform: none;
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--tom-t-body-sm); color: var(--tom-grigio-500);
  line-height: var(--tom-line-loose); pointer-events: auto;
}
.tom-field--check input {
  flex: none; margin-top: 3px; width: 15px; height: 15px;
  accent-color: var(--tom-fg); border-radius: 0;
}
.tom-field--check a { border-bottom: 1px solid currentColor; }
.tom-campo__aiuto {
  display: block; margin-top: var(--sp-3);
  font-size: var(--tom-t-body-sm); color: var(--tom-fg-muted);
  line-height: var(--tom-line-loose);
}
.tom-field__err { display: block; margin-top: var(--sp-2); font-size: var(--tom-t-body-sm); color: #b3261e; }

/* Invio allineato a destra, come da loro */
.tom-form__invio { display: flex; justify-content: flex-end; }

.tom-avviso {
  padding: var(--sp-4) var(--sp-6); border: 1px solid var(--tom-grigio-200);
  margin-bottom: var(--sp-8); font-size: var(--tom-t-body-sm);
}
.tom-avviso--ok { border-color: #2e7d32; color: #1b5e20; background: rgba(46, 125, 50, 0.06); }
.tom-avviso--ko { border-color: #b3261e; color: #8c1d18; background: rgba(179, 38, 30, 0.06); }

/* ── Pagina Il brand ──────────────────────────────────────── */
/* Quattro valori affiancati: riusa .tom-scheda dei contatti, cosi' il
   filetto in cima e' lo stesso segno in tutto il sito. */
.tom-valori {
  display: grid; gap: clamp(24px, 3vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.tom-valori__fonte { margin-top: clamp(32px, 4vw, 56px); }
.tom-strip__testo { margin-top: var(--sp-4); }

/* ── Breadcrumb ───────────────────────────────────────────── */
.tom-breadcrumb { padding-block: var(--sp-6); font-size: var(--tom-t-body-sm); color: var(--tom-fg-muted); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tom-breadcrumb a:hover { color: var(--tom-fg); }

/* ── 404 ──────────────────────────────────────────────────── */
.tom-404 { min-height: 52vh; display: grid; align-content: center; }
.tom-404 .tom-h1 { margin-top: var(--sp-4); }
.tom-404 .tom-lead { margin-top: var(--sp-6); max-width: 52ch; }
.tom-404__cta { margin-top: var(--sp-10); display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* ── Footer ───────────────────────────────────────────────── */
.tom-footer { background: var(--tom-bg-dark); color: var(--tom-fg-on-dark); padding-block: clamp(56px, 7vw, 96px) var(--sp-10); }
.tom-footer a:hover { color: var(--tom-pure-white); }
.tom-footer__cols { display: grid; gap: clamp(32px, 4vw, 64px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* La prima colonna ospita il lockup completo, che e' piu' largo delle
   altre tre. Con le colonne tutte uguali non ci sta mai: prima il nome
   andava a capo, adesso che non puo' piu' andarci si stringerebbe il
   logotipo. Quindi dove le quattro colonne ci stanno davvero — sopra i
   1330px — la prima si prende lo spazio che le serve.
   Un min-width sull'elemento non basterebbe: le tracce sono 1fr con
   minimo fisso, e non si allargano per il contenuto. */
@media (min-width: 1330px) {
  .tom-footer__cols { grid-template-columns: minmax(310px, 1.3fr) repeat(3, minmax(0, 1fr)); }
}
/* Sotto, dove le colonne sono due o tre, il lockup del footer resta
   appena piu' raccolto: cosi' entra senza che il logotipo si schiacci. */
.tom-footer .tom-lockup { gap: var(--sp-4); }
.tom-footer .tom-lockup__parola svg { width: clamp(140px, 13vw, 172px); }
.tom-footer__title { font-size: var(--tom-t-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244,245,242,0.55); margin-bottom: var(--sp-4); }
.tom-footer__title--spaced { margin-top: var(--sp-8); }
.tom-footer__addr { margin-top: var(--sp-6); color: rgba(244,245,242,0.7); }
.tom-footer .tom-small { color: rgba(244,245,242,0.7); }
.tom-footer__cols li + li { margin-top: var(--sp-2); }
.tom-footer__legal {
  margin-top: clamp(40px, 5vw, 72px); padding-top: var(--sp-6);
  border-top: var(--bd-on-dark);
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8);
  justify-content: space-between; align-items: center;
  font-size: var(--tom-t-body-sm); color: rgba(244,245,242,0.6);
}
.tom-footer__legal ul { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.tom-footer__legal a { text-decoration: underline; text-underline-offset: 3px; }
.tom-footer__disclaimer { margin-top: var(--sp-6); max-width: 78ch; font-size: 12px; line-height: var(--tom-line-loose); color: rgba(244,245,242,0.45); }

/* ── Preferenze di movimento ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Galleria in fondo all'articolo ───────────────────────
   Quattro fotografie in riga, tutte 16:9. Le tessere sono <button> come
   nel mosaico di Chi siamo, quindi si aprono a tutto schermo con la
   stessa lightbox: quel codice cerca [data-lightbox], non una classe. */
/* Le colonne sono quante le decide il template, non quattro fisse: con
   quattro incollate nel codice, un articolo con due fotografie le
   mostrava larghe un quarto di pagina con mezza riga vuota accanto.
   Il conto lo fa PHP, che sa quante sono; qui si sostituisce soltanto. */
.tom-galleria-art {
  display: grid; gap: clamp(12px, 1.4vw, 20px);
  grid-template-columns: repeat(var(--col, 4), 1fr);
}
.tom-galleria-art > * { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; }
.tom-galleria-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .tom-galleria-art { grid-template-columns: repeat(var(--col-m, 2), 1fr); } }
@media (max-width: 520px) { .tom-galleria-art { grid-template-columns: 1fr; } }

/* ── Popup promozionale ───────────────────────────────────── */
/* Sta sotto la lightbox (z-index 300) e sotto il banner dei cookie, che
   si tiene numeri suoi altissimi: nessuno dei tre deve coprire l'altro
   per sbaglio, e il popup aspetta comunque che il banner sia stato
   chiuso prima di farsi vedere. */
.tom-promo {
  position: fixed; inset: 0; z-index: 290;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0; transition: opacity .35s var(--ease-soft);
}
/* Stessa ragione della lightbox: `[hidden]` sta nel foglio del browser e
   qualunque `display` d'autore lo scavalca. Senza questa riga, a popup
   chiuso resterebbe un rettangolo invisibile a tutto schermo che si
   mangia ogni clic della pagina. */
.tom-promo[hidden] { display: none; }
.tom-promo.is-aperto { opacity: 1; }

.tom-promo__velo { position: absolute; inset: 0; background: rgba(20, 18, 17, .72); }

.tom-promo__box {
  position: relative;
  display: flex; flex-direction: column;
  width: min(100%, 420px); max-height: 100%;
  background: var(--tom-bianco-warm);
  border-radius: var(--r-btn, 4px);
  overflow: hidden;
  transform: translateY(12px) scale(.98);
  transition: transform .35s var(--ease-soft);
}
.tom-promo.is-aperto .tom-promo__box { transform: none; }

/* Il titolo serve al lettore di schermo, che altrimenti aprirebbe una
   finestra senza nome. A video non si vede: lo dice gia' l'immagine. */
.tom-promo__tit {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.tom-promo__x {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .88); color: var(--tom-nero);
  transition: background var(--t-fast) var(--ease-soft);
}
.tom-promo__x:hover { background: #fff; }

/* L'immagine si restringe se lo schermo e' basso, ma non viene mai
   tagliata: dentro c'e' l'offerta, ed e' tutto testo. */
.tom-promo__figura { display: block; min-height: 0; }
.tom-promo__figura img {
  display: block; width: 100%; height: 100%;
  max-height: calc(100vh - 180px); object-fit: contain;
}
.tom-promo__azioni { flex: none; padding: var(--sp-4); text-align: center; }
.tom-promo__azioni .tom-btn { width: 100%; min-height: 50px; }

@media (prefers-reduced-motion: reduce) {
  .tom-promo, .tom-promo__box { transition: none; }
  .tom-promo__box { transform: none; }
}