/* ---------------------------------------------------------------------
 *  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.
 * ------------------------------------------------------------------ */
#nbfinder-root,
#nbfinder-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;
}
#nbfinder-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);
}

#nbfinder-root *,
#nbfinder-root *::before,
#nbfinder-root *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

#nbfinder-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);
}
#nbfinder-root h1 { font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }

/* ---------- Toolbar: Brand / Ordina / Filtri ---------- */
#nbfinder-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. */
#nbfinder-root .toolbar-filtri {
  flex-basis: 100%;
  margin-left: 0;
  justify-content: flex-end;
}

#nbfinder-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);
}
#nbfinder-root .btn-toolbar:hover { background: var(--color-surface-hover); border-color: var(--color-primary); }
#nbfinder-root .btn-toolbar .caret { font-size: 0.7rem; color: var(--color-text-muted); }
#nbfinder-root .btn-toolbar.is-active { border-color: var(--color-primary); color: var(--color-primary); }
/* Casella di ricerca: prima voce della toolbar, a sinistra dell'ordinamento,
   come sul PC Builder. Stessa altezza e stesso bordo dei pulsanti accanto. */
#nbfinder-root .nbf-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);
}
#nbfinder-root .nbf-search:focus-within { border-color: var(--color-primary); }
#nbfinder-root .nbf-search > i { color: var(--color-text-muted); font-size: 0.85rem; }
#nbfinder-root .nbf-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;
}
#nbfinder-root .nbf-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. */
#nbfinder-root .nbf-search input::-webkit-search-cancel-button { display: none; }
#nbfinder-root .nbf-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;
}
#nbfinder-root .nbf-search-clear:hover { color: var(--color-text); }
/* Necessario: la regola display sopra ha specificità maggiore del display:none
   che il browser applica a [hidden], quindi senza questa riga la "x" resterebbe
   visibile anche a casella vuota. */
#nbfinder-root .nbf-search-clear[hidden] { display: none; }

#nbfinder-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) ---------- */
#nbfinder-root #nbf-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;
}
#nbfinder-root.filters-open #nbf-filters { transform: translateX(0); }

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

#nbfinder-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;
}
#nbfinder-root .filters-title {
  flex: 1;
  font-size: 0.95rem; font-weight: 700;
  display: flex; align-items: center; gap: 0.45rem;
}
#nbfinder-root .filters-title i { color: var(--color-primary); }
#nbfinder-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);
}
#nbfinder-root .btn-ghost:hover { background: var(--color-surface-hover); color: var(--color-text); }
#nbfinder-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;
}
#nbfinder-root .btn-icon:hover { background: var(--color-surface-hover); color: var(--color-text); }

#nbfinder-root .filters-body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}
#nbfinder-root .filter-group { margin-bottom: var(--space-6); }
#nbfinder-root .filter-group:last-child { margin-bottom: 0; }
#nbfinder-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);
}
#nbfinder-root .filter-label i { color: var(--color-primary); }
#nbfinder-root .filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

#nbfinder-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;
}
#nbfinder-root .chip:hover { background: var(--color-surface-hover); border-color: var(--color-primary); }
#nbfinder-root .chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
  font-weight: 600;
}
#nbfinder-root .chip.active:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

#nbfinder-root .filters-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
  flex-shrink: 0;
}
#nbfinder-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);
}
#nbfinder-root .btn-cta:hover { background: var(--color-primary-hover); }

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

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

/* ---------- Card prodotto ---------- */
#nbfinder-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;
}
#nbfinder-root .nb-card:hover { border-color: var(--color-primary); }
#nbfinder-root .nb-card.in-compare { border-color: var(--color-primary); }

#nbfinder-root .nb-card-top {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
#nbfinder-root .nb-title {
  flex: 1;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nbfinder-root .nb-title a { color: var(--color-primary); }
#nbfinder-root .nb-title a:hover { color: var(--color-primary-hover); text-decoration: underline; }
#nbfinder-root .nb-price {
  font-size: 1.02rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Le regole del pallino fascia (.tier-dot, .tier-alta/media/bassa, .tier-text)
   sono state rimosse il 2026-07-30 insieme alla riga "Fascia" del comparatore:
   vedi la nota in cima a nb-finder.js. La colonna tier resta sul Google Sheet e
   dentro database.json, sparisce solo dall'interfaccia. */

#nbfinder-root .nb-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
#nbfinder-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;
}
#nbfinder-root .nb-specs .spec-item { white-space: nowrap; }
#nbfinder-root .nb-specs .spec-item i { color: var(--color-primary); margin-right: 0.3rem; font-size: 0.75rem; }
#nbfinder-root .nb-specs .spec-sep { color: var(--color-border); margin: 0 0.5rem; }

#nbfinder-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;
}
#nbfinder-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;
}
#nbfinder-root .btn-compare:hover { border-color: var(--color-primary); color: var(--color-text); }
#nbfinder-root .btn-compare.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}
#nbfinder-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;
}
#nbfinder-root .btn-buy:hover { background: var(--color-success-hover); }
#nbfinder-root .btn-buy-disabled {
  background: var(--color-divider);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

#nbfinder-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);
}
#nbfinder-root .no-results i { font-size: 1.4rem; color: var(--color-primary); }
#nbfinder-root .no-results[hidden] { display: none !important; }

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

/* ---------- Barra di confronto (fissa in basso) ---------- */
#nbfinder-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);
}
#nbfinder-root .compare-bar[hidden] { display: none !important; }
#nbfinder-root .compare-bar-items {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}
#nbfinder-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;
}
#nbfinder-root .compare-pill .pill-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#nbfinder-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;
}
#nbfinder-root .compare-pill button:hover { background: var(--color-surface-hover); color: var(--color-danger); }
#nbfinder-root .compare-bar-actions {
  display: flex; align-items: center; gap: var(--space-2);
  flex-shrink: 0;
}
#nbfinder-root .compare-open { width: auto; padding: 0.5rem 0.9rem; font-size: 0.85rem; }

/* ---------- Overlay confronto ---------- */
#nbfinder-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);
}
#nbfinder-root .compare-overlay[hidden] { display: none !important; }
#nbfinder-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;
}
#nbfinder-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;
}
#nbfinder-root .compare-body {
  overflow: auto;
  padding: var(--space-4);
}
#nbfinder-root .compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
#nbfinder-root .compare-table th,
#nbfinder-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;
}
#nbfinder-root .compare-table tr:last-child th,
#nbfinder-root .compare-table tr:last-child td { border-bottom: none; }
#nbfinder-root .compare-table thead th {
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--color-border);
}
#nbfinder-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;
}
#nbfinder-root .compare-table tbody th i { color: var(--color-primary); margin-right: 0.35rem; }
#nbfinder-root .compare-table .compare-price { font-weight: 700; }

/* ---------- Tooltip immagine (solo dispositivi con mouse) ---------- */
#nbfinder-root #nbf-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;
}
#nbfinder-root #nbf-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) {
  #nbfinder-root #nbf-image-tooltip { display: none !important; }
}

/* ---------- Mobile / tablet ---------- */
@media (max-width: 900px) {
  #nbfinder-root header { flex-direction: column; align-items: flex-start; }
  #nbfinder-root .toolbar { width: 100%; margin-left: 0; }
  #nbfinder-root .toolbar-filtri { justify-content: flex-start; }
  /* Su schermi stretti la ricerca prende tutta la riga e i pulsanti vanno sotto:
     una casella da 15rem accanto a tre pulsanti manderebbe tutto a capo male. */
  #nbfinder-root .nbf-search { width: 100%; }
  #nbfinder-root .nbf-search input { width: 100%; }

  #nbfinder-root #nbf-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);
  }
  #nbfinder-root.filters-open #nbf-filters { transform: translateY(0); }

  #nbfinder-root .nb-card-bottom {
    flex-direction: column;
    align-items: stretch;
  }
  #nbfinder-root .nb-actions { flex-direction: column; align-items: stretch; margin-left: 0; }
  #nbfinder-root .btn-buy,
  #nbfinder-root .btn-compare { justify-content: center; width: 100%; }
  #nbfinder-root .nb-title { white-space: normal; }
  #nbfinder-root .nb-card-top { flex-wrap: wrap; }

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

/* ---------- Testata overlay confronto con pulsante condivisione ---------- */
#nbfinder-root .compare-head-actions { display: flex; align-items: center; gap: 0.5rem; }
/* "Copia link" è 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 su PC Builder. */
#nbfinder-root #nbf-compare-share {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}
#nbfinder-root #nbf-compare-share:hover { opacity: 0.9; background: var(--color-primary); }

@media (max-width: 900px) {
  #nbfinder-root .compare-head-actions #nbf-compare-share span { display: none; }
}

/* ---------- Immagine prodotto nell'intestazione del confronto ----------
   CONFRONTO MULTIPLO (due o più 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, stesso bug
   già risolto sul Mini PC. */
#nbfinder-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;
}
#nbfinder-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;
}
#nbfinder-root .compare-table thead th .compare-img-empty {
  margin: 0;
  color: var(--color-text-muted); font-size: 2rem; opacity: 0.4;
}
@media (max-width: 768px) {
  #nbfinder-root .compare-table thead th .compare-img,
  #nbfinder-root .compare-table thead th .compare-img img { height: 64px; max-height: 64px; }
}

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

/* ---------- Prime e disponibilità ---------- */
#nbfinder-root .nb-card { cursor: pointer; }
/* Logo Prime (scritta + swoosh) a destra del prezzo, per i prodotti
   venduti o spediti da Amazon. Si scala con la dimensione del prezzo. */
#nbfinder-root .prime-logo {
  height: 1.15em; width: auto;
  margin-left: 0.4rem;
  vertical-align: -0.18em;
  fill: #00A8E1;
  flex-shrink: 0;
}
#nbfinder-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 */
#nbfinder-root .nb-unavailable {
  color: var(--color-text-muted);
  font-size: 0.82rem; font-weight: 600;
  white-space: nowrap;
}