/* ==========================================================================
   U.Jet — Design System (catalogo + pagine istituzionali)
   Fonte di stile UNICA. Statico, vanilla, WCAG AA, prefers-reduced-motion.
   Brand azzurro #357df9 (SOLO accenti/CTA/onde/bordi). Testo = navy/azure scuro.
   Copiata da generate.py in /assets/catalogo/product.css.
   --------------------------------------------------------------------------
   CONTRASTI VERIFICATI (ratio su bianco salvo nota):
     ink-900 #0f1b2d ............ 17.28:1  (testo forte / titoli)
     text    #1a2331 ~15.3:1  (body, navy-bias armonico con la palette)
     azure-900 #1b3d7a .......... 10.53:1  (link/testo forte)  ✔AA/AAA
     azure-700 #265ab2 ..........  6.59:1  (link hover / CTA solido) ✔AA
     gray-600 #5b5e6e ...........  6.42:1  (testo muto) ✔AA
     azure-500 #357df9 ..........  3.85:1  → SOLO accenti/UI/bordi, MAI testo body
     white su ink-900 ........... 17.28:1  ✔  | white su azure-900 .. 10.53:1 ✔
     white su azure-700 .........  6.59:1  ✔  | white su success-dark 6.51:1 ✔AA
     white su success #00b090 ...  2.76:1  → NON usato per testo (solo non testuale)
     azure-100 su ink-900 ....... 14.42:1  | fog #c7ced9 su ink-900 . 10.91:1 ✔
     azure-300 #8fb4fb su ink ...  8.30:1  (link su footer navy) ✔
     azure-900 su primary-light .  8.78:1  (chip/badge attivo) ✔
   ========================================================================== */

/* ---- Design tokens -------------------------------------------------------- */
:root {
  /* — Scala AZURE (brand) — */
  --azure-50:   #f0f5ff;
  --azure-100:  #e3ebf9;   /* = primaryLight storico */
  --azure-200:  #c7d8fb;
  --azure-300:  #8fb4fb;   /* link su fondo navy */
  --azure-500:  #357df9;   /* BRAND — accenti/CTA/bordi/onde, NON testo body */
  --azure-700:  #265ab2;   /* = primaryDark storico — link hover / CTA solido */
  --azure-900:  #1b3d7a;   /* TESTO/LINK su chiaro (AA 10.5:1) */

  /* — Dark accent / deep navy — footer, hero band, header densi */
  --ink-900:    #0f1b2d;
  --ink-800:    #16263c;   /* superfici su navy (card su hero) */
  --ink-700:    #1f3450;   /* bordi/hairline su navy */

  /* — Neutri — */
  --text:       #1a2331;   /* navy scuro (bias verso la palette, non grigio piatto); AA ~15:1 */
  --gray:       #727586;   /* mantenuto per UI non testuale / icone */
  --gray-600:   #5b5e6e;   /* testo muto conforme AA (6.4:1) — per testo >=14px */
  --gray-700:   #4a4d5c;   /* testo muto piu' scuro (~8:1) per micro-testo <=13px */
  --gray-border:#dadce0;
  --bg-light:   #f2f3f6;
  --bg-tint:    #f7f9fc;   /* righe alternate spec, fondi tenui */
  --bg-page:    #d8e4f8;   /* sfondo pagina celeste chiaro: le superfici bianche risaltano, meno "vuoto" */
  --band-dark:  var(--ink-900);  /* superfici sempre scure (hero-band, compare-bar) */
  --footer-bg:  var(--ink-900);  /* sfondo footer */
  --white:      #ffffff;
  --black:      #18181a;
  --fog:        #c7ced9;   /* testo secondario su navy */

  /* — Semantici (uso funzionale, coppie pre-validate) — */
  --success:        #00b090;  /* tinta del marchio, NON per testo bianco */
  --success-dark:   #006b52;  /* badge "Sterile": fondo + testo bianco (6.5:1) */
  --warning:        #ffcd35;  /* avviso non bloccante (fondo) */
  --warning-ink:    #7a5a00;  /* testo su warning chiaro (6.0:1) */
  --danger:         #c01c4e;  /* errori form (6.0:1) */

  /* — Cangiante / perlescente: petrolio (piu' blu del verde) + sfondo madreperla — */
  --petrol:       #0e6a72;
  --benzina:      #155e5a;
  --petrol-deep:  #0a5057;
  --sheen:
    radial-gradient(90% 70% at 12% 8%, rgba(53,125,249,.14), transparent 55%),
    radial-gradient(95% 80% at 88% 92%, rgba(14,106,114,.15), transparent 58%),
    radial-gradient(70% 60% at 60% 42%, rgba(21,94,90,.08), transparent 62%),
    linear-gradient(135deg, #e9f1fc 0%, #ddeef3 40%, #d5efe9 58%, #e3edfb 100%);
  --title-grad: linear-gradient(102deg, var(--azure-900) 5%, var(--petrol) 120%);
  --btn-grad:   linear-gradient(120deg, #1f6ac2 0%, #167a90 52%, #0e6a72 100%);
  --card-bg:   radial-gradient(92% 72% at 12% 8%, rgba(53,125,249,.20), transparent 55%), radial-gradient(95% 80% at 88% 92%, rgba(14,106,114,.22), transparent 58%), radial-gradient(70% 60% at 60% 42%, rgba(21,120,110,.12), transparent 62%), linear-gradient(135deg, #f1f6fe 0%, #e7f4f2 40%, #e1f4ed 58%, #edf3fd 100%);
  --card-bd:   #b3c6e6;   /* bordo schede piu' evidente: stacca dal celeste dello sfondo */
  --card-sh:   inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(16,40,80,.06), 0 18px 40px -16px rgba(16,40,80,.28);
  --card-sh-h: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 9px rgba(16,40,80,.12), 0 34px 62px -16px rgba(16,40,80,.40);
  --pill-bg:   radial-gradient(120% 120% at 32% 22%, #ecf3ff, #d7e6fb);
  --pill-sh:   inset 0 2px 5px rgba(255,255,255,.85), inset 0 -4px 8px rgba(16,40,80,.12), 0 5px 12px rgba(16,40,80,.12);

  /* — Fasce "band" (hero-band + footer): CHIARE e colorate in giorno, scure in notte — */
  --band-surface: linear-gradient(135deg, #d3e4f6 0%, #cbe7df 52%, #d6e6f6 100%);
  --band-text:    var(--ink-900);
  --band-muted:   var(--gray-600);
  --band-eyebrow: var(--petrol);
  --band-link:    var(--azure-900);
  --band-line:    var(--gray-border);
  --txt-shadow:   0 1px 1px rgba(15,27,45,.11);   /* lieve profondita' sui testi */

  /* — Alias retro-compatibili (template/CSS storici) NON rimuovere — */
  --color-azure:         var(--azure-500);
  --color-primary-light: var(--azure-100);
  --color-primary-dark:  var(--azure-700);
  --color-text:          var(--text);
  --color-gray:          var(--gray-600);   /* upgrade: ora conforme AA */
  --color-gray-border:   var(--gray-border);
  --color-bg-light:      var(--bg-light);
  --color-white:         var(--white);
  --color-black:         var(--black);

  /* — Tipografia — */
  --font-body:  'Inter', Helvetica, Arial, sans-serif;
  --font-nav:   'Inter', Helvetica, Arial, sans-serif;   /* nav/UI/label/eyebrow: sans pulito */
  --font-head:  'Inter', Helvetica, Arial, sans-serif;   /* eyebrow/numeri/footer-h4/label: sans */
  --font-title: 'Fraunces', Georgia, 'Times New Roman', serif;  /* SOLO titoli display (h1-h4, section-title, hero) */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Scala tipografica UNICA — rem + clamp(), floor mobile ALZATI ─────────
     Tutto in rem così rispetta la dimensione font/zoom scelta dall'utente
     (WCAG 1.4.4). Ogni step ha un minimo pensato per la lettura ravvicinata
     su telefono: corpo >=17px, micro mai sotto ~13.5px. Ratio ~1.20→1.25.
     Un solo posto da toccare per ri-bilanciare la gerarchia. */
  --fs-2xs:  clamp(0.875rem,  0.85rem + 0.12vw, 0.9375rem);  /* 14→15  micro: conteggi, code, meta, badge, breadcrumb, tab bar */
  --fs-xs:   clamp(0.9375rem, 0.90rem + 0.15vw, 1rem);       /* 15→16  label, facet, chip, eyebrow, footer */
  --fs-sm:   clamp(1rem,      0.95rem + 0.18vw, 1.0625rem);  /* 16→17  UI secondaria, nome card, liste/tabelle */
  --fs-body: clamp(1.0625rem, 1.00rem + 0.30vw, 1.1875rem);  /* 17→19  CORPO prosa (floor 17px reali su mobile) */
  --fs-h3:   clamp(1.1875rem, 1.10rem + 0.40vw, 1.375rem);   /* 19→22 */
  --fs-h2:   clamp(1.375rem,  1.20rem + 0.85vw, 1.75rem);    /* 22→28 */
  --fs-h1:   clamp(1.75rem,   1.45rem + 1.40vw, 2.25rem);    /* 28→36 */
  --fs-hero: clamp(2rem,      1.55rem + 2.20vw, 3rem);       /* 32→48 */
  /* alias retro-compatibili — i template/CSS storici continuano a funzionare */
  --fs-small: var(--fs-xs);
  --fs-micro: var(--fs-2xs);

  --lh-tight: 1.2;    /* titoli */
  --lh-snug:  1.35;   /* nomi card a 2 righe, sottotitoli */
  --lh-ui:    1.25;   /* chip / badge / tab bar */
  --lh-body:  1.6;    /* prosa */

  /* — Raggi — */
  --radius-sm:    6px;
  --radius-base:  12px;   /* soft (B): input/select/piccole superfici piu' tonde */
  --radius-lg:    18px;   /* soft (B): card piu' tonde, look flottante */
  --radius-pill:  999px;

  /* — Ombre a doppio strato, bluastre — */
  --shadow-sm:    0 1px 2px rgba(15,27,45,.06), 0 1px 3px rgba(15,27,45,.04);
  --shadow-md:    0 4px 12px -2px rgba(15,27,45,.10), 0 2px 6px -2px rgba(15,27,45,.06);
  --shadow-lg:    0 12px 28px -6px rgba(15,27,45,.16);
  --shadow-focus: 0 0 0 3px var(--azure-700);   /* [a11y #2] anello di focus ad alto contrasto (era azure-200, ~1.2:1 su fondi chiari); azure-700 è theme-adaptive */
  --shadow-focus-ring: inset 0 0 0 2px var(--azure-500);  /* alias storico */
  /* alias storici — mappati alle nuove ombre */
  --shadow-card:      var(--shadow-md);
  --shadow-card-soft: var(--shadow-sm);

  /* — Spaziatura — */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-base:16px;
  --space-lg:  20px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 60px;
  --space-5xl: 88px;

  /* — Layout — */
  --container-max:    1240px;
  --container-wide:   1320px;  /* pagine catalogo con sidebar filtri */
  --tap-target:       44px;

  /* — Motion — */
  --ease:      cubic-bezier(.2, .6, .2, 1);
  --dur-fast:  150ms;
  --dur-base:  200ms;
  --dur-slow:  300ms;
}

/* ---- Schermi grandi/curvi (2K+, ultrawide 21:9, 4K): il contenuto non deve
   restare una colonna stretta in mezzo a due bordi vuoti enormi. Sopra i 1920px
   comuni (dove il layout attuale e' gia' pensato bene) allarga i container: la
   prosa resta leggibile (gia' capped a 60-70ch nei blocchi di testo), i grigliati
   a griglia (auto-fill) guadagnano colonne in piu' da soli, nessun'altra modifica. */
@media (min-width: 2000px) {
  :root {
    --container-max:  1440px;
    --container-wide: 1640px;
  }
}
@media (min-width: 2800px) {
  :root {
    --container-max:  1600px;
    --container-wide: 1840px;
  }
}

/* ---- Reset leggero -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light dark;
       /* [a11y #5] il focus/àncora non deve finire sotto l'header sticky o le barre fisse in basso */
       scroll-padding-top: calc(var(--header-h, 72px) + 8px); scroll-padding-bottom: 84px; }

body.catalog-page {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--bg-page);
  background-image: var(--sheen);   /* madreperla cangiante (petrolio/benzina/celeste) */
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-shadow: var(--txt-shadow);   /* lieve profondita' su tutti i testi */
}

.catalog-page img { max-width: 100%; display: block; }

/* Link testuali in AZURE SCURO (AA 10.5:1), brand #357df9 mai come testo body.
   :not([class]) → solo link "prosa": i componenti (.btn, .cat-card, .prod-card,
   .pdf-link…) gestiscono il proprio colore senza essere sovrascritti per specificità. */
.catalog-page a:not([class]) { color: var(--azure-900); text-decoration: none; }
.catalog-page a:not([class]):hover { color: var(--azure-900); text-decoration: underline; }   /* niente cambio-colore su hover: solo sottolineatura */

.catalog-page h1, .catalog-page h2, .catalog-page h3, .catalog-page h4 {
  font-family: var(--font-title);
  font-optical-sizing: auto;   /* Fraunces variabile: opsz cala con la dimensione */
  color: var(--ink-900);
  line-height: var(--lh-tight);
  letter-spacing: normal;      /* serif: niente tracking negativo */
  text-wrap: balance;   /* righe bilanciate: niente ultima riga con una parola sola */
  margin: 0 0 var(--space-md);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--azure-700);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden,
.search__label {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--azure-700);
  color: #fff;
  padding: var(--space-sm) var(--space-base);
  z-index: 200;
  border-radius: 0 0 var(--radius-base) 0;
}
.skip-link:focus { left: 0; }

/* ---- Tipografia helper: eyebrow / kicker + titoli sezione ----------------- */
.eyebrow, .kicker {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--petrol);   /* eyebrow a colore fisso petrolio */
  margin: 0 0 var(--space-sm);
}
.text-muted { color: var(--gray-600); }
.num { font-family: var(--font-head); font-variant-numeric: tabular-nums; }

/* ---- Layout container ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-base);
}
.container--wide { max-width: var(--container-wide); }
@media (min-width: 1024px) {
  .container { padding: 0 var(--space-2xl); }
}

.catalog-main { padding: var(--space-xl) 0 var(--space-4xl); }

/* griglie responsive riusabili (autofit) */
.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ==========================================================================
   HEADER (shell)
   ========================================================================== */
.site-header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-bd);
  position: sticky; top: 0; z-index: 100;
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-md) var(--space-base);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg);
}
.site-header__logo img { width: 113px; height: auto; }

.site-nav { display: flex; align-items: center; gap: var(--space-xl); }
.site-nav__list {
  list-style: none;
  display: flex; align-items: center; gap: var(--space-xl);
  margin: 0; padding: 0;
}
/* underline animato via scaleX (compositor-friendly) */
.site-nav__list a {
  position: relative;
  font-family: var(--font-nav);
  font-weight: var(--weight-medium);
  font-size: 16px;
  color: var(--ink-900);
  text-decoration: none;
  padding: var(--space-xs) 0;
}
.site-nav__list a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--azure-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease);
}
.site-nav__list a:hover { color: var(--azure-900); text-decoration: none; }
.site-nav__list a:hover::after,
.site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__list a[aria-current="page"] { color: var(--azure-900); font-weight: var(--weight-semibold); }

/* utility-nav (Area riservata + lingua) */
.site-nav__utility { display: flex; align-items: center; gap: var(--space-lg); }
.site-nav__lang { display: flex; align-items: center; gap: var(--space-xs); }
.site-nav__lang-link {
  font-family: var(--font-nav);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  color: var(--gray-600);
}
.site-nav__lang-link:hover { color: var(--azure-900); }
.site-nav__lang-link.is-active { color: var(--ink-900); text-decoration: underline; }
.site-nav__lang-sep { color: var(--gray-border); }

/* dropdown "Prodotti" CSS-only (focus-within per tastiera) */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 240px;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm);
  list-style: none; margin: 0;
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index: 110;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 15px; color: var(--ink-900);
}
.dropdown a:hover { background: var(--azure-50); color: var(--azure-900); text-decoration: none; }

.site-header__toggle {
  display: none;
  flex-direction: column; gap: 5px;
  width: 40px; height: 40px;
  padding: 9px 8px;
  background: none;
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.site-header__toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--ink-900); border-radius: 2px;
}

@media (max-width: 1023px) {
  .site-header__toggle { display: flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start;
    gap: var(--space-md);
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-bd);
    padding: var(--space-base);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-md); width: 100%; }
  .site-nav__utility { flex-direction: column; align-items: flex-start; gap: var(--space-md); width: 100%; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding-left: var(--space-md); }
}
/* Tablet: nav = hamburger come sul telefono (7 voci non stanno ariose in orizzontale a 768) */

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb { margin-bottom: var(--space-lg); }
.breadcrumb ol {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs);
  margin: 0; padding: 0;
  font-size: var(--fs-2xs); color: var(--gray-600);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--space-xs); }
.breadcrumb li + li::before { content: "/"; color: var(--gray-border); margin-right: var(--space-xs); }
.breadcrumb a { color: var(--gray-600); }
.breadcrumb a:hover { color: var(--azure-900); }
.breadcrumb li[aria-current="page"] {
  color: var(--ink-900);
  font-weight: var(--weight-semibold);
  max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   HERO + section titles
   ========================================================================== */
.hero {
  padding: var(--space-lg) 0 var(--space-2xl);
  border-bottom: 1px solid var(--gray-border);
  margin-bottom: var(--space-2xl);
}
.hero h1 { font-size: var(--fs-h1); font-weight: var(--weight-bold); margin-bottom: var(--space-sm); }
.hero__subtitle { color: var(--gray-600); font-size: 17px; max-width: 70ch; margin: 0; }

.section-title {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-size: var(--fs-h2);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin: var(--space-2xl) 0 var(--space-lg);
}
/* titolo "cangiante": sfumatura fissa blu->petrolio (tinta unita se non supportato) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .catalog-page .section-title,
  .catalog-page .hero-band h2,
  .catalog-page .legal-toc__title { background: var(--title-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
}
/* su fondi scuri il titolo resta bianco pieno */
.hero-band .section-title, .section--bg .section-title, .media-hero .section-title {
  background: none; color: #fff; -webkit-text-fill-color: #fff;
}

/* ---- Hero "band" su navy (home / istituzionali) --------------------------- */
.hero-band {
  background: var(--band-surface);
  color: var(--band-text);
  padding: var(--space-4xl) 0;
  position: relative;
  overflow: hidden;
}
.hero-band h1 { color: var(--band-text); font-size: var(--fs-hero); font-weight: var(--weight-bold); margin: 0 0 var(--space-base); }
.hero-band p { color: var(--band-muted); font-size: 18px; max-width: 60ch; margin: 0 0 var(--space-xl); }
.hero-band .eyebrow { color: var(--band-eyebrow); }
.hero-band a:not(.btn) { color: var(--band-link); }
/* "onda"/accento brand: il #357df9 vive qui, su fondo scuro, come decorazione */
.hero-band__wave { position: absolute; inset: auto 0 -1px 0; height: 60px; color: var(--azure-500); opacity: .25; pointer-events: none; }
.hero-band__cta { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* ==========================================================================
   SFONDI IMMAGINE / VIDEO  (media-hero, section--bg)
   Overlay scuro/sfumato → contrasto AA garantito sul testo bianco.
   ========================================================================== */
/* ============================================================================
   ATTENZIONE — ORDINE DI DICHIARAZIONE (ha gia' causato 3 difetti reali)
   Le regole generiche degli hero qui sotto (`.media-hero::after`, `.media-hero h1`,
   `.media-hero p`, `.media-hero .eyebrow`, `.media-hero a:not(.btn)`) hanno la STESSA
   specificita' degli override della variante senza foto (`.media-hero--plain ...`).
   A parita' di specificita' vince l'ULTIMA dichiarata: quindi ogni override --plain
   DEVE stare DOPO queste regole, altrimenti viene silenziosamente annullato.
   Casi realmente accaduti:
     - il velo scuro copriva l'hero chiaro   -> titolo di /azienda/ a 2,95:1
     - l'occhiello restava azzurro chiaro    -> /contatti/ a 1,62:1 (invisibile)
   Non si nota subito perche' dipende dal TAG usato nella pagina: su /service/
   l'occhiello e' un <p> (catturato da una regola piu' specifica) e sembrava a posto.
   Se aggiungi un override --plain, mettilo nel blocco in fondo insieme agli altri
   e verifica il contrasto in ENTRAMBI i temi.
   ============================================================================ */
.media-hero, .section--bg {
  position: relative;
  isolation: isolate;
  color: #fff;
  background-color: var(--ink-900);   /* fallback se l'immagine non carica */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Altezza minima "da hero": banda piu' alta => il video 16:9 viene ritagliato molto
   meno in altezza. La griglia + align-content:center tiene il testo centrato
   verticalmente nella banda (il contenuto resta a piena larghezza). Le pagine
   possono alzare/abbassare con --hero-h e spostare l'inquadratura con --hero-focus. */
.media-hero {
  padding: var(--space-5xl) 0;
  min-height: var(--hero-h, clamp(440px, 60vh, 680px));
  display: grid;
  align-content: center;
}
.section--bg { padding: var(--space-4xl) 0; }

/* --- HERO SENZA FOTO ("murales") — 2026-07-28 -------------------------------
   Richiesta utente: via i frame del video usati come sfondo. Qui l'hero e' un fondo
   pieno di marca + il NOME della pagina in gigante a lettere contornate, come una
   scritta murale. Tutto in CSS: zero immagini da scaricare (l'hero pesava 100-160KB).
   La parola sta sopra il velo (z-index 0) e sotto il contenuto (z-index 1). --- */
/* L'hero senza foto SEGUE IL TEMA: chiaro di giorno, scuro di notte. Prima era una
   fascia sempre scura e, in tema chiaro, sembrava un blocco estraneo incollato sopra
   una pagina luminosa. I valori stanno in variabili cosi' la regola resta una sola. */
:root {
  /* nessun fondo proprio: si vede la madreperla del body -> l'hero e' una porzione della
     pagina, non un riquadro incollato (era quasi bianco e stonava col resto). */
  --plain-bg: transparent;
  --plain-ink: var(--ink-900);
  --plain-eyebrow: var(--azure-700);
  --plain-stroke: rgba(15, 27, 45, .44);
  --plain-drop: rgba(15, 27, 45, .12);
  --plain-glow: rgba(15, 27, 45, .04);
  --plain-scrim: transparent;                  /* niente velo scuro sul fondo chiaro */
  --plain-textshadow: none;
  --plain-btn-bd: rgba(15, 27, 45, .38);
  --plain-btn-bg: rgba(255, 255, 255, .72);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plain-bg:
      radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 55%),
      linear-gradient(135deg, #1b3d7a 0%, #0e6a72 58%, #0f1b2d 100%);
    --plain-ink: #fff;
    --plain-eyebrow: var(--azure-300);
    --plain-stroke: rgba(255, 255, 255, .40);
    --plain-drop: rgba(0, 0, 0, .17);
    --plain-glow: rgba(255, 255, 255, .07);
    --plain-scrim: rgba(15, 27, 45, .18);
    --plain-textshadow: 0 1px 8px rgba(0, 0, 0, .5);
    --plain-btn-bd: rgba(255, 255, 255, .55);
    --plain-btn-bg: rgba(15, 27, 45, .42);
  }
}
:root[data-theme="dark"] {
  --plain-bg:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #1b3d7a 0%, #0e6a72 58%, #0f1b2d 100%);
  --plain-ink: #fff;
  --plain-eyebrow: var(--azure-300);
  --plain-stroke: rgba(255, 255, 255, .40);
  --plain-drop: rgba(0, 0, 0, .17);
  --plain-glow: rgba(255, 255, 255, .07);
  --plain-scrim: rgba(15, 27, 45, .18);
  --plain-textshadow: 0 1px 8px rgba(0, 0, 0, .5);
  --plain-btn-bd: rgba(255, 255, 255, .55);
  --plain-btn-bg: rgba(15, 27, 45, .42);
}
.media-hero--plain { background: var(--plain-bg); color: var(--plain-ink); }
.media-hero--plain[data-hero-word]::before {
  content: attr(data-hero-word);
  /* in basso a destra e "sfondata" oltre i bordi: cosi' sembra dipinta sul muro e
     lascia pulita la colonna del titolo, che e' allineata a sinistra */
  /* CONTENUTA nel riquadro: prima "sfondava" oltre i bordi e le parole lunghe
     risultavano tagliate a destra e in basso (CERTIFICATI -> "CERTIFICAT"). */
  position: absolute; z-index: 0; right: 4%; bottom: 3%;
  /* Space Grotesk 700: lettere geometriche e squadrate, molto piu' "da muro" dell'Inter
     neutro. E' gia' nel sito (22KB, sottoinsieme latin) e serve solo a queste pagine. */
  font-family: 'Space Grotesk', var(--font-head);
  font-weight: 700;
  /* La dimensione si adatta alla LUNGHEZZA della parola: --hero-word-em e' la larghezza
     del testo in "em" (misurata sul carattere reale: numero di lettere x larghezza media
     meno la tracciatura). Cosi' SERVICE (corta) resta grande e CERTIFICATES (lunga) si
     riduce quanto basta per starci tutta, in ogni lingua. */
  font-size: min(calc(62vw / var(--hero-word-em, 4.5)), 300px); line-height: .76;
  letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap;
  /* inclinazione + contorno spesso + silhouette piena sfalsata = effetto stencil a due
     passate di spray (l'ombra si disegna anche col riempimento trasparente),
     piu' un alone morbido che imita il sovraspruzzo attorno alle lettere */
  transform: rotate(-2.8deg);
  transform-origin: 100% 100%;
  color: transparent;
  /* contorno: al 30% il contrasto col fondo era 2,60:1 -> sotto la soglia 3:1 degli
     elementi grafici, la parola si intuiva ma non si leggeva. Al 45% misura 3,51:1.
     Il colore segue il tema (scuro su fondo chiaro, bianco su fondo scuro). */
  -webkit-text-stroke: 4.5px var(--plain-stroke);
  text-shadow:
    12px 14px 0 var(--plain-drop),
    0 0 28px var(--plain-glow),
    0 0 60px var(--plain-glow);
  pointer-events: none; user-select: none;
}
@media (max-width: 640px) { .media-hero--plain[data-hero-word]::before { -webkit-text-stroke-width: 2px; } }
/* niente contorno se il browser non lo supporta: meglio invisibile che un blocco pieno */
@supports not (-webkit-text-stroke: 1px red) {
  .media-hero--plain[data-hero-word]::before { display: none; }
}

/* immagine di sfondo responsiva via custom property (image-set per DPR) */
.media-hero[style*="--bg-img"],
.section--bg[style*="--bg-img"] { background-image: var(--bg-img); }

/* video di sfondo */
.media-hero__video, .section--bg__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, center);
}
/* [a11y #1] con "riduci animazioni" il video di sfondo non si riproduce: resta il poster (fallback).
   Il guard in site-ui.js evita anche il play(). WCAG 2.2.2 Pausa/Stop/Nascondi. */
@media (prefers-reduced-motion: reduce) {
  .media-hero__video, .section--bg__video { display: none !important; }
}
/* poster/immagine DAVVERO sotto al video (z-index -3 < video -2): il video, quando
   parte, copre il poster ed e' visibile. Se il video non c'e' (mobile/fallback) si
   vede il poster. Prima erano entrambi a -2 e il poster (dopo nel DOM) copriva il
   video -> si vedeva l'immagine statica anche col video in riproduzione. */
.media-hero__img, .section--bg__img {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--hero-focus, center);
}

/* OVERLAY: gradiente scuro per leggibilità del testo (AA) */
.media-hero::after, .section--bg::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:   /* GIORNO: velo base piu' chiaro (foto piu' luminosa) */
    linear-gradient(180deg, rgba(15,27,45,.30) 0%, rgba(15,27,45,.46) 100%),
    linear-gradient(90deg, rgba(15,27,45,.44) 0%, rgba(15,27,45,.14) 60%, rgba(15,27,45,.04) 100%);
}
/* varianti overlay */
/* GIORNO: velo piu' chiaro sopra la foto (foto piu' luminosa, testo bianco+ombra leggibile) */
.media-hero--scrim::after, .section--bg--scrim::after { background: rgba(15,27,45,.40); }
.media-hero--soft::after,   .section--bg--soft::after   { background: linear-gradient(180deg, rgba(15,27,45,.20), rgba(15,27,45,.42)); }
/* NOTTE: velo piu' scuro, coerente col tema scuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .media-hero--scrim::after,
  :root:not([data-theme="light"]) .section--bg--scrim::after { background: rgba(15,27,45,.64); }
  :root:not([data-theme="light"]) .media-hero--soft::after,
  :root:not([data-theme="light"]) .section--bg--soft::after   { background: linear-gradient(180deg, rgba(15,27,45,.40), rgba(15,27,45,.60)); }
  :root:not([data-theme="light"]) .media-hero::after,
  :root:not([data-theme="light"]) .section--bg::after { background: linear-gradient(180deg, rgba(15,27,45,.55) 0%, rgba(15,27,45,.70) 100%), linear-gradient(90deg, rgba(15,27,45,.65) 0%, rgba(15,27,45,.25) 60%, rgba(15,27,45,.10) 100%); }
}
:root[data-theme="dark"] .media-hero--scrim::after,
:root[data-theme="dark"] .section--bg--scrim::after { background: rgba(15,27,45,.64); }
:root[data-theme="dark"] .media-hero--soft::after,
:root[data-theme="dark"] .section--bg--soft::after   { background: linear-gradient(180deg, rgba(15,27,45,.40), rgba(15,27,45,.60)); }
:root[data-theme="dark"] .media-hero::after,
:root[data-theme="dark"] .section--bg::after { background: linear-gradient(180deg, rgba(15,27,45,.55) 0%, rgba(15,27,45,.70) 100%), linear-gradient(90deg, rgba(15,27,45,.65) 0%, rgba(15,27,45,.25) 60%, rgba(15,27,45,.10) 100%); }
/* L'hero SENZA foto non deve prendere il velo scuro pensato per le foto: il suo velo
   arriva da --plain-scrim (trasparente di giorno). Deve stare DOPO le regole qui sopra,
   che hanno la stessa specificita' e altrimenti vincerebbero per ordine. */
:root .media-hero--plain::after { background: var(--plain-scrim); }

.media-hero__content, .section--bg__content { position: relative; z-index: 1; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

/* Foto inquadrata dello stabilimento (usata dentro le sezioni scure section--bg,
   es. "Gli stabilimenti" in azienda). Immagine reale a dimensione contenuta -> nitida. */
.facility-photo { max-width: 640px; margin: 0 auto var(--space-2xl); }
.facility-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: 0 20px 55px rgba(0,0,0,.45); }
.facility-photo figcaption { margin-top: var(--space-sm); text-align: center; font-family: var(--font-nav); font-size: 13.5px; color: rgba(255,255,255,.82); }
.media-hero h1, .section--bg h1, .media-hero h2, .section--bg h2 { color: #fff; }
/* FIX: l'H1 hero ereditava il font-size di default del browser (~32px) invece dello scalone hero */
.media-hero h1, .section--bg h1 { font-size: var(--fs-hero); font-weight: var(--weight-bold); line-height: var(--lh-tight); }
.media-hero p, .section--bg p { color: rgba(255,255,255,.92); }
.media-hero .eyebrow, .section--bg .eyebrow { color: var(--azure-300); }
.media-hero a:not(.btn), .section--bg a:not(.btn) { color: var(--azure-300); }

/* Colori del contenuto negli hero SENZA foto: devono stare DOPO le regole qui sopra,
   che hanno la stessa specificita' e altrimenti vincerebbero per ordine di dichiarazione.
   E' la stessa trappola del velo ::after: su /contatti/ l'occhiello e' uno <span> e
   restava azzurro chiaro su fondo chiaro (misurato 1,62:1). */
.media-hero--plain .media-hero__content { text-shadow: var(--plain-textshadow); }
.media-hero--plain .media-hero__content h1,
.media-hero--plain .media-hero__content p,
.media-hero--plain .breadcrumb,
.media-hero--plain .breadcrumb a,
.media-hero--plain .breadcrumb li { color: var(--plain-ink); }
.media-hero--plain .eyebrow { color: var(--plain-eyebrow); }
.media-hero--plain .btn--on-dark { color: var(--plain-ink); border-color: var(--plain-btn-bd); background: var(--plain-btn-bg); }

/* ==========================================================================
   TRUST STRIP (segnali conformità, dosati)
   ========================================================================== */
.trust-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-lg) var(--space-2xl);
  padding: var(--space-base) 0;
}
.trust-strip__item {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-nav);
  font-size: 14px; font-weight: var(--weight-semibold);
  color: var(--gray-600);
}
.trust-strip__item svg { width: 20px; height: 20px; color: var(--gray-600); flex: none; }
.trust-strip--on-dark .trust-strip__item { color: var(--fog); }
.trust-strip--on-dark .trust-strip__item svg { color: var(--azure-300); }
/* Mobile: trust = griglia pulita di chip a 2 colonne (come nel mockup), non voci sparse a capo */
@media (max-width: 639px) {
  .trust-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); padding: var(--space-md) 0; }
  .trust-strip__item { justify-content: flex-start; font-size: 13px; background: var(--pill-bg); border: 1px solid var(--card-bd); border-radius: var(--radius-base); padding: 11px 12px; box-shadow: var(--shadow-sm); }
  .trust-strip__item svg { width: 18px; height: 18px; }
  .trust-strip__item:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }
}

/* ==========================================================================
   SEARCH BAR + FILTERS
   ========================================================================== */
.search { margin-bottom: var(--space-2xl); }
.search__bar { position: relative; display: flex; align-items: center; max-width: 680px; }
.toolbar .search__bar { max-width: 420px; }

.search__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-base);
  padding: 12px 40px 12px 16px;
  outline: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.search__input::placeholder { color: var(--gray-600); }
.search__input:focus { background: var(--white); border-color: var(--azure-500); box-shadow: var(--shadow-focus); }

.search__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  border: none; background: none;
  color: var(--gray-600); font-size: 22px; line-height: 1;
  cursor: pointer; border-radius: var(--radius-pill);
}
.search__clear:hover { background: var(--bg-light); color: var(--text); }

.search__hint { font-size: var(--fs-2xs); color: var(--gray-600); margin: var(--space-sm) 0 0; }
.search__count { font-size: var(--fs-xs); color: var(--gray-600); margin: var(--space-lg) 0 var(--space-md); }

.search__chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-base) 0; overflow-x: auto; }

/* chip filtro */
.chip {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  line-height: var(--lh-ui);
  color: var(--ink-900);
  background: var(--pill-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--azure-500); color: var(--azure-900); }
.chip.is-active {
  background: var(--azure-100);
  border-color: var(--azure-500);
  color: var(--azure-900);            /* 8.78:1 su azure-100 ✔ */
  font-weight: var(--weight-semibold);
}
/* chip filtro-attivo rimovibile (toolbar filtri) */
.chip--removable { display: inline-flex; align-items: center; gap: 6px; }
.chip--removable button {
  border: 0; background: none; cursor: pointer;
  color: inherit; font-size: 15px; line-height: 1;
  padding: 0 0 0 2px;
}

/* ---- toolbar (category page) --------------------------------------------- */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-base);
  margin: var(--space-lg) 0 var(--space-2xl);
}
.toolbar__select {
  font-family: var(--font-body);
  font-size: 16px; color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-base);
  padding: 11px 14px; cursor: pointer;
}
.toolbar__select:focus { border-color: var(--azure-500); box-shadow: var(--shadow-focus); outline: none; }
.toolbar__count { font-size: var(--fs-2xs); color: var(--gray-600); margin: 0; }

/* toggle vista griglia/lista */
.view-toggle { display: inline-flex; border: 1px solid var(--card-bd); border-radius: var(--radius-base); overflow: hidden; }
.view-toggle button {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-target); height: 40px;
  border: 0; background: var(--card-bg); color: var(--gray-600); cursor: pointer;
}
.view-toggle button + button { border-left: 1px solid var(--card-bd); }
.view-toggle button[aria-pressed="true"] { background: var(--azure-50); color: var(--azure-900); }

/* ---- Sidebar filtri (catalogo) ------------------------------------------- */
.catalog-layout { display: block; }
@media (min-width: 1024px) {
  .catalog-layout { display: grid; grid-template-columns: 264px 1fr; gap: var(--space-2xl); align-items: start; }
}
.filters {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
/* --- SCORRIMENTO UNICO DI PAGINA (desktop) — 2026-07-29 ---
   Richiesta utente, dopo averlo provato in uso: "se scorro il div teli e pacchi, il div
   dei filtri deve scorrere insieme; e se scorro fuori dai div, la pagina e i div devono
   scorrere insieme - non devono scorrere i prodotti interni ma proprio il div, gli
   elementi rimangono fermi". Cioe' ZERO scorrimento interno: si muovono i riquadri, non
   il loro contenuto. E' il comportamento nativo di una pagina normale.
   Rimosso quindi tutto il blocco desktop che rendeva la colonna filtri pinnata con
   overflow proprio (position:sticky + max-height + overflow-y + barra nascosta): senza
   overflow quelle regole sarebbero comunque solo rumore.
   Storico, per non ripercorrerlo: 2 barre annidate -> nessuna -> colonna pinnata con
   barra invisibile -> ora tutto insieme. NON reintrodurre `overscroll-behavior: contain`
   (era il "muro" che bloccava la propagazione a fine colonna) ne' un contenitore
   scrollabile: la toolbar `.toolbar--category` aveva uno sticky ancorato proprio a
   quello e, senza, si incollerebbe sotto l'header.
   .catalog-results resta in flusso normale. Il drawer MOBILE (<=1023) tiene il suo
   overflow interno: li' e' un pannello a comparsa e serve. --- */
/* --- COLONNA FILTRI PINNATA IN MODO FLUIDO (desktop) — 2026-07-29 ---
   L'utente: "il div dei filtri deve rimanere sempre visibile quando scorro la pagina,
   ma non deve sembrare che ci sia uno stacco: deve essere fluido".
   DIAGNOSI MISURATA dello "stacco": con un `top` fisso la colonna si inchioda dopo
   pochi pixel mentre tutto il resto continua a muoversi (registrato: la colonna smette
   di seguire la pagina a scrollY ~276 con uno scarto di 215px in un passo). Ed essendo
   piu' alta del viewport, il suo fondo restava irraggiungibile senza scroll interno.
   SOLUZIONE: l'aggancio non e' un valore fisso ma CALCOLATO (site-ui.js lo scrive in
   --filters-top): se la colonna non ci sta nel viewport, top = altezza viewport -
   altezza colonna - margine, cioe' un valore NEGATIVO. Cosi' la colonna scorre insieme
   alla pagina finche' non la si e' vista tutta, e solo allora si ferma (misurato: si
   ferma a scrollY 918 invece di 276). Niente overflow interno, niente barre, fondo
   sempre raggiungibile.
   La classe .is-sticky la mette il JS: senza JS la colonna resta in flusso normale,
   che e' la degradazione sicura (tutto raggiungibile, solo non sempre visibile). --- */
@media (min-width: 1024px) {
  .filters.is-sticky { position: sticky; top: var(--filters-top, 16px); }
}
/* niente linee di separazione fra i gruppi di filtri (richiesta utente: "elimina il
   bordo nero che suddivide le varie parti"). La separazione resta affidata allo spazio
   verticale e al peso tipografico dei titoli di gruppo. */
/* NB i gruppi sono <fieldset>: senza reset il browser disegna il suo bordo di default
   (2px groove grigio su tutti i lati) — ERA QUELLO il "bordo nero" visibile, non la
   riga di separazione che c'era prima qui. Azzerato anche margine e min-inline-size,
   che sui fieldset hanno valori di default capaci di rompere il layout. */
.filters__group { border: 0; margin: 0; min-inline-size: 0; padding-inline: 0; }
/* header di gruppo: accordion tappabile su mobile, etichetta statica su desktop */
.filters__grouptoggle {
  display: flex; align-items: center; gap: var(--space-sm);
  width: 100%; min-height: var(--tap-target);
  padding: var(--space-md) 0; margin: 0;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.filters__legend {
  font-family: var(--font-head);
  font-size: var(--fs-xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-900); margin: 0;
}
.filters__group-sel {
  font-family: var(--font-nav); font-size: var(--fs-2xs); font-weight: var(--weight-bold);
  color: #fff; background: var(--azure-700);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.filters__group-sel[hidden] { display: none; }
.filters__chevron { width: 18px; height: 18px; margin-left: auto; color: var(--gray-600); flex: none; transition: transform var(--dur-fast) var(--ease); }
.filters__group.is-open .filters__chevron { transform: rotate(180deg); }
.filters__groupbody { padding-bottom: var(--space-md); }
.facet { display: flex; align-items: center; gap: var(--space-sm); padding: 8px 0; min-height: var(--tap-target); font-size: var(--fs-xs); color: var(--text); cursor: pointer; }
.facet input { accent-color: var(--azure-700); width: 18px; height: 18px; flex: none; }
.facet__count { margin-left: auto; color: var(--gray-700); font-variant-numeric: tabular-nums; font-size: var(--fs-2xs); }
.facet.is-empty { color: var(--gray-border); cursor: not-allowed; }
.facet.is-empty input { pointer-events: none; }
/* DESKTOP: niente accordion — tutti i facet visibili, header non interattivo */
@media (min-width: 1024px) {
  .filters__grouptoggle { cursor: default; min-height: 0; padding: 0 0 var(--space-sm); }
  .filters__group { padding: var(--space-md) 0; }
  .filters__chevron, .filters__group-sel { display: none; }
  .filters__groupbody { display: block !important; padding-bottom: 0; }
}
/* MOBILE/TABLET: gruppi chiusi tranne quelli marcati .is-open */
@media (max-width: 1023px) {
  .filters__group:not(.is-open) .filters__groupbody { display: none; }
}

/* drawer filtri mobile */
.filters-toggle { display: inline-flex; }
/* DESKTOP: la sidebar e' sempre visibile nella griglia a 2 colonne;
   il bottone "Filtri" (apri-drawer) e l'apply/clear-mobile spariscono. */
@media (min-width: 1024px) {
  .filters-toggle.btn, .filters-toggle { display: none; }
  .filters[data-drawer] { display: block; }
  .filters__apply { display: none !important; }
}
/* MOBILE/TABLET: la sidebar e' un drawer, chiuso di default. */
@media (max-width: 1023px) {
  .filters[data-drawer] { display: none; }
  .filters[data-drawer].is-open {
    display: block;
    position: fixed; inset: 0; z-index: 150;
    border-radius: 0; overflow-y: auto;
    padding-bottom: 96px;
  }
  .filters[data-drawer].is-open .filters__apply {
    display: inline-flex !important;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 151;
    border-radius: 0;
    padding: var(--space-md) var(--space-base);
    background: var(--azure-700); color: #fff; border-top: 1px solid var(--ink-700);
  }
}

/* ==========================================================================
   FILTRI MOBILE — barra sticky "Filtri | Ordina" + sort bottom-sheet
   (ispirato a Zalando/Amazon: due controlli distinti, layer dedicato,
   accordion, una sola CTA "Mostra N". Tutto progressive-enhancement.)
   ========================================================================== */
/* titolo del drawer filtri (header) */
.filters__title { font-family: var(--font-head); font-size: var(--fs-sm); font-weight: var(--weight-semibold); color: var(--ink-900); margin: 0; }
/* "Cancella tutto": link testuale secondario (non CTA) nell'header del drawer */
.filters__clearbtn {
  background: none; border: 0; padding: 6px 4px; min-height: 0;
  font-family: var(--font-nav); font-size: var(--fs-xs); font-weight: var(--weight-semibold);
  color: var(--azure-900); text-decoration: underline; cursor: pointer;
}
.filters__clearbtn:hover { color: var(--azure-700); }

/* barra sticky a due bottoni equivalenti — SOLO mobile/tablet (≤1023) */
.filter-sortbar { display: none; }
@media (max-width: 1023px) {
  .filter-sortbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);
    margin: 0 0 var(--space-base);
    background: var(--bg-page);
  }
  .filter-sortbar__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
    min-height: var(--tap-target); padding: 10px var(--space-base);
    font-family: var(--font-nav); font-size: var(--fs-sm); font-weight: var(--weight-semibold);
    color: var(--ink-900); background: var(--card-bg);
    border: 1px solid var(--card-bd); border-radius: var(--radius-base); cursor: pointer;
  }
  .filter-sortbar__btn:active { background: var(--azure-50); }
  .filter-sortbar__btn svg { width: 18px; height: 18px; flex: none; color: var(--azure-700); }
  .filter-sortbar__badge {
    font-family: var(--font-nav); font-size: var(--fs-2xs); font-weight: var(--weight-bold);
    color: #fff; background: var(--azure-700);
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  }
}
.filter-sortbar__badge[hidden] { display: none; }

/* Sort = bottom-sheet di radio-row (non <select> nativo) */
.sort-sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; }
.sort-sheet[hidden] { display: none; }
@media (min-width: 1024px) { .sort-sheet { display: none !important; } }
.sort-sheet__backdrop { position: absolute; inset: 0; background: rgba(15,27,45,.45); }
.sort-sheet__panel {
  position: relative; width: 100%; max-height: 80vh; overflow-y: auto;
  background: var(--card-bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-base) var(--space-base) calc(var(--space-base) + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lg); animation: sheet-up var(--dur-base) var(--ease);
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .sort-sheet__panel { animation: none; } }
.sort-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.sort-sheet__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  width: 100%; min-height: var(--tap-target); padding: var(--space-md) var(--space-sm);
  background: none; border: 0; border-top: 1px solid var(--gray-border);
  font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text);
  text-align: left; cursor: pointer;
}
.sort-sheet__option:first-of-type { border-top: 0; }
.sort-sheet__option[aria-checked="true"] { color: var(--azure-900); font-weight: var(--weight-semibold); }
.sort-sheet__check { width: 20px; height: 20px; color: var(--azure-700); flex: none; opacity: 0; }
.sort-sheet__option[aria-checked="true"] .sort-sheet__check { opacity: 1; }

/* Chip filtri attivi: striscia orizzontale scrollabile su mobile (stato sempre visibile) */
@media (max-width: 1023px) {
  .active-filters {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
            mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .active-filters::-webkit-scrollbar { display: none; }
  .active-filters .chip { flex: none; }
}

/* ==========================================================================
   CATEGORY HEAD
   ========================================================================== */
.category-head { margin-bottom: var(--space-lg); }
.category-head h1 { font-size: var(--fs-h1); font-weight: var(--weight-bold); margin-bottom: var(--space-xs); }
.category-head__count { color: var(--gray-600); font-size: 16px; margin: 0; }
/* "Capitolo:" — etichetta sobria davanti al nome categoria (WS2, 2026-07-23) */
.cat-h1__chapter { display: inline-block; font-family: system-ui, -apple-system, sans-serif; font-size: .46em; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-600); vertical-align: middle; margin-right: .5em; }

/* ── Selettore cataloghi (multi-catalogo) — piccola FRECCINA accanto al titolo ─
   Bottone solo-icona subito dopo il titolo "Cataloghi"; apre un menu a selezione
   singola. Compare da sé con 2+ cataloghi pubblicati; con uno solo è assente. */
.categories__head { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.categories__head .section-title { margin: 0; }

.ujet-catsw { position: relative; display: inline-flex; align-items: center; }
.ujet-catsw__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--gray-600); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ujet-catsw__btn:hover,
.ujet-catsw__btn[aria-expanded="true"] { background: var(--azure-50); color: var(--azure-900); }
.ujet-catsw__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ujet-catsw__chev { width: 20px; height: 20px; flex: none; transition: transform var(--dur-fast) var(--ease); }
.ujet-catsw__btn[aria-expanded="true"] .ujet-catsw__chev { transform: rotate(180deg); }

.ujet-catsw__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 220px; margin: 0; padding: var(--space-xs);
  list-style: none;
  background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--radius-base);
  box-shadow: var(--shadow-lg);
}
.ujet-catsw__menu[hidden] { display: none; }
.ujet-catsw__opt {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 9px 12px 9px 8px; border-radius: var(--radius-sm);
  color: var(--ink-900); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap;
}
.ujet-catsw__opt:hover { background: var(--azure-50); color: var(--azure-900); text-decoration: none; }
.ujet-catsw__opt:focus-visible { outline: none; background: var(--azure-50); box-shadow: var(--shadow-focus-ring); }
.ujet-catsw__check { width: 18px; height: 18px; flex: none; color: var(--azure-700); visibility: hidden; }
.ujet-catsw__opt.is-on { color: var(--azure-900); font-weight: var(--weight-semibold); }
.ujet-catsw__opt.is-on .ujet-catsw__check { visibility: visible; }

/* ==========================================================================
   CARD GRID
   ========================================================================== */
.card-grid { display: grid; gap: var(--space-lg); }
.card-grid--categories { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: var(--space-xl); row-gap: var(--space-2xl); }
.card-grid--products    { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-xl); }

/* --- Settori: raggruppano le tessere categoria nel hub /prodotti (Ospedaliero primo) --- */
.sector-group { margin-top: var(--space-3xl); }
.sector-group:first-child { margin-top: var(--space-md); }
/* WS1 2026-07-23: nome catalogo + "Scarica il catalogo" sulla stessa riga (download per-catalogo) */
.sector-head { display: flex; align-items: baseline; gap: .5rem 1.25rem; flex-wrap: wrap; }
.sector-head .sector-title { margin: 0; }
.sector-head .catalog-intro__actions { margin: 0; }
.sector-head .catalog-intro__cta { padding: .34rem .8rem; font-size: .9rem; }
/* Catalogo "piatto" senza sotto-capitoli (es. Dentale): la card-grid segue SUBITO la
   testata -> senza questo le tessere toccano il pulsante. Ripristina il respiro che su
   Ospedaliero dà il primo .chapter-group-title (md sopra + titolo + base sotto). */
.sector-head + .card-grid { margin-top: var(--space-2xl); }
.sector-title {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  color: var(--petrol);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--card-bd);
}
/* Sotto-capitoli CAT/docx dentro il settore Ospedaliero (Specialistiche / Altro).
   .catalog-page per battere `.catalog-page h1..h4 { margin:0 0 space-md }` (0,1,1). */
.catalog-page .chapter-group-title {
  font-family: var(--font-title);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--space-3xl) 0 var(--space-base);
}
.catalog-page .chapter-group-title:first-of-type { margin-top: var(--space-md); }

/* Tablet 640-1023: piu' colonne, sfrutta la larghezza dello schermo */
@media (max-width: 1023px) {
  .card-grid--categories { grid-template-columns: repeat(3, 1fr); }
  .card-grid--products    { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile <=639: 1 colonna prodotti (immagine grande), 2 categorie */
@media (max-width: 639px) {
  .card-grid--categories { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .card-grid--products    { grid-template-columns: 1fr; }
  /* Home mobile: piu' aria hero->CTA (il resto del ritmo home e' piu' sotto) */
  .catalog-page--home .home-hero__cta { margin-top: var(--space-2xl); }
}

/* ---- Category card — tessera a SIMBOLO (icona tipologia + nome + conteggio) - */
.cat-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--space-sm);
  min-height: 200px;
  padding: var(--space-xl) var(--space-base);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 18px;
  box-shadow: var(--card-sh);
  text-decoration: none; color: var(--ink-900);
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.cat-card:hover, .cat-card:focus-visible {
  box-shadow: var(--card-sh-h);
  text-decoration: none;
  transform: translateY(-5px);   /* leggera 3D: si solleva */
}
.cat-card:focus-visible { outline: none; box-shadow: var(--shadow-focus), var(--card-sh-h); }

/* pastiglia tonda "scavata" con l'icona (petrolio) */
.cat-card__icon {
  display: grid; place-items: center;
  width: 72px; height: 72px; margin-bottom: var(--space-md);
  border-radius: 50%;
  background: var(--pill-bg); color: var(--petrol);
  box-shadow: var(--pill-sh);
  transition: transform var(--dur-base) var(--ease);
}
.cat-card__icon svg { width: 34px; height: 34px; }
.cat-card:hover .cat-card__icon, .cat-card:focus-visible .cat-card__icon { transform: scale(1.05); }

.cat-card__name { font-size: 16px; line-height: 1.35; font-weight: var(--weight-semibold); margin: 0; color: var(--azure-900); text-wrap: balance; }
.cat-card__count { font-size: 13px; color: var(--gray-600); margin-top: var(--space-xs); }
/* home (HTML storico): nascondi la freccia-avanzo e scarta il wrapper, cosi' le tessere
   combaciano con quelle di /prodotti/ (icona + nome + conteggio centrati) */
.cat-card__arrow { display: none; }
.cat-card__body { display: contents; }

/* ---- Product card --------------------------------------------------------- */
/* FIX FILTRI: il filtro nasconde le card via attributo [hidden], ma .prod-card forza
   display:flex e coprirebbe la regola UA [hidden]{display:none} -> il filtro non
   filtrava (es. "cuffia" mostrava le mascherine). Questa regola lo rende effettivo. */
.prod-card[hidden] { display: none !important; }
.prod-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-sh);
  overflow: hidden;
  text-decoration: none; color: var(--text);
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.prod-card:hover, .prod-card:focus-visible {
  box-shadow: var(--card-sh-h);
  border-color: var(--azure-500);
  text-decoration: none;
  transform: translateY(-3px);            /* coerente con le tessere hub */
}
.prod-card:focus-visible { outline: none; box-shadow: var(--shadow-focus), var(--shadow-md); }

/* Richiesta utente: "voglio vedere telo e immagine pacco a figura intera sempre".
   Il riquadro era 4/3 ORIZZONTALE con object-fit:cover, ma i contenuti sono tutti
   VERTICALI (disegni telo ~242x384, foto pacco 1024x1536): il ritaglio mangiava piu'
   della meta' della figura. Ora quadrato + contain: si vede sempre tutto il pezzo. */
.prod-card__media { position: relative; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; border-bottom: 1px solid var(--card-bd); }  /* cornice coerente foto+schema */
.prod-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slow) var(--ease); }
.prod-card:hover .prod-card__media img { transform: scale(1.05); }   /* stesso zoom delle tessere hub */

/* area badge (in alto a sinistra sull'immagine) */
.prod-card__badges {
  position: absolute; top: var(--space-sm); left: var(--space-sm);
  display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - var(--space-base));
  z-index: 2;
}
/* badge sull'immagine: piu' leggeri e piccoli (mantengono il colore-segnale, es. verde
   Sterile), con ombra tenue per staccarsi dalla foto senza pesare */
.prod-card__badges .badge { font-size: 11px; padding: 3px 8px; gap: 4px; box-shadow: 0 1px 2px rgba(15,27,45,.14); }
.prod-card__badges .badge svg { width: 12px; height: 12px; }

.prod-card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: 6px; }  /* piu' respiro */
.prod-card__name {
  font-size: var(--fs-sm); font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  color: var(--ink-900); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prod-card:hover .prod-card__name { color: var(--azure-900); }
.prod-card__code { font-size: var(--fs-2xs); color: var(--gray-700); margin: 0; font-variant-numeric: tabular-nums; }
.prod-card__cat { font-size: .75rem; font-weight: var(--weight-medium); color: var(--gray-600); margin: 0; }  /* demossa: piccola e muta, il nome domina */
/* Badge catalogo (solo vista aggregata "Tutti"): micro-etichetta sopra il nome. */
.prod-card__catalog { display: inline-block; margin: 0 0 6px; font-size: var(--fs-2xs, .6875rem); font-weight: var(--weight-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--azure-700); }

/* footer-meta badge sotto al corpo (materiale/classe) */
.prod-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-xs); }

/* checkbox "Confronta" (appare al hover/focus) */
/* "Confronta": chip IN FONDO al corpo card, SEMPRE visibile (non piu' sovrapposto all'immagine/hover) */
.prod-card__compare {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-sm);
  background: transparent;
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-pill);
  padding: 4px 10px; font-size: var(--fs-2xs); color: var(--gray-700);
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.prod-card__compare input { accent-color: var(--azure-700); width: 15px; height: 15px; margin: 0; }
/* nascosto finche' JS non lo abilita: senza JS il comparatore non c'e' */
.prod-card__compare[hidden] { display: none; }
.js-compare .prod-card__compare { /* gestita da opacity sotto */ }
.prod-card:hover .prod-card__compare,
.prod-card:focus-within .prod-card__compare,
.prod-card__compare:has(:checked) { opacity: 1; }
.prod-card__compare:has(:checked) { background: var(--azure-100); border-color: var(--azure-500); color: var(--azure-900); }
.prod-card.is-comparing { border-color: var(--azure-500); box-shadow: var(--shadow-focus); }

/* ==========================================================================
   COMPARATORE — barra fluttuante + overlay tabella
   ========================================================================== */
/* barra fluttuante in basso con i prodotti scelti */
.compare-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
  background: var(--band-dark); color: #fff;
  border-top: 1px solid var(--ink-700);
  box-shadow: 0 -8px 24px -8px rgba(15,27,45,.5);
  transform: translateY(110%);
  transition: transform var(--dur-base) var(--ease);
}
.compare-bar.is-open { transform: translateY(0); }
.compare-bar__inner {
  max-width: var(--container-wide); margin: 0 auto;
  padding: var(--space-md) var(--space-base);
  display: flex; align-items: center; gap: var(--space-base); flex-wrap: wrap;
}
.compare-bar__label {
  font-family: var(--font-nav); font-weight: var(--weight-semibold);
  font-size: 14px; color: var(--fog); flex: none;
}
.compare-bar__items { display: flex; align-items: center; gap: var(--space-sm); flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.compare-bar__slot {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  background: var(--ink-800); border: 1px solid var(--ink-700);
  border-radius: var(--radius-base); padding: 6px 8px 6px 6px; max-width: 240px;
}
.compare-bar__thumb { width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm); object-fit: cover; background: var(--ink-700); }
.compare-bar__name {
  font-size: 13px; color: #fff; line-height: 1.25; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.compare-bar__remove {
  flex: none; border: 0; background: none; cursor: pointer;
  color: var(--fog); font-size: 18px; line-height: 1; padding: 0 4px;
}
.compare-bar__remove:hover { color: #fff; }
.compare-bar__actions { display: flex; align-items: center; gap: var(--space-md); flex: none; margin-left: auto; }
.compare-bar__hint { font-size: 13px; color: var(--fog); }
.compare-bar__clear { background: none; border: 0; color: var(--azure-300); cursor: pointer; font-family: var(--font-nav); font-size: 14px; text-decoration: underline; padding: 6px 4px; }
.compare-bar__clear:hover { color: #fff; }
@media (max-width: 639px) {
  .compare-bar__label { width: 100%; }
  .compare-bar__actions { width: 100%; margin-left: 0; justify-content: space-between; }
}

/* overlay confronto */
.compare-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,27,45,.55);
  display: none; padding: var(--space-lg);
  overflow-y: auto;
}
.compare-overlay.is-open { display: block; }
.compare-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: var(--container-wide); margin: var(--space-2xl) auto;
  overflow: hidden;
}
.compare-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-base);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--gray-border);
}
.compare-modal__head h2 { margin: 0; font-size: var(--fs-h2); }
.compare-modal__tools { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.compare-modal__close {
  border: 1px solid var(--gray-border); background: var(--white); cursor: pointer;
  width: var(--tap-target); height: var(--tap-target); border-radius: var(--radius-base);
  color: var(--ink-900); font-size: 22px; line-height: 1; flex: none;
}
.compare-modal__close:hover { border-color: var(--azure-500); color: var(--azure-900); }
.compare-diff-toggle { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 14px; color: var(--ink-900); cursor: pointer; }
.compare-diff-toggle input { accent-color: var(--azure-700); width: 16px; height: 16px; }
.compare-modal__scroll { overflow-x: auto; max-height: calc(100vh - 220px); }

.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.compare-table th, .compare-table td {
  text-align: left; padding: 12px var(--space-base);
  border-bottom: 1px solid var(--gray-border); vertical-align: top;
}
/* header sticky con foto+nome+codice */
.compare-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--white); border-bottom: 2px solid var(--gray-border);
  vertical-align: bottom;
}
.compare-table thead th:first-child { left: 0; z-index: 3; }
/* prima colonna (etichette riga) sticky a sinistra */
.compare-table tbody th[scope="row"] {
  position: sticky; left: 0; z-index: 1;
  background: var(--bg-tint);
  font-weight: var(--weight-semibold); color: var(--ink-900);
  width: 180px; min-width: 160px;
}
.compare-table__prod { width: 200px; min-width: 180px; }
.compare-col__media {
  display: block; width: 100%; aspect-ratio: 4/3; max-width: 180px;
  background: var(--bg-light); border-radius: var(--radius-base); overflow: hidden; margin-bottom: var(--space-sm);
}
.compare-col__media img { width: 100%; height: 100%; object-fit: contain; }
.compare-col__name { font-family: var(--font-head); font-weight: var(--weight-semibold); color: var(--ink-900); font-size: 14px; margin: 0 0 2px; display: block; }
.compare-col__name:hover { color: var(--azure-900); }
.compare-col__code { font-size: var(--fs-2xs); color: var(--gray-600); font-variant-numeric: tabular-nums; display: block; margin-bottom: var(--space-sm); }
.compare-col__remove { border: 0; background: none; color: var(--gray-600); cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0; }
.compare-col__remove:hover { color: var(--danger); }
.compare-table tbody tr:hover td, .compare-table tbody tr:hover th[scope="row"] { background: var(--azure-50); }
.compare-table tbody tr.is-same[hidden] { display: none; }
.compare-cell--na { color: var(--gray-600); }
.compare-table .badge { margin: 0; }
.compare-empty { padding: var(--space-4xl) var(--space-base); text-align: center; color: var(--gray-600); }
@media (prefers-reduced-motion: reduce) {
  .compare-bar { transition: none; }
}

/* vista LISTA (toggle griglia/lista) */
.card-grid--list { grid-template-columns: 1fr; gap: var(--space-md); }
.card-grid--list .prod-card { flex-direction: row; align-items: stretch; }
.card-grid--list .prod-card__media { width: 180px; flex: none; aspect-ratio: 4 / 3; }
.card-grid--list .prod-card__body { flex: 1 1 auto; }

/* ==========================================================================
   BADGE
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-nav);
  font-size: var(--fs-2xs); font-weight: var(--weight-semibold);
  letter-spacing: 0;
  line-height: var(--lh-ui);
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge svg { width: 14px; height: 14px; }
/* "Sterile / Conforme": verde SCURO + testo bianco (6.5:1 ✔AA) */
.badge--sterile { background: var(--success-dark); color: #fff; }
/* materiale: tono neutro azzurro */
.badge--material { background: #e8eaef; color: #3b3f49; border: 1px solid var(--gray-border); }   /* neutro grigio: distinto dal blu della Classe (in entrambi i temi) */
/* classe MDR */
.badge--class { background: var(--azure-50); color: var(--azure-900); border: 1px solid var(--azure-200); }
/* "A catalogo" (prodotto gestito bcube): verde outline, distinto dal badge Sterile pieno */
.badge--managed { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success-dark);
                  border: 1px solid color-mix(in srgb, var(--success) 42%, transparent); }
:root[data-theme="dark"] .badge--managed { color: var(--success); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge--managed { color: var(--success); } }
.prod-badges { margin: 0 0 var(--space-md); }
/* fenestrato/forato */
.badge--feature { background: var(--bg-light); color: var(--ink-900); }
/* Materiale badge: neutro anche in dark (non piu' navy come la Classe) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge--material { background:#2b323d; color:#c6cdd9; border-color:#3a434f; } }
:root[data-theme="dark"] .badge--material { background:#2b323d; color:#c6cdd9; border-color:#3a434f; }
/* avviso non bloccante (es. foto non disponibile) */
.badge--warning { background: #fff6d6; color: var(--warning-ink); }

/* ==========================================================================
   DETAIL (product page)
   ========================================================================== */
.detail { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: start; }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; gap: var(--space-xl); } }

.detail__media {
  margin: 0;
  background: var(--bg-light);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);   /* stessa elevazione della request-box: due schede coerenti */
  overflow: hidden; aspect-ratio: 4 / 3;
}
.detail__media img { width: 100%; height: 100%; object-fit: contain; }
.detail__media .photo-placeholder svg { width: 72px; height: 72px; }

/* --- PACCO: composizione componenti (miniatura + quantità + nome, per OGNI componente) al posto
       della foto, come nel catalogo ma con l'estetica del sito, SENZA barra-titolo --- */
.detail__media--pacco { aspect-ratio: auto; background: var(--bg-light); }   /* card gia' bordata/tonda/ombreggiata da .detail__media */
/* pacco: la foto e' un SEGNAPOSTO generico -> modesta e centrata, non riempie lo slot (il
   contenuto vero e' la composizione sotto). 2026-07-23. */
.detail__media--pacco-photo { display: grid; place-items: center; padding: var(--space-lg); }
.detail__media--pacco-photo img { width: auto; height: auto; max-width: 58%; max-height: 74%; opacity: .95; }
/* PACCO 2026-07-27: nello slot media la TABELLA dei componenti (Qta'|Componente|Immagine), come il
   catalogo cartaceo, al posto della foto-segnaposto. Niente aspect-ratio fisso: l'altezza la detta la
   tabella; se e' lunga scorre DENTRO la card (la pagina non scrolla in orizzontale). */
.detail__media--pacco-table { aspect-ratio: auto; padding: 0; }
/* NIENTE scroll interno: la card CRESCE con la distinta e si legge tutta d'un fiato, come sul
   catalogo cartaceo. Con un max-height le distinte lunghe scorrevano DENTRO la card (scroll
   annidato) e l'ultima riga restava tagliata a filo del bordo: sembrava contenuto troncato.
   Resta il solo scroll ORIZZONTALE di sicurezza, che su 3 colonne non scatta mai. */
/* il padding-bottom evita che l'ultima riga resti incollata al bordo della card (sembrerebbe
   troncata anche quando la distinta e' tutta visibile). */
.pacco-tbl__wrap { overflow-x: auto; padding-bottom: var(--space-sm); }
.pacco-tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pacco-tbl caption {
  caption-side: top; text-align: left;
  font-weight: var(--weight-semibold); color: var(--ink-900);
  padding: var(--space-md) var(--space-md) var(--space-sm);
}
.pacco-tbl th, .pacco-tbl td { padding: var(--space-sm) var(--space-md); text-align: left; vertical-align: middle; }
.pacco-tbl thead th {   /* intestazione ancorata: resta visibile mentre si scorre la distinta */
  position: sticky; top: 0; z-index: 1; background: var(--bg-light); color: var(--gray-600);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: var(--weight-semibold);
  border-bottom: 1px solid var(--gray-border);
}
.pacco-tbl tbody tr + tr { border-top: 1px solid var(--gray-border); }
.pacco-tbl__qty { width: 4.5rem; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pacco-tbl__name { color: var(--ink-900); }
/* colonna = miniatura + padding orizzontale: cosi' il contenuto e' esattamente 72px e la regola
   globale `.catalog-page img{max-width:100%}` non rimpicciolisce la miniatura. */
.pacco-tbl__img { width: calc(72px + var(--space-md) * 2); }
/* specificita' piu' alta di `.detail__media img` (che forzerebbe 100%/100%) */
.detail__media .pacco-tbl__img img { width: 72px; height: 72px; object-fit: contain; display: block; }
/* componente senza disegno in ERP: riquadro DISCRETO al posto della cella vuota — stessa impronta
   della miniatura, cosi' le righe restano allineate; grigio tenue, nessuna scritta, nessun'icona
   "rotta". Non e' un errore: quel pezzo semplicemente non ha immagine. */
.pacco-tbl__noimg {
  display: block; width: 72px; height: 72px; border-radius: var(--radius-sm, 8px);
  background: var(--bg-light); border: 1px dashed var(--gray-border); opacity: .55;
}
@media (max-width: 560px) {
  .pacco-tbl { font-size: .9rem; }
  .pacco-tbl th, .pacco-tbl td { padding: var(--space-xs) var(--space-sm); }
  .pacco-tbl__img { width: calc(48px + var(--space-sm) * 2); }
  .detail__media .pacco-tbl__img img { width: 48px; height: 48px; }
}
/* --- DISTINTA DEL PACCO: stessa superficie delle altre schede -----------------
   Prima il riquadro aveva un fondo piatto (--bg-light) che stonava con la madreperla
   del resto della pagina: sembrava un foglio appoggiato li'. Ora usa la stessa
   superficie cangiante delle card (--card-bg) e i separatori del sistema. --- */
:root {
  --tbl-head-bg: transparent;
  --tbl-head-fg: var(--gray-700);
  --tbl-thumb-bg: rgba(255, 255, 255, .88);
  --tbl-thumb-bd: rgba(15, 27, 45, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tbl-head-bg: transparent;
    --tbl-head-fg: var(--fog);
    --tbl-thumb-bg: rgba(255, 255, 255, .07);
    --tbl-thumb-bd: rgba(255, 255, 255, .10);
  }
}
:root[data-theme="dark"] {
  --tbl-head-bg: transparent;
  --tbl-head-fg: var(--fog);
  --tbl-thumb-bg: rgba(255, 255, 255, .07);
  --tbl-thumb-bd: rgba(255, 255, 255, .10);
}
.detail__media--pacco-table { background: var(--card-bg); }
/* Intestazione SENZA fondo proprio: e' la stessa superficie del riquadro, quindi la
   testata non legge piu' come una "striscia bianca" incollata sopra (segnalata
   dall'utente). Il velo semi-trasparente del primo tentativo, sul fondo chiaro,
   risultava comunque troppo bianco.
   COMPENSAZIONE: senza velo le etichette perdevano contrasto sulla madreperla
   (misurato 4,23:1 con --gray-600), quindi il colore passa a --gray-700 di giorno e
   --fog di notte: 5,37:1, sopra soglia, senza pero' gridare come il testo del corpo.
   ATTENZIONE se un domani il contenitore diventa scorrevole in verticale: oggi non lo
   e' (figure overflow:hidden, wrap solo overflow-x), quindi l'intestazione sticky non
   passa MAI sopra le righe. Se cambiasse, qui servirebbe di nuovo un velo opaco,
   altrimenti le righe traspaiono sotto le etichette. */
.detail__media--pacco-table .pacco-tbl thead th {
  background: var(--tbl-head-bg);
  color: var(--tbl-head-fg);
  border-bottom: 1px solid var(--card-bd);
}
/* righe separate da una linea del sistema (piu' tenue del vecchio --gray-border) */
.detail__media--pacco-table .pacco-tbl tbody tr + tr { border-top: 1px solid var(--card-bd); }
/* le miniature stanno su una piastrella neutra: i disegni tecnici (azzurro su bianco)
   restano leggibili sia sul fondo chiaro sia su quello scuro, senza dipendere dal tema. */
.detail__media--pacco-table .pacco-tbl__img img {
  background: var(--tbl-thumb-bg);
  border: 1px solid var(--tbl-thumb-bd);
  border-radius: 10px;
  padding: 4px;
}
.detail__media--pacco-table .pacco-tbl__noimg {
  background: var(--tbl-thumb-bg); border: 1px dashed var(--tbl-thumb-bd); opacity: 1;
}
/* WS3 2026-07-23: composizione pacco SOTTO la scheda, griglia ORIZZONTALE (prima era nello slot foto) */
.detail__components { max-width: 1200px; margin: var(--space-2xl, 2.5rem) auto 0; padding: 0 var(--space-base, 1rem); }
.detail__components-title { font-size: 1.25rem; font-weight: var(--weight-bold, 700); margin: 0 0 var(--space-md, 1rem); }
.detail__components .pacco-bom { max-height: none; overflow: visible; padding: 0; }
.detail__components .pacco-bom__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); }
.pacco-bom { max-height: 70vh; overflow-y: auto; padding: var(--space-xs); }
.pacco-bom__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.pacco-bom__item {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tint); border: 1px solid var(--card-bd); border-radius: var(--radius-base);
  font-size: var(--fs-sm); color: var(--text);
}
.pacco-bom__thumb {
  flex: 0 0 auto; width: 50px; height: 50px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--card-bd); border-radius: var(--radius-sm); padding: 4px;
}
.pacco-bom__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pacco-bom__thumb--empty { background: var(--bg-light); }
.pacco-bom__qty { flex: 0 0 auto; min-width: 2rem; text-align: center; }
.pacco-bom__qty .num { color: var(--ink-900); font-weight: var(--weight-bold); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pacco-bom__descr { min-width: 0; line-height: var(--lh-snug); color: var(--text); }

/* CARD di un pacco senza foto: STESSA composizione, compatta (immagine + q.tà + nome per ognuno),
   cap a poche righe + "+N altri" -> card di DIMENSIONE UNIFORME (4:3 come le altre). */
.prod-card__media--pacco { background: var(--bg-light); }   /* eredita aspect-ratio 4/3 + overflow da .prod-card__media */
.pacco-mini { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.pacco-mini li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1.15; color: var(--text); }
.pacco-mini__thumb { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; background: #fff; border: 1px solid var(--gray-border); border-radius: 4px; }
.prod-card__media--pacco .pacco-mini__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; box-sizing: border-box; }
.pacco-mini__thumb--empty { background: var(--bg-light); }
.pacco-mini__q { flex: 0 0 auto; min-width: 1rem; text-align: center; font-weight: var(--weight-bold); color: var(--ink-900); }
.pacco-mini__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pacco-mini__more { font-size: 11px; color: var(--muted); font-style: italic; padding-left: 28px; }
.prod-card:hover .prod-card__media--pacco .pacco-mini__thumb img { transform: none; }

/* Componenti CLICCABILI (scheda pacco) + pannello "componente selezionato" a destra */
.pacco-bom__grid li { display: flex; }
button.pacco-bom__item { width: 100%; font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
button.pacco-bom__item:hover { border-color: var(--accent2, #357df9); }
.pacco-bom__item.is-sel { border-color: var(--accent2, #357df9); box-shadow: 0 0 0 2px var(--accent2, #357df9) inset; }
/* componente EVIDENZIATO perché corrisponde al filtro "Tipologia specifica" (?evid=).
   transition:none -> il colore/anello si applicano subito (col transition restavano "fermi"). */
.pacco-bom__item.is-evid { border-color: #e2a03f; box-shadow: 0 0 0 2px #e2a03f inset;
  background: rgba(226,160,63,.16); transition: none; }
.pacco-bom__item:focus-visible { outline: 2px solid var(--accent2, #357df9); outline-offset: 2px; }
.detail__compview { margin: var(--space-xs) 0 var(--space-sm); }
.detail__compview .eyebrow { margin: 0 0 var(--space-sm); }
.detail__comp-media { width: 132px; height: 132px; background: #fff; border: 1px solid var(--gray-border);
  border-radius: 14px; display: grid; place-items: center; padding: 12px; margin: 0 0 var(--space-md); font: inherit; }
.detail__comp-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.detail__comp-name { margin: 0 0 4px; font-size: 1.3rem; line-height: 1.2; text-wrap: balance; }
.detail__comp-code { color: var(--muted); margin: 0 0 var(--space-sm); font-size: .95rem; }
.detail__comp-specs { margin: var(--space-sm) 0 0; }
.detail__comp-spec { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--card-bd); }
.detail__comp-spec dt { color: var(--muted); margin: 0; }
.detail__comp-spec dd { margin: 0; font-weight: var(--weight-semibold); text-align: right; }
.detail__comp-hint { color: var(--muted); font-size: .85rem; font-style: italic; margin: var(--space-md) 0 0; }

/* immagini ingrandibili + lightbox (clic sull'immagine -> ingrandimento) */
.is-zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 4vh 4vw;
  background: rgba(6,12,22,.88); }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; background: #fff; border-radius: 12px;
  padding: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.lightbox__close { position: absolute; top: 14px; right: 18px; width: 46px; height: 46px; border: 0;
  border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox__close:hover { background: rgba(255,255,255,.28); }
@media (prefers-reduced-motion: no-preference){ .lightbox { animation: lb-in .16s ease-out; } }
@keyframes lb-in { from { opacity: 0 } to { opacity: 1 } }

/* --- Teli: aree cliccabili sui componenti + tooltip (immagine pulita a riposo) --- */
.detail__media--telo {
  aspect-ratio: auto;            /* segue l'aspetto reale del telo (niente lettera-box) */
  overflow: visible;             /* i tooltip possono sporgere dal riquadro */
  background: #fff;
  display: block;
}
.telo-figure { position: relative; display: block; line-height: 0; }
.telo-figure img { width: 100%; height: auto; object-fit: initial; display: block; }
.telo-hotspots { position: absolute; inset: 0; }
/* hotspot: invisibile a riposo (sembra una foto); si rivela solo su hover/tap */
.telo-hotspot {
  position: absolute; padding: 0; margin: 0;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 6px; z-index: 1;
  transition: background .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
/* evidenziazione che SEGUE la forma reale (clip-path): tinta + glow di contorno */
.telo-hotspot:hover,
.telo-hotspot:focus-visible {
  background: rgba(53, 125, 249, .20);
  filter: drop-shadow(0 0 2px rgba(53, 125, 249, .9));
  z-index: 5; outline: none;
}
.telo-hotspot:focus { z-index: 6; outline: none; }
/* CORPO del telo: si evidenzia pure lui (tinta piu' tenue: area grande) e resta SOTTO i componenti */
.telo-hotspot--body { border-radius: 0; }
.telo-hotspot--body:hover,
.telo-hotspot--body:focus-visible {
  background: rgba(53, 125, 249, .10); filter: none; z-index: 1;
}
/* corpo a piena immagine (teli commerciali senza geometria dei componenti) */
.telo-hotspot--full { inset: 0; left: 0; top: 0; width: 100%; height: 100%; }
/* tooltip "ben fatto": card chiara, ombra, freccia, nome in evidenza + materiale */
.telo-tip {
  /* FRATELLO del bottone: left/top inline = centro-x e bordo dell'hotspot (il transform lo colloca) */
  position: absolute;
  transform: translate(-50%, calc(-100% - 9px));   /* default: sopra l'area */
  min-width: 8rem; max-width: 15rem;
  padding: 8px 11px; border-radius: 10px;
  background: #fff; color: var(--ink, #1f2430);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 10px 28px rgba(15, 28, 60, .22);
  text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .14s ease; z-index: 20;
}
.telo-tip--below { transform: translate(-50%, 9px); }             /* sotto (componenti in alto) */
.telo-tip--center { transform: translate(-50%, -50%); }           /* centrato (corpo) */
.telo-tip__name {
  display: block;
  font: 700 var(--fs-xs, 16px)/1.25 var(--font-nav);
  color: var(--brand-900, #12376e);
}
.telo-tip__mat {
  display: block; margin-top: 2px;
  font: 500 var(--fs-2xs, 14px)/1.3 "Inter", system-ui, sans-serif;
  color: var(--gray-700, #4a4d5c);
}
.telo-tip::after {   /* freccia verso il basso (tip sopra l'area) */
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: #fff;
  filter: drop-shadow(0 2px 1px rgba(15, 28, 60, .10));
}
.telo-tip--below::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: #fff;
  filter: drop-shadow(0 -2px 1px rgba(15, 28, 60, .10));
}
.telo-tip--center::after { display: none; }
/* tooltip SOLO al click/tocco (focus del bottone adiacente). L'hover evidenzia soltanto. */
.telo-hotspot:focus + .telo-tip { opacity: 1; visibility: visible; }
.telo-hint {
  margin: var(--space-sm) 0 0;
  font: 500 var(--fs-2xs, 14px)/1.4 "Inter", system-ui, sans-serif;
  color: var(--gray-700, #4a4d5c); text-align: center;
}

/* --- Vista piccola (scheda): sembra una FOTO pulita; niente evidenziazione qui.
   L'evidenziazione dei materiali/componenti avviene SOLO nell'anteprima ingrandita
   (che si apre al click). --- */
.has-js .detail__media--telo .telo-figure:not(.is-modal) { cursor: zoom-in; }
.has-js .detail__media--telo .telo-figure:not(.is-modal) .telo-hotspots { display: none; }
.has-js .detail__media--telo .telo-figure:not(.is-modal)::after {
  content: ""; position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(31, 36, 48, .82) center/18px 18px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M11 8v6M8 11h6M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3); pointer-events: none;
  opacity: .9; transition: transform .12s ease, opacity .12s ease;
}
.has-js .detail__media--telo .telo-figure:not(.is-modal):hover::after,
.has-js .detail__media--telo .telo-figure:not(.is-modal):focus-visible::after { transform: scale(1.08); opacity: 1; }
.has-js .detail__media--telo .telo-figure:focus-visible { outline: 2px solid var(--brand-900, #12376e); outline-offset: 3px; }

/* --- Modale/lightbox anteprima telo --- */
body.telo-modal-open { overflow: hidden; }
.telo-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 4vw, 40px);
  background: rgba(15, 23, 42, .72);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: teloFade .15s ease;
}
@keyframes teloFade { from { opacity: 0; } to { opacity: 1; } }
.telo-modal__box {
  position: relative; background: #fff;
  border-radius: 16px; padding: clamp(16px, 3vw, 26px);
  max-width: min(920px, 94vw); max-height: 94vh;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
  display: flex; flex-direction: column; overflow: visible;
}
/* × sempre ben visibile: cerchio scuro con × bianca sul box (sempre bianco), a prescindere dal tema */
.telo-modal__close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(31, 36, 48, .88); color: #fff;
  font: 700 24px/1 system-ui, sans-serif; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  transition: background .12s ease, transform .12s ease;
}
.telo-modal__close:hover, .telo-modal__close:focus-visible { background: #1f2430; transform: scale(1.06); outline: none; }
.telo-modal .telo-figure.is-modal { cursor: default; max-height: 80vh; display: flex; }
.telo-modal .telo-figure.is-modal img { width: auto; max-width: 100%; max-height: 80vh; margin: auto; }
/* ingrandimento = SOLO immagine piu' grande, senza aree/tooltip dei componenti (richiesta utente) */
.telo-modal .telo-figure.is-modal .telo-hotspots { display: none; }
.telo-modal__hint {
  margin: 12px 0 0; text-align: center;
  font: 500 var(--fs-xs, 15px)/1.4 "Inter", system-ui, sans-serif;
  color: var(--gray-700, #4a4d5c);
}

/* gallery thumbnail (gallery PDP) */
.gallery__thumbs { display: flex; gap: var(--space-sm); margin-top: var(--space-md); flex-wrap: wrap; }
.gallery__thumb {
  width: 72px; height: 72px; flex: none;
  border: 1px solid var(--gray-border); border-radius: var(--radius-base);
  overflow: hidden; background: var(--bg-light); cursor: pointer; padding: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--azure-500); box-shadow: var(--shadow-focus); }

.detail__title { font-size: var(--fs-h1); font-weight: var(--weight-bold); margin: 0 0 var(--space-sm); }
.detail__code { font-size: var(--fs-sm); color: var(--gray-600); margin: 0 0 var(--space-base); font-variant-numeric: tabular-nums; }

/* request-box (buy-box B2B) */
/* Richiesta utente: "stessa sfumatura pure nel div dove sono indicati nome prodotto,
   codice e confezionamento". La colonna destra non aveva NESSUN fondo (solo bordo):
   accanto alla distinta del pacco, che ora ha la superficie madreperla, sembravano due
   materiali diversi. Ora usa la stessa --card-bg di tabella, card e altre superfici.
   COMPENSAZIONE: sul pannello madreperla due testi piccoli restavano sotto soglia
   (misurato: occhiello 3,82:1, codice 4,44:1). Passati a --petrol-deep e --gray-700,
   token di sistema gia' theme-aware: stessa famiglia di colore, solo piu' scuri. */
.request-box {
  background: var(--card-bg);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}
.request-box .eyebrow { color: var(--petrol-deep); }
.request-box .detail__code { color: var(--gray-700); }
.request-box .badge { margin-right: 6px; }
/* buy-box: stacca il codice dai badge (il reset dei <p> nella box li lasciava appiccicati) */
.request-box .detail__code { margin-bottom: var(--space-sm); }
.usp-list { list-style: none; margin: var(--space-base) 0; padding: 0; display: grid; gap: var(--space-sm); }
.usp-list li { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--fs-sm); }
.usp-list svg { flex: none; width: 18px; height: 18px; color: var(--azure-700); margin-top: 2px; }

/* Descrizione prodotto (sostituisce la 'In sintesi') + lista Caratteristiche */
.detail__desc { margin: var(--space-base) 0 var(--space-lg); color: var(--text); font-size: var(--fs-sm); line-height: 1.6; max-width: 66ch; }
/* blocco "A cosa serve" (info generiche per tipo prodotto) — theme-aware (chiaro/scuro).
   Classe DEDICATA: prima era .detail__info, condivisa (per errore) con la COLONNA destra
   -> la colonna ereditava margine/padding/bordo e faceva partire la card 31px piu' in basso
   dell'immagine (disallineamento). Ora la colonna e' .detail__col (grid cell nuda). */
.detail__usecase { margin: var(--space-base) 0 var(--space-lg); padding: 14px 16px; background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--radius-lg, 12px); }
.detail__usecase-title { margin: 0 0 6px; font-family: var(--font-nav, "Space Grotesk"), system-ui, sans-serif; font-size: var(--fs-sm, 17px); font-weight: var(--weight-bold, 700); color: var(--ink-900, #12376e); }
.detail__usecase p { margin: 0; color: var(--text); font-size: var(--fs-xs, 16px); line-height: 1.55; }
/* etichetta distintiva sulla card (prodotti somiglianti: cosa cambia) */
.prod-card__distintivo { margin: 3px 0 0; font-size: var(--fs-2xs, 14px); line-height: 1.3; font-weight: var(--weight-semibold, 600); color: var(--azure-700, #2f6bd4); }
.prod-card__distintivo::before { content: "+ "; font-weight: 700; }
/* blocco "Formati disponibili" (varianti di confezione accorpate) */
.detail__formati { margin: var(--space-base) 0; padding-top: var(--space-base); border-top: 1px solid var(--gray-border); }
.detail__formati-title { font-family: var(--font-nav, "Space Grotesk"), system-ui, sans-serif; font-size: var(--fs-2xs, 14px); font-weight: var(--weight-semibold, 600); letter-spacing: .03em; text-transform: uppercase; color: var(--gray-700, #4a4d5c); margin: 0 0 var(--space-sm); }
.detail__formati-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.detail__formati-list li { display: flex; justify-content: space-between; gap: var(--space-md); align-items: baseline; font-size: var(--fs-xs, 16px); color: var(--text); padding: 7px 0; border-bottom: 1px solid var(--gray-border); }
.detail__formati-list li:last-child { border-bottom: 0; }
.detail__formato-code { color: var(--gray-700, #4a4d5c); font-size: var(--fs-2xs, 14px); white-space: nowrap; }
.detail__features { margin: 0 0 var(--space-xl); }
.detail__features h3 { margin: 0 0 var(--space-sm); }
.detail__features-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.detail__features-list li { position: relative; padding-left: 18px; color: var(--text); line-height: 1.5; }
.detail__features-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--azure-500); }

/* ==========================================================================
   GLOSSARIO SIMBOLI ISO 15223-1 (pagina /simboli)
   ========================================================================== */
.catalog-page--page .catalog-main { padding: var(--space-3xl) 0 var(--space-4xl); }
.page-head { max-width: 760px; margin: 0 0 var(--space-2xl); }
.page-head h1 { margin: var(--space-xs) 0 0; }
.page-head__lead { color: var(--gray-600); font-size: 17px; line-height: 1.6; margin: var(--space-sm) 0 0; }
.sym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: var(--space-base); }
.sym { display: flex; gap: var(--space-base); align-items: flex-start; background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--radius-lg); box-shadow: var(--card-sh); padding: var(--space-lg); }
.sym__icon { flex: none; width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--card-bd); border-radius: var(--radius-base); color: var(--azure-900); background: var(--pill-bg); }
.sym__svg { width: 42px; height: 42px; }
/* simbolo ISO 15223-1 ufficiale (PNG estratto dallo standard) reso come maschera:
   prende currentColor (azure-900 / adatta al tema) come i simboli disegnati. */
.sym__svg--iso { display: inline-block; background: currentColor;
  -webkit-mask: var(--sym) center / contain no-repeat; mask: var(--sym) center / contain no-repeat; }
/* intestazione di gruppo (5.1 … 5.7) nel glossario completo */
.sym-group { margin: var(--space-2xl) 0 var(--space-base); font-family: var(--font-head); font-size: 20px; font-weight: var(--weight-semibold); color: var(--ink-900); }
.sym-group:first-of-type { margin-top: var(--space-sm); }
/* badge "U.Jet" sui simboli effettivamente usati sulle etichette + evidenziazione scheda */
.sym__ujet { display: inline-block; margin-left: 8px; padding: 2px 7px; font-family: var(--font-nav); font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .04em; color: #fff; background: var(--azure-900); border-radius: var(--radius-pill); vertical-align: middle; }
.sym--ujet { border-color: var(--azure-500); }
/* striscia "Simbologia in etichetta" sulle schede prodotto (stessi pittogrammi ISO del glossario) */
.prod-syms { margin-top: var(--space-xl); }
.prod-syms__list { list-style: none; margin: var(--space-sm) 0 var(--space-sm); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-base); }
.prod-syms__list li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--azure-900); }
.prod-syms .sym__svg--iso { width: 38px; height: 38px; }
.prod-syms__lab { font-size: 11px; line-height: 1.25; color: var(--gray-600); }
.sym__name { margin: 0 0 4px; font-size: 16px; }
.sym__desc { margin: 0; color: var(--gray-700); font-size: var(--fs-xs); line-height: 1.5; }
.sym__ref { display: inline-block; margin-top: var(--space-xs); font-size: var(--fs-2xs); color: var(--gray-600); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
@media (max-width: 480px) { .sym-grid { grid-template-columns: 1fr; } }
.spec-table__gloss { margin: var(--space-sm) 0 0; font-size: var(--fs-xs); }
.spec-table__gloss a { color: var(--azure-900); text-decoration: none; font-weight: var(--weight-medium); }
.spec-table__gloss a:hover { text-decoration: underline; }

/* FAQ — accordion <details> (pagina /faq) */
.faq-list { max-width: 760px; display: grid; gap: var(--space-sm); }
.faq-item { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.faq-item__q { cursor: pointer; padding: var(--space-base) var(--space-lg); font-family: var(--font-nav); font-weight: var(--weight-semibold); font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-base); }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after { content: "+"; font-size: 22px; color: var(--azure-700); line-height: 1; flex: none; }
.faq-item[open] .faq-item__q::after { content: "\2212"; }
.faq-item__a { padding: 0 var(--space-lg) var(--space-base); color: var(--gray-700); line-height: 1.6; }
.faq-item__a p { margin: 0; }

.class-badge {
  display: inline-block;
  font-size: 13px; font-weight: var(--weight-semibold);
  color: var(--azure-900);             /* 8.78:1 su azure-100 ✔ (era primary-dark) */
  background: var(--azure-100);
  border-radius: var(--radius-pill);
  padding: 5px 14px; margin-bottom: var(--space-lg);
}

/* ---- Buttons / CTA -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  font-family: var(--font-nav);
  font-size: 16px; font-weight: var(--weight-semibold);
  min-height: var(--tap-target);
  border-radius: var(--radius-pill);   /* soft (B): button a pillola */
  padding: 12px 26px;
  cursor: pointer; border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
/* primario: gradiente CANGIANTE blu->petrolio coerente coi titoli (white AA su tutti gli stop) */
.btn--primary { background: var(--btn-grad); color: #fff; }
.btn--primary:hover { filter: brightness(1.05); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--primary:active { transform: translateY(0); }
.btn--primary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* secondario ghost */
.btn--ghost { background: var(--pill-bg); color: var(--azure-900); border-color: var(--card-bd); }
.btn--ghost:hover { border-color: var(--azure-500); color: var(--azure-900); text-decoration: none; }
.btn--ghost:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* su fondo navy/scuro: contorno chiaro */
.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--on-dark:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn--lg { font-size: 17px; padding: 14px 28px; }

/* CTA a coppia (home + fasce hero-band di tutte le pagine): i 2 bottoni a LARGHEZZA UGUALE
   (bordi allineati) = larghezza del più largo; impilati a tutta larghezza su schermo stretto. */
.catalog-page--home .home-hero__cta,
.catalog-page--home .home-final__cta,
.hero-band__cta { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: fit-content; }
@media (max-width: 560px) {
  .catalog-page--home .home-hero__cta,
  .catalog-page--home .home-final__cta,
  .hero-band__cta { grid-auto-flow: row; width: auto; }
}
/* service: la coppia CTA è centrata → centra anche la griglia a larghezza fissa */
.service-cta-band .hero-band__cta { margin-inline: auto; }

.detail__cta { margin-bottom: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-md); }
/* Documenti / Download — scheda tecnica PDF o invito al contatto */
.detail__docs { margin: 0 0 var(--space-xl); padding-top: var(--space-base); border-top: 1px solid var(--gray-border); }
.detail__docs-title { font-family: var(--font-nav); font-size: var(--fs-2xs); font-weight: var(--weight-semibold); letter-spacing: .03em; text-transform: uppercase; color: var(--gray-700); margin: 0 0 var(--space-sm); }
.detail__docs-request { color: var(--azure-900); text-decoration: none; font-weight: var(--weight-medium); }
.detail__docs-request:hover { text-decoration: underline; }
/* Confezionamento (buy-box): pezzi per cartone + validita', stile coerente con Documenti */
.detail__pack { margin: 0 0 var(--space-xl); padding-top: var(--space-base); border-top: 1px solid var(--gray-border); }
.detail__pack-title { font-family: var(--font-nav); font-size: var(--fs-2xs); font-weight: var(--weight-semibold); letter-spacing: .03em; text-transform: uppercase; color: var(--gray-700); margin: 0 0 var(--space-sm); }
.detail__pack-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.detail__pack-list li { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-xs); color: var(--text); }
.detail__pack-list svg { width: 18px; height: 18px; flex: none; color: var(--azure-700); }
.detail__pack-list b { color: var(--ink-900); font-weight: var(--weight-semibold); }
/* Mobile: i due CTA a tutta larghezza, impilati (la ghost non si perde) */
@media (max-width: 639px) {
  .detail__cta { flex-direction: column; align-items: stretch; }
  .detail__cta .btn { width: 100%; justify-content: center; }
}

/* ---- Info blocks ---------------------------------------------------------- */
.info-block { margin-bottom: var(--space-xl); }
.info-block__title {
  font-family: var(--font-head);
  font-size: 17px; font-weight: var(--weight-semibold); color: var(--ink-900);
  margin: 0 0 var(--space-sm); padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--gray-border);
}
.info-block__list { margin: 0; padding-left: var(--space-lg); }
.info-block__list li { margin-bottom: var(--space-xs); }

/* ---- Tabella specifiche normalizzata (colonna singola, righe alternate) --- */
/* tabella spec = card arrotondata coerente con le altre schede della PDP */
.spec-table-wrap { border: 1px solid var(--gray-border); border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 var(--space-xl); background: var(--card-bg); }
.spec-table { width: 100%; border-collapse: collapse; margin: 0; font-size: var(--fs-sm); }
.spec-table caption {
  text-align: left;
  font-family: var(--font-head); font-weight: var(--weight-semibold);
  font-size: 17px; color: var(--ink-900);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-bottom: 1px solid var(--gray-border);
}
.spec-table th, .spec-table td { text-align: left; padding: 10px var(--space-md); vertical-align: top; }
.spec-table th { width: 40%; font-weight: var(--weight-semibold); color: var(--ink-900); }
.spec-table td { color: var(--text); }
.spec-table td .num { color: var(--ink-900); }
.spec-table tr:nth-child(even) { background: var(--bg-tint); }
.spec-table__section th {
  background: var(--azure-50); color: var(--azure-900);
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-2xs);
}

/* ---- Related -------------------------------------------------------------- */
.related { margin-top: var(--space-4xl); }
.related__more { margin-top: var(--space-lg); }

/* ==========================================================================
   PHOTO PLACEHOLDER
   ========================================================================== */
.photo-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-sm);
  width: 100%; height: 100%;
  background: var(--bg-light);
  color: var(--gray-600);
  text-align: center; padding: var(--space-base);
}
.photo-placeholder svg { width: 48px; height: 48px; color: var(--azure-300); opacity: .8; }
.photo-placeholder span { font-size: var(--fs-2xs); }

/* ==========================================================================
   PDF LIST
   ========================================================================== */
.pdf-list { margin-top: var(--space-4xl); }   /* stacca i "Cataloghi PDF" dalle tessere categoria sopra */
.pdf-list__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); max-width: 720px; }
.pdf-link {
  display: flex; align-items: center; gap: var(--space-md);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-base);
  padding: var(--space-md) var(--space-base);
  color: var(--ink-900); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pdf-link:hover { border-color: var(--azure-500); box-shadow: var(--shadow-sm); text-decoration: none; transform: translateY(-1px); }
.pdf-link svg { flex: none; width: 28px; height: 28px; color: var(--azure-700); }
.pdf-link__title { font-weight: var(--weight-semibold); }
.pdf-link__size { color: var(--gray-600); font-size: var(--fs-2xs); margin-left: auto; }

/* ==========================================================================
   CERTIFICATE CARD (pagina certificati)
   ========================================================================== */
.cert-card {
  display: flex; flex-direction: column; gap: var(--space-sm);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
}
.cert-card__icon { width: 40px; height: 40px; color: var(--azure-700); }
.cert-card h3 { font-size: 18px; margin: 0; }
.cert-card__meta { font-size: var(--fs-2xs); color: var(--gray-600); margin: 0; }

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty-state { text-align: center; padding: var(--space-4xl) var(--space-base); color: var(--gray-600); }
.empty-state__title { font-size: 20px; font-weight: var(--weight-semibold); color: var(--ink-900); margin: 0 0 var(--space-sm); }
.empty-state__text { margin: 0 0 var(--space-lg); }
.empty-state__cta { display: inline-block; margin-top: var(--space-sm); }

/* A3 — flusso continuo tra le pagine del menu: separatore fra una pagina e la
   successiva appesa, e sentinella invisibile che innesca il caricamento. */
.flow-page { border-top: 1px solid var(--card-bd); }
.flow-sentinel { width: 100%; height: 1px; pointer-events: none; }

/* Rivelazione "a scacchiera": la foto si compone da tessere che sfumano in onda
   diagonale. Overlay generato da site-ui.js; senza JS / reduced-motion la foto e'
   piena da subito (nessuna tessera). Le tessere sono del colore del riquadro cosi'
   sfumando lasciano emergere l'immagine. */
.has-media-reveal { position: relative; overflow: hidden; }   /* assicura clip+posizionamento per l'overlay tessere */
.media-reveal__grid { position: absolute; inset: 0; z-index: 2; display: grid; pointer-events: none; }
.media-reveal__tile { background: var(--bg-light); opacity: 1; transform: scale(1.04); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.has-media-reveal.is-revealed .media-reveal__tile { opacity: 0; transform: scale(1); }
/* Scacchiera sugli SFONDI grandi (section--bg / hero): tessere DIETRO il testo (z-index 0,
   sopra foto+velo ma sotto il contenuto) e scure come la sezione. */
.section--bg .media-reveal__grid, .media-hero .media-reveal__grid { z-index: 0; }
.section--bg .media-reveal__tile, .media-hero .media-reveal__tile { background: var(--ink-900); }

/* --- Hover: sollevamento morbido sulle card informative --------------------
   (.cat-card / .prod-card hanno gia' il proprio hover). */
.cert-card, .doc-card, .facility-card, .contact-card {
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cert-card:hover, .doc-card:hover, .facility-card:hover, .contact-card:hover {
  transform: translateY(-4px); box-shadow: var(--card-sh-h);
}
@media (hover: none) {
  .cert-card:hover, .doc-card:hover, .facility-card:hover, .contact-card:hover { transform: none; box-shadow: none; }
}

/* --- Parallax leggero: la foto di sfondo delle sezioni scure scorre piu' lenta.
   Il transform e' guidato da site-ui.js; qui solo l'hint di performance. */
.js-motion .section--bg__img { will-change: transform; }

/* --- Count-up: nessuno stile particolare, i .num restano invariati (JS aggiorna il testo). */

/* --- Auto-reveal: entrata morbida (fade-up) di testi/blocchi allo scroll su TUTTE
   le pagine. site-ui.js aggiunge .autorise SOLO agli elementi sotto la piega (nessun
   flash) e .is-in quando entrano in vista. Reduced-motion / no-JS -> tutto visibile. */
.js-motion .autorise { opacity: 0; transform: translateY(30px); transition: opacity .55s var(--ease), transform .6s cubic-bezier(.22,.9,.3,1); }
.js-motion .autorise.is-in { opacity: 1; transform: none; }
/* varianti "PowerPoint" (direzione/effetto) assegnate da site-ui.js per varieta' */
.js-motion .autorise--left  { transform: translateX(-52px); }
.js-motion .autorise--right { transform: translateX(52px); }
.js-motion .autorise--zoom  { transform: scale(.84); }
.js-motion .autorise--rise  { transform: translateY(30px) scale(.95); }
.js-motion .autorise--down  { transform: translateY(-28px); }
.js-motion .autorise.is-in.autorise--left, .js-motion .autorise.is-in.autorise--right,
.js-motion .autorise.is-in.autorise--zoom, .js-motion .autorise.is-in.autorise--rise,
.js-motion .autorise.is-in.autorise--down { transform: none; }

/* --- Transizione TEMA: morph cromatico DOLCE (armonioso, nessun movimento della pagina).
   site-ui.js aggiunge .theme-morph subito prima del cambio: tutti i colori sfumano tra le
   due modalita'. Reduced-motion -> cambio istantaneo (la classe non viene aggiunta). */
html.theme-morph, html.theme-morph *, html.theme-morph *::before, html.theme-morph *::after {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease,
              fill .6s ease, stroke .6s ease, box-shadow .6s ease, outline-color .6s ease !important;
}

/* ==========================================================================
   SKELETON (stato di caricamento)
   ========================================================================== */
.skeleton { position: relative; overflow: hidden; background: var(--bg-light); border-radius: var(--radius-base); }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.3s infinite;
}
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }

/* ==========================================================================
   FOOTER (shell) — navy
   ========================================================================== */
.site-footer {
  background: var(--band-surface);
  color: var(--band-muted);
  border-top: 1px solid var(--band-line);
  margin-top: var(--space-4xl);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-base);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-2xl);
}
/* footer: regole responsive spostate DOPO le regole base (vedi sotto),
   cosi' vincono per ordine di cascata a parita' di specificita' */
.site-footer__brand img { width: 120px; height: auto; }
.site-footer__vat { color: var(--band-muted); font-size: var(--fs-2xs); margin: var(--space-sm) 0 0; }
.site-footer h4 {
  color: var(--band-eyebrow); font-family: var(--font-head);
  font-size: 1.1rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .07em;
  margin: 0 0 var(--space-md);
}
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.site-footer__nav a, .site-footer__contact a { color: var(--band-link); font-size: var(--fs-xs); }
.site-footer__nav a:hover, .site-footer__contact a:hover { color: var(--band-link); text-decoration: underline; }
.site-footer__contact { display: grid; gap: var(--space-sm); font-size: var(--fs-xs); color: var(--band-muted); }
/* trust mark (loghi certificazioni) */
.site-footer__certs { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-top: var(--space-md); }
.site-footer__certs img { height: 40px; width: auto; opacity: .9; }

.site-footer__bar {
  border-top: 1px solid var(--band-line);
  text-align: center;
  padding: var(--space-base);
  font-size: var(--fs-2xs); color: var(--band-muted);
}
.site-footer__bar p { margin: 0; }
.site-footer__bar a { color: var(--band-link); }
.site-footer__bar .site-footer__legal { margin-top: var(--space-xs); }

/* --- footer RESPONSIVE (dopo le regole base per vincere sulla cascata) --- */
/* tablet: brand a tutta larghezza (banner) + 3 colonne link compatte */
@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl) var(--space-lg); }
  .site-footer__brand { grid-column: 1 / -1; }
  /* footer catalogo: se c'e' una sola nav, occupa tutta la riga (niente colonna vuota) */
  .site-footer__nav:only-of-type { grid-column: 1 / -1; }
}
/* mobile: brand e contatti a tutta larghezza, i due menu AFFIANCATI -> footer piu' corto */
@media (max-width: 560px) {
  .site-footer { margin-top: var(--space-2xl); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-xl); padding: var(--space-xl) var(--space-base); }
  .site-footer__brand { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
  .site-footer__brand img { width: 84px; }
  .site-footer__brand .site-footer__vat { margin: 0; }
  .site-footer__contact { grid-column: 1 / -1; }
  .site-footer h4 { margin-bottom: var(--space-xs); font-size: 1rem; }
  .site-footer__nav ul { gap: var(--space-xs); }
}

/* ==========================================================================
   MOTION — reveal on scroll (richiede JS che aggiunge .is-visible)
   visibile by default (no-JS / reduced-motion); JS nasconde-e-rivela.
   ========================================================================== */
.reveal { opacity: 1; transform: none; }
.js-motion .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js-motion .reveal.is-visible { opacity: 1; transform: none; }
/* cascata: aggiungere style="--reveal-delay: ..." o classi a step */
.js-motion .reveal[data-delay="1"] { transition-delay: 60ms; }
.js-motion .reveal[data-delay="2"] { transition-delay: 120ms; }
.js-motion .reveal[data-delay="3"] { transition-delay: 180ms; }

/* ==========================================================================
   CATALOGO — INDICE: intro ricca + ricerca prominente
   ========================================================================== */
.catalog-intro {
  padding: var(--space-lg) 0 var(--space-2xl);
  border-bottom: 1px solid var(--gray-border);
  margin-bottom: var(--space-2xl);
}
.catalog-intro h1 { font-size: var(--fs-hero); font-weight: var(--weight-bold); margin: 0 0 var(--space-md); }
.catalog-intro__lead { color: var(--gray-600); font-size: 18px; max-width: 64ch; margin: 0 0 var(--space-lg); }
.catalog-intro__stats { display: flex; flex-wrap: wrap; gap: var(--space-xl); }
.catalog-intro__stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 14px; color: var(--gray-600); font-family: var(--font-nav);
}
.catalog-intro__stat .num { font-size: 22px; font-weight: var(--weight-bold); color: var(--azure-900); }
/* CTA "Scarica il catalogo (PDF)": azione secondaria, sotto le statistiche (la primaria e' la ricerca) */
.catalog-intro__actions { margin-top: var(--space-lg); }
.catalog-intro__cta svg { flex: none; width: 18px; height: 18px; color: var(--azure-700); }

/* ricerca prominente (indice) */
.search--hero { margin-bottom: var(--space-3xl); }
.search--hero .search__bar { max-width: 720px; }
.search__icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--gray-600); pointer-events: none; display: inline-flex;
}
.search__icon svg { width: 20px; height: 20px; }
.search__input--hero { padding: 16px 44px 16px 46px; font-size: 17px; border-radius: var(--radius-lg); }

/* ==========================================================================
   CATALOGO — CATEGORIA: layout 2 colonne + filtri/toolbar
   ========================================================================== */
.catalog-results { min-width: 0; }
.filters__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.filters__head-actions { display: flex; align-items: center; gap: var(--space-sm); }
.filters__close { display: none; }
@media (max-width: 1023px) {
  .filters[data-drawer].is-open .filters__head { position: sticky; top: 0; background: var(--white); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--gray-border); z-index: 1; }
  .filters[data-drawer].is-open .filters__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    border: 1px solid var(--gray-border); border-radius: var(--radius-base);
    background: var(--white); color: var(--azure-900); font-size: 28px; line-height: 1; cursor: pointer;
  }
  .filters[data-drawer].is-open .filters__close:hover { border-color: var(--azure-500); }
}
.filters__clearbtn { padding: 6px 12px; min-height: 0; font-size: 13px; }

.toolbar--category {
  align-items: center;
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-base);
  background: var(--card-bg);
  margin-top: 0;
}
.toolbar__sort { display: inline-flex; align-items: center; gap: var(--space-sm); }
.toolbar__count { margin-left: auto; }
@media (max-width: 1023px) { .toolbar__count { margin-left: 0; width: 100%; } }

/* chip dei filtri attivi (sopra la griglia) */
.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-base) 0; }
.chip--clearall {
  background: none; border: 0; color: var(--azure-900);
  text-decoration: underline; padding: 6px 8px; font-weight: var(--weight-semibold);
}
.chip--clearall:hover { color: var(--azure-700); }

/* ==========================================================================
   PDP — gallery a sinistra / request-box a destra
   ========================================================================== */
.detail__gallery { position: sticky; top: 84px; }
@media (max-width: 900px) { .detail__gallery { position: static; } }
.detail__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-base); }
.detail__badges:empty { display: none; }
/* micro-fiducia nella buy-box (punto di decisione del buyer) */
.detail__trust { list-style: none; margin: var(--space-lg) 0 0; padding: var(--space-base) 0 0; border-top: 1px solid var(--gray-border); display: grid; gap: var(--space-sm); }
.detail__trust li { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-2xs); color: var(--gray-600); }
.detail__trust svg { width: 18px; height: 18px; flex: none; color: var(--success-dark); }
.detail__trust a { color: var(--azure-900); text-decoration: none; }
.detail__trust a:hover { text-decoration: underline; }
/* barra fiducia in cima alle pagine categoria/indice */
.cat-trust { display: flex; flex-wrap: wrap; gap: var(--space-base) var(--space-xl); align-items: center; margin: 0 0 var(--space-lg); padding: var(--space-sm) 0; color: var(--gray-600); font-size: var(--fs-2xs); }
.cat-trust li { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.cat-trust svg { width: 16px; height: 16px; color: var(--success-dark); flex: none; }
.cat-trust ul { display: contents; margin: 0; padding: 0; }

/* --- Mobile: barra azione FISSA sulla scheda (richiesta sempre a portata di pollice) --- */
.detail__action-bar { display: none; }
@media (max-width: 900px) {
  .detail__action-bar {
    display: flex; gap: var(--space-sm); align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    padding: var(--space-sm) var(--space-base) calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
    background: var(--white); border-top: 1px solid var(--gray-border);
    box-shadow: 0 -6px 20px -8px rgba(15,27,45,.25);
  }
  .detail__action-bar .btn--primary { flex: 1 1 auto; justify-content: center; }
  .detail__action-call {
    flex: none; width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gray-border); border-radius: var(--radius-base);
    color: var(--azure-900); background: var(--white);
  }
  .detail__action-call svg { width: 22px; height: 22px; }
  body.catalog-page--detail { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }   /* spazio sotto, non copre il footer */
}

/* --- Mobile: prodotti correlati come CAROSELLO orizzontale (meno scroll infinito) --- */
@media (max-width: 639px) {
  .related .card-grid--products {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: var(--space-base);
    margin: 0 calc(-1 * var(--space-base)); padding: 0 var(--space-base) var(--space-sm);
  }
  .related .card-grid--products > * { flex: 0 0 76%; scroll-snap-align: start; }
}

/* --- Home: ritmo mobile — piu' aria, elementi non appiccicati (statistiche 2x2) --- */
@media (max-width: 639px) {
  body.catalog-page--home .home-stats { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  body.catalog-page--home .home-section { padding: var(--space-4xl) 0; }
  body.catalog-page--home .home-section__head { margin-bottom: var(--space-2xl); }
}
.detail__specs { margin-top: var(--space-3xl); max-width: 860px; }
.detail__pdf svg { width: 18px; height: 18px; }

/* ==========================================================================
   CONTATTI — mappa sede (embed Google Maps responsive)
   ========================================================================== */
.contact-map { margin-top: var(--space-4xl); }
.contact-map__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-base); margin-bottom: var(--space-lg);
}
.contact-map__head h2 { margin: 0; }
.contact-map__head .btn { display: inline-flex; align-items: center; justify-content: center; }
.contact-map__frame {
  position: relative; width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--gray-border); box-shadow: var(--shadow-sm);
  background: var(--bg-light);
}
/* fallback dietro l'iframe: resta visibile se l'embed e' bloccato (privacy/ad-block) */
.contact-map__fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-sm); text-align: center; padding: var(--space-lg); color: var(--gray-600);
}
.contact-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; z-index: 1; background: var(--bg-light); }
/* Senza JS l'iframe non ha src (il caricamento e' a consenso) ma restava comunque
   sopra al fallback con un fondo opaco: il riquadro appariva VUOTO, senza nemmeno
   l'indirizzo. Nascondendolo finche' non ha un src, il fallback torna visibile. */
.contact-map__frame iframe:not([src]) { display: none; }
/* pulsante di consenso "carica mappa" (privacy/GDPR): l'iframe Google parte solo al click */
.map-consent {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-xs); padding: var(--space-lg); text-align: center; cursor: pointer;
  background: var(--pill-bg, var(--bg-light)); border: 0; font: inherit;
  transition: background var(--dur-base) var(--ease);
}
.map-consent:hover, .map-consent:focus-visible { background: var(--card-bg, var(--bg-light)); }
.map-consent__ico { width: 40px; height: 40px; color: var(--azure-700); margin-bottom: var(--space-xs); }
.map-consent__t { font-weight: var(--weight-semibold); font-size: 18px; color: var(--azure-900); }
/* l'indirizzo e' il contenuto UTILE del riquadro anche senza mappa: piu' marcato del resto */
.map-consent__addr { font-size: 15px; color: var(--ink-900); max-width: 46ch; line-height: 1.5; }
.map-consent__s { font-size: var(--fs-xs); color: var(--gray-600); max-width: 52ch; line-height: 1.45; }
/* segnale che l'area e' cliccabile: bordo tratteggiato interno, si accende al passaggio */
.map-consent::before {
  content: ""; position: absolute; inset: 10px; border-radius: var(--radius-base);
  border: 1px dashed var(--card-bd); pointer-events: none;
  transition: border-color var(--dur-base) var(--ease);
}
.map-consent:hover::before, .map-consent:focus-visible::before { border-color: var(--azure-500); }
/* indirizzo come link: affordance non basata solo sul colore (WCAG 1.4.1) */
.contact-card__maplink { display: inline-block; color: var(--azure-900); text-decoration: none; }
.contact-card__maplink address { font-style: normal; text-decoration: underline; text-decoration-color: var(--azure-300); text-underline-offset: 2px; }
.contact-card__maplink:hover address,
.contact-card__maplink:focus-visible address { color: var(--azure-700); text-decoration-color: var(--azure-700); }
@media (max-width: 860px) {
  .contact-map { margin-top: var(--space-2xl); }
  .contact-map__frame { aspect-ratio: 4 / 3; }
  .contact-map__head .btn { width: 100%; }
}
@media (max-width: 560px) {
  .contact-map__frame { aspect-ratio: 1 / 1; min-height: 320px; }
}

/* --- App di mappe a scelta dell'utente (Google / Apple / Waze / "scegli app").
       Su mobile l'utente apre la posizione nella SUA app preferita; su iPhone
       compare Apple Maps, su Android il pulsante "scegli app" (URI geo:) apre
       il selettore di sistema. I pulsanti non pertinenti restano nascosti
       (attributo hidden) e li mostra site-ui.js in base alla piattaforma. --- */
.contact-map__apps { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.contact-map__apps-label {
  font-family: var(--font-nav); font-size: 13px; font-weight: var(--weight-semibold);
  letter-spacing: .03em; text-transform: uppercase; color: var(--gray-700); margin-right: 4px;
}
.contact-map__apps .btn { width: auto; padding: 9px 14px; font-size: 14px; gap: 6px; }
.contact-map__apps .btn svg { width: 17px; height: 17px; }
/* menu "Apri mappa" (details): click sul bottone -> scelta app. Apple Maps nascosta su Android via JS. */
.map-pick { display: inline-block; }
.map-pick > summary { list-style: none; cursor: pointer; }
.map-pick > summary::-webkit-details-marker { display: none; }
.map-pick__chev { margin-left: 2px; transition: transform var(--dur-base) var(--ease); }
.map-pick[open] > summary .map-pick__chev { transform: rotate(180deg); }
.map-pick__menu {
  margin-top: 8px; max-width: 260px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--white); border: 1px solid var(--gray-border);
  border-radius: var(--radius-base); box-shadow: var(--shadow-md);
}
.map-pick__menu a { padding: 11px 14px; border-radius: var(--radius-sm); color: var(--azure-900); font-weight: var(--weight-semibold); text-decoration: none; }
.map-pick__menu a:hover { background: var(--azure-50); text-decoration: none; }
/* variante piccola: link "Apri in mappe" accanto all'indirizzo */
.contact-card__addr { font-style: normal; display: block; }
.map-pick--sm { margin-top: 8px; }
.map-pick--sm > summary { display: inline-flex; align-items: center; gap: 5px; color: var(--azure-900); font-weight: var(--weight-semibold); font-size: var(--fs-xs); }
.map-pick--sm > summary:hover { text-decoration: underline; }
.map-pick--sm > summary .map-pick__chev { width: 15px; height: 15px; }
/* indice cliccabile per le pagine legali (es. Privacy) */
.legal-toc { margin: 0 0 var(--space-2xl); padding: var(--space-lg) var(--space-xl); background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--radius-base); box-shadow: var(--card-sh); }
.legal-toc__title { font-size: var(--fs-sm); margin: 0 0 var(--space-md); }
.legal-toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--space-2xl); }
.legal-toc li { margin: 0 0 var(--space-sm); break-inside: avoid; }
.legal-toc a { color: var(--azure-900); text-decoration: none; font-size: var(--fs-xs); }
.legal-toc a:hover { text-decoration: underline; }
.legal-doc section { scroll-margin-top: calc(var(--header-h, 120px) + 1rem); }
@media (max-width: 639px) { .legal-toc ul { columns: 1; } }
/* .btn impone display:inline-flex e coprirebbe [hidden]: forziamo il nascondere */
.contact-map__apps .btn[hidden] { display: none; }
@media (max-width: 860px) {
  .contact-map__apps { width: 100%; }
  .contact-map__apps-label { flex: 1 1 100%; margin: 0 0 2px; }
  .contact-map__apps .btn { width: auto; flex: 1 1 130px; min-width: 120px; }
}

/* ==========================================================================
   NAVIGAZIONE MOBILE — tab bar in basso (oltre all'hamburger)
   Iniettata da site-ui.js su ogni pagina (non sulle schede prodotto, dove
   c'e' gia' la barra azione). Navigazione col pollice tra le sezioni chiave.
   ========================================================================== */
.mobile-tabbar { display: none; }
@media (max-width: 1023px) {
  .mobile-tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--card-bg); border-top: 1px solid var(--card-bd);   /* perlescente */
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55), 0 -10px 28px -12px rgba(15,27,45,.35);  /* lieve 3D: filo-luce + galleggia */
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-tabbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 48px; padding: 6px 2px; border-radius: var(--radius-base);
    text-decoration: none; color: var(--gray-600);
    font-family: var(--font-nav); font-size: var(--fs-2xs); line-height: var(--lh-ui); letter-spacing: .01em; font-weight: var(--weight-semibold);
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }
  .mobile-tabbar__item svg { width: 24px; height: 24px; }
  .mobile-tabbar__item.is-active { color: var(--azure-700); background: var(--pill-bg); box-shadow: var(--pill-sh); }  /* voce attiva: pastiglia scavata (3D) */
  .mobile-tabbar__item:active { background: var(--azure-50); }
  body:not(.catalog-page--detail) { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   RESPONSIVE TOUCH/MOBILE + MOTION REFRESH (2026-06-29)
   - fix overflow toolbar categoria (select con min-width:auto) a OGNI larghezza
   - target touch >=44px su dispositivi senza hover preciso
   - niente "sticky hover" su touch; checkbox Confronta sempre visibile (pointer:coarse)
   - reveal piu' ampio/morbido + animazione d'ingresso dell'hero ancorata a .js-motion
   ========================================================================== */

/* --- 0. Toolbar: il <select> non deve MAI forzare overflow (min-width:auto) */
.toolbar__jump { min-width: 0; }
.toolbar__select { min-width: 0; max-width: 100%; }

/* --- 1. Toolbar categoria COLLASSATA su mobile/tablet (≤1023): i controlli
       (ricerca in-categoria, Ordina-select, vai-a-categoria, vista griglia/lista)
       sono sostituiti dalla barra sticky "Filtri | Ordina" + bottom-sheet.
       Resta solo il conteggio. Il <select> Ordina resta nel DOM (display:none via
       il wrapper) come sorgente di verità per il JS e fallback desktop. --------- */
@media (max-width: 1023px) {
  .toolbar--category {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
    padding: 0; border: 0; background: none; margin: 0 0 var(--space-sm);
  }
  .toolbar--category > * { min-width: 0; margin-left: 0; }
  .toolbar--category .search__bar,
  .toolbar--category .filters-toggle,
  .toolbar--category .toolbar__sort,
  .toolbar--category .toolbar__jump,
  .toolbar--category .view-toggle { display: none; }
  .toolbar--category .toolbar__count { flex: 1 1 100%; order: 9; margin: 0; }
}

/* --- 2. Compare-bar: slot ridimensionabili, niente sforamento su telefono - */
@media (max-width: 639px) {
  .compare-bar__inner { gap: var(--space-sm); }
  .compare-bar__items { width: 100%; }
  .compare-bar__slot { max-width: 100%; flex: 1 1 130px; }
}

/* --- 3. Target touch: minimo 44px dove il dito deve colpire --------------- */
@media (hover: none) and (pointer: coarse) {
  .site-nav__list a,
  .site-footer__nav a { min-height: var(--tap-target); display: flex; align-items: center; }
  .breadcrumb a,
  .pdf-link,
  .filters-toggle,
  .chip,
  .chip--removable button,
  .compare-bar__clear,
  .compare-bar__remove { min-height: var(--tap-target); display: inline-flex; align-items: center; }
  .site-nav__lang-link { min-height: var(--tap-target); padding: 6px 12px; }
  .view-toggle button { height: var(--tap-target); }
  .search__clear { width: var(--tap-target); height: var(--tap-target); }
  .theme-toggle, .lang-switch__btn { min-height: var(--tap-target); min-width: var(--tap-target); }
  .lang-switch__menu a { min-height: var(--tap-target); display: flex; align-items: center; }
}

/* --- Mobile: bump puntuali residui. I floor tipografici ora vivono nei token
       --fs-* (rem+clamp), quindi niente più patch a-macchia per-elemento. ----- */
@media (max-width: 639px) {
  .contact-form__intro { font-size: var(--fs-sm); }
}

/* --- 4. Hover SOLO su device con hover reale: niente sticky-hover su touch  */
@media (hover: none) {
  .prod-card:hover, .cat-card:hover, .pdf-link:hover, .btn--primary:hover { transform: none; }
  .prod-card:hover .prod-card__media img,
  .cat-card:hover .cat-card__icon { transform: none; }
}
/* checkbox Confronta sempre visibile dove c'e' un puntatore grossolano
   (pointer:coarse e' affidabile anche su tablet/laptop ibridi) */
@media (pointer: coarse) {
  .prod-card__compare { opacity: 1; }
}

/* --- 5. Reveal on scroll: piu' ampio/morbido; piu' leggero su mobile ------ */
.js-motion .reveal { transform: translateY(18px); }
.js-motion .reveal[data-delay="4"] { transition-delay: 240ms; }
.js-motion .reveal[data-delay="5"] { transition-delay: 300ms; }
@media (max-width: 639px) {
  .js-motion .reveal { transform: translateY(10px); transition-duration: 380ms; }
}

/* --- 6. Animazione d'ingresso dell'hero -----------------------------------
   Ancorata a .js-motion: senza JS (o se l'animazione non parte) il testo
   resta visibile. La breadcrumb e' esclusa (non deve "muoversi"). */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .home-hero__inner > *,
  .js-motion .media-hero__content > *:not(.home-hero__inner):not(.breadcrumb) {
    animation: heroRise .7s var(--ease) both;
  }
  .js-motion .home-hero__inner > *:nth-child(1),
  .js-motion .media-hero__content > *:not(.home-hero__inner):not(.breadcrumb):nth-child(2) { animation-delay: 60ms; }
  .js-motion .home-hero__inner > *:nth-child(2),
  .js-motion .media-hero__content > *:not(.home-hero__inner):not(.breadcrumb):nth-child(3) { animation-delay: 140ms; }
  .js-motion .home-hero__inner > *:nth-child(3),
  .js-motion .media-hero__content > *:not(.home-hero__inner):not(.breadcrumb):nth-child(4) { animation-delay: 220ms; }
  .js-motion .home-hero__inner > *:nth-child(4),
  .js-motion .media-hero__content > *:not(.home-hero__inner):not(.breadcrumb):nth-child(5) { animation-delay: 300ms; }
  .js-motion .home-hero__inner > *:nth-child(5),
  .js-motion .media-hero__content > *:not(.home-hero__inner):not(.breadcrumb):nth-child(6) { animation-delay: 380ms; }
}
@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   PREFERS-REDUCED-MOTION — rete di sicurezza globale + sostituzione video
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-motion .reveal { opacity: 1 !important; transform: none !important; }
  /* hero sempre visibile (l'animazione d'ingresso non deve mai nascondere il testo) */
  .home-hero__inner > *, .media-hero__content > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  /* Il video di sfondo (muto, in loop) resta ATTIVO anche con reduced-motion:
     scelta dell'azienda — le hero devono mostrare il video, non il poster statico. */
  .skeleton::after { display: none; }
  .prod-card:hover, .cat-card:hover, .pdf-link:hover, .btn--primary:hover { transform: none !important; }
  .prod-card:hover .prod-card__media img,
  .cat-card:hover .cat-card__icon { transform: none !important; }
}

/* ==========================================================================
   CERTIFICATI — scheda cliccabile (apre il PDF) + blocco spiegazione
   ========================================================================== */
.cert-card--full { position: relative; transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.cert-card--link { cursor: pointer; }
.cert-card--link:hover, .cert-card--link:focus-within { box-shadow: var(--shadow-md); border-color: var(--azure-500); transform: translateY(-2px); }
.cert-card--link:focus-within { outline: none; box-shadow: var(--shadow-focus), var(--shadow-md); }
.cert-card__title a { color: inherit; text-decoration: none; }
.cert-card__title a:hover { color: var(--azure-900); }
.cert-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }  /* stretched link: tutta la scheda apre il PDF */
.cert-card__explain { font-size: var(--fs-sm); line-height: 1.6; color: var(--text); margin: 0 0 var(--space-base); max-width: 66ch; }
.cert-card__explain strong { color: var(--ink-900); font-weight: var(--weight-semibold); }
/* azioni e link espliciti SOPRA lo stretched-link, cosi' restano cliccabili */
.cert-card__actions, .cert-card__actions a, .cert-card__meta a { position: relative; z-index: 1; }
@media (hover: none) { .cert-card--link:hover { transform: none; } }

/* documento aziendale (231) con descrizione */
.doc-item__desc { margin: var(--space-xs) 0 0; color: var(--gray-600); font-size: var(--fs-xs); line-height: 1.55; }

/* ==========================================================================
   HEADER — pulsante tema (chiaro/scuro) + selettore lingua a tendina
   ========================================================================== */
.site-nav__utils { display: inline-flex; align-items: center; gap: var(--space-sm); }

/* pulsante tema — richiede JS (nascosto senza .has-js) */
.theme-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--card-bd); border-radius: var(--radius-base);
  background: var(--card-bg); color: var(--ink-900); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.has-js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { border-color: var(--azure-500); color: var(--azure-900); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
}

/* selettore lingua a tendina — apribile via hover/focus-within (anche senza JS) */
.lang-switch { position: relative; }
.lang-switch__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 10px;
  border: 1px solid var(--card-bd); border-radius: var(--radius-base);
  background: var(--card-bg); color: var(--ink-900);
  font-family: var(--font-nav); font-weight: var(--weight-semibold); font-size: 15px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lang-switch__btn:hover { border-color: var(--azure-500); color: var(--azure-900); }
.lang-switch__btn svg { width: 16px; height: 16px; flex: none; }
.lang-switch__chev { transition: transform var(--dur-fast) var(--ease); }
.lang-switch__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 130;
  min-width: 168px; margin: 0; padding: 6px; list-style: none;
  background: var(--card-bg); border: 1px solid var(--card-bd);
  border-radius: var(--radius-base); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.lang-switch__menu.is-open { opacity: 1; visibility: visible; transform: none; }
/* apertura automatica al passaggio/focus SOLO su desktop; su mobile apre solo il clic */
@media (min-width: 1024px) {
  .lang-switch:hover .lang-switch__menu,
  .lang-switch:focus-within .lang-switch__menu { opacity: 1; visibility: visible; transform: none; }
  .lang-switch:focus-within .lang-switch__chev { transform: rotate(180deg); }
}
.lang-switch__btn[aria-expanded="true"] .lang-switch__chev { transform: rotate(180deg); }
.lang-switch__menu li { margin: 0; }
.lang-switch__menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--ink-900); text-decoration: none; font-size: 15px; white-space: nowrap;
  /* PRESTAZIONI: "Română" contiene ă (latin-ext). Con i font web questo bastava a far
     scaricare i set latin-ext di TUTTE le famiglie su OGNI pagina del sito: 308KB di
     font invece di 128KB (misurato). Qui usiamo i caratteri di sistema: la voce resta
     identica nell'aspetto e i set estesi non servono piu'. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.lang-switch__menu a:hover { background: var(--bg-light); color: var(--azure-900); text-decoration: none; }
.lang-switch__menu a[aria-current="page"] { color: var(--azure-900); font-weight: var(--weight-semibold); }
.lang-switch__menu a[aria-current="page"]::after { content: "\2713"; margin-left: auto; color: var(--azure-700); }

/* sotto il desktop (nav hamburger) il menu lingua scorre nel flusso, niente overlay */
@media (max-width: 1023px) {
  .site-nav__utils { width: 100%; justify-content: flex-start; gap: var(--space-base); margin-top: var(--space-sm); }
  /* tendina lingua: CHIUSA di default (scorre nel flusso), si apre/chiude col clic */
  .lang-switch__menu { position: static; transform: none; box-shadow: none; border: 0; min-width: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease); }
  .lang-switch__menu.is-open { max-height: 260px; padding: var(--space-xs) 0 0; }
}

/* ==========================================================================
   LOGO — si adatta al fondo, senza targhetta bianca: wordmark nero su footer
   chiaro (day), variante a wordmark bianco su footer scuro (dark, via content:url).
   ========================================================================== */

/* ==========================================================================
   DARK MODE — adattamento automatico alla "modalita' notte" del dispositivo.
   Strategia: flip dei token in :root. var(--white) = SUPERFICIE (diventa scura);
   i #fff letterali (testo su scuro) restano bianchi. --ink-900 diventa CHIARO
   (titoli/testo forte + barre hamburger); le superfici che lo usavano come
   SFONDO (hero-band, compare-bar, footer) sono ridefinite a tinte fisse scure.
   ========================================================================== */
/* I token scuri valgono se: OS scuro e l'utente NON ha forzato "chiaro",
   OPPURE l'utente ha scelto "scuro" col pulsante (html[data-theme="dark"]).
   --ink-900 (testo) diventa chiaro; le superfici sempre-scure restano scure
   via --band-dark/--footer-bg. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page:#0d1524; --white:#161f31; --bg-light:#1d2942; --bg-tint:#141e30;
    --text:#e7ecf5; --ink-900:#f2f6fc;
    --gray:#8b95ab; --gray-600:#aab4c9; --gray-700:#c4cede; --gray-border:#2b3a54;
    --azure-900:#9fc1ff; --azure-700:#2f6fe0; --azure-100:#1d2c49; --azure-50:#16243c; --azure-200:#3f63a8;
    --petrol:#5fd6c9; --benzina:#4fd1c5; --petrol-deep:#3fbfb0;
    --btn-grad:linear-gradient(120deg,#2472cf 0%,#1685a0 52%,#0f8791 100%);
    --sheen:radial-gradient(85% 62% at 12% 6%,rgba(53,125,249,.30),transparent 58%),radial-gradient(92% 78% at 90% 94%,rgba(16,150,150,.34),transparent 60%),radial-gradient(72% 58% at 60% 40%,rgba(34,185,140,.18),transparent 64%),linear-gradient(135deg,#0c1626 0%,#0e2634 44%,#0f2231 62%,#0c1626 100%);
    --card-bg:radial-gradient(92% 72% at 12% 8%,rgba(53,125,249,.26),transparent 58%),radial-gradient(95% 80% at 88% 92%,rgba(22,150,150,.30),transparent 60%),radial-gradient(70% 60% at 60% 42%,rgba(34,185,140,.15),transparent 64%),linear-gradient(135deg,#1c2839 0%,#182b3d 44%,#182c38 62%,#1c2839 100%); --card-bd:#3a5471;
    --card-sh:inset 0 1px 0 rgba(255,255,255,.05),0 14px 28px -12px rgba(0,0,0,.6); --card-sh-h:inset 0 1px 0 rgba(255,255,255,.05),0 22px 46px -12px rgba(0,0,0,.75);
    --pill-bg:radial-gradient(120% 120% at 32% 22%,#1d2b41,#15223a); --pill-sh:inset 0 2px 5px rgba(255,255,255,.05),0 5px 12px rgba(0,0,0,.45);
    --band-surface:#0b1426; --band-text:#fff; --band-muted:var(--fog); --band-eyebrow:var(--azure-300); --band-link:var(--azure-300); --band-line:var(--ink-700); --txt-shadow:0 1px 2px rgba(0,0,0,.5);
    --band-dark:#0b1426; --footer-bg:#080f1c;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
    --shadow-md:0 4px 14px -2px rgba(0,0,0,.55),0 2px 6px -2px rgba(0,0,0,.4);
    --shadow-lg:0 14px 32px -8px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg-page:#0d1524; --white:#161f31; --bg-light:#1d2942; --bg-tint:#141e30;
  --text:#e7ecf5; --ink-900:#f2f6fc;
  --gray:#8b95ab; --gray-600:#aab4c9; --gray-700:#c4cede; --gray-border:#2b3a54;
  --azure-900:#9fc1ff; --azure-700:#2f6fe0; --azure-100:#1d2c49; --azure-50:#16243c; --azure-200:#3f63a8;
  --petrol:#5fd6c9; --benzina:#4fd1c5; --petrol-deep:#3fbfb0;
  --btn-grad:linear-gradient(120deg,#2472cf 0%,#1685a0 52%,#0f8791 100%);
  --sheen:radial-gradient(85% 62% at 12% 6%,rgba(53,125,249,.30),transparent 58%),radial-gradient(92% 78% at 90% 94%,rgba(16,150,150,.34),transparent 60%),radial-gradient(72% 58% at 60% 40%,rgba(34,185,140,.18),transparent 64%),linear-gradient(135deg,#0c1626 0%,#0e2634 44%,#0f2231 62%,#0c1626 100%);
  --card-bg:radial-gradient(92% 72% at 12% 8%,rgba(53,125,249,.26),transparent 58%),radial-gradient(95% 80% at 88% 92%,rgba(22,150,150,.30),transparent 60%),radial-gradient(70% 60% at 60% 42%,rgba(34,185,140,.15),transparent 64%),linear-gradient(135deg,#1c2839 0%,#182b3d 44%,#182c38 62%,#1c2839 100%); --card-bd:#3a5471;
  --card-sh:inset 0 1px 0 rgba(255,255,255,.05),0 14px 28px -12px rgba(0,0,0,.6); --card-sh-h:inset 0 1px 0 rgba(255,255,255,.05),0 22px 46px -12px rgba(0,0,0,.75);
  --pill-bg:radial-gradient(120% 120% at 32% 22%,#1d2b41,#15223a); --pill-sh:inset 0 2px 5px rgba(255,255,255,.05),0 5px 12px rgba(0,0,0,.45);
  --band-surface:#0b1426; --band-text:#fff; --band-muted:var(--fog); --band-eyebrow:var(--azure-300); --band-link:var(--azure-300); --band-line:var(--ink-700); --txt-shadow:0 1px 2px rgba(0,0,0,.5);
  --band-dark:#0b1426; --footer-bg:#080f1c;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 4px 14px -2px rgba(0,0,0,.55),0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-lg:0 14px 32px -8px rgba(0,0,0,.6);
}
/* ritocchi in dark (OS non-forzato-chiaro, o manuale): mappa + LOGO adattivo.
   In dark scambiamo il logo con la variante a scritta bianca (emblema intatto):
   si adatta al fondo scuro, senza box bianco. Niente JS -> nessun flash. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .contact-map__frame { border-color:#2b3a54; }
  :root:not([data-theme="light"]) .site-header__logo img,
  :root:not([data-theme="light"]) .site-footer__brand img { content: url(/assets/img/u.jet-logo-due-righe-dark.png); }
}
:root[data-theme="dark"] .contact-map__frame { border-color:#2b3a54; }
:root[data-theme="dark"] .site-header__logo img,
:root[data-theme="dark"] .site-footer__brand img { content: url(/assets/img/u.jet-logo-due-righe-dark.png); }

/* ---- Pagine legali (Privacy/Cookie): testo lungo leggibile, responsive, theme-safe ---- */
.legal-doc { max-width: 760px; margin: 0 auto; }
.legal-doc__updated { font-size: .9rem; opacity: .65; margin: 0 0 1.8rem; }
.legal-doc section { padding-bottom: 1.9rem; margin-bottom: 1.9rem; border-bottom: 1px solid var(--card-bd); }
.legal-doc section:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.legal-doc h2 { font-size: 1.22rem; font-weight: 700; line-height: 1.35; margin: 0 0 .7rem; text-wrap: balance; }
.legal-doc p { margin: 0 0 .85rem; line-height: 1.7; }
.legal-doc p:last-child { margin-bottom: 0; }
.legal-doc ul { margin: 0 0 .95rem 1.3rem; line-height: 1.65; }
.legal-doc ul:last-child { margin-bottom: 0; }
.legal-doc li { margin: 0 0 .5rem; }
.legal-doc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* <picture> trasparente al layout: le regole .telo-figure img / .prod-card__media img / .detail__media img restano valide identiche */
picture { display: contents; }

/* Render teli nella griglia: mostra la sagoma INTERA (i render sono verticali, 'cover' li tagliava) */
.prod-card__media--telo img { object-fit: contain; }

/* A11y (WCAG 2.3.3): chi imposta "meno movimento" nel sistema -> azzera TUTTE le animazioni/transizioni */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dark mode: categoria/codice sulle card erano grigio scuro fisso su fondo navy (contrasto ~2:1).
   Grigio chiaro -> ~6.6:1 = WCAG AA. (In light mode restano invariate: gia' a norma su bianco.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prod-card__cat,
  :root:not([data-theme="light"]) .prod-card__code { color: #9aa4ba; }
}
:root[data-theme="dark"] .prod-card__cat,
:root[data-theme="dark"] .prod-card__code { color: #9aa4ba; }

/* Dark mode: chip "Confronta" leggibile sul navy (testo chiaro + bordo tenue); spuntato resta azzurro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prod-card__compare:not(:has(:checked)) { color: #cdd6e6; border-color: rgba(120,150,200,.30); }
}
:root[data-theme="dark"] .prod-card__compare:not(:has(:checked)) { color: #cdd6e6; border-color: rgba(120,150,200,.30); }

/* ===== TENDINA "COME SCRIVERE ALLA PEC" (.mailpick) =====
   Costruita da site-ui.js e appesa al <body> con position:fixed, cosi' NON viene
   tagliata dall'overflow del footer o della card contatti (era il rischio principale
   di un popover in-flow). Classi nuove: nessun rischio di ordine-di-dichiarazione
   con le regole precedenti. Palette e raggi ripresi da .lang-switch__menu perche'
   e' la stessa famiglia di componente (tendina ancorata a un comando). */
.mailpick-trigger { cursor: pointer; }
.mailpick {
  position: fixed; z-index: 200;
  min-width: 252px; max-width: min(340px, calc(100vw - 16px));
  margin: 0; padding: 6px;
  background: var(--card-bg); border: 1px solid var(--card-bd);
  border-radius: var(--radius-base); box-shadow: var(--shadow-md);
}
.mailpick[hidden] { display: none; }
.mailpick.is-open { animation: mailpick-in var(--dur-fast) var(--ease) both; }
@keyframes mailpick-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mailpick.is-open { animation: none; } }
.mailpick__opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border: 0; background: none; text-align: left;
  border-radius: var(--radius-sm);
  color: var(--ink-900); text-decoration: none; cursor: pointer;
  font-size: 15px; line-height: 1.3;
  /* stessa scelta di .lang-switch__menu: caratteri di sistema, cosi' le voci non
     tirano dentro i subset latin-ext dei font web su ogni pagina. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.mailpick__opt:hover,
.mailpick__opt:focus-visible { background: var(--bg-light); color: var(--azure-900); text-decoration: none; }
.mailpick__opt svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--azure-700); }
.mailpick__opt.is-done { color: var(--azure-900); font-weight: var(--weight-semibold); }
.mailpick__hint {
  margin: 5px 4px 2px; padding-top: 7px;
  border-top: 1px solid var(--card-bd);
  /* --gray-700 e NON --ink-700: quest'ultimo (#1f3450) e' il token dei BORDI su navy,
     non ha una variante per il tema scuro e come testo dava 1.14:1 (illeggibile).
     --gray-700 e' il token del micro-testo muto ed e' ridefinito in dark. */
  font-size: 12.5px; line-height: 1.35; color: var(--gray-700);
}
@media (max-width: 1023px) { .mailpick__opt { min-height: var(--tap-target); } }

/* ===== Font self-hosted (Inter corpo/UI + Fraunces titoli, subset latin+latin-ext per IT/EN/RO). ===== */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/fraunces-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/fraunces-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/inter-400-latinext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/inter-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/inter-500-latinext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/inter-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/inter-600-latinext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/inter-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/inter-700-latinext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/inter-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/spacegrotesk-500-latinext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/spacegrotesk-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/spacegrotesk-600-latinext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/spacegrotesk-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/spacegrotesk-700-latinext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/spacegrotesk-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }