/* ============================================================================
   Componenti — i pezzi riutilizzabili del sito
   ========================================================================= */

/* ── Bottoni ─────────────────────────────────────────────────────────────
   Restano blu ovunque, in ogni categoria e in ogni pagina di segmento.
   E' la regola che permette al cliente di imparare in un secondo dove si
   clicca. Gli accenti di segmento non entrano mai qui.                     */

.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-s2);
  padding: var(--rt-s4) var(--rt-s6);
  border: 0;
  border-radius: var(--rt-r-lg);
  background: var(--rt-blu);
  color: #fff;
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.008em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--rt-transizione), transform var(--rt-transizione);
}
.rt-btn:hover { background: var(--rt-blu-scuro); color: #fff; }
.rt-btn:active { transform: scale(0.985); }
.rt-btn--largo { width: 100%; }

/* Le icone di rt_icona() escono senza width e height: e' voluto, cosi'
   seguono la misura che gli da' chi le usa. Dentro un bottone pero', senza
   una misura, il browser applica il suo default di 300x150 e il bottone
   diventa un quadrato con il testo a capo tre volte — e' esattamente quello
   che faceva "Stampa il righello". :not([width]) e non "svg": le icone che
   la misura ce l'hanno nell'attributo se la tengono. */
.rt-btn svg:not([width]) { flex: none; width: 1.15em; height: 1.15em; }

/* I due bottoni su una fotografia scura: il pieno bianco con il testo
   scuro, il secondario con il solo contorno. Non il blu su scuro, che su
   una fotografia non si stacca abbastanza — e non il grigio del fantasma,
   che li' dentro sparisce. */
.rt-btn--chiaro {
  background: var(--rt-superficie);
  color: var(--rt-ink);
}
.rt-btn--chiaro:hover {
  background: var(--rt-superficie);
  color: var(--rt-blu);
}
.rt-btn--contorno {
  background: transparent;
  color: var(--rt-superficie);
  border: 1.5px solid color-mix(in srgb, var(--rt-superficie) 55%, transparent);
}
.rt-btn--contorno:hover {
  background: color-mix(in srgb, var(--rt-superficie) 14%, transparent);
  border-color: var(--rt-superficie);
  color: var(--rt-superficie);
}

.rt-btn--fantasma {
  background: transparent;
  color: var(--rt-blu);
  border: 1.5px solid var(--rt-linea);
}
.rt-btn--fantasma:hover {
  background: var(--rt-blu-tenue);
  border-color: var(--rt-blu);
  color: var(--rt-blu);
}

/* Dentro una card il bottone a piena misura sarebbe sproporzionato. */
.rt-btn--piccolo {
  padding: var(--rt-s2) var(--rt-s4);
  font-size: var(--rt-t-sm);
  align-self: flex-start;
}

/* ── "Miglior prezzo online" ──────────────────────────────────────────────
   Non e' un fregio: e' l'unica riga della scheda che dica perche' comprare
   QUI.

   Fondo bianco e un bordo che gira. Il bianco la stacca dal riquadro
   azzurrino del prezzo senza aggiungere un terzo colore; il bordo in
   movimento e' l'unica cosa animata di quella colonna, e per questo la si
   nota senza che debba essere grande o gridata.

   COME E' FATTO
   -------------
   Due fondi sovrapposti: il bianco ritagliato sulla casella interna
   (padding-box) e il gradiente conico su quella esterna (border-box). Il
   bordo trasparente lascia vedere il secondo solo sul suo spessore, e
   l'angolo del conico e' una proprieta' registrata — quindi animabile.
   Dove @property non c'e', l'angolo resta fermo e il bordo e' un
   gradiente immobile: bello lo stesso, solo senza giro.                 */

@property --rt-giro {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.rt-migliore {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px var(--rt-s4);
  border: 1.5px solid transparent;
  border-radius: var(--rt-r-pill);
  background:
    linear-gradient(var(--rt-superficie), var(--rt-superficie)) padding-box,
    conic-gradient(
      from var(--rt-giro),
      color-mix(in srgb, var(--rt-blu) 22%, transparent) 0deg,
      var(--rt-blu) 60deg,
      #27EFB2 130deg,
      color-mix(in srgb, var(--rt-blu) 18%, transparent) 210deg,
      color-mix(in srgb, var(--rt-blu) 18%, transparent) 300deg,
      color-mix(in srgb, var(--rt-blu) 22%, transparent) 360deg
    ) border-box;
  color: var(--rt-blu-scuro);
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-forte);
  letter-spacing: 0.04em;
  line-height: 1.45;
  text-transform: uppercase;
  white-space: nowrap;
  animation: rt-giro 4.5s linear infinite;
}

@keyframes rt-giro {
  to { --rt-giro: 360deg; }
}

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

/* ── Segnaposto per le immagini ───────────────────────────────────────────
   Dichiarati e delle proporzioni definitive: sostituirli sara' un
   caricamento, non un rifacimento del layout.                             */

.rt-segnaposto {
  display: grid;
  place-content: center;
  gap: var(--rt-s1);
  text-align: center;
  border: 1.5px dashed color-mix(in srgb, var(--rt-blu) 30%, var(--rt-linea));
  border-radius: var(--rt-r-xl);
  background:
    repeating-linear-gradient(135deg,
      transparent, transparent 11px,
      color-mix(in srgb, var(--rt-blu) 4%, transparent) 11px,
      color-mix(in srgb, var(--rt-blu) 4%, transparent) 22px),
    var(--rt-superficie-2);
  color: var(--rt-ink-3);
  padding: var(--rt-s6);
}
.rt-segnaposto span { font-size: var(--rt-t-sm); font-weight: var(--rt-peso-medio); color: var(--rt-ink-2); }
.rt-segnaposto small { font-family: var(--rt-font-dati); font-variant-numeric: tabular-nums; font-size: var(--rt-t-xs); }
.rt-segnaposto--quadro { aspect-ratio: 1 / 1; }
.rt-segnaposto--verticale { aspect-ratio: 4 / 5; }


/* ── Blocco prezzo ───────────────────────────────────────────────────────
   La regola decisa: il netto e' protagonista con la dicitura +IVA, il lordo
   e' sempre presente e leggibile subito sotto. L'interruttore inverte i due
   su tutto il sito.

   Nessuna ricarica e nessuna chiamata: entrambi i valori sono gia' nel
   documento e l'attributo data-iva sull'elemento <html> decide quale dei
   due e' grande. Cosi' il passaggio e' istantaneo e funziona anche con una
   pagina servita dalla cache.                                              */

.rt-prezzo {
  display: flex;
  flex-direction: column;
  gap: var(--rt-s1);
}

/* La riga di testa: l'occhiello a sinistra, il sigillo a destra. Sono le
   due cose che inquadrano il prezzo e nessuna delle due e' il prezzo:
   stanno su una riga loro, sopra, e non si mescolano ai numeri. */
.rt-prezzo__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s4);
  margin-block-end: var(--rt-s1);
  flex-wrap: wrap;
}

.rt-prezzo__da {
  font-size: var(--rt-t-xs);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-ink-3);
  /* Tre parole che non vanno mai a capo.

     Senza questo, nella colonna stretta del telefono la pastiglia
     "Miglior prezzo online" si prendeva il suo spazio e all'occhiello
     restavano novanta pixel: "A PARTIRE DA" usciva su tre righe, una
     parola per riga, alte quanto il prezzo che dovevano introdurre.
     Non andando a capo e' la pastiglia a scendere sotto, che e' il
     male minore e succede solo dove serve davvero. */
  white-space: nowrap;
}

.rt-prezzo__riga {
  display: flex;
  align-items: baseline;
  gap: var(--rt-s2);
  flex-wrap: wrap;
}

/* La misura del prezzo grande e' una variabile e non un numero scritto
   due volte. Passando da IVA esclusa a inclusa i due blocchi si scambiano
   di ruolo, e con due clamp diversi il prezzo cambiava dimensione sotto
   gli occhi: sembrava un difetto di caricamento. Chi vuole un prezzo piu'
   piccolo in un punto — la colonna d'acquisto della scheda — ridefinisce
   questa, e si muovono tutti e due insieme. */
.rt-prezzo { --rt-prezzo-grande: clamp(2rem, 5vw, var(--rt-t-3xl)); }

.rt-prezzo__valore {
  font-size: var(--rt-prezzo-grande);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--rt-blu);
}
/* "+IVA" e' un'annotazione sul prezzo, non un secondo prezzo: grande e
   blu come il numero gli toglieva peso invece di darglielo. */
.rt-prezzo__iva {
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  color: var(--rt-ink-3);
}
.rt-prezzo__unita {
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-2);
}

.rt-prezzo__secondario {
  margin-top: var(--rt-s2);
  padding-top: var(--rt-s2);
  border-top: 1px solid var(--rt-linea);
  font-size: var(--rt-t-sm);
  color: var(--rt-ink);
  display: flex;
  align-items: baseline;
  gap: var(--rt-s2);
  flex-wrap: wrap;
}
.rt-prezzo__secondario .rt-prezzo__num {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-weight: var(--rt-peso-medio);
}

/* ── Lo scambio IVA, dovunque ───────────────────────────────────────────
   Due numeri nel documento, uno visibile per volta. Vale per gli
   scaglioni, per la barra d'acquisto e per qualunque cosa nasca domani:
   basta mettere i due valori in .rt-iva-netto e .rt-iva-lordo e lo
   scambio funziona da solo, senza una riga di JavaScript e anche su una
   pagina servita dalla cache.                                           */

.rt-iva-lordo { display: none; }
html[data-iva="lordo"] .rt-iva-netto { display: none; }
html[data-iva="lordo"] .rt-iva-lordo { display: inline; }

/* Qui c'erano otto regole che, in modalita' IVA inclusa, scambiavano di
   posto e di dimensione il blocco grande e quello piccolo. Non ci sono
   piu', e non e' una semplificazione: e' la correzione.

   Scambiare i blocchi vuol dire che il prezzo CAMBIA RIGA a ogni clic
   sull'interruttore — e appena nel riquadro e' comparso qualcos'altro
   accanto (la pastiglia del miglior prezzo) non c'e' stato verso di
   tenerlo fermo. Adesso le due caselle restano dove sono e dentro
   ciascuna ci sono tutti e due i valori: cambia il contenuto, non il
   posto. Lo scambio lo fanno le due righe qui sopra, e basta. */

/* ── Interruttore IVA ────────────────────────────────────────────────── */

.rt-iva {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  flex-wrap: wrap;
}
.rt-iva__etichetta {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-ink-3);
}
.rt-iva__gruppo {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--rt-superficie-2);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-pill);
}
.rt-iva__btn {
  padding: var(--rt-s2) var(--rt-s4);
  border: 0;
  border-radius: var(--rt-r-pill);
  background: transparent;
  color: var(--rt-ink-3);
  font-size: var(--rt-t-xs);
  /* Forte e non medio: e' un interruttore che decide come si leggono TUTTI
     i prezzi della pagina, e a peso medio su tredici pixel la voce spenta
     si leggeva come un'etichetta invece che come la seconda scelta. */
  font-weight: var(--rt-peso-forte);
  cursor: pointer;
  transition: background var(--rt-transizione), color var(--rt-transizione);
}
.rt-iva__btn[aria-pressed="true"] {
  background: var(--rt-blu);
  color: #fff;
}

/* ── Pill informative ───────────────────────────────────────────────── */

.rt-pill {
  display: inline-flex;
  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-pill);
  background: var(--rt-superficie);
  font-size: var(--rt-t-sm);
  color: var(--rt-ink);
}
.rt-pill--dati { font-family: var(--rt-font-dati); font-variant-numeric: tabular-nums; font-size: var(--rt-t-xs); }
.rt-pill--blu { background: var(--rt-blu); border-color: var(--rt-blu); color: #fff; }
.rt-pill--disponibile::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rt-ok);
  flex: none;
}
.rt-pill__nota { font-family: var(--rt-font-dati); font-variant-numeric: tabular-nums; font-size: 0.6875rem; color: var(--rt-ink-3); }
.rt-pill--blu .rt-pill__nota { color: #DBE6FF; }

/* ── Risparmio ──────────────────────────────────────────────────────── */

.rt-risparmio {
  display: inline-block;
  padding: 2px var(--rt-s2);
  border-radius: var(--rt-r-pill);
  background: color-mix(in srgb, var(--rt-risparmio) 14%, transparent);
  color: var(--rt-risparmio);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
}

/* ── Card ───────────────────────────────────────────────────────────── */

.rt-card {
  background: var(--rt-superficie);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-xl);
  padding: var(--rt-s6);
}
.rt-card--segmento { border-left: 3px solid var(--rt-accento, var(--rt-linea)); }

/* ── Etichetta di sezione ───────────────────────────────────────────── */

/* ── La testata di sezione, una per tutte ──────────────────────────────── */

.rt-testa { max-width: 46rem; margin-block-end: clamp(2.5rem, 5vw, 4.5rem); }
.rt-testa h2 {
  margin: var(--rt-s4) 0 0;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: var(--rt-peso-titolo);
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}
.rt-testa p {
  margin: var(--rt-s5) 0 0;
  max-width: 44ch;
  font-size: var(--rt-t-lg);
  line-height: 1.5;
  color: var(--rt-ink-3);
}

.rt-occhiello {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-blu);
  margin-bottom: var(--rt-s4);
}
.rt-occhiello::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--rt-blu);
  flex: none;
}

/* ── Stelle ───────────────────────────────────────────────────────────────
   Un solo componente per tutto il sito: hero, card prodotto, scheda,
   pagina recensioni. Cinque sagome grigie e un livello dorato ritagliato
   alla percentuale esatta del voto, cosi' 4,3 e 4,7 non si somigliano.
   Niente immagini: sono caratteri, quindi nitidi a ogni dimensione e a
   costo zero di rete.                                                     */

.rt-stelle {
  --rt-stelle-dim: 1rem;
  position: relative;
  display: inline-block;
  flex: none;
  font-size: var(--rt-stelle-dim);
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--rt-linea);
  vertical-align: -0.1em;
}
.rt-stelle::before { content: "\2605\2605\2605\2605\2605"; }

.rt-stelle__piene {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  overflow: hidden;
  color: #F0A020;
}
.rt-stelle__piene::before { content: "\2605\2605\2605\2605\2605"; }

.rt-stelle--piccole { --rt-stelle-dim: 0.875rem; }
.rt-stelle--grandi  { --rt-stelle-dim: 1.5rem; }

/* ── Il voto dentro una card ──────────────────────────────────────────────
   Stelle, media e numero di giudizi. Sta qui e non in catalogo.css perche'
   lo stesso pezzo esce nella griglia di catalogo, nella vetrina della home,
   fra i correlati e nel conto: una riga di CSS per sezione vorrebbe dire
   quattro voti che a poco a poco diventano diversi.                       */

.rt-voto {
  display: flex;
  align-items: center;
  gap: var(--rt-s2);
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-2);
  line-height: 1;
}
.rt-voto__quanti { color: var(--rt-ink-3); }

/* ── Badge recensioni ─────────────────────────────────────────────────────
   Compare nella hero e sulle pagine attivita'. E' un link, non un fregio:
   chi guarda un punteggio vuole poterlo verificare, e potergli cliccare
   sopra e' meta' della credibilita'.                                      */

.rt-badge-rec {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  flex-wrap: wrap;
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-3);
  text-decoration: none;
  transition: color var(--rt-transizione);
}
.rt-badge-rec:hover { color: var(--rt-ink-2); }
.rt-badge-rec:hover .rt-badge-rec__testo { text-decoration: underline; }
.rt-badge-rec__media {
  color: var(--rt-ink);
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-forte);
}

.rt-badge-rec--hero {
  margin-top: var(--rt-s8);
  padding-top: var(--rt-s5);
  border-top: 1px solid var(--rt-linea);
  width: 100%;
}

/* ── Testata di pagina ────────────────────────────────────────────────── */

.rt-testata-pagina { max-width: 46rem; }
.rt-testata-pagina h1 {
  font-size: clamp(var(--rt-t-2xl), 5vw, var(--rt-t-3xl));
  letter-spacing: var(--rt-tracking-titolo);
  line-height: var(--rt-interlinea-stretta);
  margin-block: var(--rt-s3) 0;
}
.rt-testata-pagina__lede {
  margin-top: var(--rt-s4);
  font-size: var(--rt-t-lg);
  color: var(--rt-ink-2);
  line-height: 1.45;
}

/* ── Punteggio recensioni ────────────────────────────────────────────── */

.rt-punteggio {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--rt-s12);
  align-items: center;
  margin-top: var(--rt-s10);
  padding: var(--rt-s10);
  background: var(--rt-superficie);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-xl);
}
@media (max-width: 760px) {
  .rt-punteggio { grid-template-columns: 1fr; gap: var(--rt-s8); padding: var(--rt-s6); }
}

.rt-punteggio__sintesi { text-align: center; }
.rt-punteggio__num {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-4xl);
  line-height: 1;
  letter-spacing: var(--rt-tracking-titolo);
  color: var(--rt-ink);
}
.rt-punteggio__sintesi .rt-stelle { margin-top: var(--rt-s3); }
.rt-punteggio__base,
.rt-punteggio__consiglio {
  margin-top: var(--rt-s2);
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-3);
}
.rt-punteggio__consiglio strong { color: var(--rt-ok); }

.rt-barra {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem;
  align-items: center;
  gap: var(--rt-s3);
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-3);
}
.rt-barra + .rt-barra { margin-top: var(--rt-s3); }
.rt-barra__et { color: var(--rt-ink-2); white-space: nowrap; }
.rt-barra__et span { color: #F0A020; }
.rt-barra__num { text-align: right; font-family: var(--rt-font-dati); font-variant-numeric: tabular-nums; font-size: var(--rt-t-xs); }
.rt-barra__pista {
  height: 8px;
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie-2);
  overflow: hidden;
}
.rt-barra__riempi {
  display: block;
  height: 100%;
  border-radius: var(--rt-r-pill);
  background: linear-gradient(90deg, #F0A020, #FFC861);
  /* Le barre crescono quando la pagina si apre: il movimento fa leggere
     la distribuzione invece di saltarla. */
  animation: rt-cresci 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: left center;
}
@keyframes rt-cresci { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .rt-barra__riempi { animation: none; }
}

/* ── Metodo di verifica ──────────────────────────────────────────────── */

.rt-metodo__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--rt-s6);
  margin-top: var(--rt-s6);
}
.rt-metodo__voce {
  padding: var(--rt-s6);
  background: var(--rt-superficie-2);
  border-radius: var(--rt-r-lg);
}
.rt-metodo__voce h3 {
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-forte);
  margin: 0 0 var(--rt-s2);
}
.rt-metodo__voce p { margin: 0; font-size: var(--rt-t-sm); color: var(--rt-ink-2); line-height: var(--rt-interlinea); }
.rt-metodo__nota { margin-top: var(--rt-s6); font-size: var(--rt-t-sm); color: var(--rt-ink-3); }

/* ── Scheda recensione ───────────────────────────────────────────────── */

.rt-rec__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--rt-s5);
  margin-top: var(--rt-s6);
}
.rt-rec {
  display: flex;
  flex-direction: column;
  gap: var(--rt-s3);
  margin: 0;
  padding: var(--rt-s6);
  background: var(--rt-superficie);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-lg);
}
.rt-rec__testa { display: flex; align-items: center; gap: var(--rt-s3); flex-wrap: wrap; }
.rt-rec__verificata {
  font-size: var(--rt-t-xs);
  color: var(--rt-ok);
  background: color-mix(in srgb, var(--rt-ok) 10%, transparent);
  padding: 2px var(--rt-s2);
  border-radius: var(--rt-r-pill);
}
.rt-rec__testo {
  margin: 0;
  font-size: var(--rt-t-sm);
  line-height: var(--rt-interlinea);
  color: var(--rt-ink);
}
.rt-rec__piede {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s1) var(--rt-s3);
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-3);
}
.rt-rec__autore { color: var(--rt-ink-2); font-weight: var(--rt-peso-medio); }
.rt-rec__prodotto { color: var(--rt-blu); text-decoration: none; }
.rt-rec__prodotto:hover { text-decoration: underline; }

/* ── Briciole ─────────────────────────────────────────────────────────── */

/* Erano 13px nel grigio piu' chiaro della scala, cioe' il testo meno
   leggibile di tutta la pagina messo sulla riga che dice dove sei. Adesso
   15px e il grigio di lettura; il separatore resta chiaro, perche' quello
   e' davvero un segno e non una parola. */
.rt-briciole {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rt-s2);
  font-size: var(--rt-t-sm);
  line-height: 1.4;
  color: var(--rt-ink-2);
  margin-bottom: var(--rt-s4);
}

/* ── IL BREADCRUMB NON SI VEDE SUL TELEFONO ───────────────────────────────
   E' SEO-sicuro, e non e' la stessa cosa che toglierlo. Qui resta nel
   documento: i collegamenti ci sono, Google li percorre, e il suo
   percorso nei risultati non viene da qui — viene dai dati strutturati,
   che li scrive il plugin SEO per conto suo. Quello che cambia e' solo
   cosa si vede in uno schermo da 390 pixel, e li' "Home / Shop" sono una
   riga di navigazione sopra una pagina a cui si e' appena arrivati.

   Toglierlo dal markup sarebbe un'altra cosa: sparirebbero due
   collegamenti interni, e quelli servono a Google per capire come e'
   fatto il negozio. Per questo si nasconde e non si cancella.

   Sul grande resta: li' lo spazio c'e', e il percorso dice dove si e'
   dentro un catalogo che ha piu' di un livello.                        */
@media (max-width: 860px) {
  .rt-briciole { display: none; }
}
.rt-briciole a {
  color: var(--rt-ink-2);
  text-decoration: none;
  /* Il bersaglio da toccare sul telefono: la riga e' alta 21px, e sotto i
     24 il dito sbaglia voce. Il margine negativo tiene l'altezza della
     riga invariata. */
  padding-block: var(--rt-s1);
  margin-block: calc(var(--rt-s1) * -1);
}
.rt-briciole a:hover,
.rt-briciole a:focus-visible { color: var(--rt-blu); text-decoration: underline; }
.rt-briciole span[aria-hidden] { color: var(--rt-ink-3); opacity: 0.6; }

/* ── Il pannello ──────────────────────────────────────────────────────────
   Il contenitore che da' forma a una sezione: superficie bianca, angolo
   largo, un filetto al posto dell'ombra.

   Serve perche' una pagina fatta di testo su un fondo uniforme si legge
   come un unico blocco, per quanti titoli ci si mettano: il contenuto
   cambia argomento e lo sfondo non lo dice. Il pannello e' il segno che
   qui comincia un'altra cosa, ed e' lo stesso segno delle card prodotto,
   cosi' la pagina ha una forma sola invece di tante.

   Non ha ombra: il premium moderno separa con il fondo e con i bordi
   sottili, e tre pannelli con l'ombra in fila sembrano tre finestre.    */

.rt-pannello {
  background: var(--rt-superficie);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-2xl);
  padding: clamp(1.5rem, 3.5vw, 3rem);
}

/* Dentro un pannello bianco, le tessere non possono essere bianche: si
   tingono del fondo pagina, che e' il contrario di quello che fanno sulla
   pagina nuda. */
.rt-pannello .rt-tessera {
  background: var(--rt-superficie-2);
  border: 0;
  border-radius: var(--rt-r-lg);
}

@media (max-width: 620px) {
  /* Sul telefono cambia solo quanto respira dentro: a 390px tre centimetri
     di margine interno lascerebbero al testo meno di trecento pixel.

     Qui avevo tolto i bordi laterali per guadagnare due pixel, e il
     risultato era un riquadro arrotondato con il filetto solo sopra e
     sotto: l'arco dell'angolo finiva nel nulla. Due pixel non valgono un
     riquadro che sembra rotto. */
  .rt-pannello {
    border-radius: var(--rt-r-xl);
    padding: var(--rt-s6) var(--rt-s5);
  }
}

/* ── Illustrazioni ────────────────────────────────────────────────────
   Disegni, non fotografie, e si vede che lo sono: nessuna cornice,
   nessuna ombra, appoggiati sul fondo della pagina. Quando arriveranno
   le fotografie prenderanno il loro posto senza cambiare l'impaginazione,
   perche' occupano lo stesso riquadro dei segnaposto.                  */

.rt-illustrazione {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Le illustrazioni d'ambiente sono disegnate 4:3: forzarle a quadrato
   lascerebbe aria sopra e sotto. */
.rt-att-hero__media .rt-illustrazione { aspect-ratio: 4 / 3; }

/* ── Il ritorno in cima ──────────────────────────────────────────────────
   Una capsula verticale che e' anche l'indicatore di lettura.

   Il pulsante "torna su" universale e' una freccia in un tondo, in basso a
   destra, uguale su qualunque sito dal 2010. Questo fa la stessa cosa e
   in piu' dice a che punto si e': dentro la capsula un riempimento
   azzurro sale con lo scorrimento, e a meta' pagina e' a meta'. Due
   risposte in una forma sola, nello spazio di un pollice.

   La percentuale arriva da --rt-letto, che testata.js aggiorna una volta
   per fotogramma: e' una variabile CSS, quindi il browser ridisegna solo
   l'altezza del riempimento e non ricalcola niente.                     */

.rt-su {
  position: fixed;
  inset-inline-end: var(--rt-s5);
  inset-block-end: calc(var(--rt-s5) + 76px + env(safe-area-inset-bottom, 0px));
  z-index: 94;        /* sotto la pastiglia dell'assistente, che sta a 95 */
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  width: 40px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-pill);
  background: color-mix(in srgb, var(--rt-superficie) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: var(--rt-ombra-2);
  color: var(--rt-ink-2);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  pointer-events: none;
  transition: opacity 240ms ease,
              transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              color var(--rt-transizione);
}
.rt-su[hidden] { display: none; }
.rt-su.e-visibile { opacity: 1; transform: none; pointer-events: auto; }
.rt-su:hover { color: var(--rt-blu); }
.rt-su:active { transform: scale(0.96); }
.rt-su:focus-visible { outline: 2px solid var(--rt-blu); outline-offset: 3px; }

/* SUL TELEFONO IL TONDO, E NIENTE ETICHETTA.
   La capsula verticale con la scritta "SU" sta bene dove c'e' spazio. Su
   un telefono e' un rettangolo alto accanto alla pastiglia dell'assistente
   — due forme diverse che fanno lo stesso mestiere, appoggiate una
   sull'altra. Un tondo e' la forma che tutti riconoscono, e il
   riempimento della lettura ci sta dentro uguale. */
@media (max-width: 760px) {
  .rt-su {
    width: 48px;
    height: 48px;
    gap: 0;
  }
  .rt-su__et { display: none; }
}

/* Il riempimento sale dal basso: e' quanto si e' letto, non una
   decorazione. Niente transizione sull'altezza — segue il dito, e una
   transizione su un valore che cambia a ogni fotogramma e' un ritardo
   costante. */
.rt-su__riempi {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: calc(var(--rt-letto, 0) * 1%);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--rt-blu) 22%, transparent),
    color-mix(in srgb, var(--rt-blu) 9%, transparent));
  pointer-events: none;
}

.rt-su__freccia { position: relative; line-height: 0; }

/* La freccia sale di due pixel al passaggio del mouse: dice dove porta. */
.rt-su__freccia svg { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.rt-su:hover .rt-su__freccia svg { transform: translateY(-2px); }

.rt-su__et {
  position: relative;
  font-family: var(--rt-font);
  font-size: 9px;
  font-weight: var(--rt-peso-forte);
  letter-spacing: 0.12em;
  color: var(--rt-ink-3);
}

@media (max-width: 860px) {
  /* Sopra la pastiglia dell'assistente, che a sua volta sta sopra le
     barre in fondo. */
  .rt-su { inset-block-end: calc(var(--rt-giu-h) + 76px); }
  html.e-acquisto-fisso .rt-su { inset-block-end: calc(var(--rt-giu-h) + 160px); }
}

@media (prefers-reduced-motion: reduce) {
  .rt-su { transition-duration: 0ms; }
  .rt-su__freccia svg { transition: none; }
}