/* ---------------------------------------------------------------------
 *  PALETTE — ereditata dal tema (2026-07-30)
 *
 *  Prima questi due blocchi contenevano i colori scritti a mano, ricopiati
 *  identici in tutti e quattro i tool: cambiare il colore dei pulsanti
 *  significava ricordarsi di modificare quattro file diversi, e gli
 *  strumenti erano gli unici pezzi del sito che non seguivano il tema.
 *
 *  Ora ogni colore si legge cosi':   var(--rig-X, valore-di-riserva)
 *   - il tema definisce le --rig-* in assets/rig-ui.css e i tool le ereditano,
 *     quindi cambiando tema cambiano anche gli strumenti;
 *   - se il tema non fosse attivo, var() ripiega sul valore di riserva, che e'
 *     esattamente il colore usato fino a ieri: il tool resta leggibile invece
 *     di diventare bianco su bianco.
 *
 *  Il blocco [data-theme="dark"] serve solo a quel caso di riserva: il tema
 *  del tool viene sincronizzato con quello del sito da syncThemeFromSite(),
 *  quindi quando il tema c'e' le --rig-* portano gia' i colori giusti.
 * ------------------------------------------------------------------ */
#phfinder-root,
#phfinder-root[data-theme="light"] {
  --color-bg: var(--rig-bg, #f7f6f2);
  --color-surface: var(--rig-surface, #ffffff);
  --color-surface-hover: var(--rig-surface-hover, #f3efe7);
  --color-border: var(--rig-border, #e2ddd1);
  --color-divider: var(--rig-divider, #f4f0e7);
  --color-text: var(--rig-text, #17181b);
  --color-text-muted: var(--rig-text-muted, #706c62);
  --color-primary: var(--rig-primary, #b97f56);
  --color-primary-hover: var(--rig-primary-hover, #9f6843);
  --color-success: var(--rig-success, #7f8e62);
  --color-success-hover: var(--rig-success-hover, #6f7b56);
  --color-warning: var(--rig-warning, #c08a2e);
  --color-danger: var(--rig-danger, #bb6d5b);
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --font-body: Inter, sans-serif;
}
#phfinder-root[data-theme="dark"] {
  --color-bg: var(--rig-bg, #17181b);
  --color-surface: var(--rig-surface, #2f3138);
  --color-surface-hover: var(--rig-surface-hover, #444750);
  --color-border: var(--rig-border, #555249);
  --color-divider: var(--rig-divider, #26282e);
  --color-text: var(--rig-text, #f1e2cb);
  --color-text-muted: var(--rig-text-muted, #b8bc9f);
  --color-primary: var(--rig-primary, #cc9870);
  --color-primary-hover: var(--rig-primary-hover, #ddc48c);
  --color-success: var(--rig-success, #b8c394);
  --color-success-hover: var(--rig-success-hover, #c7d2a3);
  --color-warning: var(--rig-warning, #dbb568);
  --color-danger: var(--rig-danger, #d48e72);
}

/* AZZERAMENTO INTERNO — diviso in due regole di proposito.
 *
 * 1) box-sizing su TUTTO, componenti condivisi compresi: e' la regola che fa
 *    stare bordi e padding dentro la larghezza dichiarata, e senza di lei un
 *    blocco con max-width e padding sborderebbe.
 *
 * 2) margin/padding a zero SOLO su cio' che appartiene al tool. Servono a
 *    togliere i margini di serie del browser su p, titoli ed elenchi.
 *
 * PERCHE' L'ECCEZIONE `rig-`: questo selettore contiene un id, quindi batte
 * qualunque regola scritta a classe. I componenti che nascono nel tema
 * (rig-ui.css) e vengono stampati dentro un tool si trovavano azzerati senza
 * potersi difendere: nel disclaimer passavano larghezza, colori e interlinea
 * ma non padding e margini. Non dava errore, sembrava solo un valore
 * sbagliato, e sono servite tre versioni per accorgersene.
 *
 * REGOLA DA RISPETTARE: tutto cio' che ha una classe che inizia per `rig-`
 * e' territorio del tema. Il primo selettore dentro :where salta il
 * componente, il secondo salta tutto quello che ha dentro.
 *
 * IL :where E' OBBLIGATORIO, non e' un vezzo. :not() eredita la specificita'
 * di cio' che contiene: scritto come :not([class*="rig-"]):not([class*="rig-"] *)
 * questo selettore passava da (1,0,0) a (1,2,0) e cominciava a battere le
 * regole del tool stesso, tipo `#root .checkout-name`, azzerando il padding
 * di TUTTA l'interfaccia. :where() vale zero, quindi la regola resta
 * esattamente forte com'era prima e cambia solo chi colpisce. Un componente condiviso nuovo (il tasto
 * "Segnala un errore", per dirne uno) e' protetto senza toccare nulla qui,
 * a patto di nominarlo `rig-*`. Per contro deve dichiarare i propri spazi:
 * dentro il suo sottoalbero i margini di serie del browser tornano validi.
 */
#phfinder-root *,
#phfinder-root *::before,
#phfinder-root *::after { box-sizing: border-box; }

#phfinder-root *:not(:where([class*="rig-"], [class*="rig-"] *)),
#phfinder-root *:not(:where([class*="rig-"], [class*="rig-"] *))::before,
#phfinder-root *:not(:where([class*="rig-"], [class*="rig-"] *))::after { margin: 0; padding: 0; }

#phfinder-root {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  padding: var(--space-4);
}
#phfinder-root button { cursor: pointer; border: none; font: inherit; background: none; transition: 0.15s; }
#phfinder-root button:disabled { cursor: not-allowed; opacity: 0.55; }
#phfinder-root a { text-decoration: none; color: inherit; }
#phfinder-root .container { max-width: 1024px; margin: 0 auto; }

#phfinder-root header {
  display: flex; justify-content: space-between; align-items: center;
  /* row-gap piu' generoso del column-gap: la riga dei filtri sta sotto al
     titolo e appiccicata si leggeva male. */
  column-gap: var(--space-3);
  row-gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
#phfinder-root h1 { font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }

/* ---------- Toolbar: Brand / Ordina / Filtri ---------- */
#phfinder-root .toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  /* margin-left:auto invece di affidarsi allo space-between dell'header.
     Quando il titolo e la toolbar non ci stanno sulla stessa riga, la toolbar
     va a capo e diventa l'unico elemento della sua riga: con space-between un
     elemento solo finisce a SINISTRA. Succedeva su Mini PC e Phone, che hanno
     un pulsante in piu' degli altri e quindi vanno a capo prima. */
  margin-left: auto;
}
/* Riga dei filtri: sempre su una riga propria, sotto al titolo e all'eventuale
   selettore di sezione. flex-basis:100% forza l'a-capo dentro l'header, che e'
   gia' flex-wrap:wrap, cosi' non serve spostare il markup fuori da <header> e
   il bordo inferiore resta sotto a tutto. */
#phfinder-root .toolbar-filtri {
  flex-basis: 100%;
  margin-left: 0;
  justify-content: flex-end;
}

#phfinder-root .btn-toolbar {
  display: inline-flex;
  align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem; font-weight: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
#phfinder-root .btn-toolbar:hover { background: var(--color-surface-hover); border-color: var(--color-primary); }
#phfinder-root .btn-toolbar .caret { font-size: 0.7rem; color: var(--color-text-muted); }
#phfinder-root .btn-toolbar.is-active { border-color: var(--color-primary); color: var(--color-primary); }
/* ---------- Casella di ricerca in toolbar ---------- */
#phfinder-root .phf-search {
  position: relative;
  display: inline-flex; align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
#phfinder-root .phf-search:focus-within { border-color: var(--color-primary); }
#phfinder-root .phf-search > i { color: var(--color-text-muted); font-size: 0.85rem; }
#phfinder-root .phf-search input {
  width: 15rem; max-width: 100%;
  border: none; outline: none; background: transparent;
  color: var(--color-text);
  font-size: 0.9rem; font-family: inherit;
  padding: 0;
}
#phfinder-root .phf-search input::placeholder { color: var(--color-text-muted); }
/* La "x" nativa di input[type=search] cambia da browser a browser: la
   nascondiamo e usiamo il nostro pulsante, coerente con le altre icone. */
#phfinder-root .phf-search input::-webkit-search-cancel-button { display: none; }
#phfinder-root .phf-search-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem;
  border: none; background: transparent; padding: 0;
  color: var(--color-text-muted); cursor: pointer; font-size: 0.8rem;
}
#phfinder-root .phf-search-clear:hover { color: var(--color-text); }
/* Necessario: la regola display sopra ha specificita' maggiore del display:none
   che il browser applica a [hidden], quindi senza questa riga la "x" resterebbe
   visibile anche a casella vuota. */
#phfinder-root .phf-search-clear[hidden] { display: none; }

#phfinder-root .toolbar-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.3rem; height: 1.3rem;
  padding: 0 0.3rem;
  font-size: 0.72rem; font-weight: 700;
  background: var(--color-primary);
  color: var(--color-bg);
  border-radius: 999px;
}

/* ---------- Pannello filtri (a comparsa: desktop da destra, mobile dal basso) ---------- */
#phfinder-root #phf-filters {
  position: fixed;
  z-index: 9995;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  top: 0; right: 0; bottom: 0;
  width: 380px;
  max-width: 92vw;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
#phfinder-root.filters-open #phf-filters { transform: translateX(0); }

#phfinder-root .filters-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9990;
}
#phfinder-root.filters-open .filters-backdrop { display: block; }

#phfinder-root .filters-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  flex-shrink: 0;
}
#phfinder-root .filters-title {
  flex: 1;
  font-size: 0.95rem; font-weight: 700;
  display: flex; align-items: center; gap: 0.45rem;
}
#phfinder-root .filters-title i { color: var(--color-primary); }
#phfinder-root .btn-ghost {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.8rem; font-weight: 600;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-md);
}
#phfinder-root .btn-ghost:hover { background: var(--color-surface-hover); color: var(--color-text); }
#phfinder-root .btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 1rem;
}
#phfinder-root .btn-icon:hover { background: var(--color-surface-hover); color: var(--color-text); }

#phfinder-root .filters-body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}
#phfinder-root .filter-group { margin-bottom: var(--space-6); }
#phfinder-root .filter-group:last-child { margin-bottom: 0; }
#phfinder-root .filter-label {
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  display: flex; align-items: center; gap: 0.4rem;
  margin-bottom: var(--space-2);
}
#phfinder-root .filter-label i { color: var(--color-primary); }
#phfinder-root .filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

#phfinder-root .chip {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.7rem;
  font-size: 0.84rem; font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  user-select: none;
}
#phfinder-root .chip:hover { background: var(--color-surface-hover); border-color: var(--color-primary); }
#phfinder-root .chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
  font-weight: 600;
}
#phfinder-root .chip.active:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

#phfinder-root .filters-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
  flex-shrink: 0;
}
#phfinder-root .btn-cta {
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: 0.95rem; font-weight: 700;
  background: var(--color-primary);
  color: var(--color-bg);
  border-radius: var(--radius-md);
}
#phfinder-root .btn-cta:hover { background: var(--color-primary-hover); }

/* ---------- Area risultati ---------- */
#phfinder-root .results-toolbar { margin-bottom: var(--space-3); }
#phfinder-root .results-count {
  font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted);
}

#phfinder-root .results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---------- Card prodotto ---------- */
#phfinder-root .nb-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  transition: border-color 0.15s, background 0.15s;
}
#phfinder-root .nb-card:hover { border-color: var(--color-primary); }
#phfinder-root .nb-card.in-compare { border-color: var(--color-primary); }

#phfinder-root .nb-card-top {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
/* Contenitore di nome + pulsante "altre configurazioni": e' LUI a prendersi
   lo spazio elastico della riga (flex:1), non il nome al suo interno.
   Cosi' il pulsante si affianca al testo del nome invece di scivolare fino al
   bordo destro, che e' quello che succedeva quando flex:1 stava sul nome -
   un nome corto lasciava comunque tutta la riga alla sua "scatola", e il
   pulsante subito dopo finiva lontano dal testo che dovrebbe accompagnare. */
#phfinder-root .nb-title-wrap {
  display: flex;
  align-items: baseline;
  min-width: 0;
  flex: 1;
  gap: 0.4rem;
}
#phfinder-root .nb-title {
  /* flex-shrink si', flex-grow no: il nome si restringe quando serve ma non
     si allarga oltre il proprio testo, altrimenti il pulsante torna a
     scivolare lontano come nel caso sopra. */
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#phfinder-root .nb-title a { color: var(--color-primary); }
#phfinder-root .nb-title a:hover { color: var(--color-primary-hover); text-decoration: underline; }
#phfinder-root .nb-platform {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  vertical-align: middle;
}
#phfinder-root .nb-price {
  font-size: 1.02rem;
  font-weight: 700;
  white-space: nowrap;
}


#phfinder-root .nb-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
#phfinder-root .nb-specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  min-width: 0;
}
#phfinder-root .nb-specs .spec-item { white-space: nowrap; }
#phfinder-root .nb-specs .spec-item i { color: var(--color-primary); margin-right: 0.3rem; font-size: 0.75rem; }
#phfinder-root .nb-specs .spec-sep { color: var(--color-border); margin: 0 0.5rem; }

#phfinder-root .nb-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  /* Come per la toolbar: se la riga in fondo alla card va a capo, lo
     space-between del contenitore lascerebbe i pulsanti a sinistra. */
  margin-left: auto;
}
#phfinder-root .btn-compare {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem; font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-muted);
  white-space: nowrap;
}
#phfinder-root .btn-compare:hover { border-color: var(--color-primary); color: var(--color-text); }
#phfinder-root .btn-compare.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}
#phfinder-root .btn-buy {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem; font-weight: 600;
  border-radius: var(--radius-md);
  background: var(--color-success);
  color: var(--color-bg);
  white-space: nowrap;
}
#phfinder-root .btn-buy:hover { background: var(--color-success-hover); }
#phfinder-root .btn-buy-disabled {
  background: var(--color-divider);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

#phfinder-root .no-results {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
#phfinder-root .no-results i { font-size: 1.4rem; color: var(--color-primary); }
#phfinder-root .no-results[hidden] { display: none !important; }

#phfinder-root .affiliate-note {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

/* ---------- Barra di confronto (fissa in basso) ---------- */
#phfinder-root .compare-bar {
  position: fixed;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  z-index: 9985;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: min(92vw, 900px);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
#phfinder-root .compare-bar[hidden] { display: none !important; }
#phfinder-root .compare-bar-items {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}
#phfinder-root .compare-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.35rem 0.25rem 0.7rem;
  font-size: 0.8rem; font-weight: 600;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  max-width: 220px;
}
#phfinder-root .compare-pill .pill-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#phfinder-root .compare-pill button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: 0.7rem;
}
#phfinder-root .compare-pill button:hover { background: var(--color-surface-hover); color: var(--color-danger); }
#phfinder-root .compare-bar-actions {
  display: flex; align-items: center; gap: var(--space-2);
  flex-shrink: 0;
}
#phfinder-root .compare-open { width: auto; padding: 0.5rem 0.9rem; font-size: 0.85rem; }

/* ---------- Overlay confronto ---------- */
#phfinder-root .compare-overlay {
  position: fixed; inset: 0;
  z-index: 9996;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
#phfinder-root .compare-overlay[hidden] { display: none !important; }
#phfinder-root .compare-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  width: min(96vw, 900px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#phfinder-root .compare-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  flex-shrink: 0;
}
#phfinder-root .compare-body {
  overflow: auto;
  padding: var(--space-4);
}
#phfinder-root .compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
#phfinder-root .compare-table th,
#phfinder-root .compare-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
  vertical-align: top;
  min-width: 140px;
}
#phfinder-root .compare-table tr:last-child th,
#phfinder-root .compare-table tr:last-child td { border-bottom: none; }
#phfinder-root .compare-table thead th {
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--color-border);
}
#phfinder-root .compare-table tbody th {
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
#phfinder-root .compare-table tbody th i { color: var(--color-primary); margin-right: 0.35rem; }
#phfinder-root .compare-table .compare-price { font-weight: 700; }

/* ---------- Tooltip immagine (solo dispositivi con mouse) ---------- */
#phfinder-root #phf-image-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  max-width: 240px;
}
#phfinder-root #phf-image-tooltip img {
  display: block;
  max-width: 220px;
  max-height: 180px;
  width: auto; height: auto;
  border-radius: var(--radius-md);
  background: #fff;
}
@media (hover: none) {
  #phfinder-root #phf-image-tooltip { display: none !important; }
}

/* ---------- Mobile / tablet ---------- */
@media (max-width: 900px) {
  #phfinder-root header { flex-direction: column; align-items: flex-start; }
  #phfinder-root .toolbar { width: 100%; margin-left: 0; }
  #phfinder-root .toolbar-filtri { justify-content: flex-start; }

  #phfinder-root #phf-filters {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto;
    max-width: none;
    max-height: 82vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    transform: translateY(100%);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
  }
  #phfinder-root.filters-open #phf-filters { transform: translateY(0); }

  #phfinder-root .nb-card-bottom {
    flex-direction: column;
    align-items: stretch;
  }
  #phfinder-root .nb-actions { flex-direction: column; align-items: stretch; margin-left: 0; }
  #phfinder-root .btn-buy,
  #phfinder-root .btn-compare { justify-content: center; width: 100%; }
  #phfinder-root .nb-title { white-space: normal; }
  #phfinder-root .nb-card-top { flex-wrap: wrap; }
  /* Il pulsante varianti (solo freccia + numero) non deve MAI comprimere il
     nome: se sulla stessa riga non ci sta, va a capo da solo sotto il
     titolo, che resta intero. (2026-08-28) */
  #phfinder-root .nb-title-wrap { flex-wrap: wrap; }
  /* Nomi lunghi (il processore e' il caso tipico) vanno a capo DENTRO la
     card invece di uscire dal bordo: white-space normal, con la rottura
     forzata solo come ultima risorsa per parole senza spazi. (2026-08-28) */
  #phfinder-root .nb-specs .spec-item { white-space: normal; overflow-wrap: break-word; }

  #phfinder-root .compare-bar {
    left: var(--space-2); right: var(--space-2);
    transform: none;
    max-width: none;
    flex-wrap: wrap;
  }
  #phfinder-root .compare-panel { width: 100%; max-height: 94vh; }
  #phfinder-root .compare-body { padding: var(--space-2); }
  #phfinder-root .compare-table th,
  #phfinder-root .compare-table td { min-width: 110px; padding: var(--space-2); }
}

/* ================= Aggiunte Phone Finder ================= */

/* ---------- Toggle Smartphone / Tablet ---------- */
#phfinder-root .device-toggle {
  display: inline-flex; align-items: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
#phfinder-root .device-toggle-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0 0.9rem; height: 40px;
  font-weight: 600; font-size: 0.85rem;
  color: var(--color-text-muted); background: transparent;
  border-right: 1px solid var(--color-border);
}
#phfinder-root .device-toggle-btn:last-child { border-right: none; }
#phfinder-root .device-toggle-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
#phfinder-root .device-toggle-btn.active {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
}

/* ---------- Intestazioni di sezione nel comparatore ---------- */
#phfinder-root .compare-table tr.compare-group-row td {
  background: var(--color-divider);
  font-weight: 700; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-text-muted);
  padding: 0.45rem 0.85rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
#phfinder-root .compare-table tr.compare-group-row td i { margin-right: 0.4rem; opacity: 0.75; }

/* Etichetta del tipo dispositivo sotto il nome nelle colonne del confronto */
#phfinder-root .compare-table thead th .compare-devtype {
  display: block; margin-top: 0.15rem;
  font-weight: 600; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* ---------- Testata overlay confronto con pulsante condivisione ---------- */
#phfinder-root .compare-head-actions { display: flex; align-items: center; gap: 0.5rem; }

/* "Copia link" e' pieno, non trasparente: sul fondo scuro del pannello di
   confronto la variante trasparente si confondeva con lo sfondo e non si
   capiva che fosse un pulsante. Stessa correzione fatta sugli altri tool. */
#phfinder-root #phf-compare-share {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}
#phfinder-root #phf-compare-share:hover { opacity: 0.9; background: var(--color-primary); }

@media (max-width: 900px) {
  #phfinder-root .device-toggle { width: 100%; }
  #phfinder-root .device-toggle-btn { flex: 1; justify-content: center; }
  #phfinder-root .compare-head-actions #phf-compare-share span { display: none; }
}

/* ---------- Immagine prodotto nell'intestazione del confronto ----------
   CONFRONTO MULTIPLO (due o piu' prodotti): l'immagine si allinea a SINISTRA,
   sullo stesso asse del nome e dei valori sottostanti. Prima era centrata
   dentro la colonna: con colonne larghe la foto sembrava spostata a destra
   rispetto alla scheda a cui appartiene. Corretto il 2026-07-30. */
#phfinder-root .compare-table thead th .compare-img {
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%; height: 96px; margin: 0 0 0.4rem;
}
#phfinder-root .compare-table thead th .compare-img img {
  display: block; margin: 0;
  max-height: 96px; max-width: 100%; width: auto;
  object-fit: contain; border-radius: var(--radius-md);
  background: #fff; padding: 4px;
}
#phfinder-root .compare-table thead th .compare-img-empty {
  margin: 0;
  color: var(--color-text-muted); font-size: 2rem; opacity: 0.4;
}

/* SCHEDA SINGOLA (un solo prodotto): regola OPPOSTA alla precedente e voluta.
   Qui l'intestazione e' una sola cella con colspan=2, quindi immagine e nome si
   centrano sull'intera scheda; la colonna delle etichette ha larghezza fissa,
   altrimenti la colonna dei valori si prendeva tutto lo spazio residuo e
   l'immagine finiva contro il bordo destro. */
#phfinder-root .compare-table-single thead th { text-align: center; }
#phfinder-root .compare-table-single thead th .compare-img {
  justify-content: center;
  margin: 0 auto 0.4rem;
}
#phfinder-root .compare-table-single thead th .compare-img img { margin: 0 auto; }
#phfinder-root .compare-table-single thead th .compare-img-empty { margin: 0 auto; }
#phfinder-root .compare-table-single tbody th { width: 38%; }
@media (max-width: 768px) {
  #phfinder-root .compare-table thead th .compare-img,
  #phfinder-root .compare-table thead th .compare-img img { height: 64px; max-height: 64px; }
  #phfinder-root .compare-table-single tbody th { width: 42%; }
}

/* ---------- Finestrella "scegli il venditore" ---------- */
/* Deve stare SOPRA al pannello di confronto (9996), perche' si apre anche da
   li' dentro. Il 1200 di prima era sotto: la finestrella si apriva ma restava
   nascosta dal confronto. Gli z-index di questo tool vivono tutti nella fascia
   9980-9999, un valore fuori scala non compete nemmeno. */
#phfinder-root .offerte-overlay {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.55);
}
#phfinder-root .offerte-overlay[hidden] { display: none !important; }
#phfinder-root .offerte-panel {
  width: 100%; max-width: 26rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
#phfinder-root .offerte-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
/* Stesso colore del nome nelle card (.nb-title a): la finestrella e' la
   continuazione della card, non un pannello a se'. */
#phfinder-root .offerte-title { font-weight: 700; font-size: 0.95rem; color: var(--color-primary); }
#phfinder-root .offerte-list { display: flex; flex-direction: column; }
#phfinder-root .offerta {
  display: flex; align-items: center;
  gap: 0.4rem;
  padding: 0.7rem var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text); text-decoration: none;
}
#phfinder-root .offerta:last-child { border-bottom: none; }
#phfinder-root .offerta:hover { background: var(--color-surface-2); }
#phfinder-root .offerta-venditore {
  font-size: 0.9rem;
  /* min-width:0 perche' un nome venditore lungo restringa se stesso invece di
     schiacciare badge e prezzo, che non possono andare a capo. */
  min-width: 0;
}
/* Badge "miglior prezzo" e logo Prime: raggruppati subito a sinistra del
   prezzo. margin-left:auto li stacca dal nome del venditore (a filo era
   illeggibile), il margin-right li separa dalla cifra. */
#phfinder-root .offerta-meta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-left: auto;
  padding-left: var(--space-3);
  flex-shrink: 0;
}
/* Vuoto NON si nasconde: resta un elemento a larghezza zero, altrimenti il
   margin-left:auto sparisce e il prezzo di quella riga non si allinea piu'
   con quello delle altre. */
#phfinder-root .offerta-meta:empty { padding-left: 0; }
/* Dentro il gruppo il margine del logo lo da' il gap, non il logo stesso. */
#phfinder-root .offerta-meta .prime-logo { margin-left: 0; }
#phfinder-root .offerta-badge {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem; border-radius: 999px;
  background: var(--color-primary); color: var(--color-bg);
}
/* Verde come il pulsante "Compra": nella finestrella il prezzo E' l'azione,
   e un pulsante vero per riga stava troppo stretto. */
#phfinder-root .offerta-prezzo {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-weight: 700; white-space: nowrap;
  color: var(--color-success);
}
#phfinder-root .offerte-nota {
  margin: 0; padding: var(--space-3) var(--space-4);
  font-size: 0.72rem; color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

/* "da" davanti al prezzo quando i venditori sono piu' di uno */
#phfinder-root .nb-da {
  font-size: 0.72rem; font-weight: 600;
  color: var(--color-text-muted);
  text-transform: lowercase;
}

/* La riga Acquisto del confronto usa lo stesso .btn-buy delle card, con il
   numero di venditori tra parentesi: apre la finestrella. L'elenco esteso che
   stava qui (.compare-offerte / .compare-offerta) e' stato rimosso. */

/* ---------- Prime e disponibilità ---------- */
#phfinder-root .nb-card { cursor: pointer; }
/* Logo Prime (scritta + swoosh) a destra del prezzo, identico agli altri
   tool: si scala sulla dimensione del prezzo. */
#phfinder-root .prime-logo {
  height: 1.15em; width: auto;
  margin-left: 0.4rem;
  vertical-align: -0.18em;
  fill: #00A8E1;
  flex-shrink: 0;
}
#phfinder-root .prime-logo .prime-word {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.4px;
  fill: #00A8E1;
}
/* Prodotto esaurito (price 0 dal workflow): niente prezzo né Prime */
#phfinder-root .nb-unavailable {
  color: var(--color-text-muted);
  font-size: 0.82rem; font-weight: 600;
  white-space: nowrap;
}

/* ---------- Differenze migliori nel confronto (v6.3) ----------
   Il valore migliore di ogni riga prende il colore del pulsante Confronta
   attivo (--color-primary) e va in grassetto.
   Il verde di --color-success e' stato provato per primo e scartato
   dall'utente il 2026-08-10: si vedeva troppo poco. Quel verde inoltre e' il
   colore del gesto d'acquisto (.btn-buy, prezzo nelle offerte) e qui avrebbe
   voluto dire un'altra cosa - "questo dato e' il migliore" - sullo stesso
   schermo dove c'e' il pulsante Compra.
   Chi decide QUALI celle marcare e' il JS (celleMigliori): qui c'e' solo
   l'aspetto. La regola vale anche per la riga del prezzo, che e' gia' in
   grassetto per conto suo e cambia solo colore. */
#phfinder-root .compare-table td.compare-best {
  color: var(--color-primary);
  font-weight: 700;
}

/* ---------- Pagina dedicata del confronto (?vista=confronto) ----------
   Storia, perche' altrimenti sembra codice inutile: questa vista nasce dallo
   schermo intero della v5.7, in v6.3 e' diventata una pagina a se' e in v6.6
   ha smesso di essere una finestra sovrapposta.

   Il punto: `.compare-overlay` di suo e' `position: fixed; inset: 0`, quindi
   copriva TUTTA la finestra - intestazione del sito e menu dei tool compresi.
   Qui torna un blocco normale nel flusso della pagina: l'intestazione del
   sito resta dov'e', la pagina scorre come ogni altra pagina e il confronto
   e' un contenuto, non una finestra aperta sopra a qualcos'altro.

   Sparita anche la compattazione di font e spaziature che veniva dallo
   schermo intero: serviva a far entrare tutto in una schermata per lo
   screenshot. In una pagina che scorre non serve, e lasciava un testo piu'
   piccolo di quello di tutto il resto del sito. */
#phfinder-root.is-solo-compare > .container > header,
#phfinder-root.is-solo-compare .toolbar-filtri,
#phfinder-root.is-solo-compare main,
#phfinder-root.is-solo-compare .compare-bar { display: none !important; }

/* Un pulsante nascosto con [hidden] va spento esplicitamente: .btn-icon ha
   display:inline-flex e una regola display batte sempre l'hidden del browser. */
#phfinder-root .btn-icon[hidden] { display: none !important; }

/* L'overlay smette di essere una finestra sovrapposta e diventa un blocco.
   I margini negativi lo fanno uscire dalla colonna di testo del sito restando
   centrato: e' cio' che l'utente ha chiesto - la tabella deve poter sforare le
   proporzioni del sito, perche' serve a vedere tutte le differenze insieme.
   La misura e' in vw e non in percentuale perche' il riferimento e' la
   finestra, non la colonna; 98 e non 100 lascia un margine d'aria e tiene
   conto della barra di scorrimento, cosi' la pagina non scorre mai in
   orizzontale. Sotto, il riquadro non supera mai questo blocco: su telefono
   coincidono, e a scorrere e' il corpo della tabella. */
#phfinder-root.is-solo-compare .compare-overlay {
  position: static;
  inset: auto;
  display: block;
  background: transparent;
  padding: 0;
  margin-inline: calc(50% - 49vw);
  max-width: none;
}

/* Larghezza del riquadro: la decide la TABELLA, non lo schermo.
   `width: fit-content` lo fa stringere attorno al contenuto, cosi' con due
   prodotti resta compatto e con tre si allarga da solo. Prima ereditava dallo
   schermo intero una larghezza fissa al 100% con la tabella centrata dentro:
   il risultato era una fascia vuota tutt'intorno, con la tabella che sembrava
   un ritaglio in mezzo allo schermo.
   `min-width` evita l'effetto opposto - il riquadro rinsecchito sulla scheda
   singola - e `max-width: 100%` impedisce che sfondi il blocco qui sopra. */
#phfinder-root.is-solo-compare .compare-panel {
  width: fit-content;
  min-width: min(100%, 680px);
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0 auto;
  /* Niente aspetto da finestra: fondo, bordo, angoli arrotondati e ombra sono
     il linguaggio delle finestre che si aprono SOPRA la pagina (confronto di
     Phone e Notebook, elenco venditori). Qui la pagina e' questa: un riquadro
     sospeso con l'ombra direbbe al lettore che dietro c'e' dell'altro e che
     da qualche parte c'e' una x per chiuderlo. Restano solo il titolo e la
     riga che lo separa dalla tabella. */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
/* Senza il riquadro, le imbottiture laterali del pannello non hanno piu' un
   bordo a cui riferirsi: si tolgono, cosi' titolo e tabella sono allineati
   allo stesso asse. */
#phfinder-root.is-solo-compare .compare-head { padding: var(--space-3) 0; }
#phfinder-root.is-solo-compare .compare-body { overflow: auto; padding: var(--space-4) 0; }

/* Colonne piu' larghe del minimo di 140px della regola base: in una pagina
   intera quel minimo lasciava un confronto a tre largo meno di 750px su un
   monitor da 1440, cioe' di nuovo un ritaglio in mezzo al vuoto. La tabella
   resta comunque adattiva - se il testo e' lungo cresce oltre questa misura. */
#phfinder-root.is-solo-compare .compare-table { width: auto; }
#phfinder-root.is-solo-compare .compare-table th,
#phfinder-root.is-solo-compare .compare-table td { min-width: 240px; }

/* NIENTE regole di dimensione del testo qui.
   La compattazione ereditata dallo schermo intero (0.78rem) e' stata tolta in
   v6.6 perche' rimpiccioliva il testo; l'ingrandimento a 0.95rem provato allo
   stesso giro e' stato scartato dall'utente subito dopo, perche' faceva il
   contrario. La misura giusta e' esattamente quella della finestra di
   confronto normale: si ottiene non scrivendo niente e lasciando valere le
   regole base di .compare-table. */

/* ===========================================================================
   BARRA FILTRI STICKY  (2026-08-09)
   ---------------------------------------------------------------------------
   Scorrendo la lista la riga con ricerca, ordinamento e pulsante Filtri usciva
   dallo schermo: per cambiare un filtro bisognava risalire in cima. Ora resta
   agganciata sotto l'header del tema, che e' sticky, alto 4.25rem e con
   z-index 50 (qui si sta sotto in entrambi i sensi, altrimenti si sovrappongono).
   Il valore si puo' cambiare da un punto solo definendo --rig-header-h nel tema.
   =========================================================================== */
#phfinder-root .toolbar-filtri {
  position: sticky;
  top: var(--rig-header-h, 4.25rem);
  z-index: 30;
  background: var(--color-bg);
  /* flex-basis serviva a mandarla a capo quando era dentro l'header: ora che
     e' una riga a se' non serve piu' e, lasciato, la rendeva un flex item
     senza contenitore flex. */
  flex-basis: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0 0 var(--space-4) 0;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  /* Niente ombra: lo stile del sito e' piatto. Un bordo di 1px basta a
     separare la barra dalla lista che le scorre sotto. */
  border-bottom: 1px solid var(--color-border);
}
/* L'header non ha piu' la riga dei filtri: il suo margine inferiore diventa
   lo spazio fra titolo e barra, non fra titolo e lista. */
#phfinder-root header { margin-bottom: var(--space-4); }

/* ===========================================================================
   VARIANTI DI MEMORIA — sotto-scheda apribile dentro la card   (v7.1, 23/8/26)
   ---------------------------------------------------------------------------
   Perche' DENTRO la card e non in una finestra sovrapposta: su ogni riga di
   questa sotto-scheda c'e' gia' il pulsante che apre l'elenco dei venditori,
   e due finestre una sopra l'altra non hanno via d'uscita. La lista dei
   risultati (.results-list) e' una colonna flex, quindi una card che cresce
   spinge in basso quelle sotto senza scomporre nulla: niente reflow da
   gestire, al contrario di quello che sarebbe successo con una griglia.

   Le configurazioni esaurite non arrivano nemmeno fin qui: le toglie il
   workflow, esattamente come fa da sempre con i venditori esauriti.
   ========================================================================= */

/* Pulsante compatto (freccia + numero + "varianti"): vive nell'intestazione
   della card, DOPO il nome - non piu' a tutta larghezza sotto Compra.
   flex: 0 0 auto cosi' non si restringe mai; e' il titolo (dentro
   .nb-title-wrap, flex: 0 1 auto) a cedere spazio quando il nome e' lungo.
   align-self: center perche' .nb-title-wrap allinea gli altri elementi sulla
   baseline del testo, che per un pulsante non avrebbe senso. */
#phfinder-root .phf-varianti-toggle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  white-space: nowrap;
  cursor: pointer;
}
#phfinder-root .phf-varianti-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}
#phfinder-root .phf-varianti-toggle i {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
}
#phfinder-root .phf-varianti-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
#phfinder-root .phf-varianti-toggle[aria-expanded="true"] {
  border-color: var(--color-primary);
  color: var(--color-text);
}
/* La parola "varianti" e' stata rimossa il 2026-08-28 (vedi variantiToggleHtml
   nel JS): il pulsante e' solo freccia + numero. La regola di prima serviva
   solo a stilare quell'etichetta. */
#phfinder-root .phf-varianti-n {
  min-width: 1.15rem;
  padding: 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--color-bg);
  background: var(--color-text-muted);
  border-radius: 999px;
}
#phfinder-root .phf-varianti-toggle[aria-expanded="true"] .phf-varianti-n { background: var(--color-primary); }

/* Lista, non piu' un elenco di scatole: solo un filo sottile sopra a
   separarla dal resto della card, le righe si separano fra loro con un
   bordo altrettanto sottile (vedi .phf-variante sotto), niente sfondo o
   bordo proprio per riga - la card che le contiene fa gia' da cornice. */
#phfinder-root .phf-varianti-panel {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
}
/* Obbligatorio: una regola display: batte sempre l'hidden del browser. */
#phfinder-root .phf-varianti-panel[hidden] { display: none !important; }

#phfinder-root .phf-variante {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-divider);
}
#phfinder-root .phf-variante:last-child { border-bottom: none; }
/* Il nome della variante segue le stesse regole del nome principale della
   card (.nb-title / .nb-title a): stesso colore, stesso hover, stessa
   dimensione e peso del carattere - non e' un dettaglio minore, e' un nome
   di prodotto come l'altro. Il testo arriva gia' pulito e con la marca
   anteposta da displayName() (etichettaVarianteRiga lo richiama passandole
   la famiglia). Solo quando manca un link (nessun url disponibile) resta
   testo semplice, come fa nameHtml in cardHtml per lo stesso caso sulla
   card. */
#phfinder-root .phf-variante-taglio {
  flex: 1;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 600;
}
#phfinder-root .phf-variante-taglio a { color: var(--color-primary); }
#phfinder-root .phf-variante-taglio a:hover { color: var(--color-primary-hover); text-decoration: underline; }
#phfinder-root .phf-variante-prezzo {
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  margin-left: auto;
}
/* Il pulsante Compra qui e' piu' piccolo di quello della card: su questa riga
   e' un'azione secondaria, l'azione principale resta quella in alto.

   'width: auto' NON e' ridondante ed e' costato una riga scomposta in prova:
   sotto i 900px c'e' gia' una regola  .btn-buy { width: 100% }  che serve alle
   card (li' i pulsanti si impilano a tutta larghezza). Ereditandola, questo
   pulsante prendeva 793px su una riga di 818 e schiacciava il taglio a zero,
   mandandolo a capo una lettera per riga. Stessa specificita', quindi vince
   questa perche' viene dopo: se un domani questo blocco venisse spostato piu'
   in alto nel file, il difetto tornerebbe. */
#phfinder-root .btn-buy-mini {
  width: auto;
  flex: 0 0 auto;
  padding: 0.28rem 0.6rem;
  font-size: 0.76rem;
}
/* La configurazione di cui la card riporta gia' prezzo e specifiche. Nessuna
   scritta in piu': basta il filetto a sinistra per capire che e' quella, e una
   riga di testo qui dentro ruberebbe spazio ai numeri, che sono il motivo per
   cui si apre la sotto-scheda. */
/* is-mostrata (2026-08-23 -> 2026-08-23): la configurazione gia' visibile in
   alto sulla card non compare piu' nel pannello, quindi non serve piu' una
   classe per segnalarla qui dentro. Tolta insieme alla riga che marcava. */
/* La configurazione che soddisfa il filtro attivo: e' il motivo per cui questa
   card e' comparsa nei risultati, quindi si segnala col colore di Confronta
   (lo stesso delle differenze migliori nel confronto). Il verde no: qui vuol
   dire "si compra" ed e' gia' impegnato dal pulsante accanto. */
#phfinder-root .phf-variante.is-match {
  padding-left: 0.5rem;
  border-left: 3px solid var(--color-primary);
}
#phfinder-root .phf-variante.is-match .phf-variante-taglio,
#phfinder-root .phf-variante.is-match .phf-variante-taglio a { color: var(--color-primary); }

/* Elenco delle configurazioni nella riga "Configurazioni" del confronto. */
#phfinder-root .phf-config-chip {
  display: inline-block;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.1rem 0.45rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

@media (max-width: 640px) {
  /* "a partire da" -> "da": .nb-price e' white-space: nowrap e la forma lunga
     spingerebbe il prezzo fuori dalla card sugli schermi stretti. */
  #phfinder-root .nb-da-lungo { display: none; }
  #phfinder-root .phf-variante { flex-wrap: wrap; }
  #phfinder-root .phf-variante-taglio { flex: 1 0 100%; }
  #phfinder-root .phf-variante-prezzo { margin-left: 0; }
  #phfinder-root .btn-buy-mini { margin-left: auto; }
}