/* ============================================================================
   Archivio prodotti — categorie, tag, ricerca
   ========================================================================= */

/* ── Intestazione di categoria ────────────────────────────────────────────
   L'unico punto, insieme alla vetrina di marca, in cui l'accento di segmento
   occupa una superficie ampia. Resta un velo: il testo deve restare leggibile
   e il colore non deve mai competere con il blu dei bottoni.                */

.rt-archivio__testata {
  position: relative;
  /* NIENTE STACCO IN CIMA.
     Erano 48px di fondo colorato e vuoto fra la navigazione e la prima
     riga di testo: una fascia che non dice niente e che fa leggere la
     testata come un blocco staccato dal sito invece che come la prima
     cosa della pagina. Adesso le briciole partono subito sotto la
     navigazione e la testata comincia dove finisce la testata del sito. */
  padding-block: var(--rt-s5) var(--rt-s12);
  --rt-accento: var(--rt-seg-cassa);
  overflow: hidden;
}
.rt-archivio__testata::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 120% at 12% 0%, color-mix(in srgb, var(--rt-accento) 16%, transparent), transparent 68%),
    radial-gradient(50% 100% at 92% 100%, color-mix(in srgb, var(--rt-accento) 9%, transparent), transparent 70%),
    var(--rt-superficie-2);
  z-index: 0;
}
.rt-archivio__testata > * { position: relative; z-index: 1; }

/* IL NEGOZIO NON HA UN SEGMENTO, QUINDI NON HA UN VELO.
   Il velo colorato dice "questa pagina e' della famiglia X". Il negozio
   le contiene tutte, quindi quel colore non significava niente.

   PRIMA ERA BIANCO E SEPARATO DA DUE FILETTI — uno sotto la testata e uno
   sopra il piede — e due righe grigie su una pagina bianca non sono
   pulizia: sono due righe grigie. Adesso il fondo e' il grigio tenue della
   pagina e i riquadri sono bianchi: separa il colore, non una linea. Sono
   sempre due superfici, ma una e' il fondo e l'altra sono gli oggetti
   sopra — che e' come e' fatto tutto il resto del sito. */
.rt-archivio--negozio { background: var(--rt-fondo); }
.rt-archivio--negozio .rt-archivio__testata {
  padding-block: var(--rt-s5) var(--rt-s8);
}
.rt-archivio--negozio .rt-archivio__testata::before { content: none; }

/* Il piede si attacca e perde il filetto: fra il grigio della pagina e il
   bianco del piede il passaggio si vede gia', e una riga in piu' sopra di
   esso e' la seconda delle due che si stanno togliendo. */
main:has(.rt-archivio--negozio) + .rt-footer {
  margin-top: 0;
  border-block-start: 0;
}

.rt-archivio__testata.rt-seg-pos         { --rt-accento: var(--rt-seg-pos); }
.rt-archivio__testata.rt-seg-bilance     { --rt-accento: var(--rt-seg-bilance); }
.rt-archivio__testata.rt-seg-etichette   { --rt-accento: var(--rt-seg-etichette); }
.rt-archivio__testata.rt-seg-scommesse   { --rt-accento: var(--rt-seg-scommesse); }
.rt-archivio__testata.rt-seg-eliminacode { --rt-accento: var(--rt-seg-eliminacode); }
.rt-archivio__testata.rt-seg-carta       { --rt-accento: var(--rt-seg-carta); }

.rt-archivio__titolo {
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  letter-spacing: var(--rt-tracking-titolo);
  max-width: 20ch;
}

/* Il sommario: una riga, non un testo. Piu' grande del corpo normale
   perche' e' l'unica frase della testata e deve leggersi come una
   risposta, non come una didascalia. 56 caratteri: su un monitor da
   3200px la colonna di sinistra e' larga quasi mille pixel, e una riga
   lunga mille pixel non si legge, si perde il capo riga. */
.rt-archivio__sommario {
  max-width: 56ch;
  margin-top: var(--rt-s5);
  color: var(--rt-ink-2);
  font-size: var(--rt-t-testo);
  line-height: 1.5;
}
.rt-archivio__sommario p { margin: 0; }
.rt-archivio__sommario b { color: var(--rt-ink); font-weight: var(--rt-peso-forte); }

/* ── Testata a due colonne, dove c'e' una fotografia ─────────────────────
   :has() e non una classe sul contenitore: la fotografia la decide
   inc/usi.php, categoria per categoria, e una classe in piu' nel PHP
   sarebbe una seconda condizione da tenere allineata alla prima. Dove la
   fotografia non c'e' resta una colonna sola, cioe' esattamente com'era. */

.rt-archivio__dentro { display: block; }

/* min-width:0 e non "niente": un elemento di griglia parte da auto, cioe'
   dalla larghezza del suo contenuto piu' lungo, e una misura come
   "57x30" dentro un paragrafo basta a sfondare la colonna su schermi
   stretti. */
.rt-archivio__testo { min-width: 0; }

/* ── La fotografia della testata ─────────────────────────────────────────
   REGOLA PRIMA: L'ALTEZZA NON DIPENDE DALLA LARGHEZZA DELLO SCHERMO.

   La versione del 12 ottobre lasciava che la fotografia si allargasse con
   la colonna e crescesse in altezza di conseguenza. A 1440px veniva una
   testata da 568px — che e' quello che avevo misurato. Sul monitor di
   Giuseppe, 3200px, la stessa testata faceva 1222px, con 424px di fascia
   vuota sopra le briciole e la fotografia tirata a 1531px da una sorgente
   di 1100: enorme e sgranata. Era un difetto di misura, non di gusto.

   Adesso l'altezza e' fissa e la larghezza ritaglia: object-fit:cover su
   un'altezza che si ferma a 420px. Piu' lo schermo e' largo, piu' si vede
   della scena — mai piu' grande, mai piu' sgranata.

   E NIENTE PIU' SBORDO fuori dal contenitore. L'avevo aggiunto io, non
   l'aveva chiesto nessuno, e su uno schermo largo era proprio quello che
   portava la fotografia oltre la sua risoluzione. */

.rt-archivio__foto {
  position: relative;
  margin: 0;
}
.rt-archivio__foto-sfondo {
  display: block;
  width: 100%;
  height: clamp(18.75rem, 26vw, 26.25rem);
  object-fit: cover;
  /* Il soggetto — la mano e il vano del rotolo — sta al centro e poco
     sotto la meta': il ritaglio tiene quello, non il fondo. */
  object-position: 50% 42%;
  border-radius: var(--rt-r-2xl);
}

@media (min-width: 900px) {
  .rt-archivio__dentro:has(.rt-archivio__foto) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

@media (max-width: 899px) {
  /* SUL TELEFONO LA FOTOGRAFIA SALE SOTTO IL TITOLO.
     In colonna l'ordine del desktop diventa: titolo, due paragrafi, tre
     prove, e solo in fondo la fotografia — cioe' mezzo schermo di testo
     prima di qualunque conferma visiva di essere sulla pagina giusta.
     Chi arriva da "rotoli pos" deve vedere un POS, non leggerlo.

     display:contents sul riquadro di testo: i suoi figli diventano figli
     diretti della colonna, e da li' si possono ordinare. L'ordine nel
     DOCUMENTO non cambia — introduzione subito dopo il titolo, che e'
     quello che conta per chi legge la pagina senza stile e per chi la
     indicizza. Cambia solo l'ordine in cui si vedono. */
  .rt-archivio__dentro {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .rt-archivio__testo { display: contents; }

  .rt-archivio__testata .rt-briciole { order: 1; }
  .rt-archivio__titolo              { order: 2; }
  .rt-archivio__foto                { order: 4; margin-block-start: var(--rt-s6); }
  .rt-archivio__prove               { order: 5; margin-top: var(--rt-s6); }
  .rt-archivio__sommario            { order: 3; }
}

/* ── Le tre prove ────────────────────────────────────────────────────────
   Una riga sotto il testo, non tre pastiglie: le pastiglie sembrano
   bottoni e qui non si clicca niente. Il titolo in grassetto porta il
   fatto, la riga sotto il dato che lo rende verificabile. */

.rt-archivio__prove {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s3) clamp(1.25rem, 3vw, 2.5rem);
  margin: var(--rt-s8) 0 0;
  padding: 0;
  list-style: none;
}
.rt-archivio__prove li {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  font-size: var(--rt-t-testo);
  line-height: 1.35;
  color: var(--rt-ink-2);
}
/* La misura dell'icona si scrive QUI e non nell'SVG: le icone del tema
   escono senza width e height — cosi' seguono il testo dove servono
   grandi — e senza una regola che le fermi riempivano la colonna. */
.rt-archivio__prove svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--rt-blu);
}
.rt-archivio__prove b {
  display: block;
  color: var(--rt-ink);
  font-weight: var(--rt-peso-forte);
}

/* ── La merce, subito sotto la testata ──────────────────────────────────
   Il blocco che contiene barra, griglia e paginazione. Lo spazio sopra e'
   corto apposta: fra il titolo della pagina e il primo prodotto non deve
   esserci niente da saltare. */

.rt-archivio__merce {
  padding-block: var(--rt-s10) var(--rt-s12);
}

/* ── La griglia ──────────────────────────────────────────────────────────
   UNA CARD NON SUPERA I 400px, MAI.

   La versione del 12 ottobre dava alla griglia tante colonne quanti i
   prodotti: con tre prodotti su un contenitore da 1820px venivano tre card
   da 593px l'una. Le fotografie di catalogo sono 800x800, quindi su uno
   schermo a densita' doppia servivano 1186px di immagine e ce n'erano 800:
   sgranate. "Piu' grandi" voleva dire piu' grandi di 335px, non enormi.

   Il massimo e' 400px: su 800px di sorgente resta nitida anche al doppio
   della densita'. Allineate a sinistra, sullo stesso bordo del titolo e
   delle briciole: una fila centrata, con tre prodotti su quattro colonne,
   si stacca dal resto della pagina.

   PERCHE' GLI PSEUDO-ELEMENTI SI SPENGONO
   woocommerce.css del plugin ha questo:
       .woocommerce ul.products::before,
       .woocommerce ul.products::after { content:" "; display:table }
   E' un clearfix, nato per i float. Ma la nostra ul.products e'
   display:grid, e in una griglia uno pseudo-elemento con content non e'
   decorazione: e' UN ELEMENTO DI GRIGLIA. Il ::before si prendeva la prima
   cella e spingeva il primo prodotto in colonna 2, il secondo in colonna 3
   e il terzo a capo in colonna 1 — i prodotti sfalsati che si vedevano in
   pagina. display:none e non content:none: content:none su un ::before gia'
   generato lo toglie dal flusso, ma display:none lo dice in un modo che
   vale anche se un domani il plugin cambia la proprieta'. */

.rt-archivio__griglia ul.products::before,
.rt-archivio__griglia ul.products::after { display: none; }

/* LE COLONNE SONO QUANTE LE CELLE, al massimo quattro, e il numero lo
   scrive il PHP in --rt-colonne.

   Con auto-fill la griglia decideva da sola quante colonne ci stavano, e i
   binari erano fermi a 400px: su un monitor da 3200px faceva sei colonne
   per quattro celle, e la fila finiva 150px prima del bordo del
   contenitore mentre il pannello sotto ci arrivava. Si vedeva, ed era
   proprio quello che Giuseppe chiamava "larghezza totale inferiore".

   Binari 1fr: quello che avanza lo prendono le celle, quindi la fila
   finisce dove finisce il contenitore a qualunque larghezza. Le card
   possono passare i 400px senza sgranare — il srcset delle fotografie di
   catalogo sale fino a 2500w. */
.rt-archivio__griglia ul.products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1100px) {
  .rt-archivio__griglia ul.products {
    grid-template-columns: repeat(var(--rt-colonne, 4), minmax(0, 1fr));
  }
}
/* Qui una riga faceva scendere la griglia a UNA colonna sotto i 619px.
   Con trenta prodotti la pagina del negozio era alta ventimila pixel sul
   telefono, e per arrivare in fondo ci volevano venticinque pollicate: a
   due colonne sono la meta', e due card da 165 pixel si guardano insieme
   invece che una per volta. Due colonne e' anche come si guarda un
   catalogo su un telefono da quindici anni. */

/* QUANDO LA VISTA C'E', COMANDA LEI, a ogni larghezza. L'attributo lo mette
   lo script: senza JavaScript queste regole non esistono e restano quelle
   responsive di sopra. */
.rt-archivio__griglia[data-rt-vista] ul.products {
  grid-template-columns: repeat(var(--rt-colonne, 4), minmax(0, 1fr));
}

@media (max-width: 900px) {
  /* SUL TELEFONO LA TESTATA E' BIANCA.
     Il velo di colore e' nato per dare profondita' su una fascia larga,
     dove il gradiente ha spazio per farsi vedere. In una colonna da 390px
     diventa una macchia verdina dietro al testo che non dice niente e
     toglie contrasto alle lettere. */
  .rt-archivio__testata::before { background: var(--rt-superficie); }
  .rt-archivio__testata { padding-block: var(--rt-s4) var(--rt-s8); }
  .rt-archivio__foto { margin-block-start: var(--rt-s6); }
  .rt-archivio__prove { margin-top: var(--rt-s6); }
  .rt-archivio__merce { padding-block: var(--rt-s6) var(--rt-s10); }
}

/* Sul telefono ogni pixel della testata e' un pixel tolto ai prodotti, che
   sono la ragione per cui la pagina esiste: la fotografia diventa una
   fascia 16:9 ritagliata invece di un rettangolo alto.

   Qui c'erano anche tre regole per la barra dei comandi, e non facevano
   niente: erano scritte PRIMA della regola base di .rt-archivio__barra,
   che ha la stessa specificita', e a parita' vince l'ultima scritta. La
   barra sul telefono si disegna piu' sotto, dopo la sua regola base. */
@media (max-width: 700px) {
  .rt-archivio__foto img {
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
  }
}

/* ── Barra di ordinamento ─────────────────────────────────────────────── */

.rt-archivio__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s4);
  flex-wrap: wrap;
  padding-bottom: var(--rt-s5);
  margin-bottom: var(--rt-s8);
  border-bottom: 1px solid var(--rt-linea);
}
.rt-archivio__barra-destra {
  display: flex;
  align-items: center;
  gap: var(--rt-s5);
  margin-inline-start: auto;
}
.woocommerce-result-count { margin: 0; color: var(--rt-ink-3); font-size: var(--rt-t-sm); }

/* CINQUANTASEI PIXEL DI NIENTE FRA IL TITOLO E I COMANDI, sul telefono.
   Misurati: il titolo finiva a 148 e la barra cominciava a 204, perche' la
   testata ha trentadue pixel di rientro sotto e il blocco della merce
   ventiquattro sopra — due rientri che si sommano senza che nessuno dei
   due sappia dell'altro.

   Su un monitor quella distanza e' respiro. Su un telefono e' un quinto di
   schermo che non dice niente, in cima alla pagina che esiste per far
   vedere la merce: il titolo e i comandi sono la stessa cosa — "ecco cosa
   stai guardando, ecco come guardarlo" — e stanno attaccati. */
@media (max-width: 900px) {
  .rt-archivio--negozio .rt-archivio__testata { padding-block: var(--rt-s4) var(--rt-s3); }
  .rt-archivio--negozio .rt-archivio__merce { padding-block-start: var(--rt-s4); }
}

/* NEL NEGOZIO LA BARRA E' UN RIQUADRO, come il pannello dei filtri e come
   le card: un filetto sotto la riga e' la riga di un documento, un
   riquadro e' un comando. */
.rt-archivio--negozio .rt-archivio__barra {
  padding: var(--rt-s3) var(--rt-s4);
  margin-bottom: var(--rt-s6);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-xl);
  background: var(--rt-superficie);
}

/* LA COLONNA DEI PRODOTTI PUO' STRINGERSI.
   Un elemento di griglia nasce con min-width:auto, cioe' non scende sotto
   la larghezza minima del suo contenuto: a 320 pixel la barra dei comandi
   chiedeva 324 pixel, la colonna glieli dava, e la pagina sbordava di
   tredici. Con zero la colonna si stringe e il contenuto si arrangia —
   l'ordinamento si accorcia con i puntini, che e' esattamente quello per
   cui ha i puntini. */
.rt-archivio__colonna { min-width: 0; }

/* ── LA BARRA SUL TELEFONO: DUE COMANDI AI DUE BORDI ─────────────────────
   Erano tre in riga — filtri, viste, ordinamento — e su 332 pixel utili
   stavano stretti al punto che sotto i 360 la parola "Ordina" doveva
   sparire. I filtri sono usciti dalla barra: adesso sono una pastiglia
   che galleggia in fondo allo schermo, dove il pollice sta gia'.

   Restano due comandi e due bordi: l'ordinamento a sinistra, piccolo e
   senza riquadro perche' e' una preferenza e non un'azione, e le viste a
   destra. Niente riquadro intorno alla barra: con due comandi leggeri una
   scatola bianca intorno pesa piu' di quello che contiene.           */
@media (max-width: 1099px) {
  .rt-archivio__barra {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rt-s3);
  }
  /* L'ordinamento sta a sinistra, e nel documento viene dopo le viste:
     e' l'ordine giusto per chi legge con la voce — prima COME si vede,
     poi in che ordine — e qui cambia solo dove cade. */
  .rt-archivio__barra-destra {
    order: -1;
    min-width: 0;
    margin-inline-start: 0;
  }
  .rt-viste { flex: none; }
  .rt-archivio__barra .woocommerce-result-count { display: none; }
  .rt-archivio--negozio .rt-archivio__barra {
    padding: 0 var(--rt-s1);
    margin-bottom: var(--rt-s4);
    border: 0;
    border-radius: 0;
    background: none;
  }
}

/* ── L'ordinamento ────────────────────────────────────────────────────── */

.rt-ordina {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin: 0;
}

/* DICIASSETTE PIXEL DI NIENTE SOTTO L'ORDINAMENTO, a ogni larghezza.
   woocommerce.css scrive `.woocommerce .woocommerce-ordering { margin: 0 0
   1em }`, due classi contro la classe sola qui sopra: il margine restava, e
   la barra dei comandi era alta 58 pixel per contenere un comando da 41.
   Si vedeva come spazio vuoto e sembrava una scelta di disegno.

   Il selettore ha una classe in piu' E l'elemento, cosi' batte quello del
   plugin per specificita' e non per ordine di caricamento, che non dipende
   da questo file. */
.rt-archivio__barra form.rt-ordina { margin: 0; }
.rt-ordina__et {
  color: var(--rt-ink-3);
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
}
.rt-ordina__guscio { position: relative; display: inline-flex; align-items: center; }

/* appearance:none toglie la pillola del sistema operativo; la freccia la
   rimettiamo noi, perche' senza, il menu non si legge piu' come un menu. */
.rt-archivio__barra .rt-ordina select,
.woocommerce-ordering select {
  appearance: none;
  -webkit-appearance: none;
  padding: var(--rt-s2) calc(var(--rt-s8) + var(--rt-s1)) var(--rt-s2) var(--rt-s4);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-lg);
  background: var(--rt-superficie);
  color: var(--rt-ink);
  font: inherit;
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  line-height: 1.6;
  cursor: pointer;
  transition: border-color var(--rt-transizione), box-shadow var(--rt-transizione);
}
.rt-archivio__barra .rt-ordina select:hover { border-color: color-mix(in srgb, var(--rt-blu) 40%, var(--rt-linea)); }
.rt-archivio__barra .rt-ordina select:focus-visible {
  outline: none;
  border-color: var(--rt-blu);
  box-shadow: 0 0 0 3px var(--rt-blu-tenue);
}
.rt-ordina__freccia {
  position: absolute;
  inset-inline-end: var(--rt-s3);
  width: 1rem;
  height: 1rem;
  color: var(--rt-ink-3);
  pointer-events: none;
}

/* Dove c'e' spazio il <select> si legge da se' e l'etichetta gli sta
   davanti: il segno e la copia della voce scelta servono solo al telefono,
   dove il menu si traveste da riga di testo. */
.rt-ordina__segno,
.rt-ordina__ora { display: none; }

/* ── L'ORDINAMENTO SUL TELEFONO: UNA RIGA, NON UN COMANDO ────────────────
   Era una pastiglia con il bordo. L'ordinamento pero' e' una preferenza —
   si imposta una volta e si dimentica — e un riquadro gli dava lo stesso
   peso visivo del bottone dei filtri, che invece e' la cosa che si usa.
   Qui e' testo piccolo con il suo segno davanti, a sinistra della barra.

   Il <select> vero ci sta sopra invisibile e a tutta riga: il tocco apre
   la rotella del sistema operativo, che e' il modo in cui si sceglie da un
   elenco su un telefono. Quello che si legge e' un <span>, perche' un
   <select> non si accorcia con i puntini in nessun browser e
   "Ordinamento predefinito" per intero sono 237 pixel.               */
@media (max-width: 1099px) {
  .rt-ordina__et { display: none; }
  .rt-archivio__barra form.rt-ordina {
    position: relative;
    min-width: 0;
    gap: var(--rt-s2);
    padding: var(--rt-s2) calc(var(--rt-s5) + var(--rt-s1)) var(--rt-s2) 0;
    border: 0;
    background: none;
  }
  /* Il fuoco si vede lo stesso, perche' il menu e' trasparente: un filo
     di fondo e un contorno, senza disegnare un riquadro che a riposo non
     c'e'. */
  .rt-archivio__barra form.rt-ordina:focus-within {
    outline: 2px solid var(--rt-blu);
    outline-offset: 4px;
    border-radius: var(--rt-r-sm);
  }
  .rt-ordina__segno {
    display: block;
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--rt-ink-3);
  }
  .rt-ordina__ora {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--rt-ink-2);
    font-size: var(--rt-t-xs);
    font-weight: var(--rt-peso-medio);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* Il guscio non misura piu' niente: dentro ha solo il menu e la
     freccia, due cose fuori dal flusso. La freccia si aggancia alla riga,
     cioe' al <form>, e per questo il guscio torna statico. */
  .rt-ordina__guscio { position: static; }
  .rt-archivio__barra .rt-ordina select,
  .woocommerce-ordering select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: none;
    opacity: 0;
    /* 16px perche' sotto quella misura iOS ingrandisce la pagina quando un
       campo prende il fuoco, e poi non la rimpicciolisce piu'. Non e' una
       misura di disegno — il menu non si vede — ma la soglia di un
       browser. */
    font-size: 16px;
  }
  .rt-ordina__freccia {
    inset-inline-end: 0;
    width: 0.875rem;
    height: 0.875rem;
  }
}

/* ── IL BOTTONE DEI FILTRI: UNA PASTIGLIA CHE GALLEGGIA ──────────────────
   Stava nella barra, in cima alla griglia. Due problemi: in una riga con
   altri due comandi stringeva tutto al punto che sotto i 360 pixel una
   parola doveva sparire, e soprattutto SCORREVA VIA — dopo due schermate
   di prodotti, cioe' esattamente quando uno si accorge che gliene servono
   di meno, bisognava risalire in cima per filtrare.

   Qui galleggia in fondo al centro, sopra la barra fissa, e resta li'.
   Al centro e non a destra perche' a destra ci sono gia' l'assistente e
   il torna-su: tre pastiglie in colonna sullo stesso angolo sono una
   pila, non tre comandi.

   Esiste solo sul telefono: sopra i 1100px il pannello e' la colonna di
   fianco, e un bottone che apre quello che e' gia' aperto e' un comando
   finto. Nasce spento e lo accende la @media, non lo script: una cosa che
   non c'entra con questa larghezza non deve nemmeno lampeggiare.     */

.rt-barra__btn {
  display: none;
  align-items: center;
  gap: var(--rt-s2);
  padding: var(--rt-s2) var(--rt-s4);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-lg);
  background: var(--rt-superficie);
  color: var(--rt-ink);
  font: inherit;
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  cursor: pointer;
  transition: border-color var(--rt-transizione), box-shadow var(--rt-transizione);
}
/* L'attributo hidden lo batte qualunque regola di display: il bottone
   nasce hidden perche' senza JavaScript non apre niente, e senza questa
   riga la @media di sotto lo accenderebbe comunque. */
.rt-barra__btn[hidden] { display: none; }
.rt-barra__btn svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--rt-ink-3);
}
.rt-barra__btn:focus-visible {
  outline: 2px solid var(--rt-blu);
  outline-offset: 2px;
}

/* Il numero dei filtri accesi. Con la scheda chiusa e' l'unico modo di
   sapere che un filtro c'e' senza aprirla. */
.rt-barra__conta:not(:empty) {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 5px;
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie);
  color: var(--rt-blu);
  font-family: var(--rt-font-dati);
  font-size: var(--rt-t-xs);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1099px) {
  .rt-barra__filtri {
    display: inline-flex;
    position: fixed;
    inset-block-end: calc(var(--rt-giu-h, 0px) + var(--rt-s4));
    /* CENTRATA CON I MARGINI, non con translateX.
       Un transform fa dell'elemento il contenitore di tutto cio' che
       dentro di lui e' in position:fixed: la sfumatura qui sotto, che
       dichiara inset-inline:0 per prendere tutta la larghezza dello
       schermo, si ancorava alla pastiglia e veniva fuori come un
       rettangolo chiaro largo centoquattordici pixel in mezzo alla
       griglia. Due margini automatici centrano lo stesso e non creano
       nessun contenitore. */
    inset-inline: 0;
    width: fit-content;
    margin-inline: auto;
    /* 92: sotto l'assistente (95), il torna-su (94) e la scorciatoia
       (93), che stanno tutti nell'angolo destro e non si incontrano mai
       con questa, e sopra la barra fissa in fondo (70), che invece le
       passa sotto. */
    z-index: 92;
    padding: var(--rt-s3) var(--rt-s6);
    border: 0;
    border-radius: var(--rt-r-pill);
    background: var(--rt-ink);
    color: var(--rt-superficie);
    font-weight: var(--rt-peso-forte);
    box-shadow: var(--rt-ombra-3);
  }
  .rt-barra__filtri svg { color: currentColor; }

  /* ── LA SFUMATURA SOTTO ────────────────────────────────────────────
     La pastiglia galleggia sopra la griglia, e una pastiglia scura
     appoggiata su una fotografia di prodotto si legge come una macchia.
     Una sfumatura corta dal fondo pagina al niente la stacca senza
     disegnare una riga, e dice che sotto la pagina continua.

     STA SULL'ARCHIVIO E NON SULLA PASTIGLIA. Era un pseudo-elemento
     della pastiglia con z-index:-1, e non funzionava: un figlio con
     z-index negativo si disegna sopra il FONDO del genitore e sotto il
     suo testo, quindi la sfumatura velava la pastiglia stessa — grigia,
     con dentro la parola "Filtri" sbiadita. Appesa all'archivio sta
     sotto tutto quello che galleggia e sopra la griglia, che e'
     esattamente dove serve.

     Il :has() la lega alla pastiglia: senza JavaScript il bottone resta
     hidden, e una sfumatura in fondo a una pagina senza niente da
     velare sarebbe una macchia e basta.

     Si ferma dove comincia la barra fissa in fondo: coprirla sarebbe
     velare dei comandi. */
  .rt-archivio--negozio:has(.rt-barra__filtri:not([hidden]))::after {
    content: "";
    position: fixed;
    inset-inline: 0;
    inset-block-end: var(--rt-giu-h, 0px);
    height: 7rem;
    /* 10: sopra la griglia, che non ha z-index, e sotto tutto quello che
       sta fisso in fondo — la barra (70) e la pastiglia (92). */
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(
      to top,
      var(--rt-fondo) 12%,
      color-mix(in srgb, var(--rt-fondo) 70%, transparent) 48%,
      transparent
    );
  }

  /* La scorciatoia ai prodotti non convive con la pastiglia dei filtri:
     due pastiglie nello stesso punto, una sopra l'altra. Nel negozio non
     serve — i prodotti cominciano subito sotto il titolo, non dopo una
     testata con fotografia — e quindi qui la scorciatoia sparisce. */
  .rt-archivio--negozio .rt-scorciatoia { display: none; }
}

/* ── COME SI GUARDA LA MERCE ──────────────────────────────────────────────
   Un interruttore a piu' posizioni, non piu' comandi diversi, e il disegno
   deve dirlo prima di leggerli.

   SUL TELEFONO SONO DUE, E SENZA GUSCIO. Due bottoni dentro un riquadro
   grigio in fondo a una barra leggera erano il pezzo piu' pesante della
   riga, per la scelta meno importante che c'e' in pagina. Due segni, uno
   acceso e uno spento, bastano: la differenza fra i due si vede nella
   griglia un decimo di secondo dopo averli toccati.                   */

.rt-viste {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-lg);
  background: var(--rt-superficie-2);
}
.rt-viste button {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: calc(var(--rt-r-lg) - 3px);
  background: none;
  color: var(--rt-ink-3);
  cursor: pointer;
  transition: background var(--rt-transizione), color var(--rt-transizione);
}
.rt-viste button svg { width: 1.125rem; height: 1.125rem; }
.rt-viste button:hover { color: var(--rt-ink); }
.rt-viste button[aria-pressed="true"] {
  background: var(--rt-superficie);
  color: var(--rt-ink);
  box-shadow: var(--rt-ombra-1);
}
.rt-viste button:focus-visible {
  outline: 2px solid var(--rt-blu);
  outline-offset: 1px;
}

/* L'attributo hidden lo batte qualunque regola di display, e questa e' una
   di quelle: il gruppo nasce hidden perche' senza JavaScript le viste non
   cambiano niente. */
.rt-viste[hidden] { display: none; }

/* L'etichetta. Due segni da soli sono un indovinello: si capisce che sono
   un interruttore solo dopo averne premuto uno. Una parola davanti li
   presenta, e costa trentadue pixel su una riga che ne ha trecento. */
.rt-viste__et {
  align-self: center;
  margin-inline-end: var(--rt-s1);
  color: var(--rt-ink-3);
  font-size: var(--rt-t-xs);
}

/* LE VISTE CAMBIANO CON LO SCHERMO.
   In una colonna da 350px "tre colonne" e "quattro colonne" sono la stessa
   cosa, cioe' card da ottanta pixel: li' le scelte vere sono due — la
   griglia e la riga — e sono quelle che il telefono mostra. Sopra i 1100
   sono quattro e tre, perche' una card sola larga 1500px non e' una vista,
   e' una fotografia tirata al doppio della sua risoluzione. La riga vale a
   tutte le larghezze e non porta l'attributo.

   Lo script legge lo stesso data-rt-dove per sapere quali bottoni contano
   a questa larghezza: il CSS e il JavaScript non hanno due elenchi da
   tenere allineati. */
@media (max-width: 1099px) {
  .rt-viste [data-rt-dove="largo"] { display: none; }
  /* Senza guscio: due segni nudi, in fondo alla riga. */
  .rt-viste {
    gap: var(--rt-s1);
    padding: 0;
    border: 0;
    background: none;
  }
  .rt-viste button {
    width: 2rem;
    height: 2rem;
    border-radius: var(--rt-r-sm);
  }
  .rt-viste button[aria-pressed="true"] {
    background: var(--rt-blu-tenue);
    color: var(--rt-blu-scuro);
    box-shadow: none;
  }
}
/* Sotto i 380 la parola non ci sta: due comandi e una parola su una riga
   utile da 280 pixel sono 324, misurati. Il primo a cedere e' il nome
   della cosa meno importante. */
@media (max-width: 379px) {
  .rt-viste__et { display: none; }
}

@media (min-width: 1100px) {
  .rt-viste [data-rt-dove="stretto"] { display: none; }
  /* Sul monitor le viste sono un interruttore in un guscio, e un guscio
     si legge da se': la parola dentro ci starebbe come un'etichetta
     incollata sopra un interruttore. */
  .rt-viste__et { display: none; }
}

/* ── Griglia ──────────────────────────────────────────────────────────── */

ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--rt-s5);
}

/* DICIASSETTE PIXEL DI NIENTE SOTTO LA GRIGLIA.
   woocommerce.css scrive `.woocommerce ul.products { margin: 0 0 1em }`,
   due classi contro la classe sola qui sopra: il margine restava, e sotto
   l'ultima fila di card c'era una fascia vuota che sembrava una scelta.
   E' lo stesso difetto del margine sotto l'ordinamento, nello stesso
   foglio del plugin. Il selettore ha una classe in piu' E l'elemento,
   cosi' vince per specificita' e non per ordine di caricamento. */
.rt-archivio__griglia ul.products { margin: 0; }

/* SUL TELEFONO LE CARD STANNO PIU' STRETTE.
   Venti pixel fra due card da 350 sono una proporzione; fra due card da
   165 sono un corridoio, e in una griglia a due colonne il corridoio si
   vede piu' delle card. Otto bastano a dire che sono due riquadri
   separati. */
@media (max-width: 1099px) {
  .rt-archivio__griglia ul.products { gap: var(--rt-s2); }
}

/* IL RIQUADRO STA IN assets/css/card.css. Qui il <li> non e' piu' la card:
   e' la cella della griglia, e dentro ci sta .rt-vcard, la stessa della
   home. Le quaranta righe che c'erano disegnavano un secondo riquadro per
   la stessa merce — nome intero su tre righe, blocco prezzo alto quattro,
   un "Scegli la quantita'" in fondo — e fra la home e il negozio la stessa
   scatola di rotoli cambiava faccia a meta' strada.

   LA CELLA E' UN BLOCCO, non un flex. Da flex la card diventava un
   elemento flessibile largo quanto il suo contenuto: in griglia riempiva
   comunque, perche' la fotografia e' larga di suo, ma nella vista a righe
   ogni riga finiva dove finiva il nome — misurato: 1420, 1401, 1368 — e i
   prezzi, che dovrebbero cadere sulla stessa verticale, cadevano a tre
   verticali diverse. Da blocco la card prende la larghezza della cella,
   come fa in home, e l'altezza piena gliela da' la griglia. */
.rt-card-prod {
  display: block;
  min-width: 0;
}

/* ── 3. La scorciatoia ai prodotti ────────────────────────────────────────
   Una pastiglia in basso al centro, sopra la barra fissa, che porta alla
   griglia. Esiste solo sul telefono e solo finche' i prodotti sono fuori
   dallo schermo: su un monitor la griglia e' gia' nel primo schermo, e li'
   sarebbe una scorciatoia per arrivare dove si e' gia'.

   --rt-giu-h e' l'altezza della barra fissa, dichiarata da layout.css:
   si legge quella invece di riscrivere 64px, se no il giorno che la barra
   cambia altezza la pastiglia ci finisce sotto.                        */

.rt-scorciatoia { display: none; }

@media (max-width: 860px) {
  .rt-scorciatoia {
    position: fixed;
    left: 50%;
    bottom: calc(var(--rt-giu-h, 64px) + var(--rt-s4));
    z-index: 93;      /* sotto l'assistente (95) e il torna-su (94) */
    display: inline-flex;
    align-items: center;
    gap: var(--rt-s2);
    padding: var(--rt-s3) var(--rt-s6);
    border-radius: var(--rt-r-pill);
    background: var(--rt-blu);
    color: #fff;
    font-size: var(--rt-t-sm);
    font-weight: var(--rt-peso-forte);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--rt-ombra-cta, 0 8px 28px rgb(26 91 255 / 0.34));
    /* Nasce fuori posto e sale: la translate porta sia il centramento sia
       l'entrata, cosi' e' una proprieta' sola a muoversi. */
    opacity: 0;
    transform: translate(-50%, 10px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .rt-scorciatoia[hidden] { display: none; }
  .rt-scorciatoia.e-visibile {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
}

/* Lo stacco dalla testata appiccicata quando ci si scorre sopra: sta qui e
   non nel JavaScript, cosi' e' un numero solo. */
.rt-archivio__merce { scroll-margin-block-start: var(--rt-s5); }

@media (prefers-reduced-motion: reduce) {
  .rt-scorciatoia { transition: none; }
}

/* ── Il riquadro che chiude la fila ───────────────────────────────────────
   Ultima cella della griglia quando i prodotti non la riempiono. Tinto e
   senza ombra: e' un servizio, non merce, e non deve vincere sulle card
   che gli stanno accanto — se lo notasse per primo avremmo risolto il
   buco creando un problema peggiore.

   PERCHE' DUE COMPORTAMENTI
   Fino a 1700px il contenitore tiene tre colonne: con tre prodotti la fila
   e' gia' piena, il riquadro andrebbe a capo da solo e un riquadro solo in
   una fila e' il vuoto che doveva togliere. Li' prende tutta la riga e
   diventa una fascia, che e' una forma che sta in piedi. Da 1700 in su le
   colonne sono quattro, c'e' il buco, e il riquadro ci entra come quarta
   cella. La soglia non e' a occhio: le colonne sono
   floor((larghezza + 20) / 420), e a 1700px di finestra diventano quattro.
   ──────────────────────────────────────────────────────────────────────── */

.rt-tappo {
  /* UNA FOTOGRAFIA DI SFONDO, non un ritaglio appoggiato su un fondo
     tinto: e' la forma dei riferimenti: l'immagine riempie il riquadro e
     il testo ci sta sopra, in basso. */
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 22rem;
  border-radius: var(--rt-r-xl);
  overflow: hidden;
  isolation: isolate;
}

.rt-tappo__sfondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Il ritaglio tiene la CARTA CHE ESCE, non il fianco scuro della
     stampante: in un riquadro verticale il centro di un'immagine larga
     cade sul corpo grigio, che non dice niente. Scelto guardando quattro
     ritagli affiancati, non a naso. */
  object-position: 68% 26%;
}

/* IL VELO NON E' UN'OPINIONE, E NON SEGUE IL RIQUADRO: SEGUE IL TESTO.

   Prima era un gradiente sull'intera card. Misurato, teneva: 13,7:1 di
   contrasto medio su un monitor grande. Ma sul telefono la card e' larga
   e bassa, il testo sale dove il velo e' gia' sciolto, e l'1% dell'area
   sotto le lettere scendeva a 1,25:1 — illeggibile, e a occhio non si
   vedeva.

   Adesso il velo scuro sta DIETRO AL BLOCCO DI TESTO, quindi e' alto
   quanto il testo a qualunque larghezza, e sulla card resta solo una
   velatura leggera che tiene insieme l'immagine. Il contrasto non dipende
   piu' dalla proporzione del riquadro. */
.rt-tappo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(11 18 32 / 0.55) 0%,
    rgb(11 18 32 / 0.34) 55%,
    rgb(11 18 32 / 0.22) 100%);
}

.rt-tappo__testo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rt-s3);
  width: 100%;
  /* Il margine in cima e' piu' largo del resto: li' dentro ci sta la
     sfumatura che spegne il velo, e serve spazio perche' si spenga sopra
     la prima riga invece che addosso. */
  padding: var(--rt-s12) var(--rt-s6) var(--rt-s6);
  color: var(--rt-superficie);
  /* LA SFUMATURA FINISCE DOVE COMINCIA IL TESTO.
     Con le fermate in percentuale la sfumatura si allungava o si
     accorciava con l'altezza del blocco, e la prima riga — l'occhiello —
     finiva dove il velo era ancora al 30%: 1,92:1 di contrasto sul
     telefono, cioe' illeggibile. Misurato sotto i glifi veri, non sul
     riquadro che li contiene.
     Adesso il velo e' pieno fino al margine superiore e si spegne DENTRO
     quel margine, dove non c'e' niente da leggere: ogni lettera sta su
     fondo pieno a qualunque altezza del riquadro. */
  background: linear-gradient(
    to top,
    rgb(11 18 32 / 0.95) 0%,
    rgb(11 18 32 / 0.95) calc(100% - var(--rt-s12)),
    rgb(11 18 32 / 0) 100%);
}
.rt-tappo .rt-occhiello { color: color-mix(in srgb, var(--rt-superficie) 72%, transparent); }
.rt-tappo .rt-occhiello::before { background: var(--rt-blu-chiaro, #6A9BFF); }
.rt-tappo h3 {
  margin: 0;
  font-size: var(--rt-t-xl);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.018em;
  line-height: 1.15;
  text-wrap: balance;
}
.rt-tappo p {
  margin: 0;
  color: color-mix(in srgb, var(--rt-superficie) 82%, transparent);
  font-size: var(--rt-t-testo);
  line-height: 1.55;
}
.rt-tappo__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s2);
  margin-block-start: var(--rt-s2);
}

/* I DUE PULSANTI IN COLONNA NELLA CARD STRETTA.
   flex-wrap li manda a capo, ma non li fa STRINGERE: un elemento
   flessibile non scende sotto la sua larghezza minima finche' non gli si
   dice min-width:0. In due colonne da 171 pixel il riquadro ha 123 pixel
   di testo e i pulsanti ne volevano 155: sbordavano di trentadue, e
   overflow:hidden sul riquadro li tagliava invece di mostrarli. Trovato
   da controlla-tagli.js, non a occhio: dal di fuori il riquadro sembrava
   a posto.
   La @media sta DOPO la regola che sovrascrive, come vuole il foglio. */
@media (max-width: 620px) {
  .rt-tappo__azioni { flex-direction: column; align-items: stretch; }
  .rt-tappo__azioni > .rt-btn {
    min-width: 0;
    width: 100%;
    justify-content: center;
    padding-inline: var(--rt-s3);
    text-align: center;
  }
}

/* ── Paginazione ──────────────────────────────────────────────────────── */

.woocommerce-pagination ul {
  display: flex;
  gap: var(--rt-s2);
  list-style: none;
  padding: 0;
  margin: var(--rt-s10) 0 0;
  justify-content: center;
}
.woocommerce-pagination a,
.woocommerce-pagination span {
  display: grid;
  place-items: center;
  min-width: 40px; height: 40px;
  padding-inline: var(--rt-s3);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-md);
  background: var(--rt-superficie);
  color: var(--rt-ink-2);
  text-decoration: none;
  font-size: var(--rt-t-sm);
}
.woocommerce-pagination .current {
  background: var(--rt-blu);
  border-color: var(--rt-blu);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   LE PAGINE D'USO
   Il contenuto che sta sopra e sotto la griglia nelle categorie che ne
   hanno uno. Vedi inc/usi.php, dove c'e' anche il perche'.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Come si trova la misura ───────────────────────────────────────────
   Sta fra l'intestazione e la griglia, su fondo bianco: e' il blocco che
   risponde alla domanda con cui la gente arriva, e deve leggersi come
   una cosa diversa dal catalogo, non come la prima riga di prodotti. */

.rt-uso-aiuto {
  padding-block: var(--rt-s4) var(--rt-s10);
}
/* Il titolo non ha piu' bisogno di staccarsi dal fondo: lo fa il pannello.
   Quindi respira meno e il blocco e' piu' corto. */
.rt-uso-aiuto__pannello { --rt-dentro: 1; }
.rt-uso-aiuto__titolo {
  font-size: clamp(1.5rem, 3vw, var(--rt-t-2xl));
  letter-spacing: var(--rt-tracking-titolo);
  margin: 0 0 var(--rt-s5);
  text-wrap: balance;
}

/* ── La testa del pannello: domanda a sinistra, risposta a destra ─────────
   In colonna sola il titolo e i due paragrafi stavano incolonnati a
   sinistra e su un monitor largo restava mezzo pannello vuoto: la riga di
   testo non puo' allungarsi oltre la misura di lettura, quindi lo spazio
   in piu' non lo riempie il testo — lo deve riempire l'impaginazione.
   Due colonne: la domanda da una parte, la spiegazione dall'altra. */
.rt-uso-aiuto__testa { margin-block-end: var(--rt-s8); }

@media (min-width: 1100px) {
  .rt-uso-aiuto__testa {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  .rt-uso-aiuto__titolo { margin-block-end: 0; }
}

.rt-uso-aiuto__intro {
  /* La misura di lettura, non la larghezza del pannello: oltre i 68
     caratteri l'occhio perde il capo riga. */
  max-width: var(--rt-larghezza-testo);
  margin: 0;
  color: var(--rt-ink-2);
  font-size: var(--rt-t-testo);
}
.rt-uso-aiuto__intro p { margin: 0 0 var(--rt-s3); }
.rt-uso-aiuto__intro p:last-child { margin-bottom: 0; }

.rt-uso-aiuto__passi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  margin: 0 0 var(--rt-s8);
  padding: 0;
  list-style: none;
  counter-reset: none;
}
/* DENTRO UN PANNELLO BIANCO LE TESSERE NON POSSONO ESSERE BIANCHE.
   Erano tre card bianche con il bordo su fondo grigio; adesso il grigio e'
   dentro e il bianco fuori, quindi si invertono. Senza, i tre passi
   sparivano nel pannello e restava un muro di testo — che e' esattamente
   il difetto segnalato. */
.rt-uso-aiuto__passi li {
  padding: var(--rt-s6);
  border: 0;
  border-radius: var(--rt-r-lg);
  background: var(--rt-superficie-2);
}
/* Il numero e' un'etichetta, non un titolo: sta sopra, piccolo e azzurro,
   e serve solo a dire che c'e' un ordine fra i tre riquadri. */
.rt-uso-aiuto__n {
  display: block;
  margin-block-end: var(--rt-s3);
  color: var(--rt-blu);
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-label);
}
.rt-uso-aiuto__passi strong {
  display: block;
  margin-block-end: var(--rt-s2);
  font-size: var(--rt-t-lg);
  letter-spacing: -0.012em;
}
.rt-uso-aiuto__passi p {
  margin: 0;
  color: var(--rt-ink-2);
  font-size: var(--rt-t-testo);
  line-height: 1.6;
}

/* L'AZIONE DEL TERZO PASSO, DENTRO IL TERZO PASSO.
   Il bottone era sotto la fila dei tre riquadri e andava a capo da solo.
   Qui sta nella tessera che lo riguarda, appoggiato in fondo:
   margin-block-start:auto lo spinge sul bordo inferiore, cosi' le tre
   tessere restano alte uguali — sono celle di griglia, si stirano — e il
   bottone non sposta il testo degli altri due. */
.rt-uso-aiuto__passi li {
  display: flex;
  flex-direction: column;
}
.rt-uso-aiuto__azione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rt-s2) var(--rt-s4);
  margin-block-start: auto;
  padding-block-start: var(--rt-s5);
}
.rt-uso-aiuto__azione .rt-btn {
  /* Dentro una tessera il bottone a misura piena sarebbe sproporzionato. */
  padding: var(--rt-s3) var(--rt-s5);
  font-size: var(--rt-t-sm);
  background: var(--rt-superficie);
  border-color: transparent;
}
.rt-uso-aiuto__azione .rt-btn:hover { border-color: var(--rt-blu); }
.rt-uso-aiuto__nota {
  margin: 0;
  color: var(--rt-ink-3);
  font-size: var(--rt-t-xs);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .rt-uso-aiuto__intro {
  /* La misura di lettura, non la larghezza del pannello: oltre i 68
     caratteri l'occhio perde il capo riga. */
  max-width: var(--rt-larghezza-testo);
  margin: 0;
  color: var(--rt-ink-2);
  font-size: var(--rt-t-testo);
}
.rt-uso-aiuto__intro p { margin: 0 0 var(--rt-s3); }
.rt-uso-aiuto__intro p:last-child { margin-bottom: 0; }

.rt-uso-aiuto__passi { grid-template-columns: 1fr; }
  .rt-uso-aiuto { padding-block: var(--rt-s10) var(--rt-s8); }
}

/* ── Scegliere: la tabella e le domande, affiancate ─────────────────────
   Erano due blocchi in fila, uno sotto l'altro, e rispondevano alla stessa
   esigenza: decidere quale misura. Affiancati si leggono insieme, e chi ha
   un dubbio preciso lo trova senza scorrere due volte lo stesso argomento.

   Stanno in fondo perche' servono a chi NON ha gia' deciso: chi sa che
   misura gli serve ha comprato due schermate piu' su.                   */

/* Niente filetto in cima: a separare ci pensano i due pannelli, e un
   filetto piu' un bordo a due centimetri di distanza sono due righe che
   dicono la stessa cosa. */
.rt-uso-scelta {
  padding-block: 0 var(--rt-s16);
}
.rt-uso-scelta__dentro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .rt-uso-scelta__dentro { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* ── I FILTRI DELL'ARCHIVIO ───────────────────────────────────────────────
   Una colonna a sinistra sopra i 1100px, un riquadro sopra la griglia piu'
   stretto di cosi'.

   A SINISTRA E NON IN CIMA. In cima, sei gruppi di caselle sono quattrocento
   pixel di pagina prima della merce, e la merce e' la ragione per cui questa
   pagina esiste: chi sa gia' cosa vuole dovrebbe scorrere un modulo per
   arrivarci. Di fianco, i prodotti si vedono subito e il filtro sta li' per
   chi lo cerca.

   Sul telefono il pannello e' chiuso dentro un <details>: aperto occuperebbe
   due schermate intere prima del primo prodotto.                           */

.rt-archivio__con-filtri {
  display: grid;
  gap: var(--rt-s6);
}
/* LA COLONNA SI APRE SOLO QUANDO IL PANNELLO C'E' DAVVERO.
   Il modulo nasce hidden e lo accende faccette.js; senza JavaScript resta
   spento, e un "15rem" fisso lascerebbe un vuoto di 240px a sinistra dei
   prodotti. Peggio: hidden e' display:none, quindi il modulo esce dalla
   griglia e i prodotti finivano nella colonna da 15rem, larghi 45 pixel.
   La classe la mette lo script insieme al pannello, cosi' le due cose non
   possono esistere l'una senza l'altra. */
@media (min-width: 1100px) {
  .rt-archivio__con-filtri.e-filtri {
    /* 17rem e non 15: con 15 le voci lunghe — "Stampanti e fotocopiatrici",
       "Scommesse sportive" — andavano a capo sotto la casella, e un elenco
       in cui una voce su tre e' alta il doppio non si legge come un elenco. */
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    align-items: start;
  }
}

.rt-filtri {
  padding: var(--rt-s5);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-xl);
  background: var(--rt-superficie);
}
@media (min-width: 1100px) {
  /* Resta in vista mentre si scorrono i prodotti: un filtro che scappa in
     alto costringe a risalire per cambiare idea.

     SEDICI PIXEL DAL BORDO, non l'altezza della testata. La testata non
     resta attaccata mentre si scorre — e' sticky dentro <header>, che e'
     alto 197px, e una cosa appiccicata dentro una scatola di 197px scorre
     via con la scatola — quindi i 168 pixel che le tenevo liberi erano
     spazio vuoto sopra il pannello, con niente dentro.

     LA BARRA DI SCORRIMENTO NON STA PIU' SUL RIQUADRO. Con overflow-y qui
     la barra veniva disegnata sopra il bordo arrotondato e lo tagliava
     agli angoli di destra. Adesso scorre il corpo, che sta dentro, e il
     riquadro resta intero: overflow:hidden sul riquadro ritaglia anche la
     barra alla curva. */
  .rt-filtri {
    position: sticky;
    /* SOTTO LA BARRA, non a sedici pixel dal bordo.
       Erano sedici perche' la testata non restava: era appiccicata dentro
       <header>, alto 197 pixel, e se ne andava via con la scatola. Adesso
       resta davvero, e un pannello fermo a sedici pixel finiva per meta'
       dietro il vetro. La misura la scrive testata.js: e' l'altezza vera
       della barra, che sul telefono e sul monitor non e' la stessa. */
    top: calc(var(--rt-appiccica-h, 0px) + var(--rt-s4));
    max-height: calc(100vh - var(--rt-appiccica-h, 0px) - var(--rt-s8));
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .rt-filtri__corpo {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Lo spazio per la barra c'e' sempre, anche quando la barra non c'e':
       se no l'elenco salta di lato nel momento in cui compare. */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    /* Lo spazio fra l'elenco e la barra: senza, i conteggi finivano
       attaccati alla barra di scorrimento e sembravano tagliati. */
    padding-inline-end: var(--rt-s3);
  }
}

.rt-filtri__testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rt-s3);
  margin-block-end: var(--rt-s4);
}
/* ERA UN BOTTONE, ORA E' UN TITOLO.
   Apriva e chiudeva il corpo a fisarmonica, ed era il comando sbagliato in
   due modi: sopra i 1100px non aveva niente da aprire — il pannello e' la
   colonna — e sotto occupava una riga di pagina per dire "filtra" prima
   della merce. Il comando sta nella barra, questo e' il nome del
   pannello. */
.rt-filtri__et {
  display: flex;
  align-items: center;
  gap: var(--rt-s2);
  margin: 0;
  color: var(--rt-ink-3);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
}
.rt-filtri__quanti:not(:empty) {
  padding: 1px var(--rt-s2);
  border-radius: var(--rt-r-pill);
  background: var(--rt-blu);
  color: var(--rt-superficie);
  font-size: var(--rt-t-xs);
  letter-spacing: 0;
}

/* Le due uscite stanno insieme a destra. Con il solo space-between, il
   giorno in cui la croce c'e' (sul telefono) "Azzera" finiva in mezzo alla
   riga, fra il titolo e la croce, cioe' in nessun posto. */
.rt-filtri__pulisci { margin-inline-start: auto; }

/* La croce esiste solo nella scheda del telefono: in una colonna di pagina
   non c'e' niente da chiudere. */
.rt-filtri__chiudi {
  display: none;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie-2);
  color: var(--rt-ink-2);
  cursor: pointer;
  transition: background var(--rt-transizione), color var(--rt-transizione);
}
.rt-filtri__chiudi svg { width: 1.125rem; height: 1.125rem; }
.rt-filtri__chiudi:hover { background: var(--rt-linea); color: var(--rt-ink); }

/* Il piede della scheda: lo stesso discorso della croce. */
.rt-filtri__piede { display: none; }

.rt-filtri__pulisci {
  padding: 0;
  border: 0;
  background: none;
  color: var(--rt-blu);
  font: inherit;
  font-size: var(--rt-t-xs);
  cursor: pointer;
}
.rt-filtri__pulisci:hover { text-decoration: underline; text-underline-offset: 3px; }

.rt-filtri__gruppo {
  margin: 0 0 var(--rt-s5);
  padding: 0;
  border: 0;
}
.rt-filtri__gruppo:last-of-type { margin-block-end: 0; }
.rt-filtri__gruppo legend {
  padding: 0;
  margin-block-end: var(--rt-s2);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  color: var(--rt-ink);
}
.rt-filtri__gruppo ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt-filtri__voce {
  display: flex;
  align-items: center;
  gap: var(--rt-s2);
  /* Il bersaglio e' tutta la riga, non il quadratino: 44px di altezza sono
     la misura sotto la quale un dito sbaglia. */
  min-height: 2.25rem;
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-2);
  cursor: pointer;
}
.rt-filtri__voce input { flex: none; accent-color: var(--rt-blu); }
.rt-filtri__nome { flex: 1; min-width: 0; }
.rt-filtri__conta {
  flex: none;
  font-size: var(--rt-t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--rt-ink-3);
}

/* Una voce che porterebbe a zero resta leggibile ma smette di invitare:
   nasconderla farebbe ballare l'elenco a ogni spunta. */
.rt-filtri__voce.e-vuota { opacity: 0.4; cursor: default; }

.rt-filtri__esito {
  margin: var(--rt-s4) 0 0;
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-3);
}

/* ── LA SCHEDA DEI FILTRI, SUL TELEFONO ───────────────────────────────────
   Il pannello non sta in pagina: sale dal basso sopra la merce quando lo si
   chiede, e si chiude dove arriva il pollice.

   Non e' un vezzo: in pagina, aperto, e' alto 1161 pixel a 390 e il primo
   prodotto finiva a 1464 dall'alto, tre schermate di caselle prima della
   roba da comprare; chiuso a fisarmonica era comunque un riquadro che
   occupava una riga per dire "filtra". Dal basso non costa niente alla
   pagina e copre la merce solo mentre lo si usa.

   NON USA hidden. Il modulo lo accende lo script appena arriva (senza
   JavaScript le caselle non filtrano niente e non devono esserci), e se la
   scheda fosse chiusa con hidden non potrebbe scorrere su e giu': si
   accenderebbe di colpo a meta' schermo. Qui e' sempre in pagina e sempre
   fuori: translateY la tiene sotto il bordo, visibility la toglie dal
   percorso della tastiera e del lettore di schermo.

   dvh E NON vh: su un telefono vh e' calcolato con la barra degli
   indirizzi ritirata, quindi il piede della scheda — quello con il numero
   dei prodotti, cioe' il bottone che si cerca — finiva sotto il bordo
   visibile proprio al primo tocco.                                      */
@media (max-width: 1099px) {
  .rt-filtri {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    /* 125: sopra la testata appiccicata (100), sopra l'assistente (96), il
       torna-su (94) e la scorciatoia ai prodotti (93), che stanno tutti in
       basso e spunterebbero da dentro la scheda. Sotto il carrello a
       scomparsa (130), che e' l'unica cosa che ha il diritto di coprirla. */
    z-index: 125;
    display: flex;
    flex-direction: column;
    /* vh prima come ripiego: dove dvh non c'e', una scheda senza tetto
       sarebbe piu' alta dello schermo e il piede resterebbe irraggiungibile. */
    max-height: 86vh;
    max-height: 86dvh;
    padding: 0;
    border-width: 1px 0 0;
    border-radius: var(--rt-r-2xl) var(--rt-r-2xl) 0 0;
    box-shadow: var(--rt-ombra-3);
    overflow: hidden;
    transform: translateY(101%);
    visibility: hidden;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 320ms step-end;
  }
  .rt-filtri.e-aperto {
    transform: none;
    visibility: visible;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }

  /* La maniglia: due dita di spazio in cima e una barretta grigia. Dice
     "questa cosa si tira" senza scriverlo, ed e' il segno con cui una
     scheda dal basso si riconosce. */
  .rt-filtri__testa {
    position: relative;
    align-items: center;
    flex: none;
    padding: var(--rt-s6) var(--rt-s5) var(--rt-s4);
    margin-block-end: 0;
    border-block-end: 1px solid var(--rt-linea);
  }
  .rt-filtri__testa::before {
    content: "";
    position: absolute;
    inset-block-start: var(--rt-s3);
    inset-inline: 0;
    width: 2.5rem;
    height: 4px;
    margin-inline: auto;
    border-radius: var(--rt-r-pill);
    background: var(--rt-linea);
  }
  .rt-filtri__et {
    color: var(--rt-ink);
    font-size: var(--rt-t-lg);
    font-weight: var(--rt-peso-forte);
    letter-spacing: var(--rt-tracking-testa);
    text-transform: none;
  }
  .rt-filtri__chiudi { display: grid; }

  .rt-filtri__corpo {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--rt-s5);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* IL PIEDE DICE QUANTI PRODOTTI RESTANO, non "applica": il filtro e' gia'
     applicato mentre si spunta, e un bottone che chiede di confermare una
     cosa fatta fa pensare che fino a quel momento non fosse fatta. Chiude
     la scheda, e il numero sopra e' la risposta alla domanda per cui uno
     l'aveva aperta. */
  .rt-filtri__piede {
    display: block;
    flex: none;
    padding: var(--rt-s4) var(--rt-s5);
    /* Sui telefoni senza tasto casa la riga in fondo e' occupata dalla
       barra di sistema: il bottone ci finirebbe sotto. */
    padding-block-end: max(var(--rt-s4), env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--rt-linea);
  }
  .rt-filtri__mostra {
    display: block;
    width: 100%;
    padding: var(--rt-s3) var(--rt-s5);
    border: 0;
    border-radius: var(--rt-r-lg);
    background: var(--rt-blu);
    color: var(--rt-superficie);
    font: inherit;
    font-size: var(--rt-t-base);
    font-weight: var(--rt-peso-forte);
    cursor: pointer;
  }
  .rt-filtri__mostra:focus-visible {
    outline: 2px solid var(--rt-blu);
    outline-offset: 2px;
  }
}

/* Chi ha chiesto di non vedere animazioni non vuole nemmeno una scheda che
   sale: compare dov'e'. */
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .rt-filtri,
  .rt-filtri.e-aperto { transition: none; }
}

/* ── IL VELO SOTTO LA SCHEDA ──────────────────────────────────────────────
   E' un <button>: chi tocca fuori dalla scheda per chiuderla sta premendo
   un comando, e un <div> con un listener non lo e' per la tastiera. Porta
   tabindex="-1" perche' la stessa cosa la fanno la croce e il bottone del
   piede, che sono dentro la scheda e si trovano prima.                  */

.rt-foglio-velo {
  position: fixed;
  inset: 0;
  z-index: 124;
  padding: 0;
  border: 0;
  background: var(--rt-velo);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  cursor: pointer;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-foglio-velo[hidden] { display: none; }
.rt-foglio-velo.e-aperto { opacity: 1; }

/* Sopra i 1100 il pannello e' una colonna in pagina: non c'e' niente da
   velare, e il velo non deve nemmeno poter essere acceso per sbaglio da un
   ridimensionamento della finestra. */
@media (min-width: 1100px) {
  .rt-foglio-velo { display: none; }
}

/* ── LA VISTA A RIGHE ─────────────────────────────────────────────────────
   Un prodotto per riga, fotografia a sinistra e tutto il resto a destra.
   Serve a chi sa gia' cosa cerca: i nomi incolonnati si confrontano con
   l'occhio e i prezzi stanno tutti sulla stessa verticale.

   NON E' UNA CARD DIVERSA: e' la stessa card girata. Un secondo modello
   vorrebbe dire due pezzi da tenere allineati, e il giorno che si aggiunge
   un dato lo si aggiunge in uno solo.

   La card si gira cambiando la direzione del corpo, non ricostruendola:
   sopra i 1100 il corpo passa da colonna a riga, il nome si prende lo
   spazio e il prezzo ha una larghezza fissa. E' quella larghezza fissa —
   non una frazione — a far cadere i prezzi di righe diverse sulla stessa
   verticale.                                                             */

.rt-archivio__griglia[data-rt-vista="righe"] ul.products {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rt-s4);
}

.rt-archivio__griglia[data-rt-vista="righe"] .rt-vcard {
  display: grid;
  /* 9,5rem e non 7: la fotografia era il pezzo piu' piccolo di una riga
     alta centoquaranta pixel, e su un prodotto che si sceglie guardandolo
     e' il pezzo sbagliato da rimpicciolire. */
  grid-template-columns: 9.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--rt-s5);
  padding: var(--rt-s4);
}
/* Una riga non si solleva al passaggio del mouse: in una lista di venti
   righe sarebbe un sussulto ogni volta che il puntatore attraversa. */
.rt-archivio__griglia[data-rt-vista="righe"] .rt-vcard:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--rt-blu) 40%, var(--rt-linea));
  box-shadow: var(--rt-ombra-1);
}
.rt-archivio__griglia[data-rt-vista="righe"] .rt-vcard__img {
  border-radius: var(--rt-r-lg);
}
/* IL BIANCO INTORNO ALLO SCATTO STA DENTRO IL FILE, e da qui non si toglie.
   Avevo provato a ingrandire la fotografia di un sesto per farlo uscire dal
   riquadro. Tagliava: gli scatti di catalogo hanno la fascia diagonale con
   la misura nell'angolo in alto a destra, e qualunque ritaglio centrato se
   la mangia — si leggeva "0x80" invece di "80x80". Fra un margine bianco
   che si nota e una misura che non si legge, vince il margine.

   La fotografia si e' fatta piu' grande allargando il riquadro, che e' la
   cosa che si puo' fare senza togliere niente. Il bianco sparisce davvero
   solo riesportando gli scatti piu' stretti: e' lavoro di catalogo, non di
   foglio di stile. */
/* Il corpo qui non e' il fondo di una card: e' la seconda colonna di una
   riga, quindi niente rientro suo e niente ancora che spinga il prezzo in
   fondo — in fondo a cosa, in una riga alta centododici pixel. */
.rt-archivio__griglia[data-rt-vista="righe"] .rt-vcard__corpo {
  flex: initial;
  align-items: flex-start;
  padding: 0;
  text-align: start;
}
.rt-archivio__griglia[data-rt-vista="righe"] .rt-vcard__prezzo {
  margin-block-start: 0;
  padding-block-start: 0;
  min-height: 0;
}

/* Sopra i 1100 la riga diventa una tabella: misura, nome, voto a sinistra,
   prezzo e bollo incolonnati a destra, cosi' gli occhi scendono su una
   verticale sola invece di rincorrere il prezzo in fondo a ogni riga. */
@media (min-width: 1100px) {
  .rt-archivio__griglia[data-rt-vista="righe"] .rt-vcard__corpo {
    flex-direction: row;
    align-items: center;
    gap: var(--rt-s5);
  }
  .rt-archivio__griglia[data-rt-vista="righe"] .rt-vcard__misura { flex: none; }
  /* NELLE RIGHE IL NOME NON SI TAGLIA.
     In griglia il taglio serve a tenere le card alte uguali. In una lista
     non c'e' niente da tenere allineato in verticale, e il nome e'
     l'informazione: e' la parte che distingue un prodotto dall'altro. */
  .rt-archivio__griglia[data-rt-vista="righe"] .rt-vcard__nome {
    flex: 1;
    min-width: 0;
    font-size: var(--rt-t-base);
  }
  .rt-archivio__griglia[data-rt-vista="righe"] .rt-vcard .rt-voto { flex: none; }
  .rt-archivio__griglia[data-rt-vista="righe"] .rt-vcard__prezzo {
    flex: none;
    width: 13rem;
    text-align: end;
  }
  .rt-archivio__griglia[data-rt-vista="righe"] .rt-vcard .rt-migliore { flex: none; }
}

/* Quando non resta niente, la griglia non deve sembrare rotta. */
.rt-archivio__griglia ul.products.e-vuoto::after {
  content: "Nessun prodotto con questi filtri. Togline uno e riprova.";
  grid-column: 1 / -1;
  padding: var(--rt-s10) var(--rt-s5);
  border: 1px dashed var(--rt-linea);
  border-radius: var(--rt-r-xl);
  color: var(--rt-ink-3);
  text-align: center;
}

/* ── DENTRO LA SCHEDA LE VOCI SONO PASTIGLIE ──────────────────────────────
   In colonna, sei gruppi da sei voci sono milleduecento pixel da scorrere
   dentro una scheda alta ottocento: si scorre a lungo per vedere poco, e
   i quadratini da spuntare sono il bersaglio piu' piccolo che esista su
   un telefono. A pastiglie ogni gruppo sta su due o tre righe e si vede
   tutto insieme, e il bersaglio e' la pastiglia intera.

   La casella c'e' ancora, solo non si vede: resta raggiungibile con la
   tastiera e resta quello che il modulo legge. Una pastiglia fatta di
   <div> e listener sarebbe una casella da riscrivere da capo.

   Qui c'era anche un padding sul pannello: adesso lo portano la testa, il
   corpo e il piede, perche' il corpo deve poter scorrere fin sotto il
   bordo e un padding sulla scheda gli metterebbe una fascia morta sotto. */
@media (max-width: 1099px) {

  /* Ogni gruppo e' una sezione con il suo filetto sopra: senza, sei
     elenchi di pastiglie uno sotto l'altro diventano un unico mucchio in
     cui non si capisce dove finisce una domanda e comincia l'altra. */
  /* IL FILETTO STA SOTTO, non sopra.
     Un <legend> si disegna dentro il BORDO ALTO del suo fieldset e lo
     interrompe: con border-block-start il filetto usciva da destra del
     titolo come una riga tirata attraverso il gruppo. Provato a
     disegnarlo con un pseudo-elemento a inset-block-start:0, e finiva
     sotto il titolo invece che sopra, perche' il legend sta FUORI dal
     riquadro del contenuto. Il bordo basso non ha nessuno dei due
     problemi: e' pieno, e separa le stesse due cose. */
  .rt-filtri__gruppo {
    margin: 0;
    padding-block-end: var(--rt-s5);
  }
  .rt-filtri__gruppo + .rt-filtri__gruppo { padding-block-start: var(--rt-s5); }
  .rt-filtri__gruppo:not(:last-of-type) {
    border-block-end: 1px solid var(--rt-linea);
  }
  .rt-filtri__gruppo:last-of-type { padding-block-end: 0; }
  .rt-filtri__gruppo:last-of-type { padding-block-end: 0; }
  .rt-filtri__gruppo legend {
    margin-block-end: var(--rt-s3);
    font-size: var(--rt-t-base);
    letter-spacing: var(--rt-tracking-testa);
  }

  .rt-filtri__gruppo ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rt-s2);
  }

  .rt-filtri__voce {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--rt-s2);
    /* 2,5rem: quaranta pixel sono la misura sotto la quale un dito
       sbaglia, e una pastiglia e' tutta bersaglio. */
    min-height: 2.5rem;
    padding: var(--rt-s2) var(--rt-s4);
    border: 1px solid var(--rt-linea);
    border-radius: var(--rt-r-pill);
    background: var(--rt-superficie);
    color: var(--rt-ink-2);
    font-size: var(--rt-t-sm);
    transition: border-color var(--rt-transizione),
                background var(--rt-transizione),
                color var(--rt-transizione);
  }
  /* Non display:none: cosi' sparisce anche dal percorso della tastiera. */
  .rt-filtri__voce input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .rt-filtri__voce:has(input:checked) {
    border-color: var(--rt-blu);
    background: var(--rt-blu-tenue);
    color: var(--rt-blu-scuro);
    font-weight: var(--rt-peso-medio);
  }
  .rt-filtri__voce:has(input:focus-visible) {
    outline: 2px solid var(--rt-blu);
    outline-offset: 2px;
  }
  .rt-filtri__nome { flex: 0 1 auto; }
  .rt-filtri__conta {
    color: inherit;
    opacity: 0.6;
  }
  /* Una voce che porterebbe a zero resta leggibile ma smette di
     invitare: nasconderla farebbe ballare l'elenco a ogni tocco. */
  .rt-filtri__voce.e-vuota {
    opacity: 1;
    border-style: dashed;
    color: var(--rt-ink-3);
  }
}

/* ── La tabella delle misure ─────────────────────────────────────────────
   Era un elenco di pastiglie con dentro la sola misura. Una pastiglia dice
   "57x30" e basta: non dice se e' piu' o meno carta di quella accanto, che
   e' l'unica cosa che uno sta cercando di capire. Una tabella mette le
   misure una sotto l'altra con il metraggio e le ricevute nella stessa
   colonna, e il confronto si fa con gli occhi invece che a memoria.

   E' una tabella vera e non una griglia di <div>: le intestazioni di riga e
   di colonna sono il modo in cui chi legge con la voce capisce che "200" e'
   il numero di ricevute del 57x30 e non un numero per aria.            */

/* IL RIQUADRO SI MISURA DA SE'.
   La soglia non puo' essere la finestra: a 1024px questa tabella sta in una
   colonna da 406px, piu' stretta di quella che ha a 561px a tutta pagina.
   Con una @media sulla finestra la tabella usciva dal riquadro a 561, 580 e
   1024 — tre larghezze diverse, tutte sopra la soglia "telefono". Qui chi
   decide e' lo spazio che la tabella ha davvero. */
.rt-uso-tabella {
  container-type: inline-size;
  container-name: rt-tabella;
}

.rt-uso-tabella h2 {
  font-size: clamp(1.5rem, 3vw, var(--rt-t-2xl));
  letter-spacing: var(--rt-tracking-titolo);
  margin-block-end: var(--rt-s3);
}
.rt-uso-tabella__intro {
  margin-block-end: var(--rt-s6);
  color: var(--rt-ink-2);
  font-size: var(--rt-t-testo);
}

.rt-uso-tabella table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rt-t-testo);
  font-variant-numeric: tabular-nums;
}
.rt-uso-tabella th,
.rt-uso-tabella td {
  padding-block: var(--rt-s4);
  padding-inline-end: var(--rt-s6);
  text-align: start;
  border-block-end: 1px solid var(--rt-linea);
  vertical-align: baseline;
}
.rt-uso-tabella thead th {
  padding-block: var(--rt-s2);
  color: var(--rt-ink-3);
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
}
.rt-uso-tabella thead th small {
  display: block;
  font-size: 1em;
  font-weight: var(--rt-peso-normale);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}
/* La misura e' il dato su cui corre l'occhio: piu' grande del resto e con
   il carattere dei numeri, lo stesso delle cifre della fascia carta. */
.rt-uso-tabella tbody th {
  font-family: var(--rt-font-dati);
  font-size: var(--rt-t-lg);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.02em;
  color: var(--rt-ink);
  white-space: nowrap;
}
.rt-uso-tabella tbody td { color: var(--rt-ink-2); }
.rt-uso-tabella tbody tr:last-child th,
.rt-uso-tabella tbody tr:last-child td { border-block-end: 0; }

/* La colonna del collegamento si stringe sul suo contenuto e tutto
   l'avanzo va alle altre, cosi' il "Vedi" resta appoggiato al bordo destro
   invece di galleggiare in mezzo.
   Prima il 99% stava sulla terza colonna, scelta per posizione: adesso che
   le colonne cambiano da categoria a categoria — il foro c'e' solo per gli
   adesivi, gli scontrini solo dove si contano — la terza colonna non e'
   piu' sempre la stessa cosa. */
.rt-uso-tabella__vai { width: 1%; white-space: nowrap; }

.rt-uso-tabella__vai { padding-inline-end: 0; text-align: end; }
.rt-uso-tabella__vai a {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  color: var(--rt-blu);
  font-weight: var(--rt-peso-forte);
  text-decoration: none;
  white-space: nowrap;
}
.rt-uso-tabella__vai a span[aria-hidden] { transition: transform var(--rt-transizione); }
.rt-uso-tabella__vai a:hover span[aria-hidden],
.rt-uso-tabella__vai a:focus-visible span[aria-hidden] { transform: translateX(3px); }

.rt-uso-tabella__nota {
  margin: var(--rt-s5) 0 0;
  color: var(--rt-ink-3);
  font-size: var(--rt-t-testo);
  line-height: 1.55;
}

/* SUL TELEFONO NON E' PIU' UNA TABELLA: E' UNA SCHEDA PER MISURA.
   Prima qui si nascondeva la colonna delle ricevute, e con quattro colonne
   bastava. Non basta piu': le colonne le decide la categoria, e per gli
   adesivi da bilancia sono sei — misura, metraggio, carta, foro, spessore,
   collegamento. Misurate a 390px: tabella larga 521px in un riquadro da
   349, con la pagina che scorreva di lato di 95px e la colonna del
   collegamento fuori dallo schermo, irraggiungibile.
   Togliere un'altra colonna avrebbe retto fino al prossimo attributo. Una
   scheda per misura regge qualunque numero di colonne, e il confronto fra
   misure sul telefono si fa comunque scorrendo, non guardando di fianco.
   I ruoli ARIA che tengono in piedi le intestazioni sono scritti nel
   markup, in parti/archivio-prodotti.php.

   La soglia e' 580px di spazio interno: la tabella piu' larga del negozio
   (bilance, sei colonne) ne chiede 535, e 45px di margine coprono un
   numero in piu' senza far scattare le schede dove la tabella ci starebbe. */
@container rt-tabella (max-width: 580px) {
  .rt-uso-tabella table,
  .rt-uso-tabella tbody,
  .rt-uso-tabella tr,
  .rt-uso-tabella tbody th,
  .rt-uso-tabella tbody td {
    display: block;
    width: auto;
  }

  /* L'intestazione di colonna non serve piu' a nessuno: ogni cella si
     porta dietro la sua con data-et. */
  .rt-uso-tabella thead { display: none; }

  .rt-uso-tabella tbody tr {
    padding-block: var(--rt-s4);
    border-block-end: 1px solid var(--rt-linea);
  }
  .rt-uso-tabella tbody tr:last-child {
    padding-block-end: 0;
    border-block-end: 0;
  }

  /* La misura e' il titolo della scheda. */
  .rt-uso-tabella tbody th {
    padding: 0 0 var(--rt-s2);
    border-block-end: 0;
    white-space: normal;
  }

  /* Etichetta a sinistra, valore a destra: la stessa lettura della
     tabella, girata di novanta gradi. */
  .rt-uso-tabella tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rt-s4);
    padding-block: var(--rt-s1);
    padding-inline: 0;
    border-block-end: 0;
  }
  .rt-uso-tabella tbody td::before {
    content: attr(data-et);
    flex: none;
    color: var(--rt-ink-3);
    font-size: var(--rt-t-xs);
    font-weight: var(--rt-peso-forte);
    letter-spacing: var(--rt-tracking-label);
    text-transform: uppercase;
  }

  /* Le ricevute, che la tabella stretta nascondeva, qui restano: in
     colonna lo spazio verticale non manca, ed e' il numero che fa capire
     quanto dura un rotolo. La classe .rt-col-scontrini non serve piu' a
     nasconderle, resta a dire quale colonna e'. */

  /* Il collegamento non e' un dato con un'etichetta: e' l'azione della
     scheda, e sta da solo sotto i suoi numeri. */
  .rt-uso-tabella__vai {
    padding-block-start: var(--rt-s3);
    text-align: start;
  }
  .rt-uso-tabella tbody td.rt-uso-tabella__vai::before { content: none; }
}

/* La misura delle domande la decide --rt-t-testo, come ogni altro testo di
   lettura. Qui c'era una @media che la riduceva, scritta PRIMA della regola
   che doveva sovrascrivere: a parita' di specificita' vince quella scritta
   dopo, quindi non ha mai fatto niente. E' la trappola che sta scritta in
   CLAUDE.md, e ci sono cascato lo stesso. */

@media (prefers-reduced-motion: reduce) {
  .rt-uso-tabella__vai a span[aria-hidden] { transition: none; }
}

/* ── Le domande ────────────────────────────────────────────────────────
   <details> e non un accordion scritto a mano: si apre senza JavaScript,
   si cerca con Ctrl+F anche da chiuso nei browser recenti, e il lettore
   di schermo sa gia' che cos'e'. */

.rt-uso-faq { min-width: 0; }
.rt-uso-faq h2 {
  font-size: clamp(1.5rem, 3vw, var(--rt-t-2xl));
  letter-spacing: var(--rt-tracking-titolo);
  margin-block-end: var(--rt-s6);
}
.rt-uso-faq__elenco { max-width: var(--rt-larghezza-testo); }
/* L'ultima domanda non porta il filetto: dentro un pannello sarebbe una
   riga a un centimetro dal bordo, cioe' due separazioni per una. */
.rt-uso-faq details:last-child { border-block-end: 0; }
.rt-uso-faq details:last-child p { padding-block-end: 0; }
.rt-uso-faq details {
  border-block-end: 1px solid var(--rt-linea);
}
.rt-uso-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s4);
  padding-block: var(--rt-s5);
  /* Stessa misura del testo di lettura: a distinguere la domanda dalla
     risposta ci pensano il peso e il segno +, non due pixel in piu'. */
  font-size: var(--rt-t-testo);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.rt-uso-faq summary::-webkit-details-marker { display: none; }
/* Il segno + che diventa −: disegnato col testo invece che con un'icona,
   cosi' segue il colore e la dimensione della riga senza altre regole. */
.rt-uso-faq summary::after {
  content: "+";
  flex: none;
  color: var(--rt-blu);
  font-size: var(--rt-t-xl);
  line-height: 1;
  transition: transform var(--rt-transizione);
}
.rt-uso-faq details[open] summary::after { content: "−"; }
.rt-uso-faq details p {
  margin: 0;
  padding-block-end: var(--rt-s6);
  color: var(--rt-ink-2);
  font-size: var(--rt-t-testo);
  line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
  .rt-uso-faq summary::after { transition: none; }
}