/* ==========================================================================
   Errori di Prezzo — foglio di stile del sito pubblico
   ==========================================================================
   ⚠️ MOBILE-FIRST, E NON «RESPONSIVE DOPO». Le regole base valgono per il
   telefono; le media query AGGIUNGONO spazio sugli schermi larghi. Il
   contrario — scrivere per il desktop e poi comprimere — e' come nascono i
   siti che sul telefono hanno lo scorrimento orizzontale.

   La lista dei difetti concreti che questo foglio cerca di non commettere
   viene dalla revisione di Codex del 2026-09-14:
     * intestazione appiccicosa troppo alta -> qui non e' `sticky`
     * logo, titolo, sottotitolo e pillole sulla stessa riga -> vanno a capo
     * prezzo vecchio e prezzo corrente confondibili -> peso e colore diversi
     * card interamente cliccabile con link annidati -> un solo link per card
     * immagini senza dimensioni riservate -> `aspect-ratio` fisso
     * `100vh` -> mai usato
     * avvisi importanti a 12 px -> il minimo e' 0,875rem
     * la CTA piu' prominente dello stato «scaduto» -> lo stato viene PRIMA
     * bersagli da 44 px solo all'apparenza -> `min-height` sul link, non
       padding sul testo
   ========================================================================== */

:root {
  /* la palette, letta dal logo */
  --azzurro: #29ABE2;
  --azzurro-scuro: #1B7FB8;
  --rosso: #E8262A;
  --giallo: #FFD422;
  --nero: #231F20;

  --inchiostro: #1a1d21;
  --tenue: #5b6470;
  --bordo: #dfe3ea;
  --fondo: #f4f6f8;
  --carta: #ffffff;
  --giu: #12805a;          /* sotto il riferimento: verde, non rosso */
  --su: #b23b2f;

  --raggio: 12px;
  --ombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* ⚠️ `overflow-x: hidden` NON c'e': nasconderebbe lo scorrimento
     orizzontale invece di evitarlo, e con esso il difetto che lo causa. */
}

img { max-width: 100%; height: auto; }

a { color: var(--azzurro-scuro); }

.salta {
  position: absolute; left: -9999px;
  background: var(--carta); padding: 10px 14px; z-index: 10;
}
.salta:focus { left: 8px; top: 8px; }

/* ⚠️ il focus si VEDE: chi naviga da tastiera deve sapere dov'e'. */
:focus-visible { outline: 3px solid var(--azzurro); outline-offset: 2px; }

.contenitore { max-width: 1120px; margin: 0 auto; padding: 0 14px; }

/* ==========================================================================
   L'INTESTAZIONE
   ==========================================================================
   ⚠️ NON PIATTA, SU RICHIESTA DELL'UTENTE: «Non voglio un sito "piatto" usa
   ombre, javascript e qualsiasi cosa sia utile per rendere il sito bello e
   professionale».

   La profondita' viene da quattro cose messe insieme, non da un'ombra
   buttata li':
     1. un gradiente diagonale con un alone piu' chiaro in alto a sinistra,
        cosi' la fascia non e' una campitura unica;
     2. una barra d'accento di 3 px nei colori del logo — rosso, giallo,
        azzurro — che chiude la fascia e lega l'intestazione al marchio;
     3. un'ombra proiettata sul contenuto, che mette l'intestazione su un
        piano davanti;
     4. il rilievo del marchio e delle pillole, con un bordo chiaro in alto e
        uno scuro in basso. ⚠️ La luce viene sempre dalla stessa parte:
        e' quello che fa sembrare un elemento un oggetto invece di un
        rettangolo colorato.

   ⚠️ E SI CONDENSA ALLO SCORRIMENTO (`interfaccia.js`). Non e' decorazione:
   con le card alte 300 px un'intestazione fissa a piena altezza mangerebbe
   un quinto della finestra a ogni schermata.
   ========================================================================== */
.testa {
  position: sticky; top: 0; z-index: 50;
  color: #fff;
  background:
    radial-gradient(120% 140% at 8% -20%,
                    rgba(255, 255, 255, .22) 0%,
                    rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #2496d2 0%, var(--azzurro-scuro) 46%, #14648f 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset,
              0 6px 18px -6px rgba(11, 47, 71, .55);
  transition: box-shadow .22s ease, background-color .22s ease;
}
.testa a { color: #fff; }

/* la barra d'accento: i colori del logo, in fondo alla fascia */
.testa::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--rosso) 0%, var(--giallo) 38%,
                              var(--azzurro) 72%, var(--azzurro-scuro) 100%);
}

.testa-riga {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; transition: padding .22s ease;
}

/* ------------------------------------------------------------- marchio -- */
.marchio {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: #fff; min-width: 0;
}
.marchio-segno {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .55),
              0 3px 8px -1px rgba(8, 38, 58, .55);
  transition: width .22s ease, height .22s ease;
}
/* ⚠️ IL NOME E' TESTO HTML, non solo dentro l'SVG: serve al lettore di
   schermo e a Google, che non deve ricavare il marchio da un disegno.
   Rilievo di Codex. */
.marchio-nome { min-width: 0; }
.marchio-nome b {
  display: block; font-size: 1.16rem; font-weight: 800; letter-spacing: -.2px;
  line-height: 1.15; text-shadow: 0 1px 2px rgba(8, 38, 58, .45);
}
.marchio-nome small {
  display: block; font-size: .74rem; letter-spacing: .5px;
  text-transform: uppercase; font-weight: 600;
  color: var(--giallo); opacity: .95;
  transition: opacity .18s ease, max-height .22s ease;
}

/* ⚠️ LA SPUNTA VERDE, SENZA SFONDO. L'emoji `✅` porta il proprio disegno —
   un quadrato verde pieno — e nessun CSS lo puo' togliere, perche' i colori
   stanno dentro il carattere. Nel markup c'e' `✔` col selettore di
   presentazione testuale (U+FE0E): e' un segno tipografico, quindi prende il
   `color` da qui.
   ⚠️ `font-variant-emoji: text` e' la richiesta esplicita per i browser che
   la capiscono; il selettore nel markup copre gli altri. Due strati, perche'
   qui la differenza fra un segno e un'emoji e' proprio quello che l'utente
   ha chiesto di cambiare.
   Il verde e' piu' chiaro del verde dei prezzi: deve leggersi su una fascia
   azzurra scura, non su carta bianca. */
.spunta {
  color: #3ddc84;
  font-variant-emoji: text;
  font-size: 1.05em; line-height: 1;
  margin-left: 2px;
  /* ⚠️ il maiuscolo dell'etichetta non lo tocca — un glifo non ha maiuscole
     — ma la spaziatura fra lettere sì, e su un simbolo solo diventa uno
     spazio a destra che lo scolla dalla parola. */
  letter-spacing: 0;
}

/* ==========================================================================
   LE TAB DEI FILTRI, DENTRO LA FASCIA AZZURRA
   ==========================================================================
   Richiesta dell'utente, 2026-09-14: «vorrei mettere la ricerca e tutti i
   filtri nella tab in azzurro, ricerca compresa. Devono essere tab
   selezionabili e deselezionabili».

   ⚠️ LO STATO ATTIVO DEVE ESSERE INCONFONDIBILE. Un filtro acceso che somiglia
   a uno spento produce la peggiore delle pagine: un elenco corto che sembra
   il catalogo intero. Qui l'attiva diventa GIALLA su testo nero — lo stesso
   giallo del logo, gia' usato per la voce corrente — cioe' l'unico elemento
   chiaro su una fascia scura.

   ⚠️ E DEVE ESSERE SPEGNIBILE DA DOVE SI VEDE CHE E' ACCESA. La × sta dentro
   la tab, non in una barra «azzera tutto» da qualche altra parte: chi vuole
   togliere la categoria la cerca sulla categoria.
   ========================================================================== */
/* ⚠️ GLI ANGOLI: 10 PIXEL, NON LA PASTIGLIA. Richiesta dell'utente,
   2026-09-14: «i pulsanti su desktop li voglio meno smussati negli angoli,
   non cosi' come sono che sembrano molto ovali». `border-radius: 999px`
   arrotonda fino a meta' dell'altezza, cioe' rende ovale qualunque cosa alta
   40 px; 10 px si legge come un pulsante rettangolare con l'angolo morbido.
   Sta in una variabile perche' il raggio va cambiato in cinque posti insieme
   — la tab, il suo sfondo, la ×, l'interruttore, il pannello — e cambiarne
   quattro su cinque si vede. */
:root { --raggio-tab: 10px; }

.tabbe {
  display: flex; gap: 8px; margin-left: auto; align-items: center;
  min-width: 0;
}

/* il gruppo = la tab piu' la sua ×. ⚠️ Sono due elementi cliccabili distinti
   attaccati: un solo elemento non potrebbe sia aprire il pannello sia
   cancellare il filtro. Il bordo li fa leggere come un pezzo unico. */
.tab-gruppo {
  display: flex; align-items: center; min-width: 0;
  border-radius: var(--raggio-tab);
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset,
              0 1px 3px rgba(8, 38, 58, .28);
  transition: background-color .16s ease, box-shadow .16s ease;
}
.tab-gruppo:hover { background: rgba(255, 255, 255, .24); }

/* la tab: il `<summary>` di un `<details>`, oppure un link (il coupon) */
.tab { position: relative; min-width: 0; }
.tab > summary,
.tab-interruttore {
  list-style: none; cursor: pointer;
  min-height: 40px; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 15px; border-radius: var(--raggio-tab); text-decoration: none;
  font-size: .93rem; font-weight: 600; white-space: nowrap;
  color: #fff; min-width: 0;
}
/* ⚠️ il triangolino nativo del `<details>` si toglie in DUE modi, perche' i
   browser non concordano: `::-webkit-details-marker` per i motori WebKit e
   `list-style: none` per Firefox. Con uno solo resta la freccia su metà dei
   browser. */
.tab > summary::-webkit-details-marker { display: none; }

/* l'interruttore (il coupon) ha lo sfondo suo: non sta in un `.tab-gruppo`
   perche' non ha pannello ne' × — si spegne cliccandolo di nuovo */
.tab-interruttore {
  background: rgba(255, 255, 255, .14);
  border-radius: var(--raggio-tab);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset,
              0 1px 3px rgba(8, 38, 58, .28);
  transition: transform .16s ease, background-color .16s ease,
              box-shadow .16s ease;
}
.tab-interruttore:hover {
  background: rgba(255, 255, 255, .24); transform: translateY(-1px);
}
.tab-interruttore:active { transform: translateY(0); }

.tab-icona { flex: 0 0 auto; font-size: 1.02rem; line-height: 1; }
/* ⚠️ il testo si tronca, non allarga la tab: «Salute e cura della persona»
   e' un nome vero e spingerebbe le altre tab fuori dalla fascia. */
.tab-testo {
  min-width: 0; max-width: 13ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------- lo stato ATTIVO ------ */
.tab-gruppo.tab-attiva {
  background: linear-gradient(180deg, #ffe066 0%, var(--giallo) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
              0 3px 9px -2px rgba(120, 82, 0, .55);
}
/* ⚠️ `.testa a { color: #fff }` VINCE SU UNA CLASSE SOLA, e qui va battuto:
   `.testa a` ha specificita' (0,1,1) — una classe piu' un tipo — mentre
   `.tab-accesa` ne ha (0,1,0). Per questo il testo va imposto con DUE classi
   (`.testa .tab-accesa`), non con una. E' la stessa trappola che ha reso
   invisibili le voci delle categorie: pannello bianco e testo bianco. */
.testa .tab-gruppo.tab-attiva > .tab > summary { color: var(--nero); }
.tab-accesa, .testa .tab-accesa {
  background: linear-gradient(180deg, #ffe066 0%, var(--giallo) 100%);
  color: var(--nero);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
              0 3px 9px -2px rgba(120, 82, 0, .55);
}
.tab-accesa:hover {
  background: linear-gradient(180deg, #ffe97f 0%, #ffd633 100%);
}

/* la × che spegne il filtro */
/* ⚠️ `.testa .tab-x` e non `.tab-x`: vedi sopra, `.testa a` vince su una
   classe sola e la × uscirebbe bianca sul giallo. */
.tab-x, .testa .tab-x {
  flex: 0 0 auto; text-decoration: none;
  /* ⚠️ 34 px e non 18: e' un bersaglio da toccare col pollice, e una × da
     18 px accanto a un'altra cosa cliccabile si sbaglia. */
  width: 34px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.24rem; line-height: 1; font-weight: 700;
  color: var(--nero); opacity: .55;
  border-radius: 0 var(--raggio-tab) var(--raggio-tab) 0;
}
.tab-x:hover { opacity: 1; background: rgba(0, 0, 0, .1); }

/* ------------------------------------------------- il pannello --------- */
.tab-pannello {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 60;
  min-width: 270px; padding: 8px;
  border-radius: 12px;
  background: var(--carta); color: var(--nero);
  border: 1px solid var(--bordo);
  box-shadow: 0 18px 40px -12px rgba(11, 47, 71, .5),
              0 2px 6px rgba(11, 47, 71, .16);
}

/* ==========================================================================
   ⚠️ IL TESTO DENTRO IL PANNELLO VA IMPOSTO, ALTRIMENTI E' BIANCO SU BIANCO
   ==========================================================================
   Difetto visto dall'utente il 2026-09-14: «da desktop la tendina categorie
   e' con sfondo bianco e scritta bianca».

   LA CAUSA, ed e' di specificita', non di colore. In cima al foglio c'e'
   `.testa a { color: #fff }`, che serve a tutti i link della fascia azzurra.
   Il pannello delle categorie e' DENTRO la fascia, e le sue voci sono `<a>`:

       `.testa a`        -> una classe + un tipo  = specificita' (0,1,1)
       `.tendina-voce`   -> una classe            = specificita' (0,1,0)

   quindi `.testa a` vince, e i nomi delle categorie uscivano bianchi su un
   pannello bianco — invisibili, e la tendina sembrava vuota o rotta.

   ⚠️ NON SI RISOLVE CON `!important`: quello spegne la discussione invece di
   risolverla, e il prossimo colore che serve dentro il pannello avra' lo
   stesso problema. Si risolve dando alle regole del pannello una
   specificita' piu' alta di `.testa a`, cioe' DUE classi.
   ========================================================================== */
.testa .tab-pannello,
.testa .tab-pannello a { color: var(--inchiostro); }
.testa .tab-pannello .tendina-attiva { color: var(--nero); }
/* ⚠️ le categorie sono 23: su una colonna sola il pannello sarebbe piu' alto
   dello schermo. Tre colonne su desktop, una sola sul telefono (vedi sotto),
   dove la larghezza non basta. */
@media (min-width: 760px) {
  .tab-pannello-largo { columns: 2; min-width: 440px; }
}
@media (min-width: 1100px) {
  .tab-pannello-largo { columns: 3; min-width: 640px; }
}

/* il campo di ricerca dentro il pannello */
.tab-cerca { display: flex; gap: 8px; align-items: center; }
.tab-cerca input[type="search"] {
  flex: 1 1 auto; min-width: 0; min-height: 42px;
  padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--bordo); background: #fff;
  font: inherit; font-size: .95rem; color: var(--nero);
}
.tab-cerca input[type="search"]:focus-visible {
  outline: 2px solid var(--azzurro); outline-offset: 1px;
}
.tab-cerca button {
  flex: 0 0 auto; min-height: 42px; padding: 0 16px; border: 0;
  border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #2d9fda 0%, var(--azzurro-scuro) 100%);
  color: #fff; font: inherit; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset,
              0 3px 8px -2px rgba(11, 47, 71, .5);
}

/* il contatore sul bottone del menu': su schermo piccolo le tab sono chiuse,
   e senza un segnale non si saprebbe che ci sono filtri accesi dentro */
.menu-conta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; margin-left: 5px; padding: 0 5px;
  border-radius: 999px;
  background: var(--giallo); color: var(--nero);
  font-size: .74rem; font-weight: 800;
}

/* --------------------------------------------------------------- menu -- */
.menu { display: flex; gap: 7px; margin-left: auto; align-items: center; }
.menu a {
  min-height: 40px; display: inline-flex; align-items: center;
  padding: 0 15px; border-radius: 999px; text-decoration: none;
  font-size: .93rem; font-weight: 600; white-space: nowrap;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset,
              0 1px 3px rgba(8, 38, 58, .28);
  transition: transform .16s ease, background-color .16s ease,
              box-shadow .16s ease;
}
.menu a:hover {
  background: rgba(255, 255, 255, .24); transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset,
              0 4px 10px -2px rgba(8, 38, 58, .45);
}
.menu a:active { transform: translateY(0); }
.menu a[aria-current="page"] {
  background: linear-gradient(180deg, #ffe066 0%, var(--giallo) 100%);
  color: var(--nero);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
              0 3px 9px -2px rgba(120, 82, 0, .55);
}

/* il bottone del menu': c'e' solo sotto i 760 px */
.menu-bottone {
  display: none; margin-left: auto;
  min-height: 42px; min-width: 42px;
  align-items: center; justify-content: center; gap: 9px;
  padding: 0 13px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset,
              0 1px 3px rgba(8, 38, 58, .28);
  color: #fff; font: inherit; font-weight: 700; font-size: .9rem;
  cursor: pointer;
}
.menu-bottone .barre {
  display: block; width: 17px; height: 2px; background: #fff;
  border-radius: 2px; position: relative;
}
.menu-bottone .barre::before,
.menu-bottone .barre::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 2px;
  background: #fff; border-radius: 2px;
}
.menu-bottone .barre::before { top: -5px; }
.menu-bottone .barre::after { top: 5px; }

/* ===================== CONDENSATA (la mette il JS) ===================== */
/* ⚠️ la classe la aggiunge `interfaccia.js` dopo 40 px di scorrimento. Senza
   JavaScript l'intestazione resta a piena altezza e funziona: la condensa e'
   un miglioramento, non un requisito. */
.testa.compatta {
  background-color: #14648f;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset,
              0 10px 26px -8px rgba(11, 47, 71, .7);
}
.testa.compatta .testa-riga { padding: 7px 0; }
.testa.compatta .marchio-segno { width: 36px; height: 36px; }
.testa.compatta .marchio-nome small { opacity: 0; max-height: 0; }

/* ======================= SOTTO I 760 PIXEL ======================= */
@media (max-width: 759px) {
  .menu-bottone { display: inline-flex; }
  /* ⚠️ IL MENU' NON SCORRE E NON VA A CAPO: SI APRE.
     La prima stesura lo teneva su una riga con `overflow-x: auto`, e le
     ultime due voci finivano fuori dallo schermo — uno scorrimento
     orizzontale senza segnale visivo e' indistinguibile da un menu'
     troncato. La seconda le mandava a capo su due righe, e si mangiava mezzo
     schermo prima del primo prodotto. */
  .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; flex-direction: column; gap: 0; align-items: stretch;
    background: #14648f;
    box-shadow: 0 14px 28px -10px rgba(11, 47, 71, .75);
    border-top: 1px solid rgba(255, 255, 255, .16);
    max-height: 0; overflow: hidden; transition: max-height .24s ease;
  }
  .menu[data-aperto="si"] { max-height: 320px; }
  .menu a {
    min-height: 52px; border-radius: 0; background: none; box-shadow: none;
    padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 1rem;
  }
  .menu a:hover { transform: none; background: rgba(255, 255, 255, .1); }
  .menu a[aria-current="page"] {
    background: rgba(255, 212, 34, .18); color: var(--giallo);
    box-shadow: inset 4px 0 0 var(--giallo);
  }
  .marchio-nome b { font-size: 1.05rem; }

  /* ================= LE TAB DEI FILTRI SUL TELEFONO =================
     ⚠️ TRE TAB NON STANNO IN RIGA ACCANTO AL LOGO. A 390 px il marchio si
     mangia meta' della fascia, e le tab finirebbero fuori dallo schermo —
     uno scorrimento orizzontale senza segnale visivo e' indistinguibile da
     un menu' troncato. Si aprono dal bottone, in colonna, come faceva il
     menu' delle sezioni. */
  .tabbe {
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; flex-direction: column; gap: 0; align-items: stretch;
    background: #14648f;
    box-shadow: 0 14px 28px -10px rgba(11, 47, 71, .75);
    border-top: 1px solid rgba(255, 255, 255, .16);
    max-height: 0; overflow: hidden; transition: max-height .24s ease;
  }
  /* ⚠️ `overflow: hidden` mentre e' chiuso, `visible` quando e' aperto:
     senza il secondo, il pannello della categoria verrebbe TAGLIATO dal
     contenitore che lo contiene, e la tendina si aprirebbe dentro una
     finestrella alta come la tab. */
  .tabbe[data-aperto="si"] { max-height: 80vh; overflow: visible; }

  .tab-gruppo, .tab-interruttore {
    border-radius: 0; background: none; box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .tab-gruppo:hover, .tab-interruttore:hover {
    background: rgba(255, 255, 255, .1); transform: none;
  }
  .tab > summary, .tab-interruttore {
    min-height: 52px; padding: 0 16px; font-size: 1rem;
  }
  .tab { flex: 1 1 auto; }
  /* ⚠️ sul telefono il testo NON si tronca a 13 caratteri: c'e' tutta la
     larghezza della colonna, e troncare «Salute e cura della persona» dove
     non serve nasconde l'unica informazione della riga. */
  .tab-testo { max-width: none; }

  /* l'attiva: barra gialla a sinistra invece della pastiglia, come faceva la
     voce corrente del menu' — su una riga larga la pastiglia non c'e' piu' */
  .tab-gruppo.tab-attiva {
    background: rgba(255, 212, 34, .18);
    box-shadow: inset 4px 0 0 var(--giallo);
  }
  .tab-gruppo.tab-attiva > .tab > summary { color: var(--giallo); }
  .tab-accesa {
    background: rgba(255, 212, 34, .18); color: var(--giallo);
    box-shadow: inset 4px 0 0 var(--giallo);
  }
  .tab-x { color: var(--giallo); width: 52px; min-height: 52px; }

  /* il pannello occupa la riga, non galleggia a destra */
  .tab-pannello {
    position: static; right: auto; top: auto;
    min-width: 0; margin: 0 10px 10px; border-radius: 12px;
  }
  /* ⚠️ NIENTE `columns` QUI. Difetto visto dall'utente il 2026-09-21: «il menu
     categorie ha uno scroll laterale verso destra». Un contenitore multicolonna
     (anche `columns: 1`) con un'altezza massima NON va a capo: quello che non
     entra in altezza lo mette in colonne NUOVE, a destra, fuori dallo schermo —
     e `overflow-y: auto` porta con se' lo scorrimento orizzontale. Sul telefono
     il pannello e' una lista normale, che scorre solo in giu'. */
  .tab-pannello-largo { columns: auto; column-count: auto; column-width: auto;
                        max-height: 46vh; overflow-y: auto; overflow-x: hidden; }
}

/* ⚠️ SENZA JAVASCRIPT IL MENU' DEVE RESTARE RAGGIUNGIBILE. La classe
   `senza-js` sta sull'`html` e il JS la toglie: se il JS non parte — errore,
   rete, blocco — il menu' resta aperto invece di diventare irraggiungibile.
   Un miglioramento che rompe il sito quando manca non e' un miglioramento. */
.senza-js .menu { max-height: none; position: static; flex-direction: row;
                  flex-wrap: wrap; background: none; box-shadow: none;
                  border-top: 0; }
/* ⚠️ e lo stesso per le tab dei filtri: col JavaScript spento il bottone non
   apre niente, quindi le tab devono essere GIA' aperte invece di diventare
   irraggiungibili. Un miglioramento che rompe il sito quando manca non e' un
   miglioramento. */
.senza-js .tabbe { max-height: none; position: static; flex-direction: row;
                   flex-wrap: wrap; background: none; box-shadow: none;
                   border-top: 0; overflow: visible; }
.senza-js .menu-bottone { display: none !important; }


/* ==========================================================================
   L'ORDINAMENTO: TRE PULSANTI REVERSIBILI
   ==========================================================================
   ⚠️ QUI C'ERA LA VECCHIA BARRA DEI FILTRI (`.filtri`, `.cerca`,
   `.controlli`, `.ordina`, `.scelta`, `.interruttore`) ED E' STATA TOLTA il
   2026-09-14: ricerca, categoria e coupon sono saliti nell'intestazione come
   tab, e l'ordinamento e' diventato tre pulsanti.

   Lo stile e' stato rimosso e non lasciato «per sicurezza», perche' lo stile
   morto non resta inerte: lo stesso giorno `.tendina`, rimasto in giro dopo
   che la tendina era salita nell'intestazione, si e' applicato ai tab nuovi e
   ha prodotto due pastiglie bianche con il testo bianco sopra.

   Richiesta dell'utente: «voglio che l'ordinamento sia fattibile dal basso
   verso l'alto e viceversa, non in un menu a tendina. Ordiniamo per sconto
   piu' alto, minimi storici, offerte convenienti».

   ⚠️ IL PULSANTE ATTIVO DEVE DISTINGUERSI DAGLI ALTRI DUE A PRIMA VISTA, e
   qui e' piu' importante che altrove: tre pulsanti uguali fra cui uno e'
   attivo, se non si vede quale, fanno credere che l'elenco sia ordinato in un
   modo mentre e' ordinato in un altro. L'attivo e' pieno di azzurro, gli
   altri due sono chiari.
   ========================================================================== */
.ordinatori {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 9px 11px;
  background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: 0 1px 0 #fff inset,
              0 1px 2px rgba(16, 24, 40, .08),
              0 8px 18px -12px rgba(16, 24, 40, .22);
}
.ordinatori-eti {
  font-size: .66rem; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--tenue); white-space: nowrap;
  margin-right: 2px;
}

.ordinatore {
  display: inline-flex; align-items: center; gap: 7px;
  /* ⚠️ 42 px di altezza: e' un bersaglio da toccare, e sotto i 44 px su uno
     schermo da telefono si sbaglia il vicino. */
  min-height: 42px; padding: 0 14px;
  border-radius: var(--raggio-tab);
  text-decoration: none; white-space: nowrap;
  font-size: .9rem; font-weight: 700; color: var(--inchiostro);
  background: linear-gradient(180deg, #fff 0%, #f6f8fb 100%);
  border: 1px solid var(--bordo);
  box-shadow: 0 1px 0 #fff inset, 0 1px 3px rgba(16, 24, 40, .10);
  transition: transform .14s ease, box-shadow .14s ease,
              background-color .14s ease;
}
.ordinatore:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 #fff inset, 0 4px 10px -3px rgba(16, 24, 40, .22);
}
.ordinatore:active { transform: translateY(0); }

/* ⚠️ L'ATTIVO E' PIENO, non solo bordato: su tre pulsanti affiancati un
   bordo piu' scuro non si nota, e il criterio attivo e' l'informazione piu'
   importante della barra. */
.ordinatore-attivo {
  background: linear-gradient(180deg, #2d9fda 0%, var(--azzurro-scuro) 100%);
  border-color: var(--azzurro-scuro); color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset,
              0 3px 9px -2px rgba(11, 47, 71, .5);
}
.ordinatore-attivo:hover {
  background: linear-gradient(180deg, #3fb3e6 0%, #1a7fb5 100%);
}

/* la freccia del verso, in una colonna di larghezza fissa
   ⚠️ FISSA perche' ↑ e ↓ non occupano lo stesso spazio in tutti i font, e
   senza questo il nome del criterio si sposterebbe di un pixel a ogni
   inversione — un movimento che si nota e sembra un difetto. */
.ordinatore-freccia {
  flex: 0 0 12px; text-align: center;
  font-size: 1rem; line-height: 1; opacity: .75;
}
.ordinatore-attivo .ordinatore-freccia { opacity: 1; }

/* ⚠️ IL FILTRO SUL BADGE, DETTO IN PAROLE ACCANTO AI PRODOTTI. La tab
   nell'intestazione e' gialla e ben visibile, ma scorrendo la pagina
   l'intestazione si condensa e chi guarda venti card non ha piu' niente che
   gli ricordi di aver acceso un filtro. Un elenco corto che sembra il
   catalogo intero e' il difetto piu' insidioso di una barra di filtri. */
.ordinatori-nota {
  margin-left: auto; font-size: .84rem; color: var(--tenue);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.ordinatori-nota b { color: var(--inchiostro); }
@media (max-width: 559px) {
  /* sul telefono va a capo a piena larghezza: in riga stringerebbe i
     pulsanti, che sono bersagli da toccare */
  .ordinatori-nota { margin: 2px 0 0; flex: 1 1 100%; white-space: normal; }
}

@media (max-width: 559px) {
  /* ⚠️ sotto i 560 px l'etichetta «ORDINA PER» va a capo da sola e i tre
     pulsanti restano affiancati: stringerli sarebbe peggio che mandarli su
     due righe, perche' un bersaglio da toccare non si rimpicciolisce per far
     posto. */
  .ordinatori { gap: 6px; padding: 8px; }
  .ordinatori-eti { flex: 1 1 100%; margin: 0 0 2px; }
  .ordinatore { flex: 1 1 auto; justify-content: center; padding: 0 10px;
                font-size: .84rem; }
}

/* ==========================================================================
   LE VOCI DELLE CATEGORIE (dentro il pannello della tab)
   ==========================================================================
   ⚠️ LO STILE DEL CONTENITORE `.tendina` NON C'E' PIU', ed e' stato TOLTO di
   proposito il 2026-09-14. La tendina delle categorie e' salita
   nell'intestazione ed e' diventata una `.tab` (richiesta dell'utente:
   «vorrei mettere la ricerca e tutti i filtri nella tab in azzurro»).

   Il vecchio stile era bianco con bordo e freccia, disegnato per stare su un
   pannello chiaro. Avendo dato ai tab la classe `tendina` per riusarne il
   JavaScript, quello stile si e' applicato ai tab e ha prodotto due pastiglie
   bianche con il testo nero invisibile sulla fascia azzurra. Lasciarlo «per
   sicurezza» avrebbe voluto dire lasciare la trappola armata: lo stile morto
   non resta inerte, aspetta che qualcuno riusi la classe.

   Quello che resta sono le VOCI, che il pannello usa ancora.

   ⚠️ LE EMOJI SONO TUTTE OGGETTI O SIMBOLI, mai volti ne' persone: mescolare
   un cacciavite e una faccina fa un insieme che sembra assemblato a caso.
   Stanno in `_docs/reparti_nomi.json`, in una chiave separata dai nomi,
   perche' i nomi sono di Amazon e le emoji sono nostre.
   ========================================================================== */
.tendina-voce {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  text-decoration: none; color: var(--inchiostro); font-size: .92rem;
  break-inside: avoid;
  transition: background-color .12s ease, padding-left .12s ease;
}
/* ⚠️ COLONNA DI LARGHEZZA FISSA per l'emoji: ⚽ e 🧳 non occupano lo stesso
   spazio, e senza questo i nomi non si incolonnano — un elenco che non si
   allinea legge come un errore. `text-align: center` perche' dentro i
   28 px l'emoji va centrata, non appoggiata a sinistra. */
.tendina-emoji {
  flex: 0 0 22px; text-align: center; font-size: 1.02rem; line-height: 1;
}
.tendina-voce:hover { background: #eef6fb; padding-left: 13px; }
.tendina-attiva {
  background: linear-gradient(180deg, #ffe580 0%, var(--giallo) 100%);
  color: var(--nero); font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
              0 1px 3px rgba(120, 82, 0, .3);
}
.tendina-attiva:hover { background: var(--giallo); padding-left: 10px; }

/* ⚠️ su schermo piccolo il pannello prende la larghezza della pagina: un
   pannello da 280 px ancorato a sinistra, su un telefono da 390, lascia una
   striscia inutile a destra e sembra tagliato. */

/* --------------------------------------------------------------- avvisi -- */
.avviso {
  margin: 14px 0; padding: 12px 14px; border-radius: var(--raggio);
  background: #fff7e0; border: 1px solid #f0d999;
  font-size: .9rem;                       /* ⚠️ mai 12 px su un avviso */
}
.avviso.grave { background: #fdecea; border-color: #f1b5ae; }

/* ⚠️ LA DICHIARAZIONE DI AFFILIAZIONE: l'accordo Associates, sezione 5, la
   pretende «chiaramente e visibilmente». Sta in cima e nel pie', non solo in
   fondo in grigio piccolo. */
.affiliazione {
  background: #eef6fb; border-bottom: 1px solid #cfe4f2;
  font-size: .86rem; color: #234; padding: 8px 0;
}

/* ==========================================================================
   LA GRIGLIA E LE CARD
   ==========================================================================
   ⚠️ DUE PER FILA SU TELEFONO, TRE IN MEZZO, QUATTRO SU DESKTOP.
   Richiesta dell'utente, dopo aver visto la versione a tre e a cinque:
   «troppo compatto, facciamo 2 card su app e 4 per fila su desktop».

   Le misure che ne escono, ed e' da queste che dipende tutto il resto:
       telefono 390 px, 2 colonne  ->  ~178 px di card
       1120 px, 4 colonne          ->  ~262 px di card
   Con 178 px invece di 116 il titolo e i prezzi respirano, e i corpi del
   testo qui sotto sono cresciuti di conseguenza.

   ⚠️ E LE COLONNE SONO CONTATE, non `auto-fill`. La versione precedente le
   faceva aggiungere da sole, e a 1600 px diventavano cinque: l'utente ne
   vuole **quattro** su desktop, e un numero chiesto non si lascia decidere
   alla larghezza della finestra.
   ========================================================================== */
.griglia {
  display: grid; gap: 10px; padding: 4px 0 24px;
  /* ⚠️ `minmax(0, 1fr)` e non `1fr`: senza lo zero, un titolo lungo senza
     spazi allarga la colonna oltre lo schermo. Difetto visto in uno scatto,
     non dedotto. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) {
  .griglia { gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .griglia { gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   LA PROFONDITA' DELLA CARD
   ==========================================================================
   ⚠️ «Aggiungi profondita anche alle card e rendile piu belle» (l'utente).
   Come nell'intestazione, viene da piani sovrapposti e dalla luce SEMPRE
   DALLA STESSA PARTE, dall'alto:

     * il fondo e' un gradiente appena percettibile, bianco in cima e appena
       piu' freddo in basso: una campitura piatta legge come carta stampata,
       un gradiente legge come un oggetto illuminato;
     * il bordo chiaro interno in alto (`inset`) e' il riflesso;
     * DUE ombre invece di una: una corta e stretta che ancora la card al
       fondo, e una lunga e morbida che la stacca. Un'ombra sola o e' troppo
       dura o e' troppo vaga;
     * il riquadro dell'immagine e' INCASSATO (ombra interna), quindi la card
       ha due piani dentro di se': l'immagine sotto, il testo sopra;
     * la pastiglia dello sconto e' SOLLEVATA sull'immagine, con la sua
       ombra: il terzo piano.

   ⚠️ E il sollevamento al passaggio del mouse c'e' SOLO dove un mouse esiste
   (`hover: hover`): sul telefono `:hover` resta attaccato dopo il tocco, e
   la card resterebbe alzata a caso.
   ========================================================================== */
.card {
  /* ⚠️ `min-width: 0` E' LA CORREZIONE DI UN DIFETTO VISTO NELLO SCATTO.
     Gli elementi di una griglia hanno `min-width: auto`, quindi una parola
     lunga e non spezzabile — un titolo Amazon senza spazi, un codice — forza
     la colonna piu' larga della schermata. */
  min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: var(--inchiostro);
  background: linear-gradient(180deg, #fff 0%, #f9fbfd 100%);
  border: 1px solid var(--bordo); border-radius: 12px;
  box-shadow: 0 1px 0 #fff inset,
              0 1px 2px rgba(16, 24, 40, .10),
              0 6px 14px -8px rgba(16, 24, 40, .22);
  transition: transform .16s ease, box-shadow .16s ease,
              border-color .16s ease;
}
/* ⚠️ ORA LA CARD **E'** UN LINK, e il commento precedente diceva il
   contrario. Diceva: «un contenitore cliccabile con dentro altri link e' il
   difetto che rende le card inutilizzabili sul telefono». La ragione era la
   presenza di ALTRI link dentro — il titolo e il pulsante per Amazon. A
   116 px quelli non ci stanno piu': resta UN link solo, e allora farlo
   grande e' giusto, perche' su uno schermo da toccare il bersaglio piu'
   grande e' il migliore. */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-3px); border-color: #cfdae6;
    box-shadow: 0 1px 0 #fff inset,
                0 2px 4px rgba(16, 24, 40, .10),
                0 16px 28px -12px rgba(16, 24, 40, .34);
  }
  .card:hover .card-titolo { text-decoration: underline; }
}
.card:active { transform: translateY(0); }

/* ⚠️ ALTEZZA FISSA, NON `aspect-ratio`, e il perche' si e' visto solo nello
   scatto: con `aspect-ratio` piu' un'immagine in `max-height: 100%` nasce
   una dipendenza circolare, il browser ripiega sull'altezza del CONTENUTO, e
   una miniatura verticale diventava alta 900 px dentro una card da 470. */
/* ⚠️ SFONDO BIANCO PIENO, NON UN GRADIENTE. Richiesta dell'utente,
   2026-09-14: «lo sfondo dove sta la foto deve essere bianco, questo elimina
   il difetto di contrasto tra foto e sfondo».
   La ragione e' che le foto di Amazon hanno **il fondo bianco ritagliato**:
   su un gradiente che scurisce verso i bordi si vedeva il rettangolo della
   foto staccarsi dallo sfondo, e quella cucitura si notava su ogni card.
   Era una profondita' pagata col difetto che doveva decorare. Il rilievo
   resta, ma lo danno il bordo e l'ombra interna in basso, non il fondo. */
.card-figura {
  position: relative; height: 128px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--bordo);
}
@media (min-width: 700px) { .card-figura { height: 150px; } }
@media (min-width: 1000px) { .card-figura { height: 176px; } }
.card-figura img {
  max-height: 88%; max-width: 88%; object-fit: contain;
}

/* ==========================================================================
   ⚠️ PERCHE' QUI NON C'E' NESSUNA OMBRA — e perche' lo sfondo bianco da
   solo non era bastato
   ==========================================================================
   L'utente, 2026-09-14: «nn hai messo lo sfondo bianco dietro la foto che
   sta nella card, infatti si vede ancora il contrasto». Lo sfondo bianco
   c'era. Il contrasto lo facevano DUE ombre che avevo messo io:

   1. `filter: drop-shadow()` sull'immagine. L'avevo scelto con questa
      motivazione, scritta nel commento che ho appena tolto: «l'ombra segue
      la FORMA dell'oggetto, non il rettangolo». ⚠️ **E' vero solo per le
      immagini TRASPARENTI.** `drop-shadow` guarda il canale alfa, e le foto
      di Amazon sono JPEG **opachi** — fondo bianco pieno, alfa assente —
      quindi il canale alfa e' il rettangolo intero. L'ombra disegnava una
      cornice grigia attorno alla foto: esattamente il bordo che doveva
      evitare. Il ragionamento era giusto e il presupposto falso.

   2. `box-shadow: inset` in fondo alla figura, che scuriva la striscia
      appena sopra il bordo. Su un fondo bianco con una foto bianca quella
      striscia e' l'unica cosa che si vede, quindi leggeva come una cucitura.

   Ora il distacco fra foto e corpo della card lo da' solo `border-bottom`:
   una riga, netta, senza sfumature che possano sembrare un difetto di
   allineamento. La profondita' della card viene dalla sua ombra esterna, che
   e' il posto giusto per metterla. */
.card-senza-foto { color: var(--bordo); font-size: 1.6rem; }

/* la pastiglia dello sconto, sollevata sull'immagine */
.card-sconto {
  position: absolute; top: 6px; left: 6px;
  padding: 3px 6px; border-radius: 7px;
  background: linear-gradient(180deg, #f4494d 0%, var(--rosso) 100%);
  color: #fff; font-size: .72rem; font-weight: 900; letter-spacing: -.2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset,
              0 2px 5px -1px rgba(150, 20, 24, .6);
}
@media (min-width: 700px) {
  .card-sconto { top: 8px; left: 8px; padding: 4px 8px; font-size: .84rem; }
}

/* ---------------------------------------------------------------- corpo -- */
.card-corpo {
  display: flex; flex-direction: column; gap: 5px; flex: 1;
  padding: 9px 10px 10px;
}
@media (min-width: 700px) {
  .card-corpo { gap: 6px; padding: 11px 12px 12px; }
}

/* ==========================================================================
   IL GIUDIZIO: LA PASTIGLIA E LA SUA FRASE
   ==========================================================================
   ⚠️ LA FRASE NON E' UN ABBELLIMENTO: e' la riparazione della card che
   sembrava contraddirsi. Segnalazione dell'utente, 2026-09-14: «dichiariamo
   sconto vero un prodotto con dicitura poco piu' sotto: +3 euro rispetto al
   prezzo calcolato».
   La pastiglia dice il nome del giudizio, la frase dice cosa il giudizio
   misura — la posizione nell'anno, cioe' TEMPO. Un importo in euro non puo'
   smentire un'affermazione sul tempo, e la contraddizione apparente si
   scioglie senza toccare un solo calcolo.
   ========================================================================== */
.card-giudizio {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; max-width: 100%;
}

/* ⚠️ UNA RIGA SOLA, con i puntini. A 150 px una frase su due righe
   allungherebbe la card e le farebbe di altezze diverse nella stessa fila —
   lo stesso motivo per cui il titolo e' tagliato a due. Le frasi in
   `_docs/fasce.json` sono scritte corte proprio per non arrivare mai qui. */
.card-fascia {
  max-width: 100%; font-size: .64rem; line-height: 1.2;
  color: var(--tenue); font-weight: 600; letter-spacing: .1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 700px) { .card-fascia { font-size: .7rem; } }

.card-verdetto {
  align-self: flex-start; max-width: 100%;
  padding: 2px 6px; border-radius: 5px;
  font-size: .63rem; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset,
              0 1px 2px rgba(16, 24, 40, .12);
}
@media (min-width: 700px) {
  .card-verdetto { font-size: .68rem; padding: 3px 8px; }
}
/* ⚠️ `errore` NON E' UN VERDE PIU' ACCESO, ed e' voluto (2026-09-15).
   «Probabile errore di prezzo» e' un'affermazione piu' forte di una
   differenza statistica: il numero dice che il prezzo sta almeno il 60% sotto
   la media, non prova che ci sia un errore. Un verde trionfale lo leggerebbe
   come «l'affare migliore»; l'ambra lo legge come «guarda bene», che e' quello
   che vogliamo dire. Sono 754 prodotti su 158.249, lo 0,48%: una rarita' da
   segnalare, non un premio. Rilievo di Codex sulla forza dell'affermazione. */
.card-verdetto.errore { background: #fdf0d5; color: #8a5a00; }
.card-verdetto.forte { background: #d9f2e6; color: #0b6e4d; }
.card-verdetto.medio { background: #e6ecf4; color: #2b3a4a; }
.card-verdetto.alto  { background: #fbdedb; color: var(--su); }
.card-verdetto.muto  { background: #edf0f4; color: var(--tenue); }

/* ⚠️ il titolo si taglia a DUE righe, e a 116 px e' l'unico modo: un titolo
   Amazon da 200 caratteri renderebbe le card della stessa fila alte in modo
   diverso, e la griglia sembrerebbe rotta. */
.card-titolo {
  font-size: .81rem; line-height: 1.25; font-weight: 650;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 700px) { .card-titolo { font-size: .9rem; } }

/* ==========================================================================
   IL CONTO: PREZZO SU AMAZON, NOSTRO CALCOLO, DIFFERENZA
   ==========================================================================
   ⚠️ I DUE IMPORTI NON DEVONO SOMIGLIARSI. Era il rischio piu' concreto
   segnalato da Codex: due cifre in euro vicine, con lo stesso peso, e chi
   guarda non sa quale sta pagando. Qui il prezzo che si paga e' grande e
   nero, il nostro calcolo e' piccolo e tenue, e ognuno ha la sua etichetta.

   ⚠️ `tabular-nums` su tutti: le cifre proporzionali fanno ballare la
   virgola fra le righe, e tre importi incolonnati che non si allineano
   sembrano un errore di stampa.

   ⚠️ E la differenza e' in EURO, non solo in percentuale. La percentuale sta
   gia' sulla pastiglia rossa dell'immagine: «−20,00 EUR» dice una cosa che
   «−36%» non dice, cioe' quanto si risparmia davvero.
   ========================================================================== */
.card-conto {
  display: flex; flex-direction: column; gap: 1px; margin-top: auto;
  font-variant-numeric: tabular-nums;
}
.card-riga {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px;
}
.card-eti {
  font-size: .62rem; color: var(--tenue); font-weight: 600;
  letter-spacing: .2px; white-space: nowrap;
}
@media (min-width: 700px) { .card-eti { font-size: .68rem; } }

.card-paghi {
  font-size: 1.1rem; font-weight: 900; letter-spacing: -.3px;
  white-space: nowrap; line-height: 1.15;
}
@media (min-width: 700px) { .card-paghi { font-size: 1.28rem; } }

.card-nostro {
  font-size: .78rem; font-weight: 700; color: var(--tenue);
  white-space: nowrap;
}
@media (min-width: 700px) { .card-nostro { font-size: .86rem; } }

/* ==========================================================================
   ⚠️ LA RIGA DELLA STIMA VA A CAPO SUL TELEFONO, E LE ALTRE NO
   ==========================================================================
   Richiesta dell'utente: «"nostro calcolo" diventa "Prezzo reale stimato"».
   L'etichetta nuova e' molto piu' lunga della vecchia, e la riga e' un flex
   con etichetta e valore alle due estremita', entrambi `nowrap`.

   ⚠️ MISURATO, NON STIMATO — e la misura dice che si rompe:

     etichetta «Prezzo reale stimato»   104 px
     il prezzo accanto                   48 px
     la pastiglietta «+0,25 €»          ~35 px   (nel 92,5% dei casi!)
     ------------------------------------------
     servono                           ~187 px
     una card su un telefono da 390 px  156 px

   Senza questa regola la riga esce dal bordo della card proprio nel caso
   piu' frequente. Le altre due righe («Su Amazon» 58 px, «differenza» 52 px)
   ci stanno comode e restano in linea: va a capo solo questa.

   ⚠️ SI VA A CAPO, NON SI TRONCA. Un'etichetta tagliata in «Prezzo reale
   sti...» nasconde l'unica cosa che spiega il numero accanto — e quel numero
   e' proprio quello che l'utente aveva trovato ambiguo. Dodici pixel di
   altezza costano meno di un'etichetta illeggibile. */
@media (max-width: 699px) {
  .card-riga-stima { flex-wrap: wrap; row-gap: 0; }
  .card-riga-stima .card-eti { flex: 1 1 100%; }
  /* il valore si allinea a destra sulla riga sotto, sotto l'etichetta:
     cosi' i tre importi della card restano incolonnati fra loro */
  .card-riga-stima .card-nostro { margin-left: auto; }
}

/* ⚠️ LO SCARTO QUANDO SI PAGA PIU' DELLA NOSTRA STIMA: grigio, piccolo, e
   attaccato al nostro calcolo invece di avere una riga intitolata
   «differenza».
   Prima era una riga a se', in ROSSO, con la stessa importanza del
   risparmio: sotto una pastiglia verde «sconto vero» si leggeva come un
   allarme, cioe' come se il sito si stesse smentendo. Ma non c'e' niente di
   sbagliato in quel prodotto — il rosso segnalava un difetto inesistente.
   Qui lo scarto dice quello che e': di quanto la nostra stima prudente sta
   sotto il prezzo di oggi. Un dettaglio sulla stima, non un giudizio
   sull'affare. */
.card-scarto {
  margin-left: 5px; padding: 0 4px; border-radius: 4px;
  background: #eef1f5; color: var(--tenue);
  font-size: .64rem; font-weight: 700; white-space: nowrap;
}
@media (min-width: 700px) { .card-scarto { font-size: .7rem; } }

/* la differenza staccata da una linea: e' la conclusione del conto, non
   un'altra voce */
.card-diff {
  margin-top: 3px; padding-top: 3px;
  border-top: 1px dashed var(--bordo);
}
.card-diff b {
  font-size: .84rem; font-weight: 900; color: var(--giu);
  white-space: nowrap;
}
@media (min-width: 700px) { .card-diff b { font-size: .92rem; } }
/* ⚠️ `.card-sopra` NON ESISTE PIU'. Era la variante rossa per «si paga piu'
   della nostra stima»: quel caso ora sta inline in `.card-scarto`, quindi
   la regola sarebbe stile morto che qualcuno un giorno riuserebbe per
   sbaglio, rimettendo in pagina il rosso che abbiamo appena tolto. */

/* ------------------------------------------------- stelle e data, in fondo -- */
.card-fondo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; flex-wrap: wrap;
  margin-top: 5px; padding-top: 5px;
  border-top: 1px solid var(--bordo);
}
.card-stelle {
  font-size: .7rem; font-weight: 700; color: #8a6100; white-space: nowrap;
}
.card-stelle span { color: #f0b400; margin-right: 2px; }
.card-stelle small { color: var(--tenue); font-weight: 500; }
@media (min-width: 700px) { .card-stelle { font-size: .76rem; } }

/* ⚠️ 0,66rem e non 0,6: la data e' l'informazione che rende onesto il
   prezzo, non una nota legale da rimpicciolire fino a non leggerla. */
.card-data { font-size: .66rem; color: var(--tenue); white-space: nowrap; }
@media (min-width: 700px) { .card-data { font-size: .72rem; } }

/* ==========================================================================
   IL PULSANTE «VEDI SU AMAZON»
   ==========================================================================
   ⚠️ E' UNO `<span>`, NON UN LINK. Sta dentro il link della card, e un link
   dentro un link non e' HTML valido: il browser lo spezza e il risultato
   dipende da quale browser. Quindi sembra un pulsante, si comporta come la
   card, ed e' un bersaglio solo.

   ⚠️ E STA IN FONDO, dopo il prezzo e la data. Codex segnalava come difetto
   «la CTA "Vai su Amazon" piu' prominente dello stato»: il giudizio, il
   conto e la data vengono prima, sempre. Il pulsante e' la conclusione, non
   il protagonista.

   Il rilievo e' il solito: gradiente dall'alto, riflesso chiaro dentro il
   bordo superiore, ombra calda sotto. Il giallo del logo, che qui e' l'unico
   punto in cui compare pieno.
   ========================================================================== */
.card-cta {
  display: flex; align-items: center; justify-content: center;
  margin-top: 7px; min-height: 34px; padding: 0 10px;
  border-radius: 9px; border: 1px solid #e7bd12;
  background: linear-gradient(180deg, #ffe066 0%, var(--giallo) 100%);
  color: var(--nero); font-size: .78rem; font-weight: 800;
  letter-spacing: .2px; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .75) inset,
              0 2px 5px -1px rgba(120, 82, 0, .45);
  transition: box-shadow .16s ease, filter .16s ease;
}
@media (min-width: 700px) {
  .card-cta { min-height: 40px; font-size: .87rem; margin-top: 9px; }
}
/* ⚠️ il pulsante reagisce al passaggio sulla CARD, non su di se': e' la card
   che e' cliccabile, e un pulsante che si illumina solo quando il mouse ci
   sta sopra farebbe credere che il resto non sia cliccabile. */
@media (hover: hover) {
  .card:hover .card-cta {
    filter: brightness(1.04);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset,
                0 4px 10px -2px rgba(120, 82, 0, .55);
  }
}

.titolo { margin: 0; font-size: 1rem; line-height: 1.35; font-weight: 650; }
/* ⚠️ i titoli Amazon contengono codici lunghissimi senza spazi: senza questo
   spezzano la colonna. */
.titolo, .fatti li, .rilevato { overflow-wrap: anywhere; }
.titolo a { color: var(--inchiostro); text-decoration: none; }
.titolo a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- verdetto -- */
.verdetto {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 10px; border-radius: 999px;
  font-size: .82rem; font-weight: 700; letter-spacing: .2px;
}
.verdetto.forte { background: #e6f6ef; color: var(--giu); }
.verdetto.medio { background: #eef2f7; color: #2b3a4a; }
.verdetto.alto  { background: #fdecea; color: var(--su); }
.verdetto.muto  { background: #f2f4f7; color: var(--tenue); }

/* --------------------------------------------------------------- prezzi -- */
/* ⚠️ IL PREZZO RILEVATO E IL RIFERIMENTO STORICO NON DEVONO SOMIGLIARSI.
   Erano il rischio piu' concreto segnalato da Codex: due numeri in euro
   vicini, con lo stesso peso, e chi guarda non sa quale sta pagando. */
.prezzi { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ora { font-size: 1.5rem; font-weight: 800; letter-spacing: -.4px; }
.rif { font-size: .95rem; color: var(--tenue); text-decoration: line-through; }
.scarto {
  font-size: .95rem; font-weight: 800; color: var(--giu);
  background: #e6f6ef; padding: 2px 8px; border-radius: 6px;
}
.scarto.su { color: var(--su); background: #fdecea; }

/* ⚠️ LA DATA DELLA RILEVAZIONE, e non e' una nota in fondo: e' la condizione
   che rende il prezzo un'affermazione onesta. Decisione dell'utente:
   «mettiamo cmq la data e ora del rilevamento». */
.rilevato {
  font-size: .82rem; color: var(--tenue);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.rilevato b { color: #2b3a4a; font-weight: 650; }

.fatti { margin: 0; font-size: .86rem; color: var(--tenue); }
.fatti li { margin: 2px 0; }

/* ----------------------------------------------------------------- CTA -- */
/* ⚠️ VIENE DOPO lo stato, non prima: un pulsante piu' prominente
   dell'avvertenza e' un difetto, non una scelta di design. */
.cta {
  margin-top: auto; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--giallo); color: var(--nero);
  border: 1px solid #e7bd12; border-radius: 10px;
  font-weight: 750; text-decoration: none; padding: 0 16px;
}
.cta:active { transform: translateY(1px); }
.cta small { font-weight: 500; opacity: .75; }

/* --------------------------------------------------------------- scheda -- */
.scheda { display: grid; gap: 16px; padding: 16px 0 28px; }
.scheda > * { min-width: 0; }        /* ⚠️ come `.card`: vedi sopra */
@media (min-width: 900px) {
  .scheda { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}
.pannello {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 14px; box-shadow: var(--ombra);
}
.pannello h2 { margin: 0 0 10px; font-size: 1rem; }
/* ⚠️ LO STACCO FRA DUE PANNELLI VICINI, aggiunto il 2026-09-15. `.pannello`
   non ha margini perche' nella `.scheda` lo spazio lo dava la griglia; sulla
   pagina del metodo i pannelli sono figli diretti del contenuto e stavano
   INCOLLATI, con i bordi a contatto che sembravano una tabella. Il selettore
   e' `+` di proposito: non tocca il pannello unico di `entra.html`, che di
   fratelli non ne ha. ⚠️ Se un domani tornasse la scheda prodotto con due
   pannelli dentro la griglia `.scheda`, la' questo margine SI SOMMEREBBE al
   `gap`: in quel caso va limitato al contenuto del metodo, non allargato. */
.pannello + .pannello { margin-top: 14px; }

/* ⚠️ la tabella dei dati SCORRE DENTRO IL SUO CONTENITORE: su un telefono a
   320 px una tabella di prezzi e date sfonderebbe la pagina. */
.tabellina { width: 100%; overflow-x: auto; }
.tabellina table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabellina th, .tabellina td {
  text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--bordo);
  vertical-align: top;
}
/* ⚠️ LE ETICHETTE VANNO A CAPO, I NUMERI NO — e la prima stesura faceva il
   contrario, con un effetto che si vedeva solo nello scatto: `nowrap` sulle
   etichette allargava la loro colonna oltre il pannello da 340 px, spingeva
   la colonna dei valori fuori dalla vista, e il pannello mostrava un elenco
   di etichette SENZA NUMERI. Peggio di un errore: sembrava che i dati non ci
   fossero. */
.tabellina th { color: var(--tenue); font-weight: 600; white-space: normal; }
.tabellina td { overflow-wrap: anywhere; }
.tabellina td.n { text-align: right; font-variant-numeric: tabular-nums;
                  white-space: nowrap; }

.paginazione { display: flex; gap: 10px; justify-content: center;
               padding: 8px 0 28px; }
.paginazione a, .paginazione span {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 16px; border-radius: 10px; background: var(--carta);
  border: 1px solid var(--bordo); text-decoration: none;
}
.paginazione span { color: var(--tenue); }

/* ------------------------------------------------------------------ pie -- */
.pie {
  background: #fff; border-top: 1px solid var(--bordo);
  padding: 18px 0 28px; font-size: .88rem; color: var(--tenue);
}
.pie a { color: var(--azzurro-scuro); }
.pie p { margin: 6px 0; }

h1 { font-size: 1.4rem; line-height: 1.25; margin: 18px 0 6px;
     overflow-wrap: anywhere; }
.sottotitolo { margin: 0 0 14px; color: var(--tenue); font-size: .95rem; }

/* ⚠️ chi ha chiesto meno movimento non lo riceve. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}