/* ===========================================================
   BASE
   Tipografia, link, liste, bottoni generici
   =========================================================== */

/* START: Brand Typography (De Sisti) */
:root{
  --ds-font-heading: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* Titoli hero/prodotto, titoletti sezioni (Oswald) */
.product-hero h1,
.product-hero h2,
.product-hero .badge,
.product-bar,
.rfq-cta h3,
.acc-group .acc-label,
#rfq-modal .label,
#rfq-modal .acc-pill{
  font-family: var(--ds-font-heading);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Bottoni/pill generiche (Oswald) */
button, .btn, .pill, .acc-pill{
  text-transform: uppercase;
  font-family: var(--ds-font-heading);
  letter-spacing: .02em;
}

/* START: Conthrax stickers — product code + range pills */

/* Range pills: Conthrax, ma senza “stretch” (come richiesto: qui è già ok) */
.range-pills .pill{
  font-family: var(--ds-font-display, "ConthraxSB"), var(--ds-font-heading);
  letter-spacing: .06em;
}

/* Product code (F7): effetto “etichetta fisica”
   - tracking più forte
   - leggero stretch orizzontale (simula la resa delle label)
   - inline-block per rendere affidabile transform/metrics */
.product-bar .title-chip,
.product-bar [data-product-code]{
  font-family: var(--ds-font-display, "ConthraxSB"), var(--ds-font-heading);
  display: inline-block;
  letter-spacing: .12em;
  line-height: 1;
  transform: scaleX(1.06);
  transform-origin: left center;
}

/* ── Nomi che NON sono sigle ─────────────────────────────────────────────
   Il chip prende `text-transform: uppercase` da `.product-bar` (riga 15), e
   per i Fresnel è giusto: la placca fisica dice davvero «F7», «F10HP».
   Il Galileo no — sul prototipo il nome è scritto in maiuscolo/minuscolo,
   ed è un NOME, non un codice. Qui il maiuscolo pieno era una convenzione
   nostra ereditata dalle sigle, non il prodotto vero.
   ⚠️ Serve la classe: cambiare solo il testo nell'HTML non bastava — il CSS
   lo rimaiuscolava e il risultato non cambiava di una virgola. */
.product-bar .title-chip--misto,
.product-bar [data-product-code].title-chip--misto{ text-transform: none; }

/* ── BARRA «PREVIEW» — la forma pubblica del «non è finita» ──────────────
   David 08/09 h22:01, guardando `series-lite-BOZZA`: «questa merita
   complimenti, ed è LA soluzione per le pagine non validate — solo che
   ne "L'azienda" c'è quello a uso interno».
   Aveva ragione due volte: il banner giallo grande diceva cose scritte per
   lui («il tono lo valida David», «i numeri non sono verificati») ed era
   PUBBLICO. Una nota di lavorazione sul sito online non avverte il
   visitatore: gli mostra il cantiere.
   ⇒ Una riga sobria in cima, uguale ovunque. Le note di lavorazione vivono
   nei registri, dove le legge chi lavora.
   Il CSS stava duplicato dentro due pagine: qui è una volta sola. */
:root{ --bz-banner-h: 26px; }
.bz-banner{
  position: fixed; top: 0; left: 0; right: 0; z-index: 9500;
  height: var(--bz-banner-h);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ds-neutral-800, #1A1714);
  color: var(--ds-brand-yellow, #F4B532);
  font-family: var(--ds-font-heading), system-ui, sans-serif;
  font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.bz-banner b{ font-weight: 700; }
.bz-banner span{ color: rgba(244,243,239,.72); font-weight: 500; }
/* La barra è fixed: senza questo l'header le si siede sopra (misurato, non
   dedotto: `header_top: 0` con la barra alta 26 px).
   ⚠️ La variabile va su :root — è lì che la leggono i fogli dell'header.
   Metterla su `body` non produceva NIENTE, ed era invisibile in diff. */
:root:has(.bz-banner){ --ds-header-gap: calc(14px + var(--bz-banner-h)); }

/* END: Conthrax stickers — product code + range pills */
/* END: Brand Typography (De Sisti) */



body{
  font-family: var(--ds-font-sans);
  font-size: var(--ds-fs-body);
  color: var(--ds-c-text);
  background-color: var(--ds-c-bg);
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;

  /* sess.47b P0.1: transizione morbida al toggle tema (era flash secco).
     Il tema è settato da inline script in <head> prima del first paint,
     quindi all'avvio non scatta nessuna transition. */
  transition: background-color var(--ds-dur-std) var(--ds-ease-std),
              color var(--ds-dur-std) var(--ds-ease-std);

  /* Crisp text */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* sess.47b P0.1: rispetta prefers-reduced-motion sul cross-fade del tema */
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

h1, h2, h3, h4 {
  font-weight: 600;
  margin: 0 0 var(--ds-space-2);
  line-height: 1.2;
}

a {
  color: var(--ds-c-accent-dark);
  text-decoration: none;
  transition: color 0.2s var(--ds-ease-std);
}
a:hover { color: var(--ds-c-accent); }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* === FONTS (Oswald via <link> in HTML + Conthrax locale) ===
   Nota: Oswald è già caricato in <head> (evita doppio fetch qui).
*/
/* START: Conthrax font-face (fixed relative path) */
/* ⚠️ OSWALD IN LOCALE — sess.68, 28/08/2026.
   David, navigando: «la barra menu cambia carattere nelle pagine nuove».
   Causa: Oswald arrivava SOLO da Google, e solo nelle pagine generate dal
   template prodotto. Le pagine scritte a mano (home, rete vendita, menu
   bozza…) cadevano sul font di sistema — e non solo la barra: TUTTI i testi.

   ⭐ Perche' in locale e non aggiungendo il link a Google sulle pagine che ne
   erano prive, che sarebbe stato l'allineamento piu' ovvio:
   1. `reference_font_stack` dice gia' «Oswald OFL IN LOCALE», e il file
      (`oswald-variable.ttf`, 168 KB, variabile) era gia' in assets/fonts/ —
      senza nessuna regola che lo usasse;
   2. ConthraxSB e' gia' locale, proprio qui sotto: due font della stessa
      interfaccia caricati con due strategie diverse e' una incoerenza, non
      una scelta;
   3. ⚠️ IBC: a una fiera la rete e' lenta o filtrata. Un font da CDN esterno
      e' un rischio che un font locale non ha — e la prima cosa che si rompe
      e' l'aspetto di TUTTO il sito;
   4. costa MENO: una regola in un file che tutte e 28 le pagine caricano gia',
      invece di un tag in piu' su ognuna delle pagine scoperte.
   ⇒ le pagine prodotto continuano a caricare anche quello di Google: non le
   ho toccate. La strategia unica va decisa con David — questo toglie il
   difetto senza chiudere la decisione. */
@font-face{
  font-family: "Oswald";
  src: url("../fonts/oswald-variable.ttf") format("truetype-variations"),
       url("../fonts/oswald-variable.ttf") format("truetype");
  font-weight: 200 700;   /* variabile: copre i pesi 400/500/600/700 usati */
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "ConthraxSB";
  /* ds-base.css è in assets/css/ → per arrivare a assets/fonts/ serve ../fonts/ */
  src: url("../fonts/conthrax-sb.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* END: Conthrax font-face (fixed relative path) */
/* === /FONTS === */


/* Crisp text */
/* (dedup) — moved into the main body{} above */

/* Pills più leggere */
.specs-card .pill,
.pm .pill{
  font-weight: 600;           /* da 700 -> 600 */
  letter-spacing: .02em;
  text-shadow: none;
}

/* Footer nero + barre orizzontali brand */
.site-footer{ background:#0c0c0c; color:#d9d9d9; margin-top:48px; }
.site-footer .brand-bars{ position:relative; height:8px; }
.site-footer .bar{ position:absolute; left:0; right:0; display:block; }
.site-footer .bar--thick{ top:0; height:4px; background:#F2B300; }
.site-footer .bar--thin { top:4px; height:2px; background:#FFE480; }
.site-footer .foot-wrap{ max-width:1200px; margin:0 auto; padding:24px 16px; font-size:13px; }

/* ── Footer come TERZA SUPERFICIE di navigazione — 08/09/2026, FIX-PRECARICO ──
   Il footer e' l'unica banda del sito che resta scura in entrambi i temi (lo
   e' sempre stata: `background:#0c0c0c` qui sopra, dal primo giorno). Quindi
   i colori NON seguono light/dark: pescano dai token neutri e dal giallo
   brand, che sono gli stessi nei due temi. Nessun colore nuovo. */
.site-footer .foot-nav{
  display:flex; flex-wrap:wrap; gap:32px 56px;
  padding-bottom:20px; margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.site-footer .foot-col{ min-width:150px; }
.site-footer .foot-col__title{
  margin:0 0 10px; font-size:11px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--ds-neutral-400);
}
.site-footer .foot-list{ list-style:none; margin:0; padding:0; }
.site-footer .foot-list li + li{ margin-top:7px; }
.site-footer .foot-link{
  color:var(--ds-neutral-200); text-decoration:none;
  font-size:13px; line-height:1.35;
  border-bottom:1px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
/* ⚠️ hover gated: senza, su iOS resta appiccicato dopo il tap
   (`feedback_sticky_hover_ios`). */
@media (hover:hover){
  .site-footer .foot-link:hover{
    color:var(--ds-brand-yellow-light);
    border-bottom-color:var(--ds-brand-yellow-light);
  }
}
.site-footer .foot-link:focus-visible{
  outline:2px solid var(--ds-brand-yellow-dark);
  outline-offset:3px; border-radius:2px;
}
/* Le tre voci legali: pagine in lavorazione, `<a>` senza href — non
   focusabili, cursore normale, opacita' ridotta. Stessa grammatica della
   voce «Contacts» dell'header. */
.site-footer .foot-link.is-soon{
  color:var(--ds-neutral-400); opacity:.72; cursor:default;
}
@media (hover:hover){
  .site-footer .foot-link.is-soon:hover{
    color:var(--ds-neutral-400); border-bottom-color:transparent;
  }
}
.site-footer .foot-copy{ margin:0; color:var(--ds-neutral-400); }

/* Sotto i 1100 px le colonne diventano due: tre colonne da 150 px non ci
   stanno a 390 e andavano a capo in modo disordinato. */
@media (max-width:1099.98px){
  .site-footer .foot-nav{ gap:26px 32px; }
  .site-footer .foot-col{ min-width:132px; flex:1 1 40%; }
}

/* START: Unified Buttons — cleaned (remove diff +) */
/* ===========================================================
   Unified Buttons — Sessione 5 / Step 1
   Nota: NON tocca le range pills né i badges della product-bar
   =========================================================== */

/* Base */
.btn, .chip,
.specs-card .pill,                  /* mappo i toggle Specs esistenti */
#specs-card [data-units],          /* units in product area */
.product-bar .units-toggle button, /* units toggle nella product-bar */
#photometrics .toolbar .btn {
  display: inline-flex; align-items: center; gap: var(--btn-gap);
  height: var(--btn-h); padding: 0 var(--btn-pad-x);
  font: 600 var(--btn-fz)/1.1 var(--ds-font-sans, system-ui);
  letter-spacing: .02em; text-transform: uppercase;
  border-radius: 999px; border: 1px solid rgba(0,0,0,.08);
  background: #fff; color: #222;
  transition: .2s var(--ds-ease-std, ease);
}

/* Hover */
.btn:hover, .chip:hover,
.specs-card .pill:hover,
#specs-card [data-units]:hover,
.product-bar .units-toggle button:hover,
#photometrics .toolbar .btn:hover{
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Stato attivo / selezionato */
.btn.is-active,
.specs-card .pill.active,
.product-bar .units-toggle .active,
[aria-pressed="true"],
.is-active{
  background: var(--brand);
  border-color: transparent;
}
.btn.is-active:hover,
.specs-card .pill.active:hover,
.product-bar .units-toggle .active:hover{
  background: var(--brand-dark);
}

/* ═══════════════════════════════════════════════════════════════════════
   FOCUS — V-74 (David, 02/09): «al click su logo e voci header appare il
   contorno bianco».
   ───────────────────────────────────────────────────────────────────────
   Il contorno bianco e' l'outline di default del browser, e compariva col
   MOUSE perche' un click da' il focus. ⛔ La cura sbagliata e' `outline:none`
   secco: toglie il contorno anche a chi naviga da TASTIERA, che di quel
   contorno ha bisogno per sapere dov'e'. Sarebbe beffardo dopo aver appena
   dato un nome a 25 dialog (V-70).
   ⇒ Le due regole canoniche: il focus da puntatore non si vede, quello da
   tastiera si vede MEGLIO di prima — oro di marca invece del bianco di
   sistema.
   📌 `:focus-visible` lo decide il browser (puntatore = no, tastiera = si).
   ═══════════════════════════════════════════════════════════════════════ */
:focus:not(:focus-visible){
  outline: none;
}
:focus-visible{
  outline: 2px solid var(--brand, #F4B532);
  outline-offset: 2px;
}

/* Accessibilità */
.btn:focus-visible,
.chip:focus-visible,
.specs-card .pill:focus-visible,
#specs-card [data-units]:focus-visible,
.product-bar .units-toggle button:focus-visible,
#photometrics .toolbar .btn:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* END: Unified Buttons — cleaned (remove diff +) */

/* START: SESSION10 – Product page base grid */

/* Contenitore principale dei widget di prodotto (sotto hero) */
.product-main-grid{
  /* spazio respiro verticale */
  padding-block: clamp(24px, 4vw, 40px);

  /* respiro orizzontale, responsivo */
  padding-inline: clamp(16px, 4vw, 40px);

  /* griglia base: per ora 1 colonna, ma con gap controllato */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(24px, 4vw, 40px);
}

/* I widget dentro la griglia si comportano come “card” centrate */
.product-main-grid > section{
  /* lascio gestire la larghezza ai singoli widget (specs, accessori, ecc.) */
  margin-inline: auto;
}

/* Spazio extra sopra/bene sotto l’RFQ per dare chiusura alla pagina prodotto */
.product-main-grid > #rfq-cta{
  margin-top: clamp(24px, 5vw, 48px);
  margin-bottom: clamp(16px, 4vw, 40px);
}

/* END: SESSION10 – Product page base grid */

/* START: SESSION11C – compact widgets layout (control-center style) */

/* Default max widths (tweakable) */
:root{
  --widget-max: 980px;
  --widget-max-narrow: 760px;
  --widget-max-wide: 1204px;
}

/* Make all widgets “card-sized”, centered */
.product-main-grid > section.widget{
  justify-self: center;
  width: min(100%, var(--widget-max));
}

/* Per-zone sizing (more compact / more wide) */
.product-main-grid > section[data-zone="specs"]{
  width: min(100%, var(--widget-max-wide));
}

.product-main-grid > section[data-zone="dmx"]{
  width: min(100%, var(--widget-max));
}

/* Accessories + downloads often have tables -> keep them comfortable */
.product-main-grid > section[data-zone="accessories"],
.product-main-grid > section[data-zone="downloads"]{
  width: min(100%, var(--widget-max-wide));
}

/* Give a slightly “tile-like” rhythm */
.product-main-grid{
  row-gap: clamp(18px, 3vw, 28px);
}

/* END: SESSION11C – compact widgets layout (control-center style) */

/* START: DS MODAL (global) */
.ds-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.ds-modal[aria-hidden="false"]{ display: block; }

.ds-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.ds-modal-dialog{
  position: absolute;
  inset: clamp(14px, 3vw, 28px);
  margin: auto;
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,248,246,.94));
  box-shadow:
    0 24px 70px rgba(0,0,0,.35),
    inset 0 1px rgba(255,255,255,.9);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.ds-modal-head{
  padding: 18px 22px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58));
}

.ds-modal-title{
  margin: 0;
  font-family: "Oswald", system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: .95;
  color: rgba(0,0,0,.9);
}

.ds-modal-sub{
  margin: 8px 0 0;
  color: #7a7468;
  font-size: 12px;
  font-family: "Oswald", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.ds-modal-close{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.95);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

.ds-modal-body{
  padding: 20px 22px 22px;
  overflow: auto;
}

/* --- Modal dossier: media responsive (no overflow) --- */
.ds-modal-body img,
.ds-modal-body video{
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

.ds-modal-body figure,
.ds-modal-body .media,
.ds-modal-body .pdoc-media,
.ds-modal-body .project-media{
  margin: 0;
  overflow: hidden;
  border-radius: 14px; /* opzionale: uniforma col resto */
}

.ds-modal-body video{
  max-height: 70vh;     /* evita che "sfondi" la viewport */
}

.ds-modal-foot{
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.72));
}

.ds-modal-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.92);
  text-decoration: none;
  color: rgba(0,0,0,.82);
  font-family: "Oswald", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
}

/* END: DS MODAL (global) */

.ds-taxo-copy{
  display: grid;
  gap: 14px;
}

.ds-taxo-copy p{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(0,0,0,.78);
}

.ds-taxo-bullets{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.ds-taxo-bullets li{
  font-size: 14px;
  line-height: 1.45;
  color: rgba(0,0,0,.82);
}

.ds-taxo-status{
  font-family: "Oswald", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  color: #8a816f;
}

.ds-modal-btn.primary{
  border-color: rgba(209,179,0,.8);
  background: linear-gradient(180deg, rgba(255,244,194,.96), rgba(255,236,162,.96));
  color: rgba(0,0,0,.84);
}

/* START: DS Taxonomy Modal — cover hero design */

/* Dialog: più compatto del portfolio modal */
.ds-taxo-dialog.ds-modal-dialog{
  width: min(520px, calc(100vw - 28px));
  /* override grid: niente 1fr — il body si adatta al contenuto */
  grid-template-rows: auto auto auto;
  max-height: min(640px, calc(100vh - 28px));
}

/* ---- HERO COVER ---- */
.ds-taxo-hero{
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(135deg, #1e1a0e 0%, #0a0804 100%);
  display: flex;
  align-items: flex-end;
}

/* Immagine cover */
.ds-taxo-hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .68;
  display: block;
}
.ds-taxo-hero-img[hidden]{ display: none !important; }

/* Gradiente scuro sul basso per leggibilità testo */
.ds-taxo-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.22) 52%,
    transparent 100%
  );
  z-index: 1;
}

/* Linea brand De Sisti in cima */
.ds-taxo-hero::after{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #F4B532 0%, #F3E955 60%, transparent 100%);
  z-index: 4;
}

/* Area testo nella cover */
.ds-taxo-hero-content{
  position: relative;
  z-index: 2;
  padding: 20px 22px 22px;
  flex: 1;
}

/* Kicker: "Famiglia" / "Range" */
.ds-taxo-kicker{
  display: block;
  font-family: "Oswald", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  color: rgba(255,255,255,.52);
  margin: 0 0 7px;
}

/* Titolo hero */
.ds-taxo-title{
  font-family: "Oswald", system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: .95;
  color: rgba(255,255,255,.97);
  font-weight: 400;
  margin: 0;
}

/* Pulsante chiudi sulla cover */
.ds-taxo-close-btn{
  position: absolute;
  top: 13px; right: 13px;
  z-index: 3;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.36);
  color: rgba(255,255,255,.88);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .15s ease;
}
.ds-taxo-close-btn:hover{ background: rgba(0,0,0,.58); }

/* ---- BODY ---- */
.ds-taxo-body{
  padding: 18px 22px 14px;
}

.ds-taxo-lead{
  margin: 0 0 16px;
  color: rgba(0,0,0,.60);
  font-size: 15px;
  line-height: 1.58;
}

.ds-taxo-bullets{
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.ds-taxo-bullets li{
  font-size: 14px;
  line-height: 1.48;
  color: rgba(0,0,0,.72);
  padding-left: 17px;
  position: relative;
}

/* Pallino brand prima di ogni voce */
.ds-taxo-bullets li::before{
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #F4B532;
}

/* ---- FOOTER AZIONI ---- */
.ds-taxo-actions{
  padding: 13px 18px 16px;
  border-top: 1px solid rgba(0,0,0,.07);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.68));
  border-radius: 0 0 22px 22px;
}

/* Base comune pulsanti */
.ds-taxo-cta-btn,
.ds-taxo-ghost-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 17px;
  border-radius: 999px;
  font-family: "Oswald", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s ease, transform .12s ease;
}
.ds-taxo-cta-btn:hover,
.ds-taxo-ghost-btn:hover{ opacity: .84; transform: translateY(-1px); }

/* CTA primario: giallo brand */
.ds-taxo-cta-btn{
  border: 1px solid rgba(209,179,0,.85);
  background: linear-gradient(180deg, rgba(255,244,194,.97), rgba(255,234,156,.97));
  color: rgba(0,0,0,.84);
}

/* Ghost secondario */
.ds-taxo-ghost-btn{
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.88);
  color: rgba(0,0,0,.70);
}

/* ---- DARK MODE ---- */
/* Hero: kicker/title già bianchi su cover scura */
.ds-dark .ds-taxo-lead{ color: rgba(255,255,255,.55); }
.ds-dark .ds-taxo-bullets li{ color: rgba(255,255,255,.68); }
.ds-dark .ds-taxo-actions{
  border-top-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(18,16,8,.42), rgba(18,16,8,.72));
}
.ds-dark .ds-taxo-ghost-btn{
  border-color: rgba(255,255,255,.16);
  background: rgba(40,36,24,.88);
  color: rgba(255,255,255,.72);
}

/* END: DS Taxonomy Modal — cover hero design */


/* ============================================================
   START: DS DARK MODE — component overrides
   Triggered exclusively by body.ds-dark (set by site-chrome.js
   on load from OS prefers-color-scheme or user toggle, stored
   in localStorage as 'ds-theme').
   Semantic tokens (--ds-c-*) are already in ds-tokens.css.
   This block overrides hardcoded rgba() values in components
   that were built before the token system was complete.
   ============================================================ */

/* ---- 1. Header component token overrides ---- */
body.ds-dark {
  --ds-header-bg:             rgba(18,16,12,.70);
  --ds-header-border:         rgba(255,255,255,.09);
  --ds-header-shadow:         rgba(0,0,0,.52);
  --ds-header-divider:        rgba(255,255,255,.07);
  --ds-header-divider-strong: rgba(244,181,50,.26);
}

/* ---- 2. Header pill — glass dark ---- */
body.ds-dark .nav .wrap {
  background: linear-gradient(180deg, rgba(30,26,18,.86), rgba(18,16,12,.76));
  border-color: rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px rgba(255,255,255,.05),
    0 12px 28px rgba(0,0,0,.54);
}
body.ds-dark .nav.is-compact .wrap {
  background: linear-gradient(180deg, rgba(26,22,16,.92), rgba(18,16,12,.86));
  border-color: rgba(255,255,255,.10);
}
body.ds-dark .nav.is-sticky .wrap {
  background: linear-gradient(180deg, rgba(26,22,16,.94), rgba(18,16,12,.90));
  border-color: rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.52);
}

/* ---- 3. Logo — dual SVG swap (light / dark variant) ---- */
.brand .logo-dark          { display: none; }
body.ds-dark .brand .logo-light { display: none; }
body.ds-dark .brand .logo-dark  { display: block; opacity: .92; }

/* ---- 4. Nav links ---- */
body.ds-dark .menu-list .item a {
  color: rgba(218,216,210,.88);
}
body.ds-dark .menu-list .item a:hover,
body.ds-dark .menu-list .item a:focus-visible {
  color: rgba(244,181,50,.98);
}

/* ---- 5. Header utility buttons (search, units, textsize, lang, rfq) ---- */
body.ds-dark .search-btn,
body.ds-dark .units-btn,
body.ds-dark .textsize-btn,
body.ds-dark .lang-btn,
body.ds-dark .header-rfq,
body.ds-dark .menu-toggle {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
  color: rgba(218,216,210,.90);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
body.ds-dark .search-btn:hover,
body.ds-dark .units-btn:hover,
body.ds-dark .textsize-btn:hover,
body.ds-dark .lang-btn:hover,
body.ds-dark .header-rfq:hover,
body.ds-dark .menu-toggle:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.14);
  color: rgba(232,230,224,1);
}
body.ds-dark .menu-toggle__lines span {
  background: rgba(218,216,210,.88);
}

/* ---- 6. Dropdown menus (units, lang) ---- */
body.ds-dark .units-menu,
body.ds-dark .lang-menu {
  background: rgba(26,22,16,.97);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.56);
}
body.ds-dark .units-menu button,
body.ds-dark .lang-menu button {
  color: rgba(218,216,210,.88);
}
body.ds-dark .units-menu button:hover,
body.ds-dark .lang-menu button:hover {
  background: rgba(255,255,255,.07);
}
body.ds-dark .lang-menu button::before {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.40);
}

/* ---- 7. Hero stage — fix white box ---- */
body.ds-dark .hero .hero-stage {
  background: linear-gradient(180deg, rgba(22,20,14,.95), rgba(12,10,6,.90));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ---- 8. Hero dock ---- */
body.ds-dark .hero .hero-dock {
  background: linear-gradient(
    180deg,
    rgba(28,24,16,.92) 0%,
    rgba(18,16,10,.88) 52%,
    rgba(22,18,12,.90) 100%
  );
  border-top-color: rgba(255,255,255,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 8px 16px rgba(0,0,0,.42);
}

/* ---- 9. Hero remote control buttons ---- */
body.ds-dark .hero .hero-remote [data-prev],
body.ds-dark .hero .hero-remote [data-next],
body.ds-dark .hero .hero-remote [data-auto],
body.ds-dark .hero .hero-remote [data-tray-toggle] {
  background: linear-gradient(180deg, rgba(48,42,30,.92), rgba(32,28,20,.88));
  border-color: rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px rgba(255,255,255,.07),
    0 1px 3px rgba(0,0,0,.44);
  color: rgba(218,216,210,.90);
}

/* ---- 10. Specs widget ---- */
body.ds-dark section#specs-card {
  background: rgba(255,255,255,.04);
  box-shadow:
    0 18px 36px rgba(0,0,0,.44),
    inset 0 0 0 1px rgba(255,255,255,.07);
}
/* remove white gradient overlays */
body.ds-dark section#specs-card::before { opacity: 0; }
body.ds-dark section#specs-card::after  { opacity: 0; }

body.ds-dark #specs-card .units-chip {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
  color: rgba(218,216,210,.90);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
body.ds-dark #specs-card .units-chip:hover {
  background: rgba(255,255,255,.12);
}
body.ds-dark #specs-card .glass-box {
  background: rgba(255,255,255,.04);
  box-shadow:
    0 10px 24px rgba(0,0,0,.36),
    inset 0 1px rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.06);
  outline-color: rgba(255,255,255,.06);
}
body.ds-dark #specs-card .glass-box::before { background: none; }
body.ds-dark #specs-card .specs-table tr:nth-child(2n) {
  background: rgba(255,255,255,.03);
}
body.ds-dark #specs-card .specs-table tr:hover {
  background: rgba(255,255,255,.05);
}
body.ds-dark #specs-card .specs-table td,
body.ds-dark #specs-card .specs-table th {
  border-color: rgba(255,255,255,.06);
  color: rgba(218,216,210,.88);
}

/* ---- 11. Downloads widget — DEPRECATED sess.25 task #3 ----
   Gli override del container .downloads-card e .dl-item sono stati
   migrati a Surface tier system (tokens --ds-surface-1/2-*) in
   components/downloads.css. Auto-reattivi al tema, non serve override. */
body.ds-dark .dl-filter .pill {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
  color: rgba(218,216,210,.88);
}
body.ds-dark .dl-filter .pill:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,.30);
}
body.ds-dark .dl-filter .pill.is-active {
  background: var(--ds-brand-yellow-dark);
  border-color: rgba(244,181,50,.72);
  color: rgba(0,0,0,.84);
}
/* dl-item dark override DEPRECATED sess.25 task #3
   (migrato a surface-2 tokens in components/downloads.css). */

/* ---- 12. DMX widget ---- */
body.ds-dark .dmx-bitdepth-toggle .btn {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
  color: rgba(218,216,210,.88);
}
body.ds-dark .dmx-bitdepth-toggle .btn.is-active {
  background: var(--ds-brand-yellow-dark);
  border-color: rgba(244,181,50,.72);
  color: rgba(0,0,0,.84);
}
/* DMX modal */
body.ds-dark .dmx-modal-dialog {
  background: rgba(22,18,12,.97);
  border-color: rgba(255,255,255,.10);
  box-shadow:
    0 20px 45px rgba(0,0,0,.60),
    0 0 0 1px rgba(255,255,255,.08) inset;
}
body.ds-dark .dmx-modal-header {
  border-bottom-color: rgba(255,255,255,.08);
}
body.ds-dark .dmx-modal-bar {
  background: rgba(255,255,255,.04);
  border-bottom-color: rgba(255,255,255,.06);
}
body.ds-dark .dmx-layout td,
body.ds-dark .dmx-layout th {
  border-color: rgba(255,255,255,.08);
  color: rgba(218,216,210,.88);
}
body.ds-dark .dmx-layout tr:nth-child(2n) {
  background: rgba(255,255,255,.03);
}

/* ---- 13. Glass-card utility (catch-all for widget--glass-pro) ---- */
body.ds-dark .widget--glass-pro,
body.ds-dark .glass-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  box-shadow:
    0 18px 36px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ---- 14. General text in widgets ---- */
body.ds-dark .section-title,
body.ds-dark .dl-title,
body.ds-dark .specs-title {
  color: rgba(232,230,224,.92);
}

/* ---- 15. Product bar ---- */
/* Eyebrow (family label) — #111 → light */
body.ds-dark #pb.product-bar .eyebrow {
  color: rgba(218,216,210,.65);
  text-shadow: none;
}
/* Range pills — white glass → dark glass */
body.ds-dark #pb.product-bar .rhs .range-pills .pill {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.07));
  color: rgba(218,216,210,.88);
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 2px 6px rgba(0,0,0,.28);
}
body.ds-dark #pb.product-bar .rhs .range-pills .pill.active,
body.ds-dark #pb.product-bar .rhs .range-pills .pill[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.12));
  color: rgba(232,230,224,1);
  box-shadow:
    0 8px 14px rgba(0,0,0,.38),
    inset 0 1px rgba(255,255,255,.14);
}
/* Badges under title — already dark-text on white; invert for dark mode */
body.ds-dark #pb.product-bar .badges .badge {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.10);
  color: rgba(218,216,210,.88);
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 8px 16px rgba(0,0,0,.28);
}

/* ---- 16. Generic DS modal ---- */
body.ds-dark .ds-modal-dialog{
  background: linear-gradient(180deg, rgba(26,23,18,.97), rgba(18,16,12,.97));
  box-shadow:
    0 24px 70px rgba(0,0,0,.60),
    inset 0 1px rgba(255,255,255,.06);
}
body.ds-dark .ds-modal-head{
  background: linear-gradient(180deg, rgba(30,26,18,.95), rgba(22,18,14,.85));
  border-bottom-color: rgba(255,255,255,.08);
}
body.ds-dark .ds-modal-title{ color: rgba(232,230,224,.92); }
body.ds-dark .ds-modal-sub  { color: rgba(154,149,144,.88); }
body.ds-dark .ds-modal-close{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(218,216,210,.90);
  box-shadow: none;
}
body.ds-dark .ds-modal-close:hover{
  background: rgba(255,255,255,.14);
}

/* ---- 17. Key features widget ---- */
body.ds-dark #key-features .kf-detail{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}

/* ---- 18. Photometrics widget ---- */
body.ds-dark section#photometrics-card.photometrics-card,
body.ds-dark section#photometrics-widget.photometrics-card,
body.ds-dark section#photometrics.photometrics-card{
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 36px rgba(0,0,0,.50), inset 0 0 0 1px rgba(255,255,255,.08);
}
body.ds-dark section#photometrics-card.photometrics-card::before,
body.ds-dark section#photometrics-widget.photometrics-card::before{ opacity: 0; }

/* ---- 19. Accessories widget ---- */
body.ds-dark section#accessories-widget.accessories-card{
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 36px rgba(0,0,0,.50), inset 0 0 0 1px rgba(255,255,255,.08);
}
body.ds-dark section#accessories-widget.accessories-card::before{ opacity: 0; }

/* END: DS DARK MODE — component overrides */