/*
 * Il comparatore.
 *
 * Volutamente sobrio e senza dipendenze: il tema del sito decide i colori,
 * qui si sistemano solo struttura e leggibilita'. Tutto e' basato su
 * variabili, cosi' chi impagina puo' cambiare l'aspetto senza toccare il
 * plugin.
 */

.twss {
  --twss-bordo: color-mix(in srgb, currentColor 15%, transparent);
  --twss-sfondo-alt: color-mix(in srgb, currentColor 4%, transparent);
  --twss-accento: color-mix(in srgb, currentColor 70%, transparent);
  color: var(--twss-testo, inherit);
  margin: 2rem 0;
  font-size: 0.95rem;
}

/*
 | ⚠️ Un `<button>` NON eredita il colore del testo: il browser gliene da' uno
 | proprio e i temi lo riscrivono quasi sempre — di solito bianco, presumendo
 | uno sfondo colorato. I pulsanti piatti della vetrina («Deseleziona», «Solo
 | preferiti», «Azzera») finivano cosi' bianco su bianco: contrasto 1.
 |
 | La specificita' e' scelta: `.twss :where(button)` vale 0,1,0 — batte il
 | `button {…}` del tema (0,0,1) e pareggia con le nostre classi, quindi da qui
 | in giu' ogni regola che dichiara un colore la sovrascrive. A 0,0,0 avrebbe
 | perso contro il tema; a 0,1,1 avrebbe vinto lei sul pulsante che porta al
 | sito, che il colore ce l'ha.
 */
.twss :where(button, select, input, textarea) {
  color: inherit;
}

.twss__titolo {
  margin: 0 0 1rem;
}

/* --- barra di ricerca e filtri ------------------------------------------- */

.twss__barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--twss-filtro-gap, 0.75rem 1rem);
  align-items: var(--twss-filtro-align, flex-end);
  margin-bottom: 1rem;

  /* ⚠️ Il bordo è un'ombra interna e non un `border`: un bordo trasparente
     occuperebbe comunque due pixel e sposterebbe la barra anche a chi non ha
     scelto niente. Così, senza token, non cambia nulla. */
  background: var(--twss-barra-sfondo, transparent);
  padding: var(--twss-barra-padding, 0);
  border-radius: var(--twss-barra-raggio, 0);
  box-shadow: inset 0 0 0 1px var(--twss-barra-bordo, transparent);
}

/*
 | ⚠️ IL TESTO PER I LETTORI DI SCHERMO E' NASCOSTO ANCHE SENZA IL TEMA.
 |
 | Il renderer usa `screen-reader-text` in tre punti — ricerca, scelta,
 | confronto — e quella classe la possiede il TEMA: e' la convenzione di
 | WordPress, quindi quasi ogni tema serio ce l'ha. Ma «quasi» non e' «sempre»,
 | e questo plugin e' fatto per stare su siti di terzi con temi qualunque.
 |
 | Misurato togliendo la regola dal foglio del tema, che e' il caso vero di «il
 | tema non ce l'ha»: 62 testi comparivano STAMPATI IN PAGINA dentro un solo
 | comparatore — «Aggiungi al confronto» accanto a ogni casella di ogni record,
 | piu' «Scelta» e «Cerca».
 |
 | ⚠️ `:where()` azzera la specificita', ed e' il punto: questa regola vale
 | ZERO, quindi QUALUNQUE definizione del tema la batte — anche se il nostro
 | foglio si carica dopo il suo, come succede qui. Chi fa gia' bene resta
 | com'e'; chi la classe non ce l'ha la riceve. Verificato nei due versi.
 |
 | ⚠️ Niente `:focus` che la renda visibile, a differenza della ricetta
 | canonica di WordPress: quella serve agli skip-link, che si raggiungono col
 | tabulatore. I nostri span stanno dentro una `<label>` e il focus va
 | all'`<input>`, mai a loro — renderli visibili al focus mostrerebbe un testo
 | che nessuno ha chiesto.
 */
:where(.twss .screen-reader-text) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 | ⚠️ IL TESTO PER I LETTORI DI SCHERMO NON ALLARGA LA PAGINA.
 |
 | Gli `<span class="screen-reader-text">` che accompagnano ricerca, scelta e
 | confronto sono `position: absolute` — lo decide il tema, che possiede quella
 | classe. Senza un antenato posizionato si ancorano al BODY: escono cosi' dal
 | contenitore che scorre, e il loro box resta nella posizione statica, cioe'
 | dentro la parte di tabella scorsa a destra. Il documento si allarga.
 |
 | Misurato su un catalogo coi filtri a colonna, a 768px: lo span «Aggiungi al
 | confronto» stava a left 800 su un viewport da 753, e la PAGINA scorreva di
 | 48px. Dove la tabella non scorre il difetto non compare — ed e' il motivo
 | per cui e' rimasto invisibile.
 |
 | ⚠️ Il rimedio non e' rendere lo span piu' piccolo: e' gia' largo 1px.
 | Provato e misurato — una definizione propria con margine negativo e `clip`
 | lascia i 48px, perche' il problema non e' la larghezza ma l'ancora. Serve un
 | contenitore posizionato, e allora il clipping della tabella lo riprende.
 |
 | Su un browser che non conosce `:has()` si ricade nel comportamento di oggi.
 */
.twss label:has(> .screen-reader-text) {
  position: relative;
}

/* --- CF3: orientamento a colonna laterale + cassetto su mobile ----------- */
/*
 | In modalita' «colonna» la barra dei filtri diventa una sidebar a sinistra e
 | i risultati stanno a destra. E' CSS puro sui figli diretti della radice —
 | nessuna ristrutturazione del markup — quindi in modalita' «barra» (di serie)
 | non cambia niente. Il grid mette il cassetto dei filtri in colonna 1 e tutto
 | il resto in colonna 2.
 */
/*
 | ⚠️ La griglia sta su un contenitore PROPRIO con due soli figli — il
 | cassetto e la colonna dei risultati — e non sui figli diretti della radice.
 |
 | Prima ci stava, e il difetto era invisibile al codice: ogni blocco (titolo,
 | conteggio, elenco, nota...) diventava una RIGA, il cassetto ne occupava una
 | sola, e quella riga si dimensionava sulla barra. Risultato misurato: fra il
 | titolo e la tabella si apriva un vuoto di 842px, alto quanto i filtri.
 |
 | `grid-row: 1 / -1` sembrava rimediare ed era inerte: `-1` guarda la griglia
 | ESPLICITA, che qui non esiste, quindi degradava a una riga sola. E uno
 | `span` grande non e' un rimedio: le tracce vuote portano il proprio gap —
 | misurato, `span 200` raddoppia l'altezza della pagina.
 |
 | Con due figli il conto torna da se': nessun numero da indovinare.
 */
.twss[data-orientamento="colonna"] .twss__disposizione {
  display: grid;
  /*
   | ⚠️ `minmax(0, 1fr)` e non `1fr`: quest'ultimo ha come minimo il
   | `min-content` del proprio contenuto, quindi una tabella larga allargava
   | la colonna invece di scorrere — misurato, da 838 a 1072px, con la
   | sidebar che si stringeva per far posto.
   */
  grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* Nel cassetto i filtri si impilano verticalmente. */
.twss[data-orientamento="colonna"] .twss__barra {
  flex-direction: column;
  align-items: stretch;
}

/*
 | Il cassetto e' un <details> nativo: nessun JavaScript. Su desktop il titolo
 | e' nascosto e il cassetto resta aperto (una sidebar non si chiude). Su
 | mobile il titolo diventa un pulsante «Filtri» che apre e chiude — e senza
 | JavaScript, se qualcuno lo disattivasse, il <details open> resta aperto:
 | i filtri non spariscono mai.
 */
.twss__cassetto > .twss__cassetto-titolo {
  display: none;
}

@media (max-width: 720px) {
  /*
   | ⚠️ Si disfa la griglia sul CONTENITORE, non sulla radice.
   |
   | Questa regola puntava a `.twss`, ed era rimasta indietro al giorno in cui
   | la griglia si e' spostata su `.twss__disposizione` (il contenitore con due
   | soli figli, per chiudere il vuoto di 842px). Puntando a un elemento che
   | griglia non e' piu' — e che era gia' `display: block` di suo — non faceva
   | niente E NON DAVA ERRORE.
   |
   | Misurato su un catalogo coi filtri a colonna, a 375px: la griglia restava
   | `256px 35px`, cioe' il cassetto si prendeva 256px fissi e alla colonna dei
   | risultati ne restavano 35. La pagina scorreva di 248px e 275 celle
   | sforavano. Ora il cassetto va sopra a piena larghezza e i risultati sotto,
   | che e' quello che questa media query voleva fin dall'inizio.
   */
  .twss[data-orientamento="colonna"] .twss__disposizione {
    display: block;
  }

  .twss__cassetto > .twss__cassetto-titolo {
    display: block;
    cursor: pointer;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--twss-campo-bordo, var(--twss-bordo));
    border-radius: var(--twss-campo-raggio, 0.375rem);
    font-weight: 600;
    list-style: none;
  }

  .twss__cassetto > .twss__cassetto-titolo::-webkit-details-marker {
    display: none;
  }

  .twss__cassetto > .twss__cassetto-titolo::after {
    content: " \25be";
  }

  .twss__cassetto[open] > .twss__cassetto-titolo::after {
    content: " \25b4";
  }
}

/*
 | ⚠️ Barra dei filtri fissa — SOLO su richiesta della proprietà (voce
 | «Barra dei filtri sempre in vista»), e per una ragione tecnica oltre
 | che di gusto: una barra fissa vuole uno SFONDO opaco (i record le
 | scorrono sotto e la si leggerebbe attraverso, come la colonna fissa
 | più sotto), mentre la barra di serie è trasparente per fondersi con
 | la pagina. Fissarla sempre imporrebbe uno sfondo a chi non l'ha chiesto.
 |
 | `top` è una variabile: un sito con un'intestazione fissa la sposta con
 | `--twss-sticky-top`. Lo `sticky` è delimitato da `.twss`: scorrendo oltre
 | il comparatore la barra si stacca da sola, non invade il resto della pagina.
 */
.twss[data-barra-sticky] .twss__barra {
  position: sticky;
  top: var(--twss-sticky-top, 0);
  z-index: 4;
  background: var(--twss-barra-sfondo, var(--twss-sfondo, #fff));
  padding: var(--twss-barra-padding, 0.5rem 0.75rem);
  box-shadow:
    inset 0 0 0 1px var(--twss-barra-bordo, transparent),
    0 0.35rem 0.5rem -0.35rem var(--twss-bordo);
}

/* --- preset rapidi (scorciatoie) ----------------------------------------- */
/*
 | Pillole che applicano piu' filtri in un clic. Riusano i colori del filtro
 | «scelto»: sono la stessa idea (una scelta pronta), detta in forma di
 | scorciatoia. Vuoto = il contenitore non si stampa affatto (byte-identico).
 */
.twss__preset {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.twss__preset-btn {
  border: 1px solid var(--twss-scelto-bordo, var(--twss-bordo));
  background: var(--twss-scelto-sfondo, var(--twss-sfondo-alt));
  color: var(--twss-scelto-testo, inherit);
  border-radius: var(--twss-chip-raggio, 999px);
  padding: 0.35rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
}

.twss__preset-btn:hover {
  filter: brightness(0.97);
}

.twss__ricerca input {
  min-width: min(18rem, 100%);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--twss-campo-bordo, var(--twss-bordo));
  border-radius: var(--twss-campo-raggio, 0.375rem);
  font: inherit;
  background: var(--twss-campo-sfondo, transparent);
  color: var(--twss-campo-testo, inherit);
}

/* ⚠️ Il ripiego del focus è il bordo NORMALE, non l'accento: chi non ha
   scelto un colore per il campo attivo continua a vedere quello che vedeva,
   cioè il contorno del browser e nient'altro. */
.twss__ricerca input:focus {
  border-color: var(--twss-campo-focus, var(--twss-campo-bordo, var(--twss-bordo)));
}

.twss__filtro {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85em;
}

.twss__filtro select {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--twss-campo-bordo, var(--twss-bordo));
  border-radius: var(--twss-campo-raggio, 0.375rem);
  font: inherit;
  max-width: 14rem;
  background: var(--twss-campo-sfondo, transparent);
  color: var(--twss-campo-testo, inherit);
}

.twss__filtro select:focus {
  border-color: var(--twss-campo-focus, var(--twss-campo-bordo, var(--twss-bordo)));
}

/* Un filtro su cui è stata fatta una scelta.
   ⚠️ La classe la mette il browser, perché è lui a sapere quando un menu ha
   un valore: senza, tre token resterebbero interruttori che non fanno niente.
   I ripieghi sono quelli del campo normale, quindi chi non li sceglie non
   vede alcuna differenza fra un filtro scelto e uno vuoto — che è il
   comportamento di oggi. */
.twss__filtro--scelto select {
  background: var(--twss-scelto-sfondo, var(--twss-campo-sfondo, transparent));
  color: var(--twss-scelto-testo, var(--twss-campo-testo, inherit));
  border-color: var(--twss-scelto-bordo, var(--twss-campo-bordo, var(--twss-bordo)));
}

/*
 | Le pastiglie dei filtri scelti.
 |
 | ⚠️ Riusano i token del «filtro scelto» invece di averne di propri: sono la
 | stessa cosa detta due volte — quale filtro e' stato scelto — e due coppie
 | di colori per lo stesso concetto divergerebbero al primo che ne cambia una
 | sola. Chi colora il filtro scelto colora anche le pastiglie.
 */
.twss__chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}

.twss__chip[hidden] {
  display: none;
}

.twss__chip-etichetta {
  font-size: 0.85rem;
  color: var(--twss-conteggio-testo, inherit);
  opacity: 0.75;
}

.twss__chip-voce {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
  border: 1px solid var(--twss-scelto-bordo, var(--twss-campo-bordo, var(--twss-bordo)));
  border-radius: var(--twss-chip-raggio, 999px);
  background: var(--twss-scelto-sfondo, var(--twss-campo-sfondo, transparent));
  color: var(--twss-scelto-testo, var(--twss-campo-testo, inherit));
}

.twss__chip-voce:hover,
.twss__chip-voce:focus-visible {
  /* Non un colore nuovo: la stessa pastiglia, un po' piu' marcata. */
  filter: brightness(0.95);
}

.twss__azzera {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--twss-bordo);
  border-radius: 0.375rem;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.twss__azzera:hover {
  border-color: var(--twss-accento);
}

.twss__conteggio {
  margin: 0 0 0.5rem;
  font-size: 0.85em;
  opacity: 0.75;
  color: var(--twss-conteggio-testo, inherit);

  /* ⚠️ Lo sfondo si applica al testo e non a tutta la riga: `display` resta
     quello di un paragrafo, quindi senza token non cambia nulla. Chi lo
     colora ottiene una banda larga quanto il paragrafo — dichiarato
     nell'aiuto del token, invece di aggiungerne un altro per lo spazio
     interno di un caso marginale. */
  background: var(--twss-conteggio-sfondo, transparent);
}

/* Quando i filtri non lasciano niente: si vede, ma non allarma — è una
   ricerca senza esito, non un guasto. */
.twss__senza-esito {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px dashed var(--twss-bordo);
  border-radius: 0.5rem;
  text-align: center;
  opacity: 0.85;
}

/* La risposta a un gesto, accanto al gesto. */
.twss__avviso-breve {
  display: inline-block;
  margin-inline-start: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  background: var(--twss-sfondo-alt);
  font-size: 0.8em;
  vertical-align: middle;
}

/* Il tetto dichiarato: si vede senza gridare, ma non si confonde col
   conteggio — sono due informazioni diverse. */
.twss__estratto {
  margin: 0 0 0.75rem;
  font-size: 0.85em;
  opacity: 0.9;
}

/* --- pagine --------------------------------------------------------------- */

.twss__pagine {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
}

.twss__pagine button {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--twss-bordo);
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.twss__pagine button:hover:not(:disabled) {
  border-color: var(--twss-accento, currentColor);
}

/* Un pulsante spento resta leggibile: la trasparenza dice «non ora», non
   «non esiste». */
.twss__pagine button:disabled {
  opacity: 0.45;
  cursor: default;
}

.twss__pagina-quale {
  font-size: 0.9em;
  opacity: 0.8;
}

/* --- tabella -------------------------------------------------------------- */

.twss__scorri {
  overflow-x: auto;
  border: 1px solid var(--twss-bordo);
  border-radius: 0.5rem;

  /* Senza, dentro una griglia il contenitore non si stringe e non scorre. */
  min-width: 0;
}

/*
 | ⚠️ QUANDO LE COLONNE NON CI STANNO, SI SCORRE — NON SI COMPRIME.
 |
 | `overflow-x: auto` c'era gia' e non serviva a niente: la tabella e'
 | `width: 100%`, quindi non superava mai il contenitore e invece di scorrere
 | schiacciava le colonne finche' il testo andava a capo. Misurato:
 | `scrollWidth` uguale a `clientWidth`, 838 contro 838.
 |
 | Il rimedio NON e' `min-width: max-content` sulla tabella: con
 | `table-layout: auto` il browser distribuisce l'eccesso su tutte le colonne,
 | e la tabella passava a 6557px — un «8,80» in una colonna larga 1276.
 |
 | Si dice invece quali celle non hanno motivo di andare a capo: numeri, date,
 | si'/no, valori da elenco e nomi di azienda. Il testo libero conserva il suo
 | ritorno a capo — una descrizione su una riga sola sarebbe illeggibile — ma
 | con una larghezza minima sotto la quale non lo si schiaccia.
 |
 | La somma dei minimi diventa la larghezza naturale della tabella: se ci sta
 | resta com'era, se non ci sta il contenitore scorre.
 */
/*
 | ⚠️ QUI STANNO SOLO I VALORI CHE SPEZZATI DIVENTANO ILLEGGIBILI: un numero,
 | una data, un si/no. `select` e `company_ref` NON ci sono piu' — i loro
 | valori sono ETICHETTE («Coding e sviluppo», il nome di un'azienda), che su
 | due righe si leggono benissimo e che tenute su una sola allargano la
 | colonna oltre misura: su Servizi AI «Categoria» prendeva 189px e la tabella
 | scorreva di 76px su tablet nonostante i numeri di serie.
 |
 | E' la stessa distinzione gia' misurata per «Piu' informazioni»: conta la
 | natura del valore, non il tipo dichiarato.
 */
.twss__tabella td[data-tipo='number'],
.twss__tabella td[data-tipo='decimal'],
.twss__tabella td[data-tipo='date'],
.twss__tabella td[data-tipo='checkbox'] {
  white-space: nowrap;
}

/*
 | ⚠️ L'INTESTAZIONE NON DEVE DECIDERE QUANTO E' LARGA LA SUA COLONNA.
 |
 | La regola qui sopra vale per i VALORI, dove serve: un numero spezzato a
 | meta' e' illeggibile. Applicata anche alle intestazioni — com'era fino al
 | 2026-08-11 — fa dimensionare la colonna sul proprio NOME: «Punteggio
 | complessivo (0-10)» prendeva 246px per mostrare «9,20». Tre colonne cosi'
 | sprecavano cinquecento pixel, ed erano la ragione per cui la tabella
 | scorreva fuori dal tema anche su un computer.
 |
 | Un nome di colonna sono due o quattro parole: su due righe si legge
 | benissimo. Misurato sulla vetrina vera: 1683px -> 1150px.
 */
.twss__tabella thead th {
  white-space: normal;
}

/*
 | Il minimo di una colonna di testo libero. 10rem e' una taratura, non una
 | garanzia: con abbastanza colonne nessun minimo fa stare la tabella dentro
 | un tema stretto — a quello serve la scelta delle colonne, che si fa dal
 | pannello. Qui si guadagnano gli ultimi trentadue pixel che separavano la
 | vetrina di prova dal non scorrere affatto.
 */
.twss__tabella td[data-tipo='text'] {
  min-width: 10rem;
}

.twss__tabella {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.twss__tabella th,
.twss__tabella td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--twss-bordo);
  vertical-align: top;
}

.twss__tabella tbody tr:nth-child(even) {
  background: var(--twss-sfondo-alt);
}

/*
 | La prima colonna ferma mentre le altre scorrono.
 |
 | ⚠️ Sono DUE celle e non una: la prima e' quella delle caselle, che da sola
 | non identifica niente. Fissare solo lei lascerebbe scorrere via il nome —
 | cioe' l'unica cosa che serve sapere mentre si guarda la sesta colonna.
 |
 | ⚠️ Lo sfondo e' obbligatorio: una cella `sticky` senza sfondo e'
 | trasparente, e il contenuto che le scorre sotto le si legge attraverso.
 | `inherit` prende quello della riga, comprese le righe alternate.
 */
.twss__tabella--fissa th:nth-child(-n + 2),
.twss__tabella--fissa td:nth-child(-n + 2) {
  position: sticky;
  background: inherit;
}

.twss__tabella--fissa th:first-child,
.twss__tabella--fissa td:first-child {
  left: 0;
  z-index: 1;
}

.twss__tabella--fissa th:nth-child(2),
.twss__tabella--fissa td:nth-child(2) {
  /* Larghezza della colonna delle caselle: la fila che la precede. */
  left: 3rem;
  z-index: 1;
}

/*
 | ⚠️ Le intestazioni stanno sopra le celle: incrociandosi, l'angolo in alto a
 | sinistra deve mostrare l'intestazione, non la prima riga di dati.
 */
.twss__tabella--fissa thead th:nth-child(-n + 2) {
  z-index: 2;
  background: var(--twss-th-sfondo, var(--twss-sfondo, inherit));
}

.twss__tabella--fissa tbody tr {
  background: var(--twss-sfondo, transparent);
}

.twss__tabella--fissa tbody tr:nth-child(even) {
  background: var(--twss-sfondo-alt);
}

.twss__tabella tbody tr[hidden] {
  display: none;
}

.twss__tabella td[data-tipo='number'],
.twss__tabella td[data-tipo='decimal'],
.twss__tabella th[data-tipo='number'],
.twss__tabella th[data-tipo='decimal'] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.twss__ordina {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.twss__freccia::after {
  content: '↕';
  opacity: 0.35;
}

.twss__ordina[data-verso='asc'] .twss__freccia::after {
  content: '↑';
  opacity: 1;
}

.twss__ordina[data-verso='desc'] .twss__freccia::after {
  content: '↓';
  opacity: 1;
}

/* --- valori --------------------------------------------------------------- */

.twss__bool {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8em;
  border: 1px solid var(--twss-bordo);
}

.twss__bool--si {
  border-color: var(--twss-si, color-mix(in srgb, green 40%, transparent));
}

.twss__tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  margin: 0 0.15rem 0.15rem 0;
  border-radius: 0.25rem;
  font-size: 0.8em;
  background: var(--twss-sfondo-alt);
}

/*
 | I primati: «Il piu' economico», «Piu' server».
 |
 | ⚠️ Prendono l'accento invece di avere token propri, e non e' pigrizia: un
 | token si offre negli Stili, e li' comparirebbe anche per i moduli che non
 | dichiarano alcun primato — un interruttore che promette cio' che quel sito
 | non stampa. Quando servira' colorarli a parte, si aggiunge il gruppo; per
 | ora seguono il voto, che e' la marcatura piu' vicina.
 */
/*
 | Il selettore di vista.
 |
 | ⚠️ Il markup nasce `hidden` e lo script lo mostra: senza JavaScript i
 | pulsanti non farebbero niente. Il CSS non lo forza visibile per la stessa
 | ragione — un commutatore che non commuta e' peggio della sua assenza.
 */
.twss__viste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
}

.twss__vista {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--twss-campo-bordo, var(--twss-bordo));
  border-radius: var(--twss-barra-raggio, 0.4rem);
  background: var(--twss-campo-sfondo, transparent);
  color: var(--twss-campo-testo, inherit);
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
}

.twss__vista[aria-pressed='true'] {
  background: var(--twss-scelto-sfondo, var(--twss-sfondo-alt));
  color: var(--twss-scelto-testo, inherit);
  border-color: var(--twss-scelto-bordo, var(--twss-accento));
  font-weight: 600;
}

.twss__vista[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.twss__migliori {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.twss__migliore {
  padding: 0.05rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--twss-accento-tenue, #eef2ff);
  color: var(--twss-accento, #3730a3);
}

.twss__voto {
  font-weight: 600;
  cursor: help;
}

.twss__vuoto {
  opacity: 0.4;
}

.twss__nota {
  margin-top: 0.75rem;
  font-size: 0.8em;
  opacity: 0.6;
}

.twss__avviso {
  padding: 0.75rem 1rem;
  border: 1px solid var(--twss-bordo);
  border-radius: 0.375rem;
}

.twss__avviso--errore {
  border-color: var(--twss-no, color-mix(in srgb, red 45%, transparent));
}

/* --- dove NON si vede una colonna ----------------------------------------
 *
 * Otto colonne su un tablet non ci stanno: o si stringono finche' il testo va
 * a capo, o si fa scorrere la tabella fuori dal layout del tema, o se ne
 * mostrano meno. Le prime due sono state provate entrambe e scartate — questa
 * e' la terza, ed e' l'unica che non chiede a chi legge di lavorare.
 *
 * ⚠️ Le soglie sono le STESSE dei pezzi della scheda e di «Piu' informazioni»:
 * uno schermo dev'essere lo stesso schermo in tutte le scelte del pannello, o
 * «tablet» significherebbe due cose in due schede vicine.
 */
@media (min-width: 1025px) {
  .twss__col--senza-desktop { display: none; }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .twss__col--senza-tablet { display: none; }
}

@media (max-width: 720px) {
  .twss__col--senza-mobile { display: none; }
}

/* ⚠️ Sotto i 640 la tabella diventa un elenco di schede, e li' il problema
 * della larghezza NON esiste: una colonna tolta dalla regola di serie torna a
 * vedersi. Una tolta apposta no — le distingue `data-colonne-scelte`, che la
 * Suite mette solo quando la proprieta' ha davvero scelto. Senza questa
 * riga, chi non ha configurato nulla si ritroverebbe le schede impoverite
 * dove non serviva a niente. */
@media (max-width: 640px) {
  .twss:not([data-colonne-scelte]) .twss__tabella .twss__col--senza-mobile {
    display: flex;
  }
}

/* ⚠️ E per la stessa ragione, al contrario: sotto i 640 la tabella mostra di
 * nuovo tutte le colonne, quindi la voce che «Piu' informazioni» aveva aggiunto
 * per recuperarne una diventa un doppione. Vale solo dove nessuno ha scelto —
 * con una scelta esplicita la colonna resta nascosta e la voce serve. */
@media (max-width: 640px) {
  .twss:not([data-colonne-scelte]) .twss__info-voce--doppione {
    display: none;
  }
}

/* --- schermi stretti: la tabella diventa un elenco di schede -------------- */

@media (max-width: 640px) {
  .twss__scorri {
    border: 0;
  }

  .twss__tabella thead {
    display: none;
  }

  .twss__tabella,
  .twss__tabella tbody,
  .twss__tabella tr,
  .twss__tabella td {
    display: block;
    width: 100%;
  }

  .twss__tabella tr {
    border: 1px solid var(--twss-bordo);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0;
  }

  .twss__tabella tbody tr:nth-child(even) {
    background: none;
  }

  .twss__tabella td {
    border: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
  }

  .twss__tabella td::before {
    content: attr(data-etichetta);
    font-weight: 600;
    text-align: left;
    opacity: 0.7;
  }

  /*
   | ⚠️ LE PASTIGLIE DI UNA CELLA VANNO A CAPO.
   |
   | Qui sopra la cella e' `flex` per tenere l'etichetta a sinistra e il valore
   | a destra. Un TESTO lungo va a capo dentro se' stesso e non ha bisogno di
   | nulla; le pastiglie di un campo a piu' valori sono invece elementi
   | SEPARATI, cioe' figli flex, e senza `wrap` restano su una riga sola.
   | Misurato su un catalogo con otto voci in cella: 119 celle sforavano e il
   | contenitore scorreva di 463px — il contenuto usciva dallo schermo.
   |
   | ⚠️ Si tocca SOLO chi ha pastiglie, e la ragione non e' prudenza: e'
   | che il wrap serve dove ci sono piu' figli. Dandolo a ogni cella, su un
   | catalogo senza pastiglie la tabella cresceva di 123px senza che nulla lo
   | chiedesse — misurato.
   |
   | ⚠️ E si ancora alla cella-DATO (`[data-etichetta]`): la riga di
   | dettaglio ha un `td` in colspan che contiene le pastiglie del blocco
   | informativo, e senza quell'ancora il rimedio ne cambierebbe il layout su
   | ogni catalogo — misurato anche quello.
   |
   | L'etichetta si prende una riga intera, cosi' i valori restano allineati a
   | destra come in ogni altra cella invece di spargersi con `space-between`.
   |
   | Su un browser che non conosce `:has()` si ricade nel comportamento di
   | oggi: il contenuto scorre, che e' cio' che gia' succede.
   */
  .twss__tabella td[data-etichetta]:has(.twss__tag) {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.35rem;
  }

  .twss__tabella td[data-etichetta]:has(.twss__tag)::before {
    flex: 1 0 100%;
  }

  /*
   | ⚠️ LA CELLA DEI COMANDI NON RESTA LARGA L'1%.
   |
   | `width: 1%` — piu' sotto, sulla colonna dei comandi — e' l'idioma classico
   | per «stretta quanto il contenuto»: in una TABELLA il browser lo legge come
   | «il minimo possibile». Qui la cella e' `display: flex`, e li' significa
   | letteralmente l'uno per cento: 26px su 315, col contenuto che ne vuole 68
   | e un `nowrap` che gli impedisce di adattarsi.
   |
   | Misurato: 224 celle su un catalogo di anagrafica, 198 su un altro — una
   | per record, con la stella dei preferiti tagliata.
   |
   | ⚠️ Riguarda solo chi NON ha la colonna «Azioni»: dove c'e', i comandi
   | migrano li' e questa colonna sparisce. E' il motivo per cui nessun
   | comparatore lo mostrava, e il difetto e' rimasto invisibile finche' non si
   | e' guardato un datalist.
   */
  .twss__tabella td.twss__controlli {
    width: auto;
  }
}

/* ═══ Modalità schede ══════════════════════════════════════════════════════
 *
 * Una griglia che si adatta da sé: `auto-fill` con una larghezza minima evita
 * di dichiarare quante colonne stanno su ogni dispositivo — che sarebbe una
 * decisione da rifare a ogni tema in cui il comparatore viene inserito.
 */
.twss__elenco {
    display: grid;
    gap: 1rem;
}

/*
 | ⚠️ LE SCHEDE VICINE NON SI SPOSTANO QUANDO SE NE APRE UNA.
 |
 | Di serie una griglia allunga ogni cella all'altezza della piu' alta: bastava
 | aprire un blocco in una scheda perche' le altre si stirassero e il loro
 | pulsante scendesse in fondo. Chi non ha aperto niente non deve vedersi
 | spostare i comandi sotto il dito.
 |
 | La regola vale SOLO dove c'e' qualcosa da aprire: dove non ci sono blocchi
 | richiudibili, l'altezza uniforme di sempre resta com'era. Su un browser che
 | non conosce `:has()` si ricade in quel comportamento, che e' quello di oggi.
 */
.twss__elenco:has(details) {
    align-items: start;
}

/* --- «Più informazioni»: i campi che la vetrina non mostra --------------- */

/* ===== La finestra ==================================================
 * Presentazione dello STESSO markup del blocco in linea: nessun contenuto
 * duplicato, quindi niente da tenere allineato fra due copie.
 */
.twss__finestra {
  width: min(var(--twss-info-larghezza, 46rem), calc(100vw - 2rem));
  max-height: min(46rem, calc(100vh - 4rem));
  padding: 0;
  border: 1px solid var(--twss-info-bordo, var(--twss-bordo, rgba(0, 0, 0, .12)));
  border-radius: var(--twss-info-raggio, var(--twss-campo-raggio, .5rem));
  background: var(--twss-info-sfondo, var(--twss-sfondo-resa, #fff));
  color: var(--twss-info-testo, inherit);
  font-size: var(--twss-info-dim, inherit);
  overflow: hidden;
}

/*
 * ⚠️ Il velo e' DUE token e non uno: il tipo «colore» del catalogo ammette
 * solo #rrggbb, quindi la trasparenza si ottiene mescolando — invece di
 * introdurre un formato che il resto del catalogo non saprebbe validare.
 */
.twss__finestra::backdrop {
  background: color-mix(
    in srgb,
    var(--twss-info-velo, #000) var(--twss-info-velo-opacita, 50%),
    transparent
  );
}

.twss__finestra-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--twss-info-bordo, var(--twss-bordo, rgba(0, 0, 0, .12)));
}

.twss__finestra-titolo {
  margin: 0;
  font-weight: 600;
}

.twss__finestra-quale {
  font-weight: 400;
  color: var(--twss-info-etichetta, var(--twss-tenue, #6b7280));
}

.twss__finestra-chiudi {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--twss-chip-raggio, .375rem);
  background: transparent;
  color: inherit;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}

.twss__finestra-chiudi:hover,
.twss__finestra-chiudi:focus-visible {
  border-color: var(--twss-bordo, rgba(0, 0, 0, .2));
}

/* Il titolo lo porta la barra: il summary qui sarebbe un doppione cliccabile. */
.twss__finestra .twss__info-titolo {
  display: none;
}

.twss__finestra .twss__info {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.twss__finestra .twss__info-corpo {
  /*
   * ⚠️ `border-box` non e' pignoleria: l'altezza massima e' calcolata, e con
   * `content-box` il padding si sommerebbe ad essa — la finestra sforerebbe
   * lo schermo proprio sui telefoni.
   */
  box-sizing: border-box;
  max-height: calc(min(46rem, 100vh - 4rem) - 4rem);
  padding: var(--twss-info-padding, 1rem);
  overflow-y: auto;
}

/* Il campo di ricerca sta dentro lo stesso margine del contenuto. */
.twss__finestra .twss__info-cerca {
  margin: var(--twss-info-padding, 1rem);
  margin-bottom: 0;
  width: calc(100% - 2 * var(--twss-info-padding, 1rem));
}

/* Il comando che il JS lascia dove stava il blocco. */
.twss__info-apri {
  align-self: start;
  margin-top: .5rem;
  padding: .35rem .7rem;
  border: 1px solid var(--twss-bordo, rgba(0, 0, 0, .2));
  border-radius: var(--twss-chip-raggio, .375rem);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.twss__info-apri:hover,
.twss__info-apri:focus-visible {
  border-color: currentColor;
}

/*
 * Con la finestra la riga di dettaglio non ha piu' nulla da mostrare: senza
 * questa regola resterebbe un filo vuoto sotto ogni record della tabella.
 */
.twss__tabella tbody tr.twss__correlate-riga--finestra,
.twss__correlate-riga--finestra {
  display: none;
}

/*
 * Il campo di ricerca interno a «Più informazioni». Nasce `hidden` e lo mostra
 * il JS: senza JavaScript non comparirebbe un controllo che non filtra nulla.
 */
.twss__info-cerca {
    width: 100%;
    max-width: 22rem;
    margin-top: .5rem;
    padding: .3rem .55rem;
    border: 1px solid var(--twss-bordo, rgba(0, 0, 0, .2));
    border-radius: var(--twss-campo-raggio, .375rem);
    background: transparent;
    color: inherit;
    font: inherit;
}

.twss__info {
    margin-top: .75rem;
    padding-top: .5rem;
    border-top: 1px solid var(--twss-info-bordo, var(--twss-bordo));
    color: var(--twss-info-testo, inherit);
    font-size: var(--twss-info-dim, inherit);
}

.twss__info-titolo {
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
}

.twss__info-corpo {
    /*
     | Le sezioni si affiancano se c'e' spazio e si impilano se non ce n'e':
     | in una riga di tabella lo spazio e' tutta la larghezza, dentro una
     | scheda e' una colonna sola.
     */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: .75rem 1.5rem;
    margin-top: .6rem;
}

/*
 * Le colonne dichiarate dal costruttore. La classe sta sulla RADICE, dove
 * scrive il ponte dell'anteprima: cosi' si vedono prima di salvare. Senza,
 * chi non compone resta sulla disposizione automatica di sopra.
 *
 * ⚠️ Il numero di colonne e' un MASSIMO, non una divisione: `minmax(100%/N)`
 * darebbe N-1 colonne per l'accumulo dei gap. Si sottraggono, come nelle card.
 */
.twss--info-colonne .twss__info-corpo {
    grid-template-columns: repeat(
        auto-fill,
        minmax(
            min(
                100%,
                max(
                    10rem,
                    calc(
                        (100% - (var(--twss-info-col-mobile, 1) - 1) * 1.5rem)
                        / var(--twss-info-col-mobile, 1)
                    )
                )
            ),
            1fr
        )
    );
}

@media (min-width: 48em) {
    .twss--info-colonne .twss__info-corpo {
        grid-template-columns: repeat(
            auto-fill,
            minmax(
                min(
                    100%,
                    max(
                        10rem,
                        calc(
                            (100% - (var(--twss-info-col-tablet, 1) - 1) * 1.5rem)
                            / var(--twss-info-col-tablet, 1)
                        )
                    )
                ),
                1fr
            )
        );
    }
}

@media (min-width: 64em) {
    .twss--info-colonne .twss__info-corpo {
        grid-template-columns: repeat(
            auto-fill,
            minmax(
                min(
                    100%,
                    max(
                        10rem,
                        calc(
                            (100% - (var(--twss-info-col-desktop, 1) - 1) * 1.5rem)
                            / var(--twss-info-col-desktop, 1)
                        )
                    )
                ),
                1fr
            )
        );
    }
}

.twss__info-sezione-titolo {
    margin: 0 0 .35rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--twss-info-sezione, var(--twss-tenue, #6b7280));
}

.twss__info-dl {
    margin: 0;
}

.twss__info-voce {
    /*
     * ⚠️ UNA variabile governa i tre casi: assente, le voci stanno accanto e
     * solo quelle lunghe vanno a blocco (la regola qui sotto); impostata, vale
     * per tutte — perche' la stessa variabile compare in entrambe le regole.
     */
    display: var(--twss-info-voce-display, flex);
    gap: .75rem;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--twss-info-spazio, .2rem) 0;
    border-bottom: var(--twss-info-separatore, 1px) solid var(--twss-info-bordo, var(--twss-bordo));
}

.twss__info-voce:last-child {
    border-bottom: 0;
}

.twss__info-voce dt {
    color: var(--twss-info-etichetta, var(--twss-tenue, #6b7280));
    font-weight: var(--twss-info-etichetta-peso, inherit);
}

.twss__info-voce dd {
    margin: 0;
    text-align: right;
    /* Il valore non si comprime a favore dell'etichetta. */
    flex: 0 1 auto;
}

/*
 * Una coppia col valore lungo si dispone a blocco: etichetta sopra, valore
 * sotto, tutto a sinistra.
 *
 * ⚠️ Non e' una preferenza. Affiancati, `space-between` e `text-align: right`
 * vanno benissimo per «no» e «0,00» — misurato — e su un paragrafo di cento
 * caratteri comprimono l'etichetta finche' si spezza («Fonte / dei / dati») e
 * allineano a destra un testo che si legge da sinistra.
 */
.twss__info-voce[data-lungo] {
    display: var(--twss-info-voce-display, block);
}

.twss__info-voce[data-lungo] dd {
    margin-top: .15rem;
    text-align: left;
}

/*
 | ⚠️ DOVE LA COLONNA SI VEDE, LA SUA VOCE NON SI VEDE.
 |
 | Una colonna tolta su uno schermo stretto viene recuperata qui dentro; sullo
 | schermo dove la colonna c'e', la voce sarebbe un doppione dello stesso dato.
 |
 | La specificita' e' scelta: `0,2,0` batte `.twss__info-voce` (0,1,0), che
 | dichiara `display` ed e' piu' in basso nel foglio — misurato nel browser,
 | perche' con la sola classe dello schermo la voce restava visibile accanto
 | alla colonna. Non serve `!important`: basta non pareggiare.
 */
@media (min-width: 1025px) {
  .twss__info-voce--doppione.twss__col--senza-desktop { display: none; }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .twss__info-voce--doppione.twss__col--senza-tablet { display: none; }
}

@media (max-width: 720px) {
  .twss__info-voce--doppione.twss__col--senza-mobile { display: none; }
}

/* Schede: la resa che convince, quindi larghe abbastanza da starci tutto. */
.twss__elenco--schede {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* Card: l'essenziale per scegliere a colpo d'occhio, quindi piu' fitte. */
.twss__elenco--card {
    /*
     | ⚠️ Il numero di colonne scelto dalla proprieta' e' un MASSIMO, non un
     | numero fisso: resta `auto-fill`, e la larghezza minima diventa la piu'
     | grande fra i 12rem di sempre e «un N-esimo della riga».
     |
     | Cosi' dentro un contenitore stretto se ne mostrano MENO invece di
     | comprimere le card — il difetto gia' trovato coi modelli di scheda, dove
     | tre colonne in una cella stretta non erano una disposizione ma la stessa
     | card compressa tre volte.
     |
     | Senza la variabile il calcolo si riduce ai 12rem di prima: chi non
     | sceglie niente ha la griglia identica a ieri.
     */
    --twss-card-gap: .8rem;

    /*
     | ⚠️ La larghezza di una colonna TOGLIE i gap prima di dividere.
     |
     | Con `100% / N` si chiedono quattro colonne su 1120px — 280px l'una — ma
     | i tre gap da 12,8px lasciano 1081px, cioè 270px a colonna: meno del
     | minimo, e `auto-fill` ne mette TRE. È l'accumulo dei gap già pagato nel
     | costruttore di pagine, e si vede solo misurando in un browser: il
     | markup è identico.
     */
    grid-template-columns: repeat(
        auto-fill,
        minmax(
            min(
                100%,
                max(
                    12rem,
                    calc(
                        (100% - (var(--twss-card-col-mobile, 1) - 1) * var(--twss-card-gap))
                        / var(--twss-card-col-mobile, 1)
                    )
                )
            ),
            1fr
        )
    );
    gap: var(--twss-card-gap);
}

@media (min-width: 48em) {
    .twss__elenco--card {
        grid-template-columns: repeat(
            auto-fill,
            minmax(
                min(
                    100%,
                    max(
                        12rem,
                        calc(
                            (100% - (var(--twss-card-col-tablet, 1) - 1) * var(--twss-card-gap))
                            / var(--twss-card-col-tablet, 1)
                        )
                    )
                ),
                1fr
            )
        );
    }
}

@media (min-width: 64em) {
    .twss__elenco--card {
        grid-template-columns: repeat(
            auto-fill,
            minmax(
                min(
                    100%,
                    max(
                        12rem,
                        calc(
                            (100% - (var(--twss-card-col-desktop, 1) - 1) * var(--twss-card-gap))
                            / var(--twss-card-col-desktop, 1)
                        )
                    )
                ),
                1fr
            )
        );
    }
}

/*
 | I filtri messi in secondo piano: stanno sotto la barra, chiusi finche'
 | qualcuno non li apre.
 */
.twss__filtri-secondari {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
    margin: 0;
    /*
     | Sta dentro la barra, che e' un flex che va a capo: questo lo mette su
     | una riga sua, sotto i filtri che lo riempiono e sopra tutto il resto.
     | Senza, si infilerebbe fra un filtro e l'altro.
     */
    flex-basis: 100%;
}

.twss__filtri-secondari[hidden] {
    display: none;
}

.twss__piu-filtri {
    padding: .45rem .9rem;
    font: inherit;
    cursor: pointer;
    border: 1px solid var(--twss-campo-bordo, var(--twss-bordo));
    border-radius: var(--twss-barra-raggio, .4rem);
    background: var(--twss-campo-sfondo, transparent);
    color: var(--twss-campo-testo, inherit);
}

/*
 | ⚠️ Aperto si marca come un filtro scelto, e riusa i suoi colori invece di
 | averne di propri: e' la stessa cosa detta due volte — «qui c'e' qualcosa di
 | attivo» — e due coppie per lo stesso concetto divergono al primo che ne
 | cambia una sola.
 */
.twss__piu-filtri[aria-expanded="true"] {
    background: var(--twss-scelto-sfondo, var(--twss-campo-sfondo, transparent));
    color: var(--twss-scelto-testo, var(--twss-campo-testo, inherit));
    border-color: var(--twss-scelto-bordo, var(--twss-campo-bordo, var(--twss-bordo)));
}

/* Lista: una riga per elemento, a piena larghezza. */
.twss__elenco--lista {
    grid-template-columns: 1fr;
    gap: .55rem;
}

.twss__scheda {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.1rem;
    border: 1px solid var(--twss-bordo, #e2e5ea);
    border-radius: .6rem;
    background: var(--twss-sfondo, #fff);
}

/* Una scheda nascosta dai filtri non deve lasciare un buco nella griglia. */
.twss__scheda[hidden] {
    display: none;
}

.twss__scheda-logo {
    height: 2.2rem;
    display: flex;
    align-items: center;
}

.twss__scheda-logo img {
    max-height: 100%;
    max-width: 9rem;
    width: auto;
    object-fit: contain;
}

.twss__scheda-titolo {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

.twss__scheda-sottotitolo {
    margin: 0;
    font-size: .82rem;
    color: var(--twss-tenue, #6b7280);
}

.twss__scheda-voto span {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: var(--twss-accento-tenue, #eef2ff);
    color: var(--twss-accento, #3730a3);
    font-weight: 600;
    font-size: .85rem;
}

.twss__scheda-voto {
    margin: 0;
}

/* Il dato in primo piano: è la ragione per cui una scheda si guarda. */
.twss__scheda-evidenza {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: .18rem;
}

.twss__scheda-numero {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.twss__scheda-affisso {
    font-size: .8rem;
    color: var(--twss-tenue, #6b7280);
}

.twss__scheda-specifiche {
    margin: 0;
    display: grid;
    gap: .2rem;
    font-size: .85rem;
}

.twss__scheda-specifiche > div {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    border-bottom: 1px dotted var(--twss-bordo, #e2e5ea);
    padding-bottom: .15rem;
}

.twss__scheda-specifiche dt {
    color: var(--twss-tenue, #6b7280);
}

.twss__scheda-specifiche dd {
    margin: 0;
    text-align: right;
    font-weight: 500;
}

.twss__scheda-tag {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

/* L'azione sta in fondo su tutte le schede, anche quando quelle accanto sono
   più alte: senza, i pulsanti si allineerebbero a caso. */
.twss__scheda-azione {
    margin: auto 0 0;
    padding-top: .35rem;
}

/*
 | ⚠️ UNA SUPERFICIE PIENA NON SI FA CON UNA VARIABILE DERIVATA.
 |
 | `--twss-accento` e' `color-mix(in srgb, currentColor 70%, transparent)`:
 | ottimo come testo o bordo — si fonde col tema del sito, che e' il suo scopo
 | — e inservibile come sfondo, perche' su una pagina dal testo chiaro diventa
 | bianco traslucido. Col testo `--twss-su-accento`, che NON e' definito e cade
 | sul bianco, il risultato e' bianco su bianco: misurato, contrasto 1.
 |
 | E il ripiego `var(--twss-accento, #3730a3)` non protegge: la variabile e'
 | definita, quindi il secondo argomento non entra mai in gioco.
 |
 | Qui le due variabili NON sono definite di serie, quindi i ripieghi mordono
 | sempre: #3730a3 con #fff vale 8,59:1 su qualunque tema. Chi vuole altri
 | colori li sceglie dagli «Stili», dove sono token veri col giudizio di
 | leggibilita' accanto.
 */
.twss__cta {
    display: block;
    text-align: center;
    padding: .5rem .8rem;
    border-radius: .4rem;
    background: var(--twss-azione-sfondo, #3730a3);
    color: var(--twss-azione-testo, #fff);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
}

.twss__cta:hover,
.twss__cta:focus {
    filter: brightness(1.12);
    color: var(--twss-azione-testo, #fff);
}

.twss__ordinamento select {
    max-width: 12rem;
}


/* ═══ Card ════════════════════════════════════════════════════════════════ */

.twss__scheda--card {
    padding: .85rem;
    gap: .4rem;
}

.twss__scheda--card .twss__scheda-titolo {
    font-size: .95rem;
}

.twss__scheda--card .twss__scheda-numero {
    font-size: 1.25rem;
}

.twss__scheda--card .twss__scheda-logo {
    height: 1.8rem;
}

/* ═══ Lista ═══════════════════════════════════════════════════════════════
 *
 * Una riga: logo, identita', dettaglio, e a destra il prezzo col pulsante.
 * Sotto i 48rem torna una colonna — su un telefono una riga larga diventa
 * una colonna storta, non una riga.
 */
.twss__scheda--lista {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1rem;
}

.twss__scheda--lista .twss__scheda-logo {
    flex: 0 0 auto;
    width: 5rem;
    height: 2rem;
}

.twss__scheda--lista .twss__scheda-testa {
    flex: 1 1 11rem;
    min-width: 0;
}

.twss__scheda--lista .twss__scheda-specifiche {
    flex: 2 1 18rem;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: .1rem .8rem;
}

/* In riga le specifiche non hanno bisogno del filo che le separa: sono gia'
   incolonnate, e il tratteggio farebbe rumore. */
.twss__scheda--lista .twss__scheda-specifiche > div {
    border-bottom: 0;
}

/*
 * L'ordine di una riga: logo · identità · dettaglio · prezzo · pulsante.
 *
 * Si dichiara perché nel markup l'evidenza viene prima delle specifiche —
 * giusto in una scheda verticale, dove il prezzo si legge subito, e sbagliato
 * in una riga, dove finirebbe in mezzo.
 */
.twss__scheda--lista .twss__scheda-logo { order: 1; }
.twss__scheda--lista .twss__scheda-testa { order: 2; }
.twss__scheda--lista .twss__scheda-specifiche { order: 3; }
.twss__scheda--lista .twss__scheda-voto { order: 4; }
.twss__scheda--lista .twss__scheda-evidenza { order: 5; }
.twss__scheda--lista .twss__scheda-azione { order: 6; }

.twss__scheda--lista .twss__scheda-evidenza {
    flex: 0 0 auto;
    margin-left: auto;
}

.twss__scheda--lista .twss__scheda-azione {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.twss__scheda--lista .twss__cta {
    white-space: nowrap;
}

.twss__scheda--lista .twss__scheda-voto {
    flex: 0 0 auto;
}

@media (max-width: 48rem) {
    .twss__scheda--lista {
        flex-direction: column;
        align-items: stretch;
    }

    /*
     * ⚠️ Le proporzioni servono a spartire lo spazio ORIZZONTALE: in colonna
     * lo stesso `flex-grow` spartisce quello verticale, e i pezzi si
     * allungano. Misurato a 375px prima di questa regola: la testa alta
     * 176px, le specifiche 288px, l'elemento 692px — senza errori e senza
     * sovrapposizioni, quindi a occhio sembrava una scelta.
     */
    .twss__scheda--lista .twss__scheda-logo,
    .twss__scheda--lista .twss__scheda-testa,
    .twss__scheda--lista .twss__scheda-specifiche,
    .twss__scheda--lista .twss__scheda-voto,
    .twss__scheda--lista .twss__scheda-evidenza,
    .twss__scheda--lista .twss__scheda-azione {
        flex: 0 0 auto;
    }

    /* Il logo torna alla sua altezza naturale invece della fetta della riga. */
    .twss__scheda--lista .twss__scheda-logo {
        width: auto;
    }

    .twss__scheda--lista .twss__scheda-evidenza {
        margin-left: 0;
    }

    /* Impilate, le specifiche tornano a una colonna con il loro filo. */
    .twss__scheda--lista .twss__scheda-specifiche {
        grid-template-columns: 1fr;
    }

    .twss__scheda--lista .twss__scheda-specifiche > div {
        border-bottom: 1px dotted var(--twss-bordo, #e2e5ea);
    }
}

/* ═══ Scelta e preferiti ══════════════════════════════════════════════════ */

.twss__controlli-gruppo {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.twss__scheda .twss__controlli-gruppo {
    position: absolute;
    top: .5rem;
    right: .5rem;
}

.twss__scheda {
    position: relative;
}

.twss__preferito {
    background: none;
    border: 0;
    padding: .1rem .2rem;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: .25rem;
    /*
     | ⚠️ Prendeva il colore del BORDO, che e' il token delle linee sottili:
     | per costruzione ha contrasto basso, e su fondo chiaro valeva ~1,5:1 —
     | sotto il 3:1 che le WCAG (1.4.11) chiedono a un componente. Un comando
     | che si vede appena non e' un comando.
     |
     | Il token proprio eredita dal testo secondario, quindi segue anche i
     | temi scuri: un colore fisso sarebbe rimasto indietro proprio dove
     | serve di piu'.
     */
    color: var(--twss-preferito-spento, var(--twss-tenue, #6b7280));
}

.twss__preferito:hover,
.twss__preferito:focus-visible {
    color: var(--twss-preferito, #c2740a);
}

/*
 | Il colore da solo non dice DOVE si e' arrivati col tasto Tab: l'anello
 | si', ed e' anche l'unico segno che distingue il focus dal passaggio del
 | mouse — che qui cambiano entrambi la stella.
 */
.twss__preferito:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.twss__preferito--acceso {
    color: var(--twss-preferito, #c2740a);
}

.twss__solo-preferiti {
    border: 1px solid var(--twss-bordo, #e2e5ea);
    background: none;
    border-radius: .35rem;
    padding: .3rem .65rem;
    cursor: pointer;
    font-size: .85rem;
}

.twss__solo-preferiti--acceso {
    background: var(--twss-azione-sfondo, #3730a3);
    border-color: var(--twss-azione-sfondo, #3730a3);
    color: var(--twss-azione-testo, #fff);
}

th.twss__controlli,
td.twss__controlli {
    width: 1%;
    white-space: nowrap;
}

/* ═══ Confronto ═══════════════════════════════════════════════════════════
 *
 * La barra resta appiccicata in fondo mentre si scorre: la selezione avviene
 * scorrendo l'elenco, e un pulsante «Confronta» in cima si perderebbe.
 */
.twss__confronto-barra {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1rem;
    padding: .6rem .9rem;
    border: 1px solid var(--twss-bordo, #e2e5ea);
    border-radius: .5rem;
    background: var(--twss-sfondo, #fff);
    /*
     | ⚠️ Chi dichiara uno SFONDO dichiara anche il colore del testo: senza,
     | «Deseleziona» ereditava il colore della pagina e su un tema chiaro
     | finiva bianco su bianco — misurato, contrasto 1.
     */
    color: var(--twss-testo, #222);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}

.twss__confronto-quanti {
    margin: 0;
    flex: 1;
    font-size: .88rem;
}

.twss__confronta {
    padding: .4rem .9rem;
    border: 0;
    border-radius: .35rem;
    background: var(--twss-azione-sfondo, #3730a3);
    color: var(--twss-azione-testo, #fff);
    font-weight: 600;
    cursor: pointer;
}

.twss__confronta[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.twss__confronto-azzera {
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
    font-size: .85rem;
}

.twss__confronto {
    margin-top: 1rem;
    border: 1px solid var(--twss-bordo, #e2e5ea);
    border-radius: .5rem;
    overflow: hidden;
}

.twss__confronto-testa {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--twss-bordo, #e2e5ea);
}

.twss__confronto-testa h3 {
    margin: 0;
    flex: 1;
    font-size: 1rem;
}

.twss__solo-differenze {
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.twss__confronto-chiudi {
    background: none;
    border: 0;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.twss__confronto-corpo {
    overflow-x: auto;
}

.twss__confronto-tabella {
    width: 100%;
    border-collapse: collapse;
}

.twss__confronto-tabella th,
.twss__confronto-tabella td {
    padding: .45rem .8rem;
    border-bottom: 1px solid var(--twss-confronto-bordo, var(--twss-bordo, #eef0f3));
    text-align: left;
    vertical-align: top;
}

.twss__confronto-tabella thead th {
    background: var(--twss-confronto-th-sfondo, transparent);
    color: var(--twss-confronto-th-testo, var(--twss-testo, inherit));
}

.twss__confronto-tabella th[scope="row"] {
    color: var(--twss-confronto-etichetta-testo, var(--twss-tenue, #6b7280));
    font-weight: 500;
    white-space: nowrap;
}

/* Le righe in cui i valori coincidono si smorzano invece di sparire: chi
   guarda deve poter vedere anche cosa NON cambia. */
.twss__confronto-tabella .twss__uguali td {
    color: var(--twss-confronto-uguali, var(--twss-tenue, #6b7280));
}

.twss__confronto-tabella .twss__diversi td {
    font-weight: 600;
}

/* Chi vuole vedere solo cio' che cambia nasconde le righe uguali — che
 * pero' RESTANO nel markup.
 *
 * ⚠️ E' una scelta di presentazione, non di contenuto: da quando la tabella
 * la assembla il server, toglierle davvero vorrebbe dire un giro di rete a
 * ogni spunta della casella. Cosi' la spunta e' istantanea, piu' di quanto
 * fosse quando a disegnare era il browser. */
.twss__confronto--solo-diff .twss__uguali {
    display: none;
}

/* Le sezioni, quando la proprieta' le accende.
 *
 * ⚠️ Sfondo tenue e non pieno: e' un separatore, non un titolo di pagina, e
 * una fascia satura su una tabella lunga spezza la lettura invece di
 * organizzarla. Il colore del testo si dichiara accanto allo sfondo, per la
 * ragione gia' scritta piu' su. */
.twss__confronto-tabella .twss__confronto-sezione th {
    padding: .55rem .8rem;
    background: var(--twss-tenue-sfondo, rgba(0, 0, 0, .04));
    color: var(--twss-testo, #222);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ⚠️ Nascondendo le righe uguali una sezione puo' restare senza contenuto, e
   un titolo seguito dal nulla sembra un difetto.
   Il conto lo fa il SERVER e lo scrive nell'attributo: in CSS non si esprime,
   perche' `:has(~ …)` guarda tutti i fratelli successivi e non i soli della
   propria sezione — un selettore che sembra giusto e nasconde la sezione
   sbagliata. */
.twss__confronto--solo-diff .twss__confronto-sezione[data-diversi="0"] {
    display: none;
}

/* Il migliore della riga, dove la proprieta' ha dichiarato da che parte sta.
 *
 * ⚠️ Non e' una superficie piena fatta con l'accento — lezione gia' pagata
 * tre volte: `--twss-accento` e' derivato da currentColor e su fondo chiaro
 * darebbe testo bianco su bianco. Qui l'accento fa il BORDO, che e' il suo
 * uso legittimo, e lo sfondo e' un velo dello stesso currentColor come le
 * righe alternate.
 *
 * ⚠️ E non e' solo colore: il peso del testo dice la stessa cosa a chi non
 * distingue le tinte. Un'evidenza affidata al solo colore, su una tabella che
 * serve a decidere, lascia fuori chi ha piu' bisogno di leggerla. */
.twss__confronto-tabella .twss__migliore {
    background: var(--twss-migliore-sfondo, color-mix(in srgb, currentColor 7%, transparent));
    color: var(--twss-migliore-testo, inherit);
    border-left: 2px solid var(--twss-migliore-bordo, var(--twss-accento));
    font-weight: 600;
}

/* Il logo in testa e il pulsante in fondo, se la proprieta' li accende. */
.twss__confronto-tabella .twss__confronto-logo img {
    max-width: 120px;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.twss__confronto-tabella .twss__confronto-azione td {
    padding-top: .9rem;
}

/* ⚠️ Il pulsante non eredita il colore del testo — un <a> con una classe
   propria lo prende dal tema, e su un tema che lo mette bianco sparirebbe.
   La regola che glielo da' vive nel blocco del CTA e vale anche qui: questa
   riga si occupa solo di quanto e' largo. */
.twss__confronto-tabella .twss__confronto-azione .twss__cta {
    display: inline-block;
    width: 100%;
    text-align: center;
}

/* Il confronto dentro una finestra.
 *
 * La cornice la disegna il <dialog>, quindi il pannello smette di disegnarne
 * una propria: due bordi annidati a un millimetro di distanza si vedono, e
 * sembrano un difetto.
 *
 * ⚠️ Largo ma non a tutto schermo: una tabella di quattro prodotti vuole
 * spazio, e una finestra che tocca i bordi non si distingue piu' da una
 * pagina — cioe' non si capisce come si chiude. */
.twss__finestra--confronto {
    max-width: min(96vw, 62rem);
    width: 100%;
    background: var(--twss-confronto-finestra-sfondo, var(--twss-sfondo, #fff));
}

.twss__finestra--confronto .twss__confronto {
    margin-top: 0;
    border: 0;
    border-radius: 0;
}

/* Su telefono le etichette vanno a capo, e restano ferme mentre si scorre.
 *
 * ⚠️ Misurato a 375 px prima di scrivere questa regola: con `nowrap` la
 * colonna delle etichette prendeva 305 px sui 313 visibili — OTTO pixel ai
 * valori, e non per colpa del numero di prodotti: succedeva anche a due.
 * Andando a capo scende a 131 e ne lascia 182, e a due prodotti la tabella
 * smette del tutto di scorrere (322 contro 313).
 *
 * ⚠️ Ferma in ORIZZONTALE e non in verticale: il corpo scorre solo di lato
 * (`overflow-x: auto`), quindi `left: 0` ha una scrollport su cui agire e
 * `top: 0` non ne avrebbe alcuna. Senza, scorrendo verso i valori si perde
 * di che riga si tratta.
 *
 * ⚠️ Lo sfondo e' `--twss-sfondo` come la barra, MAI `--twss-accento`: quello
 * e' derivato da currentColor e su un tema chiaro darebbe bianco su bianco.
 * Il colore del testo e' gia' dichiarato dalla regola qui sopra, ed e' cio'
 * che rende leggibile la cella mentre i valori le passano sotto. */
@media (max-width: 720px) {
    .twss__confronto-tabella th[scope="row"] {
        position: sticky;
        left: 0;
        z-index: 1;
        max-width: 38%;
        white-space: normal;
        background: var(--twss-confronto-etichetta-sfondo, var(--twss-sfondo, #fff));
    }
}

/* ── Il nome porta alla scheda ──────────────────────────────────────────
   Compare solo quando quel record ha davvero una pagina: dove non c'e', il
   titolo resta testo e il markup e' identico a prima.

   Eredita il colore invece di imporne uno: dentro un h3 o una cella di
   tabella, un link colorato di suo spezzerebbe la gerarchia visiva che il
   tema ha gia' deciso. La sottolineatura al passaggio dice che si puo'
   cliccare, senza urlarlo. */
.twss__vai-scheda {
    color: inherit;
    text-decoration: none;
}

.twss__vai-scheda:hover,
.twss__vai-scheda:focus-visible {
    text-decoration: underline;
}

/* --- cio' che una proprieta' puo' cambiare -------------------------------
 *
 * Le variabili le scrive la Suite, in un blocco `.twss{...}` messo in linea
 * dopo questo foglio. Qui ci sono solo i punti in cui si applicano, e ognuno
 * porta come RIPIEGO il valore che il comparatore ha oggi: finche' nessuno
 * accende uno stile, questo file si comporta esattamente come prima.
 */

/* La riga dei nomi di colonna non ha uno sfondo suo, e senza uno stile
 * acceso continua a non averlo. */
.twss__tabella thead th {
  background: var(--twss-th-sfondo, transparent);
}

/* ⚠️ Un gradiente e non un colore di sfondo, e non e' un vezzo: le righe pari
 * sono gia' colorate (`--twss-sfondo-alt`) con la stessa specificita' di
 * questa regola. Con `background-color` il ripiego `transparent` le
 * cancellerebbe al passaggio del mouse anche quando nessuno ha scelto un
 * colore di evidenziazione. Il gradiente dipinge SOPRA lo sfondo che c'e',
 * e quando la variabile non e' impostata e' invisibile. */
.twss__tabella tbody tr:hover {
  background-image: linear-gradient(var(--twss-riga-hover, transparent), var(--twss-riga-hover, transparent));
}

/* Le tre rese a elemento condividono lo stesso riquadro e si distinguono per
 * il contenitore: cosi' ognuna puo' avere colori propri senza che le altre
 * cambino. Il ripiego e' a catena — token della resa, poi quello generale,
 * poi il valore di oggi — quindi chi tocca solo il generale le cambia tutte
 * e tre, che e' quasi sempre cio' che vuole. */
.twss__elenco--schede .twss__scheda {
  background: var(--twss-scheda-sfondo, var(--twss-sfondo, #fff));
  border-color: var(--twss-scheda-bordo, var(--twss-bordo, #e2e5ea));
  border-radius: var(--twss-scheda-raggio, .6rem);
}

.twss__elenco--card .twss__scheda {
  background: var(--twss-card-sfondo, var(--twss-sfondo, #fff));
  border-color: var(--twss-card-bordo, var(--twss-bordo, #e2e5ea));
  border-radius: var(--twss-card-raggio, .6rem);
}

.twss__elenco--lista .twss__scheda {
  background: var(--twss-riga-sfondo, var(--twss-sfondo, #fff));
  border-color: var(--twss-riga-bordo, var(--twss-bordo, #e2e5ea));
  border-radius: var(--twss-riga-raggio, .6rem);
}

/* --- i modelli di scheda ---------------------------------------------------
 *
 * Una scheda ha sempre gli stessi pezzi; il modello dice DOVE stanno. Tutto
 * questo blocco vale solo per le schede disposte a zone: la scheda «standard»
 * non ha contenitori di zona e non passa mai di qui.
 */

/* ⚠️ Una scheda disposta a zone occupa la riga intera.
 *
 * Le schede stanno normalmente in una griglia di colonne da 17rem, e dentro
 * una cella cosi' stretta un modello a tre colonne — logo, contenuto, prezzo —
 * non e' una disposizione: e' la stessa scheda di prima, compressa. Chi sceglie
 * «orizzontale» sta chiedendo la larghezza.
 *
 * Vale per le SCHEDE e non per le card: il modello «verticale» e' pensato
 * apposta per la cella stretta di una griglia, e allargarlo la disferebbe.
 */
.twss__elenco--schede.twss__elenco--modello {
  grid-template-columns: 1fr;
}

.twss__zona {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-width: 0;
}

/* Un pezzo non impone margini propri: la spaziatura la decide la zona, o due
 * disposizioni diverse respirerebbero in modo diverso senza che nessuno
 * l'abbia scelto. */
.twss__pezzo > :first-child {
  margin-top: 0;
}

.twss__pezzo > :last-child {
  margin-bottom: 0;
}

/* La scheda a zone e' una griglia di tre colonne: sinistra, centro, destra.
 * `top` e `full` le attraversano tutte. */
.twss__scheda--orizzontale,
.twss__scheda--griglia,
.twss__scheda--recensione,
.twss__scheda--evidenza-prezzo {
  display: grid;
  /* I rapporti fra le colonne, se qualcuno li ha scelti. Senza, la sinistra e
   * la destra si prendono lo spazio che serve e il centro il resto — che e' il
   * comportamento di sempre. */
  grid-template-columns:
    minmax(0, var(--twss-col-lead, auto))
    minmax(0, var(--twss-col-main, 1fr))
    minmax(0, var(--twss-col-aside, auto));
  align-items: start;
  gap: .55rem 1.2rem;
}

.twss__scheda--orizzontale .twss__zona--top,
.twss__scheda--griglia .twss__zona--top,
.twss__scheda--recensione .twss__zona--top,
.twss__scheda--evidenza-prezzo .twss__zona--top,
.twss__scheda--orizzontale .twss__zona--full,
.twss__scheda--griglia .twss__zona--full,
.twss__scheda--recensione .twss__zona--full,
.twss__scheda--evidenza-prezzo .twss__zona--full {
  grid-column: 1 / -1;
}

/* La colonna della decisione sta a destra e non si stringe. */
.twss__scheda--orizzontale .twss__zona--aside,
.twss__scheda--griglia .twss__zona--aside,
.twss__scheda--recensione .twss__zona--aside,
.twss__scheda--evidenza-prezzo .twss__zona--aside {
  align-items: flex-end;
  text-align: right;
  min-width: 8rem;
}

/* ⚠️ La colonna del logo riserva il proprio spazio.
 *
 * L'immagine e' `loading="lazy"`: finche' non e' scaricata la sua dimensione
 * naturale e' zero, e una colonna `auto` calcolata su di lei collassa — la
 * disposizione a tre colonne diventa a due, e poi salta indietro quando
 * l'immagine arriva. Visto nel browser, non nel markup.
 */
.twss__scheda--orizzontale .twss__zona--lead,
.twss__scheda--griglia .twss__zona--lead,
.twss__scheda--recensione .twss__zona--lead,
.twss__scheda--evidenza-prezzo .twss__zona--lead {
  min-width: 5.5rem;
}

/* --- le identita' dei modelli ---------------------------------------------
 *
 * ⚠️ Riallineate ai template ORIGINALI di HUB/React (tws-public.css del
 * vecchio SPOKE): senza queste regole i quattro modelli si somigliavano
 * tutti, e le descrizioni nel pannello promettevano differenze che il CSS
 * non produceva. Un selettore che descrive cio' che non si vede insegna a
 * non fidarsi del pannello.
 */

/* Il separatore dell'aside: l'identita' comune dei modelli a tre colonne. */
.twss__scheda--orizzontale .twss__zona--aside,
.twss__scheda--griglia .twss__zona--aside,
.twss__scheda--recensione .twss__zona--aside,
.twss__scheda--evidenza-prezzo .twss__zona--aside {
  border-inline-start: 1px solid var(--twss-bordo, #e2e5ea);
  padding-inline-start: 1rem;
}

/* griglia: le specifiche diventano una griglia di riquadri — e' il tratto da
 * cui il modello prende il nome. */
.twss__scheda--griglia .twss__scheda-specifiche {
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: .45rem;
}

.twss__scheda--griglia .twss__scheda-specifiche > div {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: .05rem;
  background: var(--twss-sfondo-alt, #f6f7f9);
  border: 0;
  border-radius: .5rem;
  padding: .45rem .55rem;
}

.twss__scheda--griglia .twss__scheda-specifiche dd {
  text-align: center;
  font-weight: 700;
}

/* recensione: il voto in un cerchio colorato, come l'originale.
 *
 * ⚠️ `:not(--stelle)`: col voto a stelle non c'e' una pillola da gonfiare a
 * cerchio — ogni stella diventerebbe un cerchio suo. */
/*
 | ⚠️ La coppia del cerchio e' quella della PILLOLA del voto — sfondo tenue,
 | testo accento — e non «accento pieno + su-accento» come l'originale: qui
 | l'accento di default e' DERIVATO da currentColor (riga 13), e su un tema
 | scuro diventa un bianco traslucido su cui il testo bianco sparisce. La
 | coppia della pillola regge su qualunque tema per costruzione, perche' e'
 | la stessa che il voto usa gia' ovunque; chi sceglie i colori dagli «Stili»
 | la governa con gli stessi due token.
 */
.twss__scheda--recensione .twss__zona--lead .twss__scheda-voto:not(.twss__scheda-voto--stelle) span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--twss-accento-tenue, #eef2ff);
  color: var(--twss-accento, #3730a3);
  box-shadow: inset 0 0 0 2px var(--twss-accento, #3730a3);
  font-size: 1.4rem;
  font-weight: 800;
  padding: 0;
}

/* evidenza-prezzo: il prezzo ENORME accanto al pulsante, come l'originale
 * (40px nell'HUB — qui 2.5rem, proporzionato alla scheda piu' compatta). */
.twss__scheda--evidenza-prezzo .twss__zona--aside {
  min-width: 11rem;
}

.twss__scheda--evidenza-prezzo .twss__zona--aside .twss__scheda-numero {
  font-size: 2.5rem;
}

/* ⚠️ Le stelle non sono pillole: senza questo azzeramento la regola base di
 * `.twss__scheda-voto span` metterebbe lo sfondo a pillola dietro OGNI
 * stella. */
.twss__scheda-voto--stelle span {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* La card verticale sta in colonna: e' stretta, e tre colonne non ci stanno. */
.twss__scheda--verticale {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.twss__scheda--verticale .twss__zona--full {
  margin-top: auto;
}

/* Su schermi stretti ogni modello torna in colonna: tre colonne dentro un
 * telefono non sono una disposizione, sono un incidente. */
@media (max-width: 720px) {
  .twss__scheda--orizzontale,
  .twss__scheda--griglia,
  .twss__scheda--recensione,
  .twss__scheda--evidenza-prezzo {
    display: flex;
    flex-direction: column;
  }

  .twss__scheda--orizzontale .twss__zona--aside,
  .twss__scheda--griglia .twss__zona--aside,
  .twss__scheda--recensione .twss__zona--aside,
  .twss__scheda--evidenza-prezzo .twss__zona--aside {
    align-items: stretch;
    text-align: left;
    /* Impilata a piena larghezza non e' piu' una colonna: un bordo a
     * sinistra la farebbe sembrare rientrata per errore. */
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

/* Dove NON si vede un pezzo.
 *
 * ⚠️ Si nasconde con `display: none` e non con l'opacita': un pezzo che resta
 * nel flusso lascia lo spazio dove stava, e chi l'ha nascosto vedrebbe un buco
 * invece di una scheda piu' compatta. Le soglie sono le stesse che il
 * comparatore usa gia' altrove. */
@media (min-width: 1025px) {
  .twss__pezzo--senza-desktop { display: none; }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .twss__pezzo--senza-tablet { display: none; }
}

@media (max-width: 720px) {
  .twss__pezzo--senza-mobile { display: none; }
}

/* Una pastiglia con un colore suo.
 *
 * Il colore arriva in linea (i valori di un catalogo non si conoscono quando
 * si scrive questo file), ma passa da una variabile: chi impagina puo' ancora
 * intervenire. Il bordo e' lo stesso colore a piena intensita', lo sfondo una
 * sua velatura — cosi' il testo del tema resta leggibile sopra qualunque
 * tinta, senza doverne calcolare il contrasto.
 */
.twss__tag--colorato {
  background: color-mix(in srgb, var(--twss-tag-colore) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--twss-tag-colore) 45%, transparent);
}

/* --- la decorazione di una zona -------------------------------------------
 *
 * ⚠️ Il ripiego e' `transparent` e zero: una zona che nessuno ha decorato
 * resta esattamente come prima, senza sfondo, senza bordo e senza angoli
 * arrotondati. La spaziatura interna compare solo quando c'e' qualcosa da
 * contenere, o una zona nuda si sposterebbe di qualche pixel per nulla.
 */
.twss__zona--top { background: var(--twss-zona-top-sfondo, transparent); border-radius: var(--twss-zona-top-raggio, 0); box-shadow: inset 0 0 0 1px var(--twss-zona-top-bordo, transparent); }
.twss__zona--lead { background: var(--twss-zona-lead-sfondo, transparent); border-radius: var(--twss-zona-lead-raggio, 0); box-shadow: inset 0 0 0 1px var(--twss-zona-lead-bordo, transparent); }
.twss__zona--main { background: var(--twss-zona-main-sfondo, transparent); border-radius: var(--twss-zona-main-raggio, 0); box-shadow: inset 0 0 0 1px var(--twss-zona-main-bordo, transparent); }
.twss__zona--aside { background: var(--twss-zona-aside-sfondo, transparent); border-radius: var(--twss-zona-aside-raggio, 0); box-shadow: inset 0 0 0 1px var(--twss-zona-aside-bordo, transparent); }
.twss__zona--full { background: var(--twss-zona-full-sfondo, transparent); border-radius: var(--twss-zona-full-raggio, 0); box-shadow: inset 0 0 0 1px var(--twss-zona-full-bordo, transparent); }

/* ⚠️ La spaziatura interna non e' una regola del foglio: la dichiara chi
 * compone, insieme allo sfondo. Un contenuto attaccato al proprio bordo si
 * legge male, ma darla a TUTTE le zone sposterebbe di qualche pixel anche
 * quelle che nessuno ha decorato — e chi non sceglie non deve pagare nulla. */
.twss__zona--top { padding: var(--twss-zona-top-padding, 0); }
.twss__zona--lead { padding: var(--twss-zona-lead-padding, 0); }
.twss__zona--main { padding: var(--twss-zona-main-padding, 0); }
.twss__zona--aside { padding: var(--twss-zona-aside-padding, 0); }
.twss__zona--full { padding: var(--twss-zona-full-padding, 0); }

/* --- la forma su uno schermo di mezzo -------------------------------------
 *
 * ⚠️ Le regole vivono SOLO dentro questa media query, e con esse le aree
 * nominate. Dichiarare `grid-area` anche fuori creerebbe linee implicite su
 * una griglia che non ha aree, cioè cambierebbe la disposizione da computer
 * di chi non ha scelto niente — che è esattamente ciò che non deve succedere.
 *
 * Le soglie sono le stesse che la visibilità dei pezzi usa già: uno schermo
 * «di mezzo» dev'essere lo stesso schermo in tutte e due le scelte, o si
 * nasconde un pezzo a una larghezza e se ne cambia la forma a un'altra.
 */
@media (min-width: 721px) and (max-width: 1024px) {
  /* Due colonne, e la terza sotto a piena larghezza. */
  .twss--tab-due-uno .twss__scheda--orizzontale,
  .twss--tab-due-uno .twss__scheda--griglia,
  .twss--tab-due-uno .twss__scheda--recensione,
  .twss--tab-due-uno .twss__scheda--evidenza-prezzo {
    grid-template-columns:
      minmax(0, var(--twss-col-lead, auto))
      minmax(0, var(--twss-col-main, 1fr));
    grid-template-areas:
      "top top"
      "lead main"
      "aside aside"
      "full full";
  }

  /* Una sopra, e due sotto. */
  .twss--tab-uno-due .twss__scheda--orizzontale,
  .twss--tab-uno-due .twss__scheda--griglia,
  .twss--tab-uno-due .twss__scheda--recensione,
  .twss--tab-uno-due .twss__scheda--evidenza-prezzo {
    grid-template-columns:
      minmax(0, var(--twss-col-main, 1fr))
      minmax(0, var(--twss-col-aside, auto));
    grid-template-areas:
      "top top"
      "lead lead"
      "main aside"
      "full full";
  }

  .twss--tab-due-uno .twss__scheda--orizzontale .twss__zona--top,
  .twss--tab-due-uno .twss__scheda--griglia .twss__zona--top,
  .twss--tab-due-uno .twss__scheda--recensione .twss__zona--top,
  .twss--tab-due-uno .twss__scheda--evidenza-prezzo .twss__zona--top,
  .twss--tab-uno-due .twss__scheda--orizzontale .twss__zona--top,
  .twss--tab-uno-due .twss__scheda--griglia .twss__zona--top,
  .twss--tab-uno-due .twss__scheda--recensione .twss__zona--top,
  .twss--tab-uno-due .twss__scheda--evidenza-prezzo .twss__zona--top { grid-area: top; }

  .twss--tab-due-uno .twss__scheda--orizzontale .twss__zona--lead,
  .twss--tab-due-uno .twss__scheda--griglia .twss__zona--lead,
  .twss--tab-due-uno .twss__scheda--recensione .twss__zona--lead,
  .twss--tab-due-uno .twss__scheda--evidenza-prezzo .twss__zona--lead,
  .twss--tab-uno-due .twss__scheda--orizzontale .twss__zona--lead,
  .twss--tab-uno-due .twss__scheda--griglia .twss__zona--lead,
  .twss--tab-uno-due .twss__scheda--recensione .twss__zona--lead,
  .twss--tab-uno-due .twss__scheda--evidenza-prezzo .twss__zona--lead { grid-area: lead; }

  .twss--tab-due-uno .twss__scheda--orizzontale .twss__zona--main,
  .twss--tab-due-uno .twss__scheda--griglia .twss__zona--main,
  .twss--tab-due-uno .twss__scheda--recensione .twss__zona--main,
  .twss--tab-due-uno .twss__scheda--evidenza-prezzo .twss__zona--main,
  .twss--tab-uno-due .twss__scheda--orizzontale .twss__zona--main,
  .twss--tab-uno-due .twss__scheda--griglia .twss__zona--main,
  .twss--tab-uno-due .twss__scheda--recensione .twss__zona--main,
  .twss--tab-uno-due .twss__scheda--evidenza-prezzo .twss__zona--main { grid-area: main; }

  .twss--tab-due-uno .twss__scheda--orizzontale .twss__zona--aside,
  .twss--tab-due-uno .twss__scheda--griglia .twss__zona--aside,
  .twss--tab-due-uno .twss__scheda--recensione .twss__zona--aside,
  .twss--tab-due-uno .twss__scheda--evidenza-prezzo .twss__zona--aside,
  .twss--tab-uno-due .twss__scheda--orizzontale .twss__zona--aside,
  .twss--tab-uno-due .twss__scheda--griglia .twss__zona--aside,
  .twss--tab-uno-due .twss__scheda--recensione .twss__zona--aside,
  .twss--tab-uno-due .twss__scheda--evidenza-prezzo .twss__zona--aside { grid-area: aside; }

  .twss--tab-due-uno .twss__scheda--orizzontale .twss__zona--full,
  .twss--tab-due-uno .twss__scheda--griglia .twss__zona--full,
  .twss--tab-due-uno .twss__scheda--recensione .twss__zona--full,
  .twss--tab-due-uno .twss__scheda--evidenza-prezzo .twss__zona--full,
  .twss--tab-uno-due .twss__scheda--orizzontale .twss__zona--full,
  .twss--tab-uno-due .twss__scheda--griglia .twss__zona--full,
  .twss--tab-uno-due .twss__scheda--recensione .twss__zona--full,
  .twss--tab-uno-due .twss__scheda--evidenza-prezzo .twss__zona--full { grid-area: full; }

  /* ⚠️ Quando la decisione passa sotto a piena larghezza smette di essere una
   * colonna: allineata a destra su una riga intera resterebbe appesa nel
   * vuoto, lontana da ciò che descrive. */
  .twss--tab-due-uno .twss__scheda--orizzontale .twss__zona--aside,
  .twss--tab-due-uno .twss__scheda--griglia .twss__zona--aside,
  .twss--tab-due-uno .twss__scheda--recensione .twss__zona--aside,
  .twss--tab-due-uno .twss__scheda--evidenza-prezzo .twss__zona--aside {
    align-items: stretch;
    text-align: left;
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  /* Tutto in colonna già da qui: è la disposizione del telefono, anticipata. */
  .twss--tab-colonna .twss__scheda--orizzontale,
  .twss--tab-colonna .twss__scheda--griglia,
  .twss--tab-colonna .twss__scheda--recensione,
  .twss--tab-colonna .twss__scheda--evidenza-prezzo {
    display: flex;
    flex-direction: column;
  }

  .twss--tab-colonna .twss__scheda--orizzontale .twss__zona--aside,
  .twss--tab-colonna .twss__scheda--griglia .twss__zona--aside,
  .twss--tab-colonna .twss__scheda--recensione .twss__zona--aside,
  .twss--tab-colonna .twss__scheda--evidenza-prezzo .twss__zona--aside {
    align-items: stretch;
    text-align: left;
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

/* --- come si stringe su un telefono ---------------------------------------
 *
 * ⚠️ Due interruttori indipendenti, e ognuno fa una cosa MISURABILE: chi
 * sceglie «spaziature ridotte» deve vedere la scheda accorciarsi, non
 * immaginarlo. Un interruttore che non produce un effetto visibile è peggio
 * di uno assente — il primo si crede, il secondo si cerca.
 */
@media (max-width: 720px) {
  .twss--compatta-fitta .twss__scheda {
    padding: .7rem .8rem;
    gap: .35rem;
  }

  .twss--compatta-fitta .twss__zona {
    gap: .3rem;
  }

  .twss--compatta-fitta .twss__scheda-specifiche {
    gap: .25rem .6rem;
    font-size: .92em;
  }

  .twss--compatta-fitta .twss__scheda-sottotitolo {
    margin: 0;
  }

  /* Prezzo e pulsante sulla stessa riga: è la zona della decisione, e su un
   * telefono due righe per due elementi che si guardano insieme costano uno
   * scorrimento in più. */
  .twss--compatta-decisione-in-riga .twss__zona--aside {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
  }

  .twss--compatta-decisione-in-riga .twss__zona--aside .twss__pezzo {
    margin: 0;
  }
}

/* --- l'icona di un pezzo --------------------------------------------------
 *
 * ⚠️ Il disegno arriva come SVG in linea e non come font: la libreria vive
 * nella Suite, e caricare qui il set intero delle Tabler vorrebbe dire far
 * pagare a ogni visitatore un catalogo di cui la scheda usa due voci.
 *
 * Si dimensiona sul testo accanto (`1em`) e prende il suo colore
 * (`currentColor`), cosi' segue lo stile del tema senza doverlo conoscere.
 */
.twss__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -.125em;
  margin-inline-end: .35em;
  color: currentColor;
}

.twss__ic svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ⚠️ Il pezzo diventa una riga: l'icona sta ACCANTO al contenuto, non sopra.
 * Senza, un titolo in un `<h3>` andrebbe a capo e l'icona resterebbe sola su
 * una riga sua. */
.twss__pezzo:has(> .twss__ic) {
  display: flex;
  align-items: baseline;
  gap: 0;
}

/* --- solo l'icona, su certi schermi ---------------------------------------
 *
 * ⚠️ Il testo si NASCONDE, non sparisce dal markup: e' il nome della cosa, e
 * toglierlo lo toglierebbe anche a chi legge con uno screen reader e ai
 * motori di ricerca, che un'icona non la guardano.
 */
.twss__pezzo--icona-desktop > :not(.twss__ic),
.twss__pezzo--icona-tablet > :not(.twss__ic),
.twss__pezzo--icona-mobile > :not(.twss__ic) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Le stesse soglie della visibilita' dei pezzi: uno schermo dev'essere lo
 * stesso schermo in tutte le scelte. */
@media (max-width: 1024px) {
  .twss__pezzo--icona-desktop > :not(.twss__ic) {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

@media (max-width: 720px), (min-width: 1025px) {
  .twss__pezzo--icona-tablet > :not(.twss__ic) {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

@media (min-width: 721px) {
  .twss__pezzo--icona-mobile > :not(.twss__ic) {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

/* Senza testo accanto l'icona non ha da distanziarsi da nulla. */
.twss__pezzo--icona-desktop > .twss__ic,
.twss__pezzo--icona-tablet > .twss__ic,
.twss__pezzo--icona-mobile > .twss__ic {
  margin-inline-end: 0;
}

/* --- il voto come stelle --------------------------------------------------
 *
 * ⚠️ Il numero resta, nascosto a chi guarda e leggibile da chi ascolta: una
 * fila di stelle dice «buono», non «7,4», e chi usa uno screen reader avrebbe
 * perso il dato.
 */
.twss__scheda-voto--stelle {
  display: inline-flex;
  align-items: center;
  gap: .1em;
  line-height: 1;
}

.twss__stella {
  width: 1.05em;
  height: 1.05em;
  margin-inline-end: 0;
}

.twss__stella--piena { color: var(--twss-accento, currentColor); }
.twss__stella--vuota { opacity: .35; }

.twss__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- le liste Pro e Contro ------------------------------------------------
 *
 * Una voce per riga del campo, con la spunta o la croce in CSS puro sui
 * colori segnale: nessun disegno da spedire, e il colore segue lo stile
 * scelto dalla proprieta' (--twss-si / --twss-no).
 */
.twss__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .25rem;
  font-size: .88rem;
}

.twss__lista li {
  position: relative;
  padding-inline-start: 1.35rem;
}

.twss__lista li::before {
  position: absolute;
  inset-inline-start: 0;
  font-weight: 700;
}

.twss__lista--pro li::before {
  content: '\2713';
  color: var(--twss-si, #16a34a);
}

.twss__lista--contro li::before {
  content: '\2715';
  color: var(--twss-no, #dc2626);
}

/* ⚠️ Pro e Contro AFFIANCATI quando stanno entrambi nella zona «In fondo»:
 * due liste che si rispondono si leggono meglio una accanto all'altra. Gli
 * altri pezzi della zona restano a piena larghezza, e sotto una larghezza
 * minima le due colonne tornano una (e' il min-width a farle andare a capo). */
.twss__zona--full:has(.twss__lista--pro):has(.twss__lista--contro) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.twss__zona--full:has(.twss__lista--pro):has(.twss__lista--contro) > .twss__pezzo {
  flex: 1 1 100%;
}

.twss__zona--full:has(.twss__lista--pro):has(.twss__lista--contro) > .twss__pezzo:has(.twss__lista) {
  flex: 1 1 40%;
  min-width: 14rem;
}

/* --- i dispositivi --------------------------------------------------------
 *
 * La fila delle piattaforme, come «Disponibile su:» del riferimento. Il
 * disegno arriva dalla libreria della Suite; un valore senza disegno mostra
 * il testo — un buco non e' una modalita'.
 */
.twss__dispositivi {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.twss__disp {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
}

.twss__disp-etichetta {
  font-size: .8rem;
  color: var(--twss-tenue, #6b7280);
}

/* L'icona dei dispositivi e' un filo piu' grande del testo: e' lei
 * l'informazione, quando il nome sta nel tooltip. */
.twss__disp .twss__disp-ic {
  width: 1.25em;
  height: 1.25em;
  margin-inline-end: 0;
  color: var(--twss-tenue, #6b7280);
}

.twss__disp--icona:hover .twss__disp-ic {
  color: var(--twss-accento, #3730a3);
}

/* --- la posizione in classifica -------------------------------------------
 *
 * ⚠️ Segue l'ordinamento CORRENTE: riordinando, si rinumera. E' un elemento
 * che si aggiunge dal customizer, mai da solo.
 */
.twss__posizione {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 .4rem;
  border-radius: 999px;
  /* Stesso ripiego annidato del nastro: vuoto = come il voto. */
  background: var(--twss-posizione-sfondo, var(--twss-accento-tenue, #eef2ff));
  color: var(--twss-posizione-testo, var(--twss-accento, #3730a3));
  font-weight: 700;
  font-size: .9rem;
}

/* L'icona dentro una pastiglia: piccola, allineata al testo, del suo colore. */
.twss__tag .twss__tag-ic {
  width: .95em;
  height: .95em;
  margin-inline-end: .25em;
}

/* --- il nastro promozionale ----------------------------------------------
 *
 * Una fascia in cima alla scheda, sui colori dell'accento: e' il posto dove
 * l'occhio cade per primo, e serve a una promozione — non a un dato.
 *
 * ⚠️ Esce dalla spaziatura della scheda con margini negativi, come
 * l'originale: dentro il padding sarebbe un riquadro che galleggia, non una
 * fascia. I margini sono NEGATIVI DEL PADDING della scheda, quindi cambiando
 * quello vanno cambiati insieme — per questo il valore e' lo stesso.
 */
/*
 | ⚠️ LA SUPERFICIE PIENA NON SI FA CON L'ACCENTO, ed e' la seconda volta
 | in un giorno che questa regola si paga: `--twss-accento` di default e'
 | DERIVATO da currentColor (`color-mix(... 70%, transparent)`), quindi su una
 | pagina chiara diventa un grigio traslucido e su una scura un bianco
 | traslucido — e `--twss-su-accento` non e' nemmeno definito, cioe' cade sul
 | bianco. Bianco su bianco.
 |
 | Il ripiego `var(--twss-accento, #3730a3)` NON protegge: la variabile e'
 | definita, quindi il secondo argomento non entra mai in gioco.
 |
 | La coppia sicura e' quella della pillola — sfondo tenue, testo accento, con
 | un filo di bordo — perche' e' la stessa che il voto usa gia' ovunque e che
 | il tema del sito sa reggere. Chi vuole il nastro ACCESO sceglie i colori
 | dagli «Stili», dove `accento` e `su-accento` sono token veri e il pannello
 | ne mostra il giudizio di leggibilita' accanto.
 */
.twss__scheda-nastro {
  /* Il margine negativo e' quello del padding della scheda (1.1rem): esce
   * dalla spaziatura e va a filo dei bordi, come una fascia deve. */
  margin: -1.1rem -1.1rem .6rem;
  padding: .35rem .8rem;
  /* Il ripiego e' ANNIDATO, non parallelo: senza un colore proprio il nastro
   * prende quello del voto, che e' esattamente il comportamento di prima. Chi
   * non tocca niente non vede differenza, byte per byte. */
  background: var(--twss-nastro-sfondo, var(--twss-accento-tenue, #eef2ff));
  color: var(--twss-nastro-testo, var(--twss-accento, #3730a3));
  box-shadow: inset 0 -1px 0 var(--twss-bordo, #e2e5ea);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  text-align: center;
  border-radius: .5rem .5rem 0 0;
}

/* Nella scheda a zone la fascia sta nella zona «In cima», che ha gia' la sua
 * spaziatura: qui i margini negativi la porterebbero fuori dal riquadro. */
.twss__zona--top .twss__scheda-nastro {
  margin: 0;
  border-radius: .4rem;
}

/* Su una compattazione stretta la fascia si stringe con la scheda. */
@media (max-width: 720px) {
  .twss--compatta-fitta .twss__scheda-nastro {
    margin: -.8rem -.8rem .45rem;
  }
}

/* ═══ Entità correlate (scaglioni / linee di vincolo) ══════════════════════
 *
 * Un blocco di dettaglio per record: gli scaglioni di un conto deposito, le
 * righe di una tariffa — «scaglione per scaglione». Un `<details>` chiuso di
 * serie: il toggle è nativo, non dipende dal JavaScript.
 *
 * In tabella vive in una riga a parte a piena larghezza (colspan); a
 * schede/lista in coda alla scheda. Lo stile è lo stesso — cambia solo dove sta.
 */
.twss__correlate {
  margin-top: 0.5rem;
}

/* A schede/lista un filo di separazione dal contenuto sopra; in tabella no,
 | perché la riga di dettaglio è già staccata. */
.twss__scheda .twss__correlate {
  border-top: 1px solid var(--twss-bordo);
  padding-top: 0.5rem;
}

/* La riga di dettaglio in tabella: un annesso della riga sopra, quindi senza
 | la striscia alternata delle righe-dato. */
.twss__correlate-riga > td {
  padding: 0 0.8rem 0.7rem;
}

.twss__tabella tbody tr.twss__correlate-riga:nth-child(even) {
  background: none;
}

.twss__correlate-titolo {
  cursor: pointer;
  font-weight: 600;
  padding: 0.4rem 0;
  color: var(--twss-testo);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Il triangolino: marker nostro, uguale su ogni browser (quelli nativi no). */
.twss__correlate-titolo::-webkit-details-marker {
  display: none;
}

.twss__correlate-titolo::before {
  content: '';
  flex: none;
  width: 0;
  height: 0;
  border-left: 0.4rem solid currentColor;
  border-top: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
  transition: transform 0.15s ease;
}

.twss__correlate[open] > .twss__correlate-titolo::before {
  transform: rotate(90deg);
}

.twss__correlate-n {
  font-weight: 400;
  opacity: 0.65;
}

.twss__correlate-tabella {
  width: 100%;
  border-collapse: collapse;
  margin: 0.25rem 0 0.4rem;
  font-size: 0.9em;
}

.twss__correlate-tabella th,
.twss__correlate-tabella td {
  padding: 0.4rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--twss-bordo);
  vertical-align: top;
}

.twss__correlate-tabella thead th {
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-weight: 600;
}

.twss__correlate-tabella tbody tr:nth-child(even) {
  background: var(--twss-sfondo-alt);
}

/* Numeri e tassi incolonnati a destra: si confrontano a colpo d'occhio. */
.twss__correlate-tabella th[data-tipo="number"],
.twss__correlate-tabella th[data-tipo="decimal"],
.twss__correlate-tabella td[data-tipo="number"],
.twss__correlate-tabella td[data-tipo="decimal"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  /* Come la tabella grande: niente colonne, ogni riga diventa un blocco con
   | l'etichetta a sinistra e il valore a destra. */
  .twss__correlate-tabella thead {
    display: none;
  }

  .twss__correlate-tabella,
  .twss__correlate-tabella tbody,
  .twss__correlate-tabella tr,
  .twss__correlate-tabella td {
    display: block;
    width: 100%;
  }

  .twss__correlate-tabella tr {
    border: 1px solid var(--twss-bordo);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
  }

  .twss__correlate-tabella tbody tr:nth-child(even) {
    background: none;
  }

  .twss__correlate-tabella td {
    border: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
  }

  .twss__correlate-tabella td::before {
    content: attr(data-etichetta);
    font-weight: 600;
    text-align: left;
    opacity: 0.7;
  }
}

/* Nota di conformità in fondo alla vetrina (es. Reg. UE 1924/2006 per gli
 | integratori). È una voce del comportamento, override-abile per proprietà. */
.twss__disclaimer {
  margin: 1rem 0 0;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--twss-bordo);
  border-radius: 0.5rem;
  background: var(--twss-sfondo-alt);
  font-size: 0.85em;
  line-height: 1.5;
  opacity: 0.85;
}

/*
 | Un filtro a GRUPPO DI CASELLE (forma «checkbox» scelta dalla proprieta').
 |
 | Un <fieldset> con la sua etichetta e una fila di caselle: si sceglie piu' di
 | un valore, e una riga passa se ne combacia UNA (OR dentro il campo). Riusa i
 | token del campo e del «filtro scelto», cosi' chi colora la barra li vede
 | anche qui senza token nuovi.
 */
.twss__filtro.twss__filtro--checkbox {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0; /* un <fieldset> ha una larghezza minima intrinseca che sfonda la barra */
}

.twss__filtro--checkbox legend {
  padding: 0;
  margin: 0 0 0.3rem;
  font-size: 0.85em;
}

.twss__filtro--checkbox .twss__casella {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0.7rem 0.3rem 0;
  font-size: 0.85em;
  cursor: pointer;
}

.twss__filtro--checkbox .twss__casella input {
  /* La casella prende il colore della barra dove uno stile e' acceso, il
     colore di sistema dove non lo e'. */
  accent-color: var(--twss-casella-accento, var(--twss-scelto-bordo, var(--twss-accento, currentColor)));
  margin: 0;
}

/*
 | Un filtro a BARRA MIN–MAX (forma «range»).
 |
 | Due <input type="range"> sovrapposti sulla stessa traccia: la traccia vera
 | la disegna un ::before, gli input sono trasparenti. `pointer-events: none`
 | sull'input e `auto` sul cursore lasciano afferrare ENTRAMBI i puntatori anche
 | quando sono lontani — senza, quello sopra catturerebbe tutto e l'altro non si
 | potrebbe piu' prendere. Riusa i token della toolbar.
 */
.twss__filtro.twss__filtro--range {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.twss__filtro--range legend {
  padding: 0;
  margin: 0 0 0.45rem;
  font-size: 0.85em;
}

.twss__range {
  position: relative;
  height: 1.2rem;
  margin: 0 0.5rem 0.5rem;
}

.twss__range::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: var(--twss-slider-traccia, var(--twss-campo-bordo, var(--twss-bordo, currentColor)));
  opacity: 0.45;
}

.twss__range-cursore {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 1.1rem;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none; /* la traccia non cattura: solo i cursori si afferrano */
}

.twss__range-cursore:focus {
  outline: none;
}

.twss__range-cursore::-webkit-slider-runnable-track {
  background: transparent;
  border: 0;
  height: 1.1rem;
}

.twss__range-cursore::-moz-range-track {
  background: transparent;
  border: 0;
  height: 1.1rem;
}

.twss__range-cursore::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  cursor: grab;
  background: var(--twss-slider-attivo, var(--twss-scelto-bordo, var(--twss-accento, currentColor)));
  border: 2px solid var(--twss-campo-sfondo, #fff);
  box-shadow: 0 0 0 1px var(--twss-campo-bordo, var(--twss-bordo, transparent));
}

.twss__range-cursore::-moz-range-thumb {
  pointer-events: auto;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  cursor: grab;
  background: var(--twss-slider-attivo, var(--twss-scelto-bordo, var(--twss-accento, currentColor)));
  border: 2px solid var(--twss-campo-sfondo, #fff);
}

.twss__range-cursore:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--twss-campo-focus, var(--twss-accento, rgba(0, 0, 0, 0.25)));
}

.twss__range-cursore:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--twss-campo-focus, var(--twss-accento, rgba(0, 0, 0, 0.25)));
}

.twss__range-campi {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85em;
}

.twss__range-num {
  width: 5.5rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--twss-campo-bordo, var(--twss-bordo));
  border-radius: var(--twss-campo-raggio, 0.375rem);
  font: inherit;
  background: var(--twss-campo-sfondo, transparent);
  color: var(--twss-campo-testo, inherit);
}

.twss__range-num:focus {
  border-color: var(--twss-campo-focus, var(--twss-campo-bordo, var(--twss-bordo)));
}

.twss__range-trattino {
  color: var(--twss-campo-testo, inherit);
  opacity: 0.7;
}

/*
 | FF3: un'opzione di filtro che, coi filtri già scelti, non darebbe alcun
 | risultato. Si attenua e mostra «(0)» invece di sparire o restare cliccabile
 | a vuoto. Il <option> disabilitato di un menu lo attenua il browser da sé;
 | qui si attenua la casella.
 */
.twss__casella--vuota {
  opacity: 0.5;
}

.twss__casella--vuota input {
  cursor: default;
}

/*
 | «Azzera per-filtro»: la × in alto a destra su ogni filtro ATTIVO, per
 | toglierlo senza svuotare gli altri e senza aprire i chip (nascosti di
 | serie). Il markup la rende `hidden`; il JS la mostra quando il filtro ha
 | una scelta. Non si imposta `display` (il centraggio e' con line-height), o
 | si sovrascriverebbe l'[hidden] del markup.
 */
.twss__filtro {
  position: relative;
  padding-right: 1.6rem;
}

.twss__filtro-azzera {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  border: 1px solid var(--twss-scelto-bordo, var(--twss-campo-bordo, var(--twss-bordo)));
  border-radius: var(--twss-chip-raggio, 999px);
  background: var(--twss-scelto-sfondo, var(--twss-campo-sfondo, transparent));
  color: var(--twss-scelto-testo, inherit);
  cursor: pointer;
  font: inherit;
  line-height: 1.15rem;
  text-align: center;
}

.twss__filtro-azzera:hover {
  border-color: var(--twss-accento);
}

/*
 | «Ricerca dentro un filtro»: un campo di ricerca su un gruppo di caselle con
 | molti valori (le categorie di Servizi AI). Il markup lo rende `hidden`; il
 | JS lo mostra e filtra le caselle. Niente `display` sul campo, o si
 | sovrascriverebbe l'[hidden]. Le caselle di un gruppo lungo vanno in un
 | elenco scorribile, cosi' 20+ valori non allungano la barra all'infinito.
 */
.twss__filtro-cerca {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--twss-campo-bordo, var(--twss-bordo));
  border-radius: var(--twss-campo-raggio, 0.375rem);
  font: inherit;
  max-width: 14rem;
}

.twss__caselle {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 14rem;
  overflow-y: auto;
}

/*
 | «Attenuazione degli estremi del range col faceting»: quando gli altri filtri
 | restringono l'insieme, l'avviso dice fra quali valori ci sono record e la
 | banda evidenzia quella porzione della barra (gli estremi senza record
 | restano la traccia in sordina). Guidati dal JS solo a faceting acceso; a
 | faceting spento l'avviso resta hidden e la banda non compare.
 */
.twss__range-disponibili {
  margin: 0.1rem 0.5rem 0.4rem;
  font-size: 0.8em;
  opacity: 0.8;
}

/* i cursori sopra la banda, o la banda li coprirebbe */
.twss__range-cursore {
  z-index: 2;
}

.twss__range--attenuato::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 3px;
  left: var(--disp-da, 0%);
  right: calc(100% - var(--disp-a, 100%));
  background: var(--twss-slider-attivo, var(--twss-scelto-bordo, var(--twss-accento, currentColor)));
}

/*
 | Il codice sconto accanto al pulsante.
 |
 | Colori dai token della vetrina: senza, un coupon resterebbe leggibile su
 | un tema e invisibile su un altro. E il fondo NON usa `--twss-accento`, che
 | e' derivato da `currentColor` e come superficie piena da' testo bianco su
 | bianco — e' la lezione gia' pagata due volte, col cerchio del voto e col
 | nastro.
 */
.twss__coupon {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-inline-start: .6em;
  padding: .18em .5em;
  border: 1px dashed var(--twss-accento, #3730a3);
  border-radius: var(--twss-raggio, .4rem);
  background: var(--twss-accento-tenue, rgba(55, 48, 163, .08));
  font-size: .85em;
  line-height: 1.3;
  vertical-align: middle;
}

.twss__coupon-eti {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .8em;
  opacity: .75;
}

.twss__coupon-codice {
  font-weight: 700;
  letter-spacing: .06em;
  background: none;
  padding: 0;
  /* Un codice si copia col mouse: la selezione dev'essere comoda. */
  user-select: all;
}

/* La nota sotto il prezzo in evidenza: il taglio da cui viene (IP3). */
.twss__scheda-evidenza-nota {
  display: block;
  font-size: 0.72em;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 0.15em;
}

/* Le note sotto la tabella dei formati: la spedizione e la sua data (IP4). */
.twss__correlate-note {
  list-style: none;
  margin: 0.5em 0 0;
  padding: 0;
  font-size: 0.82em;
  opacity: 0.85;
}

.twss__correlate-note li {
  margin: 0.15em 0;
}

/* Il comando di una riga di dettaglio: vai a QUESTO pacchetto (IP5). */
.twss__correlate-cta {
  display: inline-block;
  padding: 0.25em 0.7em;
  border-radius: var(--twss-raggio, 4px);
  background: var(--twss-azione-sfondo, #3730a3);
  color: var(--twss-azione-testo, #ffffff);
  font-size: 0.85em;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
}

.twss__correlate-cta:hover,
.twss__correlate-cta:focus {
  text-decoration: underline;
}

/* Il prezzo che non vale piu' (IP6): sbarrato e in secondo piano. */
.twss__prezzo-prima {
  color: var(--twss-tenue, #6b7280);
  font-size: 0.92em;
  text-decoration: line-through;
  white-space: nowrap;
}

/* Chi vende, e a quali condizioni. */
.twss__venditore {
  margin: 0.6em 0 0;
  color: var(--twss-tenue, #6b7280);
  font-size: 0.85em;
  line-height: 1.5;
}

/* Quanto sono freschi i dati del record (IP7). */
.twss__freschezza {
  margin: 0.6em 0 0;
  color: var(--twss-tenue, #6b7280);
  font-size: 0.82em;
}

/*
 * Lo stato di un mercato: aperto o chiuso ADESSO, e quanto manca al cambio.
 *
 * Lo scrive il JS, perche' dipende dall'ora e il payload e' cacheato: qui c'e'
 * solo come si vede.
 *
 * ⚠️ Il colore segnale sta sul BORDO e sul pallino, non sul testo — vedi la
 * nota accanto alle due regole di stato, col numero misurato.
 */
.twss__stato {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .85em;
  line-height: 1.3;
  padding: .15em .5em;
  border: 1px solid var(--twss-bordo, currentColor);
  border-radius: var(--twss-raggio, .35rem);
}

.twss__stato::before {
  content: "";
  flex: 0 0 auto;
  inline-size: .5em;
  block-size: .5em;
  border-radius: 50%;
  background: var(--twss-segnale, currentColor);
}

/*
 * ⚠️ Il colore va sul BORDO e sul PALLINO, mai su `color` — che governa il
 * testo. Il testo tiene quello di sempre, ereditato dalla cella.
 *
 * Non e' pignoleria: sul tema chiaro dello spoke --twss-si vale 3,3:1 e
 * --twss-no 4,83 (misurati nel browser, non stimati), che bastano a un bordo
 * e a un pallino — WCAG 1.4.11 chiede 3:1 agli elementi non testuali — e NON
 * al testo, che ne vuole 4,5. Il testo cosi' resta a 15,91, cioe' quello
 * delle celle accanto: il numero dipende dal tema del sito, la scelta di
 * dove mettere il colore no. La
 * prima stesura lo metteva su `color` e il commento accanto dichiarava il
 * contrario: e' la famiglia della promessa scritta e non mantenuta, chiusa
 * qui misurando invece di crederci.
 */
.twss__stato[data-aperto="1"] {
  --twss-segnale: var(--twss-si, #16a34a);
  border-color: var(--twss-si, #16a34a);
}

.twss__stato[data-aperto="0"] {
  --twss-segnale: var(--twss-no, #dc2626);
  border-color: var(--twss-no, #dc2626);
}

/*
 * ⚠️ Il testo del countdown NON va tenuto su una riga sola: «Aperta · chiude
 * fra 12h 52m» dimensionerebbe la colonna sul proprio minimo, ed e' il difetto
 * gia' pagato con le chiavi DKIM — una colonna larga per una frase che sta
 * benissimo su due righe.
 */
.twss__col-stato {
  white-space: normal;
}