/* ---------------------------------------------------------------------
 *  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);
}

#phfinder-root *,
#phfinder-root *::before,
#phfinder-root *::after { box-sizing: border-box; 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);
}
#phfinder-root .nb-title {
  flex: 1;
  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; }

  #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;
}

/* ---------- Schermo intero del confronto / della scheda tecnica ----------
   Serve a fare lo screenshot: il pannello si prende tutta la finestra E la
   tabella si compatta, perche' ingrandire e basta lascerebbe il confronto a
   tre a scorrere come prima.

   La specificita' e' #id + due classi: batte sia le regole base sia quelle
   della media query mobile, indipendentemente dall'ordine. */
#phfinder-root:fullscreen { background: var(--color-bg); overflow: auto; }
#phfinder-root:-webkit-full-screen { background: var(--color-bg); overflow: auto; }
#phfinder-root.is-fullscreen .compare-overlay { padding: 0; }
#phfinder-root.is-fullscreen .compare-panel {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border: none;
  border-radius: 0;
}

/* Compattazione: ~15 righe visibili diventano ~30 su uno schermo 1080p. */
/* Larghezza della tabella a schermo intero.
   Con la sola `width: 100%` su un monitor largo le colonne si allontanavano
   fino ai bordi: due prodotti finivano uno all'estrema sinistra e uno
   all'estrema destra, con mezzo schermo di vuoto in mezzo e l'occhio costretto
   ad attraversarlo per confrontare due valori. Ora la tabella ha una larghezza
   sua, proporzionale al numero di prodotti, e resta centrata: la distanza tra
   le colonne è la stessa che ci siano due o tre schede, e che il monitor sia
   da 1080p o da 4K.
   Il `max(900px, ...)` è il pavimento: con un prodotto solo la scheda tecnica
   non deve diventare più stretta di com'è nel pannello normale.
   `--compare-cols` lo scrive renderCompareTable. */
#phfinder-root.is-fullscreen .compare-body {
  padding: var(--space-2) var(--space-4);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#phfinder-root.is-fullscreen .compare-table {
  width: 100%;
  max-width: max(900px, calc(260px + var(--compare-cols, 3) * 360px));
  margin: 0 auto;
}
/* Colonne prodotto tutte uguali: con la larghezza automatica le decideva la
   lunghezza del testo, e la colonna del telefono con la scheda video piu'
   prolissa diventava piu' larga delle altre. In un confronto due colonne di
   larghezza diversa si leggono come due cose diverse.
   Escluso di proposito il caso scheda singola (.compare-table-single), che ha
   regole opposte e volute: colonna etichette al 38% e testata con colspan. */
#phfinder-root.is-fullscreen .compare-table:not(.compare-table-single) {
  table-layout: fixed;
}
#phfinder-root.is-fullscreen .compare-table:not(.compare-table-single) thead th:first-child {
  width: 260px;
}
/* Con table-layout fixed una parola lunghissima uscirebbe dalla cella. */
#phfinder-root.is-fullscreen .compare-table td,
#phfinder-root.is-fullscreen .compare-table tbody th { overflow-wrap: anywhere; }
#phfinder-root.is-fullscreen .compare-table tbody th { white-space: normal; }
#phfinder-root.is-fullscreen .compare-table { font-size: 0.78rem; line-height: 1.25; }
#phfinder-root.is-fullscreen .compare-table th,
#phfinder-root.is-fullscreen .compare-table td { padding: 0.18rem var(--space-3); }
#phfinder-root.is-fullscreen .compare-table thead th { font-size: 0.82rem; padding-bottom: 0.3rem; }
#phfinder-root.is-fullscreen .compare-table tbody th { font-size: 0.68rem; }
#phfinder-root.is-fullscreen .compare-table thead th .compare-img,
#phfinder-root.is-fullscreen .compare-table thead th .compare-img img { height: 56px; max-height: 56px; }
#phfinder-root.is-fullscreen .compare-table thead th .compare-img { margin-bottom: 0.25rem; }
#phfinder-root.is-fullscreen .compare-group-row td { padding: 0.14rem var(--space-3); font-size: 0.72rem; }
/* Il pulsante Compra dell'ultima riga: piu' basso, non piu' stretto. */
#phfinder-root.is-fullscreen .compare-row-buy .btn-buy { padding: 0.25rem 0.7rem; font-size: 0.78rem; }