/* Bit Radar: stile unico del sito. Il tema chiaro o scuro segue il browser, oppure la scelta
   fatta con il pulsante ◐ (data-tema sulla pagina, impostato da uno script in testa: vedi
   pagine.ts). Senza JavaScript resta solo il browser. */
:root {
  --sfondo: #f6f7f5;
  --carta: #ffffff;
  --carta-2: #f0f2ef;
  --testo: #151a21;
  --tenue: #5a6472;
  --bordo: #e2e5e1;
  --verde: #15803d;
  --verde-chiaro: #dcfce7;
  --giallo: #eab308;
  --giallo-chiaro: #fef9c3;
  --rosso: #b91c1c;
  --rosso-chiaro: #fee2e2;
  --arancio: #c2410c;
  --arancio-chiaro: #ffedd5;
  --blu-tg: #1769aa;
  --ombra: 0 1px 2px rgb(0 0 0 / 0.05), 0 2px 8px rgb(0 0 0 / 0.04);
  --raggio: 12px;
  --larghezza: 1120px;
  color-scheme: light;
}
:root[data-tema="scuro"] {
    --sfondo: #0d1117;
    --carta: #151b23;
    --carta-2: #1b232d;
    --testo: #e6edf3;
    --tenue: #9aa5b3;
    --bordo: #283240;
    --verde: #4ade80;
    --verde-chiaro: #12301f;
    --giallo: #facc15;
    --giallo-chiaro: #33290a;
    --rosso: #f87171;
    --rosso-chiaro: #3a1515;
    --arancio: #fb923c;
    --arancio-chiaro: #3a2212;
    --ombra: none;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
      --sfondo: #0d1117;
      --carta: #151b23;
      --carta-2: #1b232d;
      --testo: #e6edf3;
      --tenue: #9aa5b3;
      --bordo: #283240;
      --verde: #4ade80;
      --verde-chiaro: #12301f;
      --giallo: #facc15;
      --giallo-chiaro: #33290a;
      --rosso: #f87171;
      --rosso-chiaro: #3a1515;
      --arancio: #fb923c;
      --arancio-chiaro: #3a2212;
      --ombra: none;
      color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 0.5rem; }
h2 { font-size: 1.35rem; margin: 2.2rem 0 0.9rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
p { margin: 0 0 1rem; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tenue { color: var(--tenue); }
/* Il codice del produttore: si copia con un tocco, per cercarlo altrove */
.codice { font-family: ui-monospace, Consolas, monospace; font-size: 0.92em; color: var(--testo); user-select: all; }
.piccolo { font-size: 0.85rem; }
.contenitore { max-width: var(--larghezza); margin: 0 auto; padding: 0 16px; }

/* Avviso dell'anteprima con dati inventati */
.esempio {
  background: var(--giallo); color: #1a1a1a; text-align: center;
  font-weight: 600; font-size: 0.9rem; padding: 6px 16px;
}

/* Testata */
.testata { background: var(--carta); border-bottom: 1px solid var(--bordo); position: sticky; top: 0; z-index: 10; }
.testata .contenitore { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 1.15rem; flex-shrink: 0; }
.marchio img { width: 32px; height: 32px; border-radius: 8px; }
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-size: 0.95rem; white-space: nowrap;
}
.bottone-tg { background: var(--blu-tg); color: #fff; }
.bottone-tg:hover { background: #135a92; }
.bottone-pieno { background: var(--verde); color: #fff; }
[data-tema="scuro"] .bottone-pieno { color: #062b14; }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) .bottone-pieno { color: #062b14; } }
.bottone-vuoto { border-color: var(--bordo); background: var(--carta); }
.bottone-vuoto:hover { background: var(--carta-2); }
.testata .bottone-tg { padding: 8px 12px; }
/* La testata a due file: sopra marchio, ricerca, pagine informative e Telegram; sotto le
   famiglie di prodotti, ognuna con il suo pannello di categorie. */
.testata .contenitore { flex-wrap: wrap; gap: 4px 12px; padding-top: 8px; }
.menu-info { display: flex; gap: 2px; margin-left: auto; }
.menu-info a { padding: 6px 8px; border-radius: 8px; font-size: 0.88rem; color: var(--tenue); text-decoration: none; white-space: nowrap; }
.menu-info a:hover, .menu-info a[aria-current="page"] { color: var(--testo); background: var(--carta-2); }
.menu { order: 3; flex-basis: 100%; display: flex; gap: 4px; margin: 0 -8px; padding-bottom: 6px; }
.voce-menu {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  color: var(--tenue); font-weight: 650; font-size: 0.95rem; white-space: nowrap; text-decoration: none; list-style: none;
}
summary.voce-menu::-webkit-details-marker { display: none; }
summary.voce-menu::after { content: "▾"; font-size: 0.75em; opacity: 0.7; }
.voce-menu:hover, .voce-menu.attiva, details[open] > .voce-menu { color: var(--testo); background: var(--carta-2); }
.famiglia { position: relative; }
.pannello-famiglia {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(500px, 92vw);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 8px;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
}
.voce-categoria { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--testo); }
.voce-categoria:hover, .voce-categoria[aria-current="page"] { background: var(--carta-2); }
.voce-categoria .icona { width: 22px; height: 22px; flex-shrink: 0; color: var(--verde); }
.voce-categoria .nome { display: block; font-weight: 650; font-size: 0.95rem; line-height: 1.2; }
.voce-categoria .stato { display: block; font-size: 0.78rem; color: var(--tenue); }
.voce-categoria.vuota .icona { color: var(--tenue); }
/* Il menu del telefono: un pulsante e un pannello con tutte le famiglie e le pagine informative */
.menu-telefono { display: none; }
.menu-telefono > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; height: 38px;
  border: 1px solid var(--bordo); border-radius: 10px; background: var(--carta-2); color: var(--testo);
}
.menu-telefono > summary::-webkit-details-marker { display: none; }
.pannello-telefono {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: calc(100vh - 70px); overflow-y: auto;
  padding: 8px 16px 20px; background: var(--carta); border-bottom: 1px solid var(--bordo); box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
}
.pannello-telefono h3 { margin: 14px 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tenue); }
.categorie-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.info-menu { display: grid; gap: 2px; }
.info-menu a { padding: 10px; border-radius: 8px; color: var(--testo); text-decoration: none; font-weight: 600; }
.info-menu a:hover { background: var(--carta-2); }
@media (max-width: 760px) {
  .menu, .menu-info { display: none; }
  .menu-telefono { display: block; }
  .testata .contenitore { padding-bottom: 8px; }
}
.titolo-famiglia { margin: 16px 0 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tenue); }
@media (max-width: 720px) {
  .testata .bottone-tg .lungo { display: none; }
}

/* La ricerca nella testata, con i suggerimenti sotto */
.ricerca { position: relative; flex: 1; max-width: 520px; min-width: 0; }
.ricerca input {
  width: 100%; padding: 9px 12px 9px 36px; border: 1px solid var(--bordo); border-radius: 10px;
  background: var(--carta-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center;
  color: var(--testo); font: inherit; font-size: 0.95rem;
}
.ricerca input:focus { outline: 2px solid var(--verde); outline-offset: -1px; background-color: var(--carta); }
.ricerca input::-webkit-search-cancel-button { cursor: pointer; }
.suggerimenti {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: 0 8px 28px rgb(0 0 0 / 0.18); padding: 6px;
}
.voce-ricerca { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--testo); }
.voce-ricerca.con-foto { display: flex; align-items: center; gap: 10px; }
.voce-testo { min-width: 0; }
.voce-ricerca:hover, .voce-ricerca[aria-selected="true"] { background: var(--carta-2); }
.voce-nome { display: block; font-weight: 650; font-size: 0.95rem; line-height: 1.3; }
.voce-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.82rem; color: var(--tenue); margin-top: 2px; }
.voce-info .giudizio { font-size: 0.72rem; padding: 1px 7px; }
.voce-vuota { padding: 10px; color: var(--tenue); font-size: 0.9rem; }
.voce-tutti { display: block; padding: 8px 10px; font-size: 0.88rem; font-weight: 650; border-top: 1px solid var(--bordo); margin-top: 4px; }
.elenco-ricerca { display: grid; gap: 6px; max-width: 760px; }
.elenco-ricerca .voce-ricerca { background: var(--carta); border: 1px solid var(--bordo); padding: 12px 14px; }
/* Sul telefono la ricerca della testata si apre con la lente, così il nome del sito si legge */
.cerca-telefono { display: none; }
.cerca-telefono > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; height: 38px;
  border: 1px solid var(--bordo); border-radius: 10px; background: var(--carta-2); color: var(--testo);
}
.cerca-telefono > summary::-webkit-details-marker { display: none; }
.pannello-cerca {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; padding: 10px 16px 12px;
  background: var(--carta); border-bottom: 1px solid var(--bordo); box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
}
.ricerca-telefono { max-width: none; }
.ricerca-telefono .suggerimenti { left: 0; right: 0; }
@media (max-width: 560px) {
  /* Sul telefono: il nome del sito accanto al logo, il pulsante del canale con la sola icona */
  .testata .bottone-tg .testo-tg, .ricerca-testata { display: none; }
  .cerca-telefono { display: block; margin-left: auto; }
  .marchio { gap: 8px; font-size: 1.1rem; }
  .marchio img { width: 30px; height: 30px; }
  .testata .contenitore { gap: 8px; }
  .testata .bottone-tg { padding: 8px 10px; }
  .ricerca { max-width: none; }
  .ricerca input { font-size: 16px; } /* sotto i 16px iOS ingrandisce la pagina */
}

main { padding: 24px 0 56px; }

/* Apertura della home */
.apertura { padding: 28px 0 12px; }
.apertura h1 { max-width: 760px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; margin: 0 0 12px; letter-spacing: -0.01em; }
.apertura .accento { color: var(--verde); }
.apertura .sotto { font-size: 1.15rem; color: var(--tenue); max-width: 620px; margin: 0; }
.apertura .servizio { margin: 14px 0 0; font-size: 0.85rem; color: var(--tenue); }
/* La ricerca grande in apertura serve solo sul telefono, dove quella in testata è piccola */
.ricerca-apertura { display: none; }
@media (max-width: 560px) {
  .ricerca-apertura { display: block; max-width: none; margin: 16px 0 0; }
  .ricerca-apertura input { padding: 12px 14px 12px 38px; }
  .ricerca-apertura .suggerimenti { left: 0; right: 0; }
  /* L'apertura corta, perché le occasioni arrivino nella prima schermata */
  main { padding-top: 12px; }
  .apertura { padding: 6px 0 0; }
  .apertura h1 { font-size: 1.85rem; margin-bottom: 8px; }
  .apertura .sotto { font-size: 1rem; }
  .ricerca-apertura { margin-top: 12px; }
  .apertura .servizio { margin-top: 8px; font-size: 0.8rem; }
  #occasioni { margin-top: 22px; }
  .solo-computer { display: none; }
}
.azioni { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Schede */
.griglia { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.scheda {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 16px; box-shadow: var(--ombra); text-decoration: none; display: block;
}
a.scheda:hover { border-color: var(--verde); }
.scheda .etichetta { font-size: 0.85rem; font-weight: 700; color: var(--tenue); }
.titolo-gruppo { margin: 1.4rem 0 0.6rem; font-size: 1rem; }
.titolo-gruppo a { text-decoration: none; }
.titolo-gruppo a::after { content: " →"; color: var(--tenue); }
.scheda .valore { font-size: 1.5rem; font-weight: 800; margin: 4px 0 2px; }
.scheda .riga-bassa { display: flex; justify-content: space-between; align-items: end; gap: 8px; margin-top: 8px; }
.scintilla { width: 110px; height: 34px; color: var(--verde); flex-shrink: 0; }

/* Le occasioni della home: una riga che scorre in orizzontale, con le frecce per il mouse */
.carosello { position: relative; }
.scorrevole {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 250px); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 2px; padding: 2px 2px 10px;
  scrollbar-width: thin; overscroll-behavior-x: contain;
}
.scorrevole > * { scroll-snap-align: start; }
.scheda-occasione { display: flex; flex-direction: column; padding: 12px; }
.scheda-occasione .bottone { margin-top: auto; align-self: stretch; }
/* La foto in un riquadro bianco sempre uguale, il prodotto intero al centro */
.foto-scheda { margin-bottom: 10px; }
.foto-scheda .ingrandisci { display: block; }
.foto-occasione, .foto-scheda .senza-foto { width: 100%; height: 130px; padding: 6px; }
.nome-occasione { margin: 0; font-size: 1rem; line-height: 1.3; }
.nome-occasione a { text-decoration: none; }
.nome-occasione a:hover { text-decoration: underline; }
.dettagli-occasione { margin-top: 3px; font-size: 0.82rem; color: var(--tenue); }
.prezzo-occasione { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 8px; }
.prezzo-occasione .valore { margin: 0; }
.prezzo-occasione .unitario { font-size: 0.82rem; color: var(--tenue); }
.nota-occasioni { margin: 4px 0 0; max-width: 720px; }
@media (max-width: 560px) {
  .foto-occasione, .foto-scheda .senza-foto { height: 108px; }
}
.verdetto-occasione { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 8px 0 12px; }
.risparmio { color: var(--verde); font-size: 0.82rem; font-weight: 650; line-height: 1.3; }
.freccia {
  position: absolute; top: 40%; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--bordo); background: var(--carta); color: var(--testo); font-size: 1.6rem; line-height: 1;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.25); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.freccia:disabled { opacity: 0; pointer-events: none; }
.freccia[hidden] { display: none; }
.freccia-indietro { left: -14px; }
.freccia-avanti { right: -14px; }
.senza-frecce .freccia { display: none; }
/* Sul telefono si scorre con il dito: niente frecce, e la scheda dopo si intravede */
@media (hover: none), (max-width: 560px) {
  .freccia { display: none; }
  .scorrevole { grid-auto-columns: 74%; }
}
.scintilla.sale { color: var(--rosso); }

.su { color: var(--rosso); font-weight: 700; }
.giu { color: var(--verde); font-weight: 700; }

/* Le categorie nella home: compatte, icona accanto al nome */
.categorie { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.categoria {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-decoration: none;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  transition: border-color 0.15s;
}
.categoria:hover { border-color: var(--verde); }
.categoria .icona { width: 26px; height: 26px; flex-shrink: 0; color: var(--verde); }
.categoria .nome { display: block; font-weight: 750; font-size: 0.98rem; line-height: 1.2; }
.categoria .stato { display: block; color: var(--tenue); font-size: 0.8rem; }
.in-arrivo { margin: 10px 0 0; }
@media (max-width: 480px) {
  .categorie { grid-template-columns: 1fr 1fr; }
}

/* Riquadri */
.riquadro { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 20px; box-shadow: var(--ombra); }
.riquadro-tg { border-color: color-mix(in srgb, var(--blu-tg) 45%, var(--bordo)); }
.due-colonne { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.passi { counter-reset: passo; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 0; margin: 0; list-style: none; }
.passi li { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 16px; }
.passi li::before {
  counter-increment: passo; content: counter(passo); display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--verde-chiaro); color: var(--verde); font-weight: 800; margin-bottom: 8px;
}

/* Briciole */
/* Indietro, Avanti e Home, in cima alle pagine */
.naviga { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.naviga-tasto {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--bordo); background: var(--carta); color: var(--testo); font: inherit; font-size: 0.88rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.naviga-tasto:hover { border-color: var(--verde); }
.naviga-tasto:disabled { opacity: 0.45; cursor: default; border-color: var(--bordo); }
.naviga-tasto[hidden] { display: none; }
.briciole { font-size: 0.85rem; color: var(--tenue); margin-bottom: 12px; }
.briciole a { color: var(--tenue); }

/* Riepilogo della sezione */
/* I dati in breve in cima a sezioni e prodotti: una striscia, non riquadri */
.dati-rapidi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 10px 0 16px; padding: 8px 14px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); font-size: 0.92rem; }
.dati-rapidi > div { display: flex; align-items: baseline; gap: 6px; }
.dati-rapidi dt { font-size: 0.78rem; font-weight: 700; color: var(--tenue); white-space: nowrap; }
.dati-rapidi dd { margin: 0; font-weight: 650; }
.dati-rapidi .verdetto { flex-direction: row; align-items: baseline; gap: 6px; }
.riepilogo { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 16px 0; }
.riepilogo .scheda .valore { font-size: 1.3rem; }

/* Grafico */
.grafico { width: 100%; height: auto; display: block; color: var(--verde); }
.grafico-box { margin: 0; }
.didascalia-grafico { margin: -4px 0 10px; font-size: 0.85rem; color: var(--tenue); }
.grafico-area { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; }
.asse-valori { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 0.85rem; color: var(--tenue); white-space: nowrap; }
.asse-valori span { line-height: 1; }
.asse-date { grid-column: 2; display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.85rem; color: var(--tenue); }
.valore .piccolo { white-space: nowrap; }
.grafico .griglia-linea { stroke: var(--bordo); stroke-width: 1; }

/* Filtri */
.filtri { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 12px 0; }
.filtri label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--tenue); }
.filtri select { font: inherit; color: var(--testo); background: var(--carta); border: 1px solid var(--bordo); border-radius: 8px; padding: 6px 8px; }
.filtri .conteggio { margin-left: auto; font-size: 0.85rem; color: var(--tenue); }

/* I link alle sezioni di una categoria e alle categorie delle statistiche */
.sezioni-link { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.sezioni-link a { display: inline-block; padding: 6px 12px; border: 1px solid var(--bordo); border-radius: 999px; background: var(--carta); font-size: 0.9rem; text-decoration: none; color: var(--testo); }
.sezioni-link a:hover { border-color: var(--verde); }
.sezioni-link .tenue { font-size: 0.8rem; margin-left: 2px; }
/* Sul telefono i tagli stanno su una riga che scorre, invece di occupare mezza schermata */
@media (max-width: 560px) {
  .sezioni-link { flex-wrap: nowrap; overflow-x: auto; margin: 8px -16px 12px; padding: 0 16px 4px; scrollbar-width: none; }
  .sezioni-link a { flex-shrink: 0; }
}
.intro-pagina { max-width: 720px; }
.nessun-risultato { margin-top: 10px; }
.nessun-risultato p { margin: 0; }
.nessun-risultato .azioni { margin-top: 12px; }
.aiuto-filtri { margin: 0; }

/* Le tabelle delle statistiche: restano tabelle anche sul telefono, con meno colonne */
.statistica { margin-top: 24px; }
.tabella-stat { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.tabella-stat th, .tabella-stat td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella-stat tr:last-child td { border-bottom: 0; }
.tabella-stat th { white-space: nowrap; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tenue); background: var(--carta-2); }
.tabella-stat .destra { text-align: right; }
.tabella-stat .nome { font-weight: 650; }
.tabella-stat .c-andamento { width: 120px; }
.tabella-stat th button { all: unset; cursor: pointer; }
.tabella-stat th button::after { content: " ↕"; opacity: 0.4; }
.tabella-stat th[aria-sort="ascending"] button::after { content: " ↑"; opacity: 1; }
.tabella-stat th[aria-sort="descending"] button::after { content: " ↓"; opacity: 1; }
@media (max-width: 760px) {
  .tabella-stat .c-30, .tabella-stat .c-min, .tabella-stat .c-andamento { display: none; }
  .tabella-stat th, .tabella-stat td { padding: 8px; }
}

/* I prodotti usati */
.etichetta-usato { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--arancio-chiaro); color: var(--arancio); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; }
h1 .etichetta-usato { font-size: 0.9rem; padding: 3px 10px; }
.nota-usato { max-width: 720px; padding: 10px 14px; border-radius: var(--raggio); background: var(--arancio-chiaro); font-size: 0.92rem; }

/* La scheda tecnica di un prodotto: un riquadro per gruppo, le colonne secondo quanti sono */
.schede-tecniche { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
@media (min-width: 761px) {
  .schede-tecniche.gruppi-2, .schede-tecniche.gruppi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schede-tecniche.gruppi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) { .schede-tecniche { grid-template-columns: 1fr; } }
.nota-fonti { margin-top: 10px; }
.scheda-tecnica { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 14px 16px; }
.scheda-tecnica h3 { margin: 0 0 8px; font-size: 0.95rem; }
.scheda-tecnica dl { margin: 0; }
.scheda-tecnica dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--bordo); font-size: 0.92rem; }
.scheda-tecnica dl > div:first-child { border-top: 0; }
.scheda-tecnica dt { color: var(--tenue); }
.scheda-tecnica dd { margin: 0; font-weight: 650; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.dal-titolo { margin-left: 3px; color: var(--tenue); font-weight: 500; cursor: help; }

/* La pagina del prodotto: prezzo e verdetto al centro dell'apertura */
.dati-rapidi-prodotto {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start; gap: 12px 20px; padding: 16px; margin: 16px 0;
}
.dati-rapidi-prodotto > div { display: block; min-width: 0; }
.dati-rapidi-prodotto dt { font-size: 0.85rem; margin-bottom: 4px; }
.dati-rapidi-prodotto dd { white-space: normal; }
.prezzo-principale { display: block; font-size: 2rem; line-height: 1.15; }
.prezzo-dettagli { display: block; font-size: 0.875rem; font-weight: 400; }
.dati-rapidi-prodotto .verdetto { flex-direction: column; align-items: flex-start; }
.dati-rapidi-prodotto .giudizio { font-size: 0.95rem; font-weight: 700; }
.dati-rapidi-prodotto .verdetto .perche { font-size: 0.875rem; line-height: 1.4; font-weight: 400; color: var(--testo); }
.spiegazione-verdetto { display: block; margin-top: 8px; font-size: 0.8rem; font-weight: 400; line-height: 1.4; }
.azioni-prodotto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 8px; }
.azioni-prodotto .bottone { min-height: 48px; }
.nota-prezzi { margin-top: 8px; }
.testa-prodotto > div { min-width: 0; }

/* I venditori di un prodotto: il prezzo pesa più del nome, l'offerta del pulsante si riconosce */
.tabella-venditori .c-prezzo { font-size: 1.1rem; font-weight: 750; }
.tabella-venditori .c-unitario { font-size: 0.875rem; font-weight: 500; }
.tabella-venditori tr.offerta-migliore td { background: var(--carta-2); }
/* "Prezzo più basso": neutra, verde solo quando il verdetto è Compra */
.etichetta-migliore { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--bordo); background: var(--carta); color: var(--tenue); font-size: 0.72rem; font-weight: 700; }
.etichetta-migliore.conviene { border-color: transparent; background: var(--verde-chiaro); color: var(--verde); }

/* Le foto dei prodotti: su fondo bianco anche col tema scuro, come le foto dei negozi */
.con-foto { display: flex; align-items: center; gap: 12px; min-width: 0; }
.foto { flex-shrink: 0; display: block; border-radius: 8px; background: #fff; object-fit: contain; border: 1px solid var(--bordo); }
.senza-foto { width: var(--lato); height: var(--lato); display: inline-flex; align-items: center; justify-content: center; background: var(--carta-2); color: var(--tenue); }
.senza-foto .icona { width: 55%; height: 55%; }
.foto-grande { border-radius: var(--raggio); }
.testa-prodotto { display: flex; align-items: center; gap: 20px; }
.testa-prodotto h1 { margin-top: 0; }
/* Un clic sulla foto la apre grande, in una finestra sopra la pagina */
.ingrandisci { display: inline-block; flex-shrink: 0; border-radius: 8px; cursor: zoom-in; }
.ingrandisci:hover .foto { border-color: var(--verde); }
.finestra-foto { border: 0; padding: 16px; border-radius: var(--raggio); background: var(--carta); color: var(--testo); max-width: min(94vw, 680px); }
.finestra-foto::backdrop { background: rgb(0 0 0 / 0.72); }
.finestra-foto img { display: block; width: min(84vw, 640px); height: auto; max-height: 76vh; object-fit: contain; background: #fff; border-radius: 8px; }
.finestra-foto p { margin: 10px 44px 0 2px; font-weight: 650; line-height: 1.35; }
.chiudi-foto { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--carta-2); color: var(--testo); font-size: 1.5rem; line-height: 1; cursor: pointer; }
@media (max-width: 560px) {
  .testa-prodotto { gap: 14px; }
  .testa-prodotto .foto-grande { width: 84px; height: 84px; }
}

/* Accessibilità: il collegamento per saltare il menu e il bordo di chi naviga con la tastiera */
.salta { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 14px; border-radius: 8px; background: var(--carta); color: var(--testo); font-weight: 700; }
.salta:focus { left: 16px; }
main:focus { outline: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.tabella th button:focus-visible, .tabella-stat th button:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 4px; }

/* Tabella delle offerte */
.tabella { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.tabella th, .tabella td { padding: 12px; text-align: left; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella th { white-space: nowrap; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tenue); background: var(--carta-2); }
.tabella th button { all: unset; cursor: pointer; }
.tabella th button::after { content: " ↕"; opacity: 0.4; }
.tabella th[aria-sort="ascending"] button::after { content: " ↑"; opacity: 1; }
.tabella th[aria-sort="descending"] button::after { content: " ↓"; opacity: 1; }
.tabella .destra { text-align: right; }
.tabella .prodotto { font-weight: 650; }
.tabella .venditore { font-size: 0.8rem; color: var(--tenue); }
/* Il prezzo da pagare in evidenza; il prezzo al GB o al TB, per confrontare, più leggero */
.tabella .valore-unitario { font-weight: 500; color: var(--tenue); }
.tabella td.c-prezzo { font-weight: 800; }
.tabella .bottone { padding: 8px 12px; font-size: 0.85rem; }
@media (max-width: 760px) {
  .tabella, .tabella tbody, .tabella tr, .tabella td { display: block; width: 100%; }
  /* Sul telefono le intestazioni diventano una riga di pulsanti per ordinare. */
  .tabella thead { display: block; margin-bottom: 8px; }
  .tabella thead tr { display: flex; flex-wrap: wrap; gap: 6px 14px; background: none; border: 0; padding: 0; margin: 0; }
  .tabella thead tr::before { content: "Ordina per:"; font-size: 0.85rem; color: var(--tenue); }
  .tabella thead th { padding: 0; border: 0; font-size: 0.85rem; text-transform: none; letter-spacing: 0; background: none; }
  .tabella thead th:not([data-ordina]) { display: none; }
  .tabella { border: 0; background: none; }
  .tabella tr {
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
    margin-bottom: 10px; padding: 12px; display: grid; gap: 6px 12px; align-items: center;
    grid-template-columns: 1fr auto;
    grid-template-areas: "prodotto prodotto" "specifiche specifiche" "unitario prezzo" "giudizio vai";
  }
  .tabella tr[hidden] { display: none; }
  .tabella td { border: 0; padding: 0; }
  .tabella td.c-prodotto { grid-area: prodotto; }
  .tabella td.c-specifiche { grid-area: specifiche; color: var(--tenue); font-size: 0.85rem; }
  .tabella td.c-unitario { grid-area: unitario; text-align: left; }
  .tabella td.c-prezzo { grid-area: prezzo; text-align: right; font-weight: 800; font-size: 1.15rem; }
  .tabella td.c-giudizio { grid-area: giudizio; }
  .tabella td.c-vai { grid-area: vai; text-align: right; }
  .riepilogo { grid-template-columns: 1fr 1fr; }
  .riepilogo .scheda { padding: 12px; }
}

/* Giudizi */
.giudizio { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.g-ottimo { background: var(--verde-chiaro); color: var(--verde); }
.g-media { background: var(--giallo-chiaro); color: #854d0e; }
[data-tema="scuro"] .g-media { color: color-mix(in srgb, var(--giallo) 60%, var(--testo)); }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) .g-media { color: color-mix(in srgb, var(--giallo) 60%, var(--testo)); } }
.g-caro { background: var(--rosso-chiaro); color: var(--rosso); }
.g-sospetto { background: var(--arancio-chiaro); color: var(--arancio); }
.g-errore { background: var(--giallo); color: #1a1a1a; }
.g-nd { background: none; color: var(--tenue); font-weight: 500; }
.verdetto { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.verdetto .perche { font-size: 0.8rem; color: var(--tenue); line-height: 1.3; }
/* Nelle tabelle il verdetto sta al centro della sua colonna, sotto "Conviene?" (sul
   telefono le righe diventano schede e resta a sinistra). */
@media (min-width: 761px) {
  .tabella th.centro, .tabella td.c-giudizio { text-align: center; }
  .tabella .verdetto { align-items: center; text-align: center; }
}
.g-economico { background: color-mix(in srgb, var(--blu-tg) 16%, transparent); color: color-mix(in srgb, var(--blu-tg) 75%, var(--testo)); }
.g-nd { background: var(--carta-2); color: var(--tenue); font-weight: 700; }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.85rem; color: var(--tenue); margin: 12px 0; }

/* Testi lunghi: guide e pagine informative */
.testo { max-width: 720px; }
.testo h2 { margin-top: 2rem; }
.testo ul, .testo ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.testo li { margin-bottom: 0.4rem; }
.testo table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; font-size: 0.95rem; }
.testo th, .testo td { border: 1px solid var(--bordo); padding: 8px 10px; text-align: left; vertical-align: top; }
.testo th { background: var(--carta-2); }
.nota { background: var(--carta-2); border-left: 4px solid var(--verde); padding: 12px 16px; border-radius: 8px; margin: 0 0 1rem; }

/* Elenco delle guide */
.guide { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.guide .scheda h3 { margin-bottom: 6px; }

/* Piede */
.piede { border-top: 1px solid var(--bordo); background: var(--carta); padding: 28px 0; font-size: 0.9rem; color: var(--tenue); }
.piede .colonne { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.piede h3 { color: var(--testo); font-size: 0.95rem; }
.piede ul { list-style: none; padding: 0; margin: 0; }
.piede li { margin-bottom: 4px; }
.piede a { color: var(--tenue); }
/* Sul telefono il piede è più corto: le categorie in una riga che va a capo, informazioni e
   Telegram affiancati */
@media (max-width: 560px) {
  .piede { padding: 20px 0; }
  .piede .colonne { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .piede .colonne > div:first-child, .piede .prezzi-piede { grid-column: 1 / -1; }
  .prezzi-piede ul { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .prezzi-piede li { margin: 0; }
}
.vuoto { padding: 24px; text-align: center; color: var(--tenue); }

/* Ricerca con i filtri incrociati */
.cerca { display: grid; gap: 16px; grid-template-columns: 250px 1fr; align-items: start; }
.pannello-filtri { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px 14px; position: sticky; top: 110px; max-height: calc(100vh - 130px); overflow: auto; }
.pannello-filtri summary { font-weight: 800; cursor: pointer; }
.filtri-incrociati { display: grid; gap: 12px; margin-top: 10px; }
.faccia { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.faccia legend { font-size: 0.8rem; font-weight: 700; color: var(--tenue); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.faccia label { display: flex; align-items: center; gap: 6px; font-size: 0.92rem; cursor: pointer; }
.faccia label.spento { opacity: 0.4; }
.fascia-prezzo { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.voce-fascia { display: inline-block; width: 1.3em; }
.faccia input[type="number"] { width: 76px; font: inherit; color: var(--testo); background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 8px; padding: 4px 8px; }
.faccia input[type="checkbox"] { accent-color: var(--verde); width: 16px; height: 16px; }
.risultati { min-width: 0; }
.risultati .tabella .c-specifiche { font-size: 0.85rem; color: var(--tenue); }
.risultati .prodotto a { text-decoration: none; }
.risultati .prodotto a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .cerca { grid-template-columns: 1fr; }
  .pannello-filtri { position: static; max-height: none; }
}

/* Pagina del prodotto sul telefono */
@media (max-width: 760px) {
  .dati-rapidi-prodotto { grid-template-columns: 1fr; }
  .dati-rapidi-prodotto > div:last-child { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
  .dati-rapidi-prodotto > div:last-child dd { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
  /* I venditori: negozio e prezzo sulla prima riga, prezzo unitario e pulsante sulla seconda */
  .tabella-venditori tbody tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "prodotto prezzo" "unitario vai" "giudizio giudizio";
    gap: 8px 12px;
  }
  .tabella-venditori tbody tr[data-sospetto="no"] { grid-template-areas: "prodotto prezzo" "unitario vai"; }
  .tabella-venditori .c-giudizio:empty { display: none; }
  .tabella-venditori .c-prodotto { min-width: 0; overflow-wrap: anywhere; }
  .tabella-venditori .bottone { min-height: 44px; }
  .tabella thead th button { padding: 6px 10px; border: 1px solid var(--bordo); border-radius: 999px; background: var(--carta); }
  .tabella thead th[aria-sort] button { border-color: var(--verde); }
  /* L'offerta migliore: tutta la scheda colorata, non le singole celle */
  .tabella-venditori tr.offerta-migliore { background: var(--carta-2); }
  .tabella-venditori tr.offerta-migliore.conviene { border-color: color-mix(in srgb, var(--verde) 45%, var(--bordo)); }
  .tabella-venditori tr.offerta-migliore td { background: none; }
}
@media (max-width: 560px) {
  /* I tasti Indietro, Avanti e Home restano sul computer; sul telefono il percorso in alto
     basta, senza ripetere il nome del prodotto */
  .naviga { display: none; }
  .briciola-corrente { display: none; }
  .azioni-prodotto .bottone:first-child { width: 100%; white-space: normal; }
  /* "Usato" sopra il nome, in una posizione che non cambia con la lunghezza del nome */
  .testa-prodotto h1 { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
  .testa-prodotto h1 .etichetta-usato { margin-left: 0; }
}
.conteggio-risultati { margin: 0 0 8px; }
/* Sul computer il pulsante del negozio va su due righe, per lasciare spazio al nome del prodotto */
@media (min-width: 761px) {
  .tabella td.c-prodotto { min-width: 200px; }
  .tabella .c-vai .bottone { white-space: normal; text-align: center; line-height: 1.2; max-width: 116px; }
}
/* I nomi dei prodotti nelle tabelle: niente sottolineatura, che su più righe pesa */
.tabella .prodotto a { text-decoration: none; }
.tabella .prodotto a:hover { text-decoration: underline; }
/* Sotto il prezzo di ogni offerta: se la spedizione è compresa, gratuita o da verificare */
.nota-spedizione { font-size: 0.75rem; font-weight: 500; color: var(--tenue); white-space: nowrap; }

/* L'albero delle sezioni di una categoria: le macro-categorie come pulsanti, ognuna con il suo
   pannello a tendina (uno aperto alla volta, sito.js) */
.albero-sezioni { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
/* Il pulsante di primo livello, diviso in due: il nome sceglie (resta acceso finché non lo si
   riclicca), la freccina apre la tendina senza cambiare niente */
.ramo { display: inline-flex; align-items: stretch; border: 1px solid var(--bordo); border-radius: 999px; background: var(--carta); }
.nome-ramo { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 10px 6px 14px; border-radius: 999px 0 0 999px; color: var(--testo); font-size: 0.92rem; font-weight: 650; text-decoration: none; }
.apri-ramo > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 40px; height: 100%;
  border-left: 1px solid var(--bordo); border-radius: 0 999px 999px 0; color: var(--tenue); font-size: 0.85rem;
}
.apri-ramo > summary::-webkit-details-marker { display: none; }
.apri-ramo[open] > summary { background: var(--carta-2); color: var(--testo); }
/* Solo con il mouse: sul telefono dopo un tocco l'effetto resterebbe, come se fosse ancora scelto */
@media (hover: hover) {
  .nome-ramo:hover, .apri-ramo > summary:hover { background: var(--carta-2); }
}
.ramo.scelto, .ramo.parziale, .ramo.attuale { border-color: var(--verde); }
.ramo.scelto .nome-ramo, .ramo.attuale .nome-ramo { background: var(--carta-2); }
.ramo.scelto .nome-ramo::before { content: "✓"; color: var(--verde); font-weight: 800; }
.ramo.parziale .nome-ramo::before { content: "–"; color: var(--verde); font-weight: 800; }
.albero-sezioni .conta { color: var(--tenue); font-size: 0.8rem; font-weight: 500; }
.pannello-ramo {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 25; width: min(680px, 100%);
  display: grid; gap: 12px 20px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 14px;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
}
.titolo-gruppo-ramo { margin: 0 0 4px; font-weight: 750; font-size: 0.92rem; }
.titolo-gruppo-ramo > a { font-weight: 750; }
/* "Tutti i prodotti AMD": la scelta del primo livello, su tutta la larghezza del pannello */
.pannello-ramo a.tutti-ramo { grid-column: 1 / -1; font-weight: 750; border-bottom: 1px solid var(--bordo); border-radius: 6px 6px 0 0; padding-bottom: 8px; }
.gruppo-ramo ul, .foglie-ramo { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* Le varianti sotto il loro gruppo, un po' rientrate */
.gruppo-ramo ul { margin-left: 6px; padding-left: 8px; border-left: 2px solid var(--bordo); }
.pannello-ramo a { display: block; padding: 4px 6px; border-radius: 6px; text-decoration: none; color: var(--testo); font-size: 0.9rem; }
.pannello-ramo a:hover, .pannello-ramo a[aria-current] { background: var(--carta-2); }
.pannello-ramo a[aria-current] { font-weight: 750; }
/* Le voci scelte (tutta la catena: "Tutti i prodotti AMD", "Ryzen 7", il modello) con la
   spunta, come le caselle dei filtri: ricliccandole si tolgono */
.pannello-ramo a[aria-current]::before, .sezioni-link a[aria-current]::before { content: "✓ "; color: var(--verde); font-weight: 800; }
/* Scelta in parte: alcuni prodotti della voce sono scelti (per esempio un solo modello Intel) */
.pannello-ramo a.parziale::before, .sezioni-link a.parziale::before { content: "– "; color: var(--verde); font-weight: 800; }
.pannello-ramo a.parziale { background: var(--carta-2); }
/* La ricerca delle marche nella barra dei filtri */
.cerca-marca { width: 100%; margin: 0 0 6px; padding: 5px 8px; font: inherit; font-size: 0.9rem; color: var(--testo); background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 8px; }
.faccia label[hidden] { display: none; }
.sezioni-link a[aria-current] { border-color: var(--verde); font-weight: 700; }

/* Il logo del negozio accanto al suo nome: piccolo, su fondo bianco come le foto */
.icona-negozio { display: inline-block; width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; border-radius: 3px; background: #fff; }
.bottone .icona-negozio { margin-right: 0; vertical-align: 0; flex-shrink: 0; }

/* Sotto il grafico della scheda prodotto, il passaggio alle statistiche complete */
.statistiche-complete { margin: 12px 0 0; }
/* Sul computer la tabella dei prodotti parte alla stessa altezza dei filtri: il numero dei
   prodotti sta sopra, a destra, sulla riga di "Filtra per prezzo e caratteristiche" */
@media (min-width: 901px) {
  .risultati { position: relative; }
  .conteggio-risultati { position: absolute; right: 0; bottom: 100%; margin: 0 0 8px; }
}
/* Nelle liste dei prodotti la nota della spedizione può andare a capo: su una riga sola
   allargava la colonna del prezzo e la tabella usciva dalla pagina */
.risultati .nota-spedizione, .tabella:not(.tabella-venditori) .nota-spedizione { white-space: normal; }
/* Accanto ai filtri la tabella ha meno spazio: celle un po' più strette, così sta nella colonna */
@media (min-width: 901px) {
  .risultati .tabella th, .risultati .tabella td { padding: 12px 9px; }
  .risultati .tabella td.c-prodotto { min-width: 175px; }
}

/* I salti dentro la pagina (Occasioni, Vedi le offerte, Caratteristiche, le statistiche di un
   modello) si fermano subito sotto la testata fissa, che altrimenti coprirebbe il titolo. La sua
   altezza, diversa su computer e telefono, la misura sito.js. */
html { scroll-padding-top: calc(var(--testata, 126px) + 12px); }
@media (max-width: 760px) { html { scroll-padding-top: calc(var(--testata, 62px) + 12px); } }

/* I grafici del prezzo nel tempo: linea, punto e riquadro con data e prezzo (sito.js) */
.grafico-area { position: relative; }
.grafico { cursor: crosshair; touch-action: pan-y; }
.grafico:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 4px; }
.cursore-grafico { stroke: var(--tenue); stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
.punto-grafico { fill: currentColor; stroke: var(--carta); stroke-width: 2.5; pointer-events: none; }
.fumetto-grafico {
  position: absolute; z-index: 3; pointer-events: none; display: grid; justify-items: center; padding: 5px 10px;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 8px; box-shadow: 0 8px 22px rgb(0 0 0 / 0.3);
  font-size: 0.9rem; white-space: nowrap;
}
.fumetto-grafico span { font-size: 0.78rem; color: var(--tenue); }
.grafico:focus:not(:focus-visible) { outline: none; }

/* Il menu dei prodotti più vivo: un'icona per voce e il testo più deciso. "Occasioni" ha
   l'icona verde: porta a ciò che conviene comprare, e il verde nel sito vuol dire questo. */
.menu .voce-menu { color: color-mix(in srgb, var(--testo) 82%, var(--tenue)); }
.menu .voce-menu .icona { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }
.menu .voce-occasioni .icona { color: var(--verde); opacity: 1; }

/* Il pulsante del tema: un cerchio mezzo pieno, discreto come le voci accanto */
.cambia-tema {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--tenue); cursor: pointer;
}
.cambia-tema .icona { width: 19px; height: 19px; }
@media (hover: hover) { .cambia-tema:hover { color: var(--testo); background: var(--carta-2); } }
@media (max-width: 760px) { .cambia-tema { display: none; } }
/* Nel menu del telefono, una riga come le altre voci */
.voce-tema {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 8px;
  background: none; color: var(--testo); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.voce-tema .icona { width: 18px; height: 18px; color: var(--tenue); }
.voce-tema:hover { background: var(--carta-2); }