/* ============================================================================
   MEGAMENU — l'ingresso al catalogo
   Sess.68. Solo token, `:hover` dentro `@media (hover:hover)`, 4 fasce.
   ⚠️ BOZZA: base su cui reagire, non forma definitiva.
   ========================================================================= */

/* Il pannello sta sotto l'header, che è fisso: `--ds-header-gap` +
   `--ds-header-h` è esattamente lo spazio che occupa. Usare le variabili
   canoniche invece di un numero significa che se l'header cambia altezza il
   menu lo segue da solo. */
.dsm {
  position: fixed;
  z-index: 900;
  top: calc(var(--ds-header-gap, 14px) + var(--ds-header-h, 66px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100vw - 32px));
  max-height: calc(100vh - var(--ds-header-h, 66px) - 48px);
  overflow-y: auto;
  /* sess.71 (V-77): arrivato in fondo al pannello, la rotella continuava a
     scorrere la PAGINA sotto — e la pagina che scorre porta via l'header a cui
     il pannello è ancorato (ora infatti si chiude, megamenu.js). `contain`
     ferma la catena: dentro il pannello si scorre il pannello e basta. */
  overscroll-behavior: contain;
  padding: 26px 28px 20px;
  border-radius: 18px;
  background: var(--ds-c-bg-elevated);
  border: 1px solid var(--ds-c-surface-border);
  box-shadow: inset 3px 0 0 rgba(244, 181, 50, .48),
              inset -3px 0 0 rgba(244, 181, 50, .48);
  color: var(--ds-c-text);
}

body.ds-dark .dsm {
  box-shadow: inset 3px 0 0 rgba(244, 181, 50, .32),
              inset -3px 0 0 rgba(244, 181, 50, .32);
}

.dsm[hidden] { display: none; }

.dsm-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--ds-c-surface);
  color: var(--ds-c-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.dsm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

.dsm-col__title {
  position: relative;
  margin-bottom: 16px;
  padding-left: 14px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: var(--ds-fs-xs);
  letter-spacing: .16em;
  color: var(--ds-c-text-tertiary);
}

/* Barra titolo: il primo dei due accenti del design system. */
.dsm-col__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: linear-gradient(180deg,
              var(--ds-brand-yellow-dark), var(--ds-brand-yellow-light));
}

/* ── i tre assi ortogonali ───────────────────────────────────────────────── */
.dsm-axis { margin-bottom: 12px; }

.dsm-axis__label {
  margin-bottom: 6px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: var(--ds-fs-xs);
  letter-spacing: .14em;
  color: var(--ds-c-text-tertiary);
}

.dsm-pills { display: flex; flex-wrap: wrap; gap: 7px; }

/* Famiglia 3 del design system: pill toggle outline ambra. */
.dsm-pill {
  appearance: none;
  padding: 7px 14px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--ds-c-surface-border);
  background: var(--ds-c-surface);
  color: var(--ds-c-text-secondary);
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.dsm-pill.is-active {
  border-color: var(--ds-c-accent);
  background: var(--ds-c-accent-subtle);
  color: var(--ds-c-text);
}

.dsm-pill:focus-visible,
.dsm-card:focus-visible,
.dsm-serie:focus-visible,
.dsm-close:focus-visible,
.dsm-clear:focus-visible {
  outline: 2px solid var(--ds-c-focus);
  outline-offset: 2px;
}

/* ── la lineup che si restringe ─────────────────────────────────────────── */
.dsm-lineup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-c-surface-border);
}

.dsm-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  background: var(--ds-c-surface);
  text-decoration: none;
  color: var(--ds-c-text);
  /* Colonna singola dentro una griglia → accento SOLO sul proprio lato. */
  box-shadow: inset 3px 0 0 rgba(244, 181, 50, .38);
  transition: background-color .16s ease;
}

.dsm-card__code {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
}

.dsm-card__w {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: var(--ds-fs-xs);
  color: var(--ds-c-text-tertiary);
}

/* Il marcatore di bozza in navigazione: se il debito si vede solo dopo il
   click, in navigazione non esiste. */
.dsm-card__draft {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ds-c-accent-subtle);
  border: 1px solid var(--ds-c-accent-border);
  color: var(--ds-c-accent);
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: var(--ds-fs-xs);
  letter-spacing: .10em;
  text-transform: uppercase;
}

.dsm-count {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: var(--ds-fs-xs);
  letter-spacing: .10em;
  color: var(--ds-c-text-tertiary);
}

.dsm-clear {
  appearance: none;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--ds-c-accent-border);
  background: transparent;
  color: var(--ds-c-accent);
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.dsm-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px;
  border-radius: 12px;
  background: var(--ds-c-surface);
  color: var(--ds-c-text-secondary);
  font-size: 14px;
}

/* ── le collezioni ───────────────────────────────────────────────────────── */
.dsm-col--series {
  padding-left: 28px;
  border-left: 1px solid var(--ds-c-surface-border);
}

.dsm-serie {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  margin-bottom: 10px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--ds-c-surface-border);
  background: var(--ds-c-surface);
  color: var(--ds-c-text);
  text-align: left;
  text-decoration: none;
  /* ⚠️ Serve, e l'ho visto solo guardando: due delle tre collezioni sono
     <button> e una è <a>, perché il Piccoletto ha già una pagina e le altre
     no. I bottoni ereditano `text-transform: uppercase` da ds-buttons.css, e
     il risultato era due descrizioni URLANTI accanto a una scritta normale.
     Qui si azzera e la maiuscola si rimette solo dove è voluta, sul nome. */
  text-transform: none;
  font: inherit;
  transition: border-color .16s ease, background-color .16s ease;
}

/* La mano si mostra solo su cio' che risponde: le voci «in arrivo» sono
   <span>, non controlli. */
a.dsm-serie, button.dsm-serie { cursor: pointer; }

/* Voce ANNUNCIATA ma non ancora raggiungibile: si legge, non si clicca.
   Piu' spenta delle sorelle attive, cosi' la differenza si vede prima di
   provare a cliccare e non dopo. */
.dsm-serie--attesa {
  background: transparent;
  border-style: dashed;
}
.dsm-serie--attesa .dsm-serie__name { color: var(--ds-c-text-secondary); }

.dsm-serie.is-active {
  border-color: var(--ds-c-accent);
  background: var(--ds-c-accent-subtle);
}

/* Voce FIGLIA di una collezione — oggi solo il Piccoletto FLEX, che è una
   destinazione dentro la collezione Piccoletto e non una serie a sé
   (verbale 28/08 §7: è la stessa macchina, esiste il kit di conversione).
   Rientrata e con la barretta: si legge come appartenenza, non come pari. */
.dsm-serie--figlio {
  margin-left: 16px;
  margin-top: -4px;
  border-left: 2px solid var(--ds-c-accent-border);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.dsm-serie__head { display: flex; align-items: center; gap: 8px; }

.dsm-serie__name {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .10em;
}

.dsm-serie__soon {
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--ds-c-surface-border);
  color: var(--ds-c-text-tertiary);
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: var(--ds-fs-xs);
  letter-spacing: .10em;
  text-transform: uppercase;
}

.dsm-serie__desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ds-c-text-secondary);
}

/* ── fascia bassa ────────────────────────────────────────────────────────── */
.dsm-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-c-surface-border);
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.dsm-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-c-text-secondary);
  text-decoration: none;
}

a.dsm-strip__item { color: var(--ds-c-text); }

@media (hover: hover) {
  .dsm-pill:hover { border-color: var(--ds-c-accent-border); color: var(--ds-c-text); }
  .dsm-card:hover { background: var(--ds-c-surface-hover); }
  a.dsm-serie:hover, button.dsm-serie:hover { border-color: var(--ds-c-accent-border); }
  .dsm-close:hover { background: var(--ds-c-surface-hover); }
  a.dsm-strip__item:hover { color: var(--ds-c-accent); }
}

/* ══ FASCE ═══════════════════════════════════════════════════════════════ */

/* app — sotto 1100: il pannello diventa un foglio a tutta larghezza.
   Le collezioni vanno SOTTO il catalogo, non a fianco: in colonna singola una
   griglia a due colonne da 300 px non ci sta, e il catalogo viene prima
   perché è quello che si cerca. */
@media (max-width: 1099.98px) {
  .dsm {
    top: calc(var(--ds-header-gap, 14px) + var(--ds-header-h, 66px) + 6px);
    width: calc(100vw - 16px);
    max-height: calc(100vh - var(--ds-header-h, 66px) - 34px);
    padding: 20px 16px 16px;
    border-radius: 18px;
  }
  .dsm-grid { grid-template-columns: 1fr; gap: 22px; }
  .dsm-col--series {
    padding-left: 0;
    padding-top: 18px;
    border-left: 0;
    border-top: 1px solid var(--ds-c-surface-border);
  }
  .dsm-pill { min-height: 44px; }            /* bersaglio touch */
  .dsm-lineup { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* wide — da 1850: più aria, e la colonna delle serie può respirare.
   `brief_menu_architecture`: «≥1850 = arricchire il più possibile». */
@media (min-width: 1850px) {
  .dsm {
    width: min(1440px, calc(100vw - 48px));
    padding: 32px 34px 24px;
  }
  .dsm-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
  .dsm-lineup { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .dsm-pill, .dsm-card, .dsm-serie { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRISMA A COLONNA — V-52, layout del prototipo approvato (01/09/2026)
   Gli assi stanno a SINISTRA in colonna, la lineup occupa l'area a destra.
   Prima erano due file orizzontali sopra la griglia: stessa informazione,
   ma il prisma si leggeva come «due filtri sopra delle schede» invece che
   come tre strade parallele verso lo stesso apparecchio.
   ⚠️ Sotto i 1100 px la colonna si scioglie e si torna impilati: a quella
   larghezza 250 px di facet mangerebbero meta' della lineup.
   ═══════════════════════════════════════════════════════════════════════ */
.dsm-prisma {
  display: flex;
  gap: 36px;
  align-items: flex-start;
}
.dsm-facets {
  width: 250px;
  flex: 0 0 250px;
}
.dsm-lineup-area {
  flex: 1 1 auto;
  min-width: 0;            /* senza questo la griglia non si stringe mai */
}
/* La nota del prisma: e' la frase che spiega perche' gli assi non sono un
   albero. Sta in fondo alla colonna, dove si legge dopo aver visto i tre
   gruppi — non prima, che sarebbe una premessa a vuoto. */
.dsm-prisma__note {
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.45;
  /* ⛔ 11/09/2026 — qui c'era `var(--ds-c-text-muted, #9A9590)`, e
     `--ds-c-text-muted` NON E' DICHIARATA DA NESSUNA PARTE nel progetto:
     cercata in tutti gli `assets/css/`, 5 usi e 0 dichiarazioni. ⇒ vinceva
     sempre il ripiego, cioe' un grigio FISSO che non sa niente del tema.
     Misurato in pagina: **6,59 di contrasto in scuro** (buono) e **2,84 in
     chiaro** (sotto il minimo di 4,5) — la nota del prisma era leggibile solo
     meta' delle volte, e nessuno se ne accorgeva perche' il megamenu si guarda
     quasi sempre in scuro.
     🔑 Non e' «il colore sbagliato»: e' un colore che NON PUO' cambiare col
     tema, perche' il token da cui dovrebbe dipendere non esiste. Le altre
     quattro occorrenze erano in `portfolio-page.css` e le ho corrette stamattina
     (li' il ripiego era nero su nero: 1,07).
     ⇒ `--ds-c-text-secondary` esiste e ha un valore per ciascun tema. */
  color: var(--ds-c-text-secondary);
}
/* Conteggio + azzera ORA IN TESTA: i due obblighi del verbale §6 (si vede
   cosa e' attivo, si torna indietro in un gesto) valgono solo se il comando
   e' dove guardi, non in fondo alla griglia. */
.dsm-lineup-area .dsm-count {
  margin: 0 0 12px;
}
@media (max-width: 1099.98px) {
  .dsm-prisma { display: block; }
  .dsm-facets { width: auto; flex: none; }
  .dsm-prisma__note { margin-bottom: 14px; }
}

/* ── Il catalogo aperto non ha niente sopra (01/09) ──────────────────────
   A 1150 la titlebar mobile — `position:fixed`, z-990 — restava DAVANTI al
   pannello e copriva la riga «N apparecchi / Azzera i filtri», cioe' proprio
   i due comandi che il verbale §6 chiede di tenere in vista.
   ⚠️ Trovato con `elementFromPoint`, non a occhio: nello screenshot sembrava
   solo una riga tagliata. E' la stessa forma della V-61 (il drawer sopra il
   pannello) e del titolo di stamattina: un elemento che c'e' e non si vede.
   ⭐ Non invento un rimedio: e' gia' il modo in cui il modal DMX risolve lo
   stesso conflitto (`dmx.css`, `body.dmx-modal-open .ds-mobile-titlebar`).
   Stessa grammatica, cosi' il sito ha UNA regola per questo caso e non tre. */
body.dsm-open .ds-mobile-titlebar {
  display: none !important;
}

/* ── LE PAGINE — la riga delle destinazioni (02/09) ───────────────────────
   David: «alle pagine famiglia ci arrivavo solo da mobile». Le stesse voci
   del drawer, sopra la lineup: le schede portano ai PRODOTTI, questa riga
   porta alle PAGINE. Due cose diverse, due righe diverse. */
.dsm-dest{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ds-c-surface-border, rgba(255,255,255,.10));
}
.dsm-dest__label{
  font: 700 10px/1 "Oswald", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ds-c-text-secondary, rgba(255,255,255,.55));
  margin-right: 2px;
}
.dsm-dest__item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .3rem .66rem;
  border-radius: 999px;
  border: 1px solid var(--ds-c-surface-border, rgba(255,255,255,.12));
  background: var(--ds-c-surface, rgba(255,255,255,.05));
  color: inherit;
  text-decoration: none;
  font: 600 12px/1 "Oswald", system-ui, sans-serif;
  letter-spacing: .04em;
  transition: border-color .15s ease, background .15s ease;
}
@media (hover: hover){
  .dsm-dest__item:hover{
    border-color: var(--brand, #F4B532);
    background: var(--ds-surface-3-bg-hover, rgba(244,181,50,.10));
  }
}
.dsm-dest__item:focus-visible{
  outline: 2px solid var(--brand, #F4B532);
  outline-offset: 2px;
}
/* Voce dichiarata «in arrivo»: si vede che c'è, si vede che non è cliccabile. */
.dsm-dest__item.is-soon{
  opacity: .55;
  cursor: default;
  border-style: dashed;
}

/* ══ LA TARGHETTA DEL FILTRO ATTIVO — §6 del verbale 28/08 (V-52, 05/09) ═══
   «① Deve essere evidente cosa e' attivo. ② Deve resettarsi in un gesto.»
   Sta nella riga del conteggio, subito dopo «19 apparecchi»: e' li' che il
   numero ha bisogno del suo perche'.

   ⚠️ PRIMA STESURA SCARTATA SU MISURA, non per gusto: stava nell'header
   accanto a «LIGHTING». Sulle pagine PRODOTTO fra logo e menu restano 40 px a
   1440 e 17 px a 1920 (l'header li' porta anche il toggle unita' «MET»); la
   targhetta ne chiede 75 ⇒ «LIGHTING» finiva sopra il logo. È il muro gia'
   scritto in `header.html` («~75 px a voce») e l'harness lo dice da solo
   (`VOCE-SOVRAPPOSTA`, 4 run su 16). Rimetterla li' e' una decisione di
   architettura dell'header, non una riga di CSS.

   ⭐ Forma: e' la famiglia 3 del design system (pill outline ambra), la stessa
   di `.dsm-clear` che le sta accanto — le due si leggono come una coppia
   «questo e' acceso / spegnilo», non come due oggetti diversi.
   ══════════════════════════════════════════════════════════════════════════ */
.dsm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ds-c-accent-border);
  background: var(--ds-c-accent-subtle);
  color: var(--ds-c-accent);
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}

/* La × e' il comando, quindi si legge come tale: piu' grande del testo e
   piena, non un carattere qualunque in fondo alla parola. */
.dsm-chip__x {
  font-size: 14px;
  line-height: 1;
  opacity: .75;
}

.dsm-chip:focus-visible {
  outline: 2px solid var(--ds-c-focus);
  outline-offset: 2px;
}

@media (hover: hover) {
  .dsm-chip:hover {
    border-color: var(--ds-c-accent);
    background: var(--ds-c-surface-hover);
  }
  .dsm-chip:hover .dsm-chip__x { opacity: 1; }
}

/* La frase che dichiara la PERSISTENZA. Non e' una didascalia decorativa: e'
   l'unica cosa che collega il filtro acceso qui all'effetto che l'utente
   vedra' due clic piu' in la', sulla scheda prodotto. */
.dsm-count__nota {
  margin: 0 0 12px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ds-c-text-tertiary);
}

/* Bersaglio touch pieno sotto i 1100: la targhetta e' un comando. */
@media (max-width: 1099.98px) {
  .dsm-chip { min-height: 40px; padding: 6px 12px; }
}

/* ── La foto nelle card del menu (02/09) ──────────────────────────────────
   Stesso set della lineup famiglia, letto da catalog.json. La card resta
   leggibile anche SENZA foto — i Lite non ce l'hanno ancora — quindi
   l'immagine è un di più che non cambia la struttura della scheda. */
.dsm-card--foto{
  padding-top: 0;
  overflow: hidden;
}
.dsm-card__img{
  display: block;
  width: 100%;
  height: 74px;
  object-fit: contain;
  object-position: center;
  margin: 0 0 8px;
  padding: 8px 6px 0;
  background: rgba(255,255,255,.03);
}
@media (max-width: 1099.98px){
  .dsm-card__img{ height: 58px; }
}

/* La mezza riga sotto le pill di FAMIGLIA (oggi solo SoftNel — David, 08/09).
   Tono da didascalia: deve spiegare senza competere con le pill. */
.dsm-axis__nota {
  margin: 7px 0 0;
  max-width: 46ch;
  font-size: var(--ds-fs-xs);
  line-height: 1.4;
  color: var(--ds-c-text-tertiary);
}
.dsm-axis__nota-nome {
  font-weight: 600;
  color: var(--ds-c-text-secondary);
}


/* ══ LA LINEUP «D» — un binario solo, che fa showreel ═════════════════════
   David, tre volte: «UN BINARIO SOLO dove scorrono le famiglie e le serie in
   sequenza… e quando apri il menu deve fare SHOWREEL», e «non deve impegnare
   la pagina». ⇒ Il pannello resta ALTO UNA FILA: il menu non occupa, scorre.
   ⭐ Il fuoco e' una ZONA, non un posto: nella fascia centrale stanno a piena
   luce PIU' schede insieme. E' il difetto che la D corregge rispetto al
   ventaglio — «non era sbagliato il ventaglio, era sbagliato che il primo
   piano fosse UNO SOLO».
   ⚠️ La griglia `.dsm-lineup` qui sopra resta definita apposta: se un giorno
   si torna indietro, si cambiano due righe di JS e non si riscrive il CSS. */
.dsm-reel {
  position: relative;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-c-surface-border);
  overflow: hidden;
  /* le estremita' sfumano: il binario CONTINUA, non finisce contro un bordo */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.dsm-reel__rail {
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scrollbar-width: none;
  /* ⛔ Niente scroll-snap: il binario scorre da solo, e uno snap combatterebbe
     con lo scorrimento invece di aiutare chi trascina. */
}
.dsm-reel__rail::-webkit-scrollbar { display: none; }
.dsm-reel__rail > * { flex: 0 0 auto; }

/* la seconda copia dell'anello: stessa fila, nessuno stacco visibile */
.dsm-reel__eco { display: contents; }

.dsm-reel .dsm-card {
  width: 138px;
  transition: transform .34s ease, opacity .34s ease, filter .34s ease,
              background-color .16s ease;
}
.dsm-reel .dsm-card[data-fuoco="0"] { transform: none;        opacity: 1;   }
.dsm-reel .dsm-card[data-fuoco="1"] { transform: scale(.94);  opacity: .58; }
.dsm-reel .dsm-card[data-fuoco="2"] { transform: scale(.88);  opacity: .30;
                                      filter: blur(.7px); }

/* Il separatore scorre INSIEME alle schede: e' la sequenza che cambia
   registro, non una riga nuova che si aggiunge sopra. */
.dsm-reel__sep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  align-self: center;
}
.dsm-reel__sep i {
  display: block;
  width: 1px;
  height: 54px;
  background: var(--ds-c-accent-border);
}
.dsm-reel__sep span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: var(--ds-fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ds-c-accent);
  white-space: nowrap;
}

/* Chi ha chiesto meno movimento non lo riceve: niente sfocatura, niente
   arretramento, tutte le schede leggibili allo stesso modo. Lo scorrimento
   automatico e' gia' spento lato JS. */
@media (prefers-reduced-motion: reduce) {
  .dsm-reel .dsm-card { transition: none; }
  .dsm-reel .dsm-card[data-fuoco="1"],
  .dsm-reel .dsm-card[data-fuoco="2"] {
    transform: none; opacity: 1; filter: none;
  }
}

/* Sotto i 700 px il binario non "si adatta": e' gia' la forma giusta. Si
   stringono solo le schede, perche' se ne veda piu' di una. */
@media (max-width: 700px) {
  .dsm-reel .dsm-card { width: 118px; }
  .dsm-reel__sep i { height: 44px; }
}